diff --git a/docs/api/API_PROJECTS.md b/docs/api/API_PROJECTS.md
new file mode 100644
index 00000000..4bade40a
--- /dev/null
+++ b/docs/api/API_PROJECTS.md
@@ -0,0 +1,415 @@
+# Projects API Documentation
+
+## POST `/api/project`
+
+Create a new project.
+
+**Request Body:**
+
+```json
+{
+  "name": "string",
+  "description": "string (optional)",
+  "domain": "string"
+}
+```
+
+**Success Response (201):**
+
+```json
+{
+  "success": true,
+  "message": "Project created successfully",
+  "data": {
+    "id": "string",
+    "name": "string",
+    "description": "string",
+    "domain": "string",
+    "createdBy": "string",
+    "createdAt": "ISO 8601",
+    "updatedAt": "ISO 8601"
+  }
+}
+```
+
+**Authentication Required:** ✓
+
+---
+
+## PATCH `/api/project`
+
+Assign a student or mentor to a project.
+
+**Request Body:**
+
+```json
+{
+  "projectId": "string",
+  "studentId": "string (optional)",
+  "mentorId": "string (optional)"
+}
+```
+
+**Success Response (200):**
+
+```json
+{
+  "success": true,
+  "message": "Student/Mentor assigned successfully"
+}
+```
+
+**Authentication Required:** ✓
+
+---
+
+## DELETE `/api/project`
+
+Remove a student or mentor from a project.
+
+**Request Body:**
+
+```json
+{
+  "projectId": "string",
+  "studentId": "string (optional)",
+  "mentorId": "string (optional)"
+}
+```
+
+**Success Response (200):**
+
+```json
+{
+  "success": true,
+  "message": "Student/Mentor removed successfully"
+}
+```
+
+**Authentication Required:** ✓
+
+---
+
+## GET `/api/project`
+
+Get all projects.
+
+**Success Response (200):**
+
+```json
+[
+  {
+    "id": "string",
+    "name": "string",
+    "description": "string",
+    "domain": "string",
+    "createdBy": "string",
+    "createdAt": "ISO 8601",
+    "updatedAt": "ISO 8601",
+    "studentCount": "number",
+    "mentorCount": "number"
+  }
+]
+```
+
+---
+
+## GET `/api/project?id=<projectId>`
+
+Get project details.
+
+**Query Parameters:**
+
+- `id` (required) - Project ID
+
+**Success Response (200):**
+
+```json
+{
+  "id": "string",
+  "name": "string",
+  "description": "string",
+  "domain": "string",
+  "createdBy": "string",
+  "createdAt": "ISO 8601",
+  "updatedAt": "ISO 8601",
+  "students": [
+    {
+      "id": "string",
+      "firstName": "string",
+      "lastName": "string",
+      "email": "string"
+    }
+  ],
+  "mentors": [
+    {
+      "id": "string",
+      "firstName": "string",
+      "lastName": "string",
+      "email": "string"
+    }
+  ]
+}
+```
+
+---
+
+## GET `/api/project?id=<projectId>&view=students`
+
+Get students assigned to a project.
+
+**Query Parameters:**
+
+- `id` (required) - Project ID
+- `view` (required) - "students"
+
+**Success Response (200):**
+
+```json
+[
+  {
+    "id": "string",
+    "firstName": "string",
+    "lastName": "string",
+    "email": "string"
+  }
+]
+```
+
+---
+
+## GET `/api/project?id=<projectId>&view=mentors`
+
+Get mentors assigned to a project.
+
+**Query Parameters:**
+
+- `id` (required) - Project ID
+- `view` (required) - "mentors"
+
+**Success Response (200):**
+
+```json
+[
+  {
+    "id": "string",
+    "firstName": "string",
+    "lastName": "string",
+    "email": "string"
+  }
+]
+```
+
+---
+
+## Frontend Hooks: `useProject`
+
+**Location:** `hooks/projects/useProject.ts`
+
+```typescript
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "sonner";
+
+interface CreateProjectRequest {
+  name: string;
+  description?: string;
+  domain: string;
+}
+
+interface CreateProjectResponse {
+  success: boolean;
+  message: string;
+  data: {
+    id: string;
+    name: string;
+    description?: string;
+    domain: string;
+    createdBy: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+interface AssignToProjectRequest {
+  projectId: string;
+  studentId?: string;
+  mentorId?: string;
+}
+
+interface AssignToProjectResponse {
+  success: boolean;
+  message: string;
+}
+
+interface RemoveFromProjectRequest {
+  projectId: string;
+  studentId?: string;
+  mentorId?: string;
+}
+
+interface Project {
+  id: string;
+  name: string;
+  description?: string;
+  domain: string;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+  studentCount?: number;
+  mentorCount?: number;
+}
+```
+
+### `useCreateProject()`
+
+Create a new project.
+
+**Usage:**
+
+```typescript
+const createProject = useCreateProject();
+
+await createProject.mutateAsync({
+  name: "Web Development 101",
+  description: "Learn web development",
+  domain: "web",
+});
+```
+
+---
+
+### `useAssignToProject()`
+
+Assign a student or mentor to a project.
+
+**Usage:**
+
+```typescript
+const assignToProject = useAssignToProject();
+
+// Assign student
+await assignToProject.mutateAsync({
+  projectId: "proj_123",
+  studentId: "user_456",
+});
+
+// Assign mentor
+await assignToProject.mutateAsync({
+  projectId: "proj_123",
+  mentorId: "user_789",
+});
+```
+
+---
+
+### `useRemoveFromProject()`
+
+Remove a student or mentor from a project.
+
+**Usage:**
+
+```typescript
+const removeFromProject = useRemoveFromProject();
+
+// Remove student
+await removeFromProject.mutateAsync({
+  projectId: "proj_123",
+  studentId: "user_456",
+});
+
+// Remove mentor
+await removeFromProject.mutateAsync({
+  projectId: "proj_123",
+  mentorId: "user_789",
+});
+```
+
+---
+
+### `useGetProjects()`
+
+Fetch all projects.
+
+**Usage:**
+
+```typescript
+const { data: projects, isLoading, error } = useGetProjects();
+
+if (isLoading) return <p>Loading...</p>;
+if (error) return <p>Error: {error.message}</p>;
+
+return (
+  <div>
+    {projects?.map((project) => (
+      <div key={project.id}>
+        <h3>{project.name}</h3>
+        <p>{project.description}</p>
+      </div>
+    ))}
+  </div>
+);
+```
+
+---
+
+### `useGetProject(projectId)`
+
+Fetch a single project with students and mentors.
+
+**Usage:**
+
+```typescript
+const { data: project, isLoading, error } = useGetProject(projectId);
+
+if (isLoading) return <p>Loading...</p>;
+if (error) return <p>Error: {error.message}</p>;
+
+return (
+  <div>
+    <h2>{project?.name}</h2>
+    <p>{project?.description}</p>
+    <h3>Students: {project?.students?.length}</h3>
+    <h3>Mentors: {project?.mentors?.length}</h3>
+  </div>
+);
+```
+
+---
+
+### `useGetProjectStudents(projectId)`
+
+Fetch students assigned to a project.
+
+**Usage:**
+
+```typescript
+const { data: students, isLoading } = useGetProjectStudents(projectId);
+
+return (
+  <ul>
+    {students?.map((student) => (
+      <li key={student.id}>{student.firstName} {student.lastName}</li>
+    ))}
+  </ul>
+);
+```
+
+---
+
+### `useGetProjectMentors(projectId)`
+
+Fetch mentors assigned to a project.
+
+**Usage:**
+
+```typescript
+const { data: mentors, isLoading } = useGetProjectMentors(projectId);
+
+return (
+  <ul>
+    {mentors?.map((mentor) => (
+      <li key={mentor.id}>{mentor.firstName} {mentor.lastName}</li>
+    ))}
+  </ul>
+);
+```
diff --git a/docs/api/API_Registration.md b/docs/api/API_Registration.md
new file mode 100644
index 00000000..d42857f6
--- /dev/null
+++ b/docs/api/API_Registration.md
@@ -0,0 +1,148 @@
+# API Guide
+
+Welcome to the Digital Logbook API documentation. This guide provides an overview of available endpoints and how to use them.
+
+## Table of Contents
+
+- [Authentication](#authentication)
+- [Endpoints](#endpoints)
+  - [Projects](#projects)
+  - [Invitations](#invitations)
+- [Error Handling](#error-handling)
+- [Best Practices](#best-practices)
+
+## Authentication
+
+All API endpoints require authentication via JWT tokens. Include the token in the `Authorization` header:
+
+```
+Authorization: Bearer <your_jwt_token>
+```
+
+## Endpoints
+
+### Projects
+
+For detailed project endpoint documentation, see [API_PROJECTS.md](./API_PROJECTS.md)
+
+**Available Operations:**
+
+- Get all projects
+- Get project by ID
+- Create new project
+- Update project
+- Delete project
+- Manage project allocations
+
+### Invitations
+
+For detailed invitation endpoint documentation, see [API_INVITATIONS.md](./API_INVITATIONS.md)
+
+**Available Operations:**
+
+- Send invitations
+- Validate invitation tokens
+- Accept invitations
+- Resend invitations
+
+## Error Handling
+
+All endpoints return standard HTTP status codes:
+
+| Status | Meaning               |
+| ------ | --------------------- |
+| 200    | Success               |
+| 400    | Bad Request           |
+| 401    | Unauthorized          |
+| 404    | Not Found             |
+| 500    | Internal Server Error |
+
+### Error Response Format
+
+```json
+{
+  "error": "Error description"
+}
+```
+
+## Best Practices
+
+### 1. Request Validation
+
+- Always validate input data before sending requests
+- Check that required fields are present
+- Ensure data types match expected values
+
+### 2. Error Handling
+
+- Implement proper try-catch blocks
+- Handle specific error messages from the API
+- Log errors for debugging
+
+### 3. Performance
+
+- Use pagination for large datasets
+- Cache responses when appropriate
+- Implement request debouncing on the frontend
+
+### 4. Security
+
+- Never expose JWT tokens in logs
+- Always use HTTPS in production
+- Validate tokens on the backend
+- Implement rate limiting on sensitive endpoints
+
+### 5. Testing
+
+- Test all endpoints with valid and invalid data
+- Verify error handling
+- Test edge cases and boundary conditions
+
+## Frontend Integration
+
+When using these APIs in the frontend, consider using:
+
+- **TanStack Query (React Query)** for caching and state management
+- **Custom Hooks** for reusable API logic
+- **Error Boundaries** for graceful error handling
+- **Toast Notifications** for user feedback
+
+### Example Hook Pattern
+
+```typescript
+import { useMutation } from "@tanstack/react-query";
+
+export const useYourMutation = () => {
+  return useMutation({
+    mutationFn: async (payload) => {
+      const response = await fetch("/api/endpoint", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!response.ok) {
+        throw new Error("Request failed");
+      }
+
+      return response.json();
+    },
+    onSuccess: (data) => {
+      // Handle success
+    },
+    onError: (error) => {
+      // Handle error
+    },
+  });
+};
+```
+
+## Additional Resources
+
+- [Database Schema](../schema/README.md)
+- [Project Endpoints](./API_PROJECTS.md)
+- [Invitation Endpoints](./API_INVITATIONS.md)
+
+---
+
+For questions or issues, please refer to the main [README.md](../../README.md)
diff --git a/docs/shared-components-guide.md b/docs/shared-components-guide.md
new file mode 100644
index 00000000..a1f1e17d
--- /dev/null
+++ b/docs/shared-components-guide.md
@@ -0,0 +1,1501 @@
+# Shared Admin Components — Developer Guide
+
+> **Who is this for?**
+> This guide is written for beginners who are working on the Digital Logbook super-admin
+> pages. It explains what each shared component does, all the options (props) it accepts,
+> and shows exactly where and how to drop it into the three files you will be editing most:
+>
+> - `server/src/app/admin/projects/page.tsx`
+> - `server/src/app/admin/reports/page.tsx`
+> - `server/src/app/admin/users/page.tsx`
+> - `server/src/components/admin-dashboard/SuperAdminDashboard.tsx`
+
+---
+
+## Table of Contents
+
+- [Shared Admin Components — Developer Guide](#shared-admin-components--developer-guide)
+  - [Table of Contents](#table-of-contents)
+  - [1. Where do the components live?](#1-where-do-the-components-live)
+  - [2. How to import them](#2-how-to-import-them)
+  - [3. Component Reference](#3-component-reference)
+    - [3.1 `AdminPageLayout`](#31-adminpagelayout)
+    - [3.2 `PageHeader`](#32-pageheader)
+    - [3.3 `FilterBar`](#33-filterbar)
+      - [`FilterBar` (root)](#filterbar-root)
+      - [`FilterBar.Field`](#filterbarfield)
+      - [`FilterBar.Search`](#filterbarsearch)
+    - [3.4 `TableStateRows`](#34-tablestaterows)
+    - [3.5 `TableActionMenu`](#35-tableactionmenu)
+    - [3.6 `AdminPagination`](#36-adminpagination)
+    - [3.7 `AdminStatusBadge`](#37-adminstatusbadge)
+    - [3.8 `RoleBadge`](#38-rolebadge)
+    - [3.9 `ConfirmDeleteDialog`](#39-confirmdeletedialog)
+  - [4. Page-by-Page Integration Guide](#4-page-by-page-integration-guide)
+    - [4.1 `projects/page.tsx`](#41-projectspagetsx)
+    - [4.2 `reports/page.tsx`](#42-reportspagetsx)
+    - [4.3 `SuperAdminDashboard.tsx`](#43-superadmindashboardtsx)
+    - [4.4 `users/page.tsx`](#44-userspagetsx)
+  - [5. Quick Cheat Sheet](#5-quick-cheat-sheet)
+
+---
+
+## 1. Where do the components live?
+
+All shared components are stored in one folder:
+
+```
+server/
+  src/
+    components/
+      admin/                        ← shared folder
+        AdminPageLayout.tsx
+        AdminPagination.tsx
+        AdminStatusBadge.tsx
+        ConfirmDeleteDialog.tsx
+        FilterBar.tsx
+        PageHeader.tsx
+        RoleBadge.tsx
+        TableActionMenu.tsx
+        TableStateRows.tsx
+        index.ts                    ← barrel file (single import entry point)
+```
+
+> **What is the barrel file (`index.ts`)?**
+> It re-exports every component so you can import all of them from one short path
+> instead of writing a separate import line for every file.
+
+---
+
+## 2. How to import them
+
+Add this one line at the top of any admin page file, then pick the components you need:
+
+```tsx
+import {
+  AdminPageLayout,
+  PageHeader,
+  FilterBar,
+  TableStateRows,
+  TableActionMenu,
+  AdminPagination,
+  AdminStatusBadge,
+  RoleBadge,
+  ConfirmDeleteDialog,
+} from "@/components/admin";
+```
+
+You do **not** need to import all of them — only the ones you use on that page.
+
+---
+
+## 3. Component Reference
+
+---
+
+### 3.1 `AdminPageLayout`
+
+**File:** `components/admin/AdminPageLayout.tsx`
+
+**What it does:**
+Wraps every admin page with the sidebar (`AsideSidebar`) on the left and a flex
+content area on the right. Instead of repeating the same `<div className="flex min-h-screen">
+<AsideSidebar />` in every file, you just wrap your page content with this component.
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | ✅ Yes | — | Your page content |
+| `className` | `string` | No | `"bg-[#f5f7fb]"` | Tailwind background color class |
+
+**Example:**
+
+```tsx
+// BEFORE (what projects/page.tsx currently does):
+return (
+  <div className="flex min-h-screen bg-[#f1f1f9]">
+    <AsideSidebar />
+    <div className="flex-1 p-8 space-y-6 min-w-0">
+      {/* page content */}
+    </div>
+  </div>
+);
+
+// AFTER (using the shared component):
+return (
+  <AdminPageLayout className="bg-[#f1f1f9]">
+    <div className="flex-1 p-8 space-y-6 min-w-0">
+      {/* page content */}
+    </div>
+  </AdminPageLayout>
+);
+```
+
+> **Tip:** Use `className="bg-[#f1f1f9]"` for projects and reports pages (slightly
+> grey-purple). Use the default (no className) for the users page (light blue-grey).
+
+---
+
+### 3.2 `PageHeader`
+
+**File:** `components/admin/PageHeader.tsx`
+
+**What it does:**
+Renders a page title on the left and an optional action button (like "Create New
+Project") on the right. Comes in two visual styles called `variant`.
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `title` | `string` | ✅ Yes | — | The big heading text |
+| `subtitle` | `string` | No | — | Smaller grey text below the title |
+| `action` | `ReactNode` | No | — | Button or element on the right side |
+| `variant` | `"inline"` \| `"banner"` | No | `"inline"` | Visual style (see below) |
+
+**`variant` explained:**
+
+- `"inline"` — plain title + action inside a Card. Used by Projects and Reports pages.
+- `"banner"` — full-width white bar with a bottom border. Used by the Invitations page.
+
+**Example — Projects page (inline):**
+
+```tsx
+// BEFORE:
+<div className="flex items-center justify-between">
+  <h1 className="text-page-title text-[#0A0A0A]">Projects</h1>
+  <Button onClick={() => setShowCreate(true)}>
+    + Create New Project
+  </Button>
+</div>
+
+// AFTER:
+<PageHeader
+  title="Projects"
+  action={
+    <Button
+      className="bg-[#0A0A0A] text-white hover:bg-[#333]"
+      onClick={() => { setCreateForm(EMPTY_FORM); setShowCreate(true); }}
+    >
+      + Create New Project
+    </Button>
+  }
+/>
+```
+
+**Example — Reports page (inline with disabled button):**
+
+```tsx
+<PageHeader
+  title="Reports"
+  action={
+    <Button
+      className="bg-[#0A0A0A] text-white hover:bg-[#333]"
+      disabled={isExporting || isLoading}
+      onClick={generatePDF}
+    >
+      {isExporting ? "Generating..." : "Generate Report"}
+    </Button>
+  }
+/>
+```
+
+---
+
+### 3.3 `FilterBar`
+
+**File:** `components/admin/FilterBar.tsx`
+
+**What it does:**
+Renders a styled horizontal bar containing filter dropdowns and/or a search box.
+It is a **compound component**, meaning it has two built-in sub-components you use
+as child tags: `FilterBar.Field` and `FilterBar.Search`.
+
+#### `FilterBar` (root)
+Just a styled wrapper. Put `FilterBar.Field` and `FilterBar.Search` inside it.
+
+#### `FilterBar.Field`
+
+Wraps one filter control (a `<Select>`, a date input, etc.) with a small uppercase
+label above it.
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `label` | `string` | ✅ Yes | Short label shown above the control (e.g. `"Role"`) |
+| `children` | `ReactNode` | ✅ Yes | The actual filter control |
+| `className` | `string` | No | Extra Tailwind classes |
+
+#### `FilterBar.Search`
+
+A pre-styled search input with a magnifier icon. Automatically floats to the right.
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `value` | `string` | ✅ Yes | — | Current search text (from your state) |
+| `onChange` | `(value: string) => void` | ✅ Yes | — | Called every time the user types |
+| `placeholder` | `string` | No | `"Search..."` | Input placeholder text |
+
+**Example — Projects page (domain filter only, no search):**
+
+```tsx
+// BEFORE:
+<div className="flex flex-wrap gap-3 items-center">
+  <Select value={domainFilter} onValueChange={(v) => { setDomainFilter(v); setPage(1); }}>
+    <SelectTrigger className="w-[140px] bg-white border-[#E5E5E5]">
+      <SelectValue placeholder="Domain" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="all">All Domains</SelectItem>
+      <SelectItem value="software">Software</SelectItem>
+      {/* ... */}
+    </SelectContent>
+  </Select>
+</div>
+
+// AFTER:
+<FilterBar>
+  <FilterBar.Field label="Domain">
+    <Select
+      value={domainFilter}
+      onValueChange={(v) => { setDomainFilter(v); setPage(1); }}
+    >
+      <SelectTrigger className="w-[140px] bg-white border-[#E5E5E5]">
+        <SelectValue placeholder="Domain" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Domains</SelectItem>
+        <SelectItem value="software">Software</SelectItem>
+        <SelectItem value="film">Film</SelectItem>
+        <SelectItem value="training">Training</SelectItem>
+        <SelectItem value="research">Research</SelectItem>
+        <SelectItem value="other">Other</SelectItem>
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+</FilterBar>
+```
+
+**Example — Reports page (project + mentor + date filters):**
+
+```tsx
+<FilterBar>
+  <FilterBar.Field label="Project">
+    <Select value={projectFilter} onValueChange={(v) => { setProjectFilter(v); setPage(1); }}>
+      <SelectTrigger className="w-[160px]"><SelectValue placeholder="All Projects" /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Projects</SelectItem>
+        {projectOptions.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Field label="Mentor">
+    <Select value={mentorFilter} onValueChange={(v) => { setMentorFilter(v); setPage(1); }}>
+      <SelectTrigger className="w-[160px]"><SelectValue placeholder="All Mentors" /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Mentors</SelectItem>
+        {mentorOptions.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Field label="From">
+    <input
+      type="date"
+      value={dateFrom}
+      max={dateTo || undefined}
+      onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
+      className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm bg-white"
+    />
+  </FilterBar.Field>
+
+  <FilterBar.Field label="To">
+    <input
+      type="date"
+      value={dateTo}
+      min={dateFrom || undefined}
+      onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
+      className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm bg-white"
+    />
+  </FilterBar.Field>
+</FilterBar>
+```
+
+---
+
+### 3.4 `TableStateRows`
+
+**File:** `components/admin/TableStateRows.tsx`
+
+**What it does:**
+Renders a single full-width row inside `<TableBody>` to show one of three states:
+**loading**, **error**, or **empty**. Without this component, every page manually
+writes three separate `if` blocks inside the table body. Now you write it once.
+
+> ⚠️ **Important:** Place this component as the **first child** inside `<TableBody>`.
+> The regular data rows come after it.
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `colSpan` | `number` | ✅ Yes | — | How many columns the table has (to span the full width) |
+| `loading` | `boolean` | ✅ Yes | — | `true` while data is being fetched |
+| `error` | `string \| boolean \| null` | No | — | Pass your error message or `true`; pass `null`/`false` when there is no error |
+| `empty` | `boolean` | No | — | `true` when the data array has zero items |
+| `loadingMessage` | `string` | No | `"Loading..."` | Text shown while loading |
+| `emptyMessage` | `string` | No | `"No records found."` | Text shown when empty |
+
+**Example — Projects page (7 columns):**
+
+```tsx
+// BEFORE:
+<TableBody>
+  {loading && (
+    <TableRow>
+      <TableCell colSpan={7} className="text-center py-12 text-[#737373]">
+        Loading projects…
+      </TableCell>
+    </TableRow>
+  )}
+  {!loading && displayedProjects.length === 0 && (
+    <TableRow>
+      <TableCell colSpan={7} className="text-center py-12 text-[#737373]">
+        No projects found.
+      </TableCell>
+    </TableRow>
+  )}
+  {displayedProjects.map((project) => (
+    <TableRow key={project.id}>...</TableRow>
+  ))}
+</TableBody>
+
+// AFTER:
+<TableBody>
+  <TableStateRows
+    colSpan={7}
+    loading={loading}
+    empty={!loading && displayedProjects.length === 0}
+    loadingMessage="Loading projects…"
+    emptyMessage="No projects found."
+  />
+  {!loading && displayedProjects.map((project) => (
+    <TableRow key={project.id}>...</TableRow>
+  ))}
+</TableBody>
+```
+
+**Example — Reports page (4 columns, includes error state):**
+
+```tsx
+<TableBody>
+  <TableStateRows
+    colSpan={4}
+    loading={isLoading}
+    error={fetchError}
+    empty={!isLoading && visibleReports.length === 0}
+    loadingMessage="Loading reports..."
+    emptyMessage="No reports found for the selected filters."
+  />
+  {!isLoading && !fetchError && visibleReports.map((report) => (
+    <TableRow key={report.id}>...</TableRow>
+  ))}
+</TableBody>
+```
+
+---
+
+### 3.5 `TableActionMenu`
+
+**File:** `components/admin/TableActionMenu.tsx`
+
+**What it does:**
+Renders the three-dot (**⋮**) button at the end of each table row that opens a
+dropdown menu with actions like "View Details", "Edit", or "Delete".
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `items` | `ActionItem[]` | ✅ Yes | — | Array of menu items (see below) |
+| `ariaLabel` | `string` | No | `"Row actions"` | Screen reader label for the button |
+
+**`ActionItem` object shape:**
+
+| Field | Type | Required | Default | Description |
+|-------|------|----------|---------|-------------|
+| `label` | `string` | ✅ Yes | — | Text shown in the menu |
+| `onSelect` | `() => void` | ✅ Yes | — | Function called when user clicks this item |
+| `variant` | `"default"` \| `"danger"` | No | `"default"` | `"danger"` makes the text red |
+| `icon` | `ReactNode` | No | — | Icon shown before the label |
+| `separator` | `boolean` | No | `false` | Draws a divider line **above** this item |
+
+**Example — Projects page:**
+
+```tsx
+// BEFORE:
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="ghost" size="icon" className="h-8 w-8 text-[#737373]">
+      <MoreVertical size={16} />
+    </Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent align="end" className="w-44">
+    <DropdownMenuItem onSelect={() => setViewProject(project)}>View Details</DropdownMenuItem>
+    <DropdownMenuItem onSelect={() => openEdit(project)}>Edit Project</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem
+      className="text-red-600 focus:text-red-600 focus:bg-red-50"
+      onSelect={() => setDeleteId(project.id)}
+    >
+      <Trash2 size={14} className="mr-2" /> Delete Project
+    </DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+
+// AFTER:
+<TableActionMenu
+  ariaLabel={`Actions for ${project.name}`}
+  items={[
+    { label: "View Details",   onSelect: () => setViewProject(project) },
+    { label: "Edit Project",   onSelect: () => openEdit(project) },
+    {
+      label: "Delete Project",
+      onSelect: () => setDeleteId(project.id),
+      variant: "danger",
+      separator: true,
+      icon: <Trash2 size={14} />,
+    },
+  ]}
+/>
+```
+
+---
+
+### 3.6 `AdminPagination`
+
+**File:** `components/admin/AdminPagination.tsx`
+
+**What it does:**
+Renders the pagination footer at the bottom of a table. Shows "Showing X to Y of Z
+results" on the left and page number buttons (Previous / 1 / 2 / 3 / Next) on the right.
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `page` | `number` | ✅ Yes | — | Current active page number (starts at 1) |
+| `totalPages` | `number` | ✅ Yes | — | Total number of pages |
+| `total` | `number` | ✅ Yes | — | Total number of records (after filtering) |
+| `itemsPerPage` | `number` | No | `10` | Used to calculate the "Showing X to Y" label |
+| `onPageChange` | `(page: number) => void` | ✅ Yes | — | Called when user clicks a page button |
+
+**Example — Projects page (`ITEMS_PER_PAGE = 10`):**
+
+```tsx
+// BEFORE (inline pagination block):
+<div className="flex items-center justify-between px-6 py-4 border-t border-[#E5E5E5]">
+  <p className="text-sm text-[#737373]">
+    Showing <span>{...}</span> to <span>{...}</span> of <span>{filtered.length}</span> results
+  </p>
+  <Pagination className="w-auto">
+    {/* ... many lines of PaginationItem code ... */}
+  </Pagination>
+</div>
+
+// AFTER:
+<AdminPagination
+  page={currentPage}
+  totalPages={totalPages}
+  total={filtered.length}
+  itemsPerPage={ITEMS_PER_PAGE}
+  onPageChange={setPage}
+/>
+```
+
+**Example — Reports page (`ITEMS_PER_PAGE = 5`):**
+
+```tsx
+<AdminPagination
+  page={safePage}
+  totalPages={totalPages}
+  total={filteredReports.length}
+  itemsPerPage={ITEMS_PER_PAGE}
+  onPageChange={setPage}
+/>
+```
+
+> **Where to place it:** Put it directly after the closing `</Table>` tag, still inside
+> the same `<Card>`.
+
+---
+
+### 3.7 `AdminStatusBadge`
+
+**File:** `components/admin/AdminStatusBadge.tsx`
+
+**What it does:**
+Shows a small coloured pill with a status label. Replaces the two separate
+`StatusBadge` files that existed before. Works for all three status types:
+
+| Usage Context | Pass this value | Shows |
+|---------------|----------------|-------|
+| Invitation | `"Pending"` | 🟡 Pending |
+| Invitation | `"Accepted"` | 🟢 Active |
+| Invitation | `"Expired"` | 🔴 Expired |
+| User | `"Active"` | 🔵 Active |
+| User | `"Inactive"` | ⚪ Inactive |
+| Project | `"active"` | 🟢 Active |
+| Project | `"pending"` | 🟡 Pending |
+| Project | `"delayed"` | 🔴 Delayed |
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `status` | `string` | ✅ Yes | One of the status values listed above |
+
+**Example — inside a table row:**
+
+```tsx
+// Project status in RecentProjectsTable:
+<TableCell>
+  <AdminStatusBadge status={project.status} />
+</TableCell>
+
+// Invitation status:
+<TableCell>
+  <AdminStatusBadge status={inv.status} />
+</TableCell>
+```
+
+---
+
+### 3.8 `RoleBadge`
+
+**File:** `components/admin/RoleBadge.tsx`
+
+**What it does:**
+Shows a small coloured pill for user roles. Accepts both the API format
+(`"student"`, `"superAdmin"`) and the display format (`"Student"`, `"SuperAdmin"`).
+
+| Role value | Colour |
+|------------|--------|
+| `"student"` / `"Student"` | Grey |
+| `"mentor"` / `"Mentor"` | Green |
+| `"superAdmin"` / `"SuperAdmin"` | Indigo/Purple |
+
+**Props:**
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `role` | `string` | ✅ Yes | Role value (see table above) |
+
+**Example:**
+
+```tsx
+// Inside a table row:
+<TableCell>
+  <RoleBadge role={user.role} />
+</TableCell>
+
+// Hardcoded value:
+<RoleBadge role="superAdmin" />
+```
+
+---
+
+### 3.9 `ConfirmDeleteDialog`
+
+**File:** `components/admin/ConfirmDeleteDialog.tsx`
+
+**What it does:**
+Shows a confirmation popup (modal) when the user wants to delete something. Has a
+red "Delete" button and a "Cancel" button. Disables both buttons and shows "Deleting…"
+while the delete operation is in progress.
+
+**Props:**
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `open` | `boolean` | ✅ Yes | — | `true` = dialog is visible |
+| `onOpenChange` | `(open: boolean) => void` | ✅ Yes | — | Called when user closes the dialog |
+| `onConfirm` | `() => void` | ✅ Yes | — | Called when user clicks the Delete button |
+| `isPending` | `boolean` | ✅ Yes | — | `true` while the delete is in progress |
+| `title` | `string` | No | `"Confirm Delete"` | Heading text inside the dialog |
+| `description` | `string` | No | `"This action cannot be undone."` | Warning text |
+| `confirmLabel` | `string` | No | `"Delete"` | Text on the red button |
+
+**Example — Projects page:**
+
+```tsx
+// You need these two state variables somewhere above your return():
+const [deleteId, setDeleteId] = useState<string | null>(null);
+const [deleting, setDeleting] = useState(false);
+
+// The dialog tag goes OUTSIDE the main return div, at the bottom of the component:
+<ConfirmDeleteDialog
+  open={!!deleteId}
+  onOpenChange={(open) => !open && setDeleteId(null)}
+  onConfirm={handleDelete}
+  isPending={deleting}
+  title="Delete Project"
+  description="This will permanently delete the project and all associated data. This action cannot be undone."
+/>
+```
+
+**Example — Reports page (reports don't have delete but if added):**
+
+```tsx
+<ConfirmDeleteDialog
+  open={!!deleteId}
+  onOpenChange={(open) => !open && setDeleteId(null)}
+  onConfirm={handleDelete}
+  isPending={isDeleting}
+  title="Delete Report"
+  description="This will permanently remove this report entry."
+  confirmLabel="Yes, Delete"
+/>
+```
+
+> **How to trigger it:** When the user clicks "Delete" in the `TableActionMenu`,
+> set the delete ID: `onSelect: () => setDeleteId(project.id)`.
+> The dialog becomes visible because `open={!!deleteId}` becomes `true`.
+
+---
+
+## 4. Page-by-Page Integration Guide
+
+---
+
+### 4.1 `projects/page.tsx`
+
+**File:** `server/src/app/admin/projects/page.tsx`
+
+**Components to use and where:**
+
+```
+projects/page.tsx
+│
+├── 1. AdminPageLayout          ← wraps the entire return()
+├── 2. PageHeader               ← replaces the title + "Create New Project" button div
+├── 3. FilterBar                ← replaces the domain filter div
+│      └── FilterBar.Field      ← wraps the Select dropdown
+├── 4. TableStateRows           ← first child inside <TableBody>
+├── 5. TableActionMenu          ← inside each <TableRow>, last <TableCell>
+├── 6. AdminPagination          ← replaces the pagination div below </Table>
+└── 7. ConfirmDeleteDialog      ← replaces the AlertDialog for project deletion
+```
+
+**Step-by-step:**
+
+**Step 1** — Add the import at the top of the file:
+```tsx
+import {
+  AdminPageLayout,
+  PageHeader,
+  FilterBar,
+  TableStateRows,
+  TableActionMenu,
+  AdminPagination,
+  ConfirmDeleteDialog,
+} from "@/components/admin";
+```
+
+**Step 2** — Wrap the return with `AdminPageLayout`:
+```tsx
+// Find this at the start of return():
+<div className="flex min-h-screen bg-[#f1f1f9]">
+  <AsideSidebar />
+  <div className="flex-1 p-8 space-y-6 min-w-0">
+
+// Replace with:
+<AdminPageLayout className="bg-[#f1f1f9]">
+  <div className="flex-1 p-8 space-y-6 min-w-0">
+```
+Also remove `import AsideSidebar from "@/components/AsideSidebar"` (no longer needed directly).
+
+**Step 3** — Replace the page title block:
+```tsx
+// Find:
+<div className="flex items-center justify-between">
+  <h1 className="text-page-title text-[#0A0A0A]">Projects</h1>
+  <Button className="bg-[#0A0A0A] ..." onClick={() => { ... }}>
+    + Create New Project
+  </Button>
+</div>
+
+// Replace with:
+<PageHeader
+  title="Projects"
+  action={
+    <Button
+      className="bg-[#0A0A0A] text-white hover:bg-[#333] flex items-center gap-2"
+      onClick={() => { setCreateForm(EMPTY_FORM); setShowCreate(true); }}
+    >
+      + Create New Project
+    </Button>
+  }
+/>
+```
+
+**Step 4** — Replace the filter div:
+```tsx
+// Find:
+<div className="flex flex-wrap gap-3 items-center">
+  <Select value={domainFilter} ...>
+    ...
+  </Select>
+  {domainFilter !== "all" && <Button ...>Reset</Button>}
+</div>
+
+// Replace with:
+<FilterBar>
+  <FilterBar.Field label="Domain">
+    <Select
+      value={domainFilter}
+      onValueChange={(v) => { setDomainFilter(v); setPage(1); }}
+    >
+      <SelectTrigger className="w-[140px] bg-white border-[#E5E5E5]">
+        <SelectValue placeholder="Domain" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Domains</SelectItem>
+        <SelectItem value="software">Software</SelectItem>
+        <SelectItem value="film">Film</SelectItem>
+        <SelectItem value="training">Training</SelectItem>
+        <SelectItem value="research">Research</SelectItem>
+        <SelectItem value="other">Other</SelectItem>
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+  {domainFilter !== "all" && (
+    <Button variant="ghost" className="text-[#737373]" onClick={() => { setDomainFilter("all"); setPage(1); }}>
+      Reset
+    </Button>
+  )}
+</FilterBar>
+```
+
+**Step 5** — Replace loading/empty rows inside `<TableBody>`:
+```tsx
+// Find these two if-blocks inside <TableBody>:
+{loading && ( <TableRow>...</TableRow> )}
+{!loading && displayedProjects.length === 0 && ( <TableRow>...</TableRow> )}
+
+// Replace with ONE line:
+<TableStateRows
+  colSpan={7}
+  loading={loading}
+  empty={!loading && displayedProjects.length === 0}
+  loadingMessage="Loading projects…"
+  emptyMessage="No projects found."
+/>
+```
+
+**Step 6** — Replace the action dropdown in each row:
+```tsx
+// Find the <DropdownMenu>...</DropdownMenu> inside the last <TableCell>:
+
+// Replace with:
+<TableActionMenu
+  ariaLabel={`Actions for ${project.name}`}
+  items={[
+    { label: "View Details",  onSelect: () => setViewProject(project) },
+    { label: "Edit Project",  onSelect: () => openEdit(project) },
+    {
+      label: "Delete Project",
+      onSelect: () => setDeleteId(project.id),
+      variant: "danger",
+      separator: true,
+      icon: <Trash2 size={14} />,
+    },
+  ]}
+/>
+```
+
+**Step 7** — Replace the pagination div:
+```tsx
+// Find the div with "Showing ... to ... of ... results" and the <Pagination> block
+
+// Replace the entire div with:
+<AdminPagination
+  page={currentPage}
+  totalPages={totalPages}
+  total={filtered.length}
+  itemsPerPage={ITEMS_PER_PAGE}
+  onPageChange={setPage}
+/>
+```
+
+**Step 8** — Replace the delete AlertDialog:
+```tsx
+// Find:
+<AlertDialog open={!!deleteId} onOpenChange={(open) => !open && setDeleteId(null)}>
+  <AlertDialogContent>
+    ...
+  </AlertDialogContent>
+</AlertDialog>
+
+// Replace with:
+<ConfirmDeleteDialog
+  open={!!deleteId}
+  onOpenChange={(open) => !open && setDeleteId(null)}
+  onConfirm={handleDelete}
+  isPending={deleting}
+  title="Delete Project"
+  description="This will permanently delete the project and all associated data. This action cannot be undone."
+/>
+```
+
+**Imports you can now REMOVE** from the file after this refactor:
+- `import AsideSidebar from "@/components/AsideSidebar"`
+- `AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle` from `@/components/ui/alert-dialog`
+- `MoreVertical` from `lucide-react`
+- `Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious` from `@/components/ui/pagination`
+- `DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger` from `@/components/dropdown-menu`
+
+---
+
+### 4.2 `reports/page.tsx`
+
+**File:** `server/src/app/admin/reports/page.tsx`
+
+**Components to use and where:**
+
+```
+reports/page.tsx
+│
+├── 1. AdminPageLayout          ← wraps the entire return()
+├── 2. PageHeader               ← replaces the title + "Generate Report" button div
+├── 3. FilterBar                ← replaces the filter div above the table
+│      ├── FilterBar.Field      ← wraps each Select and date input
+├── 4. TableStateRows           ← first child inside <TableBody>
+└── 5. AdminPagination          ← replaces the pagination div below </Table>
+```
+
+> Reports page has **no delete** and **no action dropdown**, so `ConfirmDeleteDialog`,
+> `TableActionMenu`, `RoleBadge` and `AdminStatusBadge` are not needed here.
+
+**Step 1** — Add the import:
+```tsx
+import {
+  AdminPageLayout,
+  PageHeader,
+  FilterBar,
+  TableStateRows,
+  AdminPagination,
+} from "@/components/admin";
+```
+
+**Step 2** — Wrap with `AdminPageLayout`:
+```tsx
+// Find:
+<div className="flex min-h-screen bg-[#f1f1f9]">
+  <AsideSidebar />
+  <div className="flex-1 p-8 space-y-6">
+
+// Replace with:
+<AdminPageLayout className="bg-[#f1f1f9]">
+  <div className="flex-1 p-8 space-y-6">
+```
+
+**Step 3** — Replace the title block:
+```tsx
+// Find:
+<div className="flex items-center justify-between">
+  <h1 className="text-page-title text-[#0A0A0A]">Reports</h1>
+  <Button className="bg-[#0A0A0A] ..." disabled={...} onClick={generatePDF}>
+    {isExporting ? "Generating..." : "Generate Report"}
+  </Button>
+</div>
+
+// Replace with:
+<PageHeader
+  title="Reports"
+  action={
+    <Button
+      className="bg-[#0A0A0A] text-white hover:bg-[#333]"
+      disabled={isExporting || isLoading}
+      onClick={generatePDF}
+    >
+      {isExporting ? "Generating..." : "Generate Report"}
+    </Button>
+  }
+/>
+```
+
+**Step 4** — Replace the filter section:
+```tsx
+// Find the div that contains the Project, Mentor, From, To selects and the Reset button
+
+// Replace with:
+<FilterBar>
+  <FilterBar.Field label="Project">
+    <Select value={projectFilter} onValueChange={(v) => { setProjectFilter(v); setPage(1); }}>
+      <SelectTrigger className="w-[160px]"><SelectValue placeholder="All Projects" /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Projects</SelectItem>
+        {projectOptions.map((p) => <SelectItem key={p} value={p}>{p}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Field label="Mentor">
+    <Select value={mentorFilter} onValueChange={(v) => { setMentorFilter(v); setPage(1); }}>
+      <SelectTrigger className="w-[160px]"><SelectValue placeholder="All Mentors" /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Mentors</SelectItem>
+        {mentorOptions.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Field label="From">
+    <input type="date" value={dateFrom} max={dateTo || undefined}
+      onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
+      className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm bg-white" />
+  </FilterBar.Field>
+
+  <FilterBar.Field label="To">
+    <input type="date" value={dateTo} min={dateFrom || undefined}
+      onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
+      className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm bg-white" />
+  </FilterBar.Field>
+
+  <Button variant="ghost" className="text-[#737373] hover:text-[#0A0A0A]" onClick={resetFilters}>
+    Reset
+  </Button>
+</FilterBar>
+```
+
+**Step 5** — Replace loading/error/empty rows inside `<TableBody>`:
+```tsx
+<TableStateRows
+  colSpan={4}
+  loading={isLoading}
+  error={fetchError}
+  empty={!isLoading && visibleReports.length === 0}
+  loadingMessage="Loading reports..."
+  emptyMessage="No reports found for the selected filters."
+/>
+```
+
+**Step 6** — Replace the pagination block:
+```tsx
+<AdminPagination
+  page={safePage}
+  totalPages={totalPages}
+  total={filteredReports.length}
+  itemsPerPage={ITEMS_PER_PAGE}
+  onPageChange={setPage}
+/>
+```
+
+**Imports you can now REMOVE:**
+- `import AsideSidebar from "@/components/AsideSidebar"`
+- `Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious` from `@/components/ui/pagination`
+
+---
+
+### 4.3 `SuperAdminDashboard.tsx`
+
+**File:** `server/src/components/admin-dashboard/SuperAdminDashboard.tsx`
+
+**Components to use and where:**
+
+```
+SuperAdminDashboard.tsx
+│
+├── 1. AdminPageLayout          ← wraps the entire return()
+└── 2. AdminStatusBadge         ← inside RecentProjectsTable for project status
+```
+
+> The dashboard already has its own `DashboardHeader`, `StatsGrid`, and
+> `RecentProjectsTable` sub-components, so most of the heavy lifting is done.
+> The main gain here is replacing `AsideSidebar` with `AdminPageLayout` and
+> adopting `AdminStatusBadge` in `RecentProjectsTable.tsx`.
+
+**Step 1** — Add the import in `SuperAdminDashboard.tsx`:
+```tsx
+import { AdminPageLayout } from "@/components/admin";
+```
+
+**Step 2** — Wrap the return:
+```tsx
+// Find:
+return (
+  <div className="flex min-h-screen">
+    <AsideSidebar />
+    <div className="flex-1 ...">
+
+// Replace with:
+return (
+  <AdminPageLayout>
+    <div className="flex-1 ...">
+```
+
+**Step 3** — In `RecentProjectsTable.tsx`, adopt `AdminStatusBadge`:
+```tsx
+// Add import at the top of RecentProjectsTable.tsx:
+import { AdminStatusBadge } from "@/components/admin";
+
+// Find the existing StatusBadge usage:
+import StatusBadge, { ProjectStatus } from "./StatusBadge";
+// ...
+<StatusBadge status={project.status} />
+
+// Replace with:
+<AdminStatusBadge status={project.status} />
+```
+
+This means you no longer need `components/admin-dashboard/StatusBadge.tsx` for new
+work — the unified `AdminStatusBadge` handles it.
+
+---
+
+### 4.4 `users/page.tsx`
+
+**File:** `server/src/app/admin/users/page.tsx`
+
+**What this page does:**
+Lists every user registered in the system. Admins can filter by role and status,
+search by name/email/ID, view a user's full details, change their active status,
+and delete accounts.
+
+**Components used from `@/components/admin`:**
+
+| Shared Component | Replaces |
+|-----------------|----------|
+| `AdminPageLayout` | `<div className="flex min-h-screen"> <AsideSidebar />` |
+| `PageHeader` | Inline title + subtitle `<div>` |
+| `FilterBar` + `.Field` + `.Search` | Hand-rolled filter bar with custom label `<p>` tags |
+| `TableStateRows` | Three separate loading / error / empty `<TableRow>` blocks |
+| `TableActionMenu` | `<DropdownMenu>` in each row |
+| `RoleBadge` | `roleClass()` helper + inline `<span>` |
+| `AdminStatusBadge` | `statusClass()` helper + inline `<span>` |
+| `AdminPagination` | Showing-count `<p>` + `<Pagination>` block |
+| `ConfirmDeleteDialog` | The delete `<AlertDialog>` |
+
+> **Note — Change Status dialog:** The users page has a **second** dialog
+> (`statusUser` / `handleChangeStatus`) that toggles a user between Active and
+> Inactive. There is no shared component for this yet, so keep that `<AlertDialog>`
+> block as-is for now.
+
+---
+
+#### Step 1 — Add the import
+
+At the top of `users/page.tsx`, add one import line and remove the imports that
+are no longer needed:
+
+```tsx
+// ADD this line:
+import {
+  AdminPageLayout,
+  PageHeader,
+  FilterBar,
+  TableStateRows,
+  TableActionMenu,
+  RoleBadge,
+  AdminStatusBadge,
+  AdminPagination,
+  ConfirmDeleteDialog,
+} from "@/components/admin";
+
+// REMOVE these (they are now covered by the shared components above):
+// import AsideSidebar from "@/components/AsideSidebar";
+// import { EllipsisVertical, Search } from "lucide-react"; // ← Search only; keep EllipsisVertical if used elsewhere
+// import { AlertDialog, AlertDialogAction, AlertDialogCancel,
+//   AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
+//   AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"; // Keep ONE block for the Change Status dialog
+// import { Pagination, PaginationContent, PaginationEllipsis,
+//   PaginationItem, PaginationLink } from "@/components/ui/pagination";
+// import { DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+//   DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/dropdown-menu";
+```
+
+> **Tip:** Keep the `AlertDialog` import — you still need it for the **Change Status**
+> dialog. Remove everything else that the shared components replace.
+
+---
+
+#### Step 2 — Wrap with `AdminPageLayout`
+
+```tsx
+// BEFORE:
+return (
+  <>
+    <div className="flex min-h-screen bg-[#f5f7fb]">
+      <AsideSidebar />
+      <div className="flex-1 p-5 md:p-8">
+        {/* ... */}
+      </div>
+    </div>
+    {/* dialogs below */}
+  </>
+);
+
+// AFTER:
+return (
+  <>
+    <AdminPageLayout>
+      <div className="flex-1 p-5 md:p-8">
+        {/* ... */}
+      </div>
+    </AdminPageLayout>
+    {/* dialogs below */}
+  </>
+);
+```
+
+> `AdminPageLayout` uses `bg-[#f5f7fb]` as its default background — exactly what
+> the users page already used, so no `className` override is needed.
+
+---
+
+#### Step 3 — Replace the title block with `PageHeader`
+
+```tsx
+// BEFORE:
+<div>
+  <h1 className="text-page-title text-slate-900">User Administration</h1>
+  <p className="mt-1 text-sm text-slate-500">
+    Manage system users, define their platform roles, and monitor account statuses.
+  </p>
+</div>
+
+// AFTER:
+<PageHeader
+  title="User Administration"
+  subtitle="Manage system users, define their platform roles, and monitor account statuses."
+/>
+```
+
+---
+
+#### Step 4 — Replace the filter bar with `FilterBar`
+
+```tsx
+// BEFORE:
+<div className="flex flex-wrap items-end gap-3 rounded-lg border border-[#e4e7ed] bg-[#f8fafc] p-3">
+  <div className="space-y-1">
+    <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">Role</p>
+    <Select value={roleFilter} onValueChange={(value) => { setRoleFilter(value as "all" | UserRole); setPage(1); }}>
+      <SelectTrigger className="h-8 w-[130px] bg-white"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Roles</SelectItem>
+        <SelectItem value="Student">Student</SelectItem>
+        <SelectItem value="Mentor">Mentor</SelectItem>
+        <SelectItem value="SuperAdmin">SuperAdmin</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+  <div className="space-y-1">
+    <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">Status</p>
+    <Select value={statusFilter} onValueChange={(value) => { setStatusFilter(value as "all" | UserStatus); setPage(1); }}>
+      <SelectTrigger className="h-8 w-[140px] bg-white"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Statuses</SelectItem>
+        <SelectItem value="Active">Active</SelectItem>
+        <SelectItem value="Inactive">Inactive</SelectItem>
+      </SelectContent>
+    </Select>
+  </div>
+  <div className="ml-auto w-full sm:w-auto space-y-1">
+    <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">Search</p>
+    <div className="relative">
+      <Search className="..." />
+      <input ... />
+    </div>
+  </div>
+</div>
+
+// AFTER:
+<FilterBar>
+  <FilterBar.Field label="Role">
+    <Select
+      value={roleFilter}
+      onValueChange={(value) => { setRoleFilter(value as "all" | UserRole); setPage(1); }}
+    >
+      <SelectTrigger className="h-8 w-[130px] bg-white"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Roles</SelectItem>
+        <SelectItem value="Student">Student</SelectItem>
+        <SelectItem value="Mentor">Mentor</SelectItem>
+        <SelectItem value="SuperAdmin">SuperAdmin</SelectItem>
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Field label="Status">
+    <Select
+      value={statusFilter}
+      onValueChange={(value) => { setStatusFilter(value as "all" | UserStatus); setPage(1); }}
+    >
+      <SelectTrigger className="h-8 w-[140px] bg-white"><SelectValue /></SelectTrigger>
+      <SelectContent>
+        <SelectItem value="all">All Statuses</SelectItem>
+        <SelectItem value="Active">Active</SelectItem>
+        <SelectItem value="Inactive">Inactive</SelectItem>
+      </SelectContent>
+    </Select>
+  </FilterBar.Field>
+
+  <FilterBar.Search
+    value={search}
+    onChange={(value) => { setSearch(value); setPage(1); }}
+    placeholder="Search by name, email, or ID..."
+  />
+</FilterBar>
+```
+
+---
+
+#### Step 5 — Replace loading / error / empty rows with `TableStateRows`
+
+The table has **5 columns** (`colSpan={5}`).
+
+```tsx
+// BEFORE:
+<TableBody>
+  {isLoading ? (
+    <TableRow>
+      <TableCell colSpan={5} className="px-4 py-8 text-center text-sm text-slate-500">
+        Loading users...
+      </TableCell>
+    </TableRow>
+  ) : fetchError ? (
+    <TableRow>
+      <TableCell colSpan={5} className="px-4 py-8 text-center text-sm text-red-500">
+        {fetchError}
+      </TableCell>
+    </TableRow>
+  ) : visibleUsers.length === 0 ? (
+    <TableRow>
+      <TableCell colSpan={5} className="px-4 py-8 text-center text-sm text-slate-500">
+        No users found for the selected filters.
+      </TableCell>
+    </TableRow>
+  ) : (
+    visibleUsers.map((user) => ( /* rows */ ))
+  )}
+</TableBody>
+
+// AFTER:
+<TableBody>
+  <TableStateRows
+    colSpan={5}
+    loading={isLoading}
+    error={fetchError}
+    empty={!isLoading && !fetchError && visibleUsers.length === 0}
+    loadingMessage="Loading users..."
+    emptyMessage="No users found for the selected filters."
+  />
+  {!isLoading && !fetchError && visibleUsers.map((user) => (
+    <TableRow key={user.id} className="bg-white hover:bg-[#fbfcff]">
+      {/* ...cells unchanged... */}
+    </TableRow>
+  ))}
+</TableBody>
+```
+
+---
+
+#### Step 6 — Replace role badge with `RoleBadge`
+
+```tsx
+// BEFORE:
+<TableCell className="px-4 py-3">
+  <span className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-semibold ${roleClass(user.role)}`}>
+    {user.role}
+  </span>
+</TableCell>
+
+// AFTER:
+<TableCell className="px-4 py-3">
+  <RoleBadge role={user.role} />
+</TableCell>
+```
+
+You can now also **delete** the `roleClass()` helper function — it is no longer needed.
+
+---
+
+#### Step 7 — Replace status badge with `AdminStatusBadge`
+
+```tsx
+// BEFORE:
+<TableCell className="px-4 py-3">
+  <span className={`inline-flex items-center gap-1.5 text-sm font-medium ${statusClass(user.status)}`}>
+    <span className={`h-1.5 w-1.5 rounded-full ${user.status === "Active" ? "bg-blue-500" : "bg-red-500"}`} />
+    {user.status}
+  </span>
+</TableCell>
+
+// AFTER:
+<TableCell className="px-4 py-3">
+  <AdminStatusBadge status={user.status} />
+</TableCell>
+```
+
+You can now also **delete** the `statusClass()` helper function.
+
+---
+
+#### Step 8 — Replace the Actions dropdown with `TableActionMenu`
+
+```tsx
+// BEFORE:
+<TableCell className="px-4 py-3 text-right">
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <button type="button" aria-label={`Actions for ${user.name}`}>
+        <EllipsisVertical className="h-4 w-4" />
+      </button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" className="w-44">
+      <DropdownMenuItem onSelect={() => setViewUser(user)}>View Details</DropdownMenuItem>
+      <DropdownMenuItem onSelect={() => { setStatusUser(user); setPendingStatus(user.status === "Active" ? "Inactive" : "Active"); }}>
+        Change Status
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem className="text-red-600 ..." onSelect={() => setDeleteUserId(user.id)}>
+        Delete User
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</TableCell>
+
+// AFTER:
+<TableCell className="px-4 py-3 text-right">
+  <TableActionMenu
+    ariaLabel={`Actions for ${user.name}`}
+    items={[
+      {
+        label: "View Details",
+        onSelect: () => setViewUser(user),
+      },
+      {
+        label: "Change Status",
+        onSelect: () => {
+          setStatusUser(user);
+          setPendingStatus(user.status === "Active" ? "Inactive" : "Active");
+        },
+      },
+      { separator: true, label: "", onSelect: () => {} },
+      {
+        label: "Delete User",
+        variant: "danger",
+        onSelect: () => setDeleteUserId(user.id),
+      },
+    ]}
+  />
+</TableCell>
+```
+
+---
+
+#### Step 9 — Replace pagination with `AdminPagination`
+
+```tsx
+// BEFORE:
+<div className="flex flex-col gap-3 border-t border-[#e4e7ed] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+  <p className="text-sm text-slate-500">
+    Showing {startCount} to {endCount} of {filteredUsers.length} users
+  </p>
+  <Pagination className="mx-0 w-auto justify-end">
+    <PaginationContent>
+      {/* Previous / page-number / Next buttons */}
+    </PaginationContent>
+  </Pagination>
+</div>
+
+// AFTER:
+<AdminPagination
+  page={safePage}
+  totalPages={totalPages}
+  total={filteredUsers.length}
+  itemsPerPage={ITEMS_PER_PAGE}
+  onPageChange={goToPage}
+/>
+```
+
+You can now delete the `startCount` / `endCount` variables and the `goToPage` helper
+(or keep `goToPage` if `AdminPagination`'s `onPageChange` calls it directly — either
+way is fine).
+
+---
+
+#### Step 10 — Replace the Delete `AlertDialog` with `ConfirmDeleteDialog`
+
+```tsx
+// BEFORE (somewhere after the return's main div):
+<AlertDialog open={deleteUserId !== null} onOpenChange={(open) => { if (!open) setDeleteUserId(null); }}>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Delete User</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. The user account and all associated data will
+        be permanently removed.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel disabled={isMutating}>Cancel</AlertDialogCancel>
+      <AlertDialogAction
+        className="bg-red-600 hover:bg-red-700 text-white"
+        disabled={isMutating}
+        onClick={handleDeleteUser}
+      >
+        {isMutating ? "Deleting..." : "Delete"}
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+
+// AFTER:
+<ConfirmDeleteDialog
+  open={deleteUserId !== null}
+  onOpenChange={(open) => { if (!open) setDeleteUserId(null); }}
+  onConfirm={handleDeleteUser}
+  isPending={isMutating}
+  title="Delete User"
+  description="This action cannot be undone. The user account and all associated data will be permanently removed."
+/>
+```
+
+> **Keep the Change Status `<AlertDialog>` as-is** — there is no shared component
+> for it yet. The `statusUser` / `handleChangeStatus` dialog stays unchanged.
+
+---
+
+## 5. Quick Cheat Sheet
+
+| Component | File | Replaces |
+|-----------|------|---------|
+| `<AdminPageLayout>` | `admin/AdminPageLayout.tsx` | `<div className="flex min-h-screen"> <AsideSidebar />` |
+| `<PageHeader>` | `admin/PageHeader.tsx` | Title + action button divs |
+| `<FilterBar>` + `<FilterBar.Field>` + `<FilterBar.Search>` | `admin/FilterBar.tsx` | Filter row divs with labels |
+| `<TableStateRows>` | `admin/TableStateRows.tsx` | Loading / error / empty `<TableRow>` blocks |
+| `<TableActionMenu>` | `admin/TableActionMenu.tsx` | `<DropdownMenu>` in table rows |
+| `<AdminPagination>` | `admin/AdminPagination.tsx` | Pagination div with count + page buttons |
+| `<AdminStatusBadge>` | `admin/AdminStatusBadge.tsx` | Both old `StatusBadge` files |
+| `<RoleBadge>` | `admin/RoleBadge.tsx` | Inline `roleClass()` spans |
+| `<ConfirmDeleteDialog>` | `admin/ConfirmDeleteDialog.tsx` | Delete `<AlertDialog>` |
+
+**Single import line covers all of the above:**
+```tsx
+import {
+  AdminPageLayout, PageHeader, FilterBar,
+  TableStateRows, TableActionMenu, AdminPagination,
+  AdminStatusBadge, RoleBadge, ConfirmDeleteDialog,
+} from "@/components/admin";
+```
+
+---
+
+> **To convert this file to PDF:**
+> - **VS Code:** Install the "Markdown PDF" extension → right-click this file → *Export (pdf)*
+> - **Browser:** Open the preview panel → right-click → *Print* → *Save as PDF*
+> - **Online:** Paste into [markdowntopdf.com](https://www.markdowntopdf.com)
diff --git a/server/.env b/server/.env
new file mode 100644
index 00000000..f5001981
--- /dev/null
+++ b/server/.env
@@ -0,0 +1,23 @@
+BASE_URL=http://localhost:3000
+
+# This was inserted by `prisma init`:
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+JWT_SECRET=hftgry5486
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/postgres?schema=public"
+JWT_SECRET="thisismysecretkey"
+JWT_EXPIRY="60 min"
+ISSUER=http://localhost:3000
+AUDIENCE=http://localhost:3000
+
+
+
+
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+# get the email pass key from https://myaccount.google.com/apppasswords
+EMAIL_USER= ""
+EMAIL_PASS= ""
\ No newline at end of file
diff --git a/server/package-lock.json b/server/package-lock.json
index c91e8b31..7ced3fa6 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -12,18 +12,21 @@
         "@prisma/client": "^5.19.1",
         "@radix-ui/react-alert-dialog": "^1.1.1",
         "@radix-ui/react-avatar": "^1.1.0",
-        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-dropdown-menu": "^2.1.16",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-scroll-area": "^1.1.0",
-        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
         "@radix-ui/react-toast": "^1.2.1",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@shadcn/ui": "^0.0.4",
         "@tanstack/react-query": "^5.91.2",
         "bcrypt": "^5.1.1",
         "bcrypt-ts": "^5.0.2",
         "bullmq": "^5.12.14",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.13",
         "dotenv": "^16.4.5",
@@ -8011,6 +8014,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -8170,6 +8191,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -8264,6 +8303,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-direction": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
@@ -8524,6 +8581,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-menubar": {
       "version": "1.1.16",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
@@ -8693,6 +8768,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-popper": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -8796,6 +8889,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-progress": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
@@ -8957,13 +9068,54 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-separator": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
-      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.8.tgz",
+      "integrity": "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
+        "@radix-ui/react-primitive": "2.1.4"
+      },
+      "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-separator/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+      "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.4"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -9014,9 +9166,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
-      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+      "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -9207,6 +9359,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toolbar/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "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-tooltip": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
@@ -9241,6 +9416,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "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-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -11187,24 +11380,15 @@
       }
     },
     "node_modules/class-variance-authority": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
-      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
       "license": "Apache-2.0",
       "dependencies": {
-        "clsx": "2.0.0"
+        "clsx": "^2.1.1"
       },
       "funding": {
-        "url": "https://joebell.co.uk"
-      }
-    },
-    "node_modules/class-variance-authority/node_modules/clsx": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
-      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
+        "url": "https://polar.sh/cva"
       }
     },
     "node_modules/clsx": {
@@ -21637,6 +21821,47 @@
         }
       }
     },
+    "node_modules/radix-ui/node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "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/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
diff --git a/server/package.json b/server/package.json
index 90f9fb79..7a0222b8 100644
--- a/server/package.json
+++ b/server/package.json
@@ -24,18 +24,21 @@
     "@prisma/client": "^5.19.1",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@shadcn/ui": "^0.0.4",
     "@tanstack/react-query": "^5.91.2",
     "bcrypt": "^5.1.1",
     "bcrypt-ts": "^5.0.2",
     "bullmq": "^5.12.14",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",
diff --git a/server/prisma/migrations/20260321103623_add_projectid_to_invitations/migration.sql b/server/prisma/migrations/20260321103623_add_projectid_to_invitations/migration.sql
new file mode 100644
index 00000000..4c7d8ea2
--- /dev/null
+++ b/server/prisma/migrations/20260321103623_add_projectid_to_invitations/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "invitations" ADD COLUMN     "projectId" TEXT;
+
+-- AddForeignKey
+ALTER TABLE "invitations" ADD CONSTRAINT "invitations_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "projects"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/server/prisma/schema.prisma b/server/prisma/schema.prisma
index 7d8c58f3..8521cfbb 100644
--- a/server/prisma/schema.prisma
+++ b/server/prisma/schema.prisma
@@ -105,12 +105,14 @@ model Invitation {
   role       Role
   token      String   @unique
   invitedBy  String?
+  projectId  String?
   expiresAt  DateTime
   accepted   Boolean  @default(false)
 
   createdAt  DateTime @default(now())
 
-  inviter    User?    @relation("InvitationSender", fields: [invitedBy], references: [id], onDelete: SetNull)
+  inviter    User?     @relation("InvitationSender", fields: [invitedBy], references: [id], onDelete: SetNull)
+  project    Project?  @relation(fields: [projectId], references: [id], onDelete: SetNull)
 
   @@map("invitations")
 }
@@ -128,6 +130,7 @@ model Project {
 
   mentors     ProjectMentor[]
   assignments ProjectAllocation[]
+  invitations Invitation[]
 
   @@map("projects")
 }
diff --git a/server/src/app/admin/badges/page.tsx b/server/src/app/admin/badges/page.tsx
new file mode 100644
index 00000000..30589e6b
--- /dev/null
+++ b/server/src/app/admin/badges/page.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { Construction } from "lucide-react";
+
+import { Card } from "@/components/ui/card";
+import PageHeader from "@/components/admin/PageHeader";
+import AsideSidebar from "@/components/AsideSidebar";
+
+export default function BadgesPage() {
+  return (
+    <div className="flex min-h-screen bg-[#f5f7fb]">
+      <AsideSidebar />
+
+      <div className="flex-1 p-5 md:p-8">
+        <Card className="overflow-hidden border-[#d9dde5] bg-white">
+          <div className="space-y-4 p-4 md:p-5">
+            <PageHeader
+              title="Badges"
+              subtitle="Manage and award badges to users."
+            />
+
+            <div className="flex flex-col items-center justify-center py-20 px-4">
+              <Construction size={64} className="text-slate-300 mb-4" />
+              <h2 className="text-2xl font-bold text-slate-900 mb-2">
+                Page Under Construction
+              </h2>
+              <p className="text-slate-500 text-center max-w-md">
+                The Badges management page is currently under development.
+                Please check back soon for this feature.
+              </p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
diff --git a/server/src/app/admin/invitation/page.tsx b/server/src/app/admin/invitation/page.tsx
index abf80bc6..b41af696 100644
--- a/server/src/app/admin/invitation/page.tsx
+++ b/server/src/app/admin/invitation/page.tsx
@@ -1,61 +1,33 @@
 "use client";
 
-import React, { useEffect, useState } from 'react';
-import AsideSidebar from "@/components/AsideSidebar";
-import { useInvitation, useRecentInvitations, useChangeInvitationStatus, useDeleteInvitation } from "@/hooks/admin/useInvitation";
-import { z } from 'zod';
-import {
-  UserPlus,
-  Send,
-  MoreVertical,
-  ChevronDown,
-  Plus,
-  Users,
-  Clock,
-  CheckCircle2,
-  XCircle
-} from 'lucide-react';
-import { Project } from '@prisma/client';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
+import React, { useMemo, useState } from "react";
+
+import { Plus, Search } from "lucide-react";
+import { z } from "zod";
 
+import {
+  useChangeInvitationStatus,
+  useDeleteInvitation,
+  useInvitation,
+  useRecentInvitations,
+} from "@/hooks/admin/useInvitation";
+import { useGetProjects } from "@/hooks/projects";
+import { Card } from "@/components/ui/card";
+import PageHeader from "@/components/admin/PageHeader";
+import AsideSidebar from "@/components/AsideSidebar";
+import ChangeStatusDialog from "@/components/Invitations/dialogs/ChangeStatusDialog";
+import CreateInvitationDialog from "@/components/Invitations/dialogs/CreateInvitationDialog";
+import DeleteInvitationDialog from "@/components/Invitations/dialogs/DeleteDialog";
+import ViewInvitationDialog from "@/components/Invitations/dialogs/viewInvitationDialog";
+import InvitationsTable, {
+  InvitationRow,
+} from "@/components/Invitations/InvitationsTable";
+import InvitationsStats from "@/components/Invitations/InvitationStats";
+
+// Constants
 const ITEMS_PER_PAGE = 10;
 
-// Define our Zod schema for the invite form
+// Zod Schema
 const inviteSchema = z.object({
   role: z.string().min(1, { message: "Role is required" }),
   firstName: z.string().min(2, { message: "Must be at least 2 characters" }),
@@ -64,590 +36,287 @@ const inviteSchema = z.object({
   project: z.string().min(1, { message: "Project is required" }),
 });
 
-interface InvitationRow {
-  id: string;
-  email: string;
-  role: string;
-  project: string;
-  status: 'Pending' | 'Accepted' | 'Expired';
-  createdAt: string;
-  expiresAt: string;
-}
-
-//Invitation View
 export default function InvitationsView() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const { mutate: sendInvitation, isPending } = useInvitation();
-  const { data: recentInvitations, isLoading: isInvLoading, isError: isInvError } = useRecentInvitations();
-  const { mutate: changeStatus, isPending: isChangingStatus } = useChangeInvitationStatus();
-  const { mutate: deleteInvitation, isPending: isDeleting } = useDeleteInvitation();
-
+  // State
   const [formData, setFormData] = useState({
     role: "",
     firstName: "",
     lastName: "",
     email: "",
-    project: ""
+    project: "",
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
-
-  // Pagination
   const [page, setPage] = useState(1);
+  const [search, setSearch] = useState("");
 
-  // Modals
+  // Dialogs
   const [createOpen, setCreateOpen] = useState(false);
   const [viewInv, setViewInv] = useState<InvitationRow | null>(null);
-  const [changeStatusInv, setChangeStatusInv] = useState<InvitationRow | null>(null);
-  const [selectedStatus, setSelectedStatus] = useState<'Accepted' | 'Pending' | 'Expired'>('Pending');
+  const [changeStatusInv, setChangeStatusInv] = useState<InvitationRow | null>(
+    null,
+  );
+  const [selectedStatus, setSelectedStatus] = useState<
+    "Accepted" | "Pending" | "Expired"
+  >("Pending");
   const [deleteId, setDeleteId] = useState<string | null>(null);
 
+  // Hooks
+  const { mutate: sendInvitation, isPending } = useInvitation();
+  const {
+    data: recentInvitations,
+    isLoading: isInvLoading,
+    isError: isInvError,
+  } = useRecentInvitations();
+  const { mutate: changeStatus, isPending: isChangingStatus } =
+    useChangeInvitationStatus();
+  const { mutate: deleteInvitation, isPending: isDeleting } =
+    useDeleteInvitation();
+
+  const { data: projectsData } = useGetProjects();
+
+  // Form handling
   const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }));
-    if (errors[field]) {
-      setErrors(prev => ({ ...prev, [field]: "" }));
-    }
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) setErrors((prev) => ({ ...prev, [field]: "" }));
   };
 
   const handleSubmit = () => {
-  const result = inviteSchema.safeParse(formData);
-
-  if (!result.success) {
-    const fieldErrors: Record<string, string> = {};
-    result.error.issues.forEach(issue => {
-      if (issue.path[0]) {
-        fieldErrors[issue.path[0].toString()] = issue.message;
-      }
-    });
-    setErrors(fieldErrors);
-    return;
-  }
-
-  setErrors({});
-
-  // Invitation Hook
-  sendInvitation({
-    email: formData.email,
-    firstName: formData.firstName,
-    lastName: formData.lastName,
-    role: formData.role as "student" | "mentor" | "superAdmin",
-    projectId: formData.project,
-  }, {
-    onSuccess: () => {
-      // reset form after success
-      setFormData({
-        role: "",
-        firstName: "",
-        lastName: "",
-        email: "",
-        project: "",
+    const result = inviteSchema.safeParse(formData);
+    if (!result.success) {
+      const fieldErrors: Record<string, string> = {};
+      result.error.issues.forEach((issue) => {
+        if (issue.path[0])
+          fieldErrors[issue.path[0].toString()] = issue.message;
       });
-      setCreateOpen(false);
-    }
-  });
-};
-
-//Fetch projects
-useEffect(() => {
-  const fetchProjects = async () => {
-    try {
-      const res = await fetch("/api/project", { cache: "no-store" });
-      const data = await res.json();
-      setProjects(data);
-    } catch (err) {
-      console.error(err);
+      setErrors(fieldErrors);
+      return;
     }
+    setErrors({});
+    sendInvitation(
+      {
+        email: formData.email,
+        firstName: formData.firstName,
+        lastName: formData.lastName,
+        role: formData.role as "student" | "mentor" | "superAdmin",
+        projectId: formData.project,
+      },
+      {
+        onSuccess: () => {
+          setFormData({
+            role: "",
+            firstName: "",
+            lastName: "",
+            email: "",
+            project: "",
+          });
+          setCreateOpen(false);
+        },
+      },
+    );
   };
 
-  fetchProjects();
-}, []);
+  // Invitations list with filtering
+  const invList: InvitationRow[] = useMemo(
+    () => (recentInvitations as InvitationRow[] | undefined) ?? [],
+    [recentInvitations],
+  );
 
-  const invList: InvitationRow[] = (recentInvitations as InvitationRow[] | undefined) ?? [];
-  const totalInvitations = invList.length;
-  const pendingCount = invList.filter(i => i.status === 'Pending').length;
-  const acceptedCount = invList.filter(i => i.status === 'Accepted').length;
-  const expiredCount = invList.filter(i => i.status === 'Expired').length;
+  const filteredInvitations = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    return query.length === 0
+      ? invList
+      : invList.filter(
+          (inv) =>
+            inv.email.toLowerCase().includes(query) ||
+            inv.role.toLowerCase().includes(query) ||
+            inv.project.toLowerCase().includes(query),
+        );
+  }, [invList, search]);
+
+  const totalInvitations = filteredInvitations.length;
+  const pendingCount = invList.filter((i) => i.status === "Pending").length;
+  const acceptedCount = invList.filter((i) => i.status === "Accepted").length;
+  const expiredCount = invList.filter((i) => i.status === "Expired").length;
   const totalPages = Math.max(1, Math.ceil(totalInvitations / ITEMS_PER_PAGE));
   const currentPage = Math.min(page, totalPages);
-  const pagedInvitations = invList.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
-
-  return (
-    <>
-    <div className="flex min-h-screen bg-[#f5f5f7]">
-      <AsideSidebar />
-      <div className="flex-1 flex flex-col min-w-0">
-
-        {/* Page Header */}
-        <div className="bg-white border-b border-slate-200 px-8 py-6">
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <h1 className="text-page-title text-slate-900">Invitations</h1>
-              <p className="text-sm text-slate-500 mt-0.5">Manage organizational access and track member onboarding.</p>
-            </div>
-            <button
-              onClick={() => setCreateOpen(true)}
-              className="inline-flex items-center gap-2 h-9 px-4 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors shadow-sm shrink-0"
-            >
-              <Plus size={15} />
-              Create Invitation
-            </button>
-          </div>
-        </div>
-
-        <div className="flex-1 px-8 py-6 space-y-6">
-
-        {/* Stat Cards */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="bg-white border border-slate-200 rounded-xl px-5 py-4">
-            <div className="flex items-center justify-between mb-3">
-              <p className="text-xs font-medium text-slate-500 uppercase tracking-wide">Total</p>
-              <div className="h-8 w-8 rounded-lg bg-slate-100 flex items-center justify-center">
-                <Users size={15} className="text-slate-500" />
-              </div>
-            </div>
-            <p className="text-2xl font-bold text-slate-900">{isInvLoading ? '—' : totalInvitations}</p>
-          </div>
-          <div className="bg-white border border-slate-200 rounded-xl px-5 py-4">
-            <div className="flex items-center justify-between mb-3">
-              <p className="text-xs font-medium text-amber-600 uppercase tracking-wide">Pending</p>
-              <div className="h-8 w-8 rounded-lg bg-amber-50 flex items-center justify-center">
-                <Clock size={15} className="text-amber-500" />
-              </div>
-            </div>
-            <p className="text-2xl font-bold text-slate-900">{isInvLoading ? '—' : pendingCount}</p>
-          </div>
-          <div className="bg-white border border-slate-200 rounded-xl px-5 py-4">
-            <div className="flex items-center justify-between mb-3">
-              <p className="text-xs font-medium text-emerald-600 uppercase tracking-wide">Accepted</p>
-              <div className="h-8 w-8 rounded-lg bg-emerald-50 flex items-center justify-center">
-                <CheckCircle2 size={15} className="text-emerald-500" />
-              </div>
-            </div>
-            <p className="text-2xl font-bold text-slate-900">{isInvLoading ? '—' : acceptedCount}</p>
-          </div>
-          <div className="bg-white border border-slate-200 rounded-xl px-5 py-4">
-            <div className="flex items-center justify-between mb-3">
-              <p className="text-xs font-medium text-rose-600 uppercase tracking-wide">Expired</p>
-              <div className="h-8 w-8 rounded-lg bg-rose-50 flex items-center justify-center">
-                <XCircle size={15} className="text-rose-500" />
-              </div>
-            </div>
-            <p className="text-2xl font-bold text-slate-900">{isInvLoading ? '—' : expiredCount}</p>
-          </div>
-        </div>
-
-        {/* Invitations Table */}
-        <div className="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
-          {/* Table Toolbar */}
-          <div className="px-5 py-4 border-b border-slate-100 flex items-center justify-between">
-            <div>
-              <h3 className="text-sm font-semibold text-slate-900">All Invitations</h3>
-              {!isInvLoading && <p className="text-xs text-slate-400 mt-0.5">{totalInvitations} total record{totalInvitations !== 1 ? 's' : ''}</p>}
-            </div>
-          </div>
-          <div className="overflow-x-auto">
-              <table className="w-full text-left border-collapse">
-                <thead className="bg-slate-50/95">
-                  <tr>
-                    <th className="px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Email Address</th>
-                    <th className="px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Role</th>
-                    <th className="px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Project</th>
-                    <th className="px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider">Status</th>
-                    <th className="px-5 py-3.5 text-[11px] font-bold text-slate-500 uppercase tracking-wider text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-slate-100 text-sm">
-                  {isInvLoading && (
-                    <tr><td colSpan={5} className="px-5 py-8 text-center text-slate-400">Loading...</td></tr>
-                  )}
-                  {isInvError && (
-                    <tr><td colSpan={5} className="px-5 py-8 text-center text-red-500">Failed to load invitations</td></tr>
-                  )}
-                  {!isInvLoading && !isInvError && pagedInvitations.length === 0 && (
-                    <tr><td colSpan={5} className="px-5 py-8 text-center text-slate-400">No invitations found.</td></tr>
-                  )}
-                  {pagedInvitations.map((inv: InvitationRow) => (
-                    <tr key={inv.id} className="hover:bg-slate-50/50 transition-colors">
-                      <td className="px-5 py-4 font-medium text-slate-900">{inv.email}</td>
-                      <td className="px-5 py-4">
-                        <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide ${
-                          inv.role === 'mentor' || inv.role === 'superAdmin' ? "bg-[#18181B] text-white" : "bg-slate-100 text-slate-600"
-                        }`}>
-                          {inv.role}
-                        </span>
-                      </td>
-                      <td className="px-5 py-4 text-slate-500">{inv.project}</td>
-                      <td className="px-5 py-4"><StatusBadge status={inv.status} /></td>
-                      <td className="px-5 py-4 text-right">
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <button className="h-8 w-8 inline-flex items-center justify-center rounded-md text-slate-400 hover:text-slate-900 hover:bg-slate-100 transition-colors">
-                              <MoreVertical size={15} />
-                            </button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end" className="w-44">
-                            <DropdownMenuItem onSelect={() => setViewInv(inv)}>
-                              View Details
-                            </DropdownMenuItem>
-                            <DropdownMenuItem onSelect={() => { setChangeStatusInv(inv); setSelectedStatus(inv.status); }}>
-                              Change Status
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="text-red-600 focus:text-red-600 focus:bg-red-50"
-                              onSelect={() => setDeleteId(inv.id)}
-                            >
-                              Delete
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+  const pagedInvitations = filteredInvitations.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE,
+  );
 
-              {/* Pagination */}
-              <div className="flex items-center justify-between px-5 py-3 border-t border-slate-100">
-              <p className="text-sm text-slate-500">
-                Showing{" "}
-                <span className="font-medium text-slate-900">
-                  {totalInvitations === 0 ? 0 : (currentPage - 1) * ITEMS_PER_PAGE + 1}
-                </span>{" "}to{" "}
-                <span className="font-medium text-slate-900">
-                  {Math.min(currentPage * ITEMS_PER_PAGE, totalInvitations)}
-                </span>{" "}of{" "}
-                <span className="font-medium text-slate-900">{totalInvitations}</span> results
-              </p>
-              <Pagination className="w-auto">
-                <PaginationContent>
-                  <PaginationItem>
-                    <PaginationPrevious onClick={() => setPage(p => Math.max(1, p - 1))} />
-                  </PaginationItem>
-                  {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map(p => (
-                    <PaginationItem key={p}>
-                      <PaginationLink isActive={currentPage === p} onClick={() => setPage(p)}>{p}</PaginationLink>
-                    </PaginationItem>
-                  ))}
-                  {totalPages > 5 && <PaginationItem><PaginationEllipsis /></PaginationItem>}
-                  <PaginationItem>
-                    <PaginationNext onClick={() => setPage(p => Math.min(totalPages, p + 1))} />
-                  </PaginationItem>
-                </PaginationContent>
-              </Pagination>
-              </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  const startCount =
+    filteredInvitations.length === 0
+      ? 0
+      : (currentPage - 1) * ITEMS_PER_PAGE + 1;
+  const endCount = Math.min(
+    currentPage * ITEMS_PER_PAGE,
+    filteredInvitations.length,
+  );
 
-    {/* ── Create Invitation Dialog ─────────────────────────────────────── */}
-    <Dialog open={createOpen} onOpenChange={open => { setCreateOpen(open); if (!open) { setErrors({}); } }}>
-      <DialogContent className="max-w-xl p-0 gap-0 overflow-hidden">
-        {/* Header */}
-        <div className="px-6 py-5 border-b border-slate-200 bg-slate-50">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2.5 text-base font-semibold text-slate-900">
-              <div className="bg-slate-900 text-white p-1.5 rounded-md">
-                <UserPlus size={15} />
-              </div>
-              Create Invitation
-            </DialogTitle>
-            <DialogDescription className="text-sm text-slate-500 mt-1">
-              Send an invitation email to onboard a new member to your organization.
-            </DialogDescription>
-          </DialogHeader>
-        </div>
+  const goToPage = (nextPage: number) => {
+    if (nextPage < 1 || nextPage > totalPages) {
+      return;
+    }
+    setPage(nextPage);
+  };
 
-        {/* Form Body */}
-        <div className="px-6 py-5 space-y-5">
+  return (
+    <>
+      <div className="flex min-h-screen bg-[#f5f7fb]">
+        <AsideSidebar />
 
-          {/* Section: Access Details */}
-          <div>
-            <p className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">Access Details</p>
-            <div className="grid grid-cols-2 gap-4">
-              {/* Role */}
-              <div className="space-y-1.5">
-                <label className="block text-sm font-medium text-slate-700">
-                  Role <span className="text-red-500">*</span>
-                </label>
-                <div className="relative">
-                  <select
-                    value={formData.role}
-                    onChange={(e) => handleInputChange('role', e.target.value)}
-                    className={`w-full h-10 px-3 pr-10 border ${errors.role ? 'border-red-400 focus:ring-red-400 bg-red-50/40' : 'border-slate-300 focus:ring-slate-900 bg-white'} rounded-lg text-sm text-slate-800 appearance-none focus:outline-none focus:ring-2 focus:border-transparent cursor-pointer transition-colors`}
-                  >
-                    <option value="" disabled>Select a role…</option>
-                    <option value="student">Student</option>
-                    <option value="mentor">Mentor</option>
-                    <option value="admin">Super Admin</option>
-                  </select>
-                  <ChevronDown size={14} className="absolute right-3 top-3 text-slate-400 pointer-events-none" />
-                </div>
-                {errors.role
-                  ? <p className="text-xs text-red-500 font-medium">{errors.role}</p>
-                  : <p className="text-xs text-slate-400">Determines the user's access level</p>
-                }
+        <div className="flex-1 p-5 md:p-8">
+          <Card className="overflow-hidden border-[#d9dde5] bg-white">
+            <div className="space-y-4 p-4 md:p-5">
+              {/* Header */}
+              <div>
+                <PageHeader
+                  title="Invitations"
+                  subtitle="Manage organizational access and track member onboarding."
+                />
               </div>
 
-              {/* Project */}
-              <div className="space-y-1.5">
-                <label className="block text-sm font-medium text-slate-700">
-                  Project <span className="text-red-500">*</span>
-                </label>
-                <div className="relative">
-                  <select
-                    value={formData.project}
-                    onChange={(e) => handleInputChange('project', e.target.value)}
-                    className={`w-full h-10 px-3 pr-10 border ${errors.project ? 'border-red-400 focus:ring-red-400 bg-red-50/40' : 'border-slate-300 focus:ring-slate-900 bg-white'} rounded-lg text-sm text-slate-800 appearance-none focus:outline-none focus:ring-2 focus:border-transparent cursor-pointer transition-colors`}
-                  >
-                    <option value="" disabled>Select a project…</option>
-                    {projects.map((proj) => (
-                      <option key={proj.id} value={proj.id}>{proj.name}</option>
-                    ))}
-                  </select>
-                  <ChevronDown size={14} className="absolute right-3 top-3 text-slate-400 pointer-events-none" />
+              {/* Stats Cards */}
+              <InvitationsStats
+                loading={isInvLoading}
+                total={totalInvitations}
+                pending={pendingCount}
+                accepted={acceptedCount}
+                expired={expiredCount}
+              />
+
+              {/* Search and Create Button Bar */}
+              <div className="flex flex-wrap items-end gap-3 rounded-lg border border-[#e4e7ed] bg-[#f8fafc] p-3">
+                <div className="w-full sm:w-auto space-y-1">
+                  <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+                    Search
+                  </p>
+                  <div className="relative">
+                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                    <input
+                      className="h-8 w-full sm:w-[280px] rounded-lg border border-[#dbe0e8] bg-white pl-9 pr-3 text-sm text-slate-700 outline-none transition focus:border-slate-400"
+                      type="search"
+                      value={search}
+                      onChange={(event) => {
+                        setSearch(event.target.value);
+                        setPage(1);
+                      }}
+                      placeholder="Search by email, role, or project..."
+                    />
+                  </div>
                 </div>
-                {errors.project
-                  ? <p className="text-xs text-red-500 font-medium">{errors.project}</p>
-                  : <p className="text-xs text-slate-400">Assign to an existing project</p>
-                }
-              </div>
-            </div>
-          </div>
-
-          {/* Divider */}
-          <div className="border-t border-slate-100" />
 
-          {/* Section: Recipient Details */}
-          <div>
-            <p className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">Recipient Details</p>
-            <div className="space-y-4">
-              {/* Name row */}
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-1.5">
-                  <label className="block text-sm font-medium text-slate-700">
-                    First Name <span className="text-red-500">*</span>
-                  </label>
-                  <input
-                    type="text"
-                    placeholder="e.g. Jane"
-                    value={formData.firstName}
-                    onChange={(e) => handleInputChange('firstName', e.target.value)}
-                    className={`w-full h-10 px-3 border ${errors.firstName ? 'border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300' : 'border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400'} rounded-lg text-sm text-slate-800 focus:outline-none focus:ring-2 focus:border-transparent transition-colors`}
-                  />
-                  {errors.firstName && <p className="text-xs text-red-500 font-medium">{errors.firstName}</p>}
-                </div>
-                <div className="space-y-1.5">
-                  <label className="block text-sm font-medium text-slate-700">
-                    Last Name <span className="text-red-500">*</span>
-                  </label>
-                  <input
-                    type="text"
-                    placeholder="e.g. Doe"
-                    value={formData.lastName}
-                    onChange={(e) => handleInputChange('lastName', e.target.value)}
-                    className={`w-full h-10 px-3 border ${errors.lastName ? 'border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300' : 'border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400'} rounded-lg text-sm text-slate-800 focus:outline-none focus:ring-2 focus:border-transparent transition-colors`}
-                  />
-                  {errors.lastName && <p className="text-xs text-red-500 font-medium">{errors.lastName}</p>}
-                </div>
+                {/* Create Button */}
+                <button
+                  onClick={() => setCreateOpen(true)}
+                  className="ml-auto inline-flex items-center justify-center gap-2 h-9 px-4 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors shadow-sm shrink-0 w-full sm:w-auto"
+                >
+                  <Plus size={15} /> Create Invitation
+                </button>
               </div>
 
-              {/* Email */}
-              <div className="space-y-1.5">
-                <label className="block text-sm font-medium text-slate-700">
-                  Email Address <span className="text-red-500">*</span>
-                </label>
-                <input
-                  type="email"
-                  placeholder="e.g. jane.doe@company.com"
-                  value={formData.email}
-                  onChange={(e) => handleInputChange('email', e.target.value)}
-                  className={`w-full h-10 px-3 border ${errors.email ? 'border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300' : 'border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400'} rounded-lg text-sm text-slate-800 focus:outline-none focus:ring-2 focus:border-transparent transition-colors`}
+              {/* Table */}
+              <div className="overflow-hidden rounded-lg border border-[#e4e7ed]">
+                <InvitationsTable
+                  data={pagedInvitations}
+                  loading={isInvLoading}
+                  error={isInvError || false}
+                  onView={setViewInv}
+                  onChangeStatus={(inv) => {
+                    setChangeStatusInv(inv);
+                    setSelectedStatus(inv.status);
+                  }}
+                  onDelete={setDeleteId}
                 />
-                {errors.email
-                  ? <p className="text-xs text-red-500 font-medium">{errors.email}</p>
-                  : <p className="text-xs text-slate-400">The invitation link will be sent to this address</p>
-                }
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div className="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between gap-3">
-          <p className="text-xs text-slate-400">Fields marked <span className="text-red-500 font-medium">*</span> are required</p>
-          <div className="flex items-center gap-2">
-            <DialogClose asChild>
-              <Button variant="outline" disabled={isPending} className="h-9 px-4 text-sm">
-                Cancel
-              </Button>
-            </DialogClose>
-            <button
-              onClick={handleSubmit}
-              disabled={isPending}
-              className="inline-flex items-center gap-2 h-9 px-5 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
-            >
-              <Send size={14} />
-              {isPending ? 'Sending…' : 'Send Invitation'}
-            </button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
 
-    {/* ── View Details Dialog ──────────────────────────────────────────── */}
-    <Dialog open={!!viewInv} onOpenChange={open => !open && setViewInv(null)}>
-      <DialogContent className="max-w-md">
-        <DialogHeader>
-          <DialogTitle>Invitation Details</DialogTitle>
-        </DialogHeader>
-        {viewInv != null && (
-          <div className="space-y-4 text-sm">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Email</p>
-                <p className="text-slate-900 font-medium break-all">{viewInv!.email}</p>
-              </div>
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Role</p>
-                <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide ${
-                  viewInv!.role === 'mentor' || viewInv!.role === 'superAdmin' ? "bg-[#18181B] text-white" : "bg-slate-100 text-slate-600"
-                }`}>{viewInv!.role}</span>
-              </div>
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Project</p>
-                <p className="text-slate-700">{viewInv!.project}</p>
-              </div>
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Status</p>
-                <StatusBadge status={viewInv!.status} />
-              </div>
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Sent On</p>
-                <p className="text-slate-700">{new Date(viewInv!.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</p>
-              </div>
-              <div>
-                <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">Expires At</p>
-                <p className="text-slate-700">{new Date(viewInv!.expiresAt) <= new Date(1000) ? 'Manually expired' : new Date(viewInv!.expiresAt).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })}</p>
+                {/* Pagination Footer */}
+                <div className="flex flex-col gap-3 border-t border-[#e4e7ed] px-4 py-3 sm:flex-row sm:items-center sm:justify-between bg-white">
+                  <p className="text-sm text-slate-500">
+                    Showing {startCount} to {endCount} of {totalInvitations}{" "}
+                    invitations
+                  </p>
+
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => goToPage(currentPage - 1)}
+                      disabled={currentPage === 1}
+                      className="h-8 px-3 rounded border border-[#dbe0e8] text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                      Previous
+                    </button>
+                    <div className="flex items-center gap-1">
+                      {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+                        (pageNum) => (
+                          <button
+                            key={pageNum}
+                            onClick={() => goToPage(pageNum)}
+                            className={`h-8 w-8 rounded text-sm font-medium transition-colors ${
+                              currentPage === pageNum
+                                ? "bg-[#18181B] text-white"
+                                : "border border-[#dbe0e8] text-slate-700 hover:bg-slate-50"
+                            }`}
+                          >
+                            {pageNum}
+                          </button>
+                        ),
+                      )}
+                    </div>
+                    <button
+                      onClick={() => goToPage(currentPage + 1)}
+                      disabled={currentPage === totalPages}
+                      className="h-8 px-3 rounded border border-[#dbe0e8] text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    >
+                      Next
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        )}
-        <DialogFooter>
-          <DialogClose asChild><Button variant="outline">Close</Button></DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-
-    {/* ── Change Status Dialog ─────────────────────────────────────────── */}
-    <Dialog open={!!changeStatusInv} onOpenChange={open => !open && setChangeStatusInv(null)}>
-      <DialogContent className="max-w-sm p-0 gap-0 overflow-hidden">
-        {/* Header */}
-        <div className="px-5 py-4 border-b border-slate-200 bg-slate-50">
-          <DialogHeader>
-            <DialogTitle className="text-sm font-semibold text-slate-900">Change Invitation Status</DialogTitle>
-            <DialogDescription className="text-xs text-slate-500 mt-0.5">
-              Update the status for <span className="font-medium text-slate-700">{changeStatusInv?.email}</span>
-            </DialogDescription>
-          </DialogHeader>
-        </div>
-
-        {/* Status Options */}
-        <div className="px-5 py-4 space-y-2">
-          {([
-            { value: 'Accepted', label: 'Active', desc: 'Invitation is accepted and account is active', color: 'text-emerald-600', dot: 'bg-emerald-500', ring: 'border-emerald-500 bg-emerald-50' },
-            { value: 'Pending', label: 'Pending', desc: 'Awaiting the invitee to complete registration', color: 'text-amber-600', dot: 'bg-amber-500', ring: 'border-amber-500 bg-amber-50' },
-            { value: 'Expired', label: 'Expired', desc: 'Invalidates the invitation link immediately', color: 'text-rose-600', dot: 'bg-rose-500', ring: 'border-rose-500 bg-rose-50' },
-          ] as const).map(opt => (
-            <button
-              key={opt.value}
-              type="button"
-              onClick={() => setSelectedStatus(opt.value)}
-              className={`w-full flex items-start gap-3 px-4 py-3 rounded-lg border text-left transition-all ${
-                selectedStatus === opt.value
-                  ? `${opt.ring} border-2`
-                  : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'
-              }`}
-            >
-              <span className={`mt-1 h-3.5 w-3.5 rounded-full shrink-0 ${selectedStatus === opt.value ? opt.dot : 'bg-slate-300'}`} />
-              <div>
-                <p className={`text-sm font-semibold ${selectedStatus === opt.value ? opt.color : 'text-slate-700'}`}>{opt.label}</p>
-                <p className="text-xs text-slate-400 mt-0.5">{opt.desc}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-
-        {/* Footer */}
-        <div className="px-5 py-3 border-t border-slate-200 bg-slate-50 flex items-center justify-end gap-2">
-          <DialogClose asChild>
-            <Button variant="outline" disabled={isChangingStatus} className="h-8 px-3 text-sm">Cancel</Button>
-          </DialogClose>
-          <button
-            disabled={isChangingStatus || selectedStatus === changeStatusInv?.status}
-            onClick={() => changeStatusInv && changeStatus(
-              { id: changeStatusInv.id, status: selectedStatus },
-              { onSettled: () => setChangeStatusInv(null) }
-            )}
-            className="inline-flex items-center h-8 px-4 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isChangingStatus ? 'Saving…' : 'Save'}
-          </button>
+          </Card>
         </div>
-      </DialogContent>
-    </Dialog>
+      </div>
 
-    {/* ── Delete Confirmation Dialog ────────────────────────────────────── */}
-    <AlertDialog open={!!deleteId} onOpenChange={open => !open && setDeleteId(null)}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>Delete Invitation</AlertDialogTitle>
-          <AlertDialogDescription>
-            This will permanently delete the invitation and remove the associated user account along with all their data — including project allocations, activities, and feedback. This action cannot be undone.
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-          <AlertDialogAction
-            className="bg-red-600 hover:bg-red-700 text-white"
-            disabled={isDeleting}
-            onClick={() => deleteId && deleteInvitation({ id: deleteId }, { onSettled: () => setDeleteId(null) })}
-          >
-            {isDeleting ? 'Deleting…' : 'Delete'}
-          </AlertDialogAction>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+      {/* Dialogs */}
+      <CreateInvitationDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        formData={formData}
+        errors={errors}
+        projects={projectsData ?? []}
+        isPending={isPending}
+        onChange={handleInputChange}
+        onSubmit={handleSubmit}
+      />
+      <ViewInvitationDialog
+        invitation={viewInv}
+        onClose={() => setViewInv(null)}
+      />
+      <ChangeStatusDialog
+        invitation={changeStatusInv}
+        selectedStatus={selectedStatus}
+        onChangeStatus={setSelectedStatus}
+        onSave={() =>
+          changeStatusInv &&
+          changeStatus(
+            { id: changeStatusInv.id, status: selectedStatus },
+            { onSettled: () => setChangeStatusInv(null) },
+          )
+        }
+        isPending={isChangingStatus}
+        onClose={() => setChangeStatusInv(null)}
+      />
+      <DeleteInvitationDialog
+        open={!!deleteId}
+        onOpenChange={(open: any) => !open && setDeleteId(null)}
+        onDelete={() =>
+          deleteId &&
+          deleteInvitation(
+            { id: deleteId },
+            { onSettled: () => setDeleteId(null) },
+          )
+        }
+        isDeleting={isDeleting}
+      />
     </>
   );
 }
-
-/* --- Subcomponents --- */
-
-function StatusBadge({ status }: { status: 'Pending' | 'Accepted' | 'Expired' }) {
-  const styles = {
-    Pending: "bg-amber-50 text-amber-600 border-amber-200/60",
-    Accepted: "bg-emerald-50 text-emerald-600 border-emerald-200/60",
-    Expired: "bg-rose-50 text-rose-600 border-rose-200/60",
-  };
-
-  const dotColors = {
-    Pending: "bg-amber-500",
-    Accepted: "bg-emerald-500",
-    Expired: "bg-rose-500",
-  };
-
-  const labels = {
-    Pending: "Pending",
-    Accepted: "Active",
-    Expired: "Expired",
-  };
-
-  return (
-    <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border ${styles[status]}`}>
-      <span className={`w-1.5 h-1.5 rounded-full ${dotColors[status]}`}></span>
-      {labels[status]}
-    </span>
-  );
-}
\ No newline at end of file
diff --git a/server/src/app/admin/projects/page.tsx b/server/src/app/admin/projects/page.tsx
index f8c251bf..abab70a2 100644
--- a/server/src/app/admin/projects/page.tsx
+++ b/server/src/app/admin/projects/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import type {
   AdminProject,
@@ -12,29 +12,8 @@ import {
   getAdminProjectStats,
   updateProject,
 } from "@/server_actions/adminProjectActions";
-import {
-  Beaker,
-  BookOpen,
-  CheckCircle,
-  Cpu,
-  Film,
-  FolderOpen,
-  Globe,
-  MoreVertical,
-  Trash2,
-  Users,
-} from "lucide-react";
+import { Beaker, BookOpen, Cpu, Film, Globe, Plus, Search } from "lucide-react";
 
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
@@ -47,15 +26,6 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
 import {
   Select,
   SelectContent,
@@ -63,32 +33,20 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Textarea } from "@/components/ui/textarea";
+import { ConfirmDeleteDialog } from "@/components/admin";
+import ProjectsStats from "@/components/admin-dashboard/ProjectsStats";
+import ProjectsTable from "@/components/admin-dashboard/ProjectsTable";
+import PageHeader from "@/components/admin/PageHeader";
 import AsideSidebar from "@/components/AsideSidebar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
 
 const DOMAIN_ICONS: Record<string, React.ReactNode> = {
-  software: <Cpu size={18} className="text-[#737373]" />,
-  film: <Film size={18} className="text-[#737373]" />,
-  training: <BookOpen size={18} className="text-[#737373]" />,
-  research: <Beaker size={18} className="text-[#737373]" />,
-  other: <Globe size={18} className="text-[#737373]" />,
+  software: <Cpu size={18} />,
+  film: <Film size={18} />,
+  training: <BookOpen size={18} />,
+  research: <Beaker size={18} />,
+  other: <Globe size={18} />,
 };
-
 const DOMAIN_LABELS: Record<string, string> = {
   software: "Software",
   film: "Film",
@@ -96,50 +54,34 @@ const DOMAIN_LABELS: Record<string, string> = {
   research: "Research",
   other: "Other",
 };
-
-const ITEMS_PER_PAGE = 10;
-
-const EMPTY_FORM = { name: "", description: "", domain: "software" };
+const DOMAIN_OPTIONS = ["software", "film", "training", "research", "other"];
+const EMPTY_FORM = { name: "", description: "", domain: "software" as const };
 
 export default function ProjectsPage() {
   const [page, setPage] = useState(1);
-  const [domainFilter, setDomainFilter] = useState<string>("all");
+  const [search, setSearch] = useState("");
   const [stats, setStats] = useState<AdminProjectStats | null>(null);
   const [loading, setLoading] = useState(true);
-
   const [viewProject, setViewProject] = useState<AdminProject | null>(null);
   const [editProject, setEditProject] = useState<AdminProject | null>(null);
   const [editForm, setEditForm] = useState(EMPTY_FORM);
   const [editSaving, setEditSaving] = useState(false);
-
   const [showCreate, setShowCreate] = useState(false);
   const [createForm, setCreateForm] = useState(EMPTY_FORM);
   const [createSaving, setCreateSaving] = useState(false);
-
   const [deleteId, setDeleteId] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
 
   const reload = () => {
     setLoading(true);
     getAdminProjectStats()
-      .then((data) => setStats(data))
+      .then(setStats)
       .finally(() => setLoading(false));
   };
 
-  useEffect(() => {
-    reload();
-  }, []);
-
-  function openEdit(project: AdminProject) {
-    setEditProject(project);
-    setEditForm({
-      name: project.name,
-      description: project.description,
-      domain: project.domain,
-    });
-  }
+  useEffect(() => reload(), []);
 
-  async function handleEditSave() {
+  const handleEditSave = async () => {
     if (!editProject) return;
     setEditSaving(true);
     try {
@@ -154,9 +96,9 @@ export default function ProjectsPage() {
     } finally {
       setEditSaving(false);
     }
-  }
+  };
 
-  async function handleCreateSave() {
+  const handleCreateSave = async () => {
     setCreateSaving(true);
     try {
       await createProject(
@@ -170,9 +112,9 @@ export default function ProjectsPage() {
     } finally {
       setCreateSaving(false);
     }
-  }
+  };
 
-  async function handleDelete() {
+  const handleDelete = async () => {
     if (!deleteId) return;
     setDeleting(true);
     try {
@@ -182,522 +124,334 @@ export default function ProjectsPage() {
     } finally {
       setDeleting(false);
     }
-  }
-
-  const allProjects: AdminProject[] = stats?.projects ?? [];
+  };
 
-  const filtered = allProjects.filter((p) =>
-    domainFilter === "all" ? true : p.domain === domainFilter,
-  );
+  // Filtered projects based on search
+  const filteredProjects = useMemo(() => {
+    const allProjects = stats?.projects ?? [];
+    const query = search.trim().toLowerCase();
+    return query.length === 0
+      ? allProjects
+      : allProjects.filter(
+          (p) =>
+            p.name.toLowerCase().includes(query) ||
+            p.domain.toLowerCase().includes(query) ||
+            p.createdBy.toLowerCase().includes(query),
+        );
+  }, [stats?.projects, search]);
 
-  const totalPages = Math.max(1, Math.ceil(filtered.length / ITEMS_PER_PAGE));
+  const ITEMS_PER_PAGE = 10;
+  const totalProjects = filteredProjects.length;
+  const totalPages = Math.max(1, Math.ceil(totalProjects / ITEMS_PER_PAGE));
   const currentPage = Math.min(page, totalPages);
-  const displayedProjects = filtered.slice(
+  const pagedProjects = filteredProjects.slice(
     (currentPage - 1) * ITEMS_PER_PAGE,
     currentPage * ITEMS_PER_PAGE,
   );
 
-  return (
-    <div className="flex min-h-screen bg-[#f1f1f9]">
-      <AsideSidebar />
+  const startCount =
+    filteredProjects.length === 0 ? 0 : (currentPage - 1) * ITEMS_PER_PAGE + 1;
+  const endCount = Math.min(
+    currentPage * ITEMS_PER_PAGE,
+    filteredProjects.length,
+  );
 
-      <div className="flex-1 p-8 space-y-6 min-w-0">
-        {/* Header + Stat Cards */}
-        <Card className="p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <h1 className="text-page-title text-[#0A0A0A]">Projects</h1>
-            <Button
-              className="bg-[#0A0A0A] text-white hover:bg-[#333] flex items-center gap-2"
-              onClick={() => {
-                setCreateForm(EMPTY_FORM);
-                setShowCreate(true);
-              }}
-            >
-              + Create New Project
-            </Button>
-          </div>
+  const goToPage = (nextPage: number) => {
+    if (nextPage < 1 || nextPage > totalPages) {
+      return;
+    }
+    setPage(nextPage);
+  };
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
-              <div>
-                <p className="text-sm text-[#737373]">Total Projects</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {loading ? "—" : (stats?.totalProjects ?? 0)}
-                </p>
-              </div>
-              <FolderOpen className="text-[#737373]" size={28} />
-            </div>
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
+  const renderSelectItems = () =>
+    DOMAIN_OPTIONS.map((d) => (
+      <SelectItem key={d} value={d}>
+        {DOMAIN_LABELS[d]}
+      </SelectItem>
+    ));
+
+  return (
+    <>
+      <div className="flex min-h-screen bg-[#f5f7fb]">
+        <AsideSidebar />
+
+        <div className="flex-1 p-5 md:p-8">
+          <Card className="overflow-hidden border-[#d9dde5] bg-white">
+            <div className="space-y-4 p-4 md:p-5">
+              {/* Header */}
               <div>
-                <p className="text-sm text-[#737373]">Total Mentors</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {loading ? "—" : (stats?.totalMentors ?? 0)}
-                </p>
+                <PageHeader
+                  title="Projects"
+                  subtitle="Manage and organize all projects with mentors and students."
+                />
               </div>
-              <CheckCircle className="text-green-500" size={28} />
-            </div>
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
-              <div>
-                <p className="text-sm text-[#737373]">Total Students</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {loading ? "—" : (stats?.totalStudents ?? 0)}
-                </p>
+
+              {/* Stats Cards */}
+              <ProjectsStats
+                loading={loading}
+                totalProjects={stats?.totalProjects ?? 0}
+                totalMentors={stats?.totalMentors ?? 0}
+                totalStudents={stats?.totalStudents ?? 0}
+              />
+
+              {/* Search and Create Button Bar */}
+              <div className="flex flex-wrap items-end gap-3 rounded-lg border border-[#e4e7ed] bg-[#f8fafc] p-3">
+                <div className="w-full sm:w-auto space-y-1">
+                  <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+                    Search
+                  </p>
+                  <div className="relative">
+                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                    <input
+                      className="h-8 w-full sm:w-[280px] rounded-lg border border-[#dbe0e8] bg-white pl-9 pr-3 text-sm text-slate-700 outline-none transition focus:border-slate-400"
+                      type="search"
+                      value={search}
+                      onChange={(event) => {
+                        setSearch(event.target.value);
+                        setPage(1);
+                      }}
+                      placeholder="Search by name, domain, or creator..."
+                    />
+                  </div>
+                </div>
+
+                {/* Create Button */}
+                <button
+                  onClick={() => {
+                    setCreateForm(EMPTY_FORM);
+                    setShowCreate(true);
+                  }}
+                  className="ml-auto inline-flex items-center justify-center gap-2 h-9 px-4 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors shadow-sm shrink-0 w-full sm:w-auto"
+                >
+                  <Plus size={15} /> Create Project
+                </button>
               </div>
-              <Users className="text-blue-500" size={28} />
-            </div>
-          </div>
-        </Card>
 
-        {/* Filters */}
-        <div className="flex flex-wrap gap-3 items-center">
-          <Select
-            value={domainFilter}
-            onValueChange={(v) => {
-              setDomainFilter(v);
-              setPage(1);
-            }}
-          >
-            <SelectTrigger className="w-[140px] bg-white border-[#E5E5E5]">
-              <SelectValue placeholder="Domain" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All Domains</SelectItem>
-              <SelectItem value="software">Software</SelectItem>
-              <SelectItem value="film">Film</SelectItem>
-              <SelectItem value="training">Training</SelectItem>
-              <SelectItem value="research">Research</SelectItem>
-              <SelectItem value="other">Other</SelectItem>
-            </SelectContent>
-          </Select>
+              {/* Table */}
+              <div className="overflow-hidden rounded-lg border border-[#e4e7ed]">
+                <ProjectsTable
+                  data={pagedProjects.map((p) => ({
+                    id: p.id,
+                    name: p.name,
+                    domain: p.domain,
+                    mentors: p.mentors,
+                    students: p.students,
+                    createdBy: p.createdBy,
+                    createdDate: p.createdDate,
+                    description: p.description,
+                  }))}
+                  loading={loading}
+                  domainIcons={DOMAIN_ICONS}
+                  domainLabels={DOMAIN_LABELS}
+                  onView={(project) => setViewProject(project as any)}
+                  onEdit={(project) => {
+                    setEditProject(project as any);
+                    setEditForm({
+                      name: project.name,
+                      description: project.description || "",
+                      domain: (project.domain as any) || "software",
+                    });
+                  }}
+                  onDelete={setDeleteId}
+                />
 
-          {domainFilter !== "all" && (
-            <Button
-              variant="ghost"
-              className="text-[#737373] hover:text-[#0A0A0A]"
-              onClick={() => {
-                setDomainFilter("all");
-                setPage(1);
-              }}
-            >
-              Reset
-            </Button>
-          )}
-        </div>
+                {/* Pagination Footer */}
+                <div className="flex flex-col gap-3 border-t border-[#e4e7ed] px-4 py-3 sm:flex-row sm:items-center sm:justify-between bg-white">
+                  <p className="text-sm text-slate-500">
+                    Showing {startCount} to {endCount} of {totalProjects}{" "}
+                    projects
+                  </p>
 
-        {/* Table */}
-        <Card className="overflow-visible">
-          <div className="w-full overflow-x-auto">
-            <Table className="min-w-[700px]">
-              <TableHeader>
-                <TableRow className="bg-[#F5F5F5]">
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-6">
-                    Project Name
-                  </TableHead>
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-4">
-                    Domain
-                  </TableHead>
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-4">
-                    Mentors
-                  </TableHead>
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-4">
-                    Students
-                  </TableHead>
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-4">
-                    Created By
-                  </TableHead>
-                  <TableHead className="text-xs font-bold uppercase text-[#737373] py-4 px-4">
-                    Created Date
-                  </TableHead>
-                  <TableHead className="py-4 px-4" />
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading && (
-                  <TableRow>
-                    <TableCell
-                      colSpan={7}
-                      className="text-center py-12 text-[#737373]"
+                  <div className="flex items-center gap-2">
+                    <button
+                      onClick={() => goToPage(currentPage - 1)}
+                      disabled={currentPage === 1}
+                      className="h-8 px-3 rounded border border-[#dbe0e8] text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                     >
-                      Loading projects…
-                    </TableCell>
-                  </TableRow>
-                )}
-                {!loading && displayedProjects.length === 0 && (
-                  <TableRow>
-                    <TableCell
-                      colSpan={7}
-                      className="text-center py-12 text-[#737373]"
-                    >
-                      No projects found.
-                    </TableCell>
-                  </TableRow>
-                )}
-                {displayedProjects.map((project) => (
-                  <TableRow key={project.id} className="hover:bg-[#F5F5F5]">
-                    <TableCell className="py-4 px-6">
-                      <div className="flex items-center gap-3">
-                        <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#F0F0F0] shrink-0">
-                          {DOMAIN_ICONS[project.domain] ?? (
-                            <Globe size={18} className="text-[#737373]" />
-                          )}
-                        </div>
-                        <span className="font-semibold text-[#0A0A0A]">
-                          {project.name}
-                        </span>
-                      </div>
-                    </TableCell>
-                    <TableCell className="py-4 px-4">
-                      <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-[#EBEBEB] text-[#0A0A0A]">
-                        {DOMAIN_LABELS[project.domain] ?? project.domain}
-                      </span>
-                    </TableCell>
-                    <TableCell className="py-4 px-4 text-[#0A0A0A] font-medium">
-                      {project.mentors}
-                    </TableCell>
-                    <TableCell className="py-4 px-4 text-[#0A0A0A] font-medium">
-                      {project.students}
-                    </TableCell>
-                    <TableCell className="py-4 px-4 text-[#0A0A0A] font-semibold">
-                      {project.createdBy}
-                    </TableCell>
-                    <TableCell className="py-4 px-4 text-[#737373]">
-                      {project.createdDate}
-                    </TableCell>
-                    <TableCell className="py-4 px-4">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-8 w-8 text-[#737373] hover:text-[#0A0A0A]"
+                      Previous
+                    </button>
+                    <div className="flex items-center gap-1">
+                      {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+                        (pageNum) => (
+                          <button
+                            key={pageNum}
+                            onClick={() => goToPage(pageNum)}
+                            className={`h-8 w-8 rounded text-sm font-medium transition-colors ${
+                              currentPage === pageNum
+                                ? "bg-[#18181B] text-white"
+                                : "border border-[#dbe0e8] text-slate-700 hover:bg-slate-50"
+                            }`}
                           >
-                            <MoreVertical size={16} />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end" className="w-44">
-                          <DropdownMenuItem
-                            onSelect={() => setViewProject(project)}
-                          >
-                            View Details
-                          </DropdownMenuItem>
-                          <DropdownMenuItem onSelect={() => openEdit(project)}>
-                            Edit Project
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DropdownMenuItem
-                            className="text-red-600 focus:text-red-600 focus:bg-red-50"
-                            onSelect={() => setDeleteId(project.id)}
-                          >
-                            <Trash2 size={14} className="mr-2" />
-                            Delete Project
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-
-          {/* Pagination */}
-          <div className="flex items-center justify-between px-6 py-4 border-t border-[#E5E5E5]">
-            <p className="text-sm text-[#737373]">
-              Showing{" "}
-              <span className="font-semibold text-[#0A0A0A]">
-                {filtered.length === 0
-                  ? 0
-                  : (currentPage - 1) * ITEMS_PER_PAGE + 1}
-              </span>{" "}
-              to{" "}
-              <span className="font-semibold text-[#0A0A0A]">
-                {Math.min(currentPage * ITEMS_PER_PAGE, filtered.length)}
-              </span>{" "}
-              of{" "}
-              <span className="font-semibold text-[#0A0A0A]">
-                {filtered.length}
-              </span>{" "}
-              results
-            </p>
-            <Pagination className="w-auto">
-              <PaginationContent>
-                <PaginationItem>
-                  <PaginationPrevious
-                    onClick={() => setPage((p) => Math.max(1, p - 1))}
-                  />
-                </PaginationItem>
-                {Array.from(
-                  { length: Math.min(totalPages, 5) },
-                  (_, i) => i + 1,
-                ).map((p) => (
-                  <PaginationItem key={p}>
-                    <PaginationLink
-                      isActive={currentPage === p}
-                      onClick={() => setPage(p)}
+                            {pageNum}
+                          </button>
+                        ),
+                      )}
+                    </div>
+                    <button
+                      onClick={() => goToPage(currentPage + 1)}
+                      disabled={currentPage === totalPages}
+                      className="h-8 px-3 rounded border border-[#dbe0e8] text-sm font-medium text-slate-700 hover:bg-slate-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                     >
-                      {p}
-                    </PaginationLink>
-                  </PaginationItem>
-                ))}
-                {totalPages > 5 && (
-                  <PaginationItem>
-                    <PaginationEllipsis />
-                  </PaginationItem>
-                )}
-                <PaginationItem>
-                  <PaginationNext
-                    onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-                  />
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          </div>
-        </Card>
+                      Next
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
       </div>
 
-      {/* ── View Details Dialog ──────────────────────────────────────────── */}
-      <Dialog
-        open={!!viewProject}
-        onOpenChange={(open) => !open && setViewProject(null)}
-      >
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>Project Details</DialogTitle>
-          </DialogHeader>
-          {viewProject && (
+      {/** Reusable Dialogs */}
+      {viewProject && (
+        <Dialog open onOpenChange={(open) => !open && setViewProject(null)}>
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>Project Details</DialogTitle>
+            </DialogHeader>
             <div className="space-y-4 text-sm">
               <div className="flex items-center gap-3">
                 <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-[#F0F0F0] shrink-0">
-                  {DOMAIN_ICONS[viewProject.domain] ?? (
-                    <Globe size={18} className="text-[#737373]" />
-                  )}
+                  {DOMAIN_ICONS[viewProject.domain] ?? <Globe size={18} />}
                 </div>
-                <p className="text-lg font-bold text-[#0A0A0A]">
-                  {viewProject.name}
-                </p>
+                <p className="text-lg font-bold">{viewProject.name}</p>
               </div>
-              {viewProject.description && (
-                <div>
-                  <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
-                    Description
-                  </p>
-                  <p className="text-[#0A0A0A]">{viewProject.description}</p>
-                </div>
-              )}
+              {viewProject.description && <p>{viewProject.description}</p>}
               <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
-                    Domain
-                  </p>
-                  <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-[#EBEBEB] text-[#0A0A0A]">
-                    {DOMAIN_LABELS[viewProject.domain] ?? viewProject.domain}
-                  </span>
-                </div>
-                <div>
-                  <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
-                    Created Date
-                  </p>
-                  <p className="text-[#0A0A0A]">{viewProject.createdDate}</p>
-                </div>
-                <div>
-                  <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
-                    Mentors
-                  </p>
-                  <p className="text-[#0A0A0A] font-semibold">
-                    {viewProject.mentors}
-                  </p>
-                </div>
-                <div>
-                  <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
-                    Students
-                  </p>
-                  <p className="text-[#0A0A0A] font-semibold">
-                    {viewProject.students}
-                  </p>
-                </div>
+                {["Domain", "Created Date", "Mentors", "Students"].map(
+                  (l, i) => (
+                    <div key={i}>
+                      <p className="text-xs font-semibold uppercase text-slate-500">
+                        {l}
+                      </p>
+                      <p className="font-semibold text-slate-900">
+                        {l === "Domain"
+                          ? DOMAIN_LABELS[viewProject.domain]
+                          : l === "Created Date"
+                            ? viewProject.createdDate
+                            : l === "Mentors"
+                              ? viewProject.mentors
+                              : viewProject.students}
+                      </p>
+                    </div>
+                  ),
+                )}
               </div>
               <div>
-                <p className="text-xs font-semibold uppercase text-[#737373] mb-1">
+                <p className="text-xs font-semibold uppercase text-slate-500">
                   Created By
                 </p>
-                <p className="text-[#0A0A0A]">{viewProject.createdBy}</p>
+                <p className="text-slate-900">{viewProject.createdBy}</p>
               </div>
             </div>
-          )}
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Close</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* ── Edit Project Dialog ───────────────────────────────────────────── */}
-      <Dialog
-        open={!!editProject}
-        onOpenChange={(open) => !open && setEditProject(null)}
-      >
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>Edit Project</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="edit-name">Project Name</Label>
-              <Input
-                id="edit-name"
-                value={editForm.name}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, name: e.target.value }))
-                }
-                placeholder="Enter project name"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="edit-desc">Description (optional)</Label>
-              <Textarea
-                id="edit-desc"
-                value={editForm.description}
-                onChange={(e) =>
-                  setEditForm((f) => ({ ...f, description: e.target.value }))
-                }
-                placeholder="Brief description of the project"
-                rows={3}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label>Domain</Label>
-              <Select
-                value={editForm.domain}
-                onValueChange={(v) => setEditForm((f) => ({ ...f, domain: v }))}
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select domain" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="software">Software</SelectItem>
-                  <SelectItem value="film">Film</SelectItem>
-                  <SelectItem value="training">Training</SelectItem>
-                  <SelectItem value="research">Research</SelectItem>
-                  <SelectItem value="other">Other</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <DialogFooter className="gap-2">
-            <DialogClose asChild>
-              <Button variant="outline" disabled={editSaving}>
-                Cancel
-              </Button>
-            </DialogClose>
-            <Button
-              className="bg-[#0A0A0A] text-white hover:bg-[#333]"
-              onClick={handleEditSave}
-              disabled={editSaving || !editForm.name.trim()}
-            >
-              {editSaving ? "Saving…" : "Save Changes"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button variant="outline">Close</Button>
+              </DialogClose>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      )}
 
-      {/* ── Create New Project Dialog ─────────────────────────────────────── */}
-      <Dialog
-        open={showCreate}
-        onOpenChange={(open) => !open && setShowCreate(false)}
-      >
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>Create New Project</DialogTitle>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div className="space-y-1.5">
-              <Label htmlFor="create-name">Project Name</Label>
-              <Input
-                id="create-name"
-                value={createForm.name}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, name: e.target.value }))
-                }
-                placeholder="Enter project name"
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label htmlFor="create-desc">Description (optional)</Label>
-              <Textarea
-                id="create-desc"
-                value={createForm.description}
-                onChange={(e) =>
-                  setCreateForm((f) => ({ ...f, description: e.target.value }))
-                }
-                placeholder="Brief description of the project"
-                rows={3}
-              />
-            </div>
-            <div className="space-y-1.5">
-              <Label>Domain</Label>
-              <Select
-                value={createForm.domain}
-                onValueChange={(v) =>
-                  setCreateForm((f) => ({ ...f, domain: v }))
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder="Select domain" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="software">Software</SelectItem>
-                  <SelectItem value="film">Film</SelectItem>
-                  <SelectItem value="training">Training</SelectItem>
-                  <SelectItem value="research">Research</SelectItem>
-                  <SelectItem value="other">Other</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-          </div>
-          <DialogFooter className="gap-2">
-            <DialogClose asChild>
-              <Button variant="outline" disabled={createSaving}>
-                Cancel
-              </Button>
-            </DialogClose>
-            <Button
-              className="bg-[#0A0A0A] text-white hover:bg-[#333]"
-              onClick={handleCreateSave}
-              disabled={createSaving || !createForm.name.trim()}
-            >
-              {createSaving ? "Creating…" : "Create Project"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      {[
+        {
+          show: !!editProject,
+          form: editForm,
+          setForm: setEditForm,
+          onSave: handleEditSave,
+          saving: editSaving,
+          title: "Edit Project",
+          onClose: () => setEditProject(null),
+        },
+        {
+          show: showCreate,
+          form: createForm,
+          setForm: setCreateForm,
+          onSave: handleCreateSave,
+          saving: createSaving,
+          title: "Create New Project",
+          onClose: () => setShowCreate(false),
+        },
+      ].map(
+        (d, i) =>
+          d.show && (
+            <Dialog key={i} open onOpenChange={(open) => !open && d.onClose()}>
+              <DialogContent className="max-w-md">
+                <DialogHeader>
+                  <DialogTitle>{d.title}</DialogTitle>
+                </DialogHeader>
+                <div className="space-y-4">
+                  <div className="space-y-1.5">
+                    <Label>Project Name</Label>
+                    <Input
+                      value={d.form.name}
+                      onChange={(e) =>
+                        d.setForm((f) => ({ ...f, name: e.target.value }))
+                      }
+                      placeholder="Enter project name"
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Description (optional)</Label>
+                    <Textarea
+                      value={d.form.description}
+                      onChange={(e) =>
+                        d.setForm((f) => ({
+                          ...f,
+                          description: e.target.value,
+                        }))
+                      }
+                      rows={3}
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <Label>Domain</Label>
+                    <Select
+                      value={d.form.domain}
+                      onValueChange={(v) =>
+                        d.setForm((f) => ({ ...f, domain: v as any }))
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>{renderSelectItems()}</SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                <DialogFooter className="gap-2">
+                  <DialogClose asChild>
+                    <Button variant="outline" disabled={d.saving}>
+                      Cancel
+                    </Button>
+                  </DialogClose>
+                  <Button
+                    className="bg-[#18181B] text-white hover:bg-[#27272A]"
+                    onClick={d.onSave}
+                    disabled={d.saving || !d.form.name.trim()}
+                  >
+                    {d.saving
+                      ? d.title.includes("Edit")
+                        ? "Saving…"
+                        : "Creating…"
+                      : d.title.includes("Edit")
+                        ? "Save Changes"
+                        : "Create Project"}
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+          ),
+      )}
 
-      {/* ── Delete Confirmation ───────────────────────────────────────────── */}
-      <AlertDialog
+      <ConfirmDeleteDialog
         open={!!deleteId}
         onOpenChange={(open) => !open && setDeleteId(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete Project</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete the project and remove all mentor and
-              student assignments associated with it. This action cannot be
-              undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-red-600 hover:bg-red-700 text-white"
-              onClick={handleDelete}
-              disabled={deleting}
-            >
-              {deleting ? "Deleting…" : "Delete"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </div>
+        onConfirm={handleDelete}
+        isPending={deleting}
+        title="Delete Project"
+        description="This will permanently delete the project and all associated data. This action cannot be undone."
+      />
+    </>
   );
 }
diff --git a/server/src/app/admin/reports/page.tsx b/server/src/app/admin/reports/page.tsx
index 02d0aa25..0088f90d 100644
--- a/server/src/app/admin/reports/page.tsx
+++ b/server/src/app/admin/reports/page.tsx
@@ -1,595 +1,121 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-
-import { CheckCircle, Clock, FileText } from "lucide-react";
-
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/components/ui/pagination";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import AsideSidebar from "@/components/AsideSidebar";
-
-interface ReportRow {
-  id: string;
-  projectName: string;
-  mentor: string;
-  studentsCount: number;
-  date: string;
-  rawDate: string;
-}
-
-const ITEMS_PER_PAGE = 5;
-
-function formatDisplayDate(value: string) {
-  const date = new Date(value);
-
-  if (Number.isNaN(date.getTime())) {
-    return "-";
-  }
-
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "2-digit",
-    year: "numeric",
-  });
-}
-
-function formatInputDate(value: string) {
-  const date = new Date(value);
-
-  if (Number.isNaN(date.getTime())) {
-    return "";
-  }
-
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-
-  return `${year}-${month}-${day}`;
-}
+  AdminPageLayout,
+  AdminPagination,
+  PageHeader,
+} from "@/components/admin";
+import { ReportsFilters } from "@/components/reports/ReportsFilters";
+import { ReportsStatCards } from "@/components/reports/ReportsStatCards";
+import { ReportsTable } from "@/components/reports/ReportsTable";
+import { ITEMS_PER_PAGE } from "@/components/reports/types";
+import { useGeneratePDF } from "@/components/reports/useGeneratePDF";
+import { useReportsData } from "@/components/reports/useReportsData";
+import { useReportsFilters } from "@/components/reports/useReportsFilters";
 
 export default function ReportsPage() {
-  const [isLoading, setIsLoading] = useState(true);
-  const [fetchError, setFetchError] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [projectFilter, setProjectFilter] = useState("all");
-  const [mentorFilter, setMentorFilter] = useState("all");
-  const [dateFrom, setDateFrom] = useState("");
-  const [dateTo, setDateTo] = useState("");
-  const [tableRows, setTableRows] = useState<ReportRow[]>([]);
-
-  useEffect(() => {
-    let mounted = true;
-
-    const loadData = async () => {
-      setIsLoading(true);
-      setFetchError(null);
-
-      try {
-        const tableResponse = await fetch("/api/admin/reports", {
-          cache: "no-store",
-        });
-
-        if (!tableResponse.ok) {
-          const payload = await tableResponse
-            .json()
-            .catch(() => ({ message: "Failed to fetch project data" }));
-          throw new Error(payload.message ?? "Failed to fetch project data");
-        }
-
-        const tableData = (await tableResponse.json()) as ReportRow[];
-
-        if (!mounted) {
-          return;
-        }
-
-        setTableRows(
-          Array.isArray(tableData)
-            ? tableData.map((row) => ({
-                ...row,
-                date: formatDisplayDate(row.rawDate),
-              }))
-            : [],
-        );
-      } catch (error) {
-        if (!mounted) {
-          return;
-        }
-
-        setTableRows([]);
-        setFetchError(
-          error instanceof Error
-            ? error.message
-            : "Failed to fetch project data",
-        );
-      } finally {
-        if (mounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    loadData();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  const projectOptions = useMemo(() => {
-    return Array.from(new Set(tableRows.map((row) => row.projectName))).sort(
-      (left, right) => left.localeCompare(right),
-    );
-  }, [tableRows]);
-
-  const mentorOptions = useMemo(() => {
-    return Array.from(new Set(tableRows.map((row) => row.mentor))).sort(
-      (left, right) => left.localeCompare(right),
-    );
-  }, [tableRows]);
-
-  const filteredReports = useMemo(() => {
-    return tableRows.filter((row) => {
-      const matchesProject =
-        projectFilter === "all" || row.projectName === projectFilter;
-      const matchesMentor =
-        mentorFilter === "all" || row.mentor === mentorFilter;
-
-      const rowDate = formatInputDate(row.rawDate);
-      const matchesFrom = dateFrom.length === 0 || rowDate >= dateFrom;
-      const matchesTo = dateTo.length === 0 || rowDate <= dateTo;
-
-      return matchesProject && matchesMentor && matchesFrom && matchesTo;
-    });
-  }, [dateFrom, dateTo, mentorFilter, projectFilter, tableRows]);
-
-  const totalGenerated = tableRows.length;
-  const pendingReports = 0;
-  const completedReports = tableRows.length;
-
-  const totalPages = Math.max(
-    1,
-    Math.ceil(filteredReports.length / ITEMS_PER_PAGE),
-  );
-  const safePage = Math.min(page, totalPages);
-  const pageNumbers = Array.from(
-    { length: totalPages },
-    (_, index) => index + 1,
-  ).filter((pageNumber) => Math.abs(pageNumber - safePage) <= 1);
-  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
-  const visibleReports = filteredReports.slice(
-    startIndex,
-    startIndex + ITEMS_PER_PAGE,
+  // Fetch raw report rows from the API
+  const { tableRows, isLoading, fetchError } = useReportsData();
+
+  // Manage filter state and derive paginated/filtered data
+  const {
+    projectFilter,
+    mentorFilter,
+    dateFrom,
+    dateTo,
+    setProjectFilter,
+    setMentorFilter,
+    setDateFrom,
+    setDateTo,
+    projectOptions,
+    mentorOptions,
+    resetFilters,
+    filteredReports,
+    visibleReports,
+    safePage,
+    totalPages,
+    setPage,
+  } = useReportsFilters(tableRows);
+
+  // PDF export using the currently filtered rows
+  const { isExporting, generatePDF } = useGeneratePDF(
+    filteredReports,
+    dateFrom,
+    dateTo,
   );
-  const startCount = filteredReports.length === 0 ? 0 : startIndex + 1;
-  const endCount = Math.min(
-    startIndex + ITEMS_PER_PAGE,
-    filteredReports.length,
-  );
-
-  const [isExporting, setIsExporting] = useState(false);
-
-  const resetFilters = () => {
-    setProjectFilter("all");
-    setMentorFilter("all");
-    setDateFrom("");
-    setDateTo("");
-    setPage(1);
-  };
-
-  const generatePDF = async () => {
-    setIsExporting(true);
-    try {
-      const jsPDFModule = await import("jspdf");
-      const jsPDF = jsPDFModule.default;
-      const doc = new jsPDF({ unit: "pt", format: "a4" });
-      const margin = 40;
-      let y = 50;
-
-      // Header banner
-      doc.setFillColor(6, 78, 124);
-      doc.rect(0, 0, 595, 110, "F");
-      doc.setFillColor(12, 112, 162);
-      doc.rect(0, 70, 595, 40, "F");
-      doc.setTextColor(255, 255, 255);
-      doc.setFontSize(20);
-      doc.setFont("helvetica", "bold");
-      doc.text("LOGBOOK MENTORSHIP OS", margin, 36);
-      doc.setFontSize(14);
-      doc.setFont("helvetica", "normal");
-      doc.text("Project Reports", margin, 58);
-      doc.setFontSize(9);
-      doc.text(`Generated at: ${new Date().toLocaleString()}`, margin, 74);
-      doc.text("Project Name · Mentor · Students Count · Date", margin, 88);
-      doc.setTextColor(0, 0, 0);
-
-      y = 128;
-      doc.setDrawColor(220);
-      doc.line(margin, y, 555, y);
-      y += 16;
-
-      // Summary row
-      doc.setFontSize(10);
-      doc.setFont("helvetica", "normal");
-      doc.text(`Total rows exported: ${filteredReports.length}`, margin, y);
-      if (dateFrom || dateTo) {
-        const range = [
-          dateFrom && `From: ${dateFrom}`,
-          dateTo && `To: ${dateTo}`,
-        ]
-          .filter(Boolean)
-          .join("   ");
-        doc.text(range, margin + 200, y);
-      }
-      y += 20;
-
-      // Table header
-      const colX = {
-        project: margin,
-        mentor: margin + 180,
-        students: margin + 360,
-        date: margin + 440,
-      };
-      doc.setFillColor(247, 248, 250);
-      doc.rect(margin, y - 10, 515, 18, "F");
-      doc.setFontSize(9);
-      doc.setFont("helvetica", "bold");
-      doc.setTextColor(55, 65, 81);
-      doc.text("PROJECT NAME", colX.project + 3, y);
-      doc.text("MENTOR", colX.mentor, y);
-      doc.text("STUDENTS", colX.students, y);
-      doc.text("DATE", colX.date, y);
-      y += 14;
-
-      doc.setDrawColor(220);
-      doc.line(margin, y, 555, y);
-      y += 6;
-
-      // Table rows
-      doc.setFont("helvetica", "normal");
-      doc.setFontSize(9);
-      let rowIndex = 0;
-      for (const row of filteredReports) {
-        if (y > 760) {
-          doc.addPage();
-          y = 50;
-        }
-        if (rowIndex % 2 === 0) {
-          doc.setFillColor(249, 250, 251);
-          doc.rect(margin, y - 9, 515, 14, "F");
-        }
-        doc.setTextColor(15, 23, 42);
-        // Truncate long project/mentor names to avoid overflow
-        const projectText =
-          row.projectName.length > 28
-            ? row.projectName.slice(0, 25) + "..."
-            : row.projectName;
-        const mentorText =
-          row.mentor.length > 20 ? row.mentor.slice(0, 17) + "..." : row.mentor;
-        doc.text(projectText, colX.project + 3, y);
-        doc.text(mentorText, colX.mentor, y);
-        doc.text(String(row.studentsCount), colX.students + 20, y);
-        doc.text(row.date, colX.date, y);
-        y += 14;
-        rowIndex++;
-      }
-
-      doc.save(`project-reports-${new Date().toISOString().slice(0, 10)}.pdf`);
-    } catch (err) {
-      console.error("PDF generation error", err);
-      alert("Unable to generate PDF. Please try again.");
-    } finally {
-      setIsExporting(false);
-    }
-  };
 
   return (
-    <div className="flex min-h-screen bg-[#f1f1f9]">
-      <AsideSidebar />
-
-      <div className="flex-1 p-8 space-y-6">
-        {/* Header + Stat Cards */}
-        <Card className="p-6 space-y-4">
-          <div className="flex items-center justify-between">
-            <h1 className="text-page-title text-[#0A0A0A]">Reports</h1>
-            <Button
-              className="bg-[#0A0A0A] text-white hover:bg-[#333]"
-              disabled={isExporting || isLoading}
-              onClick={generatePDF}
-            >
-              {isExporting ? "Generating..." : "Generate Report"}
-            </Button>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
-              <div>
-                <p className="text-sm text-[#737373]">Total Generated</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {totalGenerated}
-                </p>
-              </div>
-              <FileText className="text-[#737373]" size={28} />
-            </div>
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
-              <div>
-                <p className="text-sm text-[#737373]">Pending Reports</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {pendingReports}
-                </p>
-              </div>
-              <Clock className="text-yellow-500" size={28} />
-            </div>
-            <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
-              <div>
-                <p className="text-sm text-[#737373]">Completed Reports</p>
-                <p className="text-3xl font-bold text-[#0A0A0A]">
-                  {completedReports}
-                </p>
-              </div>
-              <CheckCircle className="text-green-500" size={28} />
-            </div>
-          </div>
-        </Card>
-
-        {/* Filters + Table */}
-        <Card className="overflow-hidden">
-          {/* Filters */}
-          <div className="p-4 border-b border-[#E5E5E5]">
-            <div className="flex flex-wrap gap-4 items-end">
-              <div className="flex flex-col gap-1">
-                <label className="text-xs text-[#737373] font-semibold uppercase tracking-wide">
-                  Project
-                </label>
-                <Select
-                  value={projectFilter}
-                  onValueChange={(value) => {
-                    setProjectFilter(value);
-                    setPage(1);
-                  }}
+    <AdminPageLayout className="bg-[#f1f1f9]">
+      <div className="flex-1 p-8">
+        <Card className="p-6 space-y-6">
+          {/* Header + stat summary */}
+          <Card className="p-6 space-y-4">
+            <PageHeader
+              title="Reports"
+              action={
+                <Button
+                  className="bg-[#0A0A0A] text-white hover:bg-[#333]"
+                  disabled={isExporting || isLoading}
+                  onClick={generatePDF}
                 >
-                  <SelectTrigger className="w-[160px]">
-                    <SelectValue placeholder="All Projects" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Projects</SelectItem>
-                    {projectOptions.map((project) => (
-                      <SelectItem key={project} value={project}>
-                        {project}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className="text-xs text-[#737373] font-semibold uppercase tracking-wide">
-                  Mentor
-                </label>
-                <Select
-                  value={mentorFilter}
-                  onValueChange={(value) => {
-                    setMentorFilter(value);
-                    setPage(1);
-                  }}
-                >
-                  <SelectTrigger className="w-[160px]">
-                    <SelectValue placeholder="Select Mentor" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="all">All Mentors</SelectItem>
-                    {mentorOptions.map((mentor) => (
-                      <SelectItem key={mentor} value={mentor}>
-                        {mentor}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className="text-xs text-[#737373] font-semibold uppercase tracking-wide">
-                  From
-                </label>
-                <input
-                  type="date"
-                  value={dateFrom}
-                  max={dateTo || undefined}
-                  onChange={(event) => {
-                    setDateFrom(event.target.value);
-                    setPage(1);
-                  }}
-                  className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm text-[#0A0A0A] bg-white focus:outline-none focus:ring-2 focus:ring-[#3B82F6]"
-                />
-              </div>
-              <div className="flex flex-col gap-1">
-                <label className="text-xs text-[#737373] font-semibold uppercase tracking-wide">
-                  To
-                </label>
-                <input
-                  type="date"
-                  value={dateTo}
-                  min={dateFrom || undefined}
-                  onChange={(event) => {
-                    setDateTo(event.target.value);
-                    setPage(1);
-                  }}
-                  className="border border-[#E5E5E5] rounded-md px-3 py-2 text-sm text-[#0A0A0A] bg-white focus:outline-none focus:ring-2 focus:ring-[#3B82F6]"
-                />
-              </div>
-              <Button
-                variant="ghost"
-                className="text-[#737373] hover:text-[#0A0A0A]"
-                onClick={resetFilters}
-              >
-                Reset
-              </Button>
-            </div>
-          </div>
-
-          {/* Table */}
-          <Table>
-            <TableHeader>
-              <TableRow className="bg-[#F5F5F5]">
-                <TableHead className="text-xs font-bold uppercase text-[#737373]">
-                  Project Name
-                </TableHead>
-                <TableHead className="text-xs font-bold uppercase text-[#737373]">
-                  Mentor
-                </TableHead>
-                <TableHead className="text-xs font-bold uppercase text-[#737373]">
-                  Students Count
-                </TableHead>
-                <TableHead className="text-xs font-bold uppercase text-[#737373]">
-                  Date
-                </TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {isLoading ? (
-                <TableRow>
-                  <TableCell
-                    colSpan={4}
-                    className="py-8 text-center text-sm text-[#737373]"
-                  >
-                    Loading reports...
-                  </TableCell>
-                </TableRow>
-              ) : fetchError ? (
-                <TableRow>
-                  <TableCell
-                    colSpan={4}
-                    className="py-8 text-center text-sm text-red-500"
-                  >
-                    {fetchError}
-                  </TableCell>
-                </TableRow>
-              ) : visibleReports.length === 0 ? (
-                <TableRow>
-                  <TableCell
-                    colSpan={4}
-                    className="py-8 text-center text-sm text-[#737373]"
-                  >
-                    No reports found for the selected filters.
-                  </TableCell>
-                </TableRow>
-              ) : (
-                visibleReports.map((report) => (
-                  <TableRow key={report.id} className="hover:bg-[#F5F5F5]">
-                    <TableCell>
-                      <div className="font-semibold text-[#0A0A0A]">
-                        {report.projectName}
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-[#0A0A0A]">
-                      {report.mentor}
-                    </TableCell>
-                    <TableCell className="text-[#0A0A0A]">
-                      {report.studentsCount}
-                    </TableCell>
-                    <TableCell className="text-[#737373]">
-                      {report.date}
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
+                  {isExporting ? "Generating..." : "Generate Report"}
+                </Button>
+              }
+            />
+            <ReportsStatCards
+              totalGenerated={tableRows.length}
+              pendingReports={0}
+              completedReports={tableRows.length}
+            />
+          </Card>
 
-          {/* Pagination */}
-          <div className="flex items-center justify-between px-4 py-3 border-t border-[#E5E5E5]">
-            <p className="text-sm text-[#737373]">
-              Showing {startCount} to {endCount} of {filteredReports.length}{" "}
-              entries
-            </p>
-            <Pagination className="w-auto">
-              <PaginationContent>
-                <PaginationItem>
-                  <PaginationPrevious
-                    onClick={() =>
-                      setPage((currentPage) => Math.max(1, currentPage - 1))
-                    }
-                  />
-                </PaginationItem>
-                {safePage > 2 ? (
-                  <>
-                    <PaginationItem>
-                      <PaginationLink
-                        isActive={safePage === 1}
-                        onClick={() => setPage(1)}
-                      >
-                        1
-                      </PaginationLink>
-                    </PaginationItem>
-                    {safePage > 3 ? (
-                      <PaginationItem>
-                        <PaginationEllipsis />
-                      </PaginationItem>
-                    ) : null}
-                  </>
-                ) : null}
-                {pageNumbers.map((pageNumber) => (
-                  <PaginationItem key={pageNumber}>
-                    <PaginationLink
-                      isActive={safePage === pageNumber}
-                      onClick={() => setPage(pageNumber)}
-                    >
-                      {pageNumber}
-                    </PaginationLink>
-                  </PaginationItem>
-                ))}
-                {safePage < totalPages - 1 ? (
-                  <>
-                    {safePage < totalPages - 2 ? (
-                      <PaginationItem>
-                        <PaginationEllipsis />
-                      </PaginationItem>
-                    ) : null}
-                    <PaginationItem>
-                      <PaginationLink
-                        isActive={safePage === totalPages}
-                        onClick={() => setPage(totalPages)}
-                      >
-                        {totalPages}
-                      </PaginationLink>
-                    </PaginationItem>
-                  </>
-                ) : null}
-                <PaginationItem>
-                  <PaginationNext
-                    onClick={() =>
-                      setPage((currentPage) =>
-                        Math.min(totalPages, currentPage + 1),
-                      )
-                    }
-                  />
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
-          </div>
+          {/* Filters */}
+          <ReportsFilters
+            projectFilter={projectFilter}
+            mentorFilter={mentorFilter}
+            dateFrom={dateFrom}
+            dateTo={dateTo}
+            projectOptions={projectOptions}
+            mentorOptions={mentorOptions}
+            onProjectChange={(v) => {
+              setProjectFilter(v);
+              setPage(1);
+            }}
+            onMentorChange={(v) => {
+              setMentorFilter(v);
+              setPage(1);
+            }}
+            onDateFromChange={(v) => {
+              setDateFrom(v);
+              setPage(1);
+            }}
+            onDateToChange={(v) => {
+              setDateTo(v);
+              setPage(1);
+            }}
+            onReset={resetFilters}
+          />
+
+          {/* Table and pagination */}
+          <Card className="overflow-hidden">
+            <ReportsTable
+              isLoading={isLoading}
+              fetchError={fetchError}
+              visibleReports={visibleReports}
+            />
+            <AdminPagination
+              page={safePage}
+              totalPages={totalPages}
+              total={filteredReports.length}
+              itemsPerPage={ITEMS_PER_PAGE}
+              itemLabel="entries"
+              onPageChange={setPage}
+            />
+          </Card>
         </Card>
       </div>
-    </div>
+    </AdminPageLayout>
   );
 }
diff --git a/server/src/app/admin/users/page.tsx b/server/src/app/admin/users/page.tsx
index 75d71097..f69f150b 100644
--- a/server/src/app/admin/users/page.tsx
+++ b/server/src/app/admin/users/page.tsx
@@ -1,778 +1,91 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-
-import { EllipsisVertical, Search } from "lucide-react";
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-} from "@/components/ui/pagination";
+  AdminPageLayout,
+  ConfirmDeleteDialog,
+  PageHeader,
+} from "@/components/admin";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import AsideSidebar from "@/components/AsideSidebar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/dropdown-menu";
-
-type UserRole = "Student" | "Mentor" | "SuperAdmin";
-type UserStatus = "Active" | "Inactive";
-
-type ApiUserRole = "student" | "mentor" | "superAdmin";
-
-interface ApiUserRecord {
-  id: string;
-  email: string;
-  firstName: string;
-  lastName: string;
-  role: ApiUserRole;
-  isActive: boolean;
-  createdAt: string;
-}
-
-interface UserRecord {
-  id: string;
-  name: string;
-  email: string;
-  role: UserRole;
-  status: UserStatus;
-  createdAt: string;
-  avatar?: string;
-}
-
-const ITEMS_PER_PAGE = 5;
-
-function toUserRole(role: ApiUserRole): UserRole {
-  if (role === "student") {
-    return "Student";
-  }
-  if (role === "mentor") {
-    return "Mentor";
-  }
-  return "SuperAdmin";
-}
-
-function formatDate(dateString: string) {
-  const date = new Date(dateString);
-  if (Number.isNaN(date.getTime())) {
-    return "-";
-  }
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "2-digit",
-    year: "numeric",
-  });
-}
-
-function mapApiUserToRecord(user: ApiUserRecord): UserRecord {
-  return {
-    id: user.id,
-    name: `${user.firstName} ${user.lastName}`.trim(),
-    email: user.email,
-    role: toUserRole(user.role),
-    status: user.isActive ? "Active" : "Inactive",
-    createdAt: formatDate(user.createdAt),
-  };
-}
-
-function getInitials(name: string) {
-  return name
-    .split(" ")
-    .map((part) => part[0])
-    .join("")
-    .slice(0, 2)
-    .toUpperCase();
-}
-
-function roleClass(role: UserRole) {
-  if (role === "Student") {
-    return "bg-slate-100 text-slate-700 border-slate-200";
-  }
-  if (role === "Mentor") {
-    return "bg-emerald-50 text-emerald-700 border-emerald-200";
-  }
-  return "bg-indigo-50 text-indigo-700 border-indigo-200";
-}
-
-function statusClass(status: UserStatus) {
-  if (status === "Active") {
-    return "text-blue-600";
-  }
-  return "text-red-500";
-}
+  ChangeStatusDialog,
+  UsersFilters,
+  UsersTable,
+  useUsersAdmin,
+  ViewUserDialog,
+} from "@/components/admin/users";
 
 export default function UsersPage() {
-  const [users, setUsers] = useState<UserRecord[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [fetchError, setFetchError] = useState<string | null>(null);
-  const [search, setSearch] = useState("");
-  const [roleFilter, setRoleFilter] = useState<"all" | UserRole>("all");
-  const [statusFilter, setStatusFilter] = useState<"all" | UserStatus>("all");
-  const [page, setPage] = useState(1);
-
-  // Modal state
-  const [viewUser, setViewUser] = useState<UserRecord | null>(null);
-  const [statusUser, setStatusUser] = useState<UserRecord | null>(null);
-  const [pendingStatus, setPendingStatus] = useState<UserStatus>("Active");
-  const [deleteUserId, setDeleteUserId] = useState<string | null>(null);
-  const [isMutating, setIsMutating] = useState(false);
-
-  const loadUsers = async () => {
-    setIsLoading(true);
-    setFetchError(null);
-    try {
-      const response = await fetch("/api/admin/users", { cache: "no-store" });
-      if (!response.ok) {
-        const payload = await response
-          .json()
-          .catch(() => ({ message: "Failed to fetch users" }));
-        throw new Error(payload.message ?? "Failed to fetch users");
-      }
-      const data = (await response.json()) as ApiUserRecord[];
-      setUsers(data.map(mapApiUserToRecord));
-    } catch (error) {
-      setUsers([]);
-      setFetchError(
-        error instanceof Error ? error.message : "Failed to fetch users",
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    let mounted = true;
-
-    const fetchUsers = async () => {
-      setIsLoading(true);
-      setFetchError(null);
-
-      try {
-        const response = await fetch("/api/admin/users", {
-          cache: "no-store",
-        });
-
-        if (!response.ok) {
-          const payload = await response
-            .json()
-            .catch(() => ({ message: "Failed to fetch users" }));
-          throw new Error(payload.message ?? "Failed to fetch users");
-        }
-
-        const data = (await response.json()) as ApiUserRecord[];
-        if (!mounted) {
-          return;
-        }
-
-        setUsers(data.map(mapApiUserToRecord));
-      } catch (error) {
-        if (!mounted) {
-          return;
-        }
-        setUsers([]);
-        setFetchError(
-          error instanceof Error ? error.message : "Failed to fetch users",
-        );
-      } finally {
-        if (mounted) {
-          setIsLoading(false);
-        }
-      }
-    };
-
-    fetchUsers();
-
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  const handleChangeStatus = async () => {
-    if (!statusUser) return;
-    setIsMutating(true);
-    try {
-      const res = await fetch("/api/admin/users", {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          id: statusUser.id,
-          isActive: pendingStatus === "Active",
-        }),
-      });
-      if (!res.ok) throw new Error("Failed to update status");
-      setStatusUser(null);
-      await loadUsers();
-    } catch {
-      // silently ignore — keep dialog open on error
-    } finally {
-      setIsMutating(false);
-    }
-  };
-
-  const handleDeleteUser = async () => {
-    if (!deleteUserId) return;
-    setIsMutating(true);
-    try {
-      const res = await fetch(`/api/admin/users?id=${deleteUserId}`, {
-        method: "DELETE",
-      });
-      if (!res.ok) throw new Error("Failed to delete user");
-      setDeleteUserId(null);
-      await loadUsers();
-    } catch {
-      // silently ignore
-    } finally {
-      setIsMutating(false);
-    }
-  };
-
-  const filteredUsers = useMemo(() => {
-    return users.filter((user) => {
-      const isRoleMatch = roleFilter === "all" || user.role === roleFilter;
-      const isStatusMatch =
-        statusFilter === "all" || user.status === statusFilter;
-      const query = search.trim().toLowerCase();
-      const isSearchMatch =
-        query.length === 0 ||
-        user.name.toLowerCase().includes(query) ||
-        user.email.toLowerCase().includes(query) ||
-        user.id.toLowerCase().includes(query);
-
-      return isRoleMatch && isStatusMatch && isSearchMatch;
-    });
-  }, [users, roleFilter, statusFilter, search]);
-
-  const totalPages = Math.max(
-    1,
-    Math.ceil(filteredUsers.length / ITEMS_PER_PAGE),
-  );
-  const safePage = Math.min(page, totalPages);
-  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
-  const endIndex = startIndex + ITEMS_PER_PAGE;
-  const visibleUsers = filteredUsers.slice(startIndex, endIndex);
-
-  const startCount = filteredUsers.length === 0 ? 0 : startIndex + 1;
-  const endCount = Math.min(endIndex, filteredUsers.length);
-
-  const goToPage = (nextPage: number) => {
-    if (nextPage < 1 || nextPage > totalPages) {
-      return;
-    }
-    setPage(nextPage);
-  };
+  const { constants, filters, table, dialogs, actions } = useUsersAdmin();
 
   return (
     <>
-      <div className="flex min-h-screen bg-[#f5f7fb]">
-        <AsideSidebar />
-
+      <AdminPageLayout>
         <div className="flex-1 p-5 md:p-8">
           <Card className="overflow-hidden border-[#d9dde5] bg-white">
             <div className="space-y-4 p-4 md:p-5">
-              <div>
-                <h1 className="text-page-title text-slate-900">
-                  User Administration
-                </h1>
-                <p className="mt-1 text-sm text-slate-500">
-                  Manage system users, define their platform roles, and monitor
-                  account statuses.
-                </p>
-              </div>
-
-              <div className="flex flex-wrap items-end gap-3 rounded-lg border border-[#e4e7ed] bg-[#f8fafc] p-3">
-                <div className="space-y-1">
-                  <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
-                    Role
-                  </p>
-                  <Select
-                    value={roleFilter}
-                    onValueChange={(value) => {
-                      setRoleFilter(value as "all" | UserRole);
-                      setPage(1);
-                    }}
-                  >
-                    <SelectTrigger className="h-8 w-[130px] bg-white">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">All Roles</SelectItem>
-                      <SelectItem value="Student">Student</SelectItem>
-                      <SelectItem value="Mentor">Mentor</SelectItem>
-                      <SelectItem value="SuperAdmin">SuperAdmin</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-1">
-                  <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
-                    Status
-                  </p>
-                  <Select
-                    value={statusFilter}
-                    onValueChange={(value) => {
-                      setStatusFilter(value as "all" | UserStatus);
-                      setPage(1);
-                    }}
-                  >
-                    <SelectTrigger className="h-8 w-[140px] bg-white">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">All Statuses</SelectItem>
-                      <SelectItem value="Active">Active</SelectItem>
-                      <SelectItem value="Inactive">Inactive</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="ml-auto w-full sm:w-auto space-y-1">
-                  <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
-                    Search
-                  </p>
-                  <div className="relative">
-                    <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
-                    <input
-                      className="h-8 w-full sm:w-[360px] rounded-lg border border-[#dbe0e8] bg-white pl-9 pr-3 text-sm text-slate-700 outline-none transition focus:border-slate-400"
-                      type="search"
-                      value={search}
-                      onChange={(event) => {
-                        setSearch(event.target.value);
-                        setPage(1);
-                      }}
-                      placeholder="Search by name, email, or ID..."
-                    />
-                  </div>
-                </div>
-              </div>
-
-              <div className="overflow-hidden rounded-lg border border-[#e4e7ed]">
-                <Table>
-                  <TableHeader>
-                    <TableRow className="bg-[#f8fafc] hover:bg-[#f8fafc]">
-                      <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
-                        User Identity
-                      </TableHead>
-                      <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
-                        Role
-                      </TableHead>
-                      <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
-                        Status
-                      </TableHead>
-                      <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
-                        Created Date
-                      </TableHead>
-                      <TableHead className="px-4 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">
-                        Actions
-                      </TableHead>
-                    </TableRow>
-                  </TableHeader>
-
-                  <TableBody>
-                    {isLoading ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={5}
-                          className="px-4 py-8 text-center text-sm text-slate-500"
-                        >
-                          Loading users...
-                        </TableCell>
-                      </TableRow>
-                    ) : fetchError ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={5}
-                          className="px-4 py-8 text-center text-sm text-red-500"
-                        >
-                          {fetchError}
-                        </TableCell>
-                      </TableRow>
-                    ) : visibleUsers.length === 0 ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={5}
-                          className="px-4 py-8 text-center text-sm text-slate-500"
-                        >
-                          No users found for the selected filters.
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      visibleUsers.map((user) => (
-                        <TableRow
-                          key={user.id}
-                          className="bg-white hover:bg-[#fbfcff]"
-                        >
-                          <TableCell className="px-4 py-3">
-                            <div className="flex items-center gap-3">
-                              <Avatar className="h-9 w-9 border border-slate-200">
-                                {user.avatar ? (
-                                  <AvatarImage
-                                    src={user.avatar}
-                                    alt={user.name}
-                                  />
-                                ) : null}
-                                <AvatarFallback className="bg-slate-100 text-xs font-semibold text-slate-700">
-                                  {getInitials(user.name)}
-                                </AvatarFallback>
-                              </Avatar>
-                              <div>
-                                <p className="text-sm font-semibold text-slate-900">
-                                  {user.name}
-                                </p>
-                                <p className="text-xs text-slate-500">
-                                  {user.email}
-                                </p>
-                              </div>
-                            </div>
-                          </TableCell>
-
-                          <TableCell className="px-4 py-3">
-                            <span
-                              className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-semibold ${roleClass(user.role)}`}
-                            >
-                              {user.role}
-                            </span>
-                          </TableCell>
-
-                          <TableCell className="px-4 py-3">
-                            <span
-                              className={`inline-flex items-center gap-1.5 text-sm font-medium ${statusClass(user.status)}`}
-                            >
-                              <span
-                                className={`h-1.5 w-1.5 rounded-full ${user.status === "Active" ? "bg-blue-500" : "bg-red-500"}`}
-                              />
-                              {user.status}
-                            </span>
-                          </TableCell>
-
-                          <TableCell className="px-4 py-3 text-sm text-slate-700">
-                            {user.createdAt}
-                          </TableCell>
-
-                          <TableCell className="px-4 py-3 text-right">
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild>
-                                <button
-                                  type="button"
-                                  className="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-500 transition hover:bg-slate-100 hover:text-slate-700"
-                                  aria-label={`Actions for ${user.name}`}
-                                >
-                                  <EllipsisVertical className="h-4 w-4" />
-                                </button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end" className="w-44">
-                                <DropdownMenuItem
-                                  onSelect={() => setViewUser(user)}
-                                >
-                                  View Details
-                                </DropdownMenuItem>
-                                <DropdownMenuItem
-                                  onSelect={() => {
-                                    setStatusUser(user);
-                                    setPendingStatus(
-                                      user.status === "Active"
-                                        ? "Inactive"
-                                        : "Active",
-                                    );
-                                  }}
-                                >
-                                  Change Status
-                                </DropdownMenuItem>
-                                <DropdownMenuSeparator />
-                                <DropdownMenuItem
-                                  className="text-red-600 focus:text-red-600 focus:bg-red-50"
-                                  onSelect={() => setDeleteUserId(user.id)}
-                                >
-                                  Delete User
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-
-                <div className="flex flex-col gap-3 border-t border-[#e4e7ed] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
-                  <p className="text-sm text-slate-500">
-                    Showing {startCount} to {endCount} of {filteredUsers.length}{" "}
-                    users
-                  </p>
-
-                  <Pagination className="mx-0 w-auto justify-end">
-                    <PaginationContent>
-                      <PaginationItem>
-                        <PaginationLink
-                          size="icon"
-                          onClick={() => goToPage(safePage - 1)}
-                          disabled={safePage <= 1}
-                          aria-label="Previous page"
-                        >
-                          {"<"}
-                        </PaginationLink>
-                      </PaginationItem>
-
-                      {safePage > 2 ? (
-                        <>
-                          <PaginationItem>
-                            <PaginationLink
-                              size="icon"
-                              isActive={safePage === 1}
-                              onClick={() => goToPage(1)}
-                            >
-                              1
-                            </PaginationLink>
-                          </PaginationItem>
-                          {safePage > 3 ? (
-                            <PaginationItem>
-                              <PaginationEllipsis />
-                            </PaginationItem>
-                          ) : null}
-                        </>
-                      ) : null}
-
-                      {Array.from({ length: totalPages }, (_, idx) => idx + 1)
-                        .filter(
-                          (pageNumber) => Math.abs(pageNumber - safePage) <= 1,
-                        )
-                        .map((pageNumber) => (
-                          <PaginationItem key={pageNumber}>
-                            <PaginationLink
-                              size="icon"
-                              isActive={pageNumber === safePage}
-                              onClick={() => goToPage(pageNumber)}
-                            >
-                              {pageNumber}
-                            </PaginationLink>
-                          </PaginationItem>
-                        ))}
-
-                      {safePage < totalPages - 1 ? (
-                        <>
-                          {safePage < totalPages - 2 ? (
-                            <PaginationItem>
-                              <PaginationEllipsis />
-                            </PaginationItem>
-                          ) : null}
-                          <PaginationItem>
-                            <PaginationLink
-                              size="icon"
-                              isActive={safePage === totalPages}
-                              onClick={() => goToPage(totalPages)}
-                            >
-                              {totalPages}
-                            </PaginationLink>
-                          </PaginationItem>
-                        </>
-                      ) : null}
-
-                      <PaginationItem>
-                        <PaginationLink
-                          size="icon"
-                          onClick={() => goToPage(safePage + 1)}
-                          disabled={safePage >= totalPages}
-                          aria-label="Next page"
-                        >
-                          {">"}
-                        </PaginationLink>
-                      </PaginationItem>
-                    </PaginationContent>
-                  </Pagination>
-                </div>
-              </div>
+              <PageHeader
+                title="User Administration"
+                subtitle="Manage system users, define their platform roles, and monitor account statuses."
+              />
+
+              <UsersFilters
+                roleFilter={filters.roleFilter}
+                statusFilter={filters.statusFilter}
+                search={filters.search}
+                onRoleChange={(value) => {
+                  filters.setRoleFilter(value);
+                  filters.setPage(1);
+                }}
+                onStatusChange={(value) => {
+                  filters.setStatusFilter(value);
+                  filters.setPage(1);
+                }}
+                onSearchChange={(value) => {
+                  filters.setSearch(value);
+                  filters.setPage(1);
+                }}
+              />
+
+              <UsersTable
+                users={table.visibleUsers}
+                isLoading={table.isLoading}
+                fetchError={table.fetchError}
+                page={table.safePage}
+                totalPages={table.totalPages}
+                totalUsers={table.totalUsers}
+                itemsPerPage={constants.ITEMS_PER_PAGE}
+                onPageChange={filters.setPage}
+                onViewUser={dialogs.setViewUser}
+                onChangeStatus={actions.openStatusDialog}
+                onDeleteUser={dialogs.setDeleteUserId}
+              />
             </div>
           </Card>
         </div>
-      </div>
-
-      {/* ── View Details Dialog ─────────────────────────────────────────────── */}
-      <Dialog
-        open={!!viewUser}
-        onOpenChange={(open) => !open && setViewUser(null)}
-      >
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>User Details</DialogTitle>
-          </DialogHeader>
-          {viewUser != null && (
-            <div className="space-y-4 text-sm">
-              <div className="flex items-center gap-4">
-                <Avatar className="h-14 w-14 border border-slate-200">
-                  {viewUser!.avatar ? (
-                    <AvatarImage src={viewUser!.avatar} alt={viewUser!.name} />
-                  ) : null}
-                  <AvatarFallback className="bg-slate-100 text-base font-semibold text-slate-700">
-                    {getInitials(viewUser!.name)}
-                  </AvatarFallback>
-                </Avatar>
-                <div>
-                  <p className="text-base font-bold text-slate-900">
-                    {viewUser!.name}
-                  </p>
-                  <p className="text-xs text-slate-500">{viewUser!.email}</p>
-                </div>
-              </div>
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
-                    Role
-                  </p>
-                  <span
-                    className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-semibold ${roleClass(viewUser!.role)}`}
-                  >
-                    {viewUser!.role}
-                  </span>
-                </div>
-                <div>
-                  <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
-                    Status
-                  </p>
-                  <span
-                    className={`inline-flex items-center gap-1.5 text-sm font-medium ${statusClass(viewUser!.status)}`}
-                  >
-                    <span
-                      className={`h-1.5 w-1.5 rounded-full ${viewUser!.status === "Active" ? "bg-blue-500" : "bg-red-500"}`}
-                    />
-                    {viewUser!.status}
-                  </span>
-                </div>
-                <div>
-                  <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
-                    Created Date
-                  </p>
-                  <p className="text-slate-700">{viewUser!.createdAt}</p>
-                </div>
-                <div>
-                  <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
-                    User ID
-                  </p>
-                  <p className="truncate text-xs text-slate-500">
-                    {viewUser!.id}
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Close</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {/* ── Change Status Dialog ────────────────────────────────────────────── */}
-      <AlertDialog
-        open={!!statusUser}
-        onOpenChange={(open) => !open && setStatusUser(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Change User Status</AlertDialogTitle>
-            <AlertDialogDescription>
-              Select the new status for{" "}
-              <span className="font-semibold text-slate-900">
-                {statusUser?.name}
-              </span>
-              . Deactivating a user will prevent them from logging in.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="px-1 py-2">
-            <p className="mb-1.5 text-[11px] font-bold uppercase text-slate-500">
-              New Status
-            </p>
-            <Select
-              value={pendingStatus}
-              onValueChange={(v) => setPendingStatus(v as UserStatus)}
-            >
-              <SelectTrigger className="w-full bg-white">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="Active">Active</SelectItem>
-                <SelectItem value="Inactive">Inactive (Deactivated)</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isMutating}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              disabled={isMutating || pendingStatus === statusUser?.status}
-              onClick={handleChangeStatus}
-            >
-              {isMutating ? "Saving…" : "Save"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-
-      {/* ── Delete Confirmation Dialog ──────────────────────────────────────── */}
-      <AlertDialog
-        open={!!deleteUserId}
-        onOpenChange={(open) => !open && setDeleteUserId(null)}
-      >
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Delete User</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete the user account and all associated
-              data — including activities, feedback, reports, badges, and
-              project allocations. This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isMutating}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              className="bg-red-600 hover:bg-red-700 text-white"
-              disabled={isMutating}
-              onClick={handleDeleteUser}
-            >
-              {isMutating ? "Deleting…" : "Delete"}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      </AdminPageLayout>
+
+      <ViewUserDialog
+        user={dialogs.viewUser}
+        onOpenChange={(open) => !open && dialogs.setViewUser(null)}
+      />
+
+      <ChangeStatusDialog
+        user={dialogs.statusUser}
+        pendingStatus={dialogs.pendingStatus}
+        isMutating={dialogs.isMutating}
+        onPendingStatusChange={dialogs.setPendingStatus}
+        onOpenChange={(open) => !open && dialogs.setStatusUser(null)}
+        onSave={actions.handleChangeStatus}
+      />
+
+      <ConfirmDeleteDialog
+        open={!!dialogs.deleteUserId}
+        onOpenChange={(open) => !open && dialogs.setDeleteUserId(null)}
+        onConfirm={actions.handleDeleteUser}
+        isPending={dialogs.isMutating}
+        title="Delete User"
+        description="This will permanently delete the user account and all associated data — including activities, feedback, reports, badges, and project allocations. This action cannot be undone."
+      />
     </>
   );
 }
diff --git a/server/src/app/api/complete-registration/route.ts b/server/src/app/api/complete-registration/route.ts
index 40268895..a5871361 100644
--- a/server/src/app/api/complete-registration/route.ts
+++ b/server/src/app/api/complete-registration/route.ts
@@ -1,7 +1,7 @@
-import { NextResponse } from "next/server";
-import {UserRepository} from "@/repositories/user_repository_impl";
 import { InvitationRepository } from "@/repositories/invitation_repository_impl";
+import { UserRepository } from "@/repositories/user_repository_impl";
 import bcrypt from "bcrypt";
+import { NextResponse } from "next/server";
 
 export async function POST(req: Request) {
   try {
@@ -21,10 +21,7 @@ export async function POST(req: Request) {
     // Verify temporary password against the user's current passwordHash
     const user = await userRepo.getByEmail(email);
     if (!user || !user.passwordHash)
-      return NextResponse.json(
-        { error: "User not found" },
-        { status: 404 },
-      );
+      return NextResponse.json({ error: "User not found" }, { status: 404 });
 
     const isValid = await bcrypt.compare(tempPassword, user.passwordHash);
     if (!isValid)
@@ -53,4 +50,4 @@ export async function POST(req: Request) {
       { status: 500 },
     );
   }
-}
\ No newline at end of file
+}
diff --git a/server/src/app/api/invitations/route.ts b/server/src/app/api/invitations/route.ts
index abd300ed..42a1c2d1 100644
--- a/server/src/app/api/invitations/route.ts
+++ b/server/src/app/api/invitations/route.ts
@@ -2,12 +2,34 @@ import { InvitationRepository } from "@/repositories/invitation_repository_impl"
 import { UserRepository } from "@/repositories/user_repository_impl";
 import getSession from "@/server_actions/getSession";
 import { registerStudent } from "@/services/registerstudent";
-import { Role } from "@prisma/client";
+import { Invitation, Project, Role } from "@prisma/client";
 import { NextRequest, NextResponse } from "next/server";
 
 import { sendEmail } from "@/lib/email";
 import prisma from "@/lib/prisma";
 
+// Type for invitation with project relation
+type InvitationWithProject = Invitation & {
+  project: Project | null;
+  inviter: {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+  } | null;
+};
+
+// Type for mapped invitation response
+interface MappedInvitation {
+  id: string;
+  email: string;
+  role: string;
+  project: string;
+  status: "Pending" | "Accepted" | "Expired";
+  createdAt: Date;
+  expiresAt: Date;
+}
+
 const invitationRepository = new InvitationRepository();
 const userRepository = new UserRepository();
 
@@ -23,11 +45,10 @@ export async function POST(req: NextRequest) {
 
     // 2. Check for permissions (super_admin)
     const userRole = session.getRole();
-    if (userRole !== Role.superAdmin ) {
+    if (userRole !== Role.superAdmin) {
       return NextResponse.json(
         {
-          message:
-            "Forbidden: Only Super Admins  can create invitations",
+          message: "Forbidden: Only Super Admins  can create invitations",
         },
         { status: 403 },
       );
@@ -87,6 +108,7 @@ export async function POST(req: NextRequest) {
         email,
         role,
         invitedBy,
+        projectId,
       });
 
       console.log("Invite Created", invitation);
@@ -107,7 +129,9 @@ export async function POST(req: NextRequest) {
         // If email fails, delete the created user and invitation
         console.error("Email failed, rolling back user creation:", emailError);
         // Remove project allocations first to avoid FK constraint violations
-        await prisma.projectAllocation.deleteMany({ where: { studentId: userId } });
+        await prisma.projectAllocation.deleteMany({
+          where: { studentId: userId },
+        });
         await userRepository.delete(userId);
         await invitationRepository.delete(invitation.id);
         throw new Error(
@@ -152,7 +176,7 @@ export async function GET(req: NextRequest) {
       if (invitations.length === 0) {
         return NextResponse.json(
           { valid: false, message: "Invalid token" },
-          { status: 404 }
+          { status: 404 },
         );
       }
 
@@ -161,14 +185,14 @@ export async function GET(req: NextRequest) {
       if (invitation.accepted) {
         return NextResponse.json(
           { valid: false, message: "Token has already been used" },
-          { status: 400 }
+          { status: 400 },
         );
       }
 
       if (new Date() > new Date(invitation.expiresAt)) {
         return NextResponse.json(
           { valid: false, message: "Token has expired" },
-          { status: 400 }
+          { status: 400 },
         );
       }
 
@@ -180,52 +204,28 @@ export async function GET(req: NextRequest) {
     }
 
     // If no token, return **all invitations for the table**
-    const invitations = await invitationRepository.getAll({
+    const invitations = (await invitationRepository.getAll({
       orderBy: { createdAt: "desc" },
-      include: { inviter: true}, // optional, if you want inviter info
-    });
-    // 2. Fetch all projects
-    const now = new Date();
-     
-
-    // Fetch all users whose emails match invitations
-    const emails = invitations.map(inv => inv.email);
-    const users = await prisma.user.findMany({
-      where: { email: { in: emails } },
-      select: { id: true, email: true },
-    });
-
-    // Map email → userId
-    const emailToUserId: Record<string, string> = {};
-    users.forEach(user => {
-      emailToUserId[user.email] = user.id;
-    });
-
-    // Fetch project allocations for all invited users who exist
-    const userIds = Object.values(emailToUserId);
-    const allocations = await prisma.projectAllocation.findMany({
-      where: { studentId: { in: userIds } },
-      include: { project: true },
-    });
-
-    // Map userId → project name
-    const projectMap: Record<string, string> = {};
-    allocations.forEach(allocation => {
-      projectMap[allocation.studentId] = allocation.project.name;
-    });
+      include: {
+        inviter: true,
+        project: true,
+      },
+    })) as InvitationWithProject[];
 
-    const mapped = invitations.map(inv => {
-      const status: "Pending" | "Accepted" | "Expired" =
-        inv.accepted ? "Accepted" : (now > new Date(inv.expiresAt) ? "Expired" : "Pending");
+    const now = new Date();
 
-      const userId = emailToUserId[inv.email];
-      const projectName = userId ? projectMap[userId] || "-" : "-";
+    const mapped: MappedInvitation[] = invitations.map((inv) => {
+      const status: "Pending" | "Accepted" | "Expired" = inv.accepted
+        ? "Accepted"
+        : now > new Date(inv.expiresAt)
+          ? "Expired"
+          : "Pending";
 
       return {
         id: inv.id,
         email: inv.email,
         role: inv.role,
-        project: projectName,
+        project: inv.project?.name || "—",
         status,
         createdAt: inv.createdAt,
         expiresAt: inv.expiresAt,
@@ -235,7 +235,10 @@ export async function GET(req: NextRequest) {
     return NextResponse.json(mapped, { status: 200 });
   } catch (err) {
     console.error("Error fetching invitations:", err);
-    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+    return NextResponse.json(
+      { message: "Internal Server Error" },
+      { status: 500 },
+    );
   }
 }
 
@@ -251,7 +254,8 @@ export async function PATCH(req: NextRequest) {
     }
 
     const { id, status } = await req.json();
-    if (!id) return NextResponse.json({ message: "id is required" }, { status: 400 });
+    if (!id)
+      return NextResponse.json({ message: "id is required" }, { status: 400 });
 
     let updateData: { expiresAt?: Date; accepted?: boolean } = {};
 
@@ -260,7 +264,10 @@ export async function PATCH(req: NextRequest) {
         updateData = { accepted: true };
         break;
       case "Pending":
-        updateData = { accepted: false, expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) };
+        updateData = {
+          accepted: false,
+          expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+        };
         break;
       case "Expired":
       default:
@@ -277,7 +284,10 @@ export async function PATCH(req: NextRequest) {
     return NextResponse.json({ message: "Invitation status updated" });
   } catch (err) {
     console.error("Error updating invitation status:", err);
-    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+    return NextResponse.json(
+      { message: "Internal Server Error" },
+      { status: 500 },
+    );
   }
 }
 
@@ -294,28 +304,48 @@ export async function DELETE(req: NextRequest) {
 
     const { searchParams } = new URL(req.url);
     const id = searchParams.get("id");
-    if (!id) return NextResponse.json({ message: "id is required" }, { status: 400 });
+    if (!id)
+      return NextResponse.json({ message: "id is required" }, { status: 400 });
 
     const invitation = await prisma.invitation.findUnique({ where: { id } });
-    if (!invitation) return NextResponse.json({ message: "Invitation not found" }, { status: 404 });
+    if (!invitation)
+      return NextResponse.json(
+        { message: "Invitation not found" },
+        { status: 404 },
+      );
 
-    const user = await prisma.user.findUnique({ where: { email: invitation.email } });
+    const user = await prisma.user.findUnique({
+      where: { email: invitation.email },
+    });
 
     if (user) {
       await prisma.$transaction(async (tx) => {
         // Delete mentor feedback on user's activities
-        const activityIds = (await tx.activity.findMany({ where: { studentId: user.id }, select: { id: true } })).map(a => a.id);
-        if (activityIds.length) await tx.mentorFeedback.deleteMany({ where: { activityId: { in: activityIds } } });
+        const activityIds = (
+          await tx.activity.findMany({
+            where: { studentId: user.id },
+            select: { id: true },
+          })
+        ).map((a) => a.id);
+        if (activityIds.length)
+          await tx.mentorFeedback.deleteMany({
+            where: { activityId: { in: activityIds } },
+          });
 
         await tx.activity.deleteMany({ where: { studentId: user.id } });
         await tx.mentorFeedback.deleteMany({ where: { mentorId: user.id } });
         await tx.mentorActivity.deleteMany({ where: { mentorId: user.id } });
         await tx.report.deleteMany({ where: { mentorId: user.id } });
         await tx.userBadge.deleteMany({ where: { userId: user.id } });
-        await tx.projectAllocation.deleteMany({ where: { studentId: user.id } });
+        await tx.projectAllocation.deleteMany({
+          where: { studentId: user.id },
+        });
         await tx.projectMentor.deleteMany({ where: { mentorId: user.id } });
         // Null-out invitations sent BY this user (onDelete: SetNull handles FK, but explicit is safer)
-        await tx.invitation.updateMany({ where: { invitedBy: user.id }, data: { invitedBy: null } });
+        await tx.invitation.updateMany({
+          where: { invitedBy: user.id },
+          data: { invitedBy: null },
+        });
         // Delete the invitation record itself
         await tx.invitation.delete({ where: { id } });
         await tx.user.delete({ where: { id: user.id } });
@@ -328,7 +358,9 @@ export async function DELETE(req: NextRequest) {
     return NextResponse.json({ message: "Deleted successfully" });
   } catch (err) {
     console.error("Error deleting invitation:", err);
-    return NextResponse.json({ message: "Internal Server Error" }, { status: 500 });
+    return NextResponse.json(
+      { message: "Internal Server Error" },
+      { status: 500 },
+    );
   }
 }
-
diff --git a/server/src/app/create-account/page.tsx b/server/src/app/create-account/page.tsx
index b96e2bdd..6867b51f 100644
--- a/server/src/app/create-account/page.tsx
+++ b/server/src/app/create-account/page.tsx
@@ -1,13 +1,29 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 
+import { Eye, EyeOff, Loader2, Lock, Mail } from "lucide-react";
+import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
-import { toast } from "react-hot-toast";
+
+import { useCompleteRegistration } from "@/hooks/admin/useCompleteRegistration";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+
+type ToastVariant = "default" | "destructive";
 
 export default function CreateAccount() {
-  const router = useRouter();
   const searchParams = useSearchParams();
+  const router = useRouter();
 
   const token = searchParams.get("token") || "";
   const email = searchParams.get("email") || "";
@@ -16,99 +32,331 @@ export default function CreateAccount() {
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
+  const [toastData, setToastData] = useState({
+    open: false,
+    title: "",
+    description: "",
+    variant: "default" as ToastVariant,
+  });
+
+  const { mutate: completeRegistration, isPending } = useCompleteRegistration();
+
+  const handleRegister = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-  const handleRegister = async () => {
     if (!tempPassword || !newPassword || !confirmPassword) {
-      toast.error("All fields are required");
+      setToastData({
+        open: true,
+        title: "Missing Fields",
+        description: "All fields are required to proceed.",
+        variant: "destructive",
+      });
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      toast.error("Passwords do not match");
+      setToastData({
+        open: true,
+        title: "Password Mismatch",
+        description: "Your new password and confirmation must match.",
+        variant: "destructive",
+      });
       return;
     }
 
-    setLoading(true);
-
-    try {
-      const res = await fetch("/api/complete-registration", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email, token, tempPassword, newPassword }),
+    if (newPassword.length < 8) {
+      setToastData({
+        open: true,
+        title: "Weak Password",
+        description: "Password must be at least 8 characters long.",
+        variant: "destructive",
       });
-
-      const data = await res.json();
-
-      if (res.ok) {
-        toast.success(
-          "Account created successfully! Please login with your new password.",
-        );
-        router.push(`/login?email=${encodeURIComponent(email)}`);
-      } else {
-        toast.error(data.error || "Failed to complete registration");
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error("Something went wrong");
-    } finally {
-      setLoading(false);
+      return;
     }
+
+    completeRegistration(
+      { email, token, tempPassword, newPassword },
+      {
+        onSuccess: () => {
+          setToastData({
+            open: true,
+            title: "Account Created",
+            description:
+              "Your account has been successfully created. Redirecting...",
+            variant: "default",
+          });
+          setTimeout(() => {
+            router.push("/login");
+          }, 1000);
+        },
+        onError: (error: any) => {
+          setToastData({
+            open: true,
+            title: "Registration Failed",
+            description:
+              error?.message || "An error occurred during registration.",
+            variant: "destructive",
+          });
+        },
+      },
+    );
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-100">
-      <div className="bg-white p-8 rounded-xl shadow-xl w-[420px]">
-        <h1 className="text-2xl font-bold mb-6 text-center">
-          Create Your Account
-        </h1>
-
-        <input
-          value={email}
-          disabled
-          className="border p-2 w-full mb-3 rounded bg-gray-200 cursor-not-allowed"
-        />
-
-        <input
-          type={showPassword ? "text" : "password"}
-          placeholder="Temporary Password"
-          className="border p-2 w-full mb-3 rounded"
-          value={tempPassword}
-          onChange={(e) => setTempPassword(e.target.value)}
-        />
-
-        <input
-          type={showPassword ? "text" : "password"}
-          placeholder="New Password"
-          className="border p-2 w-full mb-3 rounded"
-          value={newPassword}
-          onChange={(e) => setNewPassword(e.target.value)}
-        />
-
-        <input
-          type={showPassword ? "text" : "password"}
-          placeholder="Confirm Password"
-          className="border p-2 w-full mb-3 rounded"
-          value={confirmPassword}
-          onChange={(e) => setConfirmPassword(e.target.value)}
-        />
-
-        <div className="flex items-center mb-4">
-          <input
-            type="checkbox"
-            onChange={() => setShowPassword(!showPassword)}
+    <ToastProvider>
+      <div className="min-h-screen flex bg-white dark:bg-zinc-950 font-sans antialiased">
+        {/* Visual Brand Panel (Desktop) */}
+        <div className="hidden lg:flex relative w-7/12 flex-col justify-between p-16 bg-zinc-900 border-r border-zinc-800 overflow-hidden">
+          <Image
+            src="/login.png"
+            alt="Product Visual"
+            fill
+            className="object-cover opacity-40 mix-blend-soft-light"
+            priority
           />
-          <span className="ml-2 text-sm">Show Password</span>
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-600/10 via-transparent to-zinc-950/80" />
+
+          <div className="relative z-10">
+            <div className="flex items-center gap-4">
+              <div className="p-2.5 bg-blue-600 rounded-xl shadow-2xl shadow-blue-500/40">
+                <Image
+                  src="/log-file.png"
+                  width={32}
+                  height={32}
+                  alt="Logo"
+                  className="invert brightness-0"
+                />
+              </div>
+              <span className="text-2xl font-black tracking-tight text-white uppercase italic">
+                Logbook Pro
+              </span>
+            </div>
+          </div>
+
+          <div className="relative z-10 max-w-2xl">
+            <h1 className="text-6xl xl:text-8xl font-black text-white leading-[1] tracking-tighter mb-8 bg-clip-text">
+              Welcome to <br />
+              <span className="text-blue-500 underline decoration-blue-500/30 underline-offset-8">
+                the Network
+              </span>{" "}
+              <br />
+              Initialize Now.
+            </h1>
+            <p className="text-xl text-zinc-400 font-medium max-w-lg leading-relaxed">
+              Set up your secure credentials and join a community of precision
+              record keepers.
+            </p>
+          </div>
+
+          <div className="relative z-10 flex items-center gap-6 text-xs font-bold text-zinc-600 tracking-widest uppercase">
+            <span>© 2024 T2T ANALYTICS</span>
+            <span className="w-8 h-[1px] bg-zinc-800" />
+            <span>SECURE SETUP</span>
+          </div>
         </div>
 
-        <button
-          onClick={handleRegister}
-          disabled={loading}
-          className="bg-blue-600 text-white w-full py-2 rounded"
-        >
-          {loading ? "Registering..." : "Register"}
-        </button>
+        {/* Auth Interface */}
+        <div className="flex-1 flex flex-col items-center justify-center p-8 md:p-16">
+          <div className="w-full max-w-[420px] space-y-12">
+            <div className="lg:hidden flex flex-col items-center space-y-4 mb-4">
+              <div className="p-3 bg-zinc-100 dark:bg-zinc-900 rounded-2xl">
+                <Image src="/log-file.png" width={48} height={48} alt="Logo" />
+              </div>
+              <h1 className="text-2xl font-black tracking-tighter italic">
+                LOGBOOK PRO
+              </h1>
+            </div>
+
+            <div className="space-y-3 text-center lg:text-left">
+              <h2 className="text-5xl font-black text-zinc-900 dark:text-white tracking-tighter hover:text-blue-600 transition-colors cursor-default">
+                CREATE ACCOUNT
+              </h2>
+              <p className="text-zinc-500 dark:text-zinc-400 font-medium text-lg leading-relaxed">
+                Set up your credentials to access the logbook network.
+              </p>
+            </div>
+
+            <form onSubmit={handleRegister} className="space-y-8">
+              <div className="space-y-5">
+                {/* Email Field (Disabled) */}
+                <div className="space-y-2.5">
+                  <Label
+                    htmlFor="email"
+                    className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 ml-1"
+                  >
+                    Organizational Email
+                  </Label>
+                  <div className="relative group">
+                    <Mail className="absolute left-4 top-4 h-4 w-4 text-blue-500" />
+                    <Input
+                      id="email"
+                      type="email"
+                      value={email}
+                      disabled
+                      className="h-14 pl-12 bg-zinc-100 dark:bg-zinc-900/50 border-zinc-200 dark:border-zinc-800 text-base font-semibold rounded-xl cursor-not-allowed opacity-60"
+                    />
+                  </div>
+                </div>
+
+                {/* Temporary Password */}
+                <div className="space-y-2.5">
+                  <Label
+                    htmlFor="tempPassword"
+                    className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 ml-1"
+                  >
+                    Temporary Password
+                  </Label>
+                  <div className="relative group">
+                    <Lock className="absolute left-4 top-4 h-4 w-4 text-zinc-400 group-focus-within:text-blue-500 transition-colors" />
+                    <Input
+                      id="tempPassword"
+                      type={showPassword ? "text" : "password"}
+                      placeholder="••••••••••••"
+                      value={tempPassword}
+                      onChange={(e) => setTempPassword(e.target.value)}
+                      disabled={isPending}
+                      required
+                      className="h-14 pl-12 pr-12 bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:ring-4 focus:ring-blue-500/10 transition-all text-base font-semibold rounded-xl"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="absolute right-2 top-2 h-10 w-10 hover:bg-transparent text-zinc-400 hover:text-zinc-900 transition-colors"
+                      onClick={() => setShowPassword(!showPassword)}
+                      disabled={isPending}
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                      ) : (
+                        <Eye className="h-5 w-5" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* New Password */}
+                <div className="space-y-2.5">
+                  <Label
+                    htmlFor="newPassword"
+                    className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 ml-1"
+                  >
+                    New Security Key
+                  </Label>
+                  <div className="relative group">
+                    <Lock className="absolute left-4 top-4 h-4 w-4 text-zinc-400 group-focus-within:text-blue-500 transition-colors" />
+                    <Input
+                      id="newPassword"
+                      type={showPassword ? "text" : "password"}
+                      placeholder="••••••••••••"
+                      value={newPassword}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                      disabled={isPending}
+                      required
+                      className="h-14 pl-12 pr-12 bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:ring-4 focus:ring-blue-500/10 transition-all text-base font-semibold rounded-xl"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="absolute right-2 top-2 h-10 w-10 hover:bg-transparent text-zinc-400 hover:text-zinc-900 transition-colors"
+                      onClick={() => setShowPassword(!showPassword)}
+                      disabled={isPending}
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                      ) : (
+                        <Eye className="h-5 w-5" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+
+                {/* Confirm Password */}
+                <div className="space-y-2.5">
+                  <Label
+                    htmlFor="confirmPassword"
+                    className="text-[10px] font-black uppercase tracking-[0.2em] text-zinc-400 ml-1"
+                  >
+                    Confirm Security Key
+                  </Label>
+                  <div className="relative group">
+                    <Lock className="absolute left-4 top-4 h-4 w-4 text-zinc-400 group-focus-within:text-blue-500 transition-colors" />
+                    <Input
+                      id="confirmPassword"
+                      type={showPassword ? "text" : "password"}
+                      placeholder="••••••••••••"
+                      value={confirmPassword}
+                      onChange={(e) => setConfirmPassword(e.target.value)}
+                      disabled={isPending}
+                      required
+                      className="h-14 pl-12 pr-12 bg-zinc-50 dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:ring-4 focus:ring-blue-500/10 transition-all text-base font-semibold rounded-xl"
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="absolute right-2 top-2 h-10 w-10 hover:bg-transparent text-zinc-400 hover:text-zinc-900 transition-colors"
+                      onClick={() => setShowPassword(!showPassword)}
+                      disabled={isPending}
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5" />
+                      ) : (
+                        <Eye className="h-5 w-5" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-14 bg-zinc-900 dark:bg-white text-zinc-50 dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-200 font-black text-lg shadow-2xl transition-all active:scale-[0.98] rounded-xl tracking-widest"
+                disabled={isPending}
+              >
+                {isPending ? (
+                  <div className="flex items-center gap-3">
+                    <Loader2 className="h-5 w-5 animate-spin font-black" />
+                    <span>INITIALIZING...</span>
+                  </div>
+                ) : (
+                  "COMPLETE REGISTRATION"
+                )}
+              </Button>
+            </form>
+
+            <div className="pt-8 text-center text-sm font-medium text-zinc-500">
+              Already have credentials?{" "}
+              <button
+                onClick={() => router.push("/login")}
+                className="text-zinc-900 dark:text-white font-black hover:underline underline-offset-4 tracking-tight"
+              >
+                Sign In Instead
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
+
+      {toastData.open && (
+        <Toast
+          variant={toastData.variant}
+          className="border-none shadow-2xl bg-white dark:bg-zinc-900 rounded-xl"
+        >
+          <div className="grid gap-1">
+            <ToastTitle className="text-base font-black tracking-tight">
+              {toastData.title}
+            </ToastTitle>
+            <ToastDescription className="text-sm opacity-90 font-bold">
+              {toastData.description}
+            </ToastDescription>
+          </div>
+          <ToastClose />
+        </Toast>
+      )}
+
+      <ToastViewport />
+    </ToastProvider>
   );
 }
diff --git a/server/src/app/index.css b/server/src/app/index.css
index cefb791f..19a91197 100644
--- a/server/src/app/index.css
+++ b/server/src/app/index.css
@@ -30,7 +30,15 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem
-  }
+  ;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%}
   .dark {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
@@ -56,7 +64,15 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%
-  }
+  ;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%}
 }
 @layer base {
   * {
diff --git a/server/src/components/CustomToolbar.tsx b/server/src/components/CustomToolbar.tsx
new file mode 100644
index 00000000..4f2d1d4a
--- /dev/null
+++ b/server/src/components/CustomToolbar.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import moment from 'moment';
+
+interface CustomToolbarProps {
+  toolbar: any;
+  currentDate: Date;
+  setCurrentDate: (date: Date) => void;
+}
+
+const CustomToolbar: React.FC<CustomToolbarProps> = ({ toolbar, currentDate, setCurrentDate }) => {
+  const goToBack = () => {
+    toolbar.onNavigate("PREV");
+  };
+
+  const goToNext = () => {
+    toolbar.onNavigate("NEXT");
+  };
+
+  return (
+    <div className="flex justify-between items-center mb-4">
+      <Button
+        onClick={() => {
+          setCurrentDate(moment(currentDate).subtract(1, "months").toDate());
+          goToBack();
+        }}
+        className="text-xl border-2 border-blue-500 text-blue-500 px-4 py-2 bg-white rounded-md hover:border-blue-600 hover:bg-blue-100"
+      >
+        {"<"}
+      </Button>
+      <span className="text-2xl font-bold">
+        {moment(toolbar.date).format("MMMM YYYY")}
+      </span>
+      <Button
+        onClick={() => {
+          setCurrentDate(moment(currentDate).subtract(1, "months").toDate());
+          goToNext();
+        }}
+        className="text-xl border-2 border-blue-500 text-blue-500 px-4 py-2 bg-#F0F8FF rounded-md hover:border-blue-600 hover:bg-blue-100"
+      >
+        {">"}
+      </Button>
+    </div>
+  );
+};
+
+export default CustomToolbar;
\ No newline at end of file
diff --git a/server/src/components/Invitations/InvitationStats.tsx b/server/src/components/Invitations/InvitationStats.tsx
new file mode 100644
index 00000000..28bbd56f
--- /dev/null
+++ b/server/src/components/Invitations/InvitationStats.tsx
@@ -0,0 +1,34 @@
+import { Users, Clock, CheckCircle2, XCircle } from 'lucide-react';
+
+interface InvitationsStatsProps {
+  loading: boolean;
+  total: number;
+  pending: number;
+  accepted: number;
+  expired: number;
+}
+
+export default function InvitationsStats({ loading, total, pending, accepted, expired }: InvitationsStatsProps) {
+  const stats = [
+    { label: 'Total', value: total, icon: Users, color: 'text-slate-500', bg: 'bg-slate-100' },
+    { label: 'Pending', value: pending, icon: Clock, color: 'text-amber-500', bg: 'bg-amber-50' },
+    { label: 'Accepted', value: accepted, icon: CheckCircle2, color: 'text-emerald-500', bg: 'bg-emerald-50' },
+    { label: 'Expired', value: expired, icon: XCircle, color: 'text-rose-500', bg: 'bg-rose-50' },
+  ];
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat) => (
+        <div key={stat.label} className="bg-white border border-slate-200 rounded-xl px-5 py-4">
+          <div className="flex items-center justify-between mb-3">
+            <p className={`text-xs font-medium uppercase tracking-wide ${stat.color}`}>{stat.label}</p>
+            <div className={`h-8 w-8 rounded-lg ${stat.bg} flex items-center justify-center`}>
+              <stat.icon size={15} className={stat.color} />
+            </div>
+          </div>
+          <p className="text-2xl font-bold text-slate-900">{loading ? '—' : stat.value}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/server/src/components/Invitations/InvitationsTable.tsx b/server/src/components/Invitations/InvitationsTable.tsx
new file mode 100644
index 00000000..4183410b
--- /dev/null
+++ b/server/src/components/Invitations/InvitationsTable.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import AdminStatusBadge from "@/components/admin/AdminStatusBadge";
+import RoleBadge from "@/components/admin/RoleBadge";
+import TableActionMenu from "@/components/admin/TableActionMenu";
+import TableStateRows from "@/components/admin/TableStateRows";
+
+export interface InvitationRow {
+  id: string;
+  email: string;
+  role: string;
+  project: string;
+  status: "Pending" | "Accepted" | "Expired";
+  createdAt: string;
+  expiresAt: string;
+}
+
+interface InvitationsTableProps {
+  data: InvitationRow[];
+  loading: boolean;
+  error: boolean;
+  onView: (inv: InvitationRow) => void;
+  onChangeStatus: (inv: InvitationRow) => void;
+  onDelete: (id: string) => void;
+}
+
+export default function InvitationsTable({
+  data,
+  loading,
+  error,
+  onView,
+  onChangeStatus,
+  onDelete,
+}: InvitationsTableProps) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow className="bg-[#f8fafc] hover:bg-[#f8fafc]">
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Email
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Role
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Project
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Status
+          </TableHead>
+          <TableHead className="px-4 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Actions
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableStateRows
+          colSpan={5}
+          loading={loading}
+          error={error}
+          empty={!loading && !error && data.length === 0}
+          loadingMessage="Loading invitations..."
+          emptyMessage="No invitations found."
+        />
+        {!loading &&
+          !error &&
+          data.map((inv) => (
+            <TableRow key={inv.id} className="bg-white hover:bg-[#fbfcff]">
+              <TableCell className="px-4 py-3 font-medium text-slate-900">
+                {inv.email}
+              </TableCell>
+              <TableCell className="px-4 py-3">
+                <RoleBadge role={inv.role} />
+              </TableCell>
+              <TableCell className="px-4 py-3 text-slate-500">
+                {inv.project}
+              </TableCell>
+              <TableCell className="px-4 py-3">
+                <AdminStatusBadge status={inv.status} />
+              </TableCell>
+              <TableCell className="px-4 py-3 text-right">
+                <TableActionMenu
+                  ariaLabel={`Actions for ${inv.email}`}
+                  items={[
+                    { label: "View Details", onSelect: () => onView(inv) },
+                    {
+                      label: "Change Status",
+                      onSelect: () => onChangeStatus(inv),
+                    },
+                    {
+                      label: "Delete",
+                      onSelect: () => onDelete(inv.id),
+                      variant: "danger",
+                      separator: true,
+                    },
+                  ]}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/server/src/components/Invitations/StatusBadge.tsx b/server/src/components/Invitations/StatusBadge.tsx
new file mode 100644
index 00000000..137ed8ad
--- /dev/null
+++ b/server/src/components/Invitations/StatusBadge.tsx
@@ -0,0 +1,24 @@
+export default function StatusBadge({ status }: { status: 'Pending' | 'Accepted' | 'Expired' }) {
+  const styles = {
+    Pending: "bg-amber-50 text-amber-600 border-amber-200/60",
+    Accepted: "bg-emerald-50 text-emerald-600 border-emerald-200/60",
+    Expired: "bg-rose-50 text-rose-600 border-rose-200/60",
+  };
+  const dotColors = {
+    Pending: "bg-amber-500",
+    Accepted: "bg-emerald-500",
+    Expired: "bg-rose-500",
+  };
+  const labels = {
+    Pending: "Pending",
+    Accepted: "Active",
+    Expired: "Expired",
+  };
+
+  return (
+    <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border ${styles[status]}`}>
+      <span className={`w-1.5 h-1.5 rounded-full ${dotColors[status]}`} />
+      {labels[status]}
+    </span>
+  );
+}
\ No newline at end of file
diff --git a/server/src/components/Invitations/dialogs/ChangeStatusDialog.tsx b/server/src/components/Invitations/dialogs/ChangeStatusDialog.tsx
new file mode 100644
index 00000000..4b3593a6
--- /dev/null
+++ b/server/src/components/Invitations/dialogs/ChangeStatusDialog.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogClose } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {InvitationRow} from '../InvitationsTable'
+
+interface ChangeStatusDialogProps {
+  invitation: InvitationRow | null;
+  selectedStatus: 'Pending' | 'Accepted' | 'Expired';
+  onChangeStatus: (status: 'Pending' | 'Accepted' | 'Expired') => void;
+  onSave: () => void;
+  isPending: boolean;
+  onClose: () => void;
+}
+
+export default function ChangeStatusDialog({ invitation, selectedStatus, onChangeStatus, onSave, isPending, onClose }: ChangeStatusDialogProps) {
+  if (!invitation) return null;
+
+  const options = [
+    { value: 'Accepted', label: 'Active', desc: 'Invitation is accepted and account is active', color: 'text-emerald-600', dot: 'bg-emerald-500', ring: 'border-emerald-500 bg-emerald-50' },
+    { value: 'Pending', label: 'Pending', desc: 'Awaiting the invitee to complete registration', color: 'text-amber-600', dot: 'bg-amber-500', ring: 'border-amber-500 bg-amber-50' },
+    { value: 'Expired', label: 'Expired', desc: 'Invalidates the invitation link immediately', color: 'text-rose-600', dot: 'bg-rose-500', ring: 'border-rose-500 bg-rose-50' },
+  ] as const;
+
+  return (
+    <Dialog open={!!invitation} onOpenChange={() => onClose()}>
+      <DialogContent className="max-w-sm p-0 gap-0 overflow-hidden">
+        <div className="px-5 py-4 border-b border-slate-200 bg-slate-50">
+          <DialogHeader>
+            <DialogTitle className="text-sm font-semibold text-slate-900">Change Invitation Status</DialogTitle>
+            <DialogDescription className="text-xs text-slate-500 mt-0.5">
+              Update the status for <span className="font-medium text-slate-700">{invitation.email}</span>
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        <div className="px-5 py-4 space-y-2">
+          {options.map(opt => (
+            <button
+              key={opt.value}
+              type="button"
+              onClick={() => onChangeStatus(opt.value)}
+              className={`w-full flex items-start gap-3 px-4 py-3 rounded-lg border text-left transition-all ${selectedStatus === opt.value ? `${opt.ring} border-2` : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}
+            >
+              <span className={`mt-1 h-3.5 w-3.5 rounded-full shrink-0 ${selectedStatus === opt.value ? opt.dot : 'bg-slate-300'}`} />
+              <div>
+                <p className={`text-sm font-semibold ${selectedStatus === opt.value ? opt.color : 'text-slate-700'}`}>{opt.label}</p>
+                <p className="text-xs text-slate-400 mt-0.5">{opt.desc}</p>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        <div className="px-5 py-3 border-t border-slate-200 bg-slate-50 flex items-center justify-end gap-2">
+          <DialogClose asChild><Button variant="outline" disabled={isPending} className="h-8 px-3 text-sm">Cancel</Button></DialogClose>
+          <button
+            disabled={isPending || selectedStatus === invitation.status}
+            onClick={onSave}
+            className="inline-flex items-center h-8 px-4 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {isPending ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file
diff --git a/server/src/components/Invitations/dialogs/CreateInvitationDialog.tsx b/server/src/components/Invitations/dialogs/CreateInvitationDialog.tsx
new file mode 100644
index 00000000..84cddf57
--- /dev/null
+++ b/server/src/components/Invitations/dialogs/CreateInvitationDialog.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+import { ChevronDown, Send, UserPlus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+// Type matching useGetProjects return type
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  domain: string;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+  studentCount?: number;
+  mentorCount?: number;
+}
+
+interface CreateInvitationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  formData: any;
+  errors: Record<string, string>;
+  projects: Project[];
+  isPending: boolean;
+  onChange: (field: string, value: string) => void;
+  onSubmit: () => void;
+}
+
+export default function CreateInvitationDialog({
+  open,
+  onOpenChange,
+  formData,
+  errors,
+  projects,
+  isPending,
+  onChange,
+  onSubmit,
+}: CreateInvitationDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl p-0 gap-0 overflow-hidden">
+        {/* Header */}
+        <div className="px-6 py-5 border-b border-slate-200 bg-slate-50">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2.5 text-base font-semibold text-slate-900">
+              <div className="bg-slate-900 text-white p-1.5 rounded-md">
+                <UserPlus size={15} />
+              </div>
+              Create Invitation
+            </DialogTitle>
+            <DialogDescription className="text-sm text-slate-500 mt-1">
+              Send an invitation email to onboard a new member to your
+              organization.
+            </DialogDescription>
+          </DialogHeader>
+        </div>
+
+        {/* Form Body */}
+        <div className="px-6 py-5 space-y-5">
+          {/* Access Details */}
+          <div>
+            <p className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              Access Details
+            </p>
+            <div className="grid grid-cols-2 gap-4">
+              {/* Role */}
+              <div className="space-y-1.5">
+                <label className="block text-sm font-medium text-slate-700">
+                  Role <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <select
+                    value={formData.role}
+                    onChange={(e) => onChange("role", e.target.value)}
+                    className={`w-full h-10 px-3 pr-10 border ${errors.role ? "border-red-400 focus:ring-red-400 bg-red-50/40" : "border-slate-300 focus:ring-slate-900 bg-white"} rounded-lg text-sm text-slate-800 appearance-none focus:outline-none focus:ring-2 focus:border-transparent cursor-pointer transition-colors`}
+                  >
+                    <option value="" disabled>
+                      Select a role…
+                    </option>
+                    <option value="student">Student</option>
+                    <option value="mentor">Mentor</option>
+                    <option value="admin">Super Admin</option>
+                  </select>
+                  <ChevronDown
+                    size={14}
+                    className="absolute right-3 top-3 text-slate-400 pointer-events-none"
+                  />
+                </div>
+                {errors.role ? (
+                  <p className="text-xs text-red-500 font-medium">
+                    {errors.role}
+                  </p>
+                ) : (
+                  <p className="text-xs text-slate-400">
+                    Determines the user`s access level
+                  </p>
+                )}
+              </div>
+
+              {/* Project */}
+              <div className="space-y-1.5">
+                <label className="block text-sm font-medium text-slate-700">
+                  Project <span className="text-red-500">*</span>
+                </label>
+                <div className="relative">
+                  <select
+                    value={formData.project}
+                    onChange={(e) => onChange("project", e.target.value)}
+                    className={`w-full h-10 px-3 pr-10 border ${errors.project ? "border-red-400 focus:ring-red-400 bg-red-50/40" : "border-slate-300 focus:ring-slate-900 bg-white"} rounded-lg text-sm text-slate-800 appearance-none focus:outline-none focus:ring-2 focus:border-transparent cursor-pointer transition-colors`}
+                  >
+                    <option value="" disabled>
+                      Select a project…
+                    </option>
+                    {projects.map((p) => (
+                      <option key={p.id} value={p.id}>
+                        {p.name}
+                      </option>
+                    ))}
+                  </select>
+                  <ChevronDown
+                    size={14}
+                    className="absolute right-3 top-3 text-slate-400 pointer-events-none"
+                  />
+                </div>
+                {errors.project ? (
+                  <p className="text-xs text-red-500 font-medium">
+                    {errors.project}
+                  </p>
+                ) : (
+                  <p className="text-xs text-slate-400">
+                    Assign to an existing project
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Recipient Details */}
+          <div>
+            <p className="text-xs font-semibold text-slate-400 uppercase tracking-widest mb-3">
+              Recipient Details
+            </p>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-1.5">
+                <label className="block text-sm font-medium text-slate-700">
+                  First Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  placeholder="e.g. Jane"
+                  value={formData.firstName}
+                  onChange={(e) => onChange("firstName", e.target.value)}
+                  className={`w-full h-10 px-3 border ${errors.firstName ? "border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300" : "border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400"} rounded-lg text-sm text-slate-800`}
+                />
+                {errors.firstName && (
+                  <p className="text-xs text-red-500 font-medium">
+                    {errors.firstName}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-1.5">
+                <label className="block text-sm font-medium text-slate-700">
+                  Last Name <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  placeholder="e.g. Doe"
+                  value={formData.lastName}
+                  onChange={(e) => onChange("lastName", e.target.value)}
+                  className={`w-full h-10 px-3 border ${errors.lastName ? "border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300" : "border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400"} rounded-lg text-sm text-slate-800`}
+                />
+                {errors.lastName && (
+                  <p className="text-xs text-red-500 font-medium">
+                    {errors.lastName}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Email */}
+            <div className="space-y-1.5 mt-4">
+              <label className="block text-sm font-medium text-slate-700">
+                Email Address <span className="text-red-500">*</span>
+              </label>
+              <input
+                type="email"
+                placeholder="e.g. jane.doe@company.com"
+                value={formData.email}
+                onChange={(e) => onChange("email", e.target.value)}
+                className={`w-full h-10 px-3 border ${errors.email ? "border-red-400 focus:ring-red-400 bg-red-50/40 placeholder:text-red-300" : "border-slate-300 focus:ring-slate-900 bg-white placeholder:text-slate-400"} rounded-lg text-sm text-slate-800`}
+              />
+              {errors.email ? (
+                <p className="text-xs text-red-500 font-medium">
+                  {errors.email}
+                </p>
+              ) : (
+                <p className="text-xs text-slate-400">
+                  The invitation link will be sent to this address
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="px-6 py-4 border-t border-slate-200 bg-slate-50 flex items-center justify-between gap-3">
+          <DialogClose asChild>
+            <Button
+              variant="outline"
+              disabled={isPending}
+              className="h-9 px-4 text-sm"
+            >
+              Cancel
+            </Button>
+          </DialogClose>
+          <button
+            onClick={onSubmit}
+            disabled={isPending}
+            className="inline-flex items-center gap-2 h-9 px-5 bg-[#18181B] hover:bg-[#27272A] text-white text-sm font-medium rounded-lg transition-colors shadow-sm disabled:opacity-60 disabled:cursor-not-allowed"
+          >
+            <Send size={14} />
+            {isPending ? "Sending…" : "Send Invitation"}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/server/src/components/Invitations/dialogs/DeleteDialog.tsx b/server/src/components/Invitations/dialogs/DeleteDialog.tsx
new file mode 100644
index 00000000..f514fd92
--- /dev/null
+++ b/server/src/components/Invitations/dialogs/DeleteDialog.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@/components/ui/alert-dialog';
+
+interface DeleteInvitationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onDelete: () => void;
+  isDeleting: boolean;
+}
+
+export default function DeleteInvitationDialog({ open, onOpenChange, onDelete, isDeleting }: DeleteInvitationDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete Invitation</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will permanently delete the invitation and remove the associated user account along with all their data — including project allocations, activities, and feedback. This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+          <AlertDialogAction className="bg-red-600 hover:bg-red-700 text-white" disabled={isDeleting} onClick={onDelete}>
+            {isDeleting ? 'Deleting…' : 'Delete'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
\ No newline at end of file
diff --git a/server/src/components/Invitations/dialogs/viewInvitationDialog.tsx b/server/src/components/Invitations/dialogs/viewInvitationDialog.tsx
new file mode 100644
index 00000000..2408c13a
--- /dev/null
+++ b/server/src/components/Invitations/dialogs/viewInvitationDialog.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import { InvitationRow } from "../InvitationsTable";
+import StatusBadge from "../StatusBadge";
+
+interface ViewInvitationDialogProps {
+  invitation: InvitationRow | null;
+  onClose: () => void;
+}
+
+export default function ViewInvitationDialog({
+  invitation,
+  onClose,
+}: ViewInvitationDialogProps) {
+  if (!invitation) return null;
+
+  return (
+    <Dialog open={!!invitation} onOpenChange={() => onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Invitation Details</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 text-sm">
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Email
+              </p>
+              <p className="text-slate-900 font-medium break-all">
+                {invitation.email}
+              </p>
+            </div>
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Role
+              </p>
+              <span
+                className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wide ${invitation.role === "mentor" || invitation.role === "superAdmin" ? "bg-[#18181B] text-white" : "bg-slate-100 text-slate-600"}`}
+              >
+                {invitation.role}
+              </span>
+            </div>
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Project
+              </p>
+              <p className="text-slate-700">{invitation.project}</p>
+            </div>
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Status
+              </p>
+              <StatusBadge status={invitation.status} />
+            </div>
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Sent On
+              </p>
+              <p className="text-slate-700">
+                {new Date(invitation.createdAt).toLocaleDateString()}
+              </p>
+            </div>
+            <div>
+              <p className="text-[11px] font-bold uppercase text-slate-500 mb-1">
+                Expires At
+              </p>
+              <p className="text-slate-700">
+                {new Date(invitation.expiresAt).toLocaleString()}
+              </p>
+            </div>
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/server/src/components/admin-dashboard/ProjectsStats.tsx b/server/src/components/admin-dashboard/ProjectsStats.tsx
new file mode 100644
index 00000000..6ec46a42
--- /dev/null
+++ b/server/src/components/admin-dashboard/ProjectsStats.tsx
@@ -0,0 +1,66 @@
+import { CheckCircle, FolderOpen, Users } from "lucide-react";
+
+interface ProjectsStatsProps {
+  loading: boolean;
+  totalProjects: number;
+  totalMentors: number;
+  totalStudents: number;
+}
+
+export default function ProjectsStats({
+  loading,
+  totalProjects,
+  totalMentors,
+  totalStudents,
+}: ProjectsStatsProps) {
+  const stats = [
+    {
+      label: "Total Projects",
+      value: totalProjects,
+      icon: FolderOpen,
+      color: "text-slate-500",
+      bg: "bg-slate-100",
+    },
+    {
+      label: "Total Mentors",
+      value: totalMentors,
+      icon: CheckCircle,
+      color: "text-emerald-500",
+      bg: "bg-emerald-50",
+    },
+    {
+      label: "Total Students",
+      value: totalStudents,
+      icon: Users,
+      color: "text-blue-500",
+      bg: "bg-blue-50",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      {stats.map((stat) => (
+        <div
+          key={stat.label}
+          className="bg-white border border-slate-200 rounded-xl px-5 py-4"
+        >
+          <div className="flex items-center justify-between mb-3">
+            <p
+              className={`text-xs font-medium uppercase tracking-wide ${stat.color}`}
+            >
+              {stat.label}
+            </p>
+            <div
+              className={`h-8 w-8 rounded-lg ${stat.bg} flex items-center justify-center`}
+            >
+              <stat.icon size={15} className={stat.color} />
+            </div>
+          </div>
+          <p className="text-2xl font-bold text-slate-900">
+            {loading ? "—" : stat.value}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/server/src/components/admin-dashboard/ProjectsTable.tsx b/server/src/components/admin-dashboard/ProjectsTable.tsx
new file mode 100644
index 00000000..2113d619
--- /dev/null
+++ b/server/src/components/admin-dashboard/ProjectsTable.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { Globe, Trash2 } from "lucide-react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableActionMenu from "@/components/admin/TableActionMenu";
+import TableStateRows from "@/components/admin/TableStateRows";
+
+export interface ProjectRow {
+  id: string;
+  name: string;
+  domain: string;
+  mentors: number;
+  students: number;
+  createdBy: string;
+  createdDate: string;
+  description?: string;
+}
+
+interface ProjectsTableProps {
+  data: ProjectRow[];
+  loading: boolean;
+  error?: boolean;
+  domainIcons: Record<string, React.ReactNode>;
+  domainLabels: Record<string, string>;
+  onView: (project: ProjectRow) => void;
+  onEdit: (project: ProjectRow) => void;
+  onDelete: (id: string) => void;
+}
+
+export default function ProjectsTable({
+  data,
+  loading,
+  error = false,
+  domainIcons,
+  domainLabels,
+  onView,
+  onEdit,
+  onDelete,
+}: ProjectsTableProps) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow className="bg-[#f8fafc] hover:bg-[#f8fafc]">
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Project Name
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Domain
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Mentors
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Students
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Created By
+          </TableHead>
+          <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Created Date
+          </TableHead>
+          <TableHead className="px-4 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">
+            Actions
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableStateRows
+          colSpan={7}
+          loading={loading}
+          error={error}
+          empty={!loading && !error && data.length === 0}
+          loadingMessage="Loading projects..."
+          emptyMessage="No projects found."
+        />
+        {!loading &&
+          !error &&
+          data.map((project) => (
+            <TableRow key={project.id} className="bg-white hover:bg-[#fbfcff]">
+              <TableCell className="px-4 py-3 font-medium text-slate-900">
+                <div className="flex items-center gap-3">
+                  <div className="flex items-center justify-center w-9 h-9 rounded-lg bg-[#F0F0F0] shrink-0">
+                    {domainIcons[project.domain] ?? <Globe size={18} />}
+                  </div>
+                  <span>{project.name}</span>
+                </div>
+              </TableCell>
+              <TableCell className="px-4 py-3">
+                <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-[#EBEBEB] text-slate-900">
+                  {domainLabels[project.domain] ?? project.domain}
+                </span>
+              </TableCell>
+              <TableCell className="px-4 py-3 text-slate-900 font-medium">
+                {project.mentors}
+              </TableCell>
+              <TableCell className="px-4 py-3 text-slate-900 font-medium">
+                {project.students}
+              </TableCell>
+              <TableCell className="px-4 py-3 text-slate-900 font-medium">
+                {project.createdBy}
+              </TableCell>
+              <TableCell className="px-4 py-3 text-slate-500">
+                {project.createdDate}
+              </TableCell>
+              <TableCell className="px-4 py-3 text-right">
+                <TableActionMenu
+                  ariaLabel={`Actions for ${project.name}`}
+                  items={[
+                    { label: "View Details", onSelect: () => onView(project) },
+                    {
+                      label: "Edit Project",
+                      onSelect: () => onEdit(project),
+                    },
+                    {
+                      label: "Delete",
+                      onSelect: () => onDelete(project.id),
+                      variant: "danger",
+                      separator: true,
+                      icon: <Trash2 size={14} />,
+                    },
+                  ]}
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/server/src/components/admin-dashboard/SuperAdminDashboard.tsx b/server/src/components/admin-dashboard/SuperAdminDashboard.tsx
index ca9e5e70..23153a0c 100644
--- a/server/src/components/admin-dashboard/SuperAdminDashboard.tsx
+++ b/server/src/components/admin-dashboard/SuperAdminDashboard.tsx
@@ -155,7 +155,8 @@ export default function SuperAdminDashboard({
         [254, 226, 226],
       ];
       cards.slice(0, 3).forEach((card, idx) => {
-        doc.setFillColor(...metricColors[idx]);
+        const [r, g, b] = metricColors[idx];
+        doc.setFillColor(r, g, b);
         doc.roundedRect(boxX, boxY, boxW, boxH, 8, 8, "F");
         doc.setDrawColor(203);
         doc.roundedRect(boxX, boxY, boxW, boxH, 8, 8, "S");
diff --git a/server/src/components/admin/AdminPageLayout.tsx b/server/src/components/admin/AdminPageLayout.tsx
new file mode 100644
index 00000000..1e87ff6f
--- /dev/null
+++ b/server/src/components/admin/AdminPageLayout.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import AsideSidebar from "@/components/AsideSidebar";
+
+interface AdminPageLayoutProps {
+  children: React.ReactNode;
+  /** Tailwind bg class for the page background. Defaults to bg-[#f5f7fb] */
+  className?: string;
+}
+
+/**
+ * Shared layout wrapper for all admin pages.
+ * Renders the sidebar alongside page content.
+ *
+ * Usage:
+ *   <AdminPageLayout className="bg-[#f1f1f9]">
+ *     <div className="flex-1 p-8 space-y-6 min-w-0">
+ *       ...page content...
+ *     </div>
+ *   </AdminPageLayout>
+ */
+export default function AdminPageLayout({
+  children,
+  className = "bg-[#f5f7fb]",
+}: AdminPageLayoutProps) {
+  return (
+    <div className={`flex min-h-screen ${className}`}>
+      <AsideSidebar />
+      {children}
+    </div>
+  );
+}
diff --git a/server/src/components/admin/AdminPagination.tsx b/server/src/components/admin/AdminPagination.tsx
new file mode 100644
index 00000000..d6bf4860
--- /dev/null
+++ b/server/src/components/admin/AdminPagination.tsx
@@ -0,0 +1,130 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from "@/components/ui/pagination";
+
+interface AdminPaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  /** Items per page – used to compute the "Showing X to Y" label. Default 10 */
+  itemsPerPage?: number;
+  /** Label shown after the count, e.g. "users" or "entries". Default "results" */
+  itemLabel?: string;
+  onPageChange: (page: number) => void;
+}
+
+/**
+ * Shared pagination footer for all admin tables.
+ * Matches the users page style: "Showing X to Y of Z" + windowed < 1 2 3 > links.
+ */
+export default function AdminPagination({
+  page,
+  totalPages,
+  total,
+  itemsPerPage = 10,
+  itemLabel = "results",
+  onPageChange,
+}: AdminPaginationProps) {
+  const from = total === 0 ? 0 : (page - 1) * itemsPerPage + 1;
+  const to = Math.min(page * itemsPerPage, total);
+
+  const goToPage = (next: number) => {
+    if (next < 1 || next > totalPages) return;
+    onPageChange(next);
+  };
+
+  return (
+    <div className="flex flex-col gap-3 border-t border-[#e4e7ed] px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+      <p className="text-sm text-slate-500">
+        Showing {from} to {to} of {total} {itemLabel}
+      </p>
+
+      <Pagination className="mx-0 w-auto justify-end">
+        <PaginationContent>
+          {/* Previous */}
+          <PaginationItem>
+            <PaginationLink
+              size="icon"
+              onClick={() => goToPage(page - 1)}
+              disabled={page <= 1}
+              aria-label="Previous page"
+            >
+              {"<"}
+            </PaginationLink>
+          </PaginationItem>
+
+          {/* First page + ellipsis when far from start */}
+          {page > 2 ? (
+            <>
+              <PaginationItem>
+                <PaginationLink
+                  size="icon"
+                  isActive={page === 1}
+                  onClick={() => goToPage(1)}
+                >
+                  1
+                </PaginationLink>
+              </PaginationItem>
+              {page > 3 ? (
+                <PaginationItem>
+                  <PaginationEllipsis />
+                </PaginationItem>
+              ) : null}
+            </>
+          ) : null}
+
+          {/* Windowed pages: current ±1 */}
+          {Array.from({ length: totalPages }, (_, idx) => idx + 1)
+            .filter((n) => Math.abs(n - page) <= 1)
+            .map((n) => (
+              <PaginationItem key={n}>
+                <PaginationLink
+                  size="icon"
+                  isActive={n === page}
+                  onClick={() => goToPage(n)}
+                >
+                  {n}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+
+          {/* Last page + ellipsis when far from end */}
+          {page < totalPages - 1 ? (
+            <>
+              {page < totalPages - 2 ? (
+                <PaginationItem>
+                  <PaginationEllipsis />
+                </PaginationItem>
+              ) : null}
+              <PaginationItem>
+                <PaginationLink
+                  size="icon"
+                  isActive={page === totalPages}
+                  onClick={() => goToPage(totalPages)}
+                >
+                  {totalPages}
+                </PaginationLink>
+              </PaginationItem>
+            </>
+          ) : null}
+
+          {/* Next */}
+          <PaginationItem>
+            <PaginationLink
+              size="icon"
+              onClick={() => goToPage(page + 1)}
+              disabled={page >= totalPages}
+              aria-label="Next page"
+            >
+              {">"}
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+}
diff --git a/server/src/components/admin/AdminStatusBadge.tsx b/server/src/components/admin/AdminStatusBadge.tsx
new file mode 100644
index 00000000..4d90c179
--- /dev/null
+++ b/server/src/components/admin/AdminStatusBadge.tsx
@@ -0,0 +1,106 @@
+/**
+ * Unified status badge that covers all admin status types in one component,
+ * replacing the two separate StatusBadge files that existed in
+ * admin-dashboard/ and Invitations/.
+ *
+ * Supported status values:
+ *   Invitation:  "Pending" | "Accepted" | "Expired"
+ *   User:        "Active"  | "Inactive"
+ *   Project:     "active"  | "pending"  | "delayed"
+ *
+ * Usage:
+ *   <AdminStatusBadge status={inv.status} />
+ *   <AdminStatusBadge status={user.status} />
+ *   <AdminStatusBadge status={project.status} />
+ */
+
+export type StatusValue =
+  | "Pending"
+  | "Accepted"
+  | "Expired"
+  | "Active"
+  | "Inactive"
+  | "active"
+  | "pending"
+  | "delayed";
+
+interface AdminStatusBadgeProps {
+  status: StatusValue | string;
+}
+
+const config: Record<
+  string,
+  { bg: string; text: string; border: string; dot?: string; label: string }
+> = {
+  Pending: {
+    bg: "bg-amber-50",
+    text: "text-amber-600",
+    border: "border-amber-200/60",
+    dot: "bg-amber-500",
+    label: "Pending",
+  },
+  pending: {
+    bg: "bg-amber-50",
+    text: "text-amber-700",
+    border: "border-amber-100",
+    label: "Pending",
+  },
+  Accepted: {
+    bg: "bg-emerald-50",
+    text: "text-emerald-600",
+    border: "border-emerald-200/60",
+    dot: "bg-emerald-500",
+    label: "Active",
+  },
+  active: {
+    bg: "bg-emerald-50",
+    text: "text-emerald-700",
+    border: "border-emerald-100",
+    label: "Active",
+  },
+  Active: {
+    bg: "bg-blue-50",
+    text: "text-blue-600",
+    border: "border-blue-200/60",
+    dot: "bg-blue-500",
+    label: "Active",
+  },
+  Inactive: {
+    bg: "bg-slate-50",
+    text: "text-slate-500",
+    border: "border-slate-200",
+    dot: "bg-slate-400",
+    label: "Inactive",
+  },
+  Expired: {
+    bg: "bg-rose-50",
+    text: "text-rose-600",
+    border: "border-rose-200/60",
+    dot: "bg-rose-500",
+    label: "Expired",
+  },
+  delayed: {
+    bg: "bg-rose-50",
+    text: "text-rose-700",
+    border: "border-rose-100",
+    label: "Delayed",
+  },
+};
+
+export default function AdminStatusBadge({ status }: AdminStatusBadgeProps) {
+  const c = config[status] ?? {
+    bg: "bg-slate-50",
+    text: "text-slate-600",
+    border: "border-slate-200",
+    label: status,
+  };
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium border ${c.bg} ${c.text} ${c.border}`}
+    >
+      {c.dot && <span className={`w-1.5 h-1.5 rounded-full ${c.dot}`} />}
+      {c.label}
+    </span>
+  );
+}
diff --git a/server/src/components/admin/ConfirmDeleteDialog.tsx b/server/src/components/admin/ConfirmDeleteDialog.tsx
new file mode 100644
index 00000000..e8da93c0
--- /dev/null
+++ b/server/src/components/admin/ConfirmDeleteDialog.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface ConfirmDeleteDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  isPending: boolean;
+  /** Dialog title. Default: "Confirm Delete" */
+  title?: string;
+  /** Description / warning text shown under the title */
+  description?: string;
+  /** Label for the destructive button. Default: "Delete" */
+  confirmLabel?: string;
+}
+
+/**
+ * Generic delete-confirmation dialog (AlertDialog) reusable across all
+ * admin pages (users, projects, invitations, etc.).
+ *
+ * Usage:
+ *   <ConfirmDeleteDialog
+ *     open={!!deleteId}
+ *     onOpenChange={(open) => !open && setDeleteId(null)}
+ *     onConfirm={handleDelete}
+ *     isPending={isDeleting}
+ *     title="Delete User"
+ *     description="This will permanently delete the user account and all associated data. This action cannot be undone."
+ *   />
+ */
+export default function ConfirmDeleteDialog({
+  open,
+  onOpenChange,
+  onConfirm,
+  isPending,
+  title = "Confirm Delete",
+  description = "This action cannot be undone.",
+  confirmLabel = "Delete",
+}: ConfirmDeleteDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className="bg-red-600 hover:bg-red-700 text-white"
+            disabled={isPending}
+            onClick={onConfirm}
+          >
+            {isPending ? "Deleting…" : confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/server/src/components/admin/FilterBar.tsx b/server/src/components/admin/FilterBar.tsx
new file mode 100644
index 00000000..9e39af23
--- /dev/null
+++ b/server/src/components/admin/FilterBar.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import React from "react";
+
+import { Search } from "lucide-react";
+
+// ─── Sub-component: FilterField ──────────────────────────────────────────────
+
+interface FilterFieldProps {
+  /** Short uppercase label shown above the control */
+  label: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A labeled wrapper for a single filter control (Select, date input, etc.).
+ *
+ * Usage:
+ *   <FilterBar.Field label="Role">
+ *     <Select value={roleFilter} onValueChange={setRoleFilter}>...</Select>
+ *   </FilterBar.Field>
+ */
+function FilterField({ label, children, className }: FilterFieldProps) {
+  return (
+    <div className={`space-y-1 ${className ?? ""}`}>
+      <p className="text-[10px] font-bold tracking-wider text-slate-500 uppercase">
+        {label}
+      </p>
+      {children}
+    </div>
+  );
+}
+
+// ─── Sub-component: FilterSearch ─────────────────────────────────────────────
+
+interface FilterSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+}
+
+/**
+ * Search input with a magnifier icon, auto-positioned to the far right of the
+ * filter bar via ml-auto.
+ *
+ * Usage:
+ *   <FilterBar.Search
+ *     value={search}
+ *     onChange={(v) => { setSearch(v); setPage(1); }}
+ *     placeholder="Search by name, email, or ID..."
+ *   />
+ */
+function FilterSearch({
+  value,
+  onChange,
+  placeholder = "Search...",
+}: FilterSearchProps) {
+  return (
+    <FilterField label="Search" className="ml-auto w-full sm:w-auto">
+      <div className="relative">
+        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+        <input
+          type="search"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="h-8 w-full sm:w-[360px] rounded-lg border border-[#dbe0e8] bg-white pl-9 pr-3 text-sm text-slate-700 outline-none transition focus:border-slate-400"
+        />
+      </div>
+    </FilterField>
+  );
+}
+
+// ─── Root component: FilterBar ───────────────────────────────────────────────
+
+interface FilterBarProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Horizontal filter bar used at the top of admin data tables.
+ * Provides consistent spacing, border and background styling.
+ *
+ * Compound sub-components:
+ *   FilterBar.Field  – labeled wrapper for any filter control
+ *   FilterBar.Search – search input auto-aligned to the right
+ *
+ * Usage:
+ *   <FilterBar>
+ *     <FilterBar.Field label="Role">
+ *       <Select value={roleFilter} onValueChange={(v) => { setRoleFilter(v); setPage(1); }}>
+ *         <SelectTrigger className="h-8 w-[130px] bg-white"><SelectValue /></SelectTrigger>
+ *         <SelectContent>
+ *           <SelectItem value="all">All Roles</SelectItem>
+ *           <SelectItem value="Student">Student</SelectItem>
+ *         </SelectContent>
+ *       </Select>
+ *     </FilterBar.Field>
+ *
+ *     <FilterBar.Search
+ *       value={search}
+ *       onChange={(v) => { setSearch(v); setPage(1); }}
+ *       placeholder="Search by name, email, or ID..."
+ *     />
+ *   </FilterBar>
+ */
+function FilterBar({ children }: FilterBarProps) {
+  return (
+    <div className="flex flex-wrap items-end gap-3 rounded-lg border border-[#e4e7ed] bg-[#f8fafc] p-3">
+      {children}
+    </div>
+  );
+}
+
+FilterBar.Field = FilterField;
+FilterBar.Search = FilterSearch;
+
+export default FilterBar;
diff --git a/server/src/components/admin/PageHeader.tsx b/server/src/components/admin/PageHeader.tsx
new file mode 100644
index 00000000..e48c0025
--- /dev/null
+++ b/server/src/components/admin/PageHeader.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  /** Optional button/element rendered on the right side */
+  action?: React.ReactNode;
+  /**
+   * "inline" – plain title+action row inside a Card (default)
+   * "banner" – white top-bar with border-b (used by invitation page)
+   */
+  variant?: "inline" | "banner";
+}
+
+/**
+ * Shared page header for all admin pages.
+ *
+ * Inline usage (inside a Card):
+ *   <PageHeader
+ *     title="Projects"
+ *     action={<Button onClick={onCreate}>+ Create New Project</Button>}
+ *   />
+ *
+ * Banner usage (full-width top bar):
+ *   <PageHeader
+ *     variant="banner"
+ *     title="Invitations"
+ *     subtitle="Manage organizational access."
+ *     action={<button onClick={onCreate}>Create Invitation</button>}
+ *   />
+ */
+export default function PageHeader({
+  title,
+  subtitle,
+  action,
+  variant = "inline",
+}: PageHeaderProps) {
+  if (variant === "banner") {
+    return (
+      <div className="bg-white border-b border-slate-200 px-8 py-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-page-title text-slate-900">{title}</h1>
+          {subtitle && (
+            <p className="text-sm text-slate-500 mt-0.5">{subtitle}</p>
+          )}
+        </div>
+        {action && <div className="shrink-0">{action}</div>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h1 className="text-page-title text-[#0A0A0A]">{title}</h1>
+        {subtitle && (
+          <p className="mt-0.5 text-sm text-slate-500">{subtitle}</p>
+        )}
+      </div>
+      {action && <div className="shrink-0">{action}</div>}
+    </div>
+  );
+}
diff --git a/server/src/components/admin/RoleBadge.tsx b/server/src/components/admin/RoleBadge.tsx
new file mode 100644
index 00000000..c5d28a8c
--- /dev/null
+++ b/server/src/components/admin/RoleBadge.tsx
@@ -0,0 +1,50 @@
+export type RoleValue =
+  | "student"
+  | "mentor"
+  | "superAdmin"
+  | "Student"
+  | "Mentor"
+  | "SuperAdmin";
+
+interface RoleBadgeProps {
+  role: RoleValue | string;
+}
+
+const styles: Record<string, string> = {
+  student: "bg-slate-100 text-slate-700 border-slate-200",
+  Student: "bg-slate-100 text-slate-700 border-slate-200",
+  mentor: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  Mentor: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  superAdmin: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  SuperAdmin: "bg-indigo-50 text-indigo-700 border-indigo-200",
+};
+
+const labels: Record<string, string> = {
+  student: "Student",
+  Student: "Student",
+  mentor: "Mentor",
+  Mentor: "Mentor",
+  superAdmin: "Super Admin",
+  SuperAdmin: "Super Admin",
+};
+
+/**
+ * Colored pill badge for user roles (Student / Mentor / SuperAdmin).
+ * Accepts both camelCase API values ("student", "superAdmin") and
+ * display-case values ("Student", "SuperAdmin").
+ *
+ * Usage:
+ *   <RoleBadge role={user.role} />
+ *   <RoleBadge role="superAdmin" />
+ */
+export default function RoleBadge({ role }: RoleBadgeProps) {
+  return (
+    <span
+      className={`inline-flex rounded-md border px-2 py-0.5 text-[11px] font-semibold ${
+        styles[role] ?? "bg-slate-100 text-slate-700 border-slate-200"
+      }`}
+    >
+      {labels[role] ?? role}
+    </span>
+  );
+}
diff --git a/server/src/components/admin/TableActionMenu.tsx b/server/src/components/admin/TableActionMenu.tsx
new file mode 100644
index 00000000..88e7a270
--- /dev/null
+++ b/server/src/components/admin/TableActionMenu.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import React from "react";
+
+import { MoreVertical } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/dropdown-menu";
+
+export interface ActionItem {
+  label: string;
+  onSelect: () => void;
+  /** "danger" renders text and focus state in red. Default: "default" */
+  variant?: "default" | "danger";
+  /** Optional icon rendered before the label */
+  icon?: React.ReactNode;
+  /** Renders a separator line ABOVE this item */
+  separator?: boolean;
+}
+
+interface TableActionMenuProps {
+  items: ActionItem[];
+  /** Accessible label for the trigger button. Default: "Row actions" */
+  ariaLabel?: string;
+}
+
+/**
+ * Reusable three-dot (⋮) action dropdown used in table rows across all admin
+ * pages (users, projects, invitations).
+ *
+ * Usage:
+ *   <TableActionMenu
+ *     ariaLabel={`Actions for ${user.name}`}
+ *     items={[
+ *       { label: "View Details",   onSelect: () => setViewUser(user) },
+ *       { label: "Change Status",  onSelect: () => setStatusUser(user) },
+ *       { label: "Delete User",    onSelect: () => setDeleteId(user.id), variant: "danger", separator: true },
+ *     ]}
+ *   />
+ */
+export default function TableActionMenu({
+  items,
+  ariaLabel = "Row actions",
+}: TableActionMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          aria-label={ariaLabel}
+          className="h-8 w-8 inline-flex items-center justify-center rounded-md text-slate-400 hover:text-slate-900 hover:bg-slate-100 transition-colors"
+        >
+          <MoreVertical size={15} />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-44">
+        {items.map((item, index) => (
+          <React.Fragment key={index}>
+            {item.separator && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              onSelect={item.onSelect}
+              className={
+                item.variant === "danger"
+                  ? "text-red-600 focus:text-red-600 focus:bg-red-50"
+                  : ""
+              }
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.label}
+            </DropdownMenuItem>
+          </React.Fragment>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/server/src/components/admin/TableStateRows.tsx b/server/src/components/admin/TableStateRows.tsx
new file mode 100644
index 00000000..9989bc86
--- /dev/null
+++ b/server/src/components/admin/TableStateRows.tsx
@@ -0,0 +1,80 @@
+import { TableCell, TableRow } from "@/components/ui/table";
+
+interface TableStateRowsProps {
+  /** Number of columns – used for colSpan so the row spans the full table */
+  colSpan: number;
+  loading: boolean;
+  /** Pass the error message string, any truthy value, or null/false to hide */
+  error?: string | null | boolean;
+  /** Pass true when the data array is empty (and not loading/erroring) */
+  empty?: boolean;
+  emptyMessage?: string;
+  loadingMessage?: string;
+}
+
+/**
+ * Renders a single-row placeholder inside <TableBody> for the three common
+ * async states: loading, error, and empty results.
+ *
+ * Usage:
+ *   <TableBody>
+ *     <TableStateRows
+ *       colSpan={5}
+ *       loading={isLoading}
+ *       error={fetchError}
+ *       empty={visibleRows.length === 0}
+ *       loadingMessage="Loading users..."
+ *       emptyMessage="No users found for the selected filters."
+ *     />
+ *     {!isLoading && visibleRows.map((row) => <TableRow key={row.id}>...</TableRow>)}
+ *   </TableBody>
+ */
+export default function TableStateRows({
+  colSpan,
+  loading,
+  error,
+  empty,
+  emptyMessage = "No records found.",
+  loadingMessage = "Loading...",
+}: TableStateRowsProps) {
+  if (loading) {
+    return (
+      <TableRow>
+        <TableCell
+          colSpan={colSpan}
+          className="px-5 py-8 text-center text-sm text-slate-400"
+        >
+          {loadingMessage}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (error) {
+    return (
+      <TableRow>
+        <TableCell
+          colSpan={colSpan}
+          className="px-5 py-8 text-center text-sm text-red-500"
+        >
+          {typeof error === "string" ? error : "Failed to load data."}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  if (empty) {
+    return (
+      <TableRow>
+        <TableCell
+          colSpan={colSpan}
+          className="px-5 py-8 text-center text-sm text-slate-400"
+        >
+          {emptyMessage}
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return null;
+}
diff --git a/server/src/components/admin/index.ts b/server/src/components/admin/index.ts
new file mode 100644
index 00000000..8a83e74a
--- /dev/null
+++ b/server/src/components/admin/index.ts
@@ -0,0 +1,10 @@
+export { default as AdminPageLayout } from "./AdminPageLayout";
+export { default as PageHeader } from "./PageHeader";
+export { default as AdminPagination } from "./AdminPagination";
+export { default as ConfirmDeleteDialog } from "./ConfirmDeleteDialog";
+export { default as RoleBadge } from "./RoleBadge";
+export { default as AdminStatusBadge } from "./AdminStatusBadge";
+export { default as TableActionMenu } from "./TableActionMenu";
+export type { ActionItem } from "./TableActionMenu";
+export { default as TableStateRows } from "./TableStateRows";
+export { default as FilterBar } from "./FilterBar";
diff --git a/server/src/components/admin/users/ChangeStatusDialog.tsx b/server/src/components/admin/users/ChangeStatusDialog.tsx
new file mode 100644
index 00000000..08dbdbd7
--- /dev/null
+++ b/server/src/components/admin/users/ChangeStatusDialog.tsx
@@ -0,0 +1,78 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { UserRecord, UserStatus } from "./types";
+
+interface ChangeStatusDialogProps {
+  user: UserRecord | null;
+  pendingStatus: UserStatus;
+  isMutating: boolean;
+  onPendingStatusChange: (status: UserStatus) => void;
+  onOpenChange: (open: boolean) => void;
+  onSave: () => void;
+}
+
+export default function ChangeStatusDialog({
+  user,
+  pendingStatus,
+  isMutating,
+  onPendingStatusChange,
+  onOpenChange,
+  onSave,
+}: ChangeStatusDialogProps) {
+  return (
+    <AlertDialog open={!!user} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Change User Status</AlertDialogTitle>
+          <AlertDialogDescription>
+            Select the new status for{" "}
+            <span className="font-semibold text-slate-900">{user?.name}</span>
+            . Deactivating a user will prevent them from logging in.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <div className="px-1 py-2">
+          <p className="mb-1.5 text-[11px] font-bold uppercase text-slate-500">
+            New Status
+          </p>
+          <Select
+            value={pendingStatus}
+            onValueChange={(v) => onPendingStatusChange(v as UserStatus)}
+          >
+            <SelectTrigger className="w-full bg-white">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="Active">Active</SelectItem>
+              <SelectItem value="Inactive">Inactive (Deactivated)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isMutating}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            disabled={isMutating || pendingStatus === user?.status}
+            onClick={onSave}
+          >
+            {isMutating ? "Saving…" : "Save"}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
diff --git a/server/src/components/admin/users/UsersFilters.tsx b/server/src/components/admin/users/UsersFilters.tsx
new file mode 100644
index 00000000..140160f7
--- /dev/null
+++ b/server/src/components/admin/users/UsersFilters.tsx
@@ -0,0 +1,71 @@
+import { FilterBar } from "@/components/admin";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+import { UserRole, UserStatus } from "./types";
+
+interface UsersFiltersProps {
+  roleFilter: "all" | UserRole;
+  statusFilter: "all" | UserStatus;
+  search: string;
+  onRoleChange: (value: "all" | UserRole) => void;
+  onStatusChange: (value: "all" | UserStatus) => void;
+  onSearchChange: (value: string) => void;
+}
+
+export default function UsersFilters({
+  roleFilter,
+  statusFilter,
+  search,
+  onRoleChange,
+  onStatusChange,
+  onSearchChange,
+}: UsersFiltersProps) {
+  return (
+    <FilterBar>
+      <FilterBar.Field label="Role">
+        <Select
+          value={roleFilter}
+          onValueChange={(value) => onRoleChange(value as "all" | UserRole)}
+        >
+          <SelectTrigger className="h-8 w-[130px] bg-white">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Roles</SelectItem>
+            <SelectItem value="Student">Student</SelectItem>
+            <SelectItem value="Mentor">Mentor</SelectItem>
+            <SelectItem value="SuperAdmin">SuperAdmin</SelectItem>
+          </SelectContent>
+        </Select>
+      </FilterBar.Field>
+
+      <FilterBar.Field label="Status">
+        <Select
+          value={statusFilter}
+          onValueChange={(value) => onStatusChange(value as "all" | UserStatus)}
+        >
+          <SelectTrigger className="h-8 w-[140px] bg-white">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Statuses</SelectItem>
+            <SelectItem value="Active">Active</SelectItem>
+            <SelectItem value="Inactive">Inactive</SelectItem>
+          </SelectContent>
+        </Select>
+      </FilterBar.Field>
+
+      <FilterBar.Search
+        value={search}
+        onChange={onSearchChange}
+        placeholder="Search by name, email, or ID..."
+      />
+    </FilterBar>
+  );
+}
diff --git a/server/src/components/admin/users/UsersTable.tsx b/server/src/components/admin/users/UsersTable.tsx
new file mode 100644
index 00000000..5aff4d55
--- /dev/null
+++ b/server/src/components/admin/users/UsersTable.tsx
@@ -0,0 +1,151 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  AdminPagination,
+  AdminStatusBadge,
+  RoleBadge,
+  TableActionMenu,
+  TableStateRows,
+} from "@/components/admin";
+
+import { UserRecord } from "./types";
+import { getInitials } from "./utils";
+
+interface UsersTableProps {
+  users: UserRecord[];
+  isLoading: boolean;
+  fetchError: string | null;
+  page: number;
+  totalPages: number;
+  totalUsers: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+  onViewUser: (user: UserRecord) => void;
+  onChangeStatus: (user: UserRecord) => void;
+  onDeleteUser: (id: string) => void;
+}
+
+export default function UsersTable({
+  users,
+  isLoading,
+  fetchError,
+  page,
+  totalPages,
+  totalUsers,
+  itemsPerPage,
+  onPageChange,
+  onViewUser,
+  onChangeStatus,
+  onDeleteUser,
+}: UsersTableProps) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-[#e4e7ed]">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-[#f8fafc] hover:bg-[#f8fafc]">
+            <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+              User Identity
+            </TableHead>
+            <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+              Role
+            </TableHead>
+            <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+              Status
+            </TableHead>
+            <TableHead className="px-4 text-[11px] font-bold uppercase tracking-wider text-slate-500">
+              Created Date
+            </TableHead>
+            <TableHead className="px-4 text-right text-[11px] font-bold uppercase tracking-wider text-slate-500">
+              Actions
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          <TableStateRows
+            colSpan={5}
+            loading={isLoading}
+            error={fetchError}
+            empty={!isLoading && !fetchError && users.length === 0}
+            loadingMessage="Loading users..."
+            emptyMessage="No users found for the selected filters."
+          />
+          {!isLoading &&
+            !fetchError &&
+            users.map((user) => (
+              <TableRow key={user.id} className="bg-white hover:bg-[#fbfcff]">
+                <TableCell className="px-4 py-3">
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-9 w-9 border border-slate-200">
+                      {user.avatar ? (
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                      ) : null}
+                      <AvatarFallback className="bg-slate-100 text-xs font-semibold text-slate-700">
+                        {getInitials(user.name)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <p className="text-sm font-semibold text-slate-900">
+                        {user.name}
+                      </p>
+                      <p className="text-xs text-slate-500">{user.email}</p>
+                    </div>
+                  </div>
+                </TableCell>
+
+                <TableCell className="px-4 py-3">
+                  <RoleBadge role={user.role} />
+                </TableCell>
+
+                <TableCell className="px-4 py-3">
+                  <AdminStatusBadge status={user.status} />
+                </TableCell>
+
+                <TableCell className="px-4 py-3 text-sm text-slate-700">
+                  {user.createdAt}
+                </TableCell>
+
+                <TableCell className="px-4 py-3 text-right">
+                  <TableActionMenu
+                    ariaLabel={`Actions for ${user.name}`}
+                    items={[
+                      {
+                        label: "View Details",
+                        onSelect: () => onViewUser(user),
+                      },
+                      {
+                        label: "Change Status",
+                        onSelect: () => onChangeStatus(user),
+                      },
+                      {
+                        label: "Delete User",
+                        variant: "danger",
+                        separator: true,
+                        onSelect: () => onDeleteUser(user.id),
+                      },
+                    ]}
+                  />
+                </TableCell>
+              </TableRow>
+            ))}
+        </TableBody>
+      </Table>
+
+      <AdminPagination
+        page={page}
+        totalPages={totalPages}
+        total={totalUsers}
+        itemsPerPage={itemsPerPage}
+        itemLabel="users"
+        onPageChange={onPageChange}
+      />
+    </div>
+  );
+}
diff --git a/server/src/components/admin/users/ViewUserDialog.tsx b/server/src/components/admin/users/ViewUserDialog.tsx
new file mode 100644
index 00000000..77624868
--- /dev/null
+++ b/server/src/components/admin/users/ViewUserDialog.tsx
@@ -0,0 +1,83 @@
+import { AdminStatusBadge, RoleBadge } from "@/components/admin";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import { UserRecord } from "./types";
+import { getInitials } from "./utils";
+
+interface ViewUserDialogProps {
+  user: UserRecord | null;
+  onOpenChange: (open: boolean) => void;
+}
+
+export default function ViewUserDialog({
+  user,
+  onOpenChange,
+}: ViewUserDialogProps) {
+  return (
+    <Dialog open={!!user} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>User Details</DialogTitle>
+        </DialogHeader>
+        {user != null && (
+          <div className="space-y-4 text-sm">
+            <div className="flex items-center gap-4">
+              <Avatar className="h-14 w-14 border border-slate-200">
+                {user.avatar ? (
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                ) : null}
+                <AvatarFallback className="bg-slate-100 text-base font-semibold text-slate-700">
+                  {getInitials(user.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <p className="text-base font-bold text-slate-900">{user.name}</p>
+                <p className="text-xs text-slate-500">{user.email}</p>
+              </div>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="mb-1 text-[11px] font-bold uppercase text-slate-500">
+                  Role
+                </p>
+                <RoleBadge role={user.role} />
+              </div>
+              <div>
+                <p className="mb-1 text-[11px] font-bold uppercase text-slate-500">
+                  Status
+                </p>
+                <AdminStatusBadge status={user.status} />
+              </div>
+              <div>
+                <p className="mb-1 text-[11px] font-bold uppercase text-slate-500">
+                  Created Date
+                </p>
+                <p className="text-slate-700">{user.createdAt}</p>
+              </div>
+              <div>
+                <p className="mb-1 text-[11px] font-bold uppercase text-slate-500">
+                  User ID
+                </p>
+                <p className="truncate text-xs text-slate-500">{user.id}</p>
+              </div>
+            </div>
+          </div>
+        )}
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/server/src/components/admin/users/index.ts b/server/src/components/admin/users/index.ts
new file mode 100644
index 00000000..9b6b4e6c
--- /dev/null
+++ b/server/src/components/admin/users/index.ts
@@ -0,0 +1,8 @@
+export { default as UsersFilters } from "./UsersFilters";
+export { default as UsersTable } from "./UsersTable";
+export { default as ViewUserDialog } from "./ViewUserDialog";
+export { default as ChangeStatusDialog } from "./ChangeStatusDialog";
+
+export { useUsersAdmin } from "./useUsersAdmin";
+
+export type { UserRecord, UserRole, UserStatus, ApiUserRecord } from "./types";
diff --git a/server/src/components/admin/users/types.ts b/server/src/components/admin/users/types.ts
new file mode 100644
index 00000000..c973d439
--- /dev/null
+++ b/server/src/components/admin/users/types.ts
@@ -0,0 +1,24 @@
+export type UserRole = "Student" | "Mentor" | "SuperAdmin";
+export type UserStatus = "Active" | "Inactive";
+
+export type ApiUserRole = "student" | "mentor" | "superAdmin";
+
+export interface ApiUserRecord {
+  id: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: ApiUserRole;
+  isActive: boolean;
+  createdAt: string;
+}
+
+export interface UserRecord {
+  id: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  status: UserStatus;
+  createdAt: string;
+  avatar?: string;
+}
diff --git a/server/src/components/admin/users/useUsersAdmin.ts b/server/src/components/admin/users/useUsersAdmin.ts
new file mode 100644
index 00000000..9a496ef8
--- /dev/null
+++ b/server/src/components/admin/users/useUsersAdmin.ts
@@ -0,0 +1,200 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { ApiUserRecord, UserRecord, UserRole, UserStatus } from "./types";
+import { mapApiUserToRecord } from "./utils";
+
+const ITEMS_PER_PAGE = 5;
+
+export function useUsersAdmin() {
+  const [users, setUsers] = useState<UserRecord[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [roleFilter, setRoleFilter] = useState<"all" | UserRole>("all");
+  const [statusFilter, setStatusFilter] = useState<"all" | UserStatus>("all");
+  const [page, setPage] = useState(1);
+
+  const [viewUser, setViewUser] = useState<UserRecord | null>(null);
+  const [statusUser, setStatusUser] = useState<UserRecord | null>(null);
+  const [pendingStatus, setPendingStatus] = useState<UserStatus>("Active");
+  const [deleteUserId, setDeleteUserId] = useState<string | null>(null);
+  const [isMutating, setIsMutating] = useState(false);
+
+  const loadUsers = async () => {
+    setIsLoading(true);
+    setFetchError(null);
+    try {
+      const response = await fetch("/api/admin/users", { cache: "no-store" });
+      if (!response.ok) {
+        const payload = await response
+          .json()
+          .catch(() => ({ message: "Failed to fetch users" }));
+        throw new Error(payload.message ?? "Failed to fetch users");
+      }
+      const data = (await response.json()) as ApiUserRecord[];
+      setUsers(data.map(mapApiUserToRecord));
+    } catch (error) {
+      setUsers([]);
+      setFetchError(
+        error instanceof Error ? error.message : "Failed to fetch users",
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    let mounted = true;
+
+    const fetchUsers = async () => {
+      setIsLoading(true);
+      setFetchError(null);
+
+      try {
+        const response = await fetch("/api/admin/users", {
+          cache: "no-store",
+        });
+
+        if (!response.ok) {
+          const payload = await response
+            .json()
+            .catch(() => ({ message: "Failed to fetch users" }));
+          throw new Error(payload.message ?? "Failed to fetch users");
+        }
+
+        const data = (await response.json()) as ApiUserRecord[];
+        if (!mounted) {
+          return;
+        }
+
+        setUsers(data.map(mapApiUserToRecord));
+      } catch (error) {
+        if (!mounted) {
+          return;
+        }
+        setUsers([]);
+        setFetchError(
+          error instanceof Error ? error.message : "Failed to fetch users",
+        );
+      } finally {
+        if (mounted) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    fetchUsers();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const handleChangeStatus = async () => {
+    if (!statusUser) return;
+
+    setIsMutating(true);
+    try {
+      const res = await fetch("/api/admin/users", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          id: statusUser.id,
+          isActive: pendingStatus === "Active",
+        }),
+      });
+      if (!res.ok) throw new Error("Failed to update status");
+
+      setStatusUser(null);
+      await loadUsers();
+    } catch {
+      // Keep dialog open so the user can retry.
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    if (!deleteUserId) return;
+
+    setIsMutating(true);
+    try {
+      const res = await fetch(`/api/admin/users?id=${deleteUserId}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error("Failed to delete user");
+
+      setDeleteUserId(null);
+      await loadUsers();
+    } catch {
+      // Keep dialog state unchanged on failure.
+    } finally {
+      setIsMutating(false);
+    }
+  };
+
+  const openStatusDialog = (user: UserRecord) => {
+    setStatusUser(user);
+    setPendingStatus(user.status === "Active" ? "Inactive" : "Active");
+  };
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) => {
+      const isRoleMatch = roleFilter === "all" || user.role === roleFilter;
+      const isStatusMatch =
+        statusFilter === "all" || user.status === statusFilter;
+      const query = search.trim().toLowerCase();
+      const isSearchMatch =
+        query.length === 0 ||
+        user.name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query) ||
+        user.id.toLowerCase().includes(query);
+
+      return isRoleMatch && isStatusMatch && isSearchMatch;
+    });
+  }, [users, roleFilter, statusFilter, search]);
+
+  const totalPages = Math.max(1, Math.ceil(filteredUsers.length / ITEMS_PER_PAGE));
+  const safePage = Math.min(page, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+  const endIndex = startIndex + ITEMS_PER_PAGE;
+  const visibleUsers = filteredUsers.slice(startIndex, endIndex);
+
+  return {
+    constants: { ITEMS_PER_PAGE },
+    filters: {
+      search,
+      roleFilter,
+      statusFilter,
+      page,
+      setSearch,
+      setRoleFilter,
+      setStatusFilter,
+      setPage,
+    },
+    table: {
+      isLoading,
+      fetchError,
+      visibleUsers,
+      totalUsers: filteredUsers.length,
+      totalPages,
+      safePage,
+    },
+    dialogs: {
+      viewUser,
+      setViewUser,
+      statusUser,
+      setStatusUser,
+      pendingStatus,
+      setPendingStatus,
+      deleteUserId,
+      setDeleteUserId,
+      isMutating,
+    },
+    actions: {
+      openStatusDialog,
+      handleChangeStatus,
+      handleDeleteUser,
+    },
+  };
+}
diff --git a/server/src/components/admin/users/utils.ts b/server/src/components/admin/users/utils.ts
new file mode 100644
index 00000000..4e2e7952
--- /dev/null
+++ b/server/src/components/admin/users/utils.ts
@@ -0,0 +1,44 @@
+import { ApiUserRecord, ApiUserRole, UserRecord, UserRole } from "./types";
+
+export function toUserRole(role: ApiUserRole): UserRole {
+  if (role === "student") {
+    return "Student";
+  }
+  if (role === "mentor") {
+    return "Mentor";
+  }
+  return "SuperAdmin";
+}
+
+export function formatDate(dateString: string) {
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) {
+    return "-";
+  }
+
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });
+}
+
+export function mapApiUserToRecord(user: ApiUserRecord): UserRecord {
+  return {
+    id: user.id,
+    name: `${user.firstName} ${user.lastName}`.trim(),
+    email: user.email,
+    role: toUserRole(user.role),
+    status: user.isActive ? "Active" : "Inactive",
+    createdAt: formatDate(user.createdAt),
+  };
+}
+
+export function getInitials(name: string) {
+  return name
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
diff --git a/server/src/components/calendar.tsx b/server/src/components/calendar.tsx
index cb81566b..44cfe8e1 100644
--- a/server/src/components/calendar.tsx
+++ b/server/src/components/calendar.tsx
@@ -29,6 +29,12 @@ import {
 import MentorStudentTaskDetailDialog from "./mentorStudentTaskDetailDialog";
 import MentorTaskDetailDialog from "./mentorTaskDetailDialog";
 import StudentTaskDetailDialog from "./studentTaskDetailDialog";
+import CustomToolbar from "./CustomToolbar";
+
+import { useCalendarEvents } from "@/hooks/useCalendarEvents";
+import { useFormData } from "@/hooks/useFormData";
+import { useSubmission } from "@/hooks/useSubmission";
+import { useEventForDate } from "@/hooks/useEventForDate";
 
 moment.locale("en-GB");
 const localizer = momentLocalizer(moment);
@@ -75,31 +81,56 @@ interface TaskCalendarProps {
 const TaskCalendar: React.FC<TaskCalendarProps> = ({ selectedUser }) => {
   const [taskModalOpen, setTaskModalOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
-  const [workingHours, setWorkingHours] = useState<number>(0);
   const [session, setSession] = useState(null);
-  const [notes, setNotes] = useState<string>("");
-  const [review, setReview] = useState<string>("");
-  const [status, setStatus] = useState<string>("");
-  const [studentId, setStudentId] = useState<string>("");
   const [currentDate, setCurrentDate] = useState(new Date());
   const [role, setRole] = useState<string>("");
-  const [feedbackActivityId, setFeedbackActivityId] = useState<string>("");
-  const [formData, setFormData] = useState<FormData>({
-    studentId: "",
-    date: "",
-    timeSpent: 0,
-    notes: "",
-    status: "",
-    review: "",
-  });
-  const [events, setEvents] = useState<CalendarEvent[]>([]);
-  const [editingEvent, setEditingEvent] = useState<CalendarEvent | null>(null);
+  const [studentId, setStudentId] = useState<string>("");
   const [isEditable, setIsEditable] = useState(true);
   const [toast, setToast] = useState<{
     title: string;
     description: string;
   } | null>(null);
 
+  // Custom hooks
+  const { events, refetchEvents } = useCalendarEvents(studentId, role, selectedUser);
+  const {
+    formData,
+    workingHours,
+    setWorkingHours,
+    notes,
+    setNotes,
+    review,
+    setReview,
+    status,
+    setStatus,
+    editingEvent,
+    feedbackActivityId,
+    updateFormData,
+    resetFormData,
+  } = useFormData();
+  const { fetchEventForDate } = useEventForDate(role, studentId, selectedUser, updateFormData, resetFormData);
+  const { handleSubmit } = useSubmission(
+    role,
+    studentId,
+    selectedUser,
+    formData,
+    workingHours,
+    notes,
+    review,
+    status,
+    editingEvent,
+    feedbackActivityId,
+    () => {
+      refetchEvents();
+      setTaskModalOpen(false);
+      setSelectedDate(null);
+    },
+    (title, description) => {
+      setToast({ title, description });
+      setTimeout(() => setToast(null), 1000);
+    }
+  );
+
   useEffect(() => {
     getSessionOnClient()
       .then((data) => {
@@ -112,135 +143,6 @@ const TaskCalendar: React.FC<TaskCalendarProps> = ({ selectedUser }) => {
       });
   }, []);
 
-  /* 
-
-        Fetch all information related to past activities 
-
-  */
-
-  const fetchEventData = async (url: string) => {
-    try {
-      const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error("Failed to fetch event data");
-      }
-      return await response.json();
-    } catch (error) {
-      console.error(error);
-      return null;
-    }
-  };
-
-  const fetchEvents = async () => {
-    let url = `http://localhost:3000/api/activity?studentId=${studentId}`;
-
-    if (role === "mentor") {
-      url =
-        studentId === selectedUser
-          ? `http://localhost:3000/api/mentor?studentId=${selectedUser}`
-          : `http://localhost:3000/api/student?studentId=${selectedUser}`;
-    }
-
-    const data = await fetchEventData(url);
-    if (data) {
-      const parsedEvents =
-        role === "mentor"
-        ? studentId === selectedUser ?convertToCalendarEventsMentor(data)
-          :  convertToCalendarEvents(data): convertToCalendarEvents(data);
-      setEvents(parsedEvents);
-    }
-  };
-
-  useEffect(() => {
-    if (selectedUser) {
-      fetchEvents();
-    }
-  }, [selectedUser]);
-
-  /* 
-
-        Fetch all information related to past activity particularly for a date 
-
-*/
-
-  const fetchEventForDate = async (formattedDate: string) => {
-    try {
-      const url = buildUrlForRole(formattedDate);
-      const response = await fetch(url);
-      const data = await response.json();
-
-      if (data.length > 0) {
-        await processResponse(data[0], formattedDate);
-      } else {
-        resetFormData(formattedDate);
-      }
-    } catch (error) {
-      console.error("Failed to fetch event for date:", error);
-    }
-  };
-
-  const buildUrlForRole = (formattedDate: string) => {
-    if (role === "student") {
-      return `http://localhost:3000/api/activity?date=${formattedDate}`;
-    }
-    if (studentId === selectedUser) {
-      return `http://localhost:3000/api/mentor?date=${formattedDate}&studentId=${selectedUser}`;
-    }
-    return `http://localhost:3000/api/student?date=${formattedDate}&studentId=${selectedUser}`;
-  };
-
-  const processResponse = async (existingEvent: any, formattedDate: string) => {
-    if ((role === "mentor" && studentId !== selectedUser) || (role === "student")) {
-      const feedbackData = await fetchFeedback(existingEvent.id, formattedDate);
-      updateFormData(existingEvent, feedbackData, formattedDate);
-    } else {
-      updateFormData(existingEvent, null, formattedDate);
-    }
-  };
-
-  const fetchFeedback = async (activityId: string, formattedDate: string) => {
-    const feedbackResponse = await fetch(
-      `http://localhost:3000/api/mentorFeedback?date=${formattedDate}&activityId=${activityId}`
-    );
-    return await feedbackResponse.json();
-  };
-
-  const updateFormData = (
-    event: any,
-    feedbackData: any,
-    formattedDate: string
-  ) => {
-    setFormData({
-      studentId: event.studentId || "",
-      date: formattedDate,
-      timeSpent: event.timeSpent || event.workingHours || 0,
-      notes: event.notes || event.activities || "",
-      review: feedbackData?.feedbackNotes || "",
-      status: feedbackData?.status || "",
-    });
-    setWorkingHours(event.timeSpent || event.workingHours || 0);
-    setNotes(event.notes || event.activities || "");
-    setEditingEvent(event);
-    setReview(feedbackData?.feedbackNotes || "");
-    setFeedbackActivityId(event?.id || "");
-  };
-
-  const resetFormData = (formattedDate: string) => {
-    setFormData({
-      studentId: "",
-      date: formattedDate,
-      timeSpent: 0,
-      notes: "",
-      review: "",
-      status: "",
-    });
-    setWorkingHours(1);
-    setNotes("");
-    setEditingEvent(null);
-    setReview("");
-    setFeedbackActivityId("");
-  };
-
   const handleDateClick = (date: Date) => {
     setSelectedDate(date);
     const formattedDate = moment(date).format("YYYY-MM-DD");
@@ -264,157 +166,11 @@ const TaskCalendar: React.FC<TaskCalendarProps> = ({ selectedUser }) => {
   };
 
   useEffect(() => {
-    if (status === "approved") {
-      handleSubmit();
-    } else if (status === "rejected") {
+    if (status === "approved" || status === "rejected") {
       handleSubmit();
     }
   }, [status]);
 
-  /* 
-
-        Submit activity or feedback on-press 
-
-*/
-  const handleSubmit = async () => {
-    try {
-      const isStudent = role === "student";
-      const isMentor = role === "mentor";
-
-      if (isStudent) {
-        await submitActivity();
-      } else if (isMentor && selectedUser === studentId) {
-        await submitMentorActivity();
-      } else {
-        await submitFeedback();
-      }
-    } catch (error) {
-      showToast("Error", "Error saving data. Please try again.");
-    }
-  };
-
-  const submitActivity = async () => {
-    const newFormData: FormData = {
-      studentId,
-      date: formData.date,
-      timeSpent: workingHours,
-      notes,
-    };
-
-    const response = await fetch("http://localhost:3000/api/activity", {
-      method: editingEvent ? "PATCH" : "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ ...newFormData, id: editingEvent?.id }),
-    });
-
-    handleResponse(
-      response,
-      editingEvent ? "Activity Updated" : "Activity Added"
-    );
-  };
-
-  const submitMentorActivity = async () => {
-    const newFormData: MentorFormData = {
-      date: formData.date,
-      workingHours: workingHours,
-      activities: notes,
-    };
-
-    const response = await fetch("http://localhost:3000/api/mentor", {
-      method: editingEvent ? "PATCH" : "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ ...newFormData, id: editingEvent?.id }),
-    });
-
-    handleResponse(
-      response,
-      editingEvent ? "Activity Updated" : "Activity Added"
-    );
-  };
-
-  const submitFeedback = async () => {
-    const newFormFeedbackData: FeedbackData = {
-      review,
-      status,
-      mentorId: studentId,
-    };
-
-    const response = await fetch(
-      `http://localhost:3000/api/mentorFeedback?activityId=${feedbackActivityId}`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ ...newFormFeedbackData, id: editingEvent?.id }),
-      }
-    );
-
-    handleResponse(
-      response,
-      editingEvent ? "Feedback Updated" : "Feedback Added"
-    );
-  };
-
-  const handleResponse = async (response: Response, successMessage: string) => {
-    if (response.ok) {
-      showToast(
-        successMessage,
-        response.ok ? `${successMessage} successfully.` : "An error occurred."
-      );
-      fetchEvents();
-      handleClose();
-    } else {
-      showToast("Error", "Error saving data. Please try again.");
-    }
-  };
-
-  const showToast = (title: string, description: string) => {
-    setToast({ title, description });
-    setTimeout(() => setToast(null), 1000);
-  };
-
-  // Custom Toolbar
-  const CustomToolbar = (toolbar: any) => {
-    const goToBack = () => {
-      toolbar.onNavigate("PREV");
-    };
-
-    const goToNext = () => {
-      toolbar.onNavigate("NEXT");
-    };
-
-    return (
-      <div className="flex justify-between items-center mb-4">
-        <Button
-          onClick={() => {
-            setCurrentDate(moment(currentDate).subtract(1, "months").toDate());
-            goToBack();
-          }}
-          className="text-xl border-2 border-blue-500 text-blue-500 px-4 py-2 bg-white rounded-md hover:border-blue-600 hover:bg-blue-100"
-        >
-          {"<"}
-        </Button>
-        <span className="text-2xl font-bold">
-          {moment(toolbar.date).format("MMMM YYYY")}
-        </span>
-        <Button
-          onClick={() => {
-            setCurrentDate(moment(currentDate).subtract(1, "months").toDate());
-            goToNext();
-          }}
-          className="text-xl border-2 border-blue-500 text-blue-500 px-4 py-2 bg-#F0F8FF rounded-md hover:border-blue-600 hover:bg-blue-100"
-        >
-          {">"}
-        </Button>
-      </div>
-    );
-  };
-
   return (
     <>
       <ToastProvider>
@@ -477,7 +233,7 @@ const TaskCalendar: React.FC<TaskCalendarProps> = ({ selectedUser }) => {
           onSelectEvent={(event) => handleDateClick(event.start)}
           selectable
           components={{
-            toolbar: CustomToolbar,
+            toolbar: (toolbar: any) => <CustomToolbar toolbar={toolbar} currentDate={currentDate} setCurrentDate={setCurrentDate} />,
           }}
           eventPropGetter={(event) => eventPropGetter(event, selectedUser || "")} // Pass selectedUser here
           style={{height: "100%"}}
diff --git a/server/src/components/reports/ReportsFilters.tsx b/server/src/components/reports/ReportsFilters.tsx
new file mode 100644
index 00000000..07799f08
--- /dev/null
+++ b/server/src/components/reports/ReportsFilters.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import FilterBar from "@/components/admin/FilterBar";
+
+interface Props {
+  projectFilter: string;
+  mentorFilter: string;
+  dateFrom: string;
+  dateTo: string;
+  projectOptions: string[];
+  mentorOptions: string[];
+  onProjectChange: (value: string) => void;
+  onMentorChange: (value: string) => void;
+  onDateFromChange: (value: string) => void;
+  onDateToChange: (value: string) => void;
+  onReset: () => void;
+}
+
+// Filter bar for reports — uses shared FilterBar compound component
+export function ReportsFilters({
+  projectFilter,
+  mentorFilter,
+  dateFrom,
+  dateTo,
+  projectOptions,
+  mentorOptions,
+  onProjectChange,
+  onMentorChange,
+  onDateFromChange,
+  onDateToChange,
+  onReset,
+}: Props) {
+  return (
+    <FilterBar>
+      <FilterBar.Field label="Project">
+        <Select value={projectFilter} onValueChange={onProjectChange}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="All Projects" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Projects</SelectItem>
+            {projectOptions.map((project) => (
+              <SelectItem key={project} value={project}>
+                {project}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </FilterBar.Field>
+      <FilterBar.Field label="Mentor">
+        <Select value={mentorFilter} onValueChange={onMentorChange}>
+          <SelectTrigger className="w-[160px]">
+            <SelectValue placeholder="Select Mentor" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All Mentors</SelectItem>
+            {mentorOptions.map((mentor) => (
+              <SelectItem key={mentor} value={mentor}>
+                {mentor}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </FilterBar.Field>
+      <FilterBar.Field label="From">
+        <input
+          type="date"
+          value={dateFrom}
+          max={dateTo || undefined}
+          onChange={(e) => onDateFromChange(e.target.value)}
+          className="h-8 rounded-lg border border-[#dbe0e8] bg-white px-3 text-sm text-slate-700 outline-none focus:border-slate-400"
+        />
+      </FilterBar.Field>
+      <FilterBar.Field label="To">
+        <input
+          type="date"
+          value={dateTo}
+          min={dateFrom || undefined}
+          onChange={(e) => onDateToChange(e.target.value)}
+          className="h-8 rounded-lg border border-[#dbe0e8] bg-white px-3 text-sm text-slate-700 outline-none focus:border-slate-400"
+        />
+      </FilterBar.Field>
+      <Button
+        variant="ghost"
+        className="self-end text-[#737373] hover:text-[#0A0A0A]"
+        onClick={onReset}
+      >
+        Reset
+      </Button>
+    </FilterBar>
+  );
+}
diff --git a/server/src/components/reports/ReportsStatCards.tsx b/server/src/components/reports/ReportsStatCards.tsx
new file mode 100644
index 00000000..fe0c28d4
--- /dev/null
+++ b/server/src/components/reports/ReportsStatCards.tsx
@@ -0,0 +1,42 @@
+import { CheckCircle, Clock, FileText } from "lucide-react";
+
+interface Props {
+  totalGenerated: number;
+  pendingReports: number;
+  completedReports: number;
+}
+
+// Three summary stat cards- total, pending, and completed reports
+export function ReportsStatCards({
+  totalGenerated,
+  pendingReports,
+  completedReports,
+}: Props) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
+        <div>
+          <p className="text-sm text-[#737373]">Total Generated</p>
+          <p className="text-3xl font-bold text-[#0A0A0A]">{totalGenerated}</p>
+        </div>
+        <FileText className="text-[#737373]" size={28} />
+      </div>
+      <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
+        <div>
+          <p className="text-sm text-[#737373]">Pending Reports</p>
+          <p className="text-3xl font-bold text-[#0A0A0A]">{pendingReports}</p>
+        </div>
+        <Clock className="text-yellow-500" size={28} />
+      </div>
+      <div className="flex items-center justify-between rounded-xl border border-[#E5E5E5] bg-[#fafafa] p-5">
+        <div>
+          <p className="text-sm text-[#737373]">Completed Reports</p>
+          <p className="text-3xl font-bold text-[#0A0A0A]">
+            {completedReports}
+          </p>
+        </div>
+        <CheckCircle className="text-green-500" size={28} />
+      </div>
+    </div>
+  );
+}
diff --git a/server/src/components/reports/ReportsTable.tsx b/server/src/components/reports/ReportsTable.tsx
new file mode 100644
index 00000000..f8e64e7e
--- /dev/null
+++ b/server/src/components/reports/ReportsTable.tsx
@@ -0,0 +1,124 @@
+import {
+  BarChart2,
+  BookOpen,
+  Briefcase,
+  Cpu,
+  FolderOpen,
+  GraduationCap,
+  Layers,
+  Monitor,
+  Palette,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import TableStateRows from "@/components/admin/TableStateRows";
+
+import { ReportRow } from "./types";
+
+interface IconConfig {
+  Icon: LucideIcon;
+  bg: string;
+  color: string;
+}
+
+// Maps keywords in the project name to an appropriate icon (all use grey styling)
+function getProjectIcon(name: string): IconConfig {
+  const lower = name.toLowerCase();
+  if (/ui|ux|design|figma|visual/.test(lower))
+    return { Icon: Palette, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/train|learn|educat|course|portal/.test(lower))
+    return { Icon: BookOpen, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/logbook|log|digital|mvp|app/.test(lower))
+    return { Icon: Cpu, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/data|analytic|report|metric|stat/.test(lower))
+    return { Icon: BarChart2, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/mentor|coach|guide/.test(lower))
+    return { Icon: Users, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/student|grad|school|academ/.test(lower))
+    return { Icon: GraduationCap, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/web|site|platform/.test(lower))
+    return { Icon: Monitor, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/system|infra|layer|stack/.test(lower))
+    return { Icon: Layers, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  if (/business|enterprise|client|work/.test(lower))
+    return { Icon: Briefcase, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+  // Default fallback
+  return { Icon: FolderOpen, bg: "bg-[#f0f0f0]", color: "text-[#737373]" };
+}
+
+interface Props {
+  isLoading: boolean;
+  fetchError: string | null;
+  visibleReports: ReportRow[];
+}
+
+// Renders the report rows for the current page
+export function ReportsTable({ isLoading, fetchError, visibleReports }: Props) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow className="bg-[#f8fafc] hover:bg-[#f8fafc]">
+          <TableHead className="text-xs font-bold uppercase text-[#737373]">
+            Project Name
+          </TableHead>
+          <TableHead className="text-xs font-bold uppercase text-[#737373]">
+            Mentor
+          </TableHead>
+          <TableHead className="text-xs font-bold uppercase text-[#737373]">
+            Students Count
+          </TableHead>
+          <TableHead className="text-xs font-bold uppercase text-[#737373]">
+            Date
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableStateRows
+          colSpan={4}
+          loading={isLoading}
+          error={fetchError}
+          empty={visibleReports.length === 0}
+          loadingMessage="Loading reports..."
+          emptyMessage="No reports found for the selected filters."
+        />
+        {!isLoading &&
+          !fetchError &&
+          visibleReports.map((report) => {
+            const { Icon, bg, color } = getProjectIcon(report.projectName);
+            return (
+              <TableRow key={report.id} className="hover:bg-[#F5F5F5]">
+                <TableCell>
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg ${bg}`}
+                    >
+                      <Icon className={`h-4 w-4 ${color}`} />
+                    </div>
+                    <span className="font-semibold text-[#0A0A0A]">
+                      {report.projectName}
+                    </span>
+                  </div>
+                </TableCell>
+                <TableCell className="text-[#0A0A0A]">
+                  {report.mentor}
+                </TableCell>
+                <TableCell className="text-[#0A0A0A]">
+                  {report.studentsCount}
+                </TableCell>
+                <TableCell className="text-[#737373]">{report.date}</TableCell>
+              </TableRow>
+            );
+          })}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/server/src/components/reports/types.ts b/server/src/components/reports/types.ts
new file mode 100644
index 00000000..25143efb
--- /dev/null
+++ b/server/src/components/reports/types.ts
@@ -0,0 +1,32 @@
+// Shape of a single report row returned from the API
+export interface ReportRow {
+  id: string;
+  projectName: string;
+  mentor: string;
+  studentsCount: number;
+  date: string;
+  rawDate: string;
+}
+
+export const ITEMS_PER_PAGE = 5;
+
+// Formats an date string for display
+export function formatDisplayDate(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "2-digit",
+    year: "numeric",
+  });
+}
+
+// Formats an date string to input comparison
+export function formatInputDate(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
diff --git a/server/src/components/reports/useGeneratePDF.ts b/server/src/components/reports/useGeneratePDF.ts
new file mode 100644
index 00000000..b2ee25e7
--- /dev/null
+++ b/server/src/components/reports/useGeneratePDF.ts
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+
+import { ReportRow } from "./types";
+
+// Hook that builds and downloads a PDF
+export function useGeneratePDF(
+  filteredReports: ReportRow[],
+  dateFrom: string,
+  dateTo: string,
+) {
+  const [isExporting, setIsExporting] = useState(false);
+
+  const generatePDF = async () => {
+    setIsExporting(true);
+    try {
+      const jsPDFModule = await import("jspdf");
+      const jsPDF = jsPDFModule.default;
+      const doc = new jsPDF({ unit: "pt", format: "a4" });
+      const margin = 40;
+      let y = 50;
+
+      // Header banner
+      doc.setFillColor(6, 78, 124);
+      doc.rect(0, 0, 595, 110, "F");
+      doc.setFillColor(12, 112, 162);
+      doc.rect(0, 70, 595, 40, "F");
+      doc.setTextColor(255, 255, 255);
+      doc.setFontSize(20);
+      doc.setFont("helvetica", "bold");
+      doc.text("LOGBOOK MENTORSHIP OS", margin, 36);
+      doc.setFontSize(14);
+      doc.setFont("helvetica", "normal");
+      doc.text("Project Reports", margin, 58);
+      doc.setFontSize(9);
+      doc.text(`Generated at: ${new Date().toLocaleString()}`, margin, 74);
+      doc.text("Project Name · Mentor · Students Count · Date", margin, 88);
+      doc.setTextColor(0, 0, 0);
+
+      y = 128;
+      doc.setDrawColor(220);
+      doc.line(margin, y, 555, y);
+      y += 16;
+
+      // Summary row
+      doc.setFontSize(10);
+      doc.setFont("helvetica", "normal");
+      doc.text(`Total rows exported: ${filteredReports.length}`, margin, y);
+      if (dateFrom || dateTo) {
+        const range = [
+          dateFrom && `From: ${dateFrom}`,
+          dateTo && `To: ${dateTo}`,
+        ]
+          .filter(Boolean)
+          .join("   ");
+        doc.text(range, margin + 200, y);
+      }
+      y += 20;
+
+      // Table header
+      const colX = {
+        project: margin,
+        mentor: margin + 180,
+        students: margin + 360,
+        date: margin + 440,
+      };
+      doc.setFillColor(247, 248, 250);
+      doc.rect(margin, y - 10, 515, 18, "F");
+      doc.setFontSize(9);
+      doc.setFont("helvetica", "bold");
+      doc.setTextColor(55, 65, 81);
+      doc.text("PROJECT NAME", colX.project + 3, y);
+      doc.text("MENTOR", colX.mentor, y);
+      doc.text("STUDENTS", colX.students, y);
+      doc.text("DATE", colX.date, y);
+      y += 14;
+      doc.setDrawColor(220);
+      doc.line(margin, y, 555, y);
+      y += 6;
+
+      // Table rows
+      doc.setFont("helvetica", "normal");
+      doc.setFontSize(9);
+      let rowIndex = 0;
+      for (const row of filteredReports) {
+        if (y > 760) {
+          doc.addPage();
+          y = 50;
+        }
+        if (rowIndex % 2 === 0) {
+          doc.setFillColor(249, 250, 251);
+          doc.rect(margin, y - 9, 515, 14, "F");
+        }
+        doc.setTextColor(15, 23, 42);
+        const projectText =
+          row.projectName.length > 28
+            ? row.projectName.slice(0, 25) + "..."
+            : row.projectName;
+        const mentorText =
+          row.mentor.length > 20 ? row.mentor.slice(0, 17) + "..." : row.mentor;
+        doc.text(projectText, colX.project + 3, y);
+        doc.text(mentorText, colX.mentor, y);
+        doc.text(String(row.studentsCount), colX.students + 20, y);
+        doc.text(row.date, colX.date, y);
+        y += 14;
+        rowIndex++;
+      }
+
+      doc.save(`project-reports-${new Date().toISOString().slice(0, 10)}.pdf`);
+    } catch (err) {
+      console.error("PDF generation error", err);
+      alert("Unable to generate PDF. Please try again.");
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  return { isExporting, generatePDF };
+}
diff --git a/server/src/components/reports/useReportsData.ts b/server/src/components/reports/useReportsData.ts
new file mode 100644
index 00000000..e25832d4
--- /dev/null
+++ b/server/src/components/reports/useReportsData.ts
@@ -0,0 +1,57 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { formatDisplayDate, type ReportRow } from "./types";
+
+// Fetches report rows from the API and formats dates for display
+export function useReportsData() {
+  const [tableRows, setTableRows] = useState<ReportRow[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const loadData = async () => {
+      setIsLoading(true);
+      setFetchError(null);
+      try {
+        const res = await fetch("/api/admin/reports", { cache: "no-store" });
+        if (!res.ok) {
+          const payload = await res
+            .json()
+            .catch(() => ({ message: "Failed to fetch project data" }));
+          throw new Error(payload.message ?? "Failed to fetch project data");
+        }
+        const data = (await res.json()) as ReportRow[];
+        if (!mounted) return;
+        setTableRows(
+          Array.isArray(data)
+            ? data.map((row) => ({
+                ...row,
+                date: formatDisplayDate(row.rawDate),
+              }))
+            : [],
+        );
+      } catch (error) {
+        if (!mounted) return;
+        setTableRows([]);
+        setFetchError(
+          error instanceof Error
+            ? error.message
+            : "Failed to fetch project data",
+        );
+      } finally {
+        if (mounted) setIsLoading(false);
+      }
+    };
+
+    loadData();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  return { tableRows, isLoading, fetchError };
+}
diff --git a/server/src/components/reports/useReportsFilters.ts b/server/src/components/reports/useReportsFilters.ts
new file mode 100644
index 00000000..341ec128
--- /dev/null
+++ b/server/src/components/reports/useReportsFilters.ts
@@ -0,0 +1,94 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+import { formatInputDate, ITEMS_PER_PAGE, type ReportRow } from "./types";
+
+// Manages all filter state
+export function useReportsFilters(tableRows: ReportRow[]) {
+  const [page, setPage] = useState(1);
+  const [projectFilter, setProjectFilter] = useState("all");
+  const [mentorFilter, setMentorFilter] = useState("all");
+  const [dateFrom, setDateFrom] = useState("");
+  const [dateTo, setDateTo] = useState("");
+
+  // Unique, sorted options for the project
+  const projectOptions = useMemo(
+    () =>
+      Array.from(new Set(tableRows.map((r) => r.projectName))).sort((a, b) =>
+        a.localeCompare(b),
+      ),
+    [tableRows],
+  );
+  const mentorOptions = useMemo(
+    () =>
+      Array.from(new Set(tableRows.map((r) => r.mentor))).sort((a, b) =>
+        a.localeCompare(b),
+      ),
+    [tableRows],
+  );
+
+  // Apply all active filters to produce the visible subset
+  const filteredReports = useMemo(
+    () =>
+      tableRows.filter((row) => {
+        const rowDate = formatInputDate(row.rawDate);
+        return (
+          (projectFilter === "all" || row.projectName === projectFilter) &&
+          (mentorFilter === "all" || row.mentor === mentorFilter) &&
+          (dateFrom.length === 0 || rowDate >= dateFrom) &&
+          (dateTo.length === 0 || rowDate <= dateTo)
+        );
+      }),
+    [dateFrom, dateTo, mentorFilter, projectFilter, tableRows],
+  );
+
+  // Pagination derived values
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredReports.length / ITEMS_PER_PAGE),
+  );
+  const safePage = Math.min(page, totalPages);
+  const startIndex = (safePage - 1) * ITEMS_PER_PAGE;
+  const visibleReports = filteredReports.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE,
+  );
+  const startCount = filteredReports.length === 0 ? 0 : startIndex + 1;
+  const endCount = Math.min(
+    startIndex + ITEMS_PER_PAGE,
+    filteredReports.length,
+  );
+
+  const resetFilters = () => {
+    setProjectFilter("all");
+    setMentorFilter("all");
+    setDateFrom("");
+    setDateTo("");
+    setPage(1);
+  };
+
+  return {
+    // Filter state & setters
+    projectFilter,
+    mentorFilter,
+    dateFrom,
+    dateTo,
+    setProjectFilter,
+    setMentorFilter,
+    setDateFrom,
+    setDateTo,
+    resetFilters,
+    // Dropdown options
+    projectOptions,
+    mentorOptions,
+    // Paginated data
+    filteredReports,
+    visibleReports,
+    safePage,
+    totalPages,
+    startCount,
+    endCount,
+    setPage,
+  };
+}
diff --git a/server/src/components/ui/button.tsx b/server/src/components/ui/button.tsx
index a0b90b8d..65d4fcd9 100644
--- a/server/src/components/ui/button.tsx
+++ b/server/src/components/ui/button.tsx
@@ -1,33 +1,30 @@
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
-        blue: "bg-[#0000FF] text-white hover:bg-[#0000CC]",
-        blueContrast: "bg-[#0a1262] text-white hover:bg-[#206699]", // Darker blue
-        tealContrast: "bg-[#2A9D8F] text-white hover:bg-[#1B6F65]", // Teal
-        navyContrast: "bg-[#1B3A5B] text-white hover:bg-[#142B44]", // Soft Navy
-
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
@@ -35,26 +32,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-);
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
+    )
   }
-);
-Button.displayName = "Button";
+)
+Button.displayName = "Button"
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/server/src/components/ui/dropdown-menu.tsx b/server/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..5a20503b
--- /dev/null
+++ b/server/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/server/src/components/ui/input.tsx b/server/src/components/ui/input.tsx
index 4a8b39c4..69b64fb2 100644
--- a/server/src/components/ui/input.tsx
+++ b/server/src/components/ui/input.tsx
@@ -1,41 +1,16 @@
 import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const inputVariants = cva(
-  "block w-full rounded-md border shadow-sm transition focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed",
-  {
-    variants: {
-      variant: {
-        default: "border-blue-300 bg-white text-gray-900",
-        outline: "border border-input bg-transparent hover:border-accent",
-        ghost: "border-none bg-transparent focus:ring-0",
-      },
-      inputSize: {  // Renamed 'size' to 'inputSize' to avoid collision
-        sm: "px-2 py-1 text-sm",
-        default: "px-3 py-2 text-base",
-        lg: "px-4 py-3 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      inputSize: "default",
-    },
-  }
-)
-
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement>,
-    VariantProps<typeof inputVariants> {
-  // No additional properties needed
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, variant, inputSize, ...props }, ref) => {  // Use 'inputSize' instead of 'size'
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
     return (
       <input
-        className={cn(inputVariants({ variant, inputSize, className }))}
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
         ref={ref}
         {...props}
       />
@@ -44,4 +19,4 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 )
 Input.displayName = "Input"
 
-export { Input, inputVariants }
+export { Input }
diff --git a/server/src/components/ui/separator.tsx b/server/src/components/ui/separator.tsx
new file mode 100644
index 00000000..12d81c4a
--- /dev/null
+++ b/server/src/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
diff --git a/server/src/components/ui/sheet.tsx b/server/src/components/ui/sheet.tsx
new file mode 100644
index 00000000..272cb721
--- /dev/null
+++ b/server/src/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
diff --git a/server/src/components/ui/sidebar.tsx b/server/src/components/ui/sidebar.tsx
new file mode 100644
index 00000000..5158ed50
--- /dev/null
+++ b/server/src/components/ui/sidebar.tsx
@@ -0,0 +1,773 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { PanelLeft } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === "function" ? value(open) : value
+        if (setOpenProp) {
+          setOpenProp(openState)
+        } else {
+          _setOpen(openState)
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener("keydown", handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? "expanded" : "collapsed"
+
+    const contextValue = React.useMemo<SidebarContextProps>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = "SidebarProvider"
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right"
+    variant?: "sidebar" | "floating" | "inset"
+    collapsible?: "offcanvas" | "icon" | "none"
+  }
+>(
+  (
+    {
+      side = "left",
+      variant = "sidebar",
+      collapsible = "offcanvas",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === "none") {
+      return (
+        <div
+          className={cn(
+            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            style={
+              {
+                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <SheetHeader className="sr-only">
+              <SheetTitle>Sidebar</SheetTitle>
+              <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+            </SheetHeader>
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="group peer hidden text-sidebar-foreground md:block"
+        data-state={state}
+        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            "group-data-[collapsible=offcanvas]:w-0",
+            "group-data-[side=right]:rotate-180",
+            variant === "floating" || variant === "inset"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+          )}
+        />
+        <div
+          className={cn(
+            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            side === "left"
+              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+            // Adjust the padding for floating and inset variants.
+            variant === "floating" || variant === "inset"
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = "Sidebar"
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = "SidebarRail"
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = "SidebarInset"
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = "SidebarInput"
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = "SidebarSeparator"
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = "SidebarGroupAction"
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn("w-full text-sm", className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = "SidebarMenu"
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn("group/menu-item relative", className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = "SidebarMenuItem"
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = "default",
+      size = "default",
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : "button"
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === "string") {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== "collapsed" || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = "SidebarMenuButton"
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = "SidebarMenuAction"
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+      "peer-data-[size=sm]/menu-button:top-1",
+      "peer-data-[size=default]/menu-button:top-1.5",
+      "peer-data-[size=lg]/menu-button:top-2.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = "SidebarMenuBadge"
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "group-data-[collapsible=icon]:hidden",
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = "SidebarMenuSub"
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean
+    size?: "sm" | "md"
+    isActive?: boolean
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/server/src/components/ui/skeleton.tsx b/server/src/components/ui/skeleton.tsx
new file mode 100644
index 00000000..d7e45f7b
--- /dev/null
+++ b/server/src/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/server/src/components/ui/tooltip.tsx b/server/src/components/ui/tooltip.tsx
new file mode 100644
index 00000000..28e19183
--- /dev/null
+++ b/server/src/components/ui/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/server/src/hooks/admin/useCompleteRegistration.ts b/server/src/hooks/admin/useCompleteRegistration.ts
new file mode 100644
index 00000000..5091bc55
--- /dev/null
+++ b/server/src/hooks/admin/useCompleteRegistration.ts
@@ -0,0 +1,47 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { useRouter } from "next/navigation";
+import { toast } from "react-hot-toast";
+
+interface CompleteRegistrationPayload {
+  email: string;
+  token: string;
+  tempPassword: string;
+  newPassword: string;
+}
+
+interface CompleteRegistrationResponse {
+  success: boolean;
+  role: string;
+}
+
+export const useCompleteRegistration = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (payload: CompleteRegistrationPayload) => {
+      const res = await fetch("/api/complete-registration", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.error || "Failed to complete registration");
+      }
+
+      return data as CompleteRegistrationResponse;
+    },
+    onSuccess: (_, variables) => {
+      toast.success(
+        "Account created successfully! Please login with your new password.",
+      );
+      router.push(`/login?email=${encodeURIComponent(variables.email)}`);
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || "Something went wrong");
+    },
+  });
+};
diff --git a/server/src/hooks/admin/useInvitation.ts b/server/src/hooks/admin/useInvitation.ts
index d83a7d07..f7a9ffb6 100644
--- a/server/src/hooks/admin/useInvitation.ts
+++ b/server/src/hooks/admin/useInvitation.ts
@@ -24,6 +24,13 @@ interface InvitationResponse {
   };
 }
 
+interface GetInvitationResponse {
+  valid: boolean;
+  email?: string;
+  role?: string;
+  message?: string;
+}
+
 export const useInvitation = () => {
   const queryClient = useQueryClient();
 
@@ -93,7 +100,11 @@ export const useExpireInvitation = () => {
 export const useChangeInvitationStatus = () => {
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, { id: string; status: "Accepted" | "Pending" | "Expired" }>({
+  return useMutation<
+    void,
+    Error,
+    { id: string; status: "Accepted" | "Pending" | "Expired" }
+  >({
     mutationFn: async ({ id, status }) => {
       const res = await fetch("/api/invitations", {
         method: "PATCH",
@@ -102,7 +113,9 @@ export const useChangeInvitationStatus = () => {
       });
       if (!res.ok) {
         const errorData = await res.json();
-        throw new Error(errorData.message || "Failed to update invitation status");
+        throw new Error(
+          errorData.message || "Failed to update invitation status",
+        );
       }
     },
     onSuccess: () => {
@@ -120,7 +133,9 @@ export const useDeleteInvitation = () => {
 
   return useMutation<void, Error, { id: string }>({
     mutationFn: async ({ id }) => {
-      const res = await fetch(`/api/invitations?id=${id}`, { method: "DELETE" });
+      const res = await fetch(`/api/invitations?id=${id}`, {
+        method: "DELETE",
+      });
       if (!res.ok) {
         const errorData = await res.json();
         throw new Error(errorData.message || "Failed to delete invitation");
@@ -146,4 +161,29 @@ export const useValidateInvitation = (token: string) => {
     },
     enabled: !!token,
   });
-};
\ No newline at end of file
+};
+
+export const useGetInvitation = (token: string | null) => {
+  const query = useQuery<InvitationResponse, Error>({
+    queryKey: ["invitation", token],
+    queryFn: async () => {
+      if (!token) throw new Error("Token is required");
+
+      const res = await fetch(`/api/invitations?token=${token}`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        toast.error("Failed to fetch invitation");
+        throw new Error(errorData.message || "Failed to fetch invitation");
+      }
+
+      return res.json();
+    },
+    enabled: !!token, // Only runs when token exists
+  });
+
+  return query;
+};
diff --git a/server/src/hooks/projects/index.ts b/server/src/hooks/projects/index.ts
new file mode 100644
index 00000000..77bae912
--- /dev/null
+++ b/server/src/hooks/projects/index.ts
@@ -0,0 +1,9 @@
+export {
+  useCreateProject,
+  useAssignToProject,
+  useRemoveFromProject,
+  useGetProjects,
+  useGetProject,
+  useGetProjectStudents,
+  useGetProjectMentors,
+} from "./useProject";
diff --git a/server/src/hooks/projects/useProject.ts b/server/src/hooks/projects/useProject.ts
new file mode 100644
index 00000000..57352ccb
--- /dev/null
+++ b/server/src/hooks/projects/useProject.ts
@@ -0,0 +1,262 @@
+"use client";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { toast } from "sonner";
+
+// ============ Types ============
+
+interface CreateProjectRequest {
+  name: string;
+  description?: string;
+  domain: string;
+}
+
+interface CreateProjectResponse {
+  success: boolean;
+  message: string;
+  data: {
+    id: string;
+    name: string;
+    description: string | null;
+    domain: string;
+    createdBy: string;
+    createdAt: string;
+    updatedAt: string;
+  };
+}
+
+interface AssignToProjectRequest {
+  projectId: string;
+  studentId?: string;
+  mentorId?: string;
+}
+
+interface AssignToProjectResponse {
+  success: boolean;
+  message: string;
+}
+
+interface RemoveFromProjectRequest {
+  projectId: string;
+  studentId?: string;
+  mentorId?: string;
+}
+
+interface RemoveFromProjectResponse {
+  success: boolean;
+  message: string;
+}
+
+interface Project {
+  id: string;
+  name: string;
+  description: string | null;
+  domain: string;
+  createdBy: string;
+  createdAt: string;
+  updatedAt: string;
+  studentCount?: number;
+  mentorCount?: number;
+}
+
+interface ProjectWithDetails extends Project {
+  students?: Array<any>;
+  mentors?: Array<any>;
+}
+
+// ============ Create Project Hook ============
+
+export const useCreateProject = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation<
+    CreateProjectResponse,
+    Error,
+    CreateProjectRequest
+  >({
+    mutationFn: async (data) => {
+      const res = await fetch("/api/project", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to create project");
+      }
+
+      return res.json();
+    },
+    onSuccess: () => {
+      toast.success("Project created successfully!");
+      // Invalidate project list queries
+      queryClient.invalidateQueries({ queryKey: ["projects"] });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to create project");
+    },
+  });
+
+  return mutation;
+};
+
+// ============ Assign to Project Hook ============
+
+export const useAssignToProject = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation<
+    AssignToProjectResponse,
+    Error,
+    AssignToProjectRequest
+  >({
+    mutationFn: async (data) => {
+      const res = await fetch("/api/project", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to assign to project");
+      }
+
+      return res.json();
+    },
+    onSuccess: (_, variables) => {
+      const assignType = variables.studentId ? "Student" : "Mentor";
+      toast.success(`${assignType} assigned successfully!`);
+
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: ["projects"] });
+      queryClient.invalidateQueries({
+        queryKey: ["project", variables.projectId],
+      });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to assign to project");
+    },
+  });
+
+  return mutation;
+};
+
+// ============ Remove from Project Hook ============
+
+export const useRemoveFromProject = () => {
+  const queryClient = useQueryClient();
+
+  const mutation = useMutation<
+    RemoveFromProjectResponse,
+    Error,
+    RemoveFromProjectRequest
+  >({
+    mutationFn: async (data) => {
+      const res = await fetch("/api/project", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Failed to remove from project");
+      }
+
+      return res.json();
+    },
+    onSuccess: (_, variables) => {
+      const removeType = variables.studentId ? "Student" : "Mentor";
+      toast.success(`${removeType} removed successfully!`);
+
+      // Invalidate relevant queries
+      queryClient.invalidateQueries({ queryKey: ["projects"] });
+      queryClient.invalidateQueries({
+        queryKey: ["project", variables.projectId],
+      });
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to remove from project");
+    },
+  });
+
+  return mutation;
+};
+
+// ============ Get All Projects Hook ============
+
+export const useGetProjects = () => {
+  return useQuery<Project[], Error>({
+    queryKey: ["projects"],
+    queryFn: async () => {
+      const res = await fetch("/api/project");
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to fetch projects");
+      }
+
+      return res.json();
+    },
+  });
+};
+
+// ============ Get Single Project Hook ============
+
+export const useGetProject = (projectId: string | null) => {
+  return useQuery<ProjectWithDetails, Error>({
+    queryKey: ["project", projectId],
+    queryFn: async () => {
+      const res = await fetch(`/api/project?id=${projectId}`);
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to fetch project");
+      }
+
+      return res.json();
+    },
+    enabled: !!projectId, // Only run query if projectId is provided
+  });
+};
+
+// ============ Get Project Students Hook ============
+
+export const useGetProjectStudents = (projectId: string | null) => {
+  return useQuery<any[], Error>({
+    queryKey: ["project", projectId, "students"],
+    queryFn: async () => {
+      const res = await fetch(`/api/project?id=${projectId}&view=students`);
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to fetch students");
+      }
+
+      return res.json();
+    },
+    enabled: !!projectId,
+  });
+};
+
+// ============ Get Project Mentors Hook ============
+
+export const useGetProjectMentors = (projectId: string | null) => {
+  return useQuery<any[], Error>({
+    queryKey: ["project", projectId, "mentors"],
+    queryFn: async () => {
+      const res = await fetch(`/api/project?id=${projectId}&view=mentors`);
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to fetch mentors");
+      }
+
+      return res.json();
+    },
+    enabled: !!projectId,
+  });
+};
diff --git a/server/src/hooks/use-mobile.tsx b/server/src/hooks/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/server/src/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}
diff --git a/server/src/hooks/useCalendarEvents.ts b/server/src/hooks/useCalendarEvents.ts
new file mode 100644
index 00000000..a45a09e7
--- /dev/null
+++ b/server/src/hooks/useCalendarEvents.ts
@@ -0,0 +1,66 @@
+import { useState, useEffect } from 'react';
+import {
+  convertToCalendarEvents,
+  convertToCalendarEventsMentor,
+} from '@/lib/calenderUtils';
+
+interface CalendarEvent {
+  id: string;
+  title: string;
+  start: Date;
+  end: Date;
+  allDay?: boolean;
+  color?: string;
+  createdAt: Date;
+  studentId: string;
+  timeSpent?: number;
+  notes?: string;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+export const useCalendarEvents = (studentId: string, role: string, selectedUser: string) => {
+  const [events, setEvents] = useState<CalendarEvent[]>([]);
+
+  const fetchEventData = async (url: string) => {
+    try {
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error('Failed to fetch event data');
+      }
+      return await response.json();
+    } catch (error) {
+      console.error(error);
+      return null;
+    }
+  };
+
+  const fetchEvents = async () => {
+    let url = `http://localhost:3000/api/activity?studentId=${studentId}`;
+
+    if (role === 'mentor') {
+      url =
+        studentId === selectedUser
+          ? `http://localhost:3000/api/mentor?studentId=${selectedUser}`
+          : `http://localhost:3000/api/student?studentId=${selectedUser}`;
+    }
+
+    const data = await fetchEventData(url);
+    if (data) {
+      const parsedEvents =
+        role === 'mentor'
+          ? studentId === selectedUser
+            ? convertToCalendarEventsMentor(data)
+            : convertToCalendarEvents(data)
+          : convertToCalendarEvents(data);
+      setEvents(parsedEvents);
+    }
+  };
+
+  useEffect(() => {
+    if (selectedUser) {
+      fetchEvents();
+    }
+  }, [selectedUser, studentId, role]);
+
+  return { events, refetchEvents: fetchEvents };
+};
\ No newline at end of file
diff --git a/server/src/hooks/useEventForDate.ts b/server/src/hooks/useEventForDate.ts
new file mode 100644
index 00000000..c86765ef
--- /dev/null
+++ b/server/src/hooks/useEventForDate.ts
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+
+export const useEventForDate = (
+  role: string,
+  studentId: string,
+  selectedUser: string,
+  updateFormData: (event: any, feedbackData: any, formattedDate: string) => void,
+  resetFormData: (formattedDate: string) => void
+) => {
+  const fetchEventForDate = async (formattedDate: string) => {
+    try {
+      const url = buildUrlForRole(formattedDate);
+      const response = await fetch(url);
+      const data = await response.json();
+
+      if (data.length > 0) {
+        await processResponse(data[0], formattedDate);
+      } else {
+        resetFormData(formattedDate);
+      }
+    } catch (error) {
+      console.error('Failed to fetch event for date:', error);
+    }
+  };
+
+  const buildUrlForRole = (formattedDate: string) => {
+    if (role === 'student') {
+      return `http://localhost:3000/api/activity?date=${formattedDate}`;
+    }
+    if (studentId === selectedUser) {
+      return `http://localhost:3000/api/mentor?date=${formattedDate}&studentId=${selectedUser}`;
+    }
+    return `http://localhost:3000/api/student?date=${formattedDate}&studentId=${selectedUser}`;
+  };
+
+  const processResponse = async (existingEvent: any, formattedDate: string) => {
+    if ((role === 'mentor' && studentId !== selectedUser) || (role === 'student')) {
+      const feedbackData = await fetchFeedback(existingEvent.id, formattedDate);
+      updateFormData(existingEvent, feedbackData, formattedDate);
+    } else {
+      updateFormData(existingEvent, null, formattedDate);
+    }
+  };
+
+  const fetchFeedback = async (activityId: string, formattedDate: string) => {
+    const feedbackResponse = await fetch(
+      `http://localhost:3000/api/mentorFeedback?date=${formattedDate}&activityId=${activityId}`
+    );
+    return await feedbackResponse.json();
+  };
+
+  return { fetchEventForDate };
+};
\ No newline at end of file
diff --git a/server/src/hooks/useFormData.ts b/server/src/hooks/useFormData.ts
new file mode 100644
index 00000000..916f2fc4
--- /dev/null
+++ b/server/src/hooks/useFormData.ts
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+
+interface FormData {
+  studentId: string;
+  date: string;
+  timeSpent: number;
+  notes?: string;
+  status?: string;
+  review?: string;
+}
+
+interface FeedbackData {
+  review: string;
+  status: string;
+  mentorId: string;
+}
+
+interface MentorFormData {
+  date: string;
+  workingHours: number;
+  activities: string;
+}
+
+export const useFormData = () => {
+  const [formData, setFormData] = useState<FormData>({
+    studentId: '',
+    date: '',
+    timeSpent: 0,
+    notes: '',
+    status: '',
+    review: '',
+  });
+  const [workingHours, setWorkingHours] = useState<number>(0);
+  const [notes, setNotes] = useState<string>('');
+  const [review, setReview] = useState<string>('');
+  const [status, setStatus] = useState<string>('');
+  const [editingEvent, setEditingEvent] = useState<any>(null);
+  const [feedbackActivityId, setFeedbackActivityId] = useState<string>('');
+
+  const updateFormData = (
+    event: any,
+    feedbackData: any,
+    formattedDate: string
+  ) => {
+    setFormData({
+      studentId: event.studentId || '',
+      date: formattedDate,
+      timeSpent: event.timeSpent || event.workingHours || 0,
+      notes: event.notes || event.activities || '',
+      review: feedbackData?.feedbackNotes || '',
+      status: feedbackData?.status || '',
+    });
+    setWorkingHours(event.timeSpent || event.workingHours || 0);
+    setNotes(event.notes || event.activities || '');
+    setEditingEvent(event);
+    setReview(feedbackData?.feedbackNotes || '');
+    setFeedbackActivityId(event?.id || '');
+  };
+
+  const resetFormData = (formattedDate: string) => {
+    setFormData({
+      studentId: '',
+      date: formattedDate,
+      timeSpent: 0,
+      notes: '',
+      review: '',
+      status: '',
+    });
+    setWorkingHours(1);
+    setNotes('');
+    setEditingEvent(null);
+    setReview('');
+    setFeedbackActivityId('');
+  };
+
+  return {
+    formData,
+    workingHours,
+    setWorkingHours,
+    notes,
+    setNotes,
+    review,
+    setReview,
+    status,
+    setStatus,
+    editingEvent,
+    feedbackActivityId,
+    updateFormData,
+    resetFormData,
+  };
+};
\ No newline at end of file
diff --git a/server/src/hooks/useSubmission.ts b/server/src/hooks/useSubmission.ts
new file mode 100644
index 00000000..2b3c702f
--- /dev/null
+++ b/server/src/hooks/useSubmission.ts
@@ -0,0 +1,142 @@
+import { useState } from 'react';
+
+interface FormData {
+  studentId: string;
+  date: string;
+  timeSpent: number;
+  notes?: string;
+  status?: string;
+  review?: string;
+}
+
+interface FeedbackData {
+  review: string;
+  status: string;
+  mentorId: string;
+}
+
+interface MentorFormData {
+  date: string;
+  workingHours: number;
+  activities: string;
+}
+
+export const useSubmission = (
+  role: string,
+  studentId: string,
+  selectedUser: string,
+  formData: FormData,
+  workingHours: number,
+  notes: string,
+  review: string,
+  status: string,
+  editingEvent: any,
+  feedbackActivityId: string,
+  onSuccess: () => void,
+  showToast: (title: string, description: string) => void
+) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = async () => {
+    if (isSubmitting) return;
+    setIsSubmitting(true);
+
+    try {
+      const isStudent = role === 'student';
+      const isMentor = role === 'mentor';
+
+      if (isStudent) {
+        await submitActivity();
+      } else if (isMentor && selectedUser === studentId) {
+        await submitMentorActivity();
+      } else {
+        await submitFeedback();
+      }
+    } catch (error) {
+      showToast('Error', 'Error saving data. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const submitActivity = async () => {
+    const newFormData: FormData = {
+      studentId,
+      date: formData.date,
+      timeSpent: workingHours,
+      notes,
+    };
+
+    const response = await fetch('http://localhost:3000/api/activity', {
+      method: editingEvent ? 'PATCH' : 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ...newFormData, id: editingEvent?.id }),
+    });
+
+    handleResponse(
+      response,
+      editingEvent ? 'Activity Updated' : 'Activity Added'
+    );
+  };
+
+  const submitMentorActivity = async () => {
+    const newFormData: MentorFormData = {
+      date: formData.date,
+      workingHours: workingHours,
+      activities: notes,
+    };
+
+    const response = await fetch('http://localhost:3000/api/mentor', {
+      method: editingEvent ? 'PATCH' : 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ ...newFormData, id: editingEvent?.id }),
+    });
+
+    handleResponse(
+      response,
+      editingEvent ? 'Activity Updated' : 'Activity Added'
+    );
+  };
+
+  const submitFeedback = async () => {
+    const newFormFeedbackData: FeedbackData = {
+      review,
+      status,
+      mentorId: studentId,
+    };
+
+    const response = await fetch(
+      `http://localhost:3000/api/mentorFeedback?activityId=${feedbackActivityId}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ ...newFormFeedbackData, id: editingEvent?.id }),
+      }
+    );
+
+    handleResponse(
+      response,
+      editingEvent ? 'Feedback Updated' : 'Feedback Added'
+    );
+  };
+
+  const handleResponse = async (response: Response, successMessage: string) => {
+    if (response.ok) {
+      showToast(
+        successMessage,
+        response.ok ? `${successMessage} successfully.` : 'An error occurred.'
+      );
+      onSuccess();
+    } else {
+      showToast('Error', 'Error saving data. Please try again.');
+    }
+  };
+
+  return { handleSubmit, isSubmitting };
+};
\ No newline at end of file
diff --git a/server/src/middleware.ts b/server/src/middleware.ts
index bc7f6d73..6a52626d 100644
--- a/server/src/middleware.ts
+++ b/server/src/middleware.ts
@@ -1,11 +1,9 @@
-import { chain } from "./middlewares/chain";
 import { withAuthMiddleware } from "./middlewares/authMiddleware";
+import { chain } from "./middlewares/chain";
 import { withRoleBasedRoutingMiddleware } from "./middlewares/routingMiddleware";
 
-export default chain([withAuthMiddleware, withRoleBasedRoutingMiddleware])
+export default chain([withAuthMiddleware, withRoleBasedRoutingMiddleware]);
 
-export const config = {                                               
-    matcher: [
-      '/((?!login|api/|_next/static|_next/image|favicon.ico).*)',
-    ],
-}
\ No newline at end of file
+export const config = {
+  matcher: ["/((?!login|api/|_next/static|_next/image|favicon.ico).*)"],
+};
diff --git a/server/src/middlewares/authMiddleware.ts b/server/src/middlewares/authMiddleware.ts
index 7b8aa707..c1d5c1bc 100644
--- a/server/src/middlewares/authMiddleware.ts
+++ b/server/src/middlewares/authMiddleware.ts
@@ -1,34 +1,48 @@
-import * as jose from 'jose';
-import { NextFetchEvent, NextMiddleware, NextRequest, NextResponse } from "next/server";
+import * as jose from "jose";
+import {
+  NextFetchEvent,
+  NextMiddleware,
+  NextRequest,
+  NextResponse,
+} from "next/server";
 
 export function withAuthMiddleware(middleware: NextMiddleware): NextMiddleware {
-    return async (request: NextRequest, event: NextFetchEvent) => {
-        
-        let token = request.cookies.get("token");
-    
-        if (!token) {
-            return NextResponse.redirect(`${process.env.BASE_URL}/login`);
-        }
-        
-        try {
-            const secret = new TextEncoder().encode(process.env.JWT_SECRET!);
-            const {payload, protectedHeader} = await jose.jwtVerify(token.value, secret);
+  return async (request: NextRequest, event: NextFetchEvent) => {
+    let token = request.cookies.get("token");
 
-        } catch (error) {
-        
-            console.error(error);
-            
-            const headers = new Headers(request.headers);
+    if (!token) {
+      return NextResponse.redirect(`${process.env.BASE_URL}/login`);
+    }
+
+    try {
+      const secret = new TextEncoder().encode(process.env.JWT_SECRET!);
+      await jose.jwtVerify(token.value, secret);
+    } catch (error) {
+      console.error(error);
 
-            if ((error as any).code == "ERR_JWT_EXPIRED") {
-                headers.set("Set-Cookie", "redirect_error=Session expired. Please login again.; Path=/login;");
-            }
+      const headers = new Headers(request.headers);
 
-            headers.set("Set-Cookie", "redirect_error=An error occurred while logging you in.; Path=/login;");
-            headers.append("Set-Cookie", `token=${token}; expires=Thu, 01 Jan 1970 00:00:00 UTC; Path=/; HttpOnly`);
-            return NextResponse.redirect(`${process.env.BASE_URL}/login`, { status: 303, headers: headers });
-        }
+      if ((error as any).code == "ERR_JWT_EXPIRED") {
+        headers.set(
+          "Set-Cookie",
+          "redirect_error=Session expired. Please login again.; Path=/login;",
+        );
+      }
 
-        return middleware(request, event);
+      headers.set(
+        "Set-Cookie",
+        "redirect_error=An error occurred while logging you in.; Path=/login;",
+      );
+      headers.append(
+        "Set-Cookie",
+        `token=${token}; expires=Thu, 01 Jan 1970 00:00:00 UTC; Path=/; HttpOnly`,
+      );
+      return NextResponse.redirect(`${process.env.BASE_URL}/login`, {
+        status: 303,
+        headers: headers,
+      });
     }
-}
\ No newline at end of file
+
+    return middleware(request, event);
+  };
+}
diff --git a/server/src/repositories/invitation_repository_impl.ts b/server/src/repositories/invitation_repository_impl.ts
index c341a31a..0787ee9f 100644
--- a/server/src/repositories/invitation_repository_impl.ts
+++ b/server/src/repositories/invitation_repository_impl.ts
@@ -1,10 +1,10 @@
+import crypto from "crypto";
+
+import { Invitation, Role } from "@prisma/client";
+
 import prisma from "@/lib/prisma";
-import {
-  Invitation,
-  Role,
-} from "@prisma/client";
+
 import BaseRepository from "./baseRepository";
-import crypto from "crypto"
 
 export class InvitationRepository extends BaseRepository<Invitation> {
   constructor() {
@@ -15,6 +15,7 @@ export class InvitationRepository extends BaseRepository<Invitation> {
     email: string;
     role: Role;
     invitedBy: string; // ID of the super-admin
+    projectId: string; // Project ID
   }) {
     const token = crypto.randomBytes(32).toString("hex"); // secure token
     const expiresAt = new Date(Date.now() + 3 * 60 * 60 * 1000); // 3 hours
@@ -31,6 +32,7 @@ export class InvitationRepository extends BaseRepository<Invitation> {
         expiresAt,
         accepted: false,
         invitedBy: data.invitedBy,
+        projectId: data.projectId,
       },
     });
   }
@@ -52,4 +54,4 @@ export class InvitationRepository extends BaseRepository<Invitation> {
       data: { accepted: true },
     });
   }
-}
\ No newline at end of file
+}
diff --git a/server/tailwind.config.ts b/server/tailwind.config.ts
index b28b9e23..435b4d60 100644
--- a/server/tailwind.config.ts
+++ b/server/tailwind.config.ts
@@ -58,6 +58,16 @@ const config = {
   				'3': 'hsl(var(--chart-3))',
   				'4': 'hsl(var(--chart-4))',
   				'5': 'hsl(var(--chart-5))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
   			}
   		},
   		borderRadius: {
@@ -88,13 +98,29 @@ const config = {
   			'accordion-up': 'accordion-up 0.2s ease-out'
   		},
   		fontSize: {
-  			// Admin module heading scale
-  			// page-title   : top-level page heading  (h1 in the page header bar)
-  			// section-title: card / section headings (h2/h3 inside content areas)
-  			// card-label   : small all-caps labels inside cards / table headers
-  			'page-title':    ['1.25rem',   { lineHeight: '1.75rem', fontWeight: '600', letterSpacing: '-0.01em' }],
-  			'section-title': ['0.875rem',  { lineHeight: '1.25rem', fontWeight: '600' }],
-  			'card-label':    ['0.6875rem', { lineHeight: '1rem',    fontWeight: '700', letterSpacing: '0.05em' }],
+  			'page-title': [
+  				'1.25rem',
+  				{
+  					lineHeight: '1.75rem',
+  					fontWeight: '600',
+  					letterSpacing: '-0.01em'
+  				}
+  			],
+  			'section-title': [
+  				'0.875rem',
+  				{
+  					lineHeight: '1.25rem',
+  					fontWeight: '600'
+  				}
+  			],
+  			'card-label': [
+  				'0.6875rem',
+  				{
+  					lineHeight: '1rem',
+  					fontWeight: '700',
+  					letterSpacing: '0.05em'
+  				}
+  			]
   		}
   	}
   },