diff --git a/components/admin/ManageEmployee.tsx b/components/admin/ManageEmployee.tsx
index 3c49e91..0b2d949 100644
--- a/components/admin/ManageEmployee.tsx
+++ b/components/admin/ManageEmployee.tsx
@@ -2,14 +2,11 @@
 
 import { useAuth } from "@/context/authContext";
 import { useEffect, useState, useMemo } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   CalendarCheck,
   BarChart2,
   Ticket,
-  Activity,
   LucideIcon,
   Users,
 } from "lucide-react";
@@ -38,10 +35,10 @@ type EmployeeProfile = {
   activities: ActivityLog[];
 };
 
-type DepartmentData = {
-  name: string;
-  count: number;
-};
+// type DepartmentData = {
+//   name: string;
+//   count: number;
+// };
 
 const employeeData: Record<string, EmployeeProfile> = {
   EMP001: {
@@ -85,8 +82,8 @@ const employeeData: Record<string, EmployeeProfile> = {
 const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884D8', '#82CA9D', '#FFC658', '#FF6B6B'];
 
 export default function EmployeeDashboard() {
-  const [searchId, setSearchId] = useState<string>("");
-  const [selectedId, setSelectedId] = useState<string>("EMP001");
+  // const [searchId, setSearchId] = useState<string>("");
+  // const [selectedId, setSelectedId] = useState<string>("EMP001");
   const {userDetails}=useUser();
   const [employees,setEmployees]=useState<DocumentData[]>([])
   const [employeesFetched,setEmployeesFetched]=useState<boolean>(false)
@@ -107,7 +104,8 @@ export default function EmployeeDashboard() {
         setEmployeesFetched(true)
       }
       catch(err){
-        alert("something went wrong")
+        alert("something went wrong");
+        console.log(err);
       }
     })()
   },[])
diff --git a/components/admin/ManageTeams.tsx b/components/admin/ManageTeams.tsx
index c59de59..caedadd 100644
--- a/components/admin/ManageTeams.tsx
+++ b/components/admin/ManageTeams.tsx
@@ -1,11 +1,6 @@
 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogTrigger } from '@/components/ui/dialog';
-import { Pencil, PlusCircle, Trash } from 'lucide-react';
 import AddNewTeam from './manageTeams/AddNewTeam';
 
 type Team = {
diff --git a/components/admin/ManageTickets.tsx b/components/admin/ManageTickets.tsx
index bbcee3b..b7c6eb8 100644
--- a/components/admin/ManageTickets.tsx
+++ b/components/admin/ManageTickets.tsx
@@ -72,7 +72,7 @@ export default function ManageTickets() {
     Critical: 'bg-red-100 text-red-600',
   };
 
-  const formatDate = (ts?: any) =>
+  const formatDate = (ts?:any) =>
     ts?.toDate().toLocaleDateString('en-IN', {
       day: 'numeric',
       month: 'short',
diff --git a/components/admin/manageTeams/AddNewTeam.tsx b/components/admin/manageTeams/AddNewTeam.tsx
index 585e013..6071468 100644
--- a/components/admin/manageTeams/AddNewTeam.tsx
+++ b/components/admin/manageTeams/AddNewTeam.tsx
@@ -2,7 +2,7 @@
 import {
     Dialog,
     DialogContent,
-    DialogDescription,
+  
     DialogHeader,
     DialogTitle,
     DialogTrigger,
@@ -18,9 +18,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
-import { useMemo, useRef, useState } from "react"
-import { Button } from "@/components/ui/button"
-import { PlusCircle } from "lucide-react"
+import {  useState } from "react"
 import { DocumentData } from "firebase-admin/firestore"
 import { Textarea } from "@/components/ui/textarea"
 import { TfiControlBackward } from "react-icons/tfi";
@@ -122,7 +120,7 @@ export default function AddNewTeam() {
                                 setEmployeesFetched(true)
                             }
                             catch (err) {
-                                console.log("error while fetching employees for creating new team")
+                                console.log("error while fetching employees for creating new team",err)
                             }
                         }}>
                             <SelectTrigger className="w-full">
diff --git a/components/basic/completeAdminProfile.tsx b/components/basic/completeAdminProfile.tsx
index 152fe80..caa14ab 100644
--- a/components/basic/completeAdminProfile.tsx
+++ b/components/basic/completeAdminProfile.tsx
@@ -1,6 +1,6 @@
 import { firestoreConfig } from "@/config/firestoreConfig";
 import { useAuth } from "@/context/authContext";
-import { addDoc, collection, doc, DocumentData, getDocs, query, serverTimestamp, setDoc, where } from "firebase/firestore";
+import { collection, doc, DocumentData, getDocs, query, serverTimestamp, setDoc, where } from "firebase/firestore";
 import Image from "next/image";
 import { Dispatch, SetStateAction, useState } from "react";
 
diff --git a/components/employee/EmployeeSidebar.tsx b/components/employee/EmployeeSidebar.tsx
index 176cff2..b478a8d 100644
--- a/components/employee/EmployeeSidebar.tsx
+++ b/components/employee/EmployeeSidebar.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { useAuth } from "@/context/authContext";
-import { useRouter } from "next/navigation";
+// import { useRouter } from "next/navigation";
 import { Clock, Users, User, LogOut, CalendarDays, Ticket } from "lucide-react";
 
 interface Props {
@@ -10,7 +10,7 @@ interface Props {
 
 export default function EmployeeSidebar({ active, setActive }: Props) {
   const { signOut } = useAuth();
-  const router = useRouter();
+  // const router = useRouter();
 
   return (
     <aside className="w-64 min-h-screen bg-white border-r p-4 flex flex-col justify-between">
diff --git a/components/employee/LeaveSection.tsx b/components/employee/LeaveSection.tsx
index 7626880..f0c142e 100644
--- a/components/employee/LeaveSection.tsx
+++ b/components/employee/LeaveSection.tsx
@@ -88,35 +88,7 @@ export default function LeaveSection(): React.JSX.Element {
       setProcessing(false)
     }
   };
-  //   const getStatusColor = (status: string): string => {
-  //   switch (status.toLowerCase()) {
-  //     case 'open':
-  //       return 'bg-yellow-100 text-yellow-800';
-  //     case 'in progress':
-  //       return 'bg-blue-100 text-blue-800';
-  //     case 'resolved':
-  //       return 'bg-green-100 text-green-800';
-  //     case 'closed':
-  //       return 'bg-gray-100 text-gray-800';
-  //     default:
-  //       return 'bg-gray-100 text-gray-800';
-  //   }
-  // };
 
-  // const getPriorityColor = (priority: string): string => {
-  //   switch (priority.toLowerCase()) {
-  //     case 'critical':
-  //       return 'bg-red-100 text-red-800';
-  //     case 'high':
-  //       return 'bg-red-100 text-orange-800';
-  //     case 'medium':
-  //       return 'bg-yellow-100 text-yellow-800';
-  //     case 'low':
-  //       return 'bg-green-100 text-green-800';
-  //     default:
-  //       return 'bg-gray-100 text-gray-800';
-  //   }
-  // };
 
   const handleCancel = (): void => {
     // Reset form and close dialog
@@ -144,7 +116,7 @@ export default function LeaveSection(): React.JSX.Element {
         console.log("error while fetching your leaves",err)
       }
     })()
-  },[])
+  })
   return (
     <div className="space-y-6">
       <Card className="w-full max-w-2xl mx-auto">
diff --git a/components/employee/ProfileSection.tsx b/components/employee/ProfileSection.tsx
index a1b35f3..8e3afcc 100644
--- a/components/employee/ProfileSection.tsx
+++ b/components/employee/ProfileSection.tsx
@@ -1,45 +1,110 @@
 'use client';
 
 import { useUser } from "@/context/userContext";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import { ClipboardCopy } from "lucide-react";
 
 export default function ProfileSection() {
   const { userDetails } = useUser();
 
+  const formatDate = (date: any) =>
+    date?.toDate
+      ? date.toDate().toLocaleDateString("en-IN", {
+          day: "numeric",
+          month: "short",
+          year: "numeric",
+        })
+      : "—";
+
   return (
-    <div className="bg-white p-6 rounded-2xl shadow-md border border-gray-100 max-w-3xl mx-auto">
-      <h2 className="text-2xl font-bold text-blue-700 mb-6 border-b pb-2">Profile Information</h2>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4 text-sm text-gray-700">
-        <ProfileRow label="Name" value={userDetails?.name} />
-        <ProfileRow label="Role" value={userDetails?.current_role || userDetails?.role} />
-        <ProfileRow label="Email" value={userDetails?.employee_id || userDetails?.personal_email} />
-        <ProfileRow label="Team" value={userDetails?.team || '—'} />
-        <ProfileRow label="Department" value={userDetails?.department || '—'} />
-        <ProfileRow label="Status" value={userDetails?.current_status || '—'} />
-        <ProfileRow label="Organization" value={userDetails?.organization_name} />
-        <ProfileRow
-          label="Joining Date"
-          value={
-            userDetails?.joining_date
-              ? userDetails.joining_date.toDate().toLocaleDateString("en-IN", {
-                  day: "numeric",
-                  month: "short",
-                  year: "numeric",
-                })
-              : '—'
-          }
-        />
-        <ProfileRow label="Yearly Leaves" value={userDetails?.yearly_leaves?.toString() || '—'} />
+    <div className="bg-gradient-to-br from-blue-50 to-white p-[2px] rounded-3xl shadow-lg max-w-4xl mx-auto mt-10">
+      <div className="bg-white rounded-[22px] p-8 sm:p-10">
+        {/* Header with Avatar */}
+        <div className="flex flex-col sm:flex-row sm:items-center gap-6 mb-10">
+          <div className="relative w-20 h-20">
+            <Avatar className="w-full h-full ring-4 ring-blue-200 shadow-md">
+              <AvatarFallback className="text-lg">
+                {userDetails?.name?.[0] || "E"}
+              </AvatarFallback>
+            </Avatar>
+          </div>
+
+          <div>
+            <h2 className="text-3xl font-bold text-gray-800 tracking-tight">
+              {userDetails?.name || "—"}
+            </h2>
+            <p className="text-blue-600 font-medium mt-1">
+              {userDetails?.current_role || userDetails?.role || "—"}
+            </p>
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="border-t border-dashed border-gray-200 mb-6" />
+
+        {/* Profile Details Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-6 text-sm text-gray-700">
+          <ProfileRow label="Email / Employee ID" value={userDetails?.employee_id || userDetails?.personal_email} copyable />
+          <ProfileRow label="Team" value={userDetails?.team} />
+          <ProfileRow label="Department" value={userDetails?.department} />
+          <ProfileRow label="Status" value={userDetails?.current_status} highlightStatus />
+          <ProfileRow label="Organization" value={userDetails?.organization_name} />
+          <ProfileRow label="Joining Date" value={formatDate(userDetails?.joining_date)} />
+          <ProfileRow label="Yearly Leaves" value={userDetails?.yearly_leaves?.toString()} />
+        </div>
       </div>
     </div>
   );
 }
 
-function ProfileRow({ label, value }: { label: string; value: string | undefined }) {
+function ProfileRow({
+  label,
+  value,
+  copyable = false,
+  highlightStatus = false,
+}: {
+  label: string;
+  value: string | undefined;
+  copyable?: boolean;
+  highlightStatus?: boolean;
+}) {
+  const handleCopy = () => {
+    if (value) navigator.clipboard.writeText(value);
+  };
+
   return (
-    <div>
-      <p className="text-gray-500 font-medium">{label}</p>
-      <p className="text-gray-800">{value || '—'}</p>
+    <div className="flex items-start justify-between gap-3 group">
+      <div>
+        <p className="text-gray-500 font-medium mb-1">{label}</p>
+        {highlightStatus ? (
+          <span
+            className={`inline-block text-xs px-2 py-1 rounded-full font-semibold transition ${
+              value === "Active"
+                ? "bg-green-100 text-green-700"
+                : value === "Inactive"
+                ? "bg-gray-100 text-gray-600"
+                : "bg-yellow-100 text-yellow-800"
+            }`}
+          >
+            {value || "—"}
+          </span>
+        ) : (
+          <p className="text-gray-900 text-sm">{value || "—"}</p>
+        )}
+      </div>
+
+      {copyable && value && (
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleCopy}
+          title="Copy to clipboard"
+          className="opacity-0 group-hover:opacity-100 transition"
+        >
+          <ClipboardCopy className="h-4 w-4 text-gray-400 hover:text-gray-600" />
+        </Button>
+      )}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/components/employee/TeamOverview.tsx b/components/employee/TeamOverview.tsx
index 6071739..5a22539 100644
--- a/components/employee/TeamOverview.tsx
+++ b/components/employee/TeamOverview.tsx
@@ -26,10 +26,7 @@ function getDeadlineStatus(deadline: Timestamp | undefined) {
   return { label: 'Upcoming', color: 'bg-green-100 text-green-600' };
 }
 
-const teams = [
-  { id: 1, name: "UI Team", manager: "Raj Mehra", members: 5 },
-  { id: 2, name: "API Team", manager: "Sonal Gupta", members: 4 },
-];
+
 
 export default function TeamOverview() {
 
@@ -51,7 +48,7 @@ export default function TeamOverview() {
         console.log("error while getting teams", err);
       }
     })()
-  }, [])
+  })
   return (
     <div className="bg-white p-6 rounded-2xl">
       <h2 className="text-2xl font-bold text-blue-700 mb-6 border-b pb-2">
diff --git a/components/employee/TicketsSection.tsx b/components/employee/TicketsSection.tsx
index 0841658..44aee17 100644
--- a/components/employee/TicketsSection.tsx
+++ b/components/employee/TicketsSection.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, ChangeEvent, FormEvent, useEffect } from 'react';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import {
@@ -26,16 +25,16 @@ interface TicketData {
   category: string;
 }
 
-interface Ticket {
-  id: string;
-  title: string;
-  description: string;
-  priority: string;
-  category: string;
-  status: string;
-  createdAt: string;
-  updatedAt: string;
-}
+// interface Ticket {
+//   id: string;
+//   title: string;
+//   description: string;
+//   priority: string;
+//   category: string;
+//   status: string;
+//   createdAt: string;
+//   updatedAt: string;
+// }
 
 export default function TicketsSection(): React.JSX.Element {
   const [ticketData, setTicketData] = useState<TicketData>({
@@ -159,7 +158,7 @@ export default function TicketsSection(): React.JSX.Element {
         console.log("error while fetching tickets", err)
       }
     })()
-  }, [])
+  })
   return (
     <div className="space-y-6">
       {/* Raise Ticket Section */}
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..71e428b
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/package-lock.json b/package-lock.json
index aba237d..3961453 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "finalwebapp",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-dialog": "^1.1.14",
         "@radix-ui/react-label": "^2.1.7",
         "@radix-ui/react-select": "^2.2.5",
@@ -1862,6 +1863,32 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -2310,6 +2337,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -7191,7 +7235,6 @@
       "version": "0.525.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz",
       "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==",
-      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
diff --git a/package.json b/package.json
index 04c2fb3..925d3c4 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-select": "^2.2.5",