diff --git a/.gitignore b/.gitignore
index 3d70248ba2..06338043b8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 .DS_Store
 .env
+.env.*
 .env.local
 .env.development.local
 .env.test.local
@@ -12,4 +13,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-package-lock.json
\ No newline at end of file
+package-lock.json
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..b512c09d47
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/FRONTEND_IMPLEMENTATION_CHECKLIST.md b/FRONTEND_IMPLEMENTATION_CHECKLIST.md
new file mode 100644
index 0000000000..7b9549e5ab
--- /dev/null
+++ b/FRONTEND_IMPLEMENTATION_CHECKLIST.md
@@ -0,0 +1,374 @@
+# 🚀 **Frontend Implementation Checklist**
+
+## 📋 **1. Update Existing Routes in Fetches**
+
+### **✅ Class Routes (Update existing fetches):**
+
+```javascript
+// OLD: GET /classes
+// NEW: GET /workspace/:workspaceId/classes
+const getClasses = async (workspaceId) => {
+  return fetch(`/workspace/${workspaceId}/classes`)
+}
+
+// OLD: POST /classes
+// NEW: POST /workspace/:workspaceId/classes
+const createClass = async (workspaceId, classData) => {
+  return fetch(`/workspace/${workspaceId}/classes`, {
+    method: "POST",
+    body: JSON.stringify(classData),
+  })
+}
+```
+
+### **✅ Team Routes (Update existing fetches):**
+
+```javascript
+// OLD: GET /teams
+// NEW: GET /workspace/:workspaceId/teams
+const getTeams = async (workspaceId) => {
+  return fetch(`/workspace/${workspaceId}/teams`)
+}
+
+// OLD: POST /teams
+// NEW: POST /workspace/:workspaceId/teams
+const createTeam = async (workspaceId, teamData) => {
+  return fetch(`/workspace/${workspaceId}/teams`, {
+    method: "POST",
+    body: JSON.stringify(teamData),
+  })
+}
+```
+
+---
+
+## 📋 **2. New Stores to Create**
+
+### **✅ Workspace Store (`workspaceStore.ts`):**
+
+```typescript
+interface Workspace {
+  _id: string
+  name: string
+  createdBy: User
+  teams: Team[]
+  createdAt: string
+}
+
+interface WorkspaceStore {
+  workspaces: Workspace[]
+  currentWorkspace: Workspace | null
+  getWorkspaces: () => Promise<void>
+  createWorkspace: (name: string) => Promise<void>
+  setCurrentWorkspace: (workspace: Workspace) => void
+}
+```
+
+### **✅ Team Store (`teamStore.ts`):**
+
+```typescript
+interface Team {
+  _id: string
+  teamName: string
+  createdBy: User
+  assignedTeachers: User[]
+  accessTo: Class[]
+  workspaceId: string
+  createdAt: string
+}
+
+interface TeamStore {
+  teams: Team[]
+  currentTeam: Team | null
+  getTeams: (workspaceId: string) => Promise<void>
+  createTeam: (workspaceId: string, teamData: any) => Promise<void>
+  addMember: (teamId: string, userId: string) => Promise<void>
+  removeMember: (teamId: string, userId: string) => Promise<void>
+  addTeacher: (teamId: string, userId: string) => Promise<void>
+  removeTeacher: (teamId: string, userId: string) => Promise<void>
+  giveClassAccess: (teamId: string, classId: string) => Promise<void>
+  removeClassAccess: (teamId: string, classId: string) => Promise<void>
+}
+```
+
+### **✅ Invitation Store (`invitationStore.ts`):**
+
+```typescript
+interface WorkspaceInvitation {
+  _id: string
+  workspaceId: string
+  token: string
+  expiresAt: string
+  isUsed: boolean
+  allowedRole: string
+}
+
+interface InvitationStore {
+  invitations: WorkspaceInvitation[]
+  createInvitation: (workspaceId: string, role: string) => Promise<string>
+  validateInvitation: (token: string) => Promise<boolean>
+  useInvitation: (token: string) => Promise<void>
+  getInvitationHistory: (workspaceId: string) => Promise<void>
+}
+```
+
+---
+
+## 📋 **3. New API Fetches to Implement**
+
+### **✅ Workspace API Functions:**
+
+```typescript
+// workspaceApi.ts
+export const workspaceApi = {
+  // Get all workspaces for current user
+  getWorkspaces: () => fetch("/workspaces"),
+
+  // Get specific workspace
+  getWorkspace: (workspaceId: string) => fetch(`/workspace/${workspaceId}`),
+
+  // Create new workspace
+  createWorkspace: (name: string) =>
+    fetch("/workspace", {
+      method: "POST",
+      body: JSON.stringify({ name }),
+    }),
+
+  // Update workspace
+  updateWorkspace: (workspaceId: string, data: any) =>
+    fetch(`/workspace/${workspaceId}`, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+    }),
+
+  // Delete workspace
+  deleteWorkspace: (workspaceId: string) =>
+    fetch(`/workspace/${workspaceId}`, {
+      method: "DELETE",
+    }),
+
+  // Get users in workspace
+  getWorkspaceUsers: (workspaceId: string) => fetch(`/workspace/${workspaceId}/users`),
+}
+```
+
+### **✅ Team API Functions:**
+
+```typescript
+// teamApi.ts
+export const teamApi = {
+  // Get teams in workspace
+  getTeams: (workspaceId: string) => fetch(`/workspace/${workspaceId}/teams`),
+
+  // Get specific team
+  getTeam: (teamId: string) => fetch(`/teams/${teamId}`),
+
+  // Create team (bulk)
+  createTeam: (
+    workspaceId: string,
+    teamData: {
+      teamName: string
+      members?: string[]
+      teachers?: string[]
+      classes?: string[]
+    }
+  ) =>
+    fetch(`/workspace/${workspaceId}/teams`, {
+      method: "POST",
+      body: JSON.stringify(teamData),
+    }),
+
+  // Update team
+  updateTeam: (teamId: string, data: any) =>
+    fetch(`/teams/${teamId}`, {
+      method: "PATCH",
+      body: JSON.stringify(data),
+    }),
+
+  // Delete team
+  deleteTeam: (teamId: string) =>
+    fetch(`/teams/${teamId}`, {
+      method: "DELETE",
+    }),
+
+  // Individual member management
+  addMember: (teamId: string, userId: string) =>
+    fetch(`/teams/${teamId}/members/${userId}`, {
+      method: "POST",
+    }),
+
+  removeMember: (teamId: string, userId: string) =>
+    fetch(`/teams/${teamId}/members/${userId}`, {
+      method: "DELETE",
+    }),
+
+  // Individual teacher management
+  addTeacher: (teamId: string, userId: string) =>
+    fetch(`/teams/${teamId}/teachers/${userId}`, {
+      method: "POST",
+    }),
+
+  removeTeacher: (teamId: string, userId: string) =>
+    fetch(`/teams/${teamId}/teachers/${userId}`, {
+      method: "DELETE",
+    }),
+
+  // Individual class access management
+  giveClassAccess: (teamId: string, classId: string) =>
+    fetch(`/teams/${teamId}/classes/${classId}`, {
+      method: "POST",
+    }),
+
+  removeClassAccess: (teamId: string, classId: string) =>
+    fetch(`/teams/${teamId}/classes/${classId}`, {
+      method: "DELETE",
+    }),
+}
+```
+
+### **✅ Invitation API Functions:**
+
+```typescript
+// invitationApi.ts
+export const invitationApi = {
+  // Create invitation link
+  createInvitation: (workspaceId: string, role: "student" | "teacher") =>
+    fetch(`/workspace/${workspaceId}/invite`, {
+      method: "POST",
+      body: JSON.stringify({ allowedRole: role }),
+    }),
+
+  // Validate invitation token
+  validateInvitation: (token: string) => fetch(`/invitation/validate/${token}`),
+
+  // Use invitation token (join workspace)
+  useInvitation: (token: string) =>
+    fetch("/invitation/use", {
+      method: "POST",
+      body: JSON.stringify({ token }),
+    }),
+
+  // Get invitation history
+  getInvitationHistory: (workspaceId: string) => fetch(`/workspace/${workspaceId}/invitations`),
+}
+```
+
+---
+
+## 📋 **4. Update Existing Stores**
+
+### **✅ Class Store Updates:**
+
+```typescript
+// classStore.ts - Update existing functions
+const classStore = {
+  // Update to use workspaceId parameter
+  getClasses: async (workspaceId: string) => {
+    const response = await fetch(`/workspace/${workspaceId}/classes`)
+    // ... rest of logic
+  },
+
+  // Update to use workspaceId parameter
+  createClass: async (workspaceId: string, classData: any) => {
+    const response = await fetch(`/workspace/${workspaceId}/classes`, {
+      method: "POST",
+      body: JSON.stringify(classData),
+    })
+    // ... rest of logic
+  },
+}
+```
+
+### **✅ User Store Updates:**
+
+```typescript
+// userStore.ts - Add new fields
+interface User {
+  // ... existing fields
+  workspaces: string[] // NEW
+  teams: string[] // NEW
+  assignedTeams: string[] // NEW
+}
+
+const userStore = {
+  // ... existing functions
+  // Add functions to handle workspace/team membership
+  joinWorkspace: async (workspaceId: string) => {
+    /* ... */
+  },
+  leaveWorkspace: async (workspaceId: string) => {
+    /* ... */
+  },
+}
+```
+
+---
+
+## 📋 **5. New UI Components to Create**
+
+### **✅ Workspace Management:**
+
+- `WorkspaceSelector.tsx` - Dropdown to switch workspaces
+- `CreateWorkspaceModal.tsx` - Modal to create new workspace
+- `WorkspaceSettings.tsx` - Settings page for workspace
+
+### **✅ Team Management:**
+
+- `TeamList.tsx` - List of teams in workspace
+- `CreateTeamModal.tsx` - Modal for bulk team creation
+- `TeamCard.tsx` - Individual team display
+- `TeamMembers.tsx` - Manage team members
+- `TeamTeachers.tsx` - Manage assigned teachers
+- `TeamClasses.tsx` - Manage class access
+
+### **✅ Invitation System:**
+
+- `InvitationLinkGenerator.tsx` - Generate signup links
+- `InvitationHistory.tsx` - View past invitations
+- `SignupPage.tsx` - New user signup with invitation token
+
+---
+
+## 📋 **6. Update Navigation/Routing**
+
+### **✅ Add New Routes:**
+
+```typescript
+// App.tsx or router config
+const routes = [
+  // ... existing routes
+  { path: "/workspace/:id", component: WorkspaceDashboard },
+  { path: "/workspace/:id/teams", component: TeamManagement },
+  { path: "/workspace/:id/settings", component: WorkspaceSettings },
+  { path: "/signup/:token", component: SignupPage },
+]
+```
+
+### **✅ Update Navigation:**
+
+- Add workspace selector to header
+- Add team management to sidebar
+- Add invitation management to admin panel
+
+---
+
+## 🎯 **Priority Order:**
+
+1. **High Priority:** Update existing class/team fetches
+2. **High Priority:** Create workspace store and API
+3. **Medium Priority:** Create team store and API
+4. **Medium Priority:** Update user store with new fields
+5. **Low Priority:** Create invitation system
+6. **Low Priority:** Build UI components
+
+---
+
+## 📝 **Notes:**
+
+- All API calls should include proper error handling
+- Remember to update authentication headers for all requests
+- Consider implementing loading states for all async operations
+- Test workspace switching functionality thoroughly
+- Ensure proper cleanup when leaving workspaces
+
+This gives you a complete roadmap for implementing the new workspace-centric architecture! 🚀
diff --git a/MIGRATION.md b/MIGRATION.md
new file mode 100644
index 0000000000..381f89b778
--- /dev/null
+++ b/MIGRATION.md
@@ -0,0 +1,197 @@
+# Database Migration to Workspace Architecture (v2)
+
+## Overview
+
+This migration script transitions your database from the v1 schema to the new workspace-based architecture (v2). The migration is **safe** and **atomic** - it will either complete fully or roll back all changes if any error occurs.
+
+## What the Migration Does
+
+### 1. Creates "The Academy" Workspace
+- Creates a default workspace called "The Academy"
+- The oldest teacher in the database becomes the workspace creator
+- All existing data is moved into this workspace
+
+### 2. Creates "Spring 2025" Team
+- Creates a team called "Spring 2025" within The Academy workspace
+- **All students** (except the placeholder user) are added to this team
+- **All teachers** are assigned to teach this team
+- The team is granted access to **all existing classes**
+
+### 3. Migrates Existing Data
+- **Users**: Adds workspace, teams, and assignedTeams arrays
+- **Classes**: Links each class to The Academy workspace
+- **Projects**: Adds schemaVersion field
+- **Comments**: Adds schemaVersion field
+- **Replies**: Adds schemaVersion field
+
+### 4. Handles the "Deleted User" Account
+- Creates or updates the placeholder user (ID: `68a45fbaca5d5d29fe782190`)
+- This user can be referenced across all workspaces
+- Used when users are deleted but their comments/replies need to remain
+
+## Schema Changes
+
+### User Model
+```typescript
+// New fields:
+workspaces: ObjectId[]      // Workspaces the user belongs to
+teams: ObjectId[]           // Teams the user is a student in
+assignedTeams: ObjectId[]   // Teams the user teaches (for teachers)
+schemaVersion: "v2"
+```
+
+### Class Model
+```typescript
+// New fields:
+workspaceId: ObjectId       // Required: workspace this class belongs to
+schemaVersion: "v2"
+```
+
+### New Models
+- **Workspace**: Organizational container for teams and classes
+- **Team**: Groups of students and teachers with access to specific classes
+- **WorkspaceInvitation**: Invitation system for joining workspaces/teams
+
+## How to Run the Migration
+
+### Prerequisites
+1. Ensure your `.env` file has the correct `MONGO_URL`
+2. **Backup your database** before running the migration
+3. Make sure at least one teacher exists in the database
+
+### Step 1: Backup Your Database
+```bash
+# Example MongoDB backup command
+mongodump --uri="your-mongodb-uri" --out=./backup-$(date +%Y%m%d)
+```
+
+### Step 2: Run the Migration
+```bash
+cd backend
+npm run migrate
+```
+
+### Expected Output
+```
+✅ Connected to MongoDB
+📝 Creating placeholder 'Deleted User' account...
+✅ Placeholder user created
+🏫 Creating 'The Academy' workspace...
+✅ Workspace created with ID: 507f1f77bcf86cd799439011
+👥 Migrating all users to workspace...
+✅ Migrated 25 users to workspace
+👥 Creating 'Spring 2025' team with all students...
+✅ Team created with 20 students and 5 teachers
+📚 Migrating all classes to workspace...
+✅ Migrated 8 classes to workspace and granted team access
+📁 Updating projects schema...
+✅ Updated 150 projects
+💬 Updating comments schema...
+✅ Updated 450 comments
+↩️  Updating replies schema...
+✅ Updated 320 replies
+
+🎉 Migration completed successfully!
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📊 Summary:
+   - Workspace: "The Academy" (ID: 507f1f77bcf86cd799439011)
+   - Team: "Spring 2025" (ID: 507f1f77bcf86cd799439012)
+   - Users migrated: 25
+   - Students in team: 20
+   - Teachers in team: 5
+   - Classes migrated: 8
+   - Projects updated: 150
+   - Comments updated: 450
+   - Replies updated: 320
+   - Placeholder user: exists
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✅ Disconnected from MongoDB
+```
+
+## Safety Features
+
+### Transaction-Based
+The migration uses MongoDB transactions, so if any step fails, **all changes are automatically rolled back**.
+
+### Idempotency Check
+The script checks if workspaces already exist. If they do, it will exit safely without making changes.
+
+### Validation
+- Checks for required data (e.g., at least one teacher)
+- Validates placeholder user creation
+- Ensures all relationships are properly established
+
+## What Happens to Existing Users?
+
+### All Users
+- Remain unchanged except for new fields
+- Added to "The Academy" workspace
+- All existing data (comments, projects, likes) remains intact
+
+### Students
+- Added to the "Spring 2025" team
+- Gain access to all existing classes through team membership
+
+### Teachers
+- Assigned to teach the "Spring 2025" team
+- Can manage team members and class access
+
+### Placeholder User
+- Automatically created if it doesn't exist
+- Receives workspace membership for consistency
+- Continues to work for deleted user references
+
+## After Migration
+
+### For Development
+1. Update `.env` to set `RESET_DB=false` (if currently using reset database)
+2. Restart your backend server
+3. Test the new workspace features
+
+### For Production
+1. Verify the migration completed successfully
+2. Deploy the new backend code
+3. Deploy the updated frontend
+4. Monitor for any issues
+
+## Rollback (If Needed)
+
+If you need to rollback:
+
+```bash
+# Restore from your backup
+mongorestore --uri="your-mongodb-uri" ./backup-YYYYMMDD
+```
+
+## Troubleshooting
+
+### "No teachers found in the database"
+Create at least one teacher account before running the migration:
+```bash
+# Use your API or create directly in the database
+```
+
+### "Workspaces already exist"
+The migration has likely already been run. Check your database:
+```bash
+# In MongoDB shell
+db.workspaces.find()
+```
+
+### Transaction Failed
+Check the error message. Common issues:
+- Database connection lost
+- Insufficient permissions
+- Schema validation errors
+
+## Questions or Issues?
+
+If you encounter any problems during migration, check:
+1. MongoDB connection is stable
+2. You have a recent database backup
+3. All new models are properly imported in the migration script
+
+## Migration Script Location
+
+[backend/src/scripts/migrate-to-workspaces.ts](backend/src/scripts/migrate-to-workspaces.ts)
diff --git a/README.md b/README.md
index 31466b54c2..f8f3435266 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,217 @@
-# Final Project
+# 🎥 Classync Platform
 
-Replace this readme with your own information about your project.
+Hey there! 👋 This is my final project for my web development course - a video review platform that I built from scratch. It's designed to help teachers and students collaborate better through video content with interactive feedback and commenting.
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+## 🚀 Live Demo
 
-## The problem
+**Frontend**: [https://class-review.netlify.app]
+**Backend API**: [https://project-final-simon.onrender.com/]
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+## 🎯 What I was trying to solve
 
-## View it live
+I noticed that when learning from videos, it's really hard to give specific feedback or ask questions about particular moments. Traditional video platforms just don't cut it for educational content. I wanted to build something that would let students and teachers have meaningful discussions about specific parts of videos, with time-coded comments and organized feedback.
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
\ No newline at end of file
+## 💡 How I solved it
+
+I built this platform that lets you:
+
+- **Comment on specific video moments** - no more "around the 3-minute mark" confusion!
+- **Organize everything by classes and projects** - keeps things tidy and easy to find
+- **Have real conversations** - nested comments, replies, and likes make discussions feel natural
+- **Switch between teacher and student views** - different interfaces for different needs
+- **Use it on any device** - responsive design that works everywhere
+
+## 🛠️ Technologies Used
+
+### Frontend
+
+- **React 19** with TypeScript for type-safe development
+- **Styled Components** for component-based styling and theming
+- **Framer Motion** for smooth animations and transitions
+- **Zustand** for lightweight state management (It is were all my fetches are)
+- **React Router** for client-side routing and navigation
+- **Vite** for fast development and building
+
+### Backend
+
+- **Node.js** with Express.js framework
+- **MongoDB** with Mongoose ODM for data persistence
+- **TypeScript** for type safety and better development experience
+- **JWT Authentication** with bcrypt for secure user management
+- **Multer & Cloudinary** for file uploads and media management
+- **Swagger** for API documentation
+
+### Development Tools
+
+- **ESLint** for code quality and consistency
+- **TypeScript** for static type checking
+- **Git** for version control
+
+## 🚀 Features
+
+### 🎬 Video Management
+
+- Upload videos and organize them by classes and projects
+- Add time-coded comments at specific moments
+- Video player with progress tracking and volume controls
+- Generate thumbnails automatically
+
+### Interactive Feedback System
+
+- Comment threads that can have replies (and replies to replies!)
+- Like/unlike comments and replies
+- Comments are linked to specific video timestamps
+
+### 👥 User Management
+
+- Secure login/signup with JWT tokens
+- Different views for teachers vs. students
+- User profiles and activity tracking
+- Session management that actually works
+
+### 🎨 UI/UX
+
+- Dark/light theme switching
+- Responsive design that works on phones, tablets, and desktops
+- Smooth animations and transitions
+- Intuitive navigation that doesn't confuse users
+
+## 🏃‍♂️ How to get the project running locally
+
+### What you need:
+
+- Node.js (v18 or higher)
+- MongoDB instance (I used MongoDB Atlas for free)
+- npm or yarn
+
+### Step by step:
+
+1. **Clone my repo**
+
+   ```bash
+   git clone https://github.com/simonfrisk/classync-platform.git
+   cd classync-platform
+   ```
+
+2. **Install backend stuff**
+
+   ```bash
+   cd backend
+   npm install
+   ```
+
+3. **Install frontend stuff**
+
+   ```bash
+   cd ../frontend
+   npm install
+   ```
+
+4. **Set up environment variables**
+   Create `.env` files in both backend and frontend directories:
+
+   **Backend (.env)**
+
+   ```env
+   MONGO_URL=mongodb://localhost/classync
+   PORT=8080
+   JWT_SECRET=your-secret-key-here
+   CLOUDINARY_CLOUD_NAME=your-cloud-name
+   CLOUDINARY_API_KEY=your-api-key
+   CLOUDINARY_API_SECRET=your-api-secret
+   ```
+
+   **Frontend (.env)**
+
+   ```env
+   VITE_API_BASE_URL=http://localhost:8080
+   ```
+
+5. **Start the servers**
+
+   **Backend**
+
+   ```bash
+   cd backend
+   npm run dev
+   ```
+
+   **Frontend**
+
+   ```bash
+   cd frontend
+   npm run dev
+   ```
+
+6. **Open your browser**
+   - Frontend: [http://localhost:5173](http://localhost:5173)
+   - Backend API: [http://localhost:8080](http://localhost:8080)
+   - API Docs: [http://localhost:8080/api-docs](http://localhost:8080/api-docs)
+
+## 📁 How I organized my code
+
+```
+project-final-simon/
+├── backend/                 # My Node.js/Express backend
+│   ├── src/
+│   │   ├── controllers/    # API endpoint handlers
+│   │   ├── models/         # MongoDB schemas
+│   │   ├── middleware/     # Auth & file upload middleware
+│   │   ├── routes/         # API route definitions
+│   │   └── server.ts       # Main server file
+│   └── package.json
+├── frontend/               # My React frontend
+│   ├── src/
+│   │   ├── sections/       # Different pages
+│   │   ├── global-components/ # Reusable components
+│   │   ├── store/          # Zustand state management
+│   │   ├── themes/         # Styling and theming
+│   │   └── utils/          # Helper functions
+│   └── package.json
+└── README.md
+```
+
+## 🔧 Commands I use
+
+### Backend
+
+- `npm run dev` - Start dev server with hot reload
+- `npm run build` - Build TypeScript to JavaScript
+- `npm start` - Start production server
+
+### Frontend
+
+- `npm run dev` - Start dev server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+
+## 🌟 features I'm proud of
+
+### Video Player with Time-Coded Comments
+
+- Interactive timeline you can click on
+- Comments sync with video playback
+- Volume controls and fullscreen
+- Progress tracking and time formatting
+
+### Comment System
+
+- Nested comment threads (comments can have replies)
+- Real-time updates
+- Rich text formatting
+- Like/unlike functionality
+
+### Class and Project Management
+
+- Create and organize educational content
+- User role-based access control
+- Bulk operations
+
+## 🚧 What I'd do if I had more time
+
+Honestly, this project could go in so many directions! If I had more time, I'd love to add:
+
+- **Real-time collaboration** - WebSocket integration for live commenting
+- **More user settings** - Make the create user more controlled so that not anyone can be a user.
+- **Mobile app** - React Native
diff --git a/backend/.babelrc b/backend/.babelrc
old mode 100644
new mode 100755
index cedf24f1a5..c58af5b16d
--- a/backend/.babelrc
+++ b/backend/.babelrc
@@ -1,5 +1,6 @@
 {
   "presets": [
-    "@babel/preset-env"
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ]
 }
\ No newline at end of file
diff --git a/backend/dist/Routes/invitation-routes.js b/backend/dist/Routes/invitation-routes.js
new file mode 100644
index 0000000000..0fc6247a01
--- /dev/null
+++ b/backend/dist/Routes/invitation-routes.js
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = require("express");
+const authenticateUser_1 = require("../middleware/authenticateUser");
+const workspace_invitation_1 = require("../controllers/workspace-invitation");
+const router = (0, express_1.Router)();
+// Create invitation link (teachers only)
+router.post("/workspace/:workspaceId/invite", authenticateUser_1.authenticateUser, workspace_invitation_1.createInvitationLink);
+// Validate invitation token (public endpoint)
+router.get("/invitation/validate/:token", workspace_invitation_1.validateInvitationToken);
+// Use invitation token (requires authentication)
+router.post("/invitation/use", authenticateUser_1.authenticateUser, workspace_invitation_1.useInvitationToken);
+// Get invitation history (teachers only)
+router.get("/workspace/:workspaceId/invitations", authenticateUser_1.authenticateUser, workspace_invitation_1.getInvitationHistory);
+// Delete invitation (teachers only)
+router.delete("/invitation/:invitationId", authenticateUser_1.authenticateUser, workspace_invitation_1.deleteInvitation);
+// Deactivate invitation (teachers only)
+router.patch("/invitation/:invitationId/deactivate", authenticateUser_1.authenticateUser, workspace_invitation_1.deactivateInvitation);
+exports.default = router;
diff --git a/backend/dist/Routes/routes.js b/backend/dist/Routes/routes.js
new file mode 100644
index 0000000000..a8e647e591
--- /dev/null
+++ b/backend/dist/Routes/routes.js
@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const express_1 = __importDefault(require("express"));
+const authenticateUser_1 = require("../middleware/authenticateUser");
+const uploadVideo_1 = require("../middleware/uploadVideo");
+const uploadImage_1 = require("../middleware/uploadImage");
+// Import controllers
+const deleteClass_1 = require("../controllers/deleteClass");
+const deleteComment_1 = require("../controllers/deleteComment");
+const deleteProject_1 = require("../controllers/deleteProject");
+const deleteReply_1 = require("../controllers/deleteReply");
+const deleteUser_1 = require("../controllers/deleteUser");
+const getAllComments_1 = require("../controllers/getAllComments");
+const getClassById_1 = require("../controllers/getClassById");
+const getClasses_1 = require("../controllers/getClasses");
+const getCommentById_1 = require("../controllers/getCommentById");
+const getComments_1 = require("../controllers/getComments");
+const getHome_1 = require("../controllers/getHome");
+const getPrivateComments_1 = require("../controllers/getPrivateComments");
+const getProjectById_1 = require("../controllers/getProjectById");
+const getProjects_1 = require("../controllers/getProjects");
+const getProjectsWithComments_1 = require("../controllers/getProjectsWithComments");
+const getReplies_1 = require("../controllers/getReplies");
+const patchClass_1 = require("../controllers/patchClass");
+const patchComment_1 = require("../controllers/patchComment");
+const patchIsChecked_1 = require("../controllers/patchIsChecked");
+const patchProjects_1 = require("../controllers/patchProjects");
+const patchReply_1 = require("../controllers/patchReply");
+const postClass_1 = require("../controllers/postClass");
+const postCommentById_1 = require("../controllers/postCommentById");
+const postLike_1 = require("../controllers/postLike");
+const postProject_1 = require("../controllers/postProject");
+const postReplyById_1 = require("../controllers/postReplyById");
+const postReplyLike_1 = require("../controllers/postReplyLike");
+const postSession_1 = require("../controllers/postSession");
+const postUser_1 = require("../controllers/postUser");
+const getUsers_1 = require("../controllers/getUsers");
+const getUserById_1 = require("../controllers/getUserById");
+const patchUser_1 = require("../controllers/patchUser");
+const workspace_invitation_1 = require("../controllers/workspace-invitation");
+const postWorkspace_1 = require("../controllers/postWorkspace");
+const getWorkspaces_1 = require("../controllers/getWorkspaces");
+const getWorkspaceById_1 = require("../controllers/getWorkspaceById");
+const patchWorkspace_1 = require("../controllers/patchWorkspace");
+const deleteWorkspace_1 = require("../controllers/deleteWorkspace");
+const getWorkspaceUsers_1 = require("../controllers/getWorkspaceUsers");
+const getUserWorkspaces_1 = require("../controllers/getUserWorkspaces");
+const postTeam_1 = require("../controllers/postTeam");
+const getTeams_1 = require("../controllers/getTeams");
+const getTeamById_1 = require("../controllers/getTeamById");
+const patchTeam_1 = require("../controllers/patchTeam");
+const deleteTeam_1 = require("../controllers/deleteTeam");
+const postTeamMember_1 = require("../controllers/postTeamMember");
+const deleteTeamMember_1 = require("../controllers/deleteTeamMember");
+const postTeamTeacher_1 = require("../controllers/postTeamTeacher");
+const deleteTeamTeacher_1 = require("../controllers/deleteTeamTeacher");
+const postTeamClass_1 = require("../controllers/postTeamClass");
+const deleteTeamClass_1 = require("../controllers/deleteTeamClass");
+const exportCommentsToSrt_1 = require("../controllers/exportCommentsToSrt");
+const router = express_1.default.Router();
+// ALTERNATIVE DOCUMENTATION
+router.get("/alt/doc", getHome_1.getHome);
+// WORKSPACES
+router.post("/workspace", authenticateUser_1.authenticateUser, postWorkspace_1.postWorkspace);
+router.get("/workspaces", authenticateUser_1.authenticateUser, getWorkspaces_1.getWorkspaces);
+router.get("/workspace/:workspaceId", authenticateUser_1.authenticateUser, getWorkspaceById_1.getWorkspaceById);
+router.patch("/workspace/:workspaceId", authenticateUser_1.authenticateUser, patchWorkspace_1.patchWorkspace);
+router.delete("/workspace/:workspaceId", authenticateUser_1.authenticateUser, deleteWorkspace_1.deleteWorkspace);
+router.get("/workspace/:workspaceId/users", authenticateUser_1.authenticateUser, getWorkspaceUsers_1.getWorkspaceUsers);
+router.get("/user/workspaces", authenticateUser_1.authenticateUser, getUserWorkspaces_1.getUserWorkspaces);
+// CLASSES
+router.get("/workspace/:workspaceId/classes", authenticateUser_1.authenticateUser, getClasses_1.getClasses);
+router.get("/classes/:classId", authenticateUser_1.authenticateUser, getClassById_1.getClassById);
+router.post("/workspace/:workspaceId/classes", postClass_1.postClass);
+router.patch("/classes/:classId", authenticateUser_1.authenticateUser, patchClass_1.patchClass);
+router.delete("/classes/:classId", authenticateUser_1.authenticateUser, deleteClass_1.deleteClass);
+// PROJECTS
+router.get("/classes/:classId/projects", authenticateUser_1.authenticateUser, getProjects_1.getProjects);
+router.get("/classes/projects/with-comments", authenticateUser_1.authenticateUser, getProjectsWithComments_1.getProjectsWithComments);
+router.get("/projects/:projectId", authenticateUser_1.authenticateUser, getProjectById_1.getProjectById);
+router.post("/classes/:classId/projects", uploadVideo_1.uploadVideo.single("video"), authenticateUser_1.authenticateUser, postProject_1.postProject);
+router.patch("/projects/:projectId", authenticateUser_1.authenticateUser, patchProjects_1.patchProject);
+router.delete("/projects/:projectId", authenticateUser_1.authenticateUser, deleteProject_1.deleteProject);
+// COMMENTS
+router.get("/projects/:projectId/comments", getComments_1.getComments);
+router.get("/comments/all", authenticateUser_1.authenticateUser, getAllComments_1.getAllComments);
+router.get("/comments/:commentId", getCommentById_1.getCommentById);
+router.get("/projects/:projectId/comments/private", authenticateUser_1.authenticateUser, getPrivateComments_1.getPrivateComments);
+router.get("/projects/:projectId/export/srt", authenticateUser_1.authenticateUser, exportCommentsToSrt_1.exportCommentsToSrt);
+router.post("/projects/:projectId/comments", authenticateUser_1.authenticateUser, postCommentById_1.postCommentById);
+router.patch("/comments/:commentId", authenticateUser_1.authenticateUser, patchComment_1.patchComment);
+router.patch("/comments/:commentId/toggle-check", authenticateUser_1.authenticateUser, patchIsChecked_1.patchIsChecked);
+router.delete("/comments/:commentId", authenticateUser_1.authenticateUser, deleteComment_1.deleteComment);
+// REPLIES
+router.get("/comments/:commentId/replies", getReplies_1.getReplies);
+router.post("/comments/:commentId/replies", authenticateUser_1.authenticateUser, postReplyById_1.postReplyById);
+router.patch("/replies/:replyId", authenticateUser_1.authenticateUser, patchReply_1.patchReply);
+router.delete("/replies/:replyId", authenticateUser_1.authenticateUser, deleteReply_1.deleteReply);
+// LIKES
+router.post("/comments/:commentId/likes", authenticateUser_1.authenticateUser, postLike_1.postLike);
+router.post("/replies/:replyId/likes", authenticateUser_1.authenticateUser, postReplyLike_1.postReplyLike);
+// USERS & AUTHENTICATION
+router.post("/users", uploadImage_1.uploadImage.single("image"), postUser_1.postUser);
+router.get("/users/:userId", authenticateUser_1.authenticateUser, getUserById_1.getUserById);
+router.delete("/users/:userId", authenticateUser_1.authenticateUser, deleteUser_1.deleteUser);
+router.patch("/users/:userId", authenticateUser_1.authenticateUser, patchUser_1.patchUser);
+router.post("/session", postSession_1.postSession);
+router.get("/users", getUsers_1.getUsers);
+// WORKSPACE INVITATIONS
+router.post("/workspace/:workspaceId/invite", authenticateUser_1.authenticateUser, workspace_invitation_1.createInvitationLink);
+router.post("/workspace/:workspaceId/teams/:teamId/invite", authenticateUser_1.authenticateUser, workspace_invitation_1.createInvitationLink);
+router.get("/invitation/validate/:token", workspace_invitation_1.validateInvitationToken);
+router.post("/invitation/use", authenticateUser_1.authenticateUser, workspace_invitation_1.useInvitationToken);
+router.get("/workspace/:workspaceId/invitations", authenticateUser_1.authenticateUser, workspace_invitation_1.getInvitationHistory);
+router.delete("/invitation/:invitationId", authenticateUser_1.authenticateUser, workspace_invitation_1.deleteInvitation);
+router.patch("/invitation/:invitationId/deactivate", authenticateUser_1.authenticateUser, workspace_invitation_1.deactivateInvitation);
+// TEAMS
+router.get("/workspace/:workspaceId/teams", authenticateUser_1.authenticateUser, getTeams_1.getTeams);
+router.get("/teams/:teamId", authenticateUser_1.authenticateUser, getTeamById_1.getTeamById);
+router.post("/workspace/:workspaceId/teams", authenticateUser_1.authenticateUser, postTeam_1.postTeam);
+router.patch("/teams/:teamId", authenticateUser_1.authenticateUser, patchTeam_1.patchTeam);
+router.delete("/teams/:teamId", authenticateUser_1.authenticateUser, deleteTeam_1.deleteTeam);
+// Team management routes (simplified individual operations)
+router.post("/teams/:teamId/members/:userId", authenticateUser_1.authenticateUser, postTeamMember_1.postTeamMember);
+router.delete("/teams/:teamId/members/:userId", authenticateUser_1.authenticateUser, deleteTeamMember_1.deleteTeamMember);
+router.post("/teams/:teamId/teachers/:userId", authenticateUser_1.authenticateUser, postTeamTeacher_1.postTeamTeacher);
+router.delete("/teams/:teamId/teachers/:userId", authenticateUser_1.authenticateUser, deleteTeamTeacher_1.deleteTeamTeacher);
+router.post("/teams/:teamId/classes/:classId", authenticateUser_1.authenticateUser, postTeamClass_1.postTeamClass);
+router.delete("/teams/:teamId/classes/:classId", authenticateUser_1.authenticateUser, deleteTeamClass_1.deleteTeamClass);
+exports.default = router;
diff --git a/backend/dist/controllers/OLD-postProject.js b/backend/dist/controllers/OLD-postProject.js
new file mode 100644
index 0000000000..1eda3167d0
--- /dev/null
+++ b/backend/dist/controllers/OLD-postProject.js
@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postProject = void 0;
+const Projects_1 = require("../models/Projects");
+const postProject = async (req, res) => {
+    try {
+        const { projectName, projectDescription } = req.body;
+        if (!projectName) {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "Project name is required",
+            });
+        }
+        const newProject = new Projects_1.Project({ projectName, projectDescription });
+        const savedNewProject = await newProject.save();
+        return res.status(201).json({
+            success: true,
+            response: savedNewProject,
+            message: "Project created",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not post project",
+        });
+    }
+};
+exports.postProject = postProject;
diff --git a/backend/dist/controllers/deleteClass.js b/backend/dist/controllers/deleteClass.js
new file mode 100644
index 0000000000..b2b343e13c
--- /dev/null
+++ b/backend/dist/controllers/deleteClass.js
@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteClass = void 0;
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+const Projects_1 = require("../models/Projects");
+const Class_1 = require("../models/Class");
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   delete:
+ *     summary: Delete a class and all related projects, comments, and replies
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to delete
+ *     responses:
+ *       200:
+ *         description: Class and related data deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted class object
+ *                 message:
+ *                   type: string
+ *                   example: Class, its projects, comments, and replies were deleted
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Class could not be found
+ *       500:
+ *         description: Server error deleting class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   description: Error object or message
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete class
+ */
+const deleteClass = async (req, res) => {
+    const { classId } = req.params;
+    try {
+        const foundClass = await Class_1.ClassModel.findById(classId);
+        if (!foundClass) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Class could not be found",
+            });
+        }
+        // Step 1: Find all comments for this class
+        const comments = await Comment_1.CommentModel.find({ classId });
+        // Step 2: Delete all replies related to the comments
+        const commentIds = comments.map((comment) => comment._id);
+        await Reply_1.Reply.deleteMany({ commentId: { $in: commentIds } });
+        // Step 3: Delete comments
+        await Comment_1.CommentModel.deleteMany({ classId });
+        // Step 4: Delete projects associated with this class
+        if (foundClass.projects && foundClass.projects.length > 0) {
+            await Projects_1.Project.deleteMany({ _id: { $in: foundClass.projects } });
+        }
+        // Step 5: Remove class from workspace.classes array
+        await workspace_1.WorkspaceModel.findByIdAndUpdate(foundClass.workspaceId, {
+            $pull: { classes: classId },
+        });
+        // Step 6: Delete the class
+        await foundClass.deleteOne();
+        return res.status(200).json({
+            success: true,
+            response: foundClass,
+            message: "Class, its projects, comments, and replies were deleted",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not delete class",
+        });
+    }
+};
+exports.deleteClass = deleteClass;
diff --git a/backend/dist/controllers/deleteComment.js b/backend/dist/controllers/deleteComment.js
new file mode 100644
index 0000000000..8f21c53c02
--- /dev/null
+++ b/backend/dist/controllers/deleteComment.js
@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteComment = void 0;
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   delete:
+ *     summary: Delete a comment and its replies
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     description: |
+ *       Deletes a comment by ID along with all its replies. Only the comment owner or a teacher can delete the comment.
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to delete
+ *     responses:
+ *       200:
+ *         description: Comment and its replies were deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted comment object
+ *                 message:
+ *                   type: string
+ *                   example: Comment and its replies were deleted
+ *       401:
+ *         description: Unauthorized (user not logged in)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: You must be logged in to delete a comment.
+ *       403:
+ *         description: Forbidden (user not owner or teacher)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: You are not authorized to delete this comment
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Comment could not be found
+ *       500:
+ *         description: Server error deleting comment
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete comment
+ */
+const deleteComment = async (req, res) => {
+    const { commentId } = req.params;
+    try {
+        const comment = await Comment_1.CommentModel.findById(commentId);
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Comment could not be found",
+            });
+        }
+        const user = req.user;
+        if (!user || !user._id) {
+            return res.status(401).json({
+                success: false,
+                message: "You must be logged in to delete a comment.",
+            });
+        }
+        const isOwner = comment.commentCreatedBy.toString() === user._id.toString();
+        const isTeacher = user.role === "teacher";
+        if (!isOwner && !isTeacher) {
+            return res.status(403).json({
+                success: false,
+                message: "You are not authorized to delete this comment",
+            });
+        }
+        await Reply_1.Reply.deleteMany({ commentId: comment._id });
+        await Projects_1.Project.updateOne({ _id: comment.projectId }, { $pull: { comments: comment._id } });
+        await comment.deleteOne();
+        return res.status(200).json({
+            success: true,
+            response: comment,
+            message: "Comment and its replies were deleted",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not delete comment",
+        });
+    }
+};
+exports.deleteComment = deleteComment;
diff --git a/backend/dist/controllers/deleteProject.js b/backend/dist/controllers/deleteProject.js
new file mode 100644
index 0000000000..36915da08d
--- /dev/null
+++ b/backend/dist/controllers/deleteProject.js
@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteProject = void 0;
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   delete:
+ *     summary: Delete a project along with its comments and replies
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to delete
+ *     responses:
+ *       200:
+ *         description: Project and related comments and replies deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted project object
+ *                 message:
+ *                   type: string
+ *                   example: Project, its comments, and replies were deleted
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Project could not be found
+ *       500:
+ *         description: Server error deleting project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   description: Error object or message
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete project
+ */
+const deleteProject = async (req, res) => {
+    const { projectId } = req.params;
+    try {
+        const project = await Projects_1.Project.findById(projectId);
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Project could not be found",
+            });
+        }
+        // Step 1: Find all comments for this project
+        const comments = await Comment_1.CommentModel.find({ projectId });
+        // Step 2: Extract comment IDs to delete associated replies
+        const commentIds = comments.map((comment) => comment._id);
+        await Reply_1.Reply.deleteMany({ commentId: { $in: commentIds } });
+        // Step 3: Delete comments
+        await Comment_1.CommentModel.deleteMany({ projectId });
+        // Step 4: Delete the project itself
+        await project.deleteOne();
+        return res.status(200).json({
+            success: true,
+            response: project,
+            message: "Project, its comments, and replies were deleted",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not delete project",
+        });
+    }
+};
+exports.deleteProject = deleteProject;
diff --git a/backend/dist/controllers/deleteReply.js b/backend/dist/controllers/deleteReply.js
new file mode 100644
index 0000000000..08ca84c7e0
--- /dev/null
+++ b/backend/dist/controllers/deleteReply.js
@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteReply = void 0;
+const Reply_1 = require("../models/Reply");
+/**
+ * @swagger
+ * /replies/{replyId}:
+ *   delete:
+ *     summary: Delete a reply by ID
+ *     description: Deletes a reply with the specified ID.
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the reply to delete
+ *     responses:
+ *       200:
+ *         description: Reply was deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted reply object
+ *                 message:
+ *                   type: string
+ *                   example: The reply was deleted
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Reply could not be found
+ *       500:
+ *         description: Server error deleting reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete reply
+ */
+const deleteReply = async (req, res) => {
+    const { replyId } = req.params;
+    try {
+        const reply = await Reply_1.Reply.findById(replyId);
+        if (!reply) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Reply could not be found",
+            });
+        }
+        await reply.deleteOne();
+        return res.status(200).json({
+            success: true,
+            response: reply,
+            message: "The reply was deleted",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not delete reply",
+        });
+    }
+};
+exports.deleteReply = deleteReply;
diff --git a/backend/dist/controllers/deleteTeam.js b/backend/dist/controllers/deleteTeam.js
new file mode 100644
index 0000000000..632d78113a
--- /dev/null
+++ b/backend/dist/controllers/deleteTeam.js
@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteTeam = void 0;
+const Team_1 = require("../models/Team");
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   delete:
+ *     summary: Delete a team
+ *     tags:
+ *       - Teams
+ *     description: Allows an authenticated user to delete a team by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to delete
+ *     responses:
+ *       200:
+ *         description: The team was successfully deleted
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was successfully deleted
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was not found
+ *       500:
+ *         description: Server error when deleting the team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not delete team from the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete team from the database
+ */
+const deleteTeam = async (req, res) => {
+    const { teamId } = req.params;
+    try {
+        const teamDoc = await Team_1.TeamModel.findById(teamId);
+        if (!teamDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The team was not found",
+            });
+        }
+        await Team_1.TeamModel.findByIdAndDelete(teamId);
+        res.status(200).json({
+            success: true,
+            response: null,
+            message: "The team was successfully deleted",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not delete team from the database",
+        });
+    }
+};
+exports.deleteTeam = deleteTeam;
diff --git a/backend/dist/controllers/deleteTeamClass.js b/backend/dist/controllers/deleteTeamClass.js
new file mode 100644
index 0000000000..bfc099ca3b
--- /dev/null
+++ b/backend/dist/controllers/deleteTeamClass.js
@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteTeamClass = void 0;
+const Team_1 = require("../models/Team");
+const Class_1 = require("../models/Class");
+/**
+ * @swagger
+ * /teams/{teamId}/classes/{classId}:
+ *   delete:
+ *     summary: Remove a team's access to a class
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to remove access from
+ *     responses:
+ *       200:
+ *         description: Class access removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Class access removed successfully"
+ *       404:
+ *         description: Team or Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or Class not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const deleteTeamClass = async (req, res) => {
+    try {
+        const { teamId, classId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const classDoc = await Class_1.ClassModel.findById(classId);
+        if (!team || !classDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or Class not found",
+            });
+        }
+        // Remove class from team's accessTo
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $pull: { accessTo: classId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: null,
+            message: "Class access removed successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in deleteTeamClass:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.deleteTeamClass = deleteTeamClass;
diff --git a/backend/dist/controllers/deleteTeamMember.js b/backend/dist/controllers/deleteTeamMember.js
new file mode 100644
index 0000000000..3f52485891
--- /dev/null
+++ b/backend/dist/controllers/deleteTeamMember.js
@@ -0,0 +1,117 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteTeamMember = void 0;
+const Team_1 = require("../models/Team");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /teams/{teamId}/members/{userId}:
+ *   delete:
+ *     summary: Remove a member from a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to remove
+ *     responses:
+ *       200:
+ *         description: Member removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Member removed successfully"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const deleteTeamMember = async (req, res) => {
+    try {
+        const { teamId, userId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const user = await user_1.UserModel.findById(userId);
+        if (!team || !user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or User not found",
+            });
+        }
+        // Remove user from team and remove team from user's teams
+        await user_1.UserModel.findByIdAndUpdate(userId, {
+            $pull: { teams: teamId },
+        });
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $pull: { assignedStudents: userId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: null,
+            message: "Member removed successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in deleteTeamMember:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.deleteTeamMember = deleteTeamMember;
diff --git a/backend/dist/controllers/deleteTeamTeacher.js b/backend/dist/controllers/deleteTeamTeacher.js
new file mode 100644
index 0000000000..2a97d79c2c
--- /dev/null
+++ b/backend/dist/controllers/deleteTeamTeacher.js
@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteTeamTeacher = void 0;
+const Team_1 = require("../models/Team");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /teams/{teamId}/teachers/{userId}:
+ *   delete:
+ *     summary: Remove a teacher from a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the teacher to remove
+ *     responses:
+ *       200:
+ *         description: Teacher removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Teacher removed successfully"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const deleteTeamTeacher = async (req, res) => {
+    try {
+        const { teamId, userId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const user = await user_1.UserModel.findById(userId);
+        if (!team || !user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or User not found",
+            });
+        }
+        // Remove teacher from team's assignedTeachers
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $pull: { assignedTeachers: userId },
+        });
+        // Remove team from user's assignedTeams
+        await user_1.UserModel.findByIdAndUpdate(userId, {
+            $pull: { assignedTeams: teamId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: null,
+            message: "Teacher removed successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in deleteTeamTeacher:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.deleteTeamTeacher = deleteTeamTeacher;
diff --git a/backend/dist/controllers/deleteUser.js b/backend/dist/controllers/deleteUser.js
new file mode 100644
index 0000000000..eb9818512f
--- /dev/null
+++ b/backend/dist/controllers/deleteUser.js
@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteUser = void 0;
+const user_1 = require("../models/user");
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+const mongoose_1 = __importDefault(require("mongoose"));
+/**
+ * @swagger
+ * /users/{userId}:
+ *   delete:
+ *     summary: Delete a user and handle their comments/replies
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - name: userId
+ *         in: path
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to delete
+ *     responses:
+ *       200:
+ *         description: User deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 message:
+ *                   type: string
+ *                   example: "User deleted and comments/replies reassigned"
+ *       400:
+ *         description: Invalid input or deletion error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Could not delete user"
+ *                 errors:
+ *                   type: object
+ *                   nullable: true
+ */
+const deleteUser = async (req, res) => {
+    const { userId } = req.params;
+    if (!mongoose_1.default.Types.ObjectId.isValid(userId)) {
+        return res.status(400).json({
+            success: false,
+            message: "Invalid user ID",
+        });
+    }
+    // <-- Use the actual placeholder user ID from your DB
+    const PLACEHOLDER_USER_ID = new mongoose_1.default.Types.ObjectId("68a45fbaca5d5d29fe782190");
+    const session = await mongoose_1.default.startSession();
+    session.startTransaction();
+    try {
+        const user = await user_1.UserModel.findById(userId).session(session);
+        if (!user) {
+            await session.abortTransaction();
+            session.endSession();
+            return res.status(404).json({
+                success: false,
+                message: "User not found",
+            });
+        }
+        // Reassign comments
+        await Comment_1.CommentModel.updateMany({ commentCreatedBy: user._id }, { $set: { commentCreatedBy: PLACEHOLDER_USER_ID } }).session(session);
+        // Reassign replies
+        await Reply_1.Reply.updateMany({ replyCreatedBy: user._id }, { $set: { replyCreatedBy: PLACEHOLDER_USER_ID } }).session(session);
+        // Delete the user
+        await user_1.UserModel.findByIdAndDelete(user._id).session(session);
+        await session.commitTransaction();
+        session.endSession();
+        res.status(200).json({
+            success: true,
+            message: "User deleted and comments/replies reassigned",
+        });
+    }
+    catch (error) {
+        await session.abortTransaction();
+        session.endSession();
+        console.error("❌ Error deleting user:", error);
+        res.status(400).json({
+            success: false,
+            message: "Could not delete user",
+            errors: error instanceof Error ? error.message : error,
+        });
+    }
+};
+exports.deleteUser = deleteUser;
diff --git a/backend/dist/controllers/deleteWorkspace.js b/backend/dist/controllers/deleteWorkspace.js
new file mode 100644
index 0000000000..63d73419c1
--- /dev/null
+++ b/backend/dist/controllers/deleteWorkspace.js
@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteWorkspace = void 0;
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   delete:
+ *     summary: Delete a workspace
+ *     tags:
+ *       - Workspaces
+ *     description: Allows an authenticated user to delete a workspace by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to delete
+ *     responses:
+ *       200:
+ *         description: The workspace was successfully deleted
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was successfully deleted
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was not found
+ *       500:
+ *         description: Server error when deleting the workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not delete workspace from the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete workspace from the database
+ */
+const deleteWorkspace = async (req, res) => {
+    const { workspaceId } = req.params;
+    try {
+        const workspaceDoc = await workspace_1.WorkspaceModel.findById(workspaceId);
+        if (!workspaceDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The workspace was not found",
+            });
+        }
+        await workspace_1.WorkspaceModel.findByIdAndDelete(workspaceId);
+        res.status(200).json({
+            success: true,
+            response: null,
+            message: "The workspace was successfully deleted",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not delete workspace from the database",
+        });
+    }
+};
+exports.deleteWorkspace = deleteWorkspace;
diff --git a/backend/dist/controllers/exportCommentsToSrt.js b/backend/dist/controllers/exportCommentsToSrt.js
new file mode 100644
index 0000000000..b352aef4a2
--- /dev/null
+++ b/backend/dist/controllers/exportCommentsToSrt.js
@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportCommentsToSrt = void 0;
+const Comment_1 = require("../models/Comment");
+const Projects_1 = require("../models/Projects");
+const srtConverter_1 = require("../utils/srtConverter");
+/**
+ * @swagger
+ * /projects/{projectId}/export/srt:
+ *   get:
+ *     summary: Export all comments for a project as SRT subtitle file
+ *     tags:
+ *       - Comments
+ *       - Export
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: SRT file generated successfully
+ *         content:
+ *           text/plain:
+ *             schema:
+ *               type: string
+ *               example: |
+ *                 1
+ *                 00:00:30,000 --> 00:00:35,000
+ *                 John Doe: This is a great point in the video
+ *
+ *                 2
+ *                 00:01:15,000 --> 00:01:20,000
+ *                 [Q] Jane Smith: Can you explain this part?
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Project not found"
+ *       500:
+ *         description: Failed to export comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to export comments to SRT"
+ */
+const exportCommentsToSrt = async (req, res) => {
+    const { projectId } = req.params;
+    try {
+        // Verify project exists
+        const project = await Projects_1.Project.findById(projectId);
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Project not found",
+            });
+        }
+        // Fetch all comments for the project (all types: question, public, private)
+        const comments = await Comment_1.CommentModel.find({
+            projectId,
+        }).populate("commentCreatedBy", "name");
+        // Generate SRT content
+        const srtContent = (0, srtConverter_1.generateSrtContent)(comments);
+        if (!srtContent) {
+            return res.status(200).json({
+                success: true,
+                response: null,
+                message: "No timestamped comments found for this project",
+            });
+        }
+        // Create safe filename from project name
+        const safeProjectName = project.projectName
+            .replace(/[^a-z0-9]/gi, "_")
+            .toLowerCase();
+        const filename = `${safeProjectName}_comments.srt`;
+        // Set headers for file download
+        res.setHeader("Content-Type", "text/plain; charset=utf-8");
+        res.setHeader("Content-Disposition", `attachment; filename="${filename}"`);
+        res.setHeader("Content-Length", Buffer.byteLength(srtContent, "utf-8"));
+        // Send the SRT content
+        return res.status(200).send(srtContent);
+    }
+    catch (error) {
+        console.error("Error exporting comments to SRT:", error);
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to export comments to SRT",
+        });
+    }
+};
+exports.exportCommentsToSrt = exportCommentsToSrt;
diff --git a/backend/dist/controllers/getAllComments.js b/backend/dist/controllers/getAllComments.js
new file mode 100644
index 0000000000..3460340378
--- /dev/null
+++ b/backend/dist/controllers/getAllComments.js
@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getAllComments = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /comments/all:
+ *   get:
+ *     summary: Get all comments
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: All comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890c"
+ *                       commentText:
+ *                         type: string
+ *                         example: "This is a comment."
+ *                       commentType:
+ *                         type: string
+ *                         example: "question"
+ *                       projectId:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890b"
+ *                       commentCreatedBy:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890f"
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *                         example: "2025-08-10T14:48:00.000Z"
+ *                       updatedAt:
+ *                         type: string
+ *                         format: date-time
+ *                         example: "2025-08-10T14:48:00.000Z"
+ *                 message:
+ *                   type: string
+ *                   example: "All comments fetched successfully"
+ *       500:
+ *         description: Failed to fetch comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch comments"
+ */
+const getAllComments = async (req, res) => {
+    try {
+        const comments = await Comment_1.CommentModel.find();
+        return res.status(200).json({
+            success: true,
+            response: comments,
+            message: "All comments fetched successfully",
+        });
+    }
+    catch (error) {
+        console.error("❌ Error fetching all comments:", error);
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch comments",
+        });
+    }
+};
+exports.getAllComments = getAllComments;
diff --git a/backend/dist/controllers/getClassById.js b/backend/dist/controllers/getClassById.js
new file mode 100644
index 0000000000..215b83a73d
--- /dev/null
+++ b/backend/dist/controllers/getClassById.js
@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassById = void 0;
+const Class_1 = require("../models/Class");
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   get:
+ *     summary: Get a single class by ID
+ *     description: Retrieve details of a specific class by its ID.
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to retrieve
+ *     responses:
+ *       200:
+ *         description: Class found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classTitle:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error when fetching class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ */
+const getClassById = async (req, res) => {
+    const { classId } = req.params;
+    try {
+        const foundClass = await Class_1.ClassModel.findById(classId)
+            .populate("workspaceId", "name")
+            .select("classTitle workspaceId");
+        if (!foundClass) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Class was not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: foundClass,
+            message: "Class found",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Class could not be found",
+        });
+    }
+};
+exports.getClassById = getClassById;
diff --git a/backend/dist/controllers/getClasses.js b/backend/dist/controllers/getClasses.js
new file mode 100644
index 0000000000..b49cd5b23b
--- /dev/null
+++ b/backend/dist/controllers/getClasses.js
@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClasses = void 0;
+const Class_1 = require("../models/Class");
+const Team_1 = require("../models/Team");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/classes:
+ *   get:
+ *     summary: Retrieve classes in a workspace based on user role
+ *     description: |
+ *       Retrieve a list of classes with their titles for a specific workspace.
+ *       - Teachers see all classes in the workspace
+ *       - Students only see classes their teams have access to
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to get classes from
+ *     responses:
+ *       200:
+ *         description: A list of classes (filtered by user role and team access for students)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       classTitle:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching classes
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getClasses = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        const userId = req.user?._id;
+        // Get the user to check their role
+        const user = await user_1.UserModel.findById(userId);
+        if (!user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "User not found",
+            });
+        }
+        let result;
+        // Teachers see all classes in the workspace
+        if (user.role === "teacher") {
+            result = await Class_1.ClassModel.find({ workspaceId }).select("classTitle workspaceId");
+        }
+        else {
+            // Students only see classes their teams have access to
+            // Get all teams the student belongs to in this workspace
+            const userTeams = await Team_1.TeamModel.find({
+                _id: { $in: user.teams },
+                workspaceId: workspaceId,
+            }).select("accessTo");
+            // Collect all class IDs from all teams
+            const accessibleClassIds = userTeams.flatMap((team) => team.accessTo);
+            // Get unique class IDs
+            const uniqueClassIds = [...new Set(accessibleClassIds.map((id) => id.toString()))];
+            // Fetch the classes
+            result = await Class_1.ClassModel.find({
+                _id: { $in: uniqueClassIds },
+                workspaceId: workspaceId,
+            }).select("classTitle workspaceId");
+        }
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Classes fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch classes.",
+        });
+    }
+};
+exports.getClasses = getClasses;
diff --git a/backend/dist/controllers/getClassesByTeamAccess.js b/backend/dist/controllers/getClassesByTeamAccess.js
new file mode 100644
index 0000000000..9b6aa16d4e
--- /dev/null
+++ b/backend/dist/controllers/getClassesByTeamAccess.js
@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getClassesByTeamAccess = void 0;
+const Class_1 = require("../models/Class");
+const Team_1 = require("../models/Team");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/classes/team-access:
+ *   get:
+ *     summary: Retrieve classes accessible by user's teams
+ *     description: Retrieve a list of classes that the authenticated user's teams have access to in a specific workspace.
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to get classes from
+ *     responses:
+ *       200:
+ *         description: A list of accessible classes
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       classTitle:
+ *                         type: string
+ *                       workspaceId:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       401:
+ *         description: Unauthorized - missing or invalid token
+ *       500:
+ *         description: Server error fetching classes
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getClassesByTeamAccess = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        const userId = req.user?.id;
+        if (!userId) {
+            return res.status(401).json({
+                success: false,
+                response: null,
+                message: "User not authenticated",
+            });
+        }
+        // Get user's teams in this workspace
+        const userTeams = await Team_1.TeamModel.find({
+            workspaceId,
+            assignedTeachers: userId,
+        }).populate("accessTo");
+        // Extract class IDs that user's teams have access to
+        const accessibleClassIds = new Set();
+        userTeams.forEach((team) => {
+            team.accessTo.forEach((classRef) => {
+                accessibleClassIds.add(classRef.toString());
+            });
+        });
+        // If user has no teams or no team access, return empty array
+        if (accessibleClassIds.size === 0) {
+            return res.status(200).json({
+                success: true,
+                response: [],
+                message: "No accessible classes found",
+            });
+        }
+        // Fetch classes that user's teams have access to
+        const accessibleClasses = await Class_1.ClassModel.find({
+            _id: { $in: Array.from(accessibleClassIds) },
+            workspaceId,
+        }).select("classTitle workspaceId");
+        return res.status(200).json({
+            success: true,
+            response: accessibleClasses,
+            message: "Accessible classes fetched successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in getClassesByTeamAccess:", error);
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch accessible classes.",
+        });
+    }
+};
+exports.getClassesByTeamAccess = getClassesByTeamAccess;
diff --git a/backend/dist/controllers/getCommentById.js b/backend/dist/controllers/getCommentById.js
new file mode 100644
index 0000000000..68af02b4db
--- /dev/null
+++ b/backend/dist/controllers/getCommentById.js
@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCommentById = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   get:
+ *     summary: Get a comment by its ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to retrieve
+ *     responses:
+ *       200:
+ *         description: Comment found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890c"
+ *                     commentText:
+ *                       type: string
+ *                       example: "This is a comment."
+ *                     commentType:
+ *                       type: string
+ *                       example: "question"
+ *                     projectId:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890b"
+ *                     commentCreatedBy:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890f"
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                       example: "2025-08-10T14:48:00.000Z"
+ *                     updatedAt:
+ *                       type: string
+ *                       format: date-time
+ *                       example: "2025-08-10T14:48:00.000Z"
+ *                 message:
+ *                   type: string
+ *                   example: "Comment found"
+ *       404:
+ *         description: Comment was not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Comment was not found"
+ *       500:
+ *         description: Comment could not be fetched
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Error details here"
+ *                 message:
+ *                   type: string
+ *                   example: "Comment could not be fetched"
+ */
+const getCommentById = async (req, res) => {
+    const { commentId } = req.params;
+    try {
+        const comment = await Comment_1.CommentModel.findById({
+            commentId,
+            commentType: "question",
+        });
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Comment was not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: comment,
+            message: "Comment found",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Comment could not be fetched",
+        });
+    }
+};
+exports.getCommentById = getCommentById;
diff --git a/backend/dist/controllers/getComments.js b/backend/dist/controllers/getComments.js
new file mode 100644
index 0000000000..0cd53f5a87
--- /dev/null
+++ b/backend/dist/controllers/getComments.js
@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComments = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /projects/{projectId}/comments:
+ *   get:
+ *     summary: Get comments (type "question") for a project
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: Comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890c"
+ *                       commentText:
+ *                         type: string
+ *                         example: "This is a comment?"
+ *                       commentType:
+ *                         type: string
+ *                         example: "question"
+ *                       commentCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                             example: "Alice"
+ *                           profileImage:
+ *                             type: string
+ *                             example: "https://someurl.com/profile.jpg"
+ *                           role:
+ *                             type: string
+ *                             example: "student"
+ *                       replies:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                               example: "64c1f2a3b9f1e1234567890d"
+ *                             replyText:
+ *                               type: string
+ *                               example: "This is a reply."
+ *                             replyCreatedBy:
+ *                               type: object
+ *                               properties:
+ *                                 name:
+ *                                   type: string
+ *                                   example: "Bob"
+ *                                 profileImage:
+ *                                   type: string
+ *                                   example: "https://someurl.com/profile2.jpg"
+ *                                 role:
+ *                                   type: string
+ *                                   example: "instructor"
+ *                 message:
+ *                   type: string
+ *                   example: "Comments fetched successfully"
+ *       500:
+ *         description: Failed to fetch comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch comments"
+ */
+const getComments = async (req, res) => {
+    const { projectId } = req.params;
+    try {
+        const comments = await Comment_1.CommentModel.find({
+            projectId,
+            commentType: "question",
+        })
+            .populate({
+            path: "replies",
+            populate: {
+                path: "replyCreatedBy",
+                select: "name profileImage role",
+            },
+        })
+            .populate("commentCreatedBy", "name profileImage role");
+        return res.status(200).json({
+            success: true,
+            response: comments,
+            message: "Comments fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch comments",
+        });
+    }
+};
+exports.getComments = getComments;
diff --git a/backend/dist/controllers/getHome.js b/backend/dist/controllers/getHome.js
new file mode 100644
index 0000000000..f438211b40
--- /dev/null
+++ b/backend/dist/controllers/getHome.js
@@ -0,0 +1,120 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHome = void 0;
+const express_list_endpoints_1 = __importDefault(require("express-list-endpoints"));
+const BASE_URL = "https://project-final-simon.onrender.com";
+const endpointDocs = {
+    "/": { description: "API Home", authRequired: false },
+    "/classes": {
+        description: "These are like school cources",
+        authRequired: true,
+    },
+    "/classes/:classId": {
+        description: "Get details for a specific class",
+        authRequired: false,
+    },
+    "/classes/:classId/projects": {
+        description: "Get projects in a class",
+        authRequired: false,
+    },
+    "/classes/projects/with-comments": {
+        description: "Projects with comments included",
+        authRequired: false,
+    },
+    "/projects/:projectId": {
+        description: "Get project details",
+        authRequired: false,
+    },
+    "/projects/:projectId/comments": {
+        description: "Get comments for a project",
+        authRequired: false,
+    },
+    "/comments/all": { description: "List all comments", authRequired: true },
+    "/comments/:commentId": {
+        description: "Get a comment by ID",
+        authRequired: false,
+    },
+    "/projects/:projectId/comments/private": {
+        description: "Private comments",
+        authRequired: true,
+    },
+    "/comments/:commentId/replies": {
+        description: "Get replies for a comment",
+        authRequired: false,
+    },
+    "/user": {
+        description: "Create a new user with image upload",
+        authRequired: false,
+    },
+    "/comments/:commentId/likes": {
+        description: "Like a comment",
+        authRequired: false,
+    },
+    "/replies/:replyId/likes": {
+        description: "Like a reply",
+        authRequired: false,
+    },
+    "/session": { description: "Create a new user session", authRequired: false },
+    "/replies/:replyId": { description: "Update a reply", authRequired: false },
+    "/comments/:commentId/toggle-check": {
+        description: "Toggle comment checked status",
+        authRequired: false,
+    },
+};
+const getHome = (app) => (req, res) => {
+    const endpoints = (0, express_list_endpoints_1.default)(app);
+    const tableRows = endpoints
+        .map((ep) => {
+        const methods = ep.methods
+            .map((m) => `<span class="method method-${m.toLowerCase()}">${m}</span>`)
+            .join(" ");
+        const doc = endpointDocs[ep.path];
+        const description = doc ? doc.description : "";
+        const authRequired = doc && doc.authRequired ? "🔒" : "";
+        const link = `<a href="${BASE_URL}${ep.path}" target="_blank" rel="noopener noreferrer">${ep.path}</a>`;
+        return `
+        <tr>
+          <td class="path">${link}</td>
+          <td class="methods">${methods}</td>
+          <td class="description">${description}</td>
+          <td class="auth-required">${authRequired}</td>
+        </tr>
+      `;
+    })
+        .join("");
+    const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <title>Classymc API</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <h1>Welcome to the Classymc API</h1>
+      <p>Below are the available endpoints and their HTTP methods:</p>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Path</th>
+              <th>Methods</th>
+              <th>Description</th>
+              <th>Requires Authentication</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${tableRows}
+          </tbody>
+        </table>
+      </div>
+    </body>
+    </html>
+  `;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    res.send(html);
+};
+exports.getHome = getHome;
diff --git a/backend/dist/controllers/getPrivateComments.js b/backend/dist/controllers/getPrivateComments.js
new file mode 100644
index 0000000000..a5e6ad24d5
--- /dev/null
+++ b/backend/dist/controllers/getPrivateComments.js
@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPrivateComments = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /projects/{projectId}/comments/private:
+ *   get:
+ *     summary: Get private comments for a project by the authenticated user
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to get private comments for
+ *     responses:
+ *       200:
+ *         description: Private comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       commentText:
+ *                         type: string
+ *                       commentType:
+ *                         type: string
+ *                         example: "private"
+ *                       commentCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                       replies:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Private comments by user fetched successfully"
+ *       401:
+ *         description: Unauthorized, user ID not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Unauthorized: User ID not found"
+ *       500:
+ *         description: Failed to fetch private comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch private comments"
+ */
+const getPrivateComments = async (req, res) => {
+    const { projectId } = req.params;
+    const userId = req.user?._id; // or however your user ID is stored
+    if (!userId) {
+        return res.status(401).json({
+            success: false,
+            response: null,
+            message: "Unauthorized: User ID not found",
+        });
+    }
+    try {
+        const comments = await Comment_1.CommentModel.find({
+            projectId,
+            commentType: "private",
+            commentCreatedBy: userId,
+        })
+            .populate("replies")
+            .populate("commentCreatedBy", "name profileImage role");
+        return res.status(200).json({
+            success: true,
+            response: comments,
+            message: "Private comments by user fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch private comments",
+        });
+    }
+};
+exports.getPrivateComments = getPrivateComments;
diff --git a/backend/dist/controllers/getProjectById.js b/backend/dist/controllers/getProjectById.js
new file mode 100644
index 0000000000..b5c14684ce
--- /dev/null
+++ b/backend/dist/controllers/getProjectById.js
@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProjectById = void 0;
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   get:
+ *     summary: Get a project by ID
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: Project found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890a"
+ *                     projectName:
+ *                       type: string
+ *                       example: "My Cool Project"
+ *                     projectDescription:
+ *                       type: string
+ *                       example: "A project that does cool things"
+ *                     teacher:
+ *                       type: string
+ *                       example: "Mr. Smith"
+ *                     video:
+ *                       type: string
+ *                       example: "https://someurl.com/video.mp4"
+ *                     classId:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890b"
+ *                     projectCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         name:
+ *                           type: string
+ *                           example: "John Doe"
+ *                         email:
+ *                           type: string
+ *                           example: "john@example.com"
+ *                         profileImage:
+ *                           type: string
+ *                           nullable: true
+ *                           example: "https://someurl.com/profile.jpg"
+ *                 message:
+ *                   type: string
+ *                   example: "Project found"
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Project was not found"
+ *       500:
+ *         description: Server error fetching project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Error message or stack trace"
+ *                 message:
+ *                   type: string
+ *                   example: "Project could not be found"
+ */
+const getProjectById = async (req, res) => {
+    const { projectId } = req.params;
+    try {
+        const project = await Projects_1.Project.findById(projectId)
+            .select("projectName projectDescription teacher video classId projectCreatedBy")
+            .populate("projectCreatedBy", "name email profileImage");
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Project was not found",
+            });
+        }
+        const { _id, projectName, projectDescription, video, classId } = project;
+        return res.status(200).json({
+            success: true,
+            response: { _id, projectName, projectDescription, video, classId },
+            message: "Project found",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Project could not be found",
+        });
+    }
+};
+exports.getProjectById = getProjectById;
diff --git a/backend/dist/controllers/getProjects.js b/backend/dist/controllers/getProjects.js
new file mode 100644
index 0000000000..48276d929d
--- /dev/null
+++ b/backend/dist/controllers/getProjects.js
@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProjects = void 0;
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /classes/{classId}/projects:
+ *   get:
+ *     summary: Get projects for a class
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The class ID
+ *     responses:
+ *       200:
+ *         description: A list of projects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       projectName:
+ *                         type: string
+ *                       projectDescription:
+ *                         type: string
+ *                         nullable: true
+ *                       teacher:
+ *                         type: string
+ *                       video:
+ *                         type: string
+ *                         nullable: true
+ *                       thumbnail:
+ *                         type: string
+ *                         nullable: true
+ *                       classId:
+ *                         type: string
+ *                       projectCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                             nullable: true
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error
+ */
+const getProjects = async (req, res) => {
+    try {
+        const { classId } = req.params;
+        const result = await Projects_1.Project.find({ classId })
+            .select("projectName projectDescription teacher video thumbnail classId projectCreatedBy")
+            .populate("projectCreatedBy", "name email profileImage");
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Projects fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch projects.",
+        });
+    }
+};
+exports.getProjects = getProjects;
diff --git a/backend/dist/controllers/getProjectsWithComments.js b/backend/dist/controllers/getProjectsWithComments.js
new file mode 100644
index 0000000000..c38e3eda9d
--- /dev/null
+++ b/backend/dist/controllers/getProjectsWithComments.js
@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProjectsWithComments = void 0;
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /classes/projects/with-comments:
+ *   get:
+ *     summary: Get all projects with comments of type 'question'
+ *     description: Returns a list of projects populated with comments where commentType is 'question', including the commenter’s name, profile image, and role. Also includes the classId and project creator details for each project.
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of projects with filtered comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       classId:
+ *                         type: string
+ *                         description: The ID of the class the project belongs to
+ *                       projectName:
+ *                         type: string
+ *                       projectDescription:
+ *                         type: string
+ *                         nullable: true
+ *                       teacher:
+ *                         type: string
+ *                       video:
+ *                         type: string
+ *                         nullable: true
+ *                       thumbnail:
+ *                         type: string
+ *                         nullable: true
+ *                       projectCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                             nullable: true
+ *                       comments:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             commentText:
+ *                               type: string
+ *                             commentType:
+ *                               type: string
+ *                             commentCreatedBy:
+ *                               type: object
+ *                               properties:
+ *                                 name:
+ *                                   type: string
+ *                                 profileImage:
+ *                                   type: string
+ *                                   nullable: true
+ *                                 role:
+ *                                   type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error
+ */
+const getProjectsWithComments = async (req, res) => {
+    try {
+        const result = await Projects_1.Project.find()
+            .populate({
+            path: "comments",
+            match: { commentType: "question" },
+            populate: {
+                path: "commentCreatedBy",
+                select: "name profileImage role",
+            },
+        })
+            .select("projectName projectDescription teacher video thumbnail classId projectCreatedBy")
+            .populate("projectCreatedBy", "name email profileImage");
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Projects fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch projects.",
+        });
+    }
+};
+exports.getProjectsWithComments = getProjectsWithComments;
diff --git a/backend/dist/controllers/getReplies.js b/backend/dist/controllers/getReplies.js
new file mode 100644
index 0000000000..657af4263d
--- /dev/null
+++ b/backend/dist/controllers/getReplies.js
@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReplies = void 0;
+const Reply_1 = require("../models/Reply");
+/**
+ * @swagger
+ * /comments/{commentId}/replies:
+ *   get:
+ *     summary: Get all replies for a specific comment
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to get replies for
+ *     responses:
+ *       200:
+ *         description: Replies fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       replyText:
+ *                         type: string
+ *                       replyCreatedBy:
+ *                         type: string
+ *                       commentId:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Replies fetched successfully"
+ *       500:
+ *         description: Failed to fetch replies
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch replies"
+ */
+const getReplies = async (req, res) => {
+    const { commentId } = req.params;
+    try {
+        const replies = await Reply_1.Reply.find({ commentId }); // Find replies linked to this comment
+        return res.status(200).json({
+            success: true,
+            response: replies,
+            message: "Replies fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch replies",
+        });
+    }
+};
+exports.getReplies = getReplies;
diff --git a/backend/dist/controllers/getTeamById.js b/backend/dist/controllers/getTeamById.js
new file mode 100644
index 0000000000..c85eaf4a73
--- /dev/null
+++ b/backend/dist/controllers/getTeamById.js
@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTeamById = void 0;
+const Team_1 = require("../models/Team");
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   get:
+ *     summary: Retrieve a team by ID
+ *     description: Retrieve a specific team by its ID with full details.
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to retrieve
+ *     responses:
+ *       200:
+ *         description: Team retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     teamName:
+ *                       type: string
+ *                     createdBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                     assignedTeachers:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                     assignedStudents:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                     workspaceId:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                     accessTo:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           classTitle:
+ *                             type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Team not found"
+ *       500:
+ *         description: Server error fetching team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getTeamById = async (req, res) => {
+    try {
+        const { teamId } = req.params;
+        const result = await Team_1.TeamModel.findById(teamId)
+            .populate("createdBy", "name email")
+            .populate("assignedTeachers", "name email role profileImage")
+            .populate("assignedStudents", "name email role profileImage")
+            .populate("workspaceId", "name")
+            .populate("accessTo", "classTitle");
+        if (!result) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Team fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch team.",
+        });
+    }
+};
+exports.getTeamById = getTeamById;
diff --git a/backend/dist/controllers/getTeams.js b/backend/dist/controllers/getTeams.js
new file mode 100644
index 0000000000..7f2a274843
--- /dev/null
+++ b/backend/dist/controllers/getTeams.js
@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTeams = void 0;
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams:
+ *   get:
+ *     summary: Retrieve all teams in a workspace
+ *     description: Retrieve a list of teams with their names for a specific workspace.
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to get teams from
+ *     responses:
+ *       200:
+ *         description: A list of teams
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       teamName:
+ *                         type: string
+ *                       assignedTeachers:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             name:
+ *                               type: string
+ *                             email:
+ *                               type: string
+ *                             profileImage:
+ *                               type: string
+ *                             role:
+ *                               type: string
+ *                       assignedStudents:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             name:
+ *                               type: string
+ *                             email:
+ *                               type: string
+ *                             profileImage:
+ *                               type: string
+ *                             role:
+ *                               type: string
+ *                       workspaceId:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                       accessTo:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             classTitle:
+ *                               type: string
+ *                       createdBy:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching teams
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getTeams = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        // Get teams from specific workspace with populated assignedTeachers and assignedStudents
+        const workspace = await workspace_1.WorkspaceModel.findById(workspaceId)
+            .populate({
+            path: "teams",
+            select: "teamName assignedTeachers assignedStudents workspaceId accessTo createdBy createdAt",
+            populate: [
+                {
+                    path: "assignedTeachers",
+                    select: "name email profileImage role",
+                },
+                {
+                    path: "assignedStudents",
+                    select: "name email profileImage role",
+                },
+                {
+                    path: "workspaceId",
+                    select: "name",
+                },
+                {
+                    path: "accessTo",
+                    select: "classTitle",
+                },
+                {
+                    path: "createdBy",
+                    select: "name email",
+                },
+            ],
+        })
+            .select("teams");
+        if (!workspace) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Workspace not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: workspace.teams,
+            message: "Teams fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch teams.",
+        });
+    }
+};
+exports.getTeams = getTeams;
diff --git a/backend/dist/controllers/getUserById.js b/backend/dist/controllers/getUserById.js
new file mode 100644
index 0000000000..06e92b613e
--- /dev/null
+++ b/backend/dist/controllers/getUserById.js
@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUserById = void 0;
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /users/{userId}:
+ *   get:
+ *     summary: Get a single user by ID
+ *     description: Retrieve details of a specific user by their ID.
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to retrieve
+ *     responses:
+ *       200:
+ *         description: User found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                     email:
+ *                       type: string
+ *                     role:
+ *                       type: string
+ *                     profileImage:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "User found"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User was not found"
+ *       500:
+ *         description: Server error fetching user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User could not be found"
+ */
+const getUserById = async (req, res) => {
+    try {
+        const { userId } = req.params;
+        const user = await user_1.UserModel.findById(userId).select("-password");
+        if (!user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "User was not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: user,
+            message: "User found",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "User could not be found",
+        });
+    }
+};
+exports.getUserById = getUserById;
diff --git a/backend/dist/controllers/getUserWorkspaces.js b/backend/dist/controllers/getUserWorkspaces.js
new file mode 100644
index 0000000000..641a0a8dea
--- /dev/null
+++ b/backend/dist/controllers/getUserWorkspaces.js
@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUserWorkspaces = void 0;
+const user_1 = require("../models/user");
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /user/workspaces:
+ *   get:
+ *     summary: Get workspaces for the authenticated user
+ *     description: Retrieve all workspaces that the authenticated user belongs to.
+ *     tags:
+ *       - User
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: User workspaces fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "User workspaces fetched successfully"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User not found"
+ *       500:
+ *         description: Server error fetching user workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch user workspaces"
+ */
+const getUserWorkspaces = async (req, res) => {
+    try {
+        const userId = req.user?._id;
+        if (!userId) {
+            return res.status(401).json({
+                success: false,
+                response: null,
+                message: "User not authenticated",
+            });
+        }
+        const user = await user_1.UserModel.findById(userId);
+        if (!user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "User not found",
+            });
+        }
+        // Populate workspace details
+        const workspaces = await workspace_1.WorkspaceModel.find({
+            _id: { $in: user.workspaces },
+        }).select("name createdAt");
+        return res.status(200).json({
+            success: true,
+            response: workspaces,
+            message: "User workspaces fetched successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in getUserWorkspaces:", error);
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch user workspaces",
+        });
+    }
+};
+exports.getUserWorkspaces = getUserWorkspaces;
diff --git a/backend/dist/controllers/getUsers.js b/backend/dist/controllers/getUsers.js
new file mode 100644
index 0000000000..92e3a17f36
--- /dev/null
+++ b/backend/dist/controllers/getUsers.js
@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUsers = void 0;
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /users:
+ *   get:
+ *     summary: Retrieve all users
+ *     description: Retrieve a list of all users in the system.
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                       email:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 message:
+ *                   type: string
+ */
+const getUsers = async (req, res) => {
+    try {
+        const result = await user_1.UserModel.find().select("-password -accessToken");
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Users fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            message: "Failed to fetch users",
+        });
+    }
+};
+exports.getUsers = getUsers;
diff --git a/backend/dist/controllers/getWorkspaceById.js b/backend/dist/controllers/getWorkspaceById.js
new file mode 100644
index 0000000000..a5d5921fb0
--- /dev/null
+++ b/backend/dist/controllers/getWorkspaceById.js
@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWorkspaceById = void 0;
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   get:
+ *     summary: Retrieve a workspace by ID
+ *     description: Retrieve a specific workspace by its ID with full details.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to retrieve
+ *     responses:
+ *       200:
+ *         description: Workspace retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                     createdBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                     teams:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                     classes:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           classTitle:
+ *                             type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace not found"
+ *       500:
+ *         description: Server error fetching workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getWorkspaceById = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        const result = await workspace_1.WorkspaceModel.findById(workspaceId)
+            .populate("createdBy", "name email")
+            .populate("teams", "teamName")
+            .populate("classes", "classTitle");
+        if (!result) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Workspace not found",
+            });
+        }
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Workspace fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch workspace.",
+        });
+    }
+};
+exports.getWorkspaceById = getWorkspaceById;
diff --git a/backend/dist/controllers/getWorkspaceUsers.js b/backend/dist/controllers/getWorkspaceUsers.js
new file mode 100644
index 0000000000..b8ddd4e874
--- /dev/null
+++ b/backend/dist/controllers/getWorkspaceUsers.js
@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWorkspaceUsers = void 0;
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/users:
+ *   get:
+ *     summary: Get all users in a workspace
+ *     description: Retrieve a list of all users who are members of a specific workspace.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace
+ *     responses:
+ *       200:
+ *         description: Users retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                       email:
+ *                         type: string
+ *                       role:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace users fetched successfully"
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace not found"
+ *       500:
+ *         description: Server error fetching workspace users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch workspace users"
+ */
+const getWorkspaceUsers = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        const result = await user_1.UserModel.find({ workspaces: workspaceId }).select("name email role profileImage");
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Workspace users fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch workspace users.",
+        });
+    }
+};
+exports.getWorkspaceUsers = getWorkspaceUsers;
diff --git a/backend/dist/controllers/getWorkspaces.js b/backend/dist/controllers/getWorkspaces.js
new file mode 100644
index 0000000000..41f8d4fa12
--- /dev/null
+++ b/backend/dist/controllers/getWorkspaces.js
@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWorkspaces = void 0;
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspaces:
+ *   get:
+ *     summary: Retrieve all workspaces
+ *     description: Retrieve a list of workspaces with their names.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+const getWorkspaces = async (req, res) => {
+    try {
+        const result = await workspace_1.WorkspaceModel.find().select("name");
+        return res.status(200).json({
+            success: true,
+            response: result,
+            message: "Workspaces fetched successfully",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to fetch workspaces.",
+        });
+    }
+};
+exports.getWorkspaces = getWorkspaces;
diff --git a/backend/dist/controllers/patchClass.js b/backend/dist/controllers/patchClass.js
new file mode 100644
index 0000000000..0b478c50f2
--- /dev/null
+++ b/backend/dist/controllers/patchClass.js
@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchClass = void 0;
+const Class_1 = require("../models/Class");
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   patch:
+ *     summary: Update an existing class's title
+ *     tags:
+ *       - Classes
+ *     description: Allows an authenticated user to update the title of a class by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newTitle:
+ *                 type: string
+ *                 example: Updated Class Title
+ *     responses:
+ *       200:
+ *         description: The class was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Class'
+ *                 message:
+ *                   type: string
+ *                   example: The class was successfully updated
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The class was not found
+ *       500:
+ *         description: Server error when updating the class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change class in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change class in the database
+ */
+const patchClass = async (req, res) => {
+    const { classId } = req.params;
+    const { newTitle } = req.body;
+    try {
+        const classDoc = await Class_1.ClassModel.findById(classId);
+        if (!classDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The class was not found",
+            });
+        }
+        if (newTitle)
+            classDoc.classTitle = newTitle;
+        const updatedClass = await classDoc.save();
+        res.status(200).json({
+            success: true,
+            response: updatedClass,
+            message: "The class was successfully updated",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change class in the database",
+        });
+    }
+};
+exports.patchClass = patchClass;
diff --git a/backend/dist/controllers/patchComment.js b/backend/dist/controllers/patchComment.js
new file mode 100644
index 0000000000..c3e5a0dc0e
--- /dev/null
+++ b/backend/dist/controllers/patchComment.js
@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchComment = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   patch:
+ *     summary: Update a comment's content by ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - newContent
+ *             properties:
+ *               newContent:
+ *                 type: string
+ *                 example: Updated comment content here
+ *     responses:
+ *       200:
+ *         description: Comment updated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Comment'  # Assuming you have a Comment schema defined
+ *                 message:
+ *                   type: string
+ *                   example: The comment was successfully changed
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: The comment was not found
+ *       500:
+ *         description: Server error updating comment
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change comment in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change comment in the database
+ */
+const patchComment = async (req, res) => {
+    const { commentId } = req.params;
+    const { newContent } = req.body;
+    try {
+        const comment = await Comment_1.CommentModel.findById(commentId);
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The comment was not found",
+            });
+        }
+        comment.content = newContent;
+        const updatedComment = await comment.save();
+        res.status(200).json({
+            success: true,
+            response: updatedComment,
+            message: "The comment was successfully changed",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change comment in the database",
+        });
+    }
+};
+exports.patchComment = patchComment;
diff --git a/backend/dist/controllers/patchIsChecked.js b/backend/dist/controllers/patchIsChecked.js
new file mode 100644
index 0000000000..1d3ae8c33e
--- /dev/null
+++ b/backend/dist/controllers/patchIsChecked.js
@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchIsChecked = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /comments/{commentId}/isChecked:
+ *   patch:
+ *     summary: Toggle the isChecked status of a comment by ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to toggle isChecked
+ *     responses:
+ *       200:
+ *         description: Comment isChecked status toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: Updated comment object with populated replies and creator info
+ *                 message:
+ *                   type: string
+ *                   example: Comment check status toggled successfully
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Comment not found
+ *       500:
+ *         description: Server error toggling comment check status
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Failed to toggle comment check status
+ */
+const patchIsChecked = async (req, res) => {
+    const { commentId } = req.params;
+    try {
+        const comment = await Comment_1.CommentModel.findById(commentId).populate("commentCreatedBy", "name profileImage role");
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Comment not found",
+            });
+        }
+        // Toggle isChecked
+        comment.isChecked = !comment.isChecked;
+        await comment.save();
+        // Re-fetch the updated comment to ensure population
+        const updatedComment = await Comment_1.CommentModel.findById(commentId)
+            .populate({
+            path: "replies",
+            select: "replyCreatedBy replyLikes content createdAt",
+            populate: {
+                path: "replyCreatedBy",
+                select: "name profileImage role",
+            },
+        })
+            .populate("commentCreatedBy", "name profileImage role");
+        return res.status(200).json({
+            success: true,
+            response: updatedComment,
+            message: "Comment check status toggled successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error toggling isChecked:", error);
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Failed to toggle comment check status",
+        });
+    }
+};
+exports.patchIsChecked = patchIsChecked;
diff --git a/backend/dist/controllers/patchProjects.js b/backend/dist/controllers/patchProjects.js
new file mode 100644
index 0000000000..93c6b783a6
--- /dev/null
+++ b/backend/dist/controllers/patchProjects.js
@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchProject = void 0;
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   patch:
+ *     summary: Update an existing project's name, description, and/or teacher
+ *     tags:
+ *       - Projects
+ *     description: Allows an authenticated user to update the name, description, and/or teacher of a project by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Project Title
+ *               newDescription:
+ *                 type: string
+ *                 example: This is an updated description for the project.
+ *               newTeacher:
+ *                 type: string
+ *                 example: "Mrs. Johnson"
+ *     responses:
+ *       200:
+ *         description: The project was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Project'
+ *                 message:
+ *                   type: string
+ *                   example: The project was successfully updated
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The project was not found
+ *       500:
+ *         description: Server error when updating the project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change project in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change project in the database
+ */
+const patchProject = async (req, res) => {
+    const { projectId } = req.params;
+    const { newName, newDescription, newTeacher } = req.body;
+    try {
+        const project = await Projects_1.Project.findById(projectId);
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The project was not found",
+            });
+        }
+        if (newName)
+            project.projectName = newName;
+        if (newDescription)
+            project.projectDescription = newDescription;
+        if (newTeacher)
+            project.teacher = newTeacher;
+        const updatedProject = await project.save();
+        res.status(200).json({
+            success: true,
+            response: updatedProject,
+            message: "The project was successfully updated",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change project in the database",
+        });
+    }
+};
+exports.patchProject = patchProject;
diff --git a/backend/dist/controllers/patchReply.js b/backend/dist/controllers/patchReply.js
new file mode 100644
index 0000000000..19c7db2b4e
--- /dev/null
+++ b/backend/dist/controllers/patchReply.js
@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchReply = void 0;
+const Reply_1 = require("../models/Reply");
+/**
+ * @swagger
+ * /replies/{replyId}:
+ *   patch:
+ *     summary: Update a reply's content by ID
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the reply to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - newContent
+ *             properties:
+ *               newContent:
+ *                 type: string
+ *                 example: Updated reply content here
+ *     responses:
+ *       200:
+ *         description: Reply updated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Reply'  # assuming you have Reply schema defined
+ *                 message:
+ *                   type: string
+ *                   example: The reply was successfully changed
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: The message was not found
+ *       500:
+ *         description: Server error updating reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change reply in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change reply in the database
+ */
+const patchReply = async (req, res) => {
+    const { replyId } = req.params;
+    const { newContent } = req.body;
+    try {
+        const reply = await Reply_1.Reply.findById(replyId);
+        if (!reply) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The message was not found",
+            });
+        }
+        reply.content = newContent;
+        const updatedReply = await reply.save();
+        res.status(200).json({
+            success: true,
+            response: updatedReply,
+            message: "The reply was successfully changed",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change reply in the database",
+        });
+    }
+};
+exports.patchReply = patchReply;
diff --git a/backend/dist/controllers/patchTeam.js b/backend/dist/controllers/patchTeam.js
new file mode 100644
index 0000000000..4a217565fb
--- /dev/null
+++ b/backend/dist/controllers/patchTeam.js
@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchTeam = void 0;
+const Team_1 = require("../models/Team");
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   patch:
+ *     summary: Update an existing team's name
+ *     tags:
+ *       - Teams
+ *     description: Allows an authenticated user to update the name of a team by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Team Name
+ *     responses:
+ *       200:
+ *         description: The team was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: The team was successfully updated
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was not found
+ *       500:
+ *         description: Server error when updating the team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change team in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change team in the database
+ */
+const patchTeam = async (req, res) => {
+    const { teamId } = req.params;
+    const { newName } = req.body;
+    try {
+        const teamDoc = await Team_1.TeamModel.findById(teamId);
+        if (!teamDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The team was not found",
+            });
+        }
+        if (newName)
+            teamDoc.teamName = newName;
+        const updatedTeam = await teamDoc.save();
+        res.status(200).json({
+            success: true,
+            response: updatedTeam,
+            message: "The team was successfully updated",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change team in the database",
+        });
+    }
+};
+exports.patchTeam = patchTeam;
diff --git a/backend/dist/controllers/patchUser.js b/backend/dist/controllers/patchUser.js
new file mode 100644
index 0000000000..34afa073da
--- /dev/null
+++ b/backend/dist/controllers/patchUser.js
@@ -0,0 +1,165 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchUser = void 0;
+const user_1 = require("../models/user");
+const bcrypt_1 = __importDefault(require("bcrypt"));
+/**
+ * @swagger
+ * /users/{userId}:
+ *   patch:
+ *     summary: Update an existing user's information
+ *     tags:
+ *       - Users
+ *     description: Allows an authenticated user to update a user's name, role, and/or profile image by their ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: "Updated User Name"
+ *               newRole:
+ *                 type: string
+ *                 example: "admin"
+ *               newProfileImage:
+ *                 type: string
+ *                 example: "https://example.com/profile.jpg"
+ *               newPassword:
+ *                 type: string
+ *                 example: "newPassword123"
+ *               newEmail:
+ *                 type: string
+ *                 example: "updated@example.com"
+ *     responses:
+ *       200:
+ *         description: The user was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/User'
+ *                 message:
+ *                   type: string
+ *                   example: "The user was successfully updated"
+ *       400:
+ *         description: Email already registered
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Email is already registered"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "The user was not found"
+ *       500:
+ *         description: Server error when updating the user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Could not change user in the database"
+ *                 message:
+ *                   type: string
+ *                   example: "Could not change user in the database"
+ */
+const patchUser = async (req, res) => {
+    const { userId } = req.params;
+    const { newName, newRole, newProfileImage, newPassword, newEmail } = req.body;
+    try {
+        const user = await user_1.UserModel.findById(userId);
+        if (!user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The user was not found",
+            });
+        }
+        // Check for email uniqueness if email is being updated
+        if (newEmail && newEmail !== user.email) {
+            const existingUser = await user_1.UserModel.findOne({ email: newEmail });
+            if (existingUser) {
+                return res.status(400).json({
+                    success: false,
+                    response: null,
+                    message: "Email is already registered",
+                });
+            }
+        }
+        // Update fields
+        if (newName)
+            user.name = newName;
+        if (newRole)
+            user.role = newRole;
+        if (newEmail)
+            user.email = newEmail.toLowerCase().trim();
+        if (newProfileImage)
+            user.profileImage = newProfileImage;
+        // Hash password if provided
+        if (newPassword) {
+            const salt = bcrypt_1.default.genSaltSync();
+            user.password = bcrypt_1.default.hashSync(newPassword, salt);
+        }
+        const updatedUser = await user.save();
+        res.status(200).json({
+            success: true,
+            response: updatedUser,
+            message: "The user was successfully updated",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change user in the database",
+        });
+    }
+};
+exports.patchUser = patchUser;
diff --git a/backend/dist/controllers/patchWorkspace.js b/backend/dist/controllers/patchWorkspace.js
new file mode 100644
index 0000000000..d4563acee7
--- /dev/null
+++ b/backend/dist/controllers/patchWorkspace.js
@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.patchWorkspace = void 0;
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   patch:
+ *     summary: Update an existing workspace's name
+ *     tags:
+ *       - Workspaces
+ *     description: Allows an authenticated user to update the name of a workspace by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Workspace Name
+ *     responses:
+ *       200:
+ *         description: The workspace was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was successfully updated
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was not found
+ *       500:
+ *         description: Server error when updating the workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change workspace in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change workspace in the database
+ */
+const patchWorkspace = async (req, res) => {
+    const { workspaceId } = req.params;
+    const { newName } = req.body;
+    try {
+        const workspaceDoc = await workspace_1.WorkspaceModel.findById(workspaceId);
+        if (!workspaceDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "The workspace was not found",
+            });
+        }
+        if (newName)
+            workspaceDoc.name = newName;
+        const updatedWorkspace = await workspaceDoc.save();
+        res.status(200).json({
+            success: true,
+            response: updatedWorkspace,
+            message: "The workspace was successfully updated",
+        });
+    }
+    catch (error) {
+        res.status(500).json({
+            success: false,
+            response: error instanceof Error ? error.message : "Unknown error",
+            message: "Could not change workspace in the database",
+        });
+    }
+};
+exports.patchWorkspace = patchWorkspace;
diff --git a/backend/dist/controllers/postClass.js b/backend/dist/controllers/postClass.js
new file mode 100644
index 0000000000..e2b75c8b07
--- /dev/null
+++ b/backend/dist/controllers/postClass.js
@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postClass = void 0;
+const Class_1 = require("../models/Class");
+const workspace_1 = require("../models/workspace");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/classes:
+ *   post:
+ *     summary: Create a new class within a workspace
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to add the class to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - classTitle
+ *             properties:
+ *               classTitle:
+ *                 type: string
+ *                 example: "Math 101"
+ *     responses:
+ *       201:
+ *         description: Class created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classTitle:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Class created successfully"
+ *       400:
+ *         description: Bad Request - missing classTitle
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Class title is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postClass = async (req, res) => {
+    try {
+        const { classTitle } = req.body;
+        const { workspaceId } = req.params;
+        if (!classTitle) {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "Class title is required",
+            });
+        }
+        const newClass = new Class_1.ClassModel({ classTitle, workspaceId });
+        const savedNewClass = await newClass.save();
+        // Update workspace.classes array
+        await workspace_1.WorkspaceModel.findByIdAndUpdate(workspaceId, {
+            $push: { classes: savedNewClass._id },
+        });
+        return res.status(201).json({
+            success: true,
+            response: savedNewClass,
+            message: "Class created successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postClass:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postClass = postClass;
diff --git a/backend/dist/controllers/postCommentById.js b/backend/dist/controllers/postCommentById.js
new file mode 100644
index 0000000000..e8326bd087
--- /dev/null
+++ b/backend/dist/controllers/postCommentById.js
@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postCommentById = void 0;
+const Projects_1 = require("../models/Projects");
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /projects/{projectId}/comments:
+ *   post:
+ *     summary: Add a new comment to a project
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to add a comment to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - content
+ *               - timeStamp
+ *               - commentType
+ *             properties:
+ *               content:
+ *                 type: string
+ *                 example: "This is a comment on the project."
+ *               timeStamp:
+ *                 type: number
+ *                 description: Time in seconds or milliseconds referring to the video timestamp
+ *                 example: 45
+ *               commentType:
+ *                 type: string
+ *                 description: Type of comment (e.g., question, private)
+ *                 example: "question"
+ *     responses:
+ *       201:
+ *         description: Comment added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     content:
+ *                       type: string
+ *                     projectId:
+ *                       type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                     timeStamp:
+ *                       type: number
+ *                     isChecked:
+ *                       type: boolean
+ *                     commentCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                         role:
+ *                           type: string
+ *                     commentType:
+ *                       type: string
+ *                     replies:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                     likes:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Comment added to project"
+ *       400:
+ *         description: Missing required fields
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Comment text, timestamp, and comment type are required"
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Could not add comment"
+ */
+const postCommentById = async (req, res) => {
+    const { projectId } = req.params;
+    const { content, timeStamp, commentType } = req.body;
+    // Validate required fields
+    if (!content || !timeStamp || !commentType) {
+        return res.status(400).json({
+            success: false,
+            response: null,
+            message: "Comment text, timestamp, and comment type are required",
+        });
+    }
+    try {
+        // Find the project
+        const project = await Projects_1.Project.findById(projectId);
+        if (!project) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Project not found",
+            });
+        }
+        // Create a new comment
+        const newComment = new Comment_1.CommentModel({
+            content,
+            projectId: project._id,
+            createdAt: new Date(),
+            timeStamp,
+            isChecked: false,
+            commentCreatedBy: req.user?._id,
+            commentType,
+            replies: [],
+            likes: [],
+        });
+        // Save the comment
+        await newComment.save();
+        // Populate the commentCreatedBy field before returning
+        await newComment.populate("commentCreatedBy", "name profileImage role");
+        // Add comment to the project
+        project.comments.push(newComment._id);
+        await project.save();
+        // Respond with success and populated comment
+        return res.status(201).json({
+            success: true,
+            response: newComment,
+            message: "Comment added to project",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: error,
+            message: "Could not add comment",
+        });
+    }
+};
+exports.postCommentById = postCommentById;
diff --git a/backend/dist/controllers/postLike.js b/backend/dist/controllers/postLike.js
new file mode 100644
index 0000000000..f4f2ca8b84
--- /dev/null
+++ b/backend/dist/controllers/postLike.js
@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postLike = void 0;
+const Comment_1 = require("../models/Comment");
+/**
+ * @swagger
+ * /comments/{commentId}/like:
+ *   post:
+ *     summary: Toggle like on a comment by authenticated user
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the comment to like/unlike
+ *     responses:
+ *       200:
+ *         description: Like toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 liked:
+ *                   type: boolean
+ *                   description: Whether the comment is liked after the toggle
+ *                   example: true
+ *                 totalLikes:
+ *                   type: integer
+ *                   example: 5
+ *                 message:
+ *                   type: string
+ *                   example: "Comment liked"
+ *       401:
+ *         description: User not authenticated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "User not authenticated"
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Comment not found"
+ *       500:
+ *         description: Server error toggling like
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Error toggling like"
+ */
+const postLike = async (req, res) => {
+    const user = req.user;
+    if (!user) {
+        return res.status(401).json({
+            success: false,
+            message: "User not authenticated",
+        });
+    }
+    const { commentId } = req.params;
+    try {
+        const comment = await Comment_1.CommentModel.findById(commentId);
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                message: "Comment not found",
+            });
+        }
+        const hasLiked = comment.likes.includes(user._id);
+        if (hasLiked) {
+            // Unlike
+            comment.likes = comment.likes.filter((id) => id.toString() !== user._id.toString());
+            user.likedComments = user.likedComments.filter((id) => id.toString() !== comment._id.toString());
+        }
+        else {
+            // Like
+            comment.likes.push(user._id);
+            user.likedComments.push(comment._id);
+        }
+        await comment.save();
+        await user.save();
+        return res.status(200).json({
+            success: true,
+            liked: !hasLiked,
+            totalLikes: comment.likes.length,
+            message: hasLiked ? "Comment unliked" : "Comment liked",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            message: "Error toggling like",
+        });
+    }
+};
+exports.postLike = postLike;
diff --git a/backend/dist/controllers/postProject.js b/backend/dist/controllers/postProject.js
new file mode 100644
index 0000000000..4e0e9daf68
--- /dev/null
+++ b/backend/dist/controllers/postProject.js
@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postProject = void 0;
+const Projects_1 = require("../models/Projects");
+/**
+ * @swagger
+ * /classes/{classId}/projects:
+ *   post:
+ *     summary: Create a new project within a class
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the class to add the project to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         multipart/form-data:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - projectName
+ *             properties:
+ *               projectName:
+ *                 type: string
+ *                 example: "My Awesome Project"
+ *               projectDescription:
+ *                 type: string
+ *                 example: "A detailed description of the project."
+ *               teacher:
+ *                 type: string
+ *                 example: "Mr. Smith"
+ *               video:
+ *                 type: string
+ *                 format: binary
+ *                 description: Video file upload
+ *     responses:
+ *       201:
+ *         description: Project created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classId:
+ *                       type: string
+ *                     projectName:
+ *                       type: string
+ *                     projectDescription:
+ *                       type: string
+ *                     teacher:
+ *                       type: string
+ *                     video:
+ *                       type: string
+ *                     thumbnail:
+ *                       type: string
+ *                     projectCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                           nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project created"
+ *       400:
+ *         description: Bad request, missing projectName
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const generateThumbnailUrl = (videoUrl) => {
+    if (!videoUrl)
+        return "";
+    return videoUrl
+        .replace("/video/upload/", "/video/upload/so_3,w_600,h_400,c_fill/")
+        .replace(/\.(mp4|mov|avi)$/i, ".jpg");
+};
+const postProject = async (req, res) => {
+    try {
+        console.log("Received body:", req.body);
+        console.log("Received file:", req.file);
+        const { classId } = req.params;
+        const { projectName, projectDescription, teacher } = req.body;
+        if (!projectName) {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "Project name is required",
+            });
+        }
+        const videoUrl = req.file?.path || "";
+        const thumbnailUrl = generateThumbnailUrl(videoUrl);
+        const newProject = new Projects_1.Project({
+            classId,
+            projectName,
+            projectDescription,
+            teacher,
+            video: videoUrl,
+            thumbnail: thumbnailUrl,
+            projectCreatedBy: req.user?._id,
+        });
+        const savedNewProject = await newProject.save();
+        // Populate the 'projectCreatedBy' field
+        await savedNewProject.populate("projectCreatedBy", "_id name email profileImage");
+        return res.status(201).json({
+            success: true,
+            response: savedNewProject,
+            message: "Project created",
+        });
+    }
+    catch (error) {
+        console.error("Error in postProject:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postProject = postProject;
diff --git a/backend/dist/controllers/postReplyById.js b/backend/dist/controllers/postReplyById.js
new file mode 100644
index 0000000000..aeb536d71e
--- /dev/null
+++ b/backend/dist/controllers/postReplyById.js
@@ -0,0 +1,164 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postReplyById = void 0;
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+/**
+ * @swagger
+ * /comments/{commentId}/replies:
+ *   post:
+ *     summary: Add a reply to a specific comment
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the comment to reply to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - content
+ *             properties:
+ *               content:
+ *                 type: string
+ *                 example: "This is a reply to the comment."
+ *     responses:
+ *       201:
+ *         description: Reply added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     content:
+ *                       type: string
+ *                     commentId:
+ *                       type: string
+ *                     isChecked:
+ *                       type: boolean
+ *                     replyCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                         role:
+ *                           type: string
+ *                     replyLikes:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Reply added to comment"
+ *       400:
+ *         description: Missing reply content
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Reply content is required"
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Comment not found"
+ *       500:
+ *         description: Server error while adding reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Could not add reply"
+ */
+const postReplyById = async (req, res) => {
+    const { commentId } = req.params;
+    const { content } = req.body;
+    if (!content) {
+        return res.status(400).json({
+            success: false,
+            response: null,
+            message: "Reply content is required",
+        });
+    }
+    try {
+        const comment = await Comment_1.CommentModel.findById(commentId);
+        if (!comment) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Comment not found",
+            });
+        }
+        const newReply = new Reply_1.Reply({
+            content,
+            commentId: comment._id,
+            isChecked: false,
+            replyCreatedBy: req.user?._id,
+            replyLikes: [],
+        });
+        await newReply.save();
+        await newReply.populate("replyCreatedBy", "name profileImage role");
+        comment.replies.push(newReply._id);
+        await comment.save();
+        return res.status(201).json({
+            success: true,
+            response: newReply,
+            message: "Reply added to comment",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Could not add reply",
+        });
+    }
+};
+exports.postReplyById = postReplyById;
diff --git a/backend/dist/controllers/postReplyLike.js b/backend/dist/controllers/postReplyLike.js
new file mode 100644
index 0000000000..78660c3eb9
--- /dev/null
+++ b/backend/dist/controllers/postReplyLike.js
@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postReplyLike = void 0;
+const Reply_1 = require("../models/Reply");
+/**
+ * @swagger
+ * /replies/{replyId}/like:
+ *   post:
+ *     summary: Toggle like on a reply by authenticated user
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Like toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 liked:
+ *                   type: boolean
+ *                   description: Whether the reply is liked after the toggle
+ *                   example: true
+ *                 totalLikes:
+ *                   type: integer
+ *                   example: 3
+ *                 message:
+ *                   type: string
+ *                   example: "Reply liked"
+ *       401:
+ *         description: User not authenticated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "User not authenticated"
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Reply not found"
+ *       500:
+ *         description: Server error toggling like
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Error toggling like"
+ */
+const postReplyLike = async (req, res) => {
+    const user = req.user;
+    if (!user) {
+        return res.status(401).json({
+            success: false,
+            message: "User not authenticated",
+        });
+    }
+    const { replyId } = req.params;
+    try {
+        const reply = await Reply_1.Reply.findById(replyId);
+        if (!reply) {
+            return res.status(404).json({
+                success: false,
+                message: "Reply not found",
+            });
+        }
+        const hasLiked = reply.replyLikes.includes(user._id);
+        if (hasLiked) {
+            // Unlike
+            reply.replyLikes = reply.replyLikes.filter((id) => id.toString() !== user._id.toString());
+            user.likedReplies = user.likedReplies.filter((id) => id.toString() !== reply._id.toString());
+        }
+        else {
+            // Like
+            reply.replyLikes.push(user._id);
+            user.likedReplies.push(reply._id);
+        }
+        await reply.save();
+        await user.save();
+        return res.status(200).json({
+            success: true,
+            liked: !hasLiked,
+            totalLikes: reply.replyLikes.length,
+            message: hasLiked ? "Reply unliked" : "Reply liked",
+        });
+    }
+    catch (error) {
+        return res.status(500).json({
+            success: false,
+            message: "Error toggling like",
+        });
+    }
+};
+exports.postReplyLike = postReplyLike;
diff --git a/backend/dist/controllers/postSession.js b/backend/dist/controllers/postSession.js
new file mode 100644
index 0000000000..2492a8d6f6
--- /dev/null
+++ b/backend/dist/controllers/postSession.js
@@ -0,0 +1,104 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postSession = void 0;
+const user_1 = require("../models/user");
+const bcrypt_1 = __importDefault(require("bcrypt"));
+/**
+ * @swagger
+ * /session:
+ *   post:
+ *     summary: User login and create session
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - email
+ *               - password
+ *             properties:
+ *               email:
+ *                 type: string
+ *                 format: email
+ *                 example: user@example.com
+ *               password:
+ *                 type: string
+ *                 example: yourPassword123
+ *     responses:
+ *       200:
+ *         description: User authenticated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 userId:
+ *                   type: string
+ *                   example: 64da2f62f2a4a0a123456789
+ *                 name:
+ *                   type: string
+ *                   example: John Doe
+ *                 role:
+ *                   type: string
+ *                   example: teacher
+ *                 profileImage:
+ *                   type: string
+ *                   example: /uploads/profile123.jpg
+ *                 accessToken:
+ *                   type: string
+ *                   example: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+ *       401:
+ *         description: Unauthorized - invalid email or password
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 notFound:
+ *                   type: boolean
+ *                   example: true
+ *       500:
+ *         description: Internal server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: Internal server error
+ */
+const postSession = async (req, res) => {
+    try {
+        const user = await user_1.UserModel.findOne({ email: req.body.email });
+        if (user && bcrypt_1.default.compareSync(req.body.password, user.password)) {
+            res.json({
+                userId: user._id,
+                name: user.name,
+                role: user.role,
+                profileImage: user.profileImage,
+                accessToken: user.accessToken,
+                teams: user.teams.map((teamId) => teamId.toString()),
+            });
+        }
+        else {
+            res.status(401).json({ notFound: true }); // better to return a 401 for auth failure
+        }
+    }
+    catch (error) {
+        console.error("❌ Error in postSession:", error);
+        res.status(500).json({ success: false, message: "Internal server error" });
+    }
+};
+exports.postSession = postSession;
diff --git a/backend/dist/controllers/postTeam.js b/backend/dist/controllers/postTeam.js
new file mode 100644
index 0000000000..ba331ecd9d
--- /dev/null
+++ b/backend/dist/controllers/postTeam.js
@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postTeam = void 0;
+const Team_1 = require("../models/Team");
+const workspace_1 = require("../models/workspace");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams:
+ *   post:
+ *     summary: Create a new team within a workspace
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to add the team to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - teamName
+ *             properties:
+ *               teamName:
+ *                 type: string
+ *                 example: "Math Team A"
+ *               members:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b3", "60f7b3b3b3b3b3b3b3b3b3b4"]
+ *                 description: Array of user IDs to add as team members
+ *               teachers:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b5"]
+ *                 description: Array of teacher IDs to assign to the team
+ *               classes:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b6", "60f7b3b3b3b3b3b3b3b3b3b7"]
+ *                 description: Array of class IDs to give the team access to
+ *     responses:
+ *       201:
+ *         description: Team created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     teamName:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Team created successfully"
+ *       400:
+ *         description: Bad Request - missing teamName
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postTeam = async (req, res) => {
+    try {
+        const { teamName, members, teachers, classes } = req.body;
+        const { workspaceId } = req.params;
+        const createdBy = req.user?._id;
+        if (!teamName) {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "Team name is required",
+            });
+        }
+        // Verify workspace exists
+        const workspace = await workspace_1.WorkspaceModel.findById(workspaceId);
+        if (!workspace) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Workspace not found",
+            });
+        }
+        const newTeam = new Team_1.TeamModel({
+            teamName,
+            createdBy,
+            workspaceId,
+            assignedTeachers: teachers || [],
+            accessTo: classes || [],
+        });
+        const savedNewTeam = await newTeam.save();
+        // Add team to workspace
+        await workspace_1.WorkspaceModel.findByIdAndUpdate(workspaceId, {
+            $addToSet: { teams: savedNewTeam._id },
+        });
+        // Add members to team (if provided)
+        if (members && members.length > 0) {
+            await user_1.UserModel.updateMany({ _id: { $in: members } }, { $addToSet: { teams: savedNewTeam._id } });
+        }
+        // Add team to assigned teachers (if provided)
+        if (teachers && teachers.length > 0) {
+            await user_1.UserModel.updateMany({ _id: { $in: teachers } }, { $addToSet: { assignedTeams: savedNewTeam._id } });
+        }
+        return res.status(201).json({
+            success: true,
+            response: savedNewTeam,
+            message: "Team created successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postTeam:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postTeam = postTeam;
diff --git a/backend/dist/controllers/postTeamClass.js b/backend/dist/controllers/postTeamClass.js
new file mode 100644
index 0000000000..0db379d98c
--- /dev/null
+++ b/backend/dist/controllers/postTeamClass.js
@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postTeamClass = void 0;
+const Team_1 = require("../models/Team");
+const Class_1 = require("../models/Class");
+/**
+ * @swagger
+ * /teams/{teamId}/classes/{classId}:
+ *   post:
+ *     summary: Give a team access to a class
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to give access to
+ *     responses:
+ *       200:
+ *         description: Class access granted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Class access granted successfully"
+ *       400:
+ *         description: Bad Request - missing classId
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Class ID is required"
+ *       404:
+ *         description: Team or Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or Class not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postTeamClass = async (req, res) => {
+    try {
+        const { teamId, classId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const classDoc = await Class_1.ClassModel.findById(classId);
+        if (!team || !classDoc) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or Class not found",
+            });
+        }
+        // Verify class belongs to same workspace as team
+        // Note: This validation would need to be done by checking which workspace contains this team
+        // For now, we'll allow any class access (you may want to add workspace validation later)
+        // Add class to team's accessTo
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $addToSet: { accessTo: classId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: { teamId, classId },
+            message: "Class access granted successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postTeamClass:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postTeamClass = postTeamClass;
diff --git a/backend/dist/controllers/postTeamMember.js b/backend/dist/controllers/postTeamMember.js
new file mode 100644
index 0000000000..fe9197452c
--- /dev/null
+++ b/backend/dist/controllers/postTeamMember.js
@@ -0,0 +1,131 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postTeamMember = void 0;
+const Team_1 = require("../models/Team");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /teams/{teamId}/members/{userId}:
+ *   post:
+ *     summary: Add a member to a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to add as a member
+ *     responses:
+ *       200:
+ *         description: Member added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Member added successfully"
+ *       400:
+ *         description: Bad Request - missing userId
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "User ID is required"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postTeamMember = async (req, res) => {
+    try {
+        const { teamId, userId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const user = await user_1.UserModel.findById(userId);
+        if (!team || !user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or User not found",
+            });
+        }
+        // Add user to team and add team to user's teams
+        await user_1.UserModel.findByIdAndUpdate(userId, {
+            $addToSet: { teams: teamId },
+        });
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $addToSet: { assignedStudents: userId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: { teamId, userId },
+            message: "Member added successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postTeamMember:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postTeamMember = postTeamMember;
diff --git a/backend/dist/controllers/postTeamTeacher.js b/backend/dist/controllers/postTeamTeacher.js
new file mode 100644
index 0000000000..0a9640dab0
--- /dev/null
+++ b/backend/dist/controllers/postTeamTeacher.js
@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postTeamTeacher = void 0;
+const Team_1 = require("../models/Team");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /teams/{teamId}/teachers/{userId}:
+ *   post:
+ *     summary: Assign a teacher to a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the teacher to assign
+ *     responses:
+ *       200:
+ *         description: Teacher assigned successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Teacher assigned successfully"
+ *       400:
+ *         description: Bad Request - missing userId or user is not a teacher
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "User ID is required"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postTeamTeacher = async (req, res) => {
+    try {
+        const { teamId, userId } = req.params;
+        const team = await Team_1.TeamModel.findById(teamId);
+        const user = await user_1.UserModel.findById(userId);
+        if (!team || !user) {
+            return res.status(404).json({
+                success: false,
+                response: null,
+                message: "Team or User not found",
+            });
+        }
+        if (user.role !== "teacher") {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "User must be a teacher to be assigned to a team",
+            });
+        }
+        // Add teacher to team's assignedTeachers
+        await Team_1.TeamModel.findByIdAndUpdate(teamId, {
+            $addToSet: { assignedTeachers: userId },
+        });
+        // Add team to user's assignedTeams
+        await user_1.UserModel.findByIdAndUpdate(userId, {
+            $addToSet: { assignedTeams: teamId },
+        });
+        return res.status(200).json({
+            success: true,
+            response: { teamId, userId },
+            message: "Teacher assigned successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postTeamTeacher:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postTeamTeacher = postTeamTeacher;
diff --git a/backend/dist/controllers/postUser.js b/backend/dist/controllers/postUser.js
new file mode 100644
index 0000000000..2094f4c229
--- /dev/null
+++ b/backend/dist/controllers/postUser.js
@@ -0,0 +1,186 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postUser = void 0;
+const user_1 = require("../models/user");
+const WorkspaceInvitation_1 = require("../models/WorkspaceInvitation");
+const Team_1 = require("../models/Team");
+const bcrypt_1 = __importDefault(require("bcrypt"));
+/**
+ * @swagger
+ * /users:
+ *   post:
+ *     summary: Create a new user
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         multipart/form-data:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - name
+ *               - email
+ *               - password
+ *               - role
+ *             properties:
+ *               name:
+ *                 type: string
+ *                 example: "John Doe"
+ *               email:
+ *                 type: string
+ *                 format: email
+ *                 example: "john@example.com"
+ *               password:
+ *                 type: string
+ *                 example: "password123"
+ *               role:
+ *                 type: string
+ *                 enum: [teacher, student]
+ *                 example: "student"
+ *               invitationToken:
+ *                 type: string
+ *                 example: "abc123def456"
+ *                 description: Optional invitation token for automatic workspace/team joining
+ *               profileImage:
+ *                 type: string
+ *                 format: binary
+ *                 description: Optional profile image upload
+ *     responses:
+ *       201:
+ *         description: User created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 message:
+ *                   type: string
+ *                   example: "User created"
+ *                 userId:
+ *                   type: string
+ *                 profileImage:
+ *                   type: string
+ *                   nullable: true
+ *                 accessToken:
+ *                   type: string
+ *                   nullable: true
+ *       400:
+ *         description: Invalid input or error creating user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Could not create user"
+ *                 errors:
+ *                   type: object
+ *                   nullable: true
+ */
+const postUser = async (req, res) => {
+    try {
+        const { name, email, password, role, invitationToken } = req.body;
+        const profileImage = req.file?.path || req.body.profileImage;
+        const allowedRoles = ["teacher", "student"];
+        if (!allowedRoles.includes(role)) {
+            return res.status(400).json({
+                success: false,
+                message: `Invalid role. Allowed roles: ${allowedRoles.join(", ")}`,
+            });
+        }
+        // Check for existing email
+        const existingUser = await user_1.UserModel.findOne({ email });
+        if (existingUser) {
+            return res.status(400).json({
+                success: false,
+                message: "Email is already registered",
+            });
+        }
+        // Handle invitation token if provided
+        let invitationWorkspaceId = null;
+        let invitationTeamId = null;
+        if (invitationToken) {
+            const invitation = await WorkspaceInvitation_1.WorkspaceInvitationModel.findOne({
+                token: invitationToken,
+                expiresAt: { $gt: new Date() },
+            });
+            if (!invitation) {
+                return res.status(400).json({
+                    success: false,
+                    message: "Invalid or expired invitation link",
+                });
+            }
+            // Validate that the requested role matches the invitation's allowed role
+            if (role !== invitation.allowedRole) {
+                return res.status(400).json({
+                    success: false,
+                    message: `This invitation is only for ${invitation.allowedRole}s. Please select ${invitation.allowedRole} as your role.`,
+                });
+            }
+            invitationWorkspaceId = invitation.workspaceId;
+            invitationTeamId = invitation.teamId;
+        }
+        const salt = bcrypt_1.default.genSaltSync();
+        const hashedPassword = bcrypt_1.default.hashSync(password, salt);
+        // Prepare user data with workspace if invited
+        const userData = {
+            name,
+            email,
+            password: hashedPassword,
+            role,
+            profileImage,
+        };
+        // Add workspace to user if signing up via invitation
+        if (invitationWorkspaceId) {
+            userData.workspaces = [invitationWorkspaceId];
+        }
+        // Add team to user if signing up via team invitation
+        if (invitationTeamId) {
+            userData.teams = [invitationTeamId];
+        }
+        const user = new user_1.UserModel(userData);
+        await user.save();
+        // Add user to team based on role if signing up via team invitation
+        if (invitationTeamId) {
+            const updateField = user.role === "teacher" ? "assignedTeachers" : "assignedStudents";
+            await Team_1.TeamModel.findByIdAndUpdate(invitationTeamId, {
+                $addToSet: { [updateField]: user._id },
+            });
+        }
+        res.status(201).json({
+            success: true,
+            message: invitationToken
+                ? invitationTeamId
+                    ? "User created and added to team"
+                    : "User created and added to workspace"
+                : "User created",
+            userId: user._id,
+            profileImage: user.profileImage,
+            accessToken: user.accessToken,
+            workspaceId: invitationWorkspaceId,
+            teams: user.teams?.map((teamId) => teamId.toString()) || [],
+        });
+    }
+    catch (error) {
+        console.error("❌ Error creating user:", error);
+        res.status(400).json({
+            success: false,
+            message: "Could not create user",
+            errors: error,
+        });
+    }
+};
+exports.postUser = postUser;
diff --git a/backend/dist/controllers/postWorkspace.js b/backend/dist/controllers/postWorkspace.js
new file mode 100644
index 0000000000..4bf58cbb00
--- /dev/null
+++ b/backend/dist/controllers/postWorkspace.js
@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postWorkspace = void 0;
+const workspace_1 = require("../models/workspace");
+const user_1 = require("../models/user");
+/**
+ * @swagger
+ * /workspace:
+ *   post:
+ *     summary: Create a new workspace
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - name
+ *             properties:
+ *               name:
+ *                 type: string
+ *                 example: "Math Department"
+ *     responses:
+ *       201:
+ *         description: Workspace created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace created successfully"
+ *       400:
+ *         description: Bad Request - missing name
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const postWorkspace = async (req, res) => {
+    try {
+        const { name } = req.body;
+        const createdBy = req.user?._id;
+        if (!name) {
+            return res.status(400).json({
+                success: false,
+                response: null,
+                message: "Workspace name is required",
+            });
+        }
+        const newWorkspace = new workspace_1.WorkspaceModel({
+            name,
+            createdBy,
+        });
+        const savedNewWorkspace = await newWorkspace.save();
+        // Automatically add the creator to the workspace
+        await user_1.UserModel.findByIdAndUpdate(createdBy, { $addToSet: { workspaces: savedNewWorkspace._id } }, { new: true });
+        return res.status(201).json({
+            success: true,
+            response: savedNewWorkspace,
+            message: "Workspace created successfully",
+        });
+    }
+    catch (error) {
+        console.error("Error in postWorkspace:", error);
+        if (error instanceof Error) {
+            return res.status(500).json({
+                success: false,
+                response: null,
+                message: error.message,
+            });
+        }
+        return res.status(500).json({
+            success: false,
+            response: null,
+            message: "Unknown server error",
+        });
+    }
+};
+exports.postWorkspace = postWorkspace;
diff --git a/backend/dist/controllers/workspace-invitation.js b/backend/dist/controllers/workspace-invitation.js
new file mode 100644
index 0000000000..da595824bd
--- /dev/null
+++ b/backend/dist/controllers/workspace-invitation.js
@@ -0,0 +1,580 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deactivateInvitation = exports.deleteInvitation = exports.getInvitationHistory = exports.useInvitationToken = exports.validateInvitationToken = exports.createInvitationLink = void 0;
+const crypto_1 = __importDefault(require("crypto"));
+const WorkspaceInvitation_1 = require("../models/WorkspaceInvitation");
+const user_1 = require("../models/user");
+const workspace_permissions_1 = require("../utils/workspace-permissions");
+/**
+ * @swagger
+ * /workspace/{workspaceId}/invite:
+ *   post:
+ *     summary: Create workspace invitation link (teacher-only)
+ *     description: Generate an invitation link for students to join a workspace. Only teachers can create invitations. The link expires in 7 days.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to invite users to
+ *     responses:
+ *       200:
+ *         description: Invitation link created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                  message:
+ *                    type: string
+ *                    example: "Invitation created successfully"
+ *                  signupLink:
+ *                    type: string
+ *                    example: "https://class-review.netlify.app/signUp?token=abc123def456"
+ *                  expiresAt:
+ *                    type: string
+ *                    format: date-time
+ *       400:
+ *         description: Bad request
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Team does not belong to this workspace"
+ *       403:
+ *         description: Insufficient permissions - Only teachers can create invitations
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to create invitations"
+ *       500:
+ *         description: Server error
+ */
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams/{teamId}/invite:
+ *   post:
+ *     summary: Create team-specific invitation link (teacher-only)
+ *     description: Generate an invitation link for students to join a specific team in a workspace. Only teachers can create invitations. The link expires in 7 days.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to invite users to
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the team to invite users to
+ *     responses:
+ *       200:
+ *         description: Invitation link created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                  message:
+ *                    type: string
+ *                    example: "Invitation created successfully"
+ *                  signupLink:
+ *                    type: string
+ *                    example: "https://class-review.netlify.app/signUp?token=abc123def456"
+ *                  expiresAt:
+ *                    type: string
+ *                    format: date-time
+ *       400:
+ *         description: Bad request
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Team does not belong to this workspace"
+ *       403:
+ *         description: Insufficient permissions - Only teachers can create invitations
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to create invitations"
+ *       500:
+ *         description: Server error
+ */
+const createInvitationLink = async (req, res) => {
+    try {
+        const { workspaceId, teamId } = req.params;
+        const { expiresAt, allowedRole } = req.body;
+        const createdBy = req.user?._id;
+        // Check if user can create invitations (only teachers/admins)
+        const canInvite = await workspace_permissions_1.WorkspacePermissionChecker.canInviteMembers(workspaceId, createdBy?.toString() || "");
+        if (!canInvite) {
+            return res.status(403).json({ message: "You don't have permission to create invitations" });
+        }
+        // If teamId is provided, verify the team belongs to the workspace
+        if (teamId) {
+            const { TeamModel } = await Promise.resolve().then(() => __importStar(require("../models/Team")));
+            const team = await TeamModel.findById(teamId);
+            if (!team || team.workspaceId.toString() !== workspaceId) {
+                return res.status(400).json({ message: "Team does not belong to this workspace" });
+            }
+        }
+        // Validate allowedRole
+        const validRoles = ["student", "teacher"];
+        const invitationRole = allowedRole || "student";
+        if (!validRoles.includes(invitationRole)) {
+            return res.status(400).json({ message: "Invalid role. Allowed roles: student, teacher" });
+        }
+        // Generate unique token
+        const token = crypto_1.default.randomBytes(32).toString("hex");
+        // Determine expiration date: use provided date or default to 7 days
+        let expirationDate;
+        if (expiresAt) {
+            expirationDate = new Date(expiresAt);
+            // Validate that the date is in the future
+            if (expirationDate <= new Date()) {
+                return res.status(400).json({ message: "Expiration date must be in the future" });
+            }
+        }
+        else {
+            expirationDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000); // 7 days default
+        }
+        // Create invitation for specified role
+        const invitation = new WorkspaceInvitation_1.WorkspaceInvitationModel({
+            workspaceId,
+            teamId: teamId || undefined,
+            createdBy,
+            token,
+            expiresAt: expirationDate,
+            allowedRole: invitationRole,
+        });
+        await invitation.save();
+        // Generate the signup link
+        const frontendUrl = process.env.FRONTEND_URL || "http://localhost:5173";
+        const signupLink = `${frontendUrl}/signUp?token=${token}`;
+        res.json({
+            message: "Invitation created successfully",
+            signupLink,
+            expiresAt: invitation.expiresAt,
+        });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.createInvitationLink = createInvitationLink;
+/**
+ * @swagger
+ * /invitation/validate/{token}:
+ *   get:
+ *     summary: Validate invitation token
+ *     description: Check if an invitation token is valid and not expired
+ *     tags:
+ *       - Invitations
+ *     parameters:
+ *       - in: path
+ *         name: token
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The invitation token to validate
+ *     responses:
+ *       200:
+ *         description: Token is valid
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 valid:
+ *                   type: boolean
+ *                   example: true
+ *                 workspace:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                 expiresAt:
+ *                   type: string
+ *                   format: date-time
+ *       400:
+ *         description: Invalid or expired token
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Invalid or expired invitation link"
+ *       500:
+ *         description: Server error
+ */
+const validateInvitationToken = async (req, res) => {
+    try {
+        const { token } = req.params;
+        const invitation = await WorkspaceInvitation_1.WorkspaceInvitationModel.findOne({
+            token,
+            expiresAt: { $gt: new Date() },
+        }).populate("workspaceId");
+        if (!invitation) {
+            return res.status(400).json({ message: "Invalid or expired invitation link" });
+        }
+        res.json({
+            valid: true,
+            workspace: invitation.workspaceId,
+            expiresAt: invitation.expiresAt,
+            allowedRole: invitation.allowedRole,
+        });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.validateInvitationToken = validateInvitationToken;
+/**
+ * @swagger
+ * /invitation/use:
+ *   post:
+ *     summary: Use invitation token to join workspace
+ *     description: Use a valid invitation token to join a workspace or team. The invitation must not be expired and must match the user's role.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - token
+ *             properties:
+ *               token:
+ *                 type: string
+ *                 description: The invitation token to use
+ *                 example: "abc123def456ghi789"
+ *     responses:
+ *       200:
+ *         description: Successfully joined workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Successfully joined workspace"
+ *       400:
+ *         description: Invalid or expired invitation link
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *       403:
+ *         description: Role mismatch - invitation is for a different user role
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "This invitation is only for students. Your role is teacher."
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "User not found"
+ *       500:
+ *         description: Server error
+ */
+const useInvitationToken = async (req, res) => {
+    try {
+        const { token } = req.body;
+        const userId = req.user?._id;
+        const invitation = await WorkspaceInvitation_1.WorkspaceInvitationModel.findOne({
+            token,
+            expiresAt: { $gt: new Date() },
+        });
+        if (!invitation) {
+            return res.status(400).json({ message: "Invalid or expired invitation link" });
+        }
+        // Check if user's role matches the invitation's allowed role
+        const user = await user_1.UserModel.findById(userId);
+        if (!user) {
+            return res.status(404).json({ message: "User not found" });
+        }
+        if (user.role !== invitation.allowedRole) {
+            return res.status(403).json({
+                message: `This invitation is only for ${invitation.allowedRole}s. Your role is ${user.role}.`,
+            });
+        }
+        // Add user to workspace (using $addToSet ensures no duplicates even with multiple uses)
+        await user_1.UserModel.findByIdAndUpdate(userId, {
+            $addToSet: { workspaces: invitation.workspaceId },
+        });
+        res.json({ message: "Successfully joined workspace" });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.useInvitationToken = useInvitationToken;
+/**
+ * @swagger
+ * /workspace/{workspaceId}/invitations:
+ *   get:
+ *     summary: Get invitation history for workspace (teacher-only)
+ *     description: Retrieve the history of all invitations created for a workspace. Only teachers can view this information.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to get invitation history for
+ *     responses:
+ *       200:
+ *         description: Invitation history retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 invitations:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       workspaceId:
+ *                         type: string
+ *                       teamId:
+ *                         type: string
+ *                       createdBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                       token:
+ *                         type: string
+ *                       expiresAt:
+ *                         type: string
+ *                         format: date-time
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *       403:
+ *         description: Insufficient permissions - Only teachers can view invitation history
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to view invitation history"
+ *       500:
+ *         description: Server error
+ */
+const getInvitationHistory = async (req, res) => {
+    try {
+        const { workspaceId } = req.params;
+        const userId = req.user?._id;
+        // Check if user can view invitation history
+        const canView = await workspace_permissions_1.WorkspacePermissionChecker.canInviteMembers(workspaceId, userId?.toString() || "");
+        if (!canView) {
+            return res
+                .status(403)
+                .json({ message: "You don't have permission to view invitation history" });
+        }
+        const invitations = await WorkspaceInvitation_1.WorkspaceInvitationModel.find({ workspaceId })
+            .populate("createdBy", "name email")
+            .sort({ createdAt: -1 });
+        res.json({ invitations });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.getInvitationHistory = getInvitationHistory;
+/**
+ * @swagger
+ * /invitation/{invitationId}:
+ *   delete:
+ *     summary: Delete an invitation link (teacher-only)
+ *     description: Permanently delete an invitation link. Only teachers can delete invitations.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: invitationId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the invitation to delete
+ *     responses:
+ *       200:
+ *         description: Invitation deleted successfully
+ *       403:
+ *         description: Insufficient permissions
+ *       404:
+ *         description: Invitation not found
+ *       500:
+ *         description: Server error
+ */
+const deleteInvitation = async (req, res) => {
+    try {
+        const { invitationId } = req.params;
+        const userId = req.user?._id;
+        const invitation = await WorkspaceInvitation_1.WorkspaceInvitationModel.findById(invitationId);
+        if (!invitation) {
+            return res.status(404).json({ message: "Invitation not found" });
+        }
+        // Check if user can delete invitations
+        const canDelete = await workspace_permissions_1.WorkspacePermissionChecker.canInviteMembers(invitation.workspaceId.toString(), userId?.toString() || "");
+        if (!canDelete) {
+            return res.status(403).json({ message: "You don't have permission to delete invitations" });
+        }
+        await WorkspaceInvitation_1.WorkspaceInvitationModel.findByIdAndDelete(invitationId);
+        res.json({ message: "Invitation deleted successfully" });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.deleteInvitation = deleteInvitation;
+/**
+ * @swagger
+ * /invitation/{invitationId}/deactivate:
+ *   patch:
+ *     summary: Deactivate an invitation link (teacher-only)
+ *     description: Deactivate an invitation link by setting its expiration date to now. Only teachers can deactivate invitations.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: invitationId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the invitation to deactivate
+ *     responses:
+ *       200:
+ *         description: Invitation deactivated successfully
+ *       403:
+ *         description: Insufficient permissions
+ *       404:
+ *         description: Invitation not found
+ *       500:
+ *         description: Server error
+ */
+const deactivateInvitation = async (req, res) => {
+    try {
+        const { invitationId } = req.params;
+        const userId = req.user?._id;
+        const invitation = await WorkspaceInvitation_1.WorkspaceInvitationModel.findById(invitationId);
+        if (!invitation) {
+            return res.status(404).json({ message: "Invitation not found" });
+        }
+        // Check if user can deactivate invitations
+        const canDeactivate = await workspace_permissions_1.WorkspacePermissionChecker.canInviteMembers(invitation.workspaceId.toString(), userId?.toString() || "");
+        if (!canDeactivate) {
+            return res
+                .status(403)
+                .json({ message: "You don't have permission to deactivate invitations" });
+        }
+        // Set expiration to now to effectively deactivate the invitation
+        await WorkspaceInvitation_1.WorkspaceInvitationModel.findByIdAndUpdate(invitationId, {
+            expiresAt: new Date(),
+        });
+        res.json({ message: "Invitation deactivated successfully" });
+    }
+    catch (error) {
+        res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" });
+    }
+};
+exports.deactivateInvitation = deactivateInvitation;
diff --git a/backend/dist/data.json b/backend/dist/data.json
new file mode 100644
index 0000000000..c122c5d2c6
--- /dev/null
+++ b/backend/dist/data.json
@@ -0,0 +1,66 @@
+{
+    "projects": [
+        {
+            "projectName": "Project One",
+            "projectDescription": "Description for project one.",
+            "video": "https://example.com/video1.mp4"
+        },
+        {
+            "projectName": "Project Two",
+            "projectDescription": "Description for project two.",
+            "video": "https://example.com/video2.mp4"
+        },
+        {
+            "projectName": "Project Three",
+            "projectDescription": "Description for project three.",
+            "video": "https://example.com/video3.mp4"
+        },
+        {
+            "projectName": "Project Four",
+            "projectDescription": "Description for project four.",
+            "video": "https://example.com/video4.mp4"
+        }
+    ],
+    "comments": [
+        {
+            "content": "Comment one on Project One",
+            "createdAt": "2025-06-25T10:00:00Z",
+            "timeStamp": "00:10",
+            "projectIndex": 0
+        },
+        {
+            "content": "Comment on Project Two",
+            "createdAt": "2025-06-25T12:00:00Z",
+            "timeStamp": "00:30",
+            "projectIndex": 1
+        },
+        {
+            "content": "Comment on Project Three",
+            "createdAt": "2025-06-25T13:00:00Z",
+            "timeStamp": "00:40",
+            "projectIndex": 2
+        }
+    ],
+    "replies": [
+        {
+            "content": "Reply to comment one on Project One",
+            "createdAt": "2025-06-25T10:15:00Z",
+            "commentIndex": 0
+        },
+        {
+            "content": "Reply to comment one on Project One again",
+            "createdAt": "2025-07-25T10:16:00Z",
+            "commentIndex": 0
+        },
+        {
+            "content": "Reply to comment two on Project One",
+            "createdAt": "2025-06-25T11:15:00Z",
+            "commentIndex": 1
+        },
+        {
+            "content": "Reply to comment on Project Two",
+            "createdAt": "2025-06-25T12:15:00Z",
+            "commentIndex": 2
+        }
+    ]
+}
diff --git a/backend/dist/middleware/authenticateUser.js b/backend/dist/middleware/authenticateUser.js
new file mode 100644
index 0000000000..62ddd40892
--- /dev/null
+++ b/backend/dist/middleware/authenticateUser.js
@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authenticateUser = void 0;
+const user_1 = require("../models/user");
+const authenticateUser = async (req, res, next) => {
+    try {
+        let token = req.header("Authorization");
+        if (!token) {
+            return res.status(400).json({ error: "Authorization header missing" });
+        }
+        // Remove "Bearer " prefix if present
+        if (token.startsWith("Bearer ")) {
+            token = token.slice(7); // removes first 7 characters
+        }
+        const user = await user_1.UserModel.findOne({ accessToken: token });
+        if (!user) {
+            return res
+                .status(401)
+                .json({ error: "Invalid or expired token", loggedOut: true });
+        }
+        req.user = user;
+        next();
+    }
+    catch (err) {
+        console.error("Authentication error:", err);
+        res
+            .status(500)
+            .json({ error: "Internal server error during authentication" });
+    }
+};
+exports.authenticateUser = authenticateUser;
diff --git a/backend/dist/middleware/uploadImage.js b/backend/dist/middleware/uploadImage.js
new file mode 100644
index 0000000000..c7dfe586bf
--- /dev/null
+++ b/backend/dist/middleware/uploadImage.js
@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadImage = void 0;
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const multer_1 = __importDefault(require("multer"));
+const cloudinary_1 = require("cloudinary");
+const multer_storage_cloudinary_1 = require("multer-storage-cloudinary");
+cloudinary_1.v2.config({
+    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+    api_key: process.env.CLOUDINARY_API_KEY,
+    api_secret: process.env.CLOUDINARY_API_SECRET,
+});
+const imageStorage = new multer_storage_cloudinary_1.CloudinaryStorage({
+    cloudinary: cloudinary_1.v2,
+    params: {
+        folder: "profile_pictures",
+        resource_type: "image",
+        allowed_formats: ["jpg", "jpeg", "png", "webp"],
+    },
+});
+exports.uploadImage = (0, multer_1.default)({ storage: imageStorage });
diff --git a/backend/dist/middleware/uploadVideo.js b/backend/dist/middleware/uploadVideo.js
new file mode 100644
index 0000000000..37e65dd737
--- /dev/null
+++ b/backend/dist/middleware/uploadVideo.js
@@ -0,0 +1,32 @@
+"use strict";
+// middleware/uploadVideo.ts
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadVideo = void 0;
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config(); // ✅ this MUST be before Cloudinary config
+const multer_1 = __importDefault(require("multer"));
+const cloudinary_1 = require("cloudinary");
+const multer_storage_cloudinary_1 = require("multer-storage-cloudinary");
+// Optional: debug log
+console.log("Cloudinary ENV check:", {
+    name: process.env.CLOUDINARY_CLOUD_NAME,
+    keySet: !!process.env.CLOUDINARY_API_KEY,
+    secretSet: !!process.env.CLOUDINARY_API_SECRET,
+});
+cloudinary_1.v2.config({
+    cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
+    api_key: process.env.CLOUDINARY_API_KEY,
+    api_secret: process.env.CLOUDINARY_API_SECRET,
+});
+const storage = new multer_storage_cloudinary_1.CloudinaryStorage({
+    cloudinary: cloudinary_1.v2,
+    params: {
+        folder: "videos",
+        resource_type: "video",
+        allowed_formats: ["mp4", "mov", "avi"],
+    },
+});
+exports.uploadVideo = (0, multer_1.default)({ storage });
diff --git a/backend/dist/models/Class.js b/backend/dist/models/Class.js
new file mode 100644
index 0000000000..6e221218f8
--- /dev/null
+++ b/backend/dist/models/Class.js
@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassModel = void 0;
+const mongoose_1 = require("mongoose");
+const ClassSchema = new mongoose_1.Schema({
+    classTitle: { type: String, required: true, maxlength: 100, trim: true },
+    projects: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Project" }],
+    workspaceId: { type: mongoose_1.Schema.Types.ObjectId, ref: "Workspace", required: true },
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.ClassModel = (0, mongoose_1.model)("Class", ClassSchema);
diff --git a/backend/dist/models/Comment.js b/backend/dist/models/Comment.js
new file mode 100644
index 0000000000..de92343f38
--- /dev/null
+++ b/backend/dist/models/Comment.js
@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommentModel = void 0;
+const mongoose_1 = require("mongoose");
+const CommentSchema = new mongoose_1.Schema({
+    content: { type: String, required: true, maxlength: 500, trim: true },
+    projectId: { type: mongoose_1.Schema.Types.ObjectId, ref: "Project", required: true },
+    createdAt: { type: Date, default: Date.now },
+    timeStamp: String,
+    isChecked: { type: Boolean, required: true, default: false },
+    replies: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Reply" }],
+    commentCreatedBy: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    commentType: {
+        type: String,
+        enum: ["question", "public", "private"],
+        required: true,
+    },
+    likes: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "User", default: [] }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.CommentModel = (0, mongoose_1.model)("Comment", CommentSchema);
diff --git a/backend/dist/models/Projects.js b/backend/dist/models/Projects.js
new file mode 100644
index 0000000000..919494e580
--- /dev/null
+++ b/backend/dist/models/Projects.js
@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Project = void 0;
+const mongoose_1 = require("mongoose");
+const ProjectSchema = new mongoose_1.Schema({
+    classId: { type: mongoose_1.Schema.Types.ObjectId, ref: "Class", required: true },
+    projectName: { type: String, required: true, maxlength: 200, trim: true },
+    projectDescription: String,
+    teacher: String,
+    video: String,
+    thumbnail: String,
+    projectCreatedBy: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    comments: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Comment" }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.Project = (0, mongoose_1.model)("Project", ProjectSchema);
diff --git a/backend/dist/models/Reply.js b/backend/dist/models/Reply.js
new file mode 100644
index 0000000000..ffee71ccef
--- /dev/null
+++ b/backend/dist/models/Reply.js
@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Reply = void 0;
+const mongoose_1 = require("mongoose");
+const ReplySchema = new mongoose_1.Schema({
+    content: { type: String, required: true, maxlength: 500, trim: true },
+    commentId: { type: mongoose_1.Schema.Types.ObjectId, ref: "Comment", required: true },
+    createdAt: { type: Date, default: Date.now },
+    isChecked: { type: Boolean, required: true },
+    replyCreatedBy: { type: mongoose_1.Schema.Types.ObjectId, ref: "User", required: true },
+    replyLikes: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "User", default: [] }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.Reply = (0, mongoose_1.model)("Reply", ReplySchema);
diff --git a/backend/dist/models/Team.js b/backend/dist/models/Team.js
new file mode 100644
index 0000000000..7b1595b58c
--- /dev/null
+++ b/backend/dist/models/Team.js
@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeamModel = void 0;
+const mongoose_1 = require("mongoose");
+const TeamSchema = new mongoose_1.Schema({
+    teamName: {
+        type: String,
+        required: true,
+        minlength: 2,
+        maxlength: 100,
+        trim: true,
+    },
+    createdBy: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    createdAt: {
+        type: Date,
+        default: Date.now,
+    },
+    assignedTeachers: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "User", default: [] }],
+    assignedStudents: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "User", default: [] }],
+    workspaceId: { type: mongoose_1.Schema.Types.ObjectId, ref: "Workspace", required: true },
+    accessTo: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Class", default: [] }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.TeamModel = (0, mongoose_1.model)("Team", TeamSchema);
diff --git a/backend/dist/models/WorkspaceInvitation.js b/backend/dist/models/WorkspaceInvitation.js
new file mode 100644
index 0000000000..8d67d1fa71
--- /dev/null
+++ b/backend/dist/models/WorkspaceInvitation.js
@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceInvitationModel = void 0;
+const mongoose_1 = require("mongoose");
+const WorkspaceInvitationSchema = new mongoose_1.Schema({
+    workspaceId: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "Workspace",
+        required: true,
+    },
+    teamId: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "Team",
+        required: false,
+    },
+    createdBy: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    token: {
+        type: String,
+        required: true,
+        unique: true,
+    },
+    expiresAt: {
+        type: Date,
+        required: true,
+        default: () => new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
+    },
+    allowedRole: {
+        type: String,
+        enum: ["student", "teacher"],
+        default: "student",
+    },
+    schemaVersion: { type: String, default: "v2" },
+});
+// Index for performance
+WorkspaceInvitationSchema.index({ token: 1 });
+WorkspaceInvitationSchema.index({ expiresAt: 1 });
+exports.WorkspaceInvitationModel = (0, mongoose_1.model)("WorkspaceInvitation", WorkspaceInvitationSchema);
diff --git a/backend/dist/models/user.js b/backend/dist/models/user.js
new file mode 100644
index 0000000000..c65f4ae85e
--- /dev/null
+++ b/backend/dist/models/user.js
@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserModel = void 0;
+const mongoose_1 = require("mongoose");
+const crypto_1 = __importDefault(require("crypto"));
+const UserSchema = new mongoose_1.Schema({
+    name: {
+        type: String,
+        required: true,
+        minlength: 2,
+        maxlength: 100,
+        trim: true,
+    },
+    email: {
+        type: String,
+        required: true,
+        unique: true,
+        lowercase: true,
+        trim: true,
+    },
+    password: {
+        type: String,
+        required: true,
+        minlength: 4,
+        maxlength: 100,
+        trim: true,
+    },
+    role: {
+        type: String,
+        required: true,
+        enum: ["teacher", "student"],
+    },
+    profileImage: {
+        type: String,
+        default: "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+    },
+    accessToken: {
+        type: String,
+        default: () => crypto_1.default.randomBytes(128).toString("hex"),
+    },
+    likedComments: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Comment", default: [] }],
+    likedReplies: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Reply", default: [] }],
+    workspaces: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Workspace", default: [] }],
+    teams: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Team", default: [] }],
+    assignedTeams: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Team", default: [] }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.UserModel = (0, mongoose_1.model)("User", UserSchema);
diff --git a/backend/dist/models/workspace.js b/backend/dist/models/workspace.js
new file mode 100644
index 0000000000..f2ccbd00f2
--- /dev/null
+++ b/backend/dist/models/workspace.js
@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspaceModel = void 0;
+const mongoose_1 = require("mongoose");
+const WorkspaceSchema = new mongoose_1.Schema({
+    name: {
+        type: String,
+        required: true,
+        minlength: 2,
+        maxlength: 60,
+        trim: true,
+    },
+    classes: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Class", default: [] }],
+    createdBy: {
+        type: mongoose_1.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    createdAt: {
+        type: Date,
+        default: Date.now,
+    },
+    teams: [{ type: mongoose_1.Schema.Types.ObjectId, ref: "Team", default: [] }],
+    schemaVersion: { type: String, default: "v2" },
+});
+exports.WorkspaceModel = (0, mongoose_1.model)("Workspace", WorkspaceSchema);
diff --git a/backend/dist/scripts/migrate-to-workspaces.js b/backend/dist/scripts/migrate-to-workspaces.js
new file mode 100644
index 0000000000..c920991f00
--- /dev/null
+++ b/backend/dist/scripts/migrate-to-workspaces.js
@@ -0,0 +1,191 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const mongoose_1 = __importDefault(require("mongoose"));
+const user_1 = require("../models/user");
+const Class_1 = require("../models/Class");
+const workspace_1 = require("../models/workspace");
+const Team_1 = require("../models/Team");
+const Projects_1 = require("../models/Projects");
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+// Placeholder user ID (the "Deleted User" account)
+const PLACEHOLDER_USER_ID = new mongoose_1.default.Types.ObjectId("68a45fbaca5d5d29fe782190");
+/**
+ * Migration script to convert existing data to workspace-based architecture
+ * This creates "The Academy" workspace and migrates all existing data into it
+ */
+async function migrateToWorkspaces() {
+    const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
+    try {
+        await mongoose_1.default.connect(mongoUrl);
+        console.log("✅ Connected to MongoDB");
+        const session = await mongoose_1.default.startSession();
+        session.startTransaction();
+        try {
+            // Step 1: Check if migration already ran
+            const existingWorkspaces = await workspace_1.WorkspaceModel.countDocuments().session(session);
+            if (existingWorkspaces > 0) {
+                console.log("⚠️  Workspaces already exist. Migration may have already been run.");
+                console.log("   If you want to re-run this migration, please delete all workspaces first.");
+                await session.abortTransaction();
+                session.endSession();
+                await mongoose_1.default.disconnect();
+                return;
+            }
+            // Step 2: Find or create the placeholder user
+            let placeholderUser = await user_1.UserModel.findById(PLACEHOLDER_USER_ID).session(session);
+            if (!placeholderUser) {
+                console.log("📝 Creating placeholder 'Deleted User' account...");
+                const created = await user_1.UserModel.create([
+                    {
+                        _id: PLACEHOLDER_USER_ID,
+                        name: "Deleted User",
+                        email: "deleted@placeholder.local",
+                        password: "$2b$10$placeholder.hash.not.for.login",
+                        role: "student",
+                        profileImage: "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+                        workspaces: [],
+                        teams: [],
+                        assignedTeams: [],
+                        schemaVersion: "v2",
+                    },
+                ], { session });
+                placeholderUser = created[0];
+                console.log("✅ Placeholder user created");
+            }
+            // Step 3: Find the oldest teacher to be the workspace creator
+            const oldestTeacher = await user_1.UserModel.findOne({ role: "teacher" })
+                .sort({ _id: 1 })
+                .session(session);
+            if (!oldestTeacher) {
+                console.log("❌ No teachers found in the database. Cannot create workspace.");
+                console.log("   Please create at least one teacher account first.");
+                await session.abortTransaction();
+                session.endSession();
+                await mongoose_1.default.disconnect();
+                return;
+            }
+            // Step 4: Create "The Academy" workspace
+            console.log("🏫 Creating 'The Academy' workspace...");
+            const theAcademy = await workspace_1.WorkspaceModel.create([
+                {
+                    name: "The Academy",
+                    createdBy: oldestTeacher._id,
+                    createdAt: new Date(),
+                    teams: [],
+                    classes: [],
+                    schemaVersion: "v2",
+                },
+            ], { session });
+            const workspaceId = theAcademy[0]._id;
+            console.log(`✅ Workspace created with ID: ${workspaceId}`);
+            // Step 5: Migrate all users to the workspace (except placeholder)
+            console.log("👥 Migrating all users to workspace...");
+            const allUsers = await user_1.UserModel.find({}).session(session);
+            for (const user of allUsers) {
+                user.workspaces = [workspaceId];
+                user.teams = [];
+                user.assignedTeams = [];
+                user.schemaVersion = "v2";
+                await user.save({ session });
+            }
+            console.log(`✅ Migrated ${allUsers.length} users to workspace`);
+            // Step 6: Create "Spring 2025" team with all students
+            console.log("👥 Creating 'Spring 2025' team with all students...");
+            const allStudents = await user_1.UserModel.find({
+                role: "student",
+                _id: { $ne: PLACEHOLDER_USER_ID }, // Exclude placeholder user
+            }).session(session);
+            const allTeachers = await user_1.UserModel.find({ role: "teacher" }).session(session);
+            const spring2025Team = await Team_1.TeamModel.create([
+                {
+                    teamName: "Spring 2025",
+                    createdBy: oldestTeacher._id,
+                    createdAt: new Date(),
+                    assignedTeachers: allTeachers.map((t) => t._id),
+                    assignedStudents: allStudents.map((s) => s._id),
+                    workspaceId: workspaceId,
+                    accessTo: [], // Will be updated with classes later
+                    schemaVersion: "v2",
+                },
+            ], { session });
+            const teamId = spring2025Team[0]._id;
+            console.log(`✅ Team created with ${allStudents.length} students and ${allTeachers.length} teachers`);
+            // Step 7: Update all students to be part of the team
+            for (const student of allStudents) {
+                student.teams = [teamId];
+                await student.save({ session });
+            }
+            // Step 8: Update all teachers to be assigned to the team
+            for (const teacher of allTeachers) {
+                teacher.assignedTeams = [teamId];
+                await teacher.save({ session });
+            }
+            // Step 9: Migrate all classes to the workspace
+            console.log("📚 Migrating all classes to workspace...");
+            const allClasses = await Class_1.ClassModel.find({}).session(session);
+            for (const cls of allClasses) {
+                cls.workspaceId = workspaceId;
+                cls.schemaVersion = "v2";
+                await cls.save({ session });
+            }
+            // Update workspace with class IDs
+            theAcademy[0].classes = allClasses.map((cls) => cls._id);
+            theAcademy[0].teams = [teamId];
+            await theAcademy[0].save({ session });
+            // Update team with access to all classes
+            spring2025Team[0].accessTo = allClasses.map((cls) => cls._id);
+            await spring2025Team[0].save({ session });
+            console.log(`✅ Migrated ${allClasses.length} classes to workspace and granted team access`);
+            // Step 10: Add schemaVersion to all projects
+            console.log("📁 Updating projects schema...");
+            const projectUpdateResult = await Projects_1.Project.updateMany({ schemaVersion: { $exists: false } }, { $set: { schemaVersion: "v2" } }).session(session);
+            console.log(`✅ Updated ${projectUpdateResult.modifiedCount} projects`);
+            // Step 11: Add schemaVersion to all comments
+            console.log("💬 Updating comments schema...");
+            const commentUpdateResult = await Comment_1.CommentModel.updateMany({ schemaVersion: { $exists: false } }, { $set: { schemaVersion: "v2" } }).session(session);
+            console.log(`✅ Updated ${commentUpdateResult.modifiedCount} comments`);
+            // Step 12: Add schemaVersion to all replies
+            console.log("↩️  Updating replies schema...");
+            const replyUpdateResult = await Reply_1.Reply.updateMany({ schemaVersion: { $exists: false } }, { $set: { schemaVersion: "v2" } }).session(session);
+            console.log(`✅ Updated ${replyUpdateResult.modifiedCount} replies`);
+            // Commit the transaction
+            await session.commitTransaction();
+            console.log("\n🎉 Migration completed successfully!");
+            console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+            console.log(`📊 Summary:`);
+            console.log(`   - Workspace: "The Academy" (ID: ${workspaceId})`);
+            console.log(`   - Team: "Spring 2025" (ID: ${teamId})`);
+            console.log(`   - Users migrated: ${allUsers.length}`);
+            console.log(`   - Students in team: ${allStudents.length}`);
+            console.log(`   - Teachers in team: ${allTeachers.length}`);
+            console.log(`   - Classes migrated: ${allClasses.length}`);
+            console.log(`   - Projects updated: ${projectUpdateResult.modifiedCount}`);
+            console.log(`   - Comments updated: ${commentUpdateResult.modifiedCount}`);
+            console.log(`   - Replies updated: ${replyUpdateResult.modifiedCount}`);
+            console.log(`   - Placeholder user: ${placeholderUser ? "exists" : "created"}`);
+            console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n");
+        }
+        catch (error) {
+            await session.abortTransaction();
+            console.error("❌ Migration failed:", error);
+            throw error;
+        }
+        finally {
+            session.endSession();
+        }
+        await mongoose_1.default.disconnect();
+        console.log("✅ Disconnected from MongoDB");
+    }
+    catch (error) {
+        console.error("❌ Fatal error:", error);
+        process.exit(1);
+    }
+}
+// Run the migration
+migrateToWorkspaces();
diff --git a/backend/dist/server.js b/backend/dist/server.js
new file mode 100644
index 0000000000..c5eb3c41d8
--- /dev/null
+++ b/backend/dist/server.js
@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const dotenv_1 = __importDefault(require("dotenv"));
+dotenv_1.default.config();
+const express_1 = __importDefault(require("express"));
+const cors_1 = __importDefault(require("cors"));
+const mongoose_1 = __importDefault(require("mongoose"));
+const swagger_1 = require("./swagger/swagger");
+const resetDatabase_1 = require("./setup/resetDatabase");
+const routes_1 = __importDefault(require("./Routes/routes"));
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
+mongoose_1.default.connect(mongoUrl);
+const port = parseInt(process.env.PORT || "8080");
+const app = (0, express_1.default)();
+app.use(express_1.default.static("public"));
+const allowedOrigins = [
+    "http://localhost:5173", // your local dev
+    "https://class-review.netlify.app", // your deployed frontend
+];
+// First, parse incoming request bodies
+app.use(express_1.default.json());
+app.use(express_1.default.urlencoded({ extended: true }));
+// Then, configure CORS
+app.use((0, cors_1.default)({
+    origin: function (origin, callback) {
+        if (!origin)
+            return callback(null, true); // allow curl/postman with no origin
+        if (allowedOrigins.indexOf(origin) !== -1) {
+            callback(null, true);
+        }
+        else {
+            callback(null, false); // silently fail without throwing error
+            // or you can do callback(new Error("Not allowed by CORS"));
+        }
+    },
+    methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
+    allowedHeaders: ["Content-Type", "Authorization"],
+}));
+// Handle OPTIONS preflight requests
+app.options("*", (0, cors_1.default)());
+(0, resetDatabase_1.resetDatabase)();
+app.use("/", routes_1.default);
+//This is a documentation helper
+// /api-docs/ for a endpoint
+(0, swagger_1.setupSwagger)(app);
+// Start the server
+app.listen(port, () => {
+    console.log(`Server running on http://localhost:${port}`);
+});
diff --git a/backend/dist/setup/resetDatabase.js b/backend/dist/setup/resetDatabase.js
new file mode 100644
index 0000000000..c6ab786993
--- /dev/null
+++ b/backend/dist/setup/resetDatabase.js
@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetDatabase = void 0;
+const Projects_1 = require("../models/Projects");
+const Comment_1 = require("../models/Comment");
+const Reply_1 = require("../models/Reply");
+const data_json_1 = __importDefault(require("../data.json"));
+const resetDatabase = async () => {
+    if (!process.env.RESET_DB)
+        return;
+    console.log("🌱 Resetting and seeding database...");
+    try {
+        await Reply_1.Reply.deleteMany({});
+        await Comment_1.CommentModel.deleteMany({});
+        await Projects_1.Project.deleteMany({});
+        // Step 1: Insert Projects and keep saved documents
+        const savedProjects = [];
+        for (const project of data_json_1.default.projects) {
+            const savedProject = await new Projects_1.Project(project).save();
+            savedProjects.push(savedProject);
+        }
+        console.log(`Saved ${savedProjects.length} projects.`);
+        // Step 2: Insert Comments with correct projectId and keep saved comments
+        const savedComments = [];
+        for (const comment of data_json_1.default.comments) {
+            if (comment.projectIndex === undefined ||
+                comment.projectIndex < 0 ||
+                comment.projectIndex >= savedProjects.length) {
+                console.error(`Invalid projectIndex ${comment.projectIndex} for comment:`, comment);
+                continue; // skip saving this comment
+            }
+            const projectId = savedProjects[comment.projectIndex]._id;
+            if (!projectId) {
+                console.error(`Missing projectId for comment at projectIndex ${comment.projectIndex}:`, comment);
+                continue; // skip saving
+            }
+            const commentToSave = {
+                content: comment.content,
+                createdAt: new Date(comment.createdAt),
+                timeStamp: comment.timeStamp,
+                projectId,
+                replies: [],
+            };
+            try {
+                const savedComment = await new Comment_1.CommentModel(commentToSave).save();
+                savedComments.push(savedComment);
+            }
+            catch (error) {
+                console.error("Failed to save comment:", commentToSave, error);
+            }
+        }
+        console.log(`Saved ${savedComments.length} comments.`);
+        // Step 3: Insert Replies with correct commentId
+        for (const reply of data_json_1.default.replies) {
+            if (reply.commentIndex === undefined ||
+                reply.commentIndex < 0 ||
+                reply.commentIndex >= savedComments.length) {
+                console.error(`Invalid commentIndex ${reply.commentIndex} for reply:`, reply);
+                continue; // skip saving this reply
+            }
+            const commentId = savedComments[reply.commentIndex]._id;
+            if (!commentId) {
+                console.error(`Missing commentId for reply at commentIndex ${reply.commentIndex}:`, reply);
+                continue;
+            }
+            const replyToSave = {
+                content: reply.content,
+                createdAt: new Date(reply.createdAt),
+                commentId,
+            };
+            try {
+                const savedReply = await new Reply_1.Reply(replyToSave).save();
+                // Add reply ID to the parent comment's replies array
+                const parentComment = savedComments[reply.commentIndex];
+                parentComment.replies.push(savedReply._id);
+                await parentComment.save();
+            }
+            catch (error) {
+                console.error("Failed to save reply:", replyToSave, error);
+            }
+        }
+        console.log("✅ Seeding complete.");
+    }
+    catch (error) {
+        console.error("❌ Error during database reset:", error);
+    }
+};
+exports.resetDatabase = resetDatabase;
diff --git a/backend/dist/swagger/swagger.js b/backend/dist/swagger/swagger.js
new file mode 100644
index 0000000000..6875e61158
--- /dev/null
+++ b/backend/dist/swagger/swagger.js
@@ -0,0 +1,195 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setupSwagger = setupSwagger;
+const swagger_ui_express_1 = __importDefault(require("swagger-ui-express"));
+const swagger_jsdoc_1 = __importDefault(require("swagger-jsdoc"));
+const options = {
+    definition: {
+        openapi: "3.0.0",
+        info: {
+            title: "Classymc API",
+            version: "1.0.0",
+            description: "API documentation for your Classync",
+        },
+        servers: [
+            {
+                url: process.env.API_URL || "http://localhost:8080",
+            },
+        ],
+        components: {
+            schemas: {
+                Class: {
+                    type: "object",
+                    required: ["classTitle"],
+                    properties: {
+                        classTitle: { type: "string", example: "Math 101" },
+                        projects: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                format: "ObjectId",
+                                description: "Project ID",
+                            },
+                        },
+                    },
+                },
+                Comment: {
+                    type: "object",
+                    required: ["content", "projectId", "commentCreatedBy", "commentType"],
+                    properties: {
+                        content: { type: "string", example: "This is a comment." },
+                        projectId: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "Project ID",
+                        },
+                        createdAt: {
+                            type: "string",
+                            format: "date-time",
+                            example: "2023-01-01T12:00:00Z",
+                        },
+                        timeStamp: { type: "string", nullable: true },
+                        isChecked: { type: "boolean", example: false },
+                        replies: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                format: "ObjectId",
+                                description: "Reply ID",
+                            },
+                        },
+                        commentCreatedBy: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "User ID",
+                        },
+                        commentType: {
+                            type: "string",
+                            enum: ["question", "public", "private"],
+                            example: "public",
+                        },
+                        likes: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                format: "ObjectId",
+                                description: "User ID",
+                            },
+                        },
+                    },
+                },
+                Project: {
+                    type: "object",
+                    required: ["classId", "projectName"],
+                    properties: {
+                        classId: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "Class ID",
+                        },
+                        projectName: { type: "string", example: "Final Presentation" },
+                        projectDescription: { type: "string", nullable: true },
+                        video: { type: "string", nullable: true },
+                        thumbnail: { type: "string", nullable: true },
+                        comments: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                format: "ObjectId",
+                                description: "Comment ID",
+                            },
+                        },
+                    },
+                },
+                Reply: {
+                    type: "object",
+                    required: ["content", "commentId", "isChecked", "replyCreatedBy"],
+                    properties: {
+                        content: { type: "string", example: "Nice reply!" },
+                        commentId: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "Comment ID",
+                        },
+                        createdAt: {
+                            type: "string",
+                            format: "date-time",
+                            example: "2023-01-01T12:00:00Z",
+                        },
+                        isChecked: { type: "boolean", example: false },
+                        replyCreatedBy: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "User ID",
+                        },
+                        replyLikes: {
+                            type: "array",
+                            items: {
+                                type: "string",
+                                format: "ObjectId",
+                                description: "User ID",
+                            },
+                        },
+                    },
+                },
+                User: {
+                    type: "object",
+                    required: ["name", "email", "password", "role", "projectCreatedBy"],
+                    properties: {
+                        _id: {
+                            type: "string",
+                            format: "ObjectId",
+                            example: "64d0b2bde5d8f25a1e8d9f67",
+                        },
+                        name: { type: "string", example: "John Doe" },
+                        email: {
+                            type: "string",
+                            format: "email",
+                            example: "john@example.com",
+                        },
+                        password: { type: "string", example: "hashedpassword123" },
+                        role: { type: "string", example: "teacher" },
+                        projectCreatedBy: {
+                            type: "string",
+                            format: "ObjectId",
+                            description: "User ID",
+                        },
+                        profileImage: {
+                            type: "string",
+                            example: "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+                        },
+                        accessToken: { type: "string" },
+                        likedComments: {
+                            type: "array",
+                            items: { type: "string", format: "ObjectId" },
+                        },
+                        likedReplies: {
+                            type: "array",
+                            items: { type: "string", format: "ObjectId" },
+                        },
+                    },
+                },
+            },
+            securitySchemes: {
+                bearerAuth: {
+                    type: "http",
+                    scheme: "bearer",
+                    bearerFormat: "JWT",
+                },
+            },
+        },
+        security: [
+            {
+                bearerAuth: [],
+            },
+        ],
+    },
+    apis: ["./src/controllers/*.ts"],
+};
+const swaggerSpec = (0, swagger_jsdoc_1.default)(options);
+function setupSwagger(app) {
+    app.use("/", swagger_ui_express_1.default.serve, swagger_ui_express_1.default.setup(swaggerSpec));
+}
diff --git a/backend/dist/utils/srtConverter.js b/backend/dist/utils/srtConverter.js
new file mode 100644
index 0000000000..0c330acba3
--- /dev/null
+++ b/backend/dist/utils/srtConverter.js
@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSrtContent = exports.convertToSrtTime = void 0;
+/**
+ * Converts timestamp string to total seconds (supports both MM:SS and MM:SS,mmm formats)
+ * @param timestamp - Time in MM:SS or MM:SS,mmm format
+ * @returns Total seconds as a number (with millisecond precision)
+ */
+const parseTimestamp = (timestamp) => {
+    const [timePart, msPart] = timestamp.split(",");
+    const [minutes, seconds] = timePart.split(":").map(Number);
+    const milliseconds = msPart ? Number(msPart) / 1000 : 0;
+    return minutes * 60 + seconds + milliseconds;
+};
+/**
+ * Converts total seconds to SRT format (HH:MM:SS,mmm)
+ * @param totalSeconds - Total time in seconds (can include decimal milliseconds)
+ * @returns Time in SRT format HH:MM:SS,mmm
+ */
+const secondsToSrtTime = (totalSeconds) => {
+    const hours = Math.floor(totalSeconds / 3600);
+    const mins = Math.floor((totalSeconds % 3600) / 60);
+    const secs = Math.floor(totalSeconds % 60);
+    const ms = Math.floor((totalSeconds % 1) * 1000);
+    return `${hours.toString().padStart(2, "0")}:${mins
+        .toString()
+        .padStart(2, "0")}:${secs.toString().padStart(2, "0")},${ms
+        .toString()
+        .padStart(3, "0")}`;
+};
+/**
+ * Converts MM:SS,mmm or MM:SS timestamp to SRT format (HH:MM:SS,mmm)
+ * @param timestamp - Time in MM:SS,mmm or MM:SS format
+ * @returns Time in SRT format HH:MM:SS,mmm
+ */
+const convertToSrtTime = (timestamp) => {
+    return secondsToSrtTime(parseTimestamp(timestamp));
+};
+exports.convertToSrtTime = convertToSrtTime;
+/**
+ * Generates SRT subtitle content from comments
+ * @param comments - Array of comments with timestamps
+ * @param defaultDuration - Default subtitle duration in seconds (default: 5)
+ * @returns SRT formatted string
+ */
+const generateSrtContent = (comments, defaultDuration = 5) => {
+    // Filter comments that have timestamps and sort by timestamp
+    const timestampedComments = comments
+        .filter((comment) => comment.timeStamp)
+        .sort((a, b) => {
+        const totalA = parseTimestamp(a.timeStamp);
+        const totalB = parseTimestamp(b.timeStamp);
+        return totalA - totalB;
+    });
+    if (timestampedComments.length === 0) {
+        return "";
+    }
+    let srtContent = "";
+    timestampedComments.forEach((comment, index) => {
+        // Subtitle index (1-based)
+        srtContent += `${index + 1}\n`;
+        // Calculate start and end times
+        const startTime = (0, exports.convertToSrtTime)(comment.timeStamp);
+        const currentTotalSecs = parseTimestamp(comment.timeStamp);
+        // End time: either until next comment or +defaultDuration seconds
+        let endTime;
+        if (index < timestampedComments.length - 1) {
+            const nextComment = timestampedComments[index + 1];
+            const nextTotalSecs = parseTimestamp(nextComment.timeStamp);
+            // Use the time until next comment or defaultDuration, whichever is smaller
+            const duration = Math.min(nextTotalSecs - currentTotalSecs, defaultDuration);
+            const endTotalSecs = currentTotalSecs + duration;
+            endTime = secondsToSrtTime(endTotalSecs);
+        }
+        else {
+            // Last comment: add defaultDuration
+            const endTotalSecs = currentTotalSecs + defaultDuration;
+            endTime = secondsToSrtTime(endTotalSecs);
+        }
+        // Timestamp line
+        srtContent += `${startTime} --> ${endTime}\n`;
+        // Comment content only (no author name or type indicator)
+        srtContent += `${comment.content}\n`;
+        // Blank line between subtitles
+        srtContent += `\n`;
+    });
+    return srtContent.trim();
+};
+exports.generateSrtContent = generateSrtContent;
diff --git a/backend/dist/utils/workspace-permissions.js b/backend/dist/utils/workspace-permissions.js
new file mode 100644
index 0000000000..9ac91b3697
--- /dev/null
+++ b/backend/dist/utils/workspace-permissions.js
@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkspacePermissionChecker = void 0;
+const user_1 = require("../models/user");
+class WorkspacePermissionChecker {
+    static async canInviteMembers(workspaceId, userId) {
+        try {
+            const user = await user_1.UserModel.findById(userId);
+            if (!user)
+                return false;
+            // Only teachers can invite members
+            return user.role === "teacher";
+        }
+        catch (error) {
+            return false;
+        }
+    }
+}
+exports.WorkspacePermissionChecker = WorkspacePermissionChecker;
diff --git a/backend/package.json b/backend/package.json
index 08f29f2448..30cf3a374b 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -3,18 +3,38 @@
   "version": "1.0.0",
   "description": "Server part of final project",
   "scripts": {
-    "start": "babel-node server.js",
-    "dev": "nodemon server.js --exec babel-node"
+    "dev": "ts-node-dev --respawn --transpile-only src/server.ts",
+    "build": "tsc",
+    "start": "node dist/server.js",
+    "migrate": "ts-node src/scripts/migrate-to-workspaces.ts"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/node": "^7.16.8",
-    "@babel/preset-env": "^7.16.11",
+    "bcrypt": "^6.0.0",
+    "bcrypt-nodejs": "^0.0.3",
+    "cloudinary": "^1.41.3",
     "cors": "^2.8.5",
-    "express": "^4.17.3",
-    "mongoose": "^8.4.0",
-    "nodemon": "^3.0.1"
+    "crypto": "^1.0.1",
+    "dotenv": "^16.6.1",
+    "express": "^4.21.2",
+    "express-list-endpoints": "^7.1.1",
+    "mongoose": "^8.16.0",
+    "multer": "^2.0.2",
+    "multer-storage-cloudinary": "^4.0.0",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.1"
+  },
+  "devDependencies": {
+    "@types/bcrypt": "^6.0.0",
+    "@types/cors": "^2.8.19",
+    "@types/express": "^4.17.21",
+    "@types/mongoose": "^5.11.97",
+    "@types/multer": "^2.0.0",
+    "@types/node": "^20.4.2",
+    "@types/swagger-ui-express": "^4.1.8",
+    "ts-node": "^10.9.2",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^5.4.5"
   }
 }
\ No newline at end of file
diff --git a/backend/public/styles.css b/backend/public/styles.css
new file mode 100644
index 0000000000..20e2430a7b
--- /dev/null
+++ b/backend/public/styles.css
@@ -0,0 +1,101 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #121212;
+  padding: 20px;
+  color: #e0e0e0;
+}
+
+h1 {
+  color: #eeeeee;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  background: #1e1e1e;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
+  color: #e0e0e0;
+}
+
+th,
+td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #333;
+  vertical-align: top;
+}
+
+tbody tr:nth-child(odd) {
+  background-color: #2a2a2a;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #1e1e1e;
+}
+
+.path {
+  font-family: monospace;
+  color: #4ea1ff;
+}
+
+a {
+  color: #82b1ff;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.method {
+  padding: 3px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  color: white;
+  font-weight: bold;
+  font-family: monospace;
+  margin-right: 6px;
+  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
+}
+
+.method-get {
+  background-color: #2ecc71;
+  /* green */
+}
+
+.method-post {
+  background-color: #3498db;
+  /* blue */
+}
+
+.method-patch {
+  background-color: #f1c40f;
+  /* yellow */
+  color: #222;
+}
+
+.method-delete {
+  background-color: #e74c3c;
+  /* red */
+}
+
+.method-options {
+  background-color: #7f8c8d;
+  /* gray */
+}
+
+.description {
+  font-style: italic;
+  color: #bbbbbb;
+}
+
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  /* smooth scrolling on iOS */
+}
+
+.table-container table {
+  width: 100%;
+  min-width: 600px;
+}
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
deleted file mode 100644
index 070c875189..0000000000
--- a/backend/server.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import express from "express";
-import cors from "cors";
-import mongoose from "mongoose";
-
-const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
-mongoose.connect(mongoUrl);
-mongoose.Promise = Promise;
-
-const port = process.env.PORT || 8080;
-const app = express();
-
-app.use(cors());
-app.use(express.json());
-
-app.get("/", (req, res) => {
-  res.send("Hello Technigo!");
-});
-
-// Start the server
-app.listen(port, () => {
-  console.log(`Server running on http://localhost:${port}`);
-});
diff --git a/backend/src/Routes/invitation-routes.ts b/backend/src/Routes/invitation-routes.ts
new file mode 100644
index 0000000000..bf287b20c6
--- /dev/null
+++ b/backend/src/Routes/invitation-routes.ts
@@ -0,0 +1,32 @@
+import { Router } from "express"
+import { authenticateUser } from "../middleware/authenticateUser"
+import {
+  createInvitationLink,
+  validateInvitationToken,
+  useInvitationToken,
+  getInvitationHistory,
+  deleteInvitation,
+  deactivateInvitation,
+} from "../controllers/workspace-invitation"
+
+const router = Router()
+
+// Create invitation link (teachers only)
+router.post("/workspace/:workspaceId/invite", authenticateUser, createInvitationLink)
+
+// Validate invitation token (public endpoint)
+router.get("/invitation/validate/:token", validateInvitationToken)
+
+// Use invitation token (requires authentication)
+router.post("/invitation/use", authenticateUser, useInvitationToken)
+
+// Get invitation history (teachers only)
+router.get("/workspace/:workspaceId/invitations", authenticateUser, getInvitationHistory)
+
+// Delete invitation (teachers only)
+router.delete("/invitation/:invitationId", authenticateUser, deleteInvitation)
+
+// Deactivate invitation (teachers only)
+router.patch("/invitation/:invitationId/deactivate", authenticateUser, deactivateInvitation)
+
+export default router
diff --git a/backend/src/Routes/routes.ts b/backend/src/Routes/routes.ts
new file mode 100644
index 0000000000..3d00fe3fcc
--- /dev/null
+++ b/backend/src/Routes/routes.ts
@@ -0,0 +1,157 @@
+import express from "express"
+import { authenticateUser } from "../middleware/authenticateUser"
+import { uploadVideo } from "../middleware/uploadVideo"
+import { uploadImage } from "../middleware/uploadImage"
+
+// Import controllers
+import { deleteClass } from "../controllers/deleteClass"
+import { deleteComment } from "../controllers/deleteComment"
+import { deleteProject } from "../controllers/deleteProject"
+import { deleteReply } from "../controllers/deleteReply"
+import { deleteUser } from "../controllers/deleteUser"
+import { getAllComments } from "../controllers/getAllComments"
+import { getClassById } from "../controllers/getClassById"
+import { getClasses } from "../controllers/getClasses"
+import { getCommentById } from "../controllers/getCommentById"
+import { getComments } from "../controllers/getComments"
+import { getHome } from "../controllers/getHome"
+import { getPrivateComments } from "../controllers/getPrivateComments"
+import { getProjectById } from "../controllers/getProjectById"
+import { getProjects } from "../controllers/getProjects"
+import { getProjectsWithComments } from "../controllers/getProjectsWithComments"
+import { getReplies } from "../controllers/getReplies"
+import { patchClass } from "../controllers/patchClass"
+import { patchComment } from "../controllers/patchComment"
+import { patchIsChecked } from "../controllers/patchIsChecked"
+import { patchProject } from "../controllers/patchProjects"
+import { patchReply } from "../controllers/patchReply"
+import { postClass } from "../controllers/postClass"
+import { postCommentById } from "../controllers/postCommentById"
+import { postLike } from "../controllers/postLike"
+import { postProject } from "../controllers/postProject"
+import { postReplyById } from "../controllers/postReplyById"
+import { postReplyLike } from "../controllers/postReplyLike"
+import { postSession } from "../controllers/postSession"
+import { postUser } from "../controllers/postUser"
+import { getUsers } from "../controllers/getUsers"
+import { getUserById } from "../controllers/getUserById"
+import { patchUser } from "../controllers/patchUser"
+import {
+  createInvitationLink,
+  validateInvitationToken,
+  useInvitationToken,
+  getInvitationHistory,
+  deleteInvitation,
+  deactivateInvitation,
+} from "../controllers/workspace-invitation"
+import { postWorkspace } from "../controllers/postWorkspace"
+import { getWorkspaces } from "../controllers/getWorkspaces"
+import { getWorkspaceById } from "../controllers/getWorkspaceById"
+import { patchWorkspace } from "../controllers/patchWorkspace"
+import { deleteWorkspace } from "../controllers/deleteWorkspace"
+import { getWorkspaceUsers } from "../controllers/getWorkspaceUsers"
+import { getUserWorkspaces } from "../controllers/getUserWorkspaces"
+import { postTeam } from "../controllers/postTeam"
+import { getTeams } from "../controllers/getTeams"
+import { getTeamById } from "../controllers/getTeamById"
+import { patchTeam } from "../controllers/patchTeam"
+import { deleteTeam } from "../controllers/deleteTeam"
+import { postTeamMember } from "../controllers/postTeamMember"
+import { deleteTeamMember } from "../controllers/deleteTeamMember"
+import { postTeamTeacher } from "../controllers/postTeamTeacher"
+import { deleteTeamTeacher } from "../controllers/deleteTeamTeacher"
+import { postTeamClass } from "../controllers/postTeamClass"
+import { deleteTeamClass } from "../controllers/deleteTeamClass"
+import { exportCommentsToSrt } from "../controllers/exportCommentsToSrt"
+import { getHealth } from "../controllers/getHealth"
+
+const router = express.Router()
+
+// HEALTH CHECK (for waking up Render free tier)
+router.get("/health", getHealth)
+
+// ALTERNATIVE DOCUMENTATION
+router.get("/alt/doc", getHome)
+
+// WORKSPACES
+router.post("/workspace", authenticateUser, postWorkspace)
+router.get("/workspaces", authenticateUser, getWorkspaces)
+router.get("/workspace/:workspaceId", authenticateUser, getWorkspaceById)
+router.patch("/workspace/:workspaceId", authenticateUser, patchWorkspace)
+router.delete("/workspace/:workspaceId", authenticateUser, deleteWorkspace)
+router.get("/workspace/:workspaceId/users", authenticateUser, getWorkspaceUsers)
+router.get("/user/workspaces", authenticateUser, getUserWorkspaces)
+
+// CLASSES
+router.get("/workspace/:workspaceId/classes", authenticateUser, getClasses)
+router.get("/classes/:classId", authenticateUser, getClassById)
+router.post("/workspace/:workspaceId/classes", postClass)
+router.patch("/classes/:classId", authenticateUser, patchClass)
+router.delete("/classes/:classId", authenticateUser, deleteClass)
+
+// PROJECTS
+router.get("/classes/:classId/projects", authenticateUser, getProjects)
+router.get("/classes/projects/with-comments", authenticateUser, getProjectsWithComments)
+router.get("/projects/:projectId", authenticateUser, getProjectById)
+router.post(
+  "/classes/:classId/projects",
+  uploadVideo.single("video"),
+  authenticateUser,
+  postProject
+)
+router.patch("/projects/:projectId", authenticateUser, patchProject)
+router.delete("/projects/:projectId", authenticateUser, deleteProject)
+
+// COMMENTS
+router.get("/projects/:projectId/comments", getComments)
+router.get("/comments/all", authenticateUser, getAllComments)
+router.get("/comments/:commentId", getCommentById)
+router.get("/projects/:projectId/comments/private", authenticateUser, getPrivateComments)
+router.get("/projects/:projectId/export/srt", authenticateUser, exportCommentsToSrt)
+router.post("/projects/:projectId/comments", authenticateUser, postCommentById)
+router.patch("/comments/:commentId", authenticateUser, patchComment)
+router.patch("/comments/:commentId/toggle-check", authenticateUser, patchIsChecked)
+router.delete("/comments/:commentId", authenticateUser, deleteComment)
+
+// REPLIES
+router.get("/comments/:commentId/replies", getReplies)
+router.post("/comments/:commentId/replies", authenticateUser, postReplyById)
+router.patch("/replies/:replyId", authenticateUser, patchReply)
+router.delete("/replies/:replyId", authenticateUser, deleteReply)
+
+// LIKES
+router.post("/comments/:commentId/likes", authenticateUser, postLike)
+router.post("/replies/:replyId/likes", authenticateUser, postReplyLike)
+
+// USERS & AUTHENTICATION
+router.post("/users", uploadImage.single("image"), postUser)
+router.get("/users/:userId", authenticateUser, getUserById)
+router.delete("/users/:userId", authenticateUser, deleteUser)
+router.patch("/users/:userId", authenticateUser, patchUser)
+router.post("/session", postSession)
+router.get("/users", getUsers)
+
+// WORKSPACE INVITATIONS
+router.post("/workspace/:workspaceId/invite", authenticateUser, createInvitationLink)
+router.post("/workspace/:workspaceId/teams/:teamId/invite", authenticateUser, createInvitationLink)
+router.get("/invitation/validate/:token", validateInvitationToken)
+router.post("/invitation/use", authenticateUser, useInvitationToken)
+router.get("/workspace/:workspaceId/invitations", authenticateUser, getInvitationHistory)
+router.delete("/invitation/:invitationId", authenticateUser, deleteInvitation)
+router.patch("/invitation/:invitationId/deactivate", authenticateUser, deactivateInvitation)
+
+// TEAMS
+router.get("/workspace/:workspaceId/teams", authenticateUser, getTeams)
+router.get("/teams/:teamId", authenticateUser, getTeamById)
+router.post("/workspace/:workspaceId/teams", authenticateUser, postTeam)
+router.patch("/teams/:teamId", authenticateUser, patchTeam)
+router.delete("/teams/:teamId", authenticateUser, deleteTeam)
+// Team management routes (simplified individual operations)
+router.post("/teams/:teamId/members/:userId", authenticateUser, postTeamMember)
+router.delete("/teams/:teamId/members/:userId", authenticateUser, deleteTeamMember)
+router.post("/teams/:teamId/teachers/:userId", authenticateUser, postTeamTeacher)
+router.delete("/teams/:teamId/teachers/:userId", authenticateUser, deleteTeamTeacher)
+router.post("/teams/:teamId/classes/:classId", authenticateUser, postTeamClass)
+router.delete("/teams/:teamId/classes/:classId", authenticateUser, deleteTeamClass)
+
+export default router
diff --git a/backend/src/controllers/OLD-postProject.ts b/backend/src/controllers/OLD-postProject.ts
new file mode 100755
index 0000000000..c555e4a3d3
--- /dev/null
+++ b/backend/src/controllers/OLD-postProject.ts
@@ -0,0 +1,34 @@
+import { Request, Response } from "express"
+import { Project } from "../models/Projects"
+
+export const postProject = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const { projectName, projectDescription } = req.body
+
+    if (!projectName) {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "Project name is required",
+      })
+    }
+
+    const newProject = new Project({ projectName, projectDescription })
+    const savedNewProject = await newProject.save()
+
+    return res.status(201).json({
+      success: true,
+      response: savedNewProject,
+      message: "Project created",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not post project",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteClass.ts b/backend/src/controllers/deleteClass.ts
new file mode 100644
index 0000000000..c7f8bbe8e0
--- /dev/null
+++ b/backend/src/controllers/deleteClass.ts
@@ -0,0 +1,121 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import { Project } from "../models/Projects"
+import { ClassModel } from "../models/Class"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   delete:
+ *     summary: Delete a class and all related projects, comments, and replies
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to delete
+ *     responses:
+ *       200:
+ *         description: Class and related data deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted class object
+ *                 message:
+ *                   type: string
+ *                   example: Class, its projects, comments, and replies were deleted
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Class could not be found
+ *       500:
+ *         description: Server error deleting class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   description: Error object or message
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete class
+ */
+export const deleteClass = async (req: Request, res: Response) => {
+  const { classId } = req.params
+
+  try {
+    const foundClass = await ClassModel.findById(classId)
+    if (!foundClass) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Class could not be found",
+      })
+    }
+
+    // Step 1: Find all comments for this class
+    const comments = await CommentModel.find({ classId })
+
+    // Step 2: Delete all replies related to the comments
+    const commentIds = comments.map((comment) => comment._id)
+    await Reply.deleteMany({ commentId: { $in: commentIds } })
+
+    // Step 3: Delete comments
+    await CommentModel.deleteMany({ classId })
+
+    // Step 4: Delete projects associated with this class
+    if (foundClass.projects && foundClass.projects.length > 0) {
+      await Project.deleteMany({ _id: { $in: foundClass.projects } })
+    }
+
+    // Step 5: Remove class from workspace.classes array
+    await WorkspaceModel.findByIdAndUpdate(foundClass.workspaceId, {
+      $pull: { classes: classId },
+    })
+
+    // Step 6: Delete the class
+    await foundClass.deleteOne()
+
+    return res.status(200).json({
+      success: true,
+      response: foundClass,
+      message: "Class, its projects, comments, and replies were deleted",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not delete class",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteComment.ts b/backend/src/controllers/deleteComment.ts
new file mode 100644
index 0000000000..0b38551cc0
--- /dev/null
+++ b/backend/src/controllers/deleteComment.ts
@@ -0,0 +1,149 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   delete:
+ *     summary: Delete a comment and its replies
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     description: |
+ *       Deletes a comment by ID along with all its replies. Only the comment owner or a teacher can delete the comment.
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to delete
+ *     responses:
+ *       200:
+ *         description: Comment and its replies were deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted comment object
+ *                 message:
+ *                   type: string
+ *                   example: Comment and its replies were deleted
+ *       401:
+ *         description: Unauthorized (user not logged in)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: You must be logged in to delete a comment.
+ *       403:
+ *         description: Forbidden (user not owner or teacher)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: You are not authorized to delete this comment
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Comment could not be found
+ *       500:
+ *         description: Server error deleting comment
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete comment
+ */
+export const deleteComment = async (req: Request, res: Response) => {
+  const { commentId } = req.params
+
+  try {
+    const comment = await CommentModel.findById(commentId)
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Comment could not be found",
+      })
+    }
+
+    const user = req.user
+
+    if (!user || !user._id) {
+      return res.status(401).json({
+        success: false,
+        message: "You must be logged in to delete a comment.",
+      })
+    }
+
+    const isOwner = comment.commentCreatedBy.toString() === user._id.toString()
+    const isTeacher = user.role === "teacher"
+
+    if (!isOwner && !isTeacher) {
+      return res.status(403).json({
+        success: false,
+        message: "You are not authorized to delete this comment",
+      })
+    }
+
+    await Reply.deleteMany({ commentId: comment._id })
+    await Project.updateOne(
+      { _id: comment.projectId },
+      { $pull: { comments: comment._id } }
+    )
+    await comment.deleteOne()
+
+    return res.status(200).json({
+      success: true,
+      response: comment,
+      message: "Comment and its replies were deleted",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not delete comment",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteProject.ts b/backend/src/controllers/deleteProject.ts
new file mode 100644
index 0000000000..c9c9e16a2f
--- /dev/null
+++ b/backend/src/controllers/deleteProject.ts
@@ -0,0 +1,109 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   delete:
+ *     summary: Delete a project along with its comments and replies
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to delete
+ *     responses:
+ *       200:
+ *         description: Project and related comments and replies deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted project object
+ *                 message:
+ *                   type: string
+ *                   example: Project, its comments, and replies were deleted
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Project could not be found
+ *       500:
+ *         description: Server error deleting project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   description: Error object or message
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete project
+ */
+export const deleteProject = async (req: Request, res: Response) => {
+  const { projectId } = req.params
+
+  try {
+    const project = await Project.findById(projectId)
+    if (!project) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Project could not be found",
+      })
+    }
+
+    // Step 1: Find all comments for this project
+    const comments = await CommentModel.find({ projectId })
+
+    // Step 2: Extract comment IDs to delete associated replies
+    const commentIds = comments.map((comment) => comment._id)
+    await Reply.deleteMany({ commentId: { $in: commentIds } })
+
+    // Step 3: Delete comments
+    await CommentModel.deleteMany({ projectId })
+
+    // Step 4: Delete the project itself
+    await project.deleteOne()
+
+    return res.status(200).json({
+      success: true,
+      response: project,
+      message: "Project, its comments, and replies were deleted",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not delete project",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteReply.ts b/backend/src/controllers/deleteReply.ts
new file mode 100644
index 0000000000..2422c805cc
--- /dev/null
+++ b/backend/src/controllers/deleteReply.ts
@@ -0,0 +1,97 @@
+import { Request, Response } from "express"
+import { Reply } from "../models/Reply"
+
+/**
+ * @swagger
+ * /replies/{replyId}:
+ *   delete:
+ *     summary: Delete a reply by ID
+ *     description: Deletes a reply with the specified ID.
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the reply to delete
+ *     responses:
+ *       200:
+ *         description: Reply was deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: The deleted reply object
+ *                 message:
+ *                   type: string
+ *                   example: The reply was deleted
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Reply could not be found
+ *       500:
+ *         description: Server error deleting reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete reply
+ */
+export const deleteReply = async (req: Request, res: Response) => {
+  const { replyId } = req.params
+
+  try {
+    const reply = await Reply.findById(replyId)
+
+    if (!reply) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Reply could not be found",
+      })
+    }
+
+    await reply.deleteOne()
+
+    return res.status(200).json({
+      success: true,
+      response: reply,
+      message: "The reply was deleted",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not delete reply",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteTeam.ts b/backend/src/controllers/deleteTeam.ts
new file mode 100644
index 0000000000..76ad42bb61
--- /dev/null
+++ b/backend/src/controllers/deleteTeam.ts
@@ -0,0 +1,99 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   delete:
+ *     summary: Delete a team
+ *     tags:
+ *       - Teams
+ *     description: Allows an authenticated user to delete a team by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to delete
+ *     responses:
+ *       200:
+ *         description: The team was successfully deleted
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was successfully deleted
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was not found
+ *       500:
+ *         description: Server error when deleting the team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not delete team from the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete team from the database
+ */
+export const deleteTeam = async (req: Request, res: Response) => {
+  const { teamId } = req.params
+
+  try {
+    const teamDoc = await TeamModel.findById(teamId)
+
+    if (!teamDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The team was not found",
+      })
+    }
+
+    await TeamModel.findByIdAndDelete(teamId)
+
+    res.status(200).json({
+      success: true,
+      response: null,
+      message: "The team was successfully deleted",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not delete team from the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteTeamClass.ts b/backend/src/controllers/deleteTeamClass.ts
new file mode 100644
index 0000000000..36fe9f3e6a
--- /dev/null
+++ b/backend/src/controllers/deleteTeamClass.ts
@@ -0,0 +1,117 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { ClassModel } from "../models/Class"
+
+/**
+ * @swagger
+ * /teams/{teamId}/classes/{classId}:
+ *   delete:
+ *     summary: Remove a team's access to a class
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to remove access from
+ *     responses:
+ *       200:
+ *         description: Class access removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Class access removed successfully"
+ *       404:
+ *         description: Team or Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or Class not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const deleteTeamClass = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, classId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const classDoc = await ClassModel.findById(classId)
+
+    if (!team || !classDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or Class not found",
+      })
+    }
+
+    // Remove class from team's accessTo
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $pull: { accessTo: classId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: null,
+      message: "Class access removed successfully",
+    })
+  } catch (error) {
+    console.error("Error in deleteTeamClass:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteTeamMember.ts b/backend/src/controllers/deleteTeamMember.ts
new file mode 100644
index 0000000000..e8028e1d9b
--- /dev/null
+++ b/backend/src/controllers/deleteTeamMember.ts
@@ -0,0 +1,121 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /teams/{teamId}/members/{userId}:
+ *   delete:
+ *     summary: Remove a member from a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to remove
+ *     responses:
+ *       200:
+ *         description: Member removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Member removed successfully"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const deleteTeamMember = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, userId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const user = await UserModel.findById(userId)
+
+    if (!team || !user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or User not found",
+      })
+    }
+
+    // Remove user from team and remove team from user's teams
+    await UserModel.findByIdAndUpdate(userId, {
+      $pull: { teams: teamId },
+    })
+
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $pull: { assignedStudents: userId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: null,
+      message: "Member removed successfully",
+    })
+  } catch (error) {
+    console.error("Error in deleteTeamMember:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteTeamTeacher.ts b/backend/src/controllers/deleteTeamTeacher.ts
new file mode 100644
index 0000000000..ebbaf5d258
--- /dev/null
+++ b/backend/src/controllers/deleteTeamTeacher.ts
@@ -0,0 +1,122 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /teams/{teamId}/teachers/{userId}:
+ *   delete:
+ *     summary: Remove a teacher from a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the teacher to remove
+ *     responses:
+ *       200:
+ *         description: Teacher removed successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Teacher removed successfully"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const deleteTeamTeacher = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, userId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const user = await UserModel.findById(userId)
+
+    if (!team || !user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or User not found",
+      })
+    }
+
+    // Remove teacher from team's assignedTeachers
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $pull: { assignedTeachers: userId },
+    })
+
+    // Remove team from user's assignedTeams
+    await UserModel.findByIdAndUpdate(userId, {
+      $pull: { assignedTeams: teamId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: null,
+      message: "Teacher removed successfully",
+    })
+  } catch (error) {
+    console.error("Error in deleteTeamTeacher:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteUser.ts b/backend/src/controllers/deleteUser.ts
new file mode 100644
index 0000000000..602cd2412f
--- /dev/null
+++ b/backend/src/controllers/deleteUser.ts
@@ -0,0 +1,113 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import mongoose from "mongoose"
+
+/**
+ * @swagger
+ * /users/{userId}:
+ *   delete:
+ *     summary: Delete a user and handle their comments/replies
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - name: userId
+ *         in: path
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to delete
+ *     responses:
+ *       200:
+ *         description: User deleted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 message:
+ *                   type: string
+ *                   example: "User deleted and comments/replies reassigned"
+ *       400:
+ *         description: Invalid input or deletion error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Could not delete user"
+ *                 errors:
+ *                   type: object
+ *                   nullable: true
+ */
+export const deleteUser = async (req: Request, res: Response) => {
+  const { userId } = req.params
+
+  if (!mongoose.Types.ObjectId.isValid(userId)) {
+    return res.status(400).json({
+      success: false,
+      message: "Invalid user ID",
+    })
+  }
+
+  // <-- Use the actual placeholder user ID from your DB
+  const PLACEHOLDER_USER_ID = new mongoose.Types.ObjectId("68a45fbaca5d5d29fe782190")
+
+  const session = await mongoose.startSession()
+  session.startTransaction()
+
+  try {
+    const user = await UserModel.findById(userId).session(session)
+    if (!user) {
+      await session.abortTransaction()
+      session.endSession()
+      return res.status(404).json({
+        success: false,
+        message: "User not found",
+      })
+    }
+
+    // Reassign comments
+    await CommentModel.updateMany(
+      { commentCreatedBy: user._id },
+      { $set: { commentCreatedBy: PLACEHOLDER_USER_ID } }
+    ).session(session)
+
+    // Reassign replies
+    await Reply.updateMany(
+      { replyCreatedBy: user._id },
+      { $set: { replyCreatedBy: PLACEHOLDER_USER_ID } }
+    ).session(session)
+
+    // Delete the user
+    await UserModel.findByIdAndDelete(user._id).session(session)
+
+    await session.commitTransaction()
+    session.endSession()
+
+    res.status(200).json({
+      success: true,
+      message: "User deleted and comments/replies reassigned",
+    })
+  } catch (error) {
+    await session.abortTransaction()
+    session.endSession()
+    console.error("❌ Error deleting user:", error)
+    res.status(400).json({
+      success: false,
+      message: "Could not delete user",
+      errors: error instanceof Error ? error.message : error,
+    })
+  }
+}
diff --git a/backend/src/controllers/deleteWorkspace.ts b/backend/src/controllers/deleteWorkspace.ts
new file mode 100644
index 0000000000..27b2025bf0
--- /dev/null
+++ b/backend/src/controllers/deleteWorkspace.ts
@@ -0,0 +1,99 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   delete:
+ *     summary: Delete a workspace
+ *     tags:
+ *       - Workspaces
+ *     description: Allows an authenticated user to delete a workspace by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to delete
+ *     responses:
+ *       200:
+ *         description: The workspace was successfully deleted
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was successfully deleted
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was not found
+ *       500:
+ *         description: Server error when deleting the workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not delete workspace from the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not delete workspace from the database
+ */
+export const deleteWorkspace = async (req: Request, res: Response) => {
+  const { workspaceId } = req.params
+
+  try {
+    const workspaceDoc = await WorkspaceModel.findById(workspaceId)
+
+    if (!workspaceDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The workspace was not found",
+      })
+    }
+
+    await WorkspaceModel.findByIdAndDelete(workspaceId)
+
+    res.status(200).json({
+      success: true,
+      response: null,
+      message: "The workspace was successfully deleted",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not delete workspace from the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/exportCommentsToSrt.ts b/backend/src/controllers/exportCommentsToSrt.ts
new file mode 100644
index 0000000000..27b93a75fd
--- /dev/null
+++ b/backend/src/controllers/exportCommentsToSrt.ts
@@ -0,0 +1,125 @@
+import { Request, Response } from "express";
+import { CommentModel } from "../models/Comment";
+import { Project } from "../models/Projects";
+import { generateSrtContent } from "../utils/srtConverter";
+
+/**
+ * @swagger
+ * /projects/{projectId}/export/srt:
+ *   get:
+ *     summary: Export all comments for a project as SRT subtitle file
+ *     tags:
+ *       - Comments
+ *       - Export
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: SRT file generated successfully
+ *         content:
+ *           text/plain:
+ *             schema:
+ *               type: string
+ *               example: |
+ *                 1
+ *                 00:00:30,000 --> 00:00:35,000
+ *                 John Doe: This is a great point in the video
+ *
+ *                 2
+ *                 00:01:15,000 --> 00:01:20,000
+ *                 [Q] Jane Smith: Can you explain this part?
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Project not found"
+ *       500:
+ *         description: Failed to export comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to export comments to SRT"
+ */
+export const exportCommentsToSrt = async (
+  req: Request,
+  res: Response
+): Promise<Response | void> => {
+  const { projectId } = req.params;
+
+  try {
+    // Verify project exists
+    const project = await Project.findById(projectId);
+    if (!project) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Project not found",
+      });
+    }
+
+    // Fetch all comments for the project (all types: question, public, private)
+    const comments = await CommentModel.find({
+      projectId,
+    }).populate("commentCreatedBy", "name");
+
+    // Generate SRT content
+    const srtContent = generateSrtContent(comments as any);
+
+    if (!srtContent) {
+      return res.status(200).json({
+        success: true,
+        response: null,
+        message: "No timestamped comments found for this project",
+      });
+    }
+
+    // Create safe filename from project name
+    const safeProjectName = project.projectName
+      .replace(/[^a-z0-9]/gi, "_")
+      .toLowerCase();
+    const filename = `${safeProjectName}_comments.srt`;
+
+    // Set headers for file download
+    res.setHeader("Content-Type", "text/plain; charset=utf-8");
+    res.setHeader("Content-Disposition", `attachment; filename="${filename}"`);
+    res.setHeader("Content-Length", Buffer.byteLength(srtContent, "utf-8"));
+
+    // Send the SRT content
+    return res.status(200).send(srtContent);
+  } catch (error) {
+    console.error("Error exporting comments to SRT:", error);
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to export comments to SRT",
+    });
+  }
+};
diff --git a/backend/src/controllers/getAllComments.ts b/backend/src/controllers/getAllComments.ts
new file mode 100644
index 0000000000..551fb0946e
--- /dev/null
+++ b/backend/src/controllers/getAllComments.ts
@@ -0,0 +1,92 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /comments/all:
+ *   get:
+ *     summary: Get all comments
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: All comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890c"
+ *                       commentText:
+ *                         type: string
+ *                         example: "This is a comment."
+ *                       commentType:
+ *                         type: string
+ *                         example: "question"
+ *                       projectId:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890b"
+ *                       commentCreatedBy:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890f"
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *                         example: "2025-08-10T14:48:00.000Z"
+ *                       updatedAt:
+ *                         type: string
+ *                         format: date-time
+ *                         example: "2025-08-10T14:48:00.000Z"
+ *                 message:
+ *                   type: string
+ *                   example: "All comments fetched successfully"
+ *       500:
+ *         description: Failed to fetch comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch comments"
+ */
+export const getAllComments = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const comments = await CommentModel.find()
+
+    return res.status(200).json({
+      success: true,
+      response: comments,
+      message: "All comments fetched successfully",
+    })
+  } catch (error) {
+    console.error("❌ Error fetching all comments:", error)
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch comments",
+    })
+  }
+}
diff --git a/backend/src/controllers/getClassById.ts b/backend/src/controllers/getClassById.ts
new file mode 100644
index 0000000000..e3fb37bfc9
--- /dev/null
+++ b/backend/src/controllers/getClassById.ts
@@ -0,0 +1,95 @@
+import { ClassModel } from "../models/Class"
+import { Request, Response } from "express"
+
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   get:
+ *     summary: Get a single class by ID
+ *     description: Retrieve details of a specific class by its ID.
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to retrieve
+ *     responses:
+ *       200:
+ *         description: Class found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classTitle:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error when fetching class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ */
+export const getClassById = async (req: Request, res: Response): Promise<Response> => {
+  const { classId } = req.params
+
+  try {
+    const foundClass = await ClassModel.findById(classId)
+      .populate("workspaceId", "name")
+      .select("classTitle workspaceId")
+
+    if (!foundClass) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Class was not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: foundClass,
+      message: "Class found",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Class could not be found",
+    })
+  }
+}
diff --git a/backend/src/controllers/getClasses.ts b/backend/src/controllers/getClasses.ts
new file mode 100644
index 0000000000..9f068570d1
--- /dev/null
+++ b/backend/src/controllers/getClasses.ts
@@ -0,0 +1,114 @@
+import { Request, Response } from "express"
+import { ClassModel } from "../models/Class"
+import { TeamModel } from "../models/Team"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/classes:
+ *   get:
+ *     summary: Retrieve classes in a workspace based on user role
+ *     description: |
+ *       Retrieve a list of classes with their titles for a specific workspace.
+ *       - Teachers see all classes in the workspace
+ *       - Students only see classes their teams have access to
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to get classes from
+ *     responses:
+ *       200:
+ *         description: A list of classes (filtered by user role and team access for students)
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       classTitle:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching classes
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+export const getClasses = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { workspaceId } = req.params
+    const userId = req.user?._id
+
+    // Get the user to check their role
+    const user = await UserModel.findById(userId)
+    if (!user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "User not found",
+      })
+    }
+
+    let result
+
+    // Teachers see all classes in the workspace
+    if (user.role === "teacher") {
+      result = await ClassModel.find({ workspaceId }).select("classTitle workspaceId")
+    } else {
+      // Students only see classes their teams have access to
+      // Get all teams the student belongs to in this workspace
+      const userTeams = await TeamModel.find({
+        _id: { $in: user.teams },
+        workspaceId: workspaceId,
+      }).select("accessTo")
+
+      // Collect all class IDs from all teams
+      const accessibleClassIds = userTeams.flatMap((team) => team.accessTo)
+
+      // Get unique class IDs
+      const uniqueClassIds = [...new Set(accessibleClassIds.map((id) => id.toString()))]
+
+      // Fetch the classes
+      result = await ClassModel.find({
+        _id: { $in: uniqueClassIds },
+        workspaceId: workspaceId,
+      }).select("classTitle workspaceId")
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Classes fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch classes.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getCommentById.ts b/backend/src/controllers/getCommentById.ts
new file mode 100644
index 0000000000..2ac489ac05
--- /dev/null
+++ b/backend/src/controllers/getCommentById.ts
@@ -0,0 +1,124 @@
+import { CommentModel } from "../models/Comment"
+import { Request, Response } from "express"
+
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   get:
+ *     summary: Get a comment by its ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to retrieve
+ *     responses:
+ *       200:
+ *         description: Comment found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890c"
+ *                     commentText:
+ *                       type: string
+ *                       example: "This is a comment."
+ *                     commentType:
+ *                       type: string
+ *                       example: "question"
+ *                     projectId:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890b"
+ *                     commentCreatedBy:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890f"
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                       example: "2025-08-10T14:48:00.000Z"
+ *                     updatedAt:
+ *                       type: string
+ *                       format: date-time
+ *                       example: "2025-08-10T14:48:00.000Z"
+ *                 message:
+ *                   type: string
+ *                   example: "Comment found"
+ *       404:
+ *         description: Comment was not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Comment was not found"
+ *       500:
+ *         description: Comment could not be fetched
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Error details here"
+ *                 message:
+ *                   type: string
+ *                   example: "Comment could not be fetched"
+ */
+export const getCommentById = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { commentId } = req.params
+
+  try {
+    const comment = await CommentModel.findById({
+      commentId,
+      commentType: "question",
+    })
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Comment was not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: comment,
+      message: "Comment found",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Comment could not be fetched",
+    })
+  }
+}
diff --git a/backend/src/controllers/getComments.ts b/backend/src/controllers/getComments.ts
new file mode 100644
index 0000000000..8f23699f69
--- /dev/null
+++ b/backend/src/controllers/getComments.ts
@@ -0,0 +1,132 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /projects/{projectId}/comments:
+ *   get:
+ *     summary: Get comments (type "question") for a project
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: Comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                         example: "64c1f2a3b9f1e1234567890c"
+ *                       commentText:
+ *                         type: string
+ *                         example: "This is a comment?"
+ *                       commentType:
+ *                         type: string
+ *                         example: "question"
+ *                       commentCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                             example: "Alice"
+ *                           profileImage:
+ *                             type: string
+ *                             example: "https://someurl.com/profile.jpg"
+ *                           role:
+ *                             type: string
+ *                             example: "student"
+ *                       replies:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                               example: "64c1f2a3b9f1e1234567890d"
+ *                             replyText:
+ *                               type: string
+ *                               example: "This is a reply."
+ *                             replyCreatedBy:
+ *                               type: object
+ *                               properties:
+ *                                 name:
+ *                                   type: string
+ *                                   example: "Bob"
+ *                                 profileImage:
+ *                                   type: string
+ *                                   example: "https://someurl.com/profile2.jpg"
+ *                                 role:
+ *                                   type: string
+ *                                   example: "instructor"
+ *                 message:
+ *                   type: string
+ *                   example: "Comments fetched successfully"
+ *       500:
+ *         description: Failed to fetch comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch comments"
+ */
+export const getComments = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { projectId } = req.params
+
+  try {
+    const comments = await CommentModel.find({
+      projectId,
+      commentType: "question",
+    })
+
+      .populate({
+        path: "replies",
+        populate: {
+          path: "replyCreatedBy",
+          select: "name profileImage role",
+        },
+      })
+      .populate("commentCreatedBy", "name profileImage role")
+    return res.status(200).json({
+      success: true,
+      response: comments,
+      message: "Comments fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch comments",
+    })
+  }
+}
diff --git a/backend/src/controllers/getHealth.ts b/backend/src/controllers/getHealth.ts
new file mode 100644
index 0000000000..6b3cebafb3
--- /dev/null
+++ b/backend/src/controllers/getHealth.ts
@@ -0,0 +1,31 @@
+import { Request, Response } from "express"
+
+/**
+ * @swagger
+ * /health:
+ *   get:
+ *     summary: Health check endpoint
+ *     description: Returns the health status of the API. Useful for monitoring and waking up the server on Render's free tier when it spins down after 15 minutes of inactivity.
+ *     tags: [Health]
+ *     responses:
+ *       200:
+ *         description: Server is healthy and running
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 status:
+ *                   type: string
+ *                   example: ok
+ *                 timestamp:
+ *                   type: string
+ *                   format: date-time
+ *                   example: 2026-01-07T08:30:00.000Z
+ */
+export const getHealth = (_req: Request, res: Response): void => {
+  res.status(200).json({
+    status: "ok",
+    timestamp: new Date().toISOString(),
+  })
+}
diff --git a/backend/src/controllers/getHome.ts b/backend/src/controllers/getHome.ts
new file mode 100644
index 0000000000..32f6ee7811
--- /dev/null
+++ b/backend/src/controllers/getHome.ts
@@ -0,0 +1,133 @@
+import { Application, Request, Response } from "express"
+import listEndpoints from "express-list-endpoints"
+
+const BASE_URL = "https://project-final-simon.onrender.com"
+
+const endpointDocs: Record<
+  string,
+  { description: string; authRequired: boolean }
+> = {
+  "/": { description: "API Home", authRequired: false },
+  "/health": {
+    description: "Health check endpoint for monitoring and waking up the server (useful for Render free tier)",
+    authRequired: false
+  },
+  "/classes": {
+    description: "These are like school cources",
+    authRequired: true,
+  },
+  "/classes/:classId": {
+    description: "Get details for a specific class",
+    authRequired: false,
+  },
+  "/classes/:classId/projects": {
+    description: "Get projects in a class",
+    authRequired: false,
+  },
+  "/classes/projects/with-comments": {
+    description: "Projects with comments included",
+    authRequired: false,
+  },
+  "/projects/:projectId": {
+    description: "Get project details",
+    authRequired: false,
+  },
+  "/projects/:projectId/comments": {
+    description: "Get comments for a project",
+    authRequired: false,
+  },
+  "/comments/all": { description: "List all comments", authRequired: true },
+  "/comments/:commentId": {
+    description: "Get a comment by ID",
+    authRequired: false,
+  },
+  "/projects/:projectId/comments/private": {
+    description: "Private comments",
+    authRequired: true,
+  },
+  "/comments/:commentId/replies": {
+    description: "Get replies for a comment",
+    authRequired: false,
+  },
+  "/user": {
+    description: "Create a new user with image upload",
+    authRequired: false,
+  },
+  "/comments/:commentId/likes": {
+    description: "Like a comment",
+    authRequired: false,
+  },
+  "/replies/:replyId/likes": {
+    description: "Like a reply",
+    authRequired: false,
+  },
+  "/session": { description: "Create a new user session", authRequired: false },
+  "/replies/:replyId": { description: "Update a reply", authRequired: false },
+  "/comments/:commentId/toggle-check": {
+    description: "Toggle comment checked status",
+    authRequired: false,
+  },
+}
+
+export const getHome =
+  (app: Application) =>
+  (req: Request, res: Response): void => {
+    const endpoints = listEndpoints(app)
+
+    const tableRows = endpoints
+      .map((ep) => {
+        const methods = ep.methods
+          .map(
+            (m) => `<span class="method method-${m.toLowerCase()}">${m}</span>`
+          )
+          .join(" ")
+
+        const doc = endpointDocs[ep.path]
+        const description = doc ? doc.description : ""
+        const authRequired = doc && doc.authRequired ? "🔒" : ""
+        const link = `<a href="${BASE_URL}${ep.path}" target="_blank" rel="noopener noreferrer">${ep.path}</a>`
+
+        return `
+        <tr>
+          <td class="path">${link}</td>
+          <td class="methods">${methods}</td>
+          <td class="description">${description}</td>
+          <td class="auth-required">${authRequired}</td>
+        </tr>
+      `
+      })
+      .join("")
+
+    const html = `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <title>Classymc API</title>
+      <link rel="stylesheet" href="/styles.css" />
+    </head>
+    <body>
+      <h1>Welcome to the Classymc API</h1>
+      <p>Below are the available endpoints and their HTTP methods:</p>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Path</th>
+              <th>Methods</th>
+              <th>Description</th>
+              <th>Requires Authentication</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${tableRows}
+          </tbody>
+        </table>
+      </div>
+    </body>
+    </html>
+  `
+
+    res.setHeader("Content-Type", "text/html; charset=utf-8")
+    res.send(html)
+  }
diff --git a/backend/src/controllers/getPrivateComments.ts b/backend/src/controllers/getPrivateComments.ts
new file mode 100644
index 0000000000..d74a7b7d15
--- /dev/null
+++ b/backend/src/controllers/getPrivateComments.ts
@@ -0,0 +1,128 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /projects/{projectId}/comments/private:
+ *   get:
+ *     summary: Get private comments for a project by the authenticated user
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to get private comments for
+ *     responses:
+ *       200:
+ *         description: Private comments fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       commentText:
+ *                         type: string
+ *                       commentType:
+ *                         type: string
+ *                         example: "private"
+ *                       commentCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                       replies:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Private comments by user fetched successfully"
+ *       401:
+ *         description: Unauthorized, user ID not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Unauthorized: User ID not found"
+ *       500:
+ *         description: Failed to fetch private comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch private comments"
+ */
+export const getPrivateComments = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { projectId } = req.params
+  const userId = req.user?._id // or however your user ID is stored
+
+  if (!userId) {
+    return res.status(401).json({
+      success: false,
+      response: null,
+      message: "Unauthorized: User ID not found",
+    })
+  }
+
+  try {
+    const comments = await CommentModel.find({
+      projectId,
+      commentType: "private",
+      commentCreatedBy: userId,
+    })
+      .populate("replies")
+      .populate("commentCreatedBy", "name profileImage role")
+
+    return res.status(200).json({
+      success: true,
+      response: comments,
+      message: "Private comments by user fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch private comments",
+    })
+  }
+}
diff --git a/backend/src/controllers/getProjectById.ts b/backend/src/controllers/getProjectById.ts
new file mode 100644
index 0000000000..c50660b0ec
--- /dev/null
+++ b/backend/src/controllers/getProjectById.ts
@@ -0,0 +1,135 @@
+import { Project } from "../models/Projects"
+import { Request, Response } from "express"
+
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   get:
+ *     summary: Get a project by ID
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project
+ *     responses:
+ *       200:
+ *         description: Project found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890a"
+ *                     projectName:
+ *                       type: string
+ *                       example: "My Cool Project"
+ *                     projectDescription:
+ *                       type: string
+ *                       example: "A project that does cool things"
+ *                     teacher:
+ *                       type: string
+ *                       example: "Mr. Smith"
+ *                     video:
+ *                       type: string
+ *                       example: "https://someurl.com/video.mp4"
+ *                     classId:
+ *                       type: string
+ *                       example: "64c1f2a3b9f1e1234567890b"
+ *                     projectCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         name:
+ *                           type: string
+ *                           example: "John Doe"
+ *                         email:
+ *                           type: string
+ *                           example: "john@example.com"
+ *                         profileImage:
+ *                           type: string
+ *                           nullable: true
+ *                           example: "https://someurl.com/profile.jpg"
+ *                 message:
+ *                   type: string
+ *                   example: "Project found"
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: object
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Project was not found"
+ *       500:
+ *         description: Server error fetching project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Error message or stack trace"
+ *                 message:
+ *                   type: string
+ *                   example: "Project could not be found"
+ */
+export const getProjectById = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { projectId } = req.params
+
+  try {
+    const project = await Project.findById(projectId)
+      .select(
+        "projectName projectDescription teacher video classId projectCreatedBy"
+      )
+      .populate("projectCreatedBy", "name email profileImage")
+    if (!project) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Project was not found",
+      })
+    }
+    const { _id, projectName, projectDescription, video, classId } = project
+
+    return res.status(200).json({
+      success: true,
+      response: { _id, projectName, projectDescription, video, classId },
+      message: "Project found",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Project could not be found",
+    })
+  }
+}
diff --git a/backend/src/controllers/getProjects.ts b/backend/src/controllers/getProjects.ts
new file mode 100644
index 0000000000..e0ffe493ba
--- /dev/null
+++ b/backend/src/controllers/getProjects.ts
@@ -0,0 +1,92 @@
+import { Request, Response } from "express"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /classes/{classId}/projects:
+ *   get:
+ *     summary: Get projects for a class
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The class ID
+ *     responses:
+ *       200:
+ *         description: A list of projects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       projectName:
+ *                         type: string
+ *                       projectDescription:
+ *                         type: string
+ *                         nullable: true
+ *                       teacher:
+ *                         type: string
+ *                       video:
+ *                         type: string
+ *                         nullable: true
+ *                       thumbnail:
+ *                         type: string
+ *                         nullable: true
+ *                       classId:
+ *                         type: string
+ *                       projectCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                             nullable: true
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error
+ */
+export const getProjects = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const { classId } = req.params
+
+    const result = await Project.find({ classId })
+      .select(
+        "projectName projectDescription teacher video thumbnail classId projectCreatedBy"
+      )
+      .populate("projectCreatedBy", "name email profileImage")
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Projects fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch projects.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getProjectsWithComments.ts b/backend/src/controllers/getProjectsWithComments.ts
new file mode 100644
index 0000000000..04e8473c10
--- /dev/null
+++ b/backend/src/controllers/getProjectsWithComments.ts
@@ -0,0 +1,114 @@
+import { Request, Response } from "express"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /classes/projects/with-comments:
+ *   get:
+ *     summary: Get all projects with comments of type 'question'
+ *     description: Returns a list of projects populated with comments where commentType is 'question', including the commenter’s name, profile image, and role. Also includes the classId and project creator details for each project.
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of projects with filtered comments
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       classId:
+ *                         type: string
+ *                         description: The ID of the class the project belongs to
+ *                       projectName:
+ *                         type: string
+ *                       projectDescription:
+ *                         type: string
+ *                         nullable: true
+ *                       teacher:
+ *                         type: string
+ *                       video:
+ *                         type: string
+ *                         nullable: true
+ *                       thumbnail:
+ *                         type: string
+ *                         nullable: true
+ *                       projectCreatedBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                             nullable: true
+ *                       comments:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             commentText:
+ *                               type: string
+ *                             commentType:
+ *                               type: string
+ *                             commentCreatedBy:
+ *                               type: object
+ *                               properties:
+ *                                 name:
+ *                                   type: string
+ *                                 profileImage:
+ *                                   type: string
+ *                                   nullable: true
+ *                                 role:
+ *                                   type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error
+ */
+export const getProjectsWithComments = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    const result = await Project.find()
+      .populate({
+        path: "comments",
+        match: { commentType: "question" },
+        populate: {
+          path: "commentCreatedBy",
+          select: "name profileImage role",
+        },
+      })
+      .select(
+        "projectName projectDescription teacher video thumbnail classId projectCreatedBy"
+      )
+      .populate("projectCreatedBy", "name email profileImage")
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Projects fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch projects.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getReplies.ts b/backend/src/controllers/getReplies.ts
new file mode 100644
index 0000000000..d301ae0d1f
--- /dev/null
+++ b/backend/src/controllers/getReplies.ts
@@ -0,0 +1,85 @@
+import { Request, Response } from "express"
+import { Reply } from "../models/Reply"
+
+/**
+ * @swagger
+ * /comments/{commentId}/replies:
+ *   get:
+ *     summary: Get all replies for a specific comment
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to get replies for
+ *     responses:
+ *       200:
+ *         description: Replies fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       replyText:
+ *                         type: string
+ *                       replyCreatedBy:
+ *                         type: string
+ *                       commentId:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Replies fetched successfully"
+ *       500:
+ *         description: Failed to fetch replies
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch replies"
+ */
+export const getReplies = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { commentId } = req.params
+
+  try {
+    const replies = await Reply.find({ commentId }) // Find replies linked to this comment
+
+    return res.status(200).json({
+      success: true,
+      response: replies,
+      message: "Replies fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch replies",
+    })
+  }
+}
diff --git a/backend/src/controllers/getTeamById.ts b/backend/src/controllers/getTeamById.ts
new file mode 100644
index 0000000000..40cbf0e774
--- /dev/null
+++ b/backend/src/controllers/getTeamById.ts
@@ -0,0 +1,158 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   get:
+ *     summary: Retrieve a team by ID
+ *     description: Retrieve a specific team by its ID with full details.
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to retrieve
+ *     responses:
+ *       200:
+ *         description: Team retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     teamName:
+ *                       type: string
+ *                     createdBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                     assignedTeachers:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                     assignedStudents:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                           role:
+ *                             type: string
+ *                           profileImage:
+ *                             type: string
+ *                     workspaceId:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                     accessTo:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           classTitle:
+ *                             type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Team not found"
+ *       500:
+ *         description: Server error fetching team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+export const getTeamById = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId } = req.params
+
+    const result = await TeamModel.findById(teamId)
+      .populate("createdBy", "name email")
+      .populate("assignedTeachers", "name email role profileImage")
+      .populate("assignedStudents", "name email role profileImage")
+      .populate("workspaceId", "name")
+      .populate("accessTo", "classTitle")
+
+    if (!result) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Team fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch team.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getTeams.ts b/backend/src/controllers/getTeams.ts
new file mode 100644
index 0000000000..07a116b91d
--- /dev/null
+++ b/backend/src/controllers/getTeams.ts
@@ -0,0 +1,168 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams:
+ *   get:
+ *     summary: Retrieve all teams in a workspace
+ *     description: Retrieve a list of teams with their names for a specific workspace.
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to get teams from
+ *     responses:
+ *       200:
+ *         description: A list of teams
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       teamName:
+ *                         type: string
+ *                       assignedTeachers:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             name:
+ *                               type: string
+ *                             email:
+ *                               type: string
+ *                             profileImage:
+ *                               type: string
+ *                             role:
+ *                               type: string
+ *                       assignedStudents:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             name:
+ *                               type: string
+ *                             email:
+ *                               type: string
+ *                             profileImage:
+ *                               type: string
+ *                             role:
+ *                               type: string
+ *                       workspaceId:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                       accessTo:
+ *                         type: array
+ *                         items:
+ *                           type: object
+ *                           properties:
+ *                             _id:
+ *                               type: string
+ *                             classTitle:
+ *                               type: string
+ *                       createdBy:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching teams
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+export const getTeams = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { workspaceId } = req.params
+
+    // Get teams from specific workspace with populated assignedTeachers and assignedStudents
+    const workspace = await WorkspaceModel.findById(workspaceId)
+      .populate({
+        path: "teams",
+        select: "teamName assignedTeachers assignedStudents workspaceId accessTo createdBy createdAt",
+        populate: [
+          {
+            path: "assignedTeachers",
+            select: "name email profileImage role",
+          },
+          {
+            path: "assignedStudents",
+            select: "name email profileImage role",
+          },
+          {
+            path: "workspaceId",
+            select: "name",
+          },
+          {
+            path: "accessTo",
+            select: "classTitle",
+          },
+          {
+            path: "createdBy",
+            select: "name email",
+          },
+        ],
+      })
+      .select("teams")
+
+    if (!workspace) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Workspace not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: workspace.teams,
+      message: "Teams fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch teams.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getUserById.ts b/backend/src/controllers/getUserById.ts
new file mode 100644
index 0000000000..66e478cc2e
--- /dev/null
+++ b/backend/src/controllers/getUserById.ts
@@ -0,0 +1,105 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /users/{userId}:
+ *   get:
+ *     summary: Get a single user by ID
+ *     description: Retrieve details of a specific user by their ID.
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to retrieve
+ *     responses:
+ *       200:
+ *         description: User found successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                     email:
+ *                       type: string
+ *                     role:
+ *                       type: string
+ *                     profileImage:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "User found"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User was not found"
+ *       500:
+ *         description: Server error fetching user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User could not be found"
+ */
+export const getUserById = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { userId } = req.params
+
+    const user = await UserModel.findById(userId).select("-password")
+
+    if (!user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "User was not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: user,
+      message: "User found",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "User could not be found",
+    })
+  }
+}
diff --git a/backend/src/controllers/getUserWorkspaces.ts b/backend/src/controllers/getUserWorkspaces.ts
new file mode 100644
index 0000000000..548e871659
--- /dev/null
+++ b/backend/src/controllers/getUserWorkspaces.ts
@@ -0,0 +1,109 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /user/workspaces:
+ *   get:
+ *     summary: Get workspaces for the authenticated user
+ *     description: Retrieve all workspaces that the authenticated user belongs to.
+ *     tags:
+ *       - User
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: User workspaces fetched successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "User workspaces fetched successfully"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "User not found"
+ *       500:
+ *         description: Server error fetching user workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch user workspaces"
+ */
+export const getUserWorkspaces = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const userId = req.user?._id
+
+    if (!userId) {
+      return res.status(401).json({
+        success: false,
+        response: null,
+        message: "User not authenticated",
+      })
+    }
+
+    const user = await UserModel.findById(userId)
+    if (!user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "User not found",
+      })
+    }
+
+    // Populate workspace details
+    const workspaces = await WorkspaceModel.find({
+      _id: { $in: user.workspaces },
+    }).select("name createdAt")
+
+    return res.status(200).json({
+      success: true,
+      response: workspaces,
+      message: "User workspaces fetched successfully",
+    })
+  } catch (error) {
+    console.error("Error in getUserWorkspaces:", error)
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch user workspaces",
+    })
+  }
+}
diff --git a/backend/src/controllers/getUsers.ts b/backend/src/controllers/getUsers.ts
new file mode 100644
index 0000000000..4b8734f2ea
--- /dev/null
+++ b/backend/src/controllers/getUsers.ts
@@ -0,0 +1,64 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /users:
+ *   get:
+ *     summary: Retrieve all users
+ *     description: Retrieve a list of all users in the system.
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                       email:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 message:
+ *                   type: string
+ */
+export const getUsers = async (req: Request, res: Response) => {
+  try {
+    const result = await UserModel.find().select("-password -accessToken")
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Users fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      message: "Failed to fetch users",
+    })
+  }
+}
diff --git a/backend/src/controllers/getWorkspaceById.ts b/backend/src/controllers/getWorkspaceById.ts
new file mode 100644
index 0000000000..415d5d1d08
--- /dev/null
+++ b/backend/src/controllers/getWorkspaceById.ts
@@ -0,0 +1,123 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   get:
+ *     summary: Retrieve a workspace by ID
+ *     description: Retrieve a specific workspace by its ID with full details.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to retrieve
+ *     responses:
+ *       200:
+ *         description: Workspace retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                     createdBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                     teams:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                     classes:
+ *                       type: array
+ *                       items:
+ *                         type: object
+ *                         properties:
+ *                           _id:
+ *                             type: string
+ *                           classTitle:
+ *                             type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                 message:
+ *                   type: string
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace not found"
+ *       500:
+ *         description: Server error fetching workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+export const getWorkspaceById = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { workspaceId } = req.params
+
+    const result = await WorkspaceModel.findById(workspaceId)
+      .populate("createdBy", "name email")
+      .populate("teams", "teamName")
+      .populate("classes", "classTitle")
+
+    if (!result) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Workspace not found",
+      })
+    }
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Workspace fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch workspace.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getWorkspaceUsers.ts b/backend/src/controllers/getWorkspaceUsers.ts
new file mode 100644
index 0000000000..1570a6c4ec
--- /dev/null
+++ b/backend/src/controllers/getWorkspaceUsers.ts
@@ -0,0 +1,97 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/users:
+ *   get:
+ *     summary: Get all users in a workspace
+ *     description: Retrieve a list of all users who are members of a specific workspace.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace
+ *     responses:
+ *       200:
+ *         description: Users retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                       email:
+ *                         type: string
+ *                       role:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace users fetched successfully"
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace not found"
+ *       500:
+ *         description: Server error fetching workspace users
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: "Failed to fetch workspace users"
+ */
+export const getWorkspaceUsers = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { workspaceId } = req.params
+
+    const result = await UserModel.find({ workspaces: workspaceId }).select("name email role profileImage")
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Workspace users fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch workspace users.",
+    })
+  }
+}
diff --git a/backend/src/controllers/getWorkspaces.ts b/backend/src/controllers/getWorkspaces.ts
new file mode 100644
index 0000000000..ff6273ae7e
--- /dev/null
+++ b/backend/src/controllers/getWorkspaces.ts
@@ -0,0 +1,65 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspaces:
+ *   get:
+ *     summary: Retrieve all workspaces
+ *     description: Retrieve a list of workspaces with their names.
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     responses:
+ *       200:
+ *         description: A list of workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       name:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *       500:
+ *         description: Server error fetching workspaces
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ */
+export const getWorkspaces = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const result = await WorkspaceModel.find().select("name")
+
+    return res.status(200).json({
+      success: true,
+      response: result,
+      message: "Workspaces fetched successfully",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to fetch workspaces.",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchClass.ts b/backend/src/controllers/patchClass.ts
new file mode 100644
index 0000000000..125b0eb77a
--- /dev/null
+++ b/backend/src/controllers/patchClass.ts
@@ -0,0 +1,111 @@
+import { Request, Response } from "express"
+import { ClassModel } from "../models/Class"
+
+/**
+ * @swagger
+ * /classes/{classId}:
+ *   patch:
+ *     summary: Update an existing class's title
+ *     tags:
+ *       - Classes
+ *     description: Allows an authenticated user to update the title of a class by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newTitle:
+ *                 type: string
+ *                 example: Updated Class Title
+ *     responses:
+ *       200:
+ *         description: The class was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Class'
+ *                 message:
+ *                   type: string
+ *                   example: The class was successfully updated
+ *       404:
+ *         description: Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The class was not found
+ *       500:
+ *         description: Server error when updating the class
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change class in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change class in the database
+ */
+export const patchClass = async (req: Request, res: Response) => {
+  const { classId } = req.params
+  const { newTitle } = req.body
+
+  try {
+    const classDoc = await ClassModel.findById(classId)
+
+    if (!classDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The class was not found",
+      })
+    }
+
+    if (newTitle) classDoc.classTitle = newTitle
+
+    const updatedClass = await classDoc.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedClass,
+      message: "The class was successfully updated",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change class in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchComment.ts b/backend/src/controllers/patchComment.ts
new file mode 100644
index 0000000000..08b3c45462
--- /dev/null
+++ b/backend/src/controllers/patchComment.ts
@@ -0,0 +1,110 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /comments/{commentId}:
+ *   patch:
+ *     summary: Update a comment's content by ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - newContent
+ *             properties:
+ *               newContent:
+ *                 type: string
+ *                 example: Updated comment content here
+ *     responses:
+ *       200:
+ *         description: Comment updated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Comment'  # Assuming you have a Comment schema defined
+ *                 message:
+ *                   type: string
+ *                   example: The comment was successfully changed
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: The comment was not found
+ *       500:
+ *         description: Server error updating comment
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change comment in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change comment in the database
+ */
+export const patchComment = async (req: Request, res: Response) => {
+  const { commentId } = req.params
+  const { newContent } = req.body
+
+  try {
+    const comment = await CommentModel.findById(commentId)
+
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The comment was not found",
+      })
+    }
+
+    comment.content = newContent
+    const updatedComment = await comment.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedComment,
+      message: "The comment was successfully changed",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change comment in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchIsChecked.ts b/backend/src/controllers/patchIsChecked.ts
new file mode 100644
index 0000000000..c73f2a7516
--- /dev/null
+++ b/backend/src/controllers/patchIsChecked.ts
@@ -0,0 +1,117 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /comments/{commentId}/isChecked:
+ *   patch:
+ *     summary: Toggle the isChecked status of a comment by ID
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the comment to toggle isChecked
+ *     responses:
+ *       200:
+ *         description: Comment isChecked status toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   description: Updated comment object with populated replies and creator info
+ *                 message:
+ *                   type: string
+ *                   example: Comment check status toggled successfully
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Comment not found
+ *       500:
+ *         description: Server error toggling comment check status
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: Failed to toggle comment check status
+ */
+export const patchIsChecked = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { commentId } = req.params
+
+  try {
+    const comment = await CommentModel.findById(commentId).populate(
+      "commentCreatedBy",
+      "name profileImage role"
+    )
+
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Comment not found",
+      })
+    }
+
+    // Toggle isChecked
+    comment.isChecked = !comment.isChecked
+    await comment.save()
+
+    // Re-fetch the updated comment to ensure population
+    const updatedComment = await CommentModel.findById(commentId)
+      .populate({
+        path: "replies",
+        select: "replyCreatedBy replyLikes content createdAt",
+        populate: {
+          path: "replyCreatedBy",
+          select: "name profileImage role",
+        },
+      })
+      .populate("commentCreatedBy", "name profileImage role")
+
+    return res.status(200).json({
+      success: true,
+      response: updatedComment,
+      message: "Comment check status toggled successfully",
+    })
+  } catch (error) {
+    console.error("Error toggling isChecked:", error)
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Failed to toggle comment check status",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchProjects.ts b/backend/src/controllers/patchProjects.ts
new file mode 100644
index 0000000000..eaf2ad57bd
--- /dev/null
+++ b/backend/src/controllers/patchProjects.ts
@@ -0,0 +1,119 @@
+import { Request, Response } from "express"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /projects/{projectId}:
+ *   patch:
+ *     summary: Update an existing project's name, description, and/or teacher
+ *     tags:
+ *       - Projects
+ *     description: Allows an authenticated user to update the name, description, and/or teacher of a project by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Project Title
+ *               newDescription:
+ *                 type: string
+ *                 example: This is an updated description for the project.
+ *               newTeacher:
+ *                 type: string
+ *                 example: "Mrs. Johnson"
+ *     responses:
+ *       200:
+ *         description: The project was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Project'
+ *                 message:
+ *                   type: string
+ *                   example: The project was successfully updated
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The project was not found
+ *       500:
+ *         description: Server error when updating the project
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change project in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change project in the database
+ */
+export const patchProject = async (req: Request, res: Response) => {
+  const { projectId } = req.params
+  const { newName, newDescription, newTeacher } = req.body
+
+  try {
+    const project = await Project.findById(projectId)
+
+    if (!project) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The project was not found",
+      })
+    }
+
+    if (newName) project.projectName = newName
+    if (newDescription) project.projectDescription = newDescription
+    if (newTeacher) project.teacher = newTeacher
+
+    const updatedProject = await project.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedProject,
+      message: "The project was successfully updated",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change project in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchReply.ts b/backend/src/controllers/patchReply.ts
new file mode 100644
index 0000000000..a54aa9a600
--- /dev/null
+++ b/backend/src/controllers/patchReply.ts
@@ -0,0 +1,110 @@
+import { Request, Response } from "express"
+import { Reply } from "../models/Reply"
+
+/**
+ * @swagger
+ * /replies/{replyId}:
+ *   patch:
+ *     summary: Update a reply's content by ID
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the reply to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - newContent
+ *             properties:
+ *               newContent:
+ *                 type: string
+ *                 example: Updated reply content here
+ *     responses:
+ *       200:
+ *         description: Reply updated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/Reply'  # assuming you have Reply schema defined
+ *                 message:
+ *                   type: string
+ *                   example: The reply was successfully changed
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                 message:
+ *                   type: string
+ *                   example: The message was not found
+ *       500:
+ *         description: Server error updating reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change reply in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change reply in the database
+ */
+export const patchReply = async (req: Request, res: Response) => {
+  const { replyId } = req.params
+  const { newContent } = req.body
+
+  try {
+    const reply = await Reply.findById(replyId)
+
+    if (!reply) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The message was not found",
+      })
+    }
+
+    reply.content = newContent
+    const updatedReply = await reply.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedReply,
+      message: "The reply was successfully changed",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change reply in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchTeam.ts b/backend/src/controllers/patchTeam.ts
new file mode 100644
index 0000000000..7588ec90f0
--- /dev/null
+++ b/backend/src/controllers/patchTeam.ts
@@ -0,0 +1,111 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+
+/**
+ * @swagger
+ * /teams/{teamId}:
+ *   patch:
+ *     summary: Update an existing team's name
+ *     tags:
+ *       - Teams
+ *     description: Allows an authenticated user to update the name of a team by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Team Name
+ *     responses:
+ *       200:
+ *         description: The team was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: The team was successfully updated
+ *       404:
+ *         description: Team not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The team was not found
+ *       500:
+ *         description: Server error when updating the team
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change team in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change team in the database
+ */
+export const patchTeam = async (req: Request, res: Response) => {
+  const { teamId } = req.params
+  const { newName } = req.body
+
+  try {
+    const teamDoc = await TeamModel.findById(teamId)
+
+    if (!teamDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The team was not found",
+      })
+    }
+
+    if (newName) teamDoc.teamName = newName
+
+    const updatedTeam = await teamDoc.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedTeam,
+      message: "The team was successfully updated",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change team in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchUser.ts b/backend/src/controllers/patchUser.ts
new file mode 100644
index 0000000000..cf62772a66
--- /dev/null
+++ b/backend/src/controllers/patchUser.ts
@@ -0,0 +1,162 @@
+import { Request, Response } from "express"
+import { UserModel } from "../models/user"
+import bcrypt from "bcrypt"
+
+/**
+ * @swagger
+ * /users/{userId}:
+ *   patch:
+ *     summary: Update an existing user's information
+ *     tags:
+ *       - Users
+ *     description: Allows an authenticated user to update a user's name, role, and/or profile image by their ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: "Updated User Name"
+ *               newRole:
+ *                 type: string
+ *                 example: "admin"
+ *               newProfileImage:
+ *                 type: string
+ *                 example: "https://example.com/profile.jpg"
+ *               newPassword:
+ *                 type: string
+ *                 example: "newPassword123"
+ *               newEmail:
+ *                 type: string
+ *                 example: "updated@example.com"
+ *     responses:
+ *       200:
+ *         description: The user was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   $ref: '#/components/schemas/User'
+ *                 message:
+ *                   type: string
+ *                   example: "The user was successfully updated"
+ *       400:
+ *         description: Email already registered
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "Email is already registered"
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: "The user was not found"
+ *       500:
+ *         description: Server error when updating the user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: "Could not change user in the database"
+ *                 message:
+ *                   type: string
+ *                   example: "Could not change user in the database"
+ */
+export const patchUser = async (req: Request, res: Response) => {
+  const { userId } = req.params
+  const { newName, newRole, newProfileImage, newPassword, newEmail } = req.body
+
+  try {
+    const user = await UserModel.findById(userId)
+
+    if (!user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The user was not found",
+      })
+    }
+
+    // Check for email uniqueness if email is being updated
+    if (newEmail && newEmail !== user.email) {
+      const existingUser = await UserModel.findOne({ email: newEmail })
+      if (existingUser) {
+        return res.status(400).json({
+          success: false,
+          response: null,
+          message: "Email is already registered",
+        })
+      }
+    }
+
+    // Update fields
+    if (newName) user.name = newName
+    if (newRole) user.role = newRole
+    if (newEmail) user.email = newEmail.toLowerCase().trim()
+    if (newProfileImage) user.profileImage = newProfileImage
+
+    // Hash password if provided
+    if (newPassword) {
+      const salt = bcrypt.genSaltSync()
+      user.password = bcrypt.hashSync(newPassword, salt)
+    }
+
+    const updatedUser = await user.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedUser,
+      message: "The user was successfully updated",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change user in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/patchWorkspace.ts b/backend/src/controllers/patchWorkspace.ts
new file mode 100644
index 0000000000..e400395f3c
--- /dev/null
+++ b/backend/src/controllers/patchWorkspace.ts
@@ -0,0 +1,111 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}:
+ *   patch:
+ *     summary: Update an existing workspace's name
+ *     tags:
+ *       - Workspaces
+ *     description: Allows an authenticated user to update the name of a workspace by its ID.
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the workspace to update
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               newName:
+ *                 type: string
+ *                 example: Updated Workspace Name
+ *     responses:
+ *       200:
+ *         description: The workspace was successfully updated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was successfully updated
+ *       404:
+ *         description: Workspace not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: null
+ *                   example: null
+ *                 message:
+ *                   type: string
+ *                   example: The workspace was not found
+ *       500:
+ *         description: Server error when updating the workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   type: string
+ *                   example: Could not change workspace in the database
+ *                 message:
+ *                   type: string
+ *                   example: Could not change workspace in the database
+ */
+export const patchWorkspace = async (req: Request, res: Response) => {
+  const { workspaceId } = req.params
+  const { newName } = req.body
+
+  try {
+    const workspaceDoc = await WorkspaceModel.findById(workspaceId)
+
+    if (!workspaceDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "The workspace was not found",
+      })
+    }
+
+    if (newName) workspaceDoc.name = newName
+
+    const updatedWorkspace = await workspaceDoc.save()
+
+    res.status(200).json({
+      success: true,
+      response: updatedWorkspace,
+      message: "The workspace was successfully updated",
+    })
+  } catch (error) {
+    res.status(500).json({
+      success: false,
+      response: error instanceof Error ? error.message : "Unknown error",
+      message: "Could not change workspace in the database",
+    })
+  }
+}
diff --git a/backend/src/controllers/postClass.ts b/backend/src/controllers/postClass.ts
new file mode 100755
index 0000000000..b8fec096ad
--- /dev/null
+++ b/backend/src/controllers/postClass.ts
@@ -0,0 +1,128 @@
+import { Request, Response } from "express"
+import { ClassModel } from "../models/Class"
+import { WorkspaceModel } from "../models/workspace"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/classes:
+ *   post:
+ *     summary: Create a new class within a workspace
+ *     tags:
+ *       - Classes
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to add the class to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - classTitle
+ *             properties:
+ *               classTitle:
+ *                 type: string
+ *                 example: "Math 101"
+ *     responses:
+ *       201:
+ *         description: Class created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classTitle:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Class created successfully"
+ *       400:
+ *         description: Bad Request - missing classTitle
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Class title is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postClass = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { classTitle } = req.body
+    const { workspaceId } = req.params
+
+    if (!classTitle) {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "Class title is required",
+      })
+    }
+
+    const newClass = new ClassModel({ classTitle, workspaceId })
+    const savedNewClass = await newClass.save()
+
+    // Update workspace.classes array
+    await WorkspaceModel.findByIdAndUpdate(workspaceId, {
+      $push: { classes: savedNewClass._id },
+    })
+
+    return res.status(201).json({
+      success: true,
+      response: savedNewClass,
+      message: "Class created successfully",
+    })
+  } catch (error) {
+    console.error("Error in postClass:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postCommentById.ts b/backend/src/controllers/postCommentById.ts
new file mode 100644
index 0000000000..809e7bbd83
--- /dev/null
+++ b/backend/src/controllers/postCommentById.ts
@@ -0,0 +1,205 @@
+import { Request, Response } from "express"
+import { Types } from "mongoose"
+import { Project } from "../models/Projects"
+import { CommentModel } from "../models/Comment"
+
+/**
+ * @swagger
+ * /projects/{projectId}/comments:
+ *   post:
+ *     summary: Add a new comment to a project
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: projectId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the project to add a comment to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - content
+ *               - timeStamp
+ *               - commentType
+ *             properties:
+ *               content:
+ *                 type: string
+ *                 example: "This is a comment on the project."
+ *               timeStamp:
+ *                 type: number
+ *                 description: Time in seconds or milliseconds referring to the video timestamp
+ *                 example: 45
+ *               commentType:
+ *                 type: string
+ *                 description: Type of comment (e.g., question, private)
+ *                 example: "question"
+ *     responses:
+ *       201:
+ *         description: Comment added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     content:
+ *                       type: string
+ *                     projectId:
+ *                       type: string
+ *                     createdAt:
+ *                       type: string
+ *                       format: date-time
+ *                     timeStamp:
+ *                       type: number
+ *                     isChecked:
+ *                       type: boolean
+ *                     commentCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                         role:
+ *                           type: string
+ *                     commentType:
+ *                       type: string
+ *                     replies:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                     likes:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Comment added to project"
+ *       400:
+ *         description: Missing required fields
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Comment text, timestamp, and comment type are required"
+ *       404:
+ *         description: Project not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Could not add comment"
+ */
+export const postCommentById = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { projectId } = req.params
+  const { content, timeStamp, commentType } = req.body
+
+  // Validate required fields
+  if (!content || !timeStamp || !commentType) {
+    return res.status(400).json({
+      success: false,
+      response: null,
+      message: "Comment text, timestamp, and comment type are required",
+    })
+  }
+
+  try {
+    // Find the project
+    const project = await Project.findById(projectId)
+
+    if (!project) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Project not found",
+      })
+    }
+
+    // Create a new comment
+    const newComment = new CommentModel({
+      content,
+      projectId: project._id,
+      createdAt: new Date(),
+      timeStamp,
+      isChecked: false,
+      commentCreatedBy: req.user?._id,
+      commentType,
+      replies: [],
+      likes: [],
+    })
+
+    // Save the comment
+    await newComment.save()
+
+    // Populate the commentCreatedBy field before returning
+    await newComment.populate("commentCreatedBy", "name profileImage role")
+
+    // Add comment to the project
+    project.comments.push(newComment._id as Types.ObjectId)
+    await project.save()
+
+    // Respond with success and populated comment
+    return res.status(201).json({
+      success: true,
+      response: newComment,
+      message: "Comment added to project",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: error,
+      message: "Could not add comment",
+    })
+  }
+}
diff --git a/backend/src/controllers/postLike.ts b/backend/src/controllers/postLike.ts
new file mode 100644
index 0000000000..9cd1220629
--- /dev/null
+++ b/backend/src/controllers/postLike.ts
@@ -0,0 +1,137 @@
+import { Request, Response } from "express"
+import { CommentModel } from "../models/Comment"
+import { Types } from "mongoose"
+
+/**
+ * @swagger
+ * /comments/{commentId}/like:
+ *   post:
+ *     summary: Toggle like on a comment by authenticated user
+ *     tags:
+ *       - Comments
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the comment to like/unlike
+ *     responses:
+ *       200:
+ *         description: Like toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 liked:
+ *                   type: boolean
+ *                   description: Whether the comment is liked after the toggle
+ *                   example: true
+ *                 totalLikes:
+ *                   type: integer
+ *                   example: 5
+ *                 message:
+ *                   type: string
+ *                   example: "Comment liked"
+ *       401:
+ *         description: User not authenticated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "User not authenticated"
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Comment not found"
+ *       500:
+ *         description: Server error toggling like
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Error toggling like"
+ */
+export const postLike = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const user = req.user
+
+  if (!user) {
+    return res.status(401).json({
+      success: false,
+      message: "User not authenticated",
+    })
+  }
+
+  const { commentId } = req.params
+
+  try {
+    const comment = await CommentModel.findById(commentId)
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        message: "Comment not found",
+      })
+    }
+
+    const hasLiked = comment.likes.includes(user._id)
+
+    if (hasLiked) {
+      // Unlike
+      comment.likes = comment.likes.filter(
+        (id) => id.toString() !== user._id.toString()
+      )
+      user.likedComments = user.likedComments.filter(
+        (id) => id.toString() !== comment._id.toString()
+      )
+    } else {
+      // Like
+      comment.likes.push(user._id as Types.ObjectId)
+      user.likedComments.push(comment._id as Types.ObjectId)
+    }
+
+    await comment.save()
+    await user.save()
+
+    return res.status(200).json({
+      success: true,
+      liked: !hasLiked,
+      totalLikes: comment.likes.length,
+      message: hasLiked ? "Comment unliked" : "Comment liked",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      message: "Error toggling like",
+    })
+  }
+}
diff --git a/backend/src/controllers/postProject.ts b/backend/src/controllers/postProject.ts
new file mode 100755
index 0000000000..2cf1514979
--- /dev/null
+++ b/backend/src/controllers/postProject.ts
@@ -0,0 +1,185 @@
+import { Request, Response } from "express"
+import { Project } from "../models/Projects"
+
+/**
+ * @swagger
+ * /classes/{classId}/projects:
+ *   post:
+ *     summary: Create a new project within a class
+ *     tags:
+ *       - Projects
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the class to add the project to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         multipart/form-data:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - projectName
+ *             properties:
+ *               projectName:
+ *                 type: string
+ *                 example: "My Awesome Project"
+ *               projectDescription:
+ *                 type: string
+ *                 example: "A detailed description of the project."
+ *               teacher:
+ *                 type: string
+ *                 example: "Mr. Smith"
+ *               video:
+ *                 type: string
+ *                 format: binary
+ *                 description: Video file upload
+ *     responses:
+ *       201:
+ *         description: Project created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     classId:
+ *                       type: string
+ *                     projectName:
+ *                       type: string
+ *                     projectDescription:
+ *                       type: string
+ *                     teacher:
+ *                       type: string
+ *                     video:
+ *                       type: string
+ *                     thumbnail:
+ *                       type: string
+ *                     projectCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         email:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                           nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project created"
+ *       400:
+ *         description: Bad request, missing projectName
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Project name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+const generateThumbnailUrl = (videoUrl: string): string => {
+  if (!videoUrl) return ""
+  return videoUrl
+    .replace("/video/upload/", "/video/upload/so_3,w_600,h_400,c_fill/")
+    .replace(/\.(mp4|mov|avi)$/i, ".jpg")
+}
+
+export const postProject = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  try {
+    console.log("Received body:", req.body)
+    console.log("Received file:", req.file)
+
+    const { classId } = req.params
+    const { projectName, projectDescription, teacher } = req.body
+
+    if (!projectName) {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "Project name is required",
+      })
+    }
+
+    const videoUrl = (req.file as any)?.path || ""
+    const thumbnailUrl = generateThumbnailUrl(videoUrl)
+
+    const newProject = new Project({
+      classId,
+      projectName,
+      projectDescription,
+      teacher,
+      video: videoUrl,
+      thumbnail: thumbnailUrl,
+      projectCreatedBy: req.user?._id,
+    })
+
+    const savedNewProject = await newProject.save()
+
+    // Populate the 'projectCreatedBy' field
+    await savedNewProject.populate(
+      "projectCreatedBy",
+      "_id name email profileImage"
+    )
+
+    return res.status(201).json({
+      success: true,
+      response: savedNewProject,
+      message: "Project created",
+    })
+  } catch (error) {
+    console.error("Error in postProject:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postReplyById.ts b/backend/src/controllers/postReplyById.ts
new file mode 100644
index 0000000000..c53c45695d
--- /dev/null
+++ b/backend/src/controllers/postReplyById.ts
@@ -0,0 +1,172 @@
+import { Types } from "mongoose"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import { Request, Response } from "express"
+
+/**
+ * @swagger
+ * /comments/{commentId}/replies:
+ *   post:
+ *     summary: Add a reply to a specific comment
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: commentId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the comment to reply to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - content
+ *             properties:
+ *               content:
+ *                 type: string
+ *                 example: "This is a reply to the comment."
+ *     responses:
+ *       201:
+ *         description: Reply added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     content:
+ *                       type: string
+ *                     commentId:
+ *                       type: string
+ *                     isChecked:
+ *                       type: boolean
+ *                     replyCreatedBy:
+ *                       type: object
+ *                       properties:
+ *                         _id:
+ *                           type: string
+ *                         name:
+ *                           type: string
+ *                         profileImage:
+ *                           type: string
+ *                         role:
+ *                           type: string
+ *                     replyLikes:
+ *                       type: array
+ *                       items:
+ *                         type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Reply added to comment"
+ *       400:
+ *         description: Missing reply content
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Reply content is required"
+ *       404:
+ *         description: Comment not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Comment not found"
+ *       500:
+ *         description: Server error while adding reply
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Could not add reply"
+ */
+export const postReplyById = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const { commentId } = req.params
+  const { content } = req.body
+
+  if (!content) {
+    return res.status(400).json({
+      success: false,
+      response: null,
+      message: "Reply content is required",
+    })
+  }
+
+  try {
+    const comment = await CommentModel.findById(commentId)
+    if (!comment) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Comment not found",
+      })
+    }
+
+    const newReply = new Reply({
+      content,
+      commentId: comment._id,
+      isChecked: false,
+      replyCreatedBy: req.user?._id,
+      replyLikes: [],
+    })
+
+    await newReply.save()
+
+    await newReply.populate("replyCreatedBy", "name profileImage role")
+
+    comment.replies.push(newReply._id as Types.ObjectId)
+    await comment.save()
+
+    return res.status(201).json({
+      success: true,
+      response: newReply,
+      message: "Reply added to comment",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Could not add reply",
+    })
+  }
+}
diff --git a/backend/src/controllers/postReplyLike.ts b/backend/src/controllers/postReplyLike.ts
new file mode 100644
index 0000000000..503a98c7da
--- /dev/null
+++ b/backend/src/controllers/postReplyLike.ts
@@ -0,0 +1,136 @@
+import { Request, Response } from "express"
+import { Reply } from "../models/Reply"
+import { Types } from "mongoose"
+
+/**
+ * @swagger
+ * /replies/{replyId}/like:
+ *   post:
+ *     summary: Toggle like on a reply by authenticated user
+ *     tags:
+ *       - Replies
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: replyId
+ *         required: true
+ *         schema:
+ *           type: string
+ *     responses:
+ *       200:
+ *         description: Like toggled successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 liked:
+ *                   type: boolean
+ *                   description: Whether the reply is liked after the toggle
+ *                   example: true
+ *                 totalLikes:
+ *                   type: integer
+ *                   example: 3
+ *                 message:
+ *                   type: string
+ *                   example: "Reply liked"
+ *       401:
+ *         description: User not authenticated
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "User not authenticated"
+ *       404:
+ *         description: Reply not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Reply not found"
+ *       500:
+ *         description: Server error toggling like
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Error toggling like"
+ */
+export const postReplyLike = async (
+  req: Request,
+  res: Response
+): Promise<Response> => {
+  const user = req.user
+
+  if (!user) {
+    return res.status(401).json({
+      success: false,
+      message: "User not authenticated",
+    })
+  }
+
+  const { replyId } = req.params
+
+  try {
+    const reply = await Reply.findById(replyId)
+    if (!reply) {
+      return res.status(404).json({
+        success: false,
+        message: "Reply not found",
+      })
+    }
+
+    const hasLiked = reply.replyLikes.includes(user._id)
+
+    if (hasLiked) {
+      // Unlike
+      reply.replyLikes = reply.replyLikes.filter(
+        (id) => id.toString() !== user._id.toString()
+      )
+      user.likedReplies = user.likedReplies.filter(
+        (id) => id.toString() !== reply._id.toString()
+      )
+    } else {
+      // Like
+      reply.replyLikes.push(user._id as Types.ObjectId)
+      user.likedReplies.push(reply._id as Types.ObjectId)
+    }
+
+    await reply.save()
+    await user.save()
+
+    return res.status(200).json({
+      success: true,
+      liked: !hasLiked,
+      totalLikes: reply.replyLikes.length,
+      message: hasLiked ? "Reply unliked" : "Reply liked",
+    })
+  } catch (error) {
+    return res.status(500).json({
+      success: false,
+      message: "Error toggling like",
+    })
+  }
+}
diff --git a/backend/src/controllers/postSession.ts b/backend/src/controllers/postSession.ts
new file mode 100644
index 0000000000..4ee37e7f6a
--- /dev/null
+++ b/backend/src/controllers/postSession.ts
@@ -0,0 +1,98 @@
+import { UserModel } from "../models/user"
+import bcrypt from "bcrypt"
+import { Response, Request } from "express"
+
+/**
+ * @swagger
+ * /session:
+ *   post:
+ *     summary: User login and create session
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - email
+ *               - password
+ *             properties:
+ *               email:
+ *                 type: string
+ *                 format: email
+ *                 example: user@example.com
+ *               password:
+ *                 type: string
+ *                 example: yourPassword123
+ *     responses:
+ *       200:
+ *         description: User authenticated successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 userId:
+ *                   type: string
+ *                   example: 64da2f62f2a4a0a123456789
+ *                 name:
+ *                   type: string
+ *                   example: John Doe
+ *                 role:
+ *                   type: string
+ *                   example: teacher
+ *                 profileImage:
+ *                   type: string
+ *                   example: /uploads/profile123.jpg
+ *                 accessToken:
+ *                   type: string
+ *                   example: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
+ *       401:
+ *         description: Unauthorized - invalid email or password
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 notFound:
+ *                   type: boolean
+ *                   example: true
+ *       500:
+ *         description: Internal server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: Internal server error
+ */
+export const postSession = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const user = await UserModel.findOne({ email: req.body.email })
+
+    if (user && bcrypt.compareSync(req.body.password, user.password)) {
+      res.json({
+        userId: user._id,
+        name: user.name,
+        role: user.role,
+        profileImage: user.profileImage,
+        accessToken: user.accessToken,
+        teams: user.teams.map((teamId) => teamId.toString()),
+      })
+    } else {
+      res.status(401).json({ notFound: true }) // better to return a 401 for auth failure
+    }
+  } catch (error) {
+    console.error("❌ Error in postSession:", error)
+    res.status(500).json({ success: false, message: "Internal server error" })
+  }
+}
diff --git a/backend/src/controllers/postTeam.ts b/backend/src/controllers/postTeam.ts
new file mode 100644
index 0000000000..5f021b2341
--- /dev/null
+++ b/backend/src/controllers/postTeam.ts
@@ -0,0 +1,180 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { WorkspaceModel } from "../models/workspace"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams:
+ *   post:
+ *     summary: Create a new team within a workspace
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to add the team to
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - teamName
+ *             properties:
+ *               teamName:
+ *                 type: string
+ *                 example: "Math Team A"
+ *               members:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b3", "60f7b3b3b3b3b3b3b3b3b3b4"]
+ *                 description: Array of user IDs to add as team members
+ *               teachers:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b5"]
+ *                 description: Array of teacher IDs to assign to the team
+ *               classes:
+ *                 type: array
+ *                 items:
+ *                   type: string
+ *                 example: ["60f7b3b3b3b3b3b3b3b3b3b6", "60f7b3b3b3b3b3b3b3b3b3b7"]
+ *                 description: Array of class IDs to give the team access to
+ *     responses:
+ *       201:
+ *         description: Team created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     teamName:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Team created successfully"
+ *       400:
+ *         description: Bad Request - missing teamName
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postTeam = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamName, members, teachers, classes } = req.body
+    const { workspaceId } = req.params
+    const createdBy = req.user?._id
+
+    if (!teamName) {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "Team name is required",
+      })
+    }
+
+    // Verify workspace exists
+    const workspace = await WorkspaceModel.findById(workspaceId)
+    if (!workspace) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Workspace not found",
+      })
+    }
+
+    const newTeam = new TeamModel({
+      teamName,
+      createdBy,
+      workspaceId,
+      assignedTeachers: teachers || [],
+      accessTo: classes || [],
+    })
+    const savedNewTeam = await newTeam.save()
+
+    // Add team to workspace
+    await WorkspaceModel.findByIdAndUpdate(workspaceId, {
+      $addToSet: { teams: savedNewTeam._id },
+    })
+
+    // Add members to team (if provided)
+    if (members && members.length > 0) {
+      await UserModel.updateMany(
+        { _id: { $in: members } },
+        { $addToSet: { teams: savedNewTeam._id } }
+      )
+    }
+
+    // Add team to assigned teachers (if provided)
+    if (teachers && teachers.length > 0) {
+      await UserModel.updateMany(
+        { _id: { $in: teachers } },
+        { $addToSet: { assignedTeams: savedNewTeam._id } }
+      )
+    }
+
+    return res.status(201).json({
+      success: true,
+      response: savedNewTeam,
+      message: "Team created successfully",
+    })
+  } catch (error) {
+    console.error("Error in postTeam:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postTeamClass.ts b/backend/src/controllers/postTeamClass.ts
new file mode 100644
index 0000000000..6a39dfe10e
--- /dev/null
+++ b/backend/src/controllers/postTeamClass.ts
@@ -0,0 +1,135 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { ClassModel } from "../models/Class"
+
+/**
+ * @swagger
+ * /teams/{teamId}/classes/{classId}:
+ *   post:
+ *     summary: Give a team access to a class
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: classId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the class to give access to
+ *     responses:
+ *       200:
+ *         description: Class access granted successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Class access granted successfully"
+ *       400:
+ *         description: Bad Request - missing classId
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Class ID is required"
+ *       404:
+ *         description: Team or Class not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or Class not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postTeamClass = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, classId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const classDoc = await ClassModel.findById(classId)
+
+    if (!team || !classDoc) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or Class not found",
+      })
+    }
+
+    // Verify class belongs to same workspace as team
+    // Note: This validation would need to be done by checking which workspace contains this team
+    // For now, we'll allow any class access (you may want to add workspace validation later)
+
+    // Add class to team's accessTo
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $addToSet: { accessTo: classId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: { teamId, classId },
+      message: "Class access granted successfully",
+    })
+  } catch (error) {
+    console.error("Error in postTeamClass:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postTeamMember.ts b/backend/src/controllers/postTeamMember.ts
new file mode 100644
index 0000000000..a93da82165
--- /dev/null
+++ b/backend/src/controllers/postTeamMember.ts
@@ -0,0 +1,135 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /teams/{teamId}/members/{userId}:
+ *   post:
+ *     summary: Add a member to a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the user to add as a member
+ *     responses:
+ *       200:
+ *         description: Member added successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Member added successfully"
+ *       400:
+ *         description: Bad Request - missing userId
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "User ID is required"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postTeamMember = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, userId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const user = await UserModel.findById(userId)
+
+    if (!team || !user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or User not found",
+      })
+    }
+
+    // Add user to team and add team to user's teams
+    await UserModel.findByIdAndUpdate(userId, {
+      $addToSet: { teams: teamId },
+    })
+
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $addToSet: { assignedStudents: userId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: { teamId, userId },
+      message: "Member added successfully",
+    })
+  } catch (error) {
+    console.error("Error in postTeamMember:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postTeamTeacher.ts b/backend/src/controllers/postTeamTeacher.ts
new file mode 100644
index 0000000000..aa0f946f2c
--- /dev/null
+++ b/backend/src/controllers/postTeamTeacher.ts
@@ -0,0 +1,144 @@
+import { Request, Response } from "express"
+import { TeamModel } from "../models/Team"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /teams/{teamId}/teachers/{userId}:
+ *   post:
+ *     summary: Assign a teacher to a team
+ *     tags:
+ *       - Teams
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the team
+ *       - in: path
+ *         name: userId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The ID of the teacher to assign
+ *     responses:
+ *       200:
+ *         description: Teacher assigned successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                 message:
+ *                   type: string
+ *                   example: "Teacher assigned successfully"
+ *       400:
+ *         description: Bad Request - missing userId or user is not a teacher
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "User ID is required"
+ *       404:
+ *         description: Team or User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Team or User not found"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postTeamTeacher = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { teamId, userId } = req.params
+
+    const team = await TeamModel.findById(teamId)
+    const user = await UserModel.findById(userId)
+
+    if (!team || !user) {
+      return res.status(404).json({
+        success: false,
+        response: null,
+        message: "Team or User not found",
+      })
+    }
+
+    if (user.role !== "teacher") {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "User must be a teacher to be assigned to a team",
+      })
+    }
+
+    // Add teacher to team's assignedTeachers
+    await TeamModel.findByIdAndUpdate(teamId, {
+      $addToSet: { assignedTeachers: userId },
+    })
+
+    // Add team to user's assignedTeams
+    await UserModel.findByIdAndUpdate(userId, {
+      $addToSet: { assignedTeams: teamId },
+    })
+
+    return res.status(200).json({
+      success: true,
+      response: { teamId, userId },
+      message: "Teacher assigned successfully",
+    })
+  } catch (error) {
+    console.error("Error in postTeamTeacher:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/postUser.ts b/backend/src/controllers/postUser.ts
new file mode 100644
index 0000000000..0dec295466
--- /dev/null
+++ b/backend/src/controllers/postUser.ts
@@ -0,0 +1,194 @@
+import { UserModel } from "../models/user"
+import { Request, Response } from "express"
+import { WorkspaceInvitationModel } from "../models/WorkspaceInvitation"
+import { TeamModel } from "../models/Team"
+import bcrypt from "bcrypt"
+
+/**
+ * @swagger
+ * /users:
+ *   post:
+ *     summary: Create a new user
+ *     tags:
+ *       - Users
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         multipart/form-data:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - name
+ *               - email
+ *               - password
+ *               - role
+ *             properties:
+ *               name:
+ *                 type: string
+ *                 example: "John Doe"
+ *               email:
+ *                 type: string
+ *                 format: email
+ *                 example: "john@example.com"
+ *               password:
+ *                 type: string
+ *                 example: "password123"
+ *               role:
+ *                 type: string
+ *                 enum: [teacher, student]
+ *                 example: "student"
+ *               invitationToken:
+ *                 type: string
+ *                 example: "abc123def456"
+ *                 description: Optional invitation token for automatic workspace/team joining
+ *               profileImage:
+ *                 type: string
+ *                 format: binary
+ *                 description: Optional profile image upload
+ *     responses:
+ *       201:
+ *         description: User created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 message:
+ *                   type: string
+ *                   example: "User created"
+ *                 userId:
+ *                   type: string
+ *                 profileImage:
+ *                   type: string
+ *                   nullable: true
+ *                 accessToken:
+ *                   type: string
+ *                   nullable: true
+ *       400:
+ *         description: Invalid input or error creating user
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 message:
+ *                   type: string
+ *                   example: "Could not create user"
+ *                 errors:
+ *                   type: object
+ *                   nullable: true
+ */
+export const postUser = async (req: Request, res: Response) => {
+  try {
+    const { name, email, password, role, invitationToken } = req.body
+    const profileImage = (req.file as any)?.path || req.body.profileImage
+
+    const allowedRoles = ["teacher", "student"]
+    if (!allowedRoles.includes(role)) {
+      return res.status(400).json({
+        success: false,
+        message: `Invalid role. Allowed roles: ${allowedRoles.join(", ")}`,
+      })
+    }
+
+    // Check for existing email
+    const existingUser = await UserModel.findOne({ email })
+    if (existingUser) {
+      return res.status(400).json({
+        success: false,
+        message: "Email is already registered",
+      })
+    }
+
+    // Handle invitation token if provided
+    let invitationWorkspaceId = null
+    let invitationTeamId = null
+    if (invitationToken) {
+      const invitation = await WorkspaceInvitationModel.findOne({
+        token: invitationToken,
+        expiresAt: { $gt: new Date() },
+      })
+
+      if (!invitation) {
+        return res.status(400).json({
+          success: false,
+          message: "Invalid or expired invitation link",
+        })
+      }
+
+      // Validate that the requested role matches the invitation's allowed role
+      if (role !== invitation.allowedRole) {
+        return res.status(400).json({
+          success: false,
+          message: `This invitation is only for ${invitation.allowedRole}s. Please select ${invitation.allowedRole} as your role.`,
+        })
+      }
+
+      invitationWorkspaceId = invitation.workspaceId
+      invitationTeamId = invitation.teamId
+    }
+
+    const salt = bcrypt.genSaltSync()
+    const hashedPassword = bcrypt.hashSync(password, salt)
+
+    // Prepare user data with workspace if invited
+    const userData: any = {
+      name,
+      email,
+      password: hashedPassword,
+      role,
+      profileImage,
+    }
+
+    // Add workspace to user if signing up via invitation
+    if (invitationWorkspaceId) {
+      userData.workspaces = [invitationWorkspaceId]
+    }
+
+    // Add team to user if signing up via team invitation
+    if (invitationTeamId) {
+      userData.teams = [invitationTeamId]
+    }
+
+    const user = new UserModel(userData)
+
+    await user.save()
+
+    // Add user to team based on role if signing up via team invitation
+    if (invitationTeamId) {
+      const updateField = user.role === "teacher" ? "assignedTeachers" : "assignedStudents"
+      await TeamModel.findByIdAndUpdate(invitationTeamId, {
+        $addToSet: { [updateField]: user._id },
+      })
+    }
+
+    res.status(201).json({
+      success: true,
+      message: invitationToken
+        ? invitationTeamId
+          ? "User created and added to team"
+          : "User created and added to workspace"
+        : "User created",
+      userId: user._id,
+      profileImage: user.profileImage,
+      accessToken: user.accessToken,
+      workspaceId: invitationWorkspaceId,
+      teams: user.teams?.map((teamId) => teamId.toString()) || [],
+    })
+  } catch (error) {
+    console.error("❌ Error creating user:", error)
+    res.status(400).json({
+      success: false,
+      message: "Could not create user",
+      errors: error,
+    })
+  }
+}
diff --git a/backend/src/controllers/postWorkspace.ts b/backend/src/controllers/postWorkspace.ts
new file mode 100644
index 0000000000..806ac81deb
--- /dev/null
+++ b/backend/src/controllers/postWorkspace.ts
@@ -0,0 +1,126 @@
+import { Request, Response } from "express"
+import { WorkspaceModel } from "../models/workspace"
+import { UserModel } from "../models/user"
+
+/**
+ * @swagger
+ * /workspace:
+ *   post:
+ *     summary: Create a new workspace
+ *     tags:
+ *       - Workspaces
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - name
+ *             properties:
+ *               name:
+ *                 type: string
+ *                 example: "Math Department"
+ *     responses:
+ *       201:
+ *         description: Workspace created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: true
+ *                 response:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace created successfully"
+ *       400:
+ *         description: Bad Request - missing name
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Workspace name is required"
+ *       500:
+ *         description: Server error
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 success:
+ *                   type: boolean
+ *                   example: false
+ *                 response:
+ *                   nullable: true
+ *                 message:
+ *                   type: string
+ *                   example: "Unknown server error"
+ */
+export const postWorkspace = async (req: Request, res: Response): Promise<Response> => {
+  try {
+    const { name } = req.body
+    const createdBy = req.user?._id
+
+    if (!name) {
+      return res.status(400).json({
+        success: false,
+        response: null,
+        message: "Workspace name is required",
+      })
+    }
+
+    const newWorkspace = new WorkspaceModel({
+      name,
+      createdBy,
+    })
+    const savedNewWorkspace = await newWorkspace.save()
+
+    // Automatically add the creator to the workspace
+    await UserModel.findByIdAndUpdate(
+      createdBy,
+      { $addToSet: { workspaces: savedNewWorkspace._id } },
+      { new: true }
+    )
+
+    return res.status(201).json({
+      success: true,
+      response: savedNewWorkspace,
+      message: "Workspace created successfully",
+    })
+  } catch (error) {
+    console.error("Error in postWorkspace:", error)
+
+    if (error instanceof Error) {
+      return res.status(500).json({
+        success: false,
+        response: null,
+        message: error.message,
+      })
+    }
+
+    return res.status(500).json({
+      success: false,
+      response: null,
+      message: "Unknown server error",
+    })
+  }
+}
diff --git a/backend/src/controllers/workspace-invitation.ts b/backend/src/controllers/workspace-invitation.ts
new file mode 100644
index 0000000000..d6d36f4827
--- /dev/null
+++ b/backend/src/controllers/workspace-invitation.ts
@@ -0,0 +1,576 @@
+import crypto from "crypto"
+import { Request, Response } from "express"
+import { WorkspaceInvitationModel } from "../models/WorkspaceInvitation"
+import { UserModel } from "../models/user"
+import { WorkspacePermissionChecker } from "../utils/workspace-permissions"
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/invite:
+ *   post:
+ *     summary: Create workspace invitation link (teacher-only)
+ *     description: Generate an invitation link for students to join a workspace. Only teachers can create invitations. The link expires in 7 days.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to invite users to
+ *     responses:
+ *       200:
+ *         description: Invitation link created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                  message:
+ *                    type: string
+ *                    example: "Invitation created successfully"
+ *                  signupLink:
+ *                    type: string
+ *                    example: "https://class-review.netlify.app/signUp?token=abc123def456"
+ *                  expiresAt:
+ *                    type: string
+ *                    format: date-time
+ *       400:
+ *         description: Bad request
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Team does not belong to this workspace"
+ *       403:
+ *         description: Insufficient permissions - Only teachers can create invitations
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to create invitations"
+ *       500:
+ *         description: Server error
+ */
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/teams/{teamId}/invite:
+ *   post:
+ *     summary: Create team-specific invitation link (teacher-only)
+ *     description: Generate an invitation link for students to join a specific team in a workspace. Only teachers can create invitations. The link expires in 7 days.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to invite users to
+ *       - in: path
+ *         name: teamId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the team to invite users to
+ *     responses:
+ *       200:
+ *         description: Invitation link created successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                  message:
+ *                    type: string
+ *                    example: "Invitation created successfully"
+ *                  signupLink:
+ *                    type: string
+ *                    example: "https://class-review.netlify.app/signUp?token=abc123def456"
+ *                  expiresAt:
+ *                    type: string
+ *                    format: date-time
+ *       400:
+ *         description: Bad request
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Team does not belong to this workspace"
+ *       403:
+ *         description: Insufficient permissions - Only teachers can create invitations
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to create invitations"
+ *       500:
+ *         description: Server error
+ */
+export const createInvitationLink = async (req: Request, res: Response) => {
+  try {
+    const { workspaceId, teamId } = req.params
+    const { expiresAt, allowedRole } = req.body
+    const createdBy = req.user?._id
+
+    // Check if user can create invitations (only teachers/admins)
+    const canInvite = await WorkspacePermissionChecker.canInviteMembers(
+      workspaceId,
+      createdBy?.toString() || ""
+    )
+    if (!canInvite) {
+      return res.status(403).json({ message: "You don't have permission to create invitations" })
+    }
+
+    // If teamId is provided, verify the team belongs to the workspace
+    if (teamId) {
+      const { TeamModel } = await import("../models/Team")
+      const team = await TeamModel.findById(teamId)
+      if (!team || team.workspaceId.toString() !== workspaceId) {
+        return res.status(400).json({ message: "Team does not belong to this workspace" })
+      }
+    }
+
+    // Validate allowedRole
+    const validRoles = ["student", "teacher"]
+    const invitationRole = allowedRole || "student"
+    if (!validRoles.includes(invitationRole)) {
+      return res.status(400).json({ message: "Invalid role. Allowed roles: student, teacher" })
+    }
+
+    // Generate unique token
+    const token = crypto.randomBytes(32).toString("hex")
+
+    // Determine expiration date: use provided date or default to 7 days
+    let expirationDate: Date
+    if (expiresAt) {
+      expirationDate = new Date(expiresAt)
+      // Validate that the date is in the future
+      if (expirationDate <= new Date()) {
+        return res.status(400).json({ message: "Expiration date must be in the future" })
+      }
+    } else {
+      expirationDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days default
+    }
+
+    // Create invitation for specified role
+    const invitation = new WorkspaceInvitationModel({
+      workspaceId,
+      teamId: teamId || undefined,
+      createdBy,
+      token,
+      expiresAt: expirationDate,
+      allowedRole: invitationRole,
+    })
+
+    await invitation.save()
+
+    // Generate the signup link
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:5173"
+    const signupLink = `${frontendUrl}/signUp?token=${token}`
+
+    res.json({
+      message: "Invitation created successfully",
+      signupLink,
+      expiresAt: invitation.expiresAt,
+    })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
+
+/**
+ * @swagger
+ * /invitation/validate/{token}:
+ *   get:
+ *     summary: Validate invitation token
+ *     description: Check if an invitation token is valid and not expired
+ *     tags:
+ *       - Invitations
+ *     parameters:
+ *       - in: path
+ *         name: token
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: The invitation token to validate
+ *     responses:
+ *       200:
+ *         description: Token is valid
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 valid:
+ *                   type: boolean
+ *                   example: true
+ *                 workspace:
+ *                   type: object
+ *                   properties:
+ *                     _id:
+ *                       type: string
+ *                     name:
+ *                       type: string
+ *                 expiresAt:
+ *                   type: string
+ *                   format: date-time
+ *       400:
+ *         description: Invalid or expired token
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Invalid or expired invitation link"
+ *       500:
+ *         description: Server error
+ */
+export const validateInvitationToken = async (req: Request, res: Response) => {
+  try {
+    const { token } = req.params
+
+    const invitation = await WorkspaceInvitationModel.findOne({
+      token,
+      expiresAt: { $gt: new Date() },
+    }).populate("workspaceId")
+
+    if (!invitation) {
+      return res.status(400).json({ message: "Invalid or expired invitation link" })
+    }
+
+    res.json({
+      valid: true,
+      workspace: invitation.workspaceId,
+      expiresAt: invitation.expiresAt,
+      allowedRole: invitation.allowedRole,
+    })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
+
+/**
+ * @swagger
+ * /invitation/use:
+ *   post:
+ *     summary: Use invitation token to join workspace
+ *     description: Use a valid invitation token to join a workspace or team. The invitation must not be expired and must match the user's role.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     requestBody:
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - token
+ *             properties:
+ *               token:
+ *                 type: string
+ *                 description: The invitation token to use
+ *                 example: "abc123def456ghi789"
+ *     responses:
+ *       200:
+ *         description: Successfully joined workspace
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "Successfully joined workspace"
+ *       400:
+ *         description: Invalid or expired invitation link
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *       403:
+ *         description: Role mismatch - invitation is for a different user role
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "This invitation is only for students. Your role is teacher."
+ *       404:
+ *         description: User not found
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "User not found"
+ *       500:
+ *         description: Server error
+ */
+export const useInvitationToken = async (req: Request, res: Response) => {
+  try {
+    const { token } = req.body
+    const userId = req.user?._id
+
+    const invitation = await WorkspaceInvitationModel.findOne({
+      token,
+      expiresAt: { $gt: new Date() },
+    })
+
+    if (!invitation) {
+      return res.status(400).json({ message: "Invalid or expired invitation link" })
+    }
+
+    // Check if user's role matches the invitation's allowed role
+    const user = await UserModel.findById(userId)
+    if (!user) {
+      return res.status(404).json({ message: "User not found" })
+    }
+
+    if (user.role !== invitation.allowedRole) {
+      return res.status(403).json({
+        message: `This invitation is only for ${invitation.allowedRole}s. Your role is ${user.role}.`,
+      })
+    }
+
+    // Add user to workspace (using $addToSet ensures no duplicates even with multiple uses)
+    await UserModel.findByIdAndUpdate(userId, {
+      $addToSet: { workspaces: invitation.workspaceId },
+    })
+
+    res.json({ message: "Successfully joined workspace" })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
+
+/**
+ * @swagger
+ * /workspace/{workspaceId}/invitations:
+ *   get:
+ *     summary: Get invitation history for workspace (teacher-only)
+ *     description: Retrieve the history of all invitations created for a workspace. Only teachers can view this information.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: workspaceId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the workspace to get invitation history for
+ *     responses:
+ *       200:
+ *         description: Invitation history retrieved successfully
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 invitations:
+ *                   type: array
+ *                   items:
+ *                     type: object
+ *                     properties:
+ *                       _id:
+ *                         type: string
+ *                       workspaceId:
+ *                         type: string
+ *                       teamId:
+ *                         type: string
+ *                       createdBy:
+ *                         type: object
+ *                         properties:
+ *                           name:
+ *                             type: string
+ *                           email:
+ *                             type: string
+ *                       token:
+ *                         type: string
+ *                       expiresAt:
+ *                         type: string
+ *                         format: date-time
+ *                       createdAt:
+ *                         type: string
+ *                         format: date-time
+ *       403:
+ *         description: Insufficient permissions - Only teachers can view invitation history
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               properties:
+ *                 message:
+ *                   type: string
+ *                   example: "You don't have permission to view invitation history"
+ *       500:
+ *         description: Server error
+ */
+export const getInvitationHistory = async (req: Request, res: Response) => {
+  try {
+    const { workspaceId } = req.params
+    const userId = req.user?._id
+
+    // Check if user can view invitation history
+    const canView = await WorkspacePermissionChecker.canInviteMembers(
+      workspaceId,
+      userId?.toString() || ""
+    )
+    if (!canView) {
+      return res
+        .status(403)
+        .json({ message: "You don't have permission to view invitation history" })
+    }
+
+    const invitations = await WorkspaceInvitationModel.find({ workspaceId })
+      .populate("createdBy", "name email")
+      .sort({ createdAt: -1 })
+
+    res.json({ invitations })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
+
+/**
+ * @swagger
+ * /invitation/{invitationId}:
+ *   delete:
+ *     summary: Delete an invitation link (teacher-only)
+ *     description: Permanently delete an invitation link. Only teachers can delete invitations.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: invitationId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the invitation to delete
+ *     responses:
+ *       200:
+ *         description: Invitation deleted successfully
+ *       403:
+ *         description: Insufficient permissions
+ *       404:
+ *         description: Invitation not found
+ *       500:
+ *         description: Server error
+ */
+export const deleteInvitation = async (req: Request, res: Response) => {
+  try {
+    const { invitationId } = req.params
+    const userId = req.user?._id
+
+    const invitation = await WorkspaceInvitationModel.findById(invitationId)
+    if (!invitation) {
+      return res.status(404).json({ message: "Invitation not found" })
+    }
+
+    // Check if user can delete invitations
+    const canDelete = await WorkspacePermissionChecker.canInviteMembers(
+      invitation.workspaceId.toString(),
+      userId?.toString() || ""
+    )
+    if (!canDelete) {
+      return res.status(403).json({ message: "You don't have permission to delete invitations" })
+    }
+
+    await WorkspaceInvitationModel.findByIdAndDelete(invitationId)
+    res.json({ message: "Invitation deleted successfully" })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
+
+/**
+ * @swagger
+ * /invitation/{invitationId}/deactivate:
+ *   patch:
+ *     summary: Deactivate an invitation link (teacher-only)
+ *     description: Deactivate an invitation link by setting its expiration date to now. Only teachers can deactivate invitations.
+ *     tags:
+ *       - Invitations
+ *     security:
+ *       - bearerAuth: []
+ *     parameters:
+ *       - in: path
+ *         name: invitationId
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: ID of the invitation to deactivate
+ *     responses:
+ *       200:
+ *         description: Invitation deactivated successfully
+ *       403:
+ *         description: Insufficient permissions
+ *       404:
+ *         description: Invitation not found
+ *       500:
+ *         description: Server error
+ */
+export const deactivateInvitation = async (req: Request, res: Response) => {
+  try {
+    const { invitationId } = req.params
+    const userId = req.user?._id
+
+    const invitation = await WorkspaceInvitationModel.findById(invitationId)
+    if (!invitation) {
+      return res.status(404).json({ message: "Invitation not found" })
+    }
+
+    // Check if user can deactivate invitations
+    const canDeactivate = await WorkspacePermissionChecker.canInviteMembers(
+      invitation.workspaceId.toString(),
+      userId?.toString() || ""
+    )
+    if (!canDeactivate) {
+      return res
+        .status(403)
+        .json({ message: "You don't have permission to deactivate invitations" })
+    }
+
+    // Set expiration to now to effectively deactivate the invitation
+    await WorkspaceInvitationModel.findByIdAndUpdate(invitationId, {
+      expiresAt: new Date(),
+    })
+
+    res.json({ message: "Invitation deactivated successfully" })
+  } catch (error) {
+    res.status(500).json({ error: error instanceof Error ? error.message : "Unknown error" })
+  }
+}
diff --git a/backend/src/data.json b/backend/src/data.json
new file mode 100644
index 0000000000..1b584c0306
--- /dev/null
+++ b/backend/src/data.json
@@ -0,0 +1,66 @@
+{
+  "projects": [
+    {
+      "projectName": "Project One",
+      "projectDescription": "Description for project one.",
+      "video": "https://example.com/video1.mp4"
+    },
+    {
+      "projectName": "Project Two",
+      "projectDescription": "Description for project two.",
+      "video": "https://example.com/video2.mp4"
+    },
+    {
+      "projectName": "Project Three",
+      "projectDescription": "Description for project three.",
+      "video": "https://example.com/video3.mp4"
+    },
+    {
+      "projectName": "Project Four",
+      "projectDescription": "Description for project four.",
+      "video": "https://example.com/video4.mp4"
+    }
+  ],
+  "comments": [
+    {
+      "content": "Comment one on Project One",
+      "createdAt": "2025-06-25T10:00:00Z",
+      "timeStamp": "00:10",
+      "projectIndex": 0
+    },
+    {
+      "content": "Comment on Project Two",
+      "createdAt": "2025-06-25T12:00:00Z",
+      "timeStamp": "00:30",
+      "projectIndex": 1
+    },
+    {
+      "content": "Comment on Project Three",
+      "createdAt": "2025-06-25T13:00:00Z",
+      "timeStamp": "00:40",
+      "projectIndex": 2
+    }
+  ],
+  "replies": [
+    {
+      "content": "Reply to comment one on Project One",
+      "createdAt": "2025-06-25T10:15:00Z",
+      "commentIndex": 0
+    },
+    {
+      "content": "Reply to comment one on Project One again",
+      "createdAt": "2025-07-25T10:16:00Z",
+      "commentIndex": 0
+    },
+    {
+      "content": "Reply to comment two on Project One",
+      "createdAt": "2025-06-25T11:15:00Z",
+      "commentIndex": 1
+    },
+    {
+      "content": "Reply to comment on Project Two",
+      "createdAt": "2025-06-25T12:15:00Z",
+      "commentIndex": 2
+    }
+  ]
+}
diff --git a/backend/src/middleware/authenticateUser.ts b/backend/src/middleware/authenticateUser.ts
new file mode 100644
index 0000000000..1ef6b8841e
--- /dev/null
+++ b/backend/src/middleware/authenticateUser.ts
@@ -0,0 +1,44 @@
+import { UserModel, UserType } from "../models/user"
+import { NextFunction, Request, Response } from "express"
+
+// Extend the Express Request interface to include "user"
+declare module "express-serve-static-core" {
+  interface Request {
+    user?: UserType
+  }
+}
+
+export const authenticateUser = async (
+  req: Request,
+  res: Response,
+  next: NextFunction
+) => {
+  try {
+    let token = req.header("Authorization")
+
+    if (!token) {
+      return res.status(400).json({ error: "Authorization header missing" })
+    }
+
+    // Remove "Bearer " prefix if present
+    if (token.startsWith("Bearer ")) {
+      token = token.slice(7) // removes first 7 characters
+    }
+
+    const user = await UserModel.findOne({ accessToken: token })
+
+    if (!user) {
+      return res
+        .status(401)
+        .json({ error: "Invalid or expired token", loggedOut: true })
+    }
+
+    req.user = user
+    next()
+  } catch (err) {
+    console.error("Authentication error:", err)
+    res
+      .status(500)
+      .json({ error: "Internal server error during authentication" })
+  }
+}
diff --git a/backend/src/middleware/uploadImage.ts b/backend/src/middleware/uploadImage.ts
new file mode 100644
index 0000000000..61cdda3838
--- /dev/null
+++ b/backend/src/middleware/uploadImage.ts
@@ -0,0 +1,23 @@
+import dotenv from "dotenv"
+dotenv.config()
+
+import multer from "multer"
+import { v2 as cloudinary } from "cloudinary"
+import { CloudinaryStorage } from "multer-storage-cloudinary"
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME!,
+  api_key: process.env.CLOUDINARY_API_KEY!,
+  api_secret: process.env.CLOUDINARY_API_SECRET!,
+})
+
+const imageStorage = new CloudinaryStorage({
+  cloudinary,
+  params: {
+    folder: "profile_pictures",
+    resource_type: "image",
+    allowed_formats: ["jpg", "jpeg", "png", "webp"],
+  } as any,
+})
+
+export const uploadImage = multer({ storage: imageStorage })
diff --git a/backend/src/middleware/uploadVideo.ts b/backend/src/middleware/uploadVideo.ts
new file mode 100644
index 0000000000..2e0da7c55d
--- /dev/null
+++ b/backend/src/middleware/uploadVideo.ts
@@ -0,0 +1,32 @@
+// middleware/uploadVideo.ts
+
+import dotenv from "dotenv"
+dotenv.config() // ✅ this MUST be before Cloudinary config
+
+import multer from "multer"
+import { v2 as cloudinary } from "cloudinary"
+import { CloudinaryStorage } from "multer-storage-cloudinary"
+
+// Optional: debug log
+console.log("Cloudinary ENV check:", {
+  name: process.env.CLOUDINARY_CLOUD_NAME,
+  keySet: !!process.env.CLOUDINARY_API_KEY,
+  secretSet: !!process.env.CLOUDINARY_API_SECRET,
+})
+
+cloudinary.config({
+  cloud_name: process.env.CLOUDINARY_CLOUD_NAME!,
+  api_key: process.env.CLOUDINARY_API_KEY!,
+  api_secret: process.env.CLOUDINARY_API_SECRET!,
+})
+
+const storage = new CloudinaryStorage({
+  cloudinary,
+  params: {
+    folder: "videos",
+    resource_type: "video",
+    allowed_formats: ["mp4", "mov", "avi"],
+  } as any,
+})
+
+export const uploadVideo = multer({ storage })
diff --git a/backend/src/models/Class.ts b/backend/src/models/Class.ts
new file mode 100644
index 0000000000..6e31fc8fb7
--- /dev/null
+++ b/backend/src/models/Class.ts
@@ -0,0 +1,17 @@
+import { Schema, model, Types } from "mongoose"
+
+export interface ClassType {
+  classTitle: string
+  projects: Types.ObjectId[]
+  workspaceId: Types.ObjectId
+  schemaVersion: string
+}
+
+const ClassSchema = new Schema<ClassType>({
+  classTitle: { type: String, required: true, maxlength: 100, trim: true },
+  projects: [{ type: Schema.Types.ObjectId, ref: "Project" }],
+  workspaceId: { type: Schema.Types.ObjectId, ref: "Workspace", required: true },
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const ClassModel = model<ClassType>("Class", ClassSchema)
diff --git a/backend/src/models/Comment.ts b/backend/src/models/Comment.ts
new file mode 100644
index 0000000000..07bdd12b5e
--- /dev/null
+++ b/backend/src/models/Comment.ts
@@ -0,0 +1,39 @@
+import { Schema, Types, model } from "mongoose"
+
+export type CommentCategory = "question" | "public" | "private"
+
+export interface CommentType {
+  content: string
+  projectId: Types.ObjectId
+  createdAt: Date
+  timeStamp?: string
+  isChecked: boolean
+  replies: Types.ObjectId[]
+  commentCreatedBy: Types.ObjectId
+  commentType: CommentCategory
+  likes: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const CommentSchema = new Schema<CommentType>({
+  content: { type: String, required: true, maxlength: 500, trim: true },
+  projectId: { type: Schema.Types.ObjectId, ref: "Project", required: true },
+  createdAt: { type: Date, default: Date.now },
+  timeStamp: String,
+  isChecked: { type: Boolean, required: true, default: false },
+  replies: [{ type: Schema.Types.ObjectId, ref: "Reply" }],
+  commentCreatedBy: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+  commentType: {
+    type: String,
+    enum: ["question", "public", "private"],
+    required: true,
+  },
+  likes: [{ type: Schema.Types.ObjectId, ref: "User", default: [] }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const CommentModel = model<CommentType>("Comment", CommentSchema)
diff --git a/backend/src/models/Projects.ts b/backend/src/models/Projects.ts
new file mode 100644
index 0000000000..b33946ff6c
--- /dev/null
+++ b/backend/src/models/Projects.ts
@@ -0,0 +1,31 @@
+import mongoose, { Schema, Types, model } from "mongoose"
+
+export interface Project {
+  classId: Types.ObjectId
+  projectName: string
+  projectDescription?: string
+  teacher?: string
+  video?: string
+  thumbnail?: string
+  projectCreatedBy: Types.ObjectId
+  comments: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const ProjectSchema = new Schema<Project>({
+  classId: { type: Schema.Types.ObjectId, ref: "Class", required: true },
+  projectName: { type: String, required: true, maxlength: 200, trim: true },
+  projectDescription: String,
+  teacher: String,
+  video: String,
+  thumbnail: String,
+  projectCreatedBy: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+  comments: [{ type: Schema.Types.ObjectId, ref: "Comment" }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const Project = model<Project>("Project", ProjectSchema)
diff --git a/backend/src/models/Reply.ts b/backend/src/models/Reply.ts
new file mode 100644
index 0000000000..61712b0f26
--- /dev/null
+++ b/backend/src/models/Reply.ts
@@ -0,0 +1,23 @@
+import { Schema, Document, Types, model } from "mongoose"
+
+export interface ReplyType {
+  content: string
+  commentId: Types.ObjectId
+  createdAt: Date
+  isChecked: boolean
+  replyCreatedBy: Types.ObjectId
+  replyLikes: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const ReplySchema = new Schema<ReplyType>({
+  content: { type: String, required: true, maxlength: 500, trim: true },
+  commentId: { type: Schema.Types.ObjectId, ref: "Comment", required: true },
+  createdAt: { type: Date, default: Date.now },
+  isChecked: { type: Boolean, required: true },
+  replyCreatedBy: { type: Schema.Types.ObjectId, ref: "User", required: true },
+  replyLikes: [{ type: Schema.Types.ObjectId, ref: "User", default: [] }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const Reply = model<ReplyType>("Reply", ReplySchema)
diff --git a/backend/src/models/Team.ts b/backend/src/models/Team.ts
new file mode 100644
index 0000000000..385bd727c0
--- /dev/null
+++ b/backend/src/models/Team.ts
@@ -0,0 +1,39 @@
+import { Schema, Document, Types, model } from "mongoose"
+
+export interface TeamType extends Document {
+  _id: Types.ObjectId
+  teamName: string
+  createdBy: Types.ObjectId
+  createdAt: Date
+  assignedTeachers: Types.ObjectId[]
+  assignedStudents: Types.ObjectId[]
+  workspaceId: Types.ObjectId
+  accessTo: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const TeamSchema = new Schema<TeamType>({
+  teamName: {
+    type: String,
+    required: true,
+    minlength: 2,
+    maxlength: 100,
+    trim: true,
+  },
+  createdBy: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+  assignedTeachers: [{ type: Schema.Types.ObjectId, ref: "User", default: [] }],
+  assignedStudents: [{ type: Schema.Types.ObjectId, ref: "User", default: [] }],
+  workspaceId: { type: Schema.Types.ObjectId, ref: "Workspace", required: true },
+  accessTo: [{ type: Schema.Types.ObjectId, ref: "Class", default: [] }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const TeamModel = model<TeamType>("Team", TeamSchema)
diff --git a/backend/src/models/WorkspaceInvitation.ts b/backend/src/models/WorkspaceInvitation.ts
new file mode 100644
index 0000000000..3dd5fd1052
--- /dev/null
+++ b/backend/src/models/WorkspaceInvitation.ts
@@ -0,0 +1,54 @@
+import { Schema, Document, Types, model } from "mongoose"
+
+export interface WorkspaceInvitationType extends Document {
+  _id: Types.ObjectId
+  workspaceId: Types.ObjectId
+  teamId?: Types.ObjectId
+  createdBy: Types.ObjectId
+  token: string
+  expiresAt: Date
+  allowedRole: string
+  schemaVersion: string
+}
+
+const WorkspaceInvitationSchema = new Schema<WorkspaceInvitationType>({
+  workspaceId: {
+    type: Schema.Types.ObjectId,
+    ref: "Workspace",
+    required: true,
+  },
+  teamId: {
+    type: Schema.Types.ObjectId,
+    ref: "Team",
+    required: false,
+  },
+  createdBy: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+  token: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+  expiresAt: {
+    type: Date,
+    required: true,
+    default: () => new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days
+  },
+  allowedRole: {
+    type: String,
+    enum: ["student", "teacher"],
+    default: "student",
+  },
+  schemaVersion: { type: String, default: "v2" },
+})
+
+// Index for performance
+WorkspaceInvitationSchema.index({ expiresAt: 1 })
+
+export const WorkspaceInvitationModel = model<WorkspaceInvitationType>(
+  "WorkspaceInvitation",
+  WorkspaceInvitationSchema
+)
diff --git a/backend/src/models/user.ts b/backend/src/models/user.ts
new file mode 100644
index 0000000000..8048507417
--- /dev/null
+++ b/backend/src/models/user.ts
@@ -0,0 +1,64 @@
+import { Schema, Document, Types, model } from "mongoose"
+import crypto from "crypto"
+
+export interface UserType extends Document {
+  _id: Types.ObjectId
+  name: string
+  email: string
+  password: string
+  role: string
+  profileImage: string
+  accessToken: string
+  likedComments: Types.ObjectId[]
+  likedReplies: Types.ObjectId[]
+  workspaces: Types.ObjectId[]
+  teams: Types.ObjectId[]
+  assignedTeams: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const UserSchema = new Schema<UserType>({
+  name: {
+    type: String,
+    required: true,
+    minlength: 2,
+    maxlength: 100,
+    trim: true,
+  },
+  email: {
+    type: String,
+    required: true,
+    unique: true,
+    lowercase: true,
+    trim: true,
+  },
+  password: {
+    type: String,
+    required: true,
+    minlength: 4,
+    maxlength: 100,
+    trim: true,
+  },
+  role: {
+    type: String,
+    required: true,
+    enum: ["teacher", "student"],
+  },
+  profileImage: {
+    type: String,
+    default:
+      "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+  },
+  accessToken: {
+    type: String,
+    default: () => crypto.randomBytes(128).toString("hex"),
+  },
+  likedComments: [{ type: Schema.Types.ObjectId, ref: "Comment", default: [] }],
+  likedReplies: [{ type: Schema.Types.ObjectId, ref: "Reply", default: [] }],
+  workspaces: [{ type: Schema.Types.ObjectId, ref: "Workspace", default: [] }],
+  teams: [{ type: Schema.Types.ObjectId, ref: "Team", default: [] }],
+  assignedTeams: [{ type: Schema.Types.ObjectId, ref: "Team", default: [] }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const UserModel = model<UserType>("User", UserSchema)
diff --git a/backend/src/models/workspace.ts b/backend/src/models/workspace.ts
new file mode 100644
index 0000000000..6f952996cc
--- /dev/null
+++ b/backend/src/models/workspace.ts
@@ -0,0 +1,35 @@
+import { Schema, Document, Types, model } from "mongoose"
+
+export interface WorkspaceType extends Document {
+  _id: Types.ObjectId
+  name: string
+  createdBy: Types.ObjectId
+  createdAt: Date
+  teams: Types.ObjectId[]
+  classes: Types.ObjectId[]
+  schemaVersion: string
+}
+
+const WorkspaceSchema = new Schema<WorkspaceType>({
+  name: {
+    type: String,
+    required: true,
+    minlength: 2,
+    maxlength: 60,
+    trim: true,
+  },
+  classes: [{ type: Schema.Types.ObjectId, ref: "Class", default: [] }],
+  createdBy: {
+    type: Schema.Types.ObjectId,
+    ref: "User",
+    required: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+  teams: [{ type: Schema.Types.ObjectId, ref: "Team", default: [] }],
+  schemaVersion: { type: String, default: "v2" },
+})
+
+export const WorkspaceModel = model<WorkspaceType>("Workspace", WorkspaceSchema)
diff --git a/backend/src/scripts/migrate-to-workspaces.ts b/backend/src/scripts/migrate-to-workspaces.ts
new file mode 100644
index 0000000000..a911f7accd
--- /dev/null
+++ b/backend/src/scripts/migrate-to-workspaces.ts
@@ -0,0 +1,230 @@
+import dotenv from "dotenv"
+dotenv.config()
+
+import mongoose from "mongoose"
+import { UserModel } from "../models/user"
+import { ClassModel } from "../models/Class"
+import { WorkspaceModel } from "../models/workspace"
+import { TeamModel } from "../models/Team"
+import { Project } from "../models/Projects"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+
+// Placeholder user ID (the "Deleted User" account)
+const PLACEHOLDER_USER_ID = new mongoose.Types.ObjectId("68a45fbaca5d5d29fe782190")
+
+/**
+ * Migration script to convert existing data to workspace-based architecture
+ * This creates "The Academy" workspace and migrates all existing data into it
+ */
+async function migrateToWorkspaces() {
+  const mongoUrl: string = process.env.MONGO_URL || "mongodb://localhost/final-project"
+
+  try {
+    await mongoose.connect(mongoUrl)
+    console.log("✅ Connected to MongoDB")
+
+    const session = await mongoose.startSession()
+    session.startTransaction()
+
+    try {
+      // Step 1: Check if migration already ran
+      const existingWorkspaces = await WorkspaceModel.countDocuments().session(session)
+      if (existingWorkspaces > 0) {
+        console.log("⚠️  Workspaces already exist. Migration may have already been run.")
+        console.log("   If you want to re-run this migration, please delete all workspaces first.")
+        await session.abortTransaction()
+        session.endSession()
+        await mongoose.disconnect()
+        return
+      }
+
+      // Step 2: Find or create the placeholder user
+      let placeholderUser = await UserModel.findById(PLACEHOLDER_USER_ID).session(session)
+      if (!placeholderUser) {
+        console.log("📝 Creating placeholder 'Deleted User' account...")
+        const created = await UserModel.create(
+          [
+            {
+              _id: PLACEHOLDER_USER_ID,
+              name: "Deleted User",
+              email: "deleted@placeholder.local",
+              password: "$2b$10$placeholder.hash.not.for.login",
+              role: "student",
+              profileImage:
+                "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+              workspaces: [],
+              teams: [],
+              assignedTeams: [],
+              schemaVersion: "v2",
+            },
+          ],
+          { session }
+        )
+        placeholderUser = created[0]
+        console.log("✅ Placeholder user created")
+      }
+
+      // Step 3: Find the oldest teacher to be the workspace creator
+      const oldestTeacher = await UserModel.findOne({ role: "teacher" })
+        .sort({ _id: 1 })
+        .session(session)
+
+      if (!oldestTeacher) {
+        console.log("❌ No teachers found in the database. Cannot create workspace.")
+        console.log("   Please create at least one teacher account first.")
+        await session.abortTransaction()
+        session.endSession()
+        await mongoose.disconnect()
+        return
+      }
+
+      // Step 4: Create "The Academy" workspace
+      console.log("🏫 Creating 'The Academy' workspace...")
+      const theAcademy = await WorkspaceModel.create(
+        [
+          {
+            name: "The Academy",
+            createdBy: oldestTeacher._id,
+            createdAt: new Date(),
+            teams: [],
+            classes: [],
+            schemaVersion: "v2",
+          },
+        ],
+        { session }
+      )
+      const workspaceId = theAcademy[0]._id
+      console.log(`✅ Workspace created with ID: ${workspaceId}`)
+
+      // Step 5: Migrate all users to the workspace (except placeholder)
+      console.log("👥 Migrating all users to workspace...")
+      const allUsers = await UserModel.find({}).session(session)
+
+      for (const user of allUsers) {
+        user.workspaces = [workspaceId]
+        user.teams = []
+        user.assignedTeams = []
+        user.schemaVersion = "v2"
+        await user.save({ session })
+      }
+      console.log(`✅ Migrated ${allUsers.length} users to workspace`)
+
+      // Step 6: Create "Spring 2025" team with all students
+      console.log("👥 Creating 'Spring 2025' team with all students...")
+      const allStudents = await UserModel.find({
+        role: "student",
+        _id: { $ne: PLACEHOLDER_USER_ID }, // Exclude placeholder user
+      }).session(session)
+
+      const allTeachers = await UserModel.find({ role: "teacher" }).session(session)
+
+      const spring2025Team = await TeamModel.create(
+        [
+          {
+            teamName: "Spring 2025",
+            createdBy: oldestTeacher._id,
+            createdAt: new Date(),
+            assignedTeachers: allTeachers.map((t) => t._id),
+            assignedStudents: allStudents.map((s) => s._id),
+            workspaceId: workspaceId,
+            accessTo: [], // Will be updated with classes later
+            schemaVersion: "v2",
+          },
+        ],
+        { session }
+      )
+      const teamId = spring2025Team[0]._id
+      console.log(`✅ Team created with ${allStudents.length} students and ${allTeachers.length} teachers`)
+
+      // Step 7: Update all students to be part of the team
+      for (const student of allStudents) {
+        student.teams = [teamId]
+        await student.save({ session })
+      }
+
+      // Step 8: Update all teachers to be assigned to the team
+      for (const teacher of allTeachers) {
+        teacher.assignedTeams = [teamId]
+        await teacher.save({ session })
+      }
+
+      // Step 9: Migrate all classes to the workspace
+      console.log("📚 Migrating all classes to workspace...")
+      const allClasses = await ClassModel.find({}).session(session)
+
+      for (const cls of allClasses) {
+        cls.workspaceId = workspaceId
+        cls.schemaVersion = "v2"
+        await cls.save({ session })
+      }
+
+      // Update workspace with class IDs
+      theAcademy[0].classes = allClasses.map((cls) => cls._id)
+      theAcademy[0].teams = [teamId]
+      await theAcademy[0].save({ session })
+
+      // Update team with access to all classes
+      spring2025Team[0].accessTo = allClasses.map((cls) => cls._id)
+      await spring2025Team[0].save({ session })
+      console.log(`✅ Migrated ${allClasses.length} classes to workspace and granted team access`)
+
+      // Step 10: Add schemaVersion to all projects
+      console.log("📁 Updating projects schema...")
+      const projectUpdateResult = await Project.updateMany(
+        { schemaVersion: { $exists: false } },
+        { $set: { schemaVersion: "v2" } }
+      ).session(session)
+      console.log(`✅ Updated ${projectUpdateResult.modifiedCount} projects`)
+
+      // Step 11: Add schemaVersion to all comments
+      console.log("💬 Updating comments schema...")
+      const commentUpdateResult = await CommentModel.updateMany(
+        { schemaVersion: { $exists: false } },
+        { $set: { schemaVersion: "v2" } }
+      ).session(session)
+      console.log(`✅ Updated ${commentUpdateResult.modifiedCount} comments`)
+
+      // Step 12: Add schemaVersion to all replies
+      console.log("↩️  Updating replies schema...")
+      const replyUpdateResult = await Reply.updateMany(
+        { schemaVersion: { $exists: false } },
+        { $set: { schemaVersion: "v2" } }
+      ).session(session)
+      console.log(`✅ Updated ${replyUpdateResult.modifiedCount} replies`)
+
+      // Commit the transaction
+      await session.commitTransaction()
+
+      console.log("\n🎉 Migration completed successfully!")
+      console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")
+      console.log(`📊 Summary:`)
+      console.log(`   - Workspace: "The Academy" (ID: ${workspaceId})`)
+      console.log(`   - Team: "Spring 2025" (ID: ${teamId})`)
+      console.log(`   - Users migrated: ${allUsers.length}`)
+      console.log(`   - Students in team: ${allStudents.length}`)
+      console.log(`   - Teachers in team: ${allTeachers.length}`)
+      console.log(`   - Classes migrated: ${allClasses.length}`)
+      console.log(`   - Projects updated: ${projectUpdateResult.modifiedCount}`)
+      console.log(`   - Comments updated: ${commentUpdateResult.modifiedCount}`)
+      console.log(`   - Replies updated: ${replyUpdateResult.modifiedCount}`)
+      console.log(`   - Placeholder user: ${placeholderUser ? "exists" : "created"}`)
+      console.log("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n")
+    } catch (error) {
+      await session.abortTransaction()
+      console.error("❌ Migration failed:", error)
+      throw error
+    } finally {
+      session.endSession()
+    }
+
+    await mongoose.disconnect()
+    console.log("✅ Disconnected from MongoDB")
+  } catch (error) {
+    console.error("❌ Fatal error:", error)
+    process.exit(1)
+  }
+}
+
+// Run the migration
+migrateToWorkspaces()
diff --git a/backend/src/server.ts b/backend/src/server.ts
new file mode 100755
index 0000000000..126a428ac9
--- /dev/null
+++ b/backend/src/server.ts
@@ -0,0 +1,60 @@
+import dotenv from "dotenv"
+dotenv.config()
+
+import express, { Application } from "express"
+import cors from "cors"
+import mongoose from "mongoose"
+import { setupSwagger } from "./swagger/swagger"
+
+import { resetDatabase } from "./setup/resetDatabase"
+import router from "./Routes/routes"
+
+const mongoUrl: string = process.env.MONGO_URL || "mongodb://localhost/final-project"
+mongoose.connect(mongoUrl)
+
+const port: number = parseInt(process.env.PORT || "8080")
+const app: Application = express()
+
+app.use(express.static("public"))
+
+const allowedOrigins = [
+  "http://localhost:5173", // your local dev
+  "https://class-review.netlify.app", // your deployed frontend
+]
+
+// First, parse incoming request bodies
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
+
+// Then, configure CORS
+app.use(
+  cors({
+    origin: function (origin, callback) {
+      if (!origin) return callback(null, true) // allow curl/postman with no origin
+      if (allowedOrigins.indexOf(origin) !== -1) {
+        callback(null, true)
+      } else {
+        callback(null, false) // silently fail without throwing error
+        // or you can do callback(new Error("Not allowed by CORS"));
+      }
+    },
+    methods: ["GET", "POST", "PATCH", "DELETE", "OPTIONS"],
+    allowedHeaders: ["Content-Type", "Authorization"],
+  })
+)
+
+// Handle OPTIONS preflight requests
+app.options("*", cors())
+
+resetDatabase()
+
+app.use("/", router)
+
+//This is a documentation helper
+// /api-docs/ for a endpoint
+setupSwagger(app)
+
+// Start the server
+app.listen(port, (): void => {
+  console.log(`Server running on http://localhost:${port}`)
+})
diff --git a/backend/src/setup/resetDatabase.ts b/backend/src/setup/resetDatabase.ts
new file mode 100644
index 0000000000..45999c98b6
--- /dev/null
+++ b/backend/src/setup/resetDatabase.ts
@@ -0,0 +1,111 @@
+import mongoose, { Types } from "mongoose"
+import { Project } from "../models/Projects"
+import { CommentModel } from "../models/Comment"
+import { Reply } from "../models/Reply"
+import data from "../data.json"
+
+export const resetDatabase = async () => {
+  if (!process.env.RESET_DB) return
+
+  console.log("🌱 Resetting and seeding database...")
+
+  try {
+    await Reply.deleteMany({})
+    await CommentModel.deleteMany({})
+    await Project.deleteMany({})
+
+    // Step 1: Insert Projects and keep saved documents
+    const savedProjects = []
+    for (const project of data.projects) {
+      const savedProject = await new Project(project).save()
+      savedProjects.push(savedProject)
+    }
+    console.log(`Saved ${savedProjects.length} projects.`)
+
+    // Step 2: Insert Comments with correct projectId and keep saved comments
+    const savedComments = []
+    for (const comment of data.comments) {
+      if (
+        comment.projectIndex === undefined ||
+        comment.projectIndex < 0 ||
+        comment.projectIndex >= savedProjects.length
+      ) {
+        console.error(
+          `Invalid projectIndex ${comment.projectIndex} for comment:`,
+          comment
+        )
+        continue // skip saving this comment
+      }
+
+      const projectId = savedProjects[comment.projectIndex]._id
+      if (!projectId) {
+        console.error(
+          `Missing projectId for comment at projectIndex ${comment.projectIndex}:`,
+          comment
+        )
+        continue // skip saving
+      }
+
+      const commentToSave = {
+        content: comment.content,
+        createdAt: new Date(comment.createdAt),
+        timeStamp: comment.timeStamp,
+        projectId,
+        replies: [],
+      }
+
+      try {
+        const savedComment = await new CommentModel(commentToSave).save()
+        savedComments.push(savedComment)
+      } catch (error) {
+        console.error("Failed to save comment:", commentToSave, error)
+      }
+    }
+    console.log(`Saved ${savedComments.length} comments.`)
+
+    // Step 3: Insert Replies with correct commentId
+    for (const reply of data.replies) {
+      if (
+        reply.commentIndex === undefined ||
+        reply.commentIndex < 0 ||
+        reply.commentIndex >= savedComments.length
+      ) {
+        console.error(
+          `Invalid commentIndex ${reply.commentIndex} for reply:`,
+          reply
+        )
+        continue // skip saving this reply
+      }
+
+      const commentId = savedComments[reply.commentIndex]._id
+      if (!commentId) {
+        console.error(
+          `Missing commentId for reply at commentIndex ${reply.commentIndex}:`,
+          reply
+        )
+        continue
+      }
+
+      const replyToSave = {
+        content: reply.content,
+        createdAt: new Date(reply.createdAt),
+        commentId,
+      }
+
+      try {
+        const savedReply = await new Reply(replyToSave).save()
+
+        // Add reply ID to the parent comment's replies array
+        const parentComment = savedComments[reply.commentIndex]
+        parentComment.replies.push(savedReply._id as Types.ObjectId)
+        await parentComment.save()
+      } catch (error) {
+        console.error("Failed to save reply:", replyToSave, error)
+      }
+    }
+
+    console.log("✅ Seeding complete.")
+  } catch (error) {
+    console.error("❌ Error during database reset:", error)
+  }
+}
diff --git a/backend/src/swagger/swagger.ts b/backend/src/swagger/swagger.ts
new file mode 100644
index 0000000000..dbb787fca2
--- /dev/null
+++ b/backend/src/swagger/swagger.ts
@@ -0,0 +1,194 @@
+import swaggerUi from "swagger-ui-express"
+import swaggerJsdoc from "swagger-jsdoc"
+import { Application } from "express"
+
+const options = {
+  definition: {
+    openapi: "3.0.0",
+    info: {
+      title: "Classymc API",
+      version: "1.0.0",
+      description: "API documentation for your Classync",
+    },
+    servers: [
+      {
+        url: process.env.API_URL || "http://localhost:8080",
+      },
+    ],
+    components: {
+      schemas: {
+        Class: {
+          type: "object",
+          required: ["classTitle"],
+          properties: {
+            classTitle: { type: "string", example: "Math 101" },
+            projects: {
+              type: "array",
+              items: {
+                type: "string",
+                format: "ObjectId",
+                description: "Project ID",
+              },
+            },
+          },
+        },
+        Comment: {
+          type: "object",
+          required: ["content", "projectId", "commentCreatedBy", "commentType"],
+          properties: {
+            content: { type: "string", example: "This is a comment." },
+            projectId: {
+              type: "string",
+              format: "ObjectId",
+              description: "Project ID",
+            },
+            createdAt: {
+              type: "string",
+              format: "date-time",
+              example: "2023-01-01T12:00:00Z",
+            },
+            timeStamp: { type: "string", nullable: true },
+            isChecked: { type: "boolean", example: false },
+            replies: {
+              type: "array",
+              items: {
+                type: "string",
+                format: "ObjectId",
+                description: "Reply ID",
+              },
+            },
+            commentCreatedBy: {
+              type: "string",
+              format: "ObjectId",
+              description: "User ID",
+            },
+            commentType: {
+              type: "string",
+              enum: ["question", "public", "private"],
+              example: "public",
+            },
+            likes: {
+              type: "array",
+              items: {
+                type: "string",
+                format: "ObjectId",
+                description: "User ID",
+              },
+            },
+          },
+        },
+        Project: {
+          type: "object",
+          required: ["classId", "projectName"],
+          properties: {
+            classId: {
+              type: "string",
+              format: "ObjectId",
+              description: "Class ID",
+            },
+            projectName: { type: "string", example: "Final Presentation" },
+            projectDescription: { type: "string", nullable: true },
+            video: { type: "string", nullable: true },
+            thumbnail: { type: "string", nullable: true },
+            comments: {
+              type: "array",
+              items: {
+                type: "string",
+                format: "ObjectId",
+                description: "Comment ID",
+              },
+            },
+          },
+        },
+        Reply: {
+          type: "object",
+          required: ["content", "commentId", "isChecked", "replyCreatedBy"],
+          properties: {
+            content: { type: "string", example: "Nice reply!" },
+            commentId: {
+              type: "string",
+              format: "ObjectId",
+              description: "Comment ID",
+            },
+            createdAt: {
+              type: "string",
+              format: "date-time",
+              example: "2023-01-01T12:00:00Z",
+            },
+            isChecked: { type: "boolean", example: false },
+            replyCreatedBy: {
+              type: "string",
+              format: "ObjectId",
+              description: "User ID",
+            },
+            replyLikes: {
+              type: "array",
+              items: {
+                type: "string",
+                format: "ObjectId",
+                description: "User ID",
+              },
+            },
+          },
+        },
+        User: {
+          type: "object",
+          required: ["name", "email", "password", "role", "projectCreatedBy"],
+          properties: {
+            _id: {
+              type: "string",
+              format: "ObjectId",
+              example: "64d0b2bde5d8f25a1e8d9f67",
+            },
+            name: { type: "string", example: "John Doe" },
+            email: {
+              type: "string",
+              format: "email",
+              example: "john@example.com",
+            },
+            password: { type: "string", example: "hashedpassword123" },
+            role: { type: "string", example: "teacher" },
+            projectCreatedBy: {
+              type: "string",
+              format: "ObjectId",
+              description: "User ID",
+            },
+            profileImage: {
+              type: "string",
+              example:
+                "https://res.cloudinary.com/dgr7l5nsx/image/upload/w_100,h_100,c_fill/v1754899421/profile_pictures/wtvbkvjnxrbdzfvjcmbi.png",
+            },
+            accessToken: { type: "string" },
+            likedComments: {
+              type: "array",
+              items: { type: "string", format: "ObjectId" },
+            },
+            likedReplies: {
+              type: "array",
+              items: { type: "string", format: "ObjectId" },
+            },
+          },
+        },
+      },
+      securitySchemes: {
+        bearerAuth: {
+          type: "http",
+          scheme: "bearer",
+          bearerFormat: "JWT",
+        },
+      },
+    },
+    security: [
+      {
+        bearerAuth: [],
+      },
+    ],
+  },
+  apis: ["./src/controllers/*.ts"],
+}
+
+const swaggerSpec = swaggerJsdoc(options)
+
+export function setupSwagger(app: Application) {
+  app.use("/", swaggerUi.serve, swaggerUi.setup(swaggerSpec))
+}
diff --git a/backend/src/types/swagger-jsdoc.d.ts b/backend/src/types/swagger-jsdoc.d.ts
new file mode 100644
index 0000000000..9b7cba1d7b
--- /dev/null
+++ b/backend/src/types/swagger-jsdoc.d.ts
@@ -0,0 +1,4 @@
+declare module "swagger-jsdoc" {
+  const swaggerJsdoc: any;
+  export default swaggerJsdoc;
+}
\ No newline at end of file
diff --git a/backend/src/utils/srtConverter.ts b/backend/src/utils/srtConverter.ts
new file mode 100644
index 0000000000..5383f4f7f7
--- /dev/null
+++ b/backend/src/utils/srtConverter.ts
@@ -0,0 +1,106 @@
+/**
+ * Converts timestamp string to total seconds (supports both MM:SS and MM:SS,mmm formats)
+ * @param timestamp - Time in MM:SS or MM:SS,mmm format
+ * @returns Total seconds as a number (with millisecond precision)
+ */
+const parseTimestamp = (timestamp: string): number => {
+  const [timePart, msPart] = timestamp.split(",");
+  const [minutes, seconds] = timePart.split(":").map(Number);
+  const milliseconds = msPart ? Number(msPart) / 1000 : 0;
+  return minutes * 60 + seconds + milliseconds;
+};
+
+/**
+ * Converts total seconds to SRT format (HH:MM:SS,mmm)
+ * @param totalSeconds - Total time in seconds (can include decimal milliseconds)
+ * @returns Time in SRT format HH:MM:SS,mmm
+ */
+const secondsToSrtTime = (totalSeconds: number): string => {
+  const hours = Math.floor(totalSeconds / 3600);
+  const mins = Math.floor((totalSeconds % 3600) / 60);
+  const secs = Math.floor(totalSeconds % 60);
+  const ms = Math.floor((totalSeconds % 1) * 1000);
+
+  return `${hours.toString().padStart(2, "0")}:${mins
+    .toString()
+    .padStart(2, "0")}:${secs.toString().padStart(2, "0")},${ms
+    .toString()
+    .padStart(3, "0")}`;
+};
+
+/**
+ * Converts MM:SS,mmm or MM:SS timestamp to SRT format (HH:MM:SS,mmm)
+ * @param timestamp - Time in MM:SS,mmm or MM:SS format
+ * @returns Time in SRT format HH:MM:SS,mmm
+ */
+export const convertToSrtTime = (timestamp: string): string => {
+  return secondsToSrtTime(parseTimestamp(timestamp));
+};
+
+/**
+ * Generates SRT subtitle content from comments
+ * @param comments - Array of comments with timestamps
+ * @param defaultDuration - Default subtitle duration in seconds (default: 5)
+ * @returns SRT formatted string
+ */
+export const generateSrtContent = (
+  comments: Array<{
+    timeStamp?: string;
+    content: string;
+    commentCreatedBy: { name: string };
+    commentType: string;
+  }>,
+  defaultDuration: number = 5
+): string => {
+  // Filter comments that have timestamps and sort by timestamp
+  const timestampedComments = comments
+    .filter((comment) => comment.timeStamp)
+    .sort((a, b) => {
+      const totalA = parseTimestamp(a.timeStamp!);
+      const totalB = parseTimestamp(b.timeStamp!);
+      return totalA - totalB;
+    });
+
+  if (timestampedComments.length === 0) {
+    return "";
+  }
+
+  let srtContent = "";
+
+  timestampedComments.forEach((comment, index) => {
+    // Subtitle index (1-based)
+    srtContent += `${index + 1}\n`;
+
+    // Calculate start and end times
+    const startTime = convertToSrtTime(comment.timeStamp!);
+    const currentTotalSecs = parseTimestamp(comment.timeStamp!);
+
+    // End time: either until next comment or +defaultDuration seconds
+    let endTime: string;
+    if (index < timestampedComments.length - 1) {
+      const nextComment = timestampedComments[index + 1];
+      const nextTotalSecs = parseTimestamp(nextComment.timeStamp!);
+
+      // Use the time until next comment or defaultDuration, whichever is smaller
+      const duration = Math.min(nextTotalSecs - currentTotalSecs, defaultDuration);
+      const endTotalSecs = currentTotalSecs + duration;
+
+      endTime = secondsToSrtTime(endTotalSecs);
+    } else {
+      // Last comment: add defaultDuration
+      const endTotalSecs = currentTotalSecs + defaultDuration;
+      endTime = secondsToSrtTime(endTotalSecs);
+    }
+
+    // Timestamp line
+    srtContent += `${startTime} --> ${endTime}\n`;
+
+    // Comment content only (no author name or type indicator)
+    srtContent += `${comment.content}\n`;
+
+    // Blank line between subtitles
+    srtContent += `\n`;
+  });
+
+  return srtContent.trim();
+};
diff --git a/backend/src/utils/workspace-permissions.ts b/backend/src/utils/workspace-permissions.ts
new file mode 100644
index 0000000000..54057b9272
--- /dev/null
+++ b/backend/src/utils/workspace-permissions.ts
@@ -0,0 +1,15 @@
+import { UserModel } from "../models/user"
+
+export class WorkspacePermissionChecker {
+  static async canInviteMembers(workspaceId: string, userId: string): Promise<boolean> {
+    try {
+      const user = await UserModel.findById(userId)
+      if (!user) return false
+
+      // Only teachers can invite members
+      return user.role === "teacher"
+    } catch (error) {
+      return false
+    }
+  }
+}
diff --git a/backend/tsconfig.json b/backend/tsconfig.json
new file mode 100644
index 0000000000..a1edd9a28f
--- /dev/null
+++ b/backend/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/frontend/.gitignore b/frontend/.gitignore
new file mode 100644
index 0000000000..6105c9a7c5
--- /dev/null
+++ b/frontend/.gitignore
@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
diff --git a/frontend/README.md b/frontend/README.md
index 5cdb1d9cf3..da9844432b 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,8 +1,54 @@
-# Frontend part of Final Project
+# React + TypeScript + Vite
 
-This boilerplate is designed to give you a head start in your React projects, with a focus on understanding the structure and components. As a student of Technigo, you'll find this guide helpful in navigating and utilizing the repository.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-## Getting Started
+Currently, two official plugins are available:
 
-1.  Install the required dependencies using `npm install`.
-2.  Start the development server using `npm run dev`.
\ No newline at end of file
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 0000000000..092408a9f0
--- /dev/null
+++ b/frontend/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
diff --git a/frontend/index.html b/frontend/index.html
index 664410b5b9..f156872198 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,13 +1,36 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Technigo React Vite Boiler Plate</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/vite.svg"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <title>Classync - Video Learning Platform</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script
+      type="module"
+      src="/src/main.js"
+    ></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
index 7b2747e949..8ec10116f7 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,26 +1,38 @@
 {
-  "name": "project-final-backend",
-  "description": "Client part of final project",
-  "version": "1.0.0",
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "framer-motion": "^12.23.9",
+    "moment": "^2.30.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0",
+    "react-responsive-carousel": "^3.2.23",
+    "react-router": "^7.6.2",
+    "react-router-dom": "^7.6.2",
+    "styled-components": "^6.1.19",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5"
   }
 }
diff --git a/frontend/public/ bg10.png b/frontend/public/ bg10.png
new file mode 100644
index 0000000000..a74aab56f2
Binary files /dev/null and b/frontend/public/ bg10.png differ
diff --git a/frontend/public/ bg10.webp b/frontend/public/ bg10.webp
new file mode 100644
index 0000000000..47117aaa33
Binary files /dev/null and b/frontend/public/ bg10.webp differ
diff --git a/frontend/public/Commentsform.mp4 b/frontend/public/Commentsform.mp4
new file mode 100755
index 0000000000..ef82591034
Binary files /dev/null and b/frontend/public/Commentsform.mp4 differ
diff --git a/frontend/public/Explainer3.mp4 b/frontend/public/Explainer3.mp4
new file mode 100644
index 0000000000..85c8e03ad9
Binary files /dev/null and b/frontend/public/Explainer3.mp4 differ
diff --git a/frontend/public/GroupTeam.jpeg b/frontend/public/GroupTeam.jpeg
new file mode 100644
index 0000000000..9c5769cfd3
Binary files /dev/null and b/frontend/public/GroupTeam.jpeg differ
diff --git a/frontend/public/GroupTeam.webp b/frontend/public/GroupTeam.webp
new file mode 100644
index 0000000000..80e7c7838d
Binary files /dev/null and b/frontend/public/GroupTeam.webp differ
diff --git a/frontend/public/Hero.png b/frontend/public/Hero.png
new file mode 100644
index 0000000000..ef7a7ab87b
Binary files /dev/null and b/frontend/public/Hero.png differ
diff --git a/frontend/public/Hero.webp b/frontend/public/Hero.webp
new file mode 100644
index 0000000000..341c550c2b
Binary files /dev/null and b/frontend/public/Hero.webp differ
diff --git a/frontend/public/Hero2.png b/frontend/public/Hero2.png
new file mode 100644
index 0000000000..cbfdb3f990
Binary files /dev/null and b/frontend/public/Hero2.png differ
diff --git a/frontend/public/Hero2.webp b/frontend/public/Hero2.webp
new file mode 100644
index 0000000000..e7b7133ac3
Binary files /dev/null and b/frontend/public/Hero2.webp differ
diff --git a/frontend/public/PrivetComments.mp4 b/frontend/public/PrivetComments.mp4
new file mode 100755
index 0000000000..b7fb7bd475
Binary files /dev/null and b/frontend/public/PrivetComments.mp4 differ
diff --git a/frontend/public/School1.png b/frontend/public/School1.png
new file mode 100644
index 0000000000..d0348dbb1a
Binary files /dev/null and b/frontend/public/School1.png differ
diff --git a/frontend/public/School1.webp b/frontend/public/School1.webp
new file mode 100644
index 0000000000..4056555fb7
Binary files /dev/null and b/frontend/public/School1.webp differ
diff --git a/frontend/public/School2.png b/frontend/public/School2.png
new file mode 100644
index 0000000000..b162dd3d84
Binary files /dev/null and b/frontend/public/School2.png differ
diff --git a/frontend/public/School2.webp b/frontend/public/School2.webp
new file mode 100644
index 0000000000..7ea0b6dffa
Binary files /dev/null and b/frontend/public/School2.webp differ
diff --git a/frontend/public/School3.png b/frontend/public/School3.png
new file mode 100644
index 0000000000..d3c353d817
Binary files /dev/null and b/frontend/public/School3.png differ
diff --git a/frontend/public/School3.webp b/frontend/public/School3.webp
new file mode 100644
index 0000000000..b8f90ba6fa
Binary files /dev/null and b/frontend/public/School3.webp differ
diff --git a/frontend/public/School4.png b/frontend/public/School4.png
new file mode 100644
index 0000000000..3f2bf2ac3d
Binary files /dev/null and b/frontend/public/School4.png differ
diff --git a/frontend/public/School4.webp b/frontend/public/School4.webp
new file mode 100644
index 0000000000..19e3012f5f
Binary files /dev/null and b/frontend/public/School4.webp differ
diff --git a/frontend/public/School5.png b/frontend/public/School5.png
new file mode 100644
index 0000000000..16f9ce281c
Binary files /dev/null and b/frontend/public/School5.png differ
diff --git a/frontend/public/School5.webp b/frontend/public/School5.webp
new file mode 100644
index 0000000000..3ca0ab5539
Binary files /dev/null and b/frontend/public/School5.webp differ
diff --git a/frontend/public/School6.png b/frontend/public/School6.png
new file mode 100644
index 0000000000..5db7231024
Binary files /dev/null and b/frontend/public/School6.png differ
diff --git a/frontend/public/School6.webp b/frontend/public/School6.webp
new file mode 100644
index 0000000000..47850ebd70
Binary files /dev/null and b/frontend/public/School6.webp differ
diff --git a/frontend/public/School7.png b/frontend/public/School7.png
new file mode 100644
index 0000000000..a1969d6480
Binary files /dev/null and b/frontend/public/School7.png differ
diff --git a/frontend/public/School7.webp b/frontend/public/School7.webp
new file mode 100644
index 0000000000..2863d8839a
Binary files /dev/null and b/frontend/public/School7.webp differ
diff --git a/frontend/public/SchoolTeam.jpeg b/frontend/public/SchoolTeam.jpeg
new file mode 100644
index 0000000000..36c84252a6
Binary files /dev/null and b/frontend/public/SchoolTeam.jpeg differ
diff --git a/frontend/public/SchoolTeam.webp b/frontend/public/SchoolTeam.webp
new file mode 100644
index 0000000000..f3d5135a84
Binary files /dev/null and b/frontend/public/SchoolTeam.webp differ
diff --git a/frontend/public/SportTeam.jpeg b/frontend/public/SportTeam.jpeg
new file mode 100644
index 0000000000..e3766b1106
Binary files /dev/null and b/frontend/public/SportTeam.jpeg differ
diff --git a/frontend/public/SportTeam.webp b/frontend/public/SportTeam.webp
new file mode 100644
index 0000000000..b8490bfda3
Binary files /dev/null and b/frontend/public/SportTeam.webp differ
diff --git a/frontend/public/Teacher.mp4 b/frontend/public/Teacher.mp4
new file mode 100755
index 0000000000..ba4f2a8655
Binary files /dev/null and b/frontend/public/Teacher.mp4 differ
diff --git a/frontend/public/TeacherTeam.jpeg b/frontend/public/TeacherTeam.jpeg
new file mode 100644
index 0000000000..6077d7fb95
Binary files /dev/null and b/frontend/public/TeacherTeam.jpeg differ
diff --git a/frontend/public/TeacherTeam.webp b/frontend/public/TeacherTeam.webp
new file mode 100644
index 0000000000..8b2c701f6f
Binary files /dev/null and b/frontend/public/TeacherTeam.webp differ
diff --git a/frontend/public/_redirects b/frontend/public/_redirects
new file mode 100644
index 0000000000..50a463356b
--- /dev/null
+++ b/frontend/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
\ No newline at end of file
diff --git a/frontend/public/class.jpg b/frontend/public/class.jpg
new file mode 100644
index 0000000000..676095084d
Binary files /dev/null and b/frontend/public/class.jpg differ
diff --git a/frontend/public/class.webp b/frontend/public/class.webp
new file mode 100644
index 0000000000..006726584b
Binary files /dev/null and b/frontend/public/class.webp differ
diff --git a/frontend/public/commentTag.png b/frontend/public/commentTag.png
new file mode 100644
index 0000000000..9c9aec019b
Binary files /dev/null and b/frontend/public/commentTag.png differ
diff --git a/frontend/public/commentTag.webp b/frontend/public/commentTag.webp
new file mode 100644
index 0000000000..0760b21214
Binary files /dev/null and b/frontend/public/commentTag.webp differ
diff --git a/frontend/public/icons/Btn-linkedin.svg b/frontend/public/icons/Btn-linkedin.svg
new file mode 100644
index 0000000000..7748cd689a
--- /dev/null
+++ b/frontend/public/icons/Btn-linkedin.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Btn - linkedin">
+<path id="&#239;&#131;&#161;" d="M10.1875 24.9902V10.9746H5.82812V24.9902H10.1875ZM7.98438 9.09961C9.39062 9.09961 10.5156 7.92773 10.5156 6.52148C10.5156 5.16211 9.39062 4.03711 7.98438 4.03711C6.625 4.03711 5.5 5.16211 5.5 6.52148C5.5 7.92773 6.625 9.09961 7.98438 9.09961ZM26.4531 24.9902H26.5V17.3027C26.5 13.5527 25.6562 10.6465 21.25 10.6465C19.1406 10.6465 17.7344 11.8184 17.125 12.8965H17.0781V10.9746H12.9062V24.9902H17.2656V18.0527C17.2656 16.2246 17.5938 14.4902 19.8438 14.4902C22.0938 14.4902 22.1406 16.5527 22.1406 18.1934V24.9902H26.4531Z" fill="black"/>
+</g>
+</svg>
diff --git a/frontend/public/icons/Ic-ArrowDown.svg b/frontend/public/icons/Ic-ArrowDown.svg
new file mode 100644
index 0000000000..32e3a21be9
--- /dev/null
+++ b/frontend/public/icons/Ic-ArrowDown.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 21.4077L21 15.4077L18.9 13.3077L16.5 15.7077V9.40771H13.5V15.7077L11.1 13.3077L9 15.4077L15 21.4077ZM15 30.4077C12.925 30.4077 10.975 30.014 9.15 29.2265C7.325 28.439 5.7375 27.3702 4.3875 26.0202C3.0375 24.6702 1.96875 23.0827 1.18125 21.2577C0.39375 19.4327 0 17.4827 0 15.4077C0 13.3327 0.39375 11.3827 1.18125 9.55771C1.96875 7.73271 3.0375 6.14522 4.3875 4.79521C5.7375 3.44521 7.325 2.37646 9.15 1.58896C10.975 0.801465 12.925 0.407715 15 0.407715C17.075 0.407715 19.025 0.801465 20.85 1.58896C22.675 2.37646 24.2625 3.44521 25.6125 4.79521C26.9625 6.14522 28.0312 7.73271 28.8187 9.55771C29.6062 11.3827 30 13.3327 30 15.4077C30 17.4827 29.6062 19.4327 28.8187 21.2577C28.0312 23.0827 26.9625 24.6702 25.6125 26.0202C24.2625 27.3702 22.675 28.439 20.85 29.2265C19.025 30.014 17.075 30.4077 15 30.4077ZM15 27.4077C18.35 27.4077 21.1875 26.2452 23.5125 23.9202C25.8375 21.5952 27 18.7577 27 15.4077C27 12.0577 25.8375 9.22022 23.5125 6.89522C21.1875 4.57022 18.35 3.40771 15 3.40771C11.65 3.40771 8.8125 4.57022 6.4875 6.89522C4.1625 9.22022 3 12.0577 3 15.4077C3 18.7577 4.1625 21.5952 6.4875 23.9202C8.8125 26.2452 11.65 27.4077 15 27.4077Z" fill="black"/>
+</svg>
diff --git a/frontend/public/icons/Ic-Github.svg b/frontend/public/icons/Ic-Github.svg
new file mode 100644
index 0000000000..b06700241e
--- /dev/null
+++ b/frontend/public/icons/Ic-Github.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6452 26.1762C10.6452 26.044 10.5161 25.9119 10.3226 25.9119C10.129 25.9119 10 26.044 10 26.1762C10 26.3083 10.129 26.4405 10.3226 26.3744C10.5161 26.3744 10.6452 26.3083 10.6452 26.1762ZM8.64516 25.8458C8.64516 25.9779 8.77419 26.1762 8.96774 26.1762C9.09677 26.2422 9.29032 26.1762 9.35484 26.044C9.35484 25.9119 9.29032 25.7797 9.09677 25.7137C8.90323 25.6476 8.70968 25.7137 8.64516 25.8458ZM11.5484 25.7797C11.3548 25.7797 11.2258 25.9119 11.2258 26.1101C11.2258 26.2422 11.4194 26.3083 11.6129 26.2422C11.8065 26.1762 11.9355 26.1101 11.871 25.9779C11.871 25.8458 11.6774 25.7137 11.5484 25.7797ZM15.7419 0.407715C6.83871 0.407715 0 7.41145 0 16.5295C0 23.8636 4.45161 30.1405 10.9032 32.387C11.7419 32.5192 12 31.9906 12 31.5941C12 31.1316 12 28.8852 12 27.4976C12 27.4976 7.48387 28.4887 6.51613 25.5154C6.51613 25.5154 5.80645 23.5993 4.77419 23.1368C4.77419 23.1368 3.29032 22.0796 4.83871 22.0796C4.83871 22.0796 6.45161 22.2118 7.35484 23.7975C8.77419 26.3744 11.0968 25.6476 12.0645 25.1851C12.1935 24.1279 12.5806 23.4011 13.0968 22.9386C9.48387 22.5422 5.80645 22.0136 5.80645 15.6706C5.80645 13.8205 6.32258 12.9616 7.35484 11.7723C7.16129 11.3098 6.64516 9.59185 7.54839 7.2793C8.83871 6.88286 12 9.06327 12 9.06327C13.2903 8.66683 14.6452 8.53469 16 8.53469C17.4194 8.53469 18.7742 8.66683 20.0645 9.06327C20.0645 9.06327 23.1613 6.81679 24.5161 7.2793C25.4194 9.59185 24.8387 11.3098 24.7097 11.7723C25.7419 12.9616 26.3871 13.8205 26.3871 15.6706C26.3871 22.0136 22.5806 22.5422 18.9677 22.9386C19.5484 23.4672 20.0645 24.4583 20.0645 26.044C20.0645 28.2244 20 30.9995 20 31.5281C20 31.9906 20.3226 32.5192 21.1613 32.3209C27.6129 30.1405 32 23.8636 32 16.5295C32 7.41145 24.7097 0.407715 15.7419 0.407715ZM6.25806 23.2029C6.12903 23.269 6.19355 23.4672 6.25806 23.5993C6.3871 23.6654 6.51613 23.7315 6.64516 23.6654C6.70968 23.5993 6.70968 23.4011 6.58065 23.269C6.45161 23.2029 6.32258 23.1368 6.25806 23.2029ZM5.54839 22.6743C5.48387 22.8064 5.54839 22.8725 5.67742 22.9386C5.80645 23.0047 5.93548 23.0047 6 22.8725C6 22.8064 5.93548 22.7404 5.80645 22.6743C5.67742 22.6082 5.6129 22.6082 5.54839 22.6743ZM7.6129 25.0529C7.54839 25.119 7.54839 25.3172 7.74194 25.4494C7.87097 25.5815 8.06452 25.6476 8.12903 25.5154C8.19355 25.4494 8.19355 25.2511 8.06452 25.119C7.93548 24.9869 7.74194 24.9208 7.6129 25.0529ZM6.90323 24.0618C6.77419 24.1279 6.77419 24.3261 6.90323 24.4583C7.03226 24.5904 7.16129 24.6565 7.29032 24.5904C7.35484 24.5243 7.35484 24.3261 7.29032 24.194C7.16129 24.0618 7.03226 23.9958 6.90323 24.0618Z" fill="white"/>
+</svg>
diff --git a/frontend/public/icons/Linked-In.svg b/frontend/public/icons/Linked-In.svg
new file mode 100644
index 0000000000..70db1452e9
--- /dev/null
+++ b/frontend/public/icons/Linked-In.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M17,20v19h-6V20H17z M11,14.47c0-1.4,1.2-2.47,3-2.47s2.93,1.07,3,2.47c0,1.4-1.12,2.53-3,2.53C12.2,17,11,15.87,11,14.47z M39,39h-6c0,0,0-9.26,0-10 c0-2-1-4-3.5-4.04h-0.08C27,24.96,26,27.02,26,29c0,0.91,0,10,0,10h-6V20h6v2.56c0,0,1.93-2.56,5.81-2.56 c3.97,0,7.19,2.73,7.19,8.26V39z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/back.svg b/frontend/public/icons/back.svg
new file mode 100644
index 0000000000..755b5022f3
--- /dev/null
+++ b/frontend/public/icons/back.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M640-80 240-480l400-400 71 71-329 329 329 329-71 71Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/delete.svg b/frontend/public/icons/delete.svg
new file mode 100644
index 0000000000..688a7be72b
--- /dev/null
+++ b/frontend/public/icons/delete.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/edit.svg b/frontend/public/icons/edit.svg
new file mode 100644
index 0000000000..b5a4dead0e
--- /dev/null
+++ b/frontend/public/icons/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M200-200h57l391-391-57-57-391 391v57Zm-80 80v-170l528-527q12-11 26.5-17t30.5-6q16 0 31 6t26 18l55 56q12 11 17.5 26t5.5 30q0 16-5.5 30.5T817-647L290-120H120Zm640-584-56-56 56 56Zm-141 85-28-29 57 57-29-28Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/like.svg b/frontend/public/icons/like.svg
new file mode 100644
index 0000000000..f7d5f9d91d
--- /dev/null
+++ b/frontend/public/icons/like.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/play_white.svg b/frontend/public/icons/play_white.svg
new file mode 100644
index 0000000000..d309a49b73
--- /dev/null
+++ b/frontend/public/icons/play_white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFFFF"><path d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/visibility_off.svg b/frontend/public/icons/visibility_off.svg
new file mode 100644
index 0000000000..2d81a74232
--- /dev/null
+++ b/frontend/public/icons/visibility_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/icons/visibility_on.svg b/frontend/public/icons/visibility_on.svg
new file mode 100644
index 0000000000..f510cf42ff
--- /dev/null
+++ b/frontend/public/icons/visibility_on.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/lib.mp4 b/frontend/public/lib.mp4
new file mode 100755
index 0000000000..183bae8db9
Binary files /dev/null and b/frontend/public/lib.mp4 differ
diff --git a/frontend/public/login-bg.png b/frontend/public/login-bg.png
new file mode 100644
index 0000000000..378b277db5
Binary files /dev/null and b/frontend/public/login-bg.png differ
diff --git a/frontend/public/login-bg.webp b/frontend/public/login-bg.webp
new file mode 100644
index 0000000000..272c366a8f
Binary files /dev/null and b/frontend/public/login-bg.webp differ
diff --git a/frontend/public/logo2.png b/frontend/public/logo2.png
new file mode 100644
index 0000000000..2bb0d85c88
Binary files /dev/null and b/frontend/public/logo2.png differ
diff --git a/frontend/public/logo2.webp b/frontend/public/logo2.webp
new file mode 100644
index 0000000000..dcfad0f2df
Binary files /dev/null and b/frontend/public/logo2.webp differ
diff --git a/frontend/public/personalCommentsTag.png b/frontend/public/personalCommentsTag.png
new file mode 100644
index 0000000000..48c93658e2
Binary files /dev/null and b/frontend/public/personalCommentsTag.png differ
diff --git a/frontend/public/personalCommentsTag.webp b/frontend/public/personalCommentsTag.webp
new file mode 100644
index 0000000000..ebc77bb086
Binary files /dev/null and b/frontend/public/personalCommentsTag.webp differ
diff --git a/frontend/public/sideImage2.png b/frontend/public/sideImage2.png
new file mode 100644
index 0000000000..fcb2b67a3d
Binary files /dev/null and b/frontend/public/sideImage2.png differ
diff --git a/frontend/public/sideImage2.webp b/frontend/public/sideImage2.webp
new file mode 100644
index 0000000000..624c2adb19
Binary files /dev/null and b/frontend/public/sideImage2.webp differ
diff --git a/frontend/public/sideImg.png b/frontend/public/sideImg.png
new file mode 100644
index 0000000000..b5d59af3f1
Binary files /dev/null and b/frontend/public/sideImg.png differ
diff --git a/frontend/public/sideImg.webp b/frontend/public/sideImg.webp
new file mode 100644
index 0000000000..992f8f03ea
Binary files /dev/null and b/frontend/public/sideImg.webp differ
diff --git a/frontend/public/teachersTag.png b/frontend/public/teachersTag.png
new file mode 100644
index 0000000000..c7e526c1d9
Binary files /dev/null and b/frontend/public/teachersTag.png differ
diff --git a/frontend/public/teachersTag.webp b/frontend/public/teachersTag.webp
new file mode 100644
index 0000000000..ff9ac0cbdc
Binary files /dev/null and b/frontend/public/teachersTag.webp differ
diff --git a/frontend/public/test-image.png b/frontend/public/test-image.png
new file mode 100644
index 0000000000..bb0620f503
Binary files /dev/null and b/frontend/public/test-image.png differ
diff --git a/frontend/public/thumbnail.png b/frontend/public/thumbnail.png
new file mode 100644
index 0000000000..289dd5ef00
Binary files /dev/null and b/frontend/public/thumbnail.png differ
diff --git a/frontend/public/thumbnail.webp b/frontend/public/thumbnail.webp
new file mode 100644
index 0000000000..9038f219ba
Binary files /dev/null and b/frontend/public/thumbnail.webp differ
diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg
deleted file mode 100644
index e7b8dfb1b2..0000000000
--- a/frontend/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
deleted file mode 100644
index 0a24275e6e..0000000000
--- a/frontend/src/App.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export const App = () => {
-
-  return (
-    <>
-      <h1>Welcome to Final Project!</h1>
-    </>
-  );
-};
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000000..55cdd9fd38
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,138 @@
+//#region ----- IMPORTS -----
+import { BrowserRouter, Routes, Route } from "react-router-dom"
+import { ThemeProvider } from "styled-components"
+import { useThemeStore } from "./store/themeStore"
+import { lightTheme, darkTheme } from "./themes/colorThemes"
+import { LogInPage } from "./sections/02-log-in-page/LogInPage"
+import { ReviewPage } from "./sections/05-review-page/01-main/ReviewPage"
+import styled from "styled-components"
+import { LandingPage } from "./sections/01-lading-page/01-main/LandingPage"
+import { SignUpPage } from "./sections/03-sign-up-page/SignUpPage"
+import { RequireAuthentication } from "./utils/RequireAuthentication"
+import { RequireRole } from "./utils/RequireRole"
+import { PageNotFound } from "./global-components/PageNotFound"
+import { TeachersPage } from "./sections/06-teachers-page/TeachersPage"
+import { VideoLibraryPage } from "./sections/04-video-library-page/VideoLibraryPage"
+import { ChooseClassMessage } from "./sections/04-video-library-page/components/ChooseClassMessage" // You'll create this
+import { ProjectsList } from "./sections/04-video-library-page/components/ProjectsList" // And this
+import "./utils/moment-config"
+import { UserPage } from "./sections/07-user-page/UserPage"
+import { CreateTeam } from "./sections/08-create-team-page/CreateTeam"
+import { CreateWorkspacePage } from "./sections/09-create-workspace/CreateWorkspacePage"
+import { TeamDetailPage } from "./sections/10-team-detail-page/TeamDetailPage"
+
+//#endregion ----- IMPORTS -----
+
+export const App = () => {
+  const themeMode = useThemeStore((state) => state.themeMode)
+
+  return (
+    <ThemeProvider theme={themeMode === "light" ? lightTheme : darkTheme}>
+      <AppContainer>
+        <BrowserRouter>
+          <main role="main">
+            <Routes>
+              {/* Public Routes */}
+              <Route
+                path="/"
+                element={<LandingPage />}
+              />
+              <Route
+                path="/login"
+                element={<LogInPage />}
+              />
+              <Route
+                path="/signUp"
+                element={<SignUpPage />}
+              />
+              <Route
+                path="/create-workspace"
+                element={<CreateWorkspacePage />}
+              />
+
+              {/* Protected Routes - All Authenticated Users */}
+              <Route
+                path="/library"
+                element={
+                  <RequireAuthentication>
+                    <VideoLibraryPage />
+                  </RequireAuthentication>
+                }
+              >
+                {/* If no class selected */}
+                <Route
+                  index
+                  element={<ChooseClassMessage />}
+                />
+                {/* When classId is selected */}
+                <Route
+                  path="classes/:classId/projects"
+                  element={<ProjectsList />}
+                />
+              </Route>
+
+              <Route
+                path="/review/:projectId"
+                element={
+                  <RequireAuthentication>
+                    <ReviewPage />
+                  </RequireAuthentication>
+                }
+              />
+
+              {/* Teacher-Only Routes */}
+              <Route
+                path="/teachers"
+                element={
+                  <RequireRole allowedRoles={["teacher"]}>
+                    <TeachersPage />
+                  </RequireRole>
+                }
+              />
+
+              {/* User Page - Accessible by Teachers and Students */}
+              <Route
+                path="/admin/users"
+                element={
+                  <RequireRole allowedRoles={["teacher", "student"]}>
+                    <UserPage />
+                  </RequireRole>
+                }
+              />
+
+              <Route
+                path="/admin/teams"
+                element={
+                  <RequireRole allowedRoles={["teacher"]}>
+                    <CreateTeam />
+                  </RequireRole>
+                }
+              />
+
+              <Route
+                path="/admin/teams/:teamId"
+                element={
+                  <RequireRole allowedRoles={["teacher", "student"]}>
+                    <TeamDetailPage />
+                  </RequireRole>
+                }
+              />
+
+              {/* Fallback 404 */}
+              <Route
+                path="*"
+                element={<PageNotFound />}
+              />
+            </Routes>
+          </main>
+        </BrowserRouter>
+      </AppContainer>
+    </ThemeProvider>
+  )
+}
+
+const AppContainer = styled.div`
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  min-height: 100vh;
+`
diff --git a/frontend/src/assets/boiler-plate.svg b/frontend/src/assets/boiler-plate.svg
deleted file mode 100644
index c9252833b4..0000000000
--- a/frontend/src/assets/boiler-plate.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<svg width="1940" height="343" viewBox="0 0 1940 343" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_442_862)">
-<rect width="1940" height="343" fill="white"/>
-<rect x="-3.8999" width="80.3148" height="20.5514" rx="3" fill="#E14646" fill-opacity="0.3"/>
-<path d="M3.75297 14V3.81818H7.19332C7.98877 3.81818 8.64171 3.95407 9.15212 4.22585C9.66254 4.49432 10.0404 4.86387 10.2856 5.33452C10.5309 5.80516 10.6535 6.34044 10.6535 6.94034C10.6535 7.54025 10.5309 8.07221 10.2856 8.53622C10.0404 9.00024 9.6642 9.36482 9.15709 9.62997C8.64999 9.89181 8.00203 10.0227 7.2132 10.0227H4.42911V8.90909H7.17343C7.71699 8.90909 8.15449 8.82955 8.48593 8.67045C8.82068 8.51136 9.06263 8.28598 9.21178 7.99432C9.36424 7.69934 9.44047 7.34801 9.44047 6.94034C9.44047 6.53267 9.36424 6.17637 9.21178 5.87145C9.05932 5.56652 8.81571 5.3312 8.48096 5.16548C8.1462 4.99645 7.70373 4.91193 7.15354 4.91193H4.98593V14H3.75297ZM8.54559 9.42614L11.0513 14H9.61945L7.15354 9.42614H8.54559ZM15.6686 14.1591C14.9328 14.1591 14.2981 13.9967 13.7645 13.6719C13.2342 13.3438 12.8249 12.8864 12.5365 12.2997C12.2515 11.7098 12.109 11.0237 12.109 10.2415C12.109 9.45928 12.2515 8.76989 12.5365 8.1733C12.8249 7.57339 13.2259 7.10606 13.7397 6.77131C14.2567 6.43324 14.8599 6.2642 15.5493 6.2642C15.947 6.2642 16.3398 6.33049 16.7276 6.46307C17.1154 6.59564 17.4684 6.81108 17.7865 7.10938C18.1047 7.40436 18.3583 7.79545 18.5472 8.28267C18.7361 8.76989 18.8306 9.36979 18.8306 10.0824V10.5795H12.9442V9.56534H17.6374C17.6374 9.13447 17.5512 8.75 17.3789 8.41193C17.2098 8.07386 16.9679 7.80705 16.653 7.61151C16.3415 7.41596 15.9736 7.31818 15.5493 7.31818C15.082 7.31818 14.6776 7.43419 14.3362 7.66619C13.9982 7.89489 13.738 8.19318 13.5557 8.56108C13.3734 8.92898 13.2823 9.32339 13.2823 9.74432V10.4205C13.2823 10.9972 13.3817 11.486 13.5806 11.8871C13.7827 12.2848 14.0628 12.5881 14.4208 12.7969C14.7787 13.0024 15.1947 13.1051 15.6686 13.1051C15.9769 13.1051 16.2553 13.062 16.5039 12.9759C16.7558 12.8864 16.9728 12.7538 17.1551 12.5781C17.3374 12.3991 17.4783 12.1771 17.5777 11.9119L18.7112 12.2301C18.5919 12.6146 18.3914 12.9527 18.1097 13.2443C17.828 13.5327 17.48 13.758 17.0657 13.9205C16.6514 14.0795 16.1857 14.1591 15.6686 14.1591ZM23.4989 14.1591C22.8625 14.1591 22.3007 13.9983 21.8135 13.6768C21.3263 13.352 20.9451 12.8946 20.6701 12.3047C20.395 11.7114 20.2574 11.0104 20.2574 10.2017C20.2574 9.39962 20.395 8.7036 20.6701 8.11364C20.9451 7.52367 21.328 7.06794 21.8185 6.74645C22.309 6.42495 22.8758 6.2642 23.5188 6.2642C24.0159 6.2642 24.4087 6.34706 24.697 6.51278C24.9887 6.67519 25.2108 6.8608 25.3632 7.0696C25.519 7.27509 25.64 7.44413 25.7262 7.5767H25.8256V3.81818H26.9989V14H25.8654V12.8267H25.7262C25.64 12.9659 25.5174 13.1416 25.3583 13.3537C25.1992 13.5625 24.9721 13.7498 24.6772 13.9155C24.3822 14.0779 23.9894 14.1591 23.4989 14.1591ZM23.658 13.1051C24.1286 13.1051 24.5264 12.9825 24.8512 12.7372C25.176 12.4886 25.4229 12.1456 25.5919 11.7081C25.761 11.2673 25.8455 10.7585 25.8455 10.1818C25.8455 9.61174 25.7626 9.11293 25.5969 8.68537C25.4312 8.2545 25.1859 7.91974 24.8611 7.68111C24.5363 7.43916 24.1353 7.31818 23.658 7.31818C23.1608 7.31818 22.7465 7.44579 22.4151 7.70099C22.087 7.95289 21.84 8.29593 21.6743 8.73011C21.5119 9.16098 21.4307 9.64489 21.4307 10.1818C21.4307 10.7254 21.5136 11.2192 21.6793 11.6634C21.8483 12.1042 22.0969 12.4555 22.425 12.7173C22.7565 12.9759 23.1675 13.1051 23.658 13.1051ZM36.5692 6.36364V7.35795H32.6118V6.36364H36.5692ZM33.7652 4.53409H34.9385V11.8125C34.9385 12.1439 34.9866 12.3925 35.0827 12.5582C35.1821 12.7206 35.3081 12.83 35.4605 12.8864C35.6163 12.9394 35.7804 12.9659 35.9527 12.9659C36.082 12.9659 36.188 12.9593 36.2709 12.946C36.3538 12.9295 36.4201 12.9162 36.4698 12.9062L36.7084 13.9602C36.6289 13.9901 36.5178 14.0199 36.3753 14.0497C36.2328 14.0829 36.0522 14.0994 35.8334 14.0994C35.502 14.0994 35.1772 14.0282 34.859 13.8857C34.5441 13.7431 34.2823 13.526 34.0735 13.2344C33.868 12.9427 33.7652 12.5748 33.7652 12.1307V4.53409ZM40.5813 14.179C40.0974 14.179 39.6582 14.0878 39.2638 13.9055C38.8694 13.7199 38.5562 13.4531 38.3242 13.1051C38.0922 12.7538 37.9762 12.3295 37.9762 11.8324C37.9762 11.3949 38.0623 11.0402 38.2347 10.7685C38.407 10.4934 38.6374 10.2779 38.9257 10.1222C39.2141 9.96638 39.5323 9.85038 39.8803 9.77415C40.2316 9.6946 40.5846 9.63163 40.9392 9.58523C41.4032 9.52557 41.7794 9.48082 42.0678 9.45099C42.3594 9.41785 42.5716 9.36316 42.7041 9.28693C42.84 9.2107 42.908 9.07812 42.908 8.8892V8.84943C42.908 8.3589 42.7737 7.97775 42.5053 7.70597C42.2401 7.43419 41.8374 7.2983 41.2972 7.2983C40.7371 7.2983 40.2979 7.42093 39.9797 7.66619C39.6615 7.91146 39.4378 8.1733 39.3085 8.4517L38.1949 8.05398C38.3938 7.58996 38.6589 7.22869 38.9904 6.97017C39.3251 6.70833 39.6897 6.52604 40.0841 6.4233C40.4818 6.31723 40.8729 6.2642 41.2574 6.2642C41.5027 6.2642 41.7844 6.29403 42.1026 6.35369C42.4241 6.41004 42.734 6.5277 43.0323 6.70668C43.3339 6.88565 43.5841 7.15578 43.783 7.51705C43.9818 7.87831 44.0813 8.36222 44.0813 8.96875V14H42.908V12.9659H42.8483C42.7688 13.1316 42.6362 13.3089 42.4506 13.4979C42.265 13.6868 42.0181 13.8475 41.7098 13.9801C41.4016 14.1127 41.0254 14.179 40.5813 14.179ZM40.7603 13.125C41.2243 13.125 41.6154 13.0339 41.9335 12.8516C42.255 12.6693 42.497 12.4339 42.6594 12.1456C42.8251 11.8572 42.908 11.554 42.908 11.2358V10.1619C42.8583 10.2216 42.7489 10.2763 42.5799 10.326C42.4141 10.3724 42.2219 10.4138 42.0032 10.4503C41.7877 10.4834 41.5773 10.5133 41.3718 10.5398C41.1696 10.563 41.0055 10.5829 40.8796 10.5994C40.5746 10.6392 40.2896 10.7038 40.0245 10.7933C39.7626 10.8795 39.5505 11.0104 39.3881 11.1861C39.229 11.3584 39.1495 11.5937 39.1495 11.892C39.1495 12.2997 39.3003 12.608 39.6019 12.8168C39.9068 13.0223 40.2929 13.125 40.7603 13.125ZM49.3052 17.0227C48.7384 17.0227 48.2512 16.9498 47.8435 16.804C47.4359 16.6615 47.0961 16.4725 46.8244 16.2372C46.5559 16.0052 46.3421 15.7566 46.183 15.4915L47.1177 14.8352C47.2237 14.9744 47.358 15.1335 47.5204 15.3125C47.6828 15.4948 47.9048 15.6522 48.1866 15.7848C48.4716 15.9207 48.8445 15.9886 49.3052 15.9886C49.9217 15.9886 50.4304 15.8395 50.8315 15.5412C51.2325 15.2429 51.433 14.7756 51.433 14.1392V12.5881H51.3336C51.2474 12.7273 51.1248 12.8996 50.9657 13.1051C50.8099 13.3073 50.5845 13.4879 50.2896 13.647C49.9979 13.8028 49.6035 13.8807 49.1063 13.8807C48.4898 13.8807 47.9363 13.7348 47.4458 13.4432C46.9586 13.1515 46.5725 12.7273 46.2874 12.1705C46.0057 11.6136 45.8648 10.9375 45.8648 10.142C45.8648 9.35985 46.0024 8.67874 46.2775 8.09872C46.5526 7.51539 46.9354 7.06463 47.4259 6.74645C47.9164 6.42495 48.4832 6.2642 49.1262 6.2642C49.6234 6.2642 50.0178 6.34706 50.3094 6.51278C50.6044 6.67519 50.8298 6.8608 50.9856 7.0696C51.1447 7.27509 51.2673 7.44413 51.3535 7.5767H51.4728V6.36364H52.6063V14.2188C52.6063 14.875 52.4572 15.4086 52.1589 15.8196C51.8639 16.2339 51.4662 16.5372 50.9657 16.7294C50.4685 16.925 49.915 17.0227 49.3052 17.0227ZM49.2654 12.8267C49.736 12.8267 50.1338 12.719 50.4586 12.5036C50.7834 12.2881 51.0303 11.9782 51.1994 11.5739C51.3684 11.1695 51.4529 10.6856 51.4529 10.1222C51.4529 9.57197 51.37 9.08641 51.2043 8.66548C51.0386 8.24455 50.7933 7.91477 50.4685 7.67614C50.1437 7.4375 49.7427 7.31818 49.2654 7.31818C48.7682 7.31818 48.3539 7.44413 48.0225 7.69602C47.6944 7.94792 47.4475 8.28598 47.2817 8.71023C47.1193 9.13447 47.0381 9.60511 47.0381 10.1222C47.0381 10.6525 47.121 11.1214 47.2867 11.5291C47.4557 11.9335 47.7043 12.2517 48.0324 12.4837C48.3639 12.7124 48.7749 12.8267 49.2654 12.8267Z" fill="#37352F"/>
-<path d="M-4 0H1944V343H-4V0Z" fill="#CCFFE2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1943.55 237.166V343H475.379C535.532 293.689 599.915 248.214 668.419 207.174C1082.63 -40.9782 1540.57 29.3675 1943.55 237.166Z" fill="#FFECEA"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1373.87 169.08C1373.93 113.585 1408.92 58.5252 1467.21 46.2886C1518.96 35.4249 1554.8 83.747 1584.16 124.933C1611.76 163.654 1640.07 210.579 1611.16 248.223C1579.64 289.281 1518.29 294.69 1466.96 277.572C1415.17 260.296 1373.82 220.063 1373.87 169.08Z" fill="#0018A4"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M135.668 64.0355C166.613 63.0843 197.932 81.711 205.784 114.146C212.755 142.942 186.443 163.876 163.996 181.054C142.892 197.204 117.226 213.893 95.7253 198.369C72.2753 181.438 68.1762 147.165 76.8156 118.11C85.5343 88.7876 107.239 64.9093 135.668 64.0355Z" fill="white"/>
-<rect x="-4" width="1944" height="100" fill="#0018A4"/>
-<path d="M103.722 33.956H97.8586V33.3H115.817V33.956H109.954V38.876H115.817V39.532H109.954V62H109.298V39.532H104.378V62H103.722V39.532H97.8586V38.876H103.722V33.956ZM109.298 33.956H104.378V38.876H109.298V33.956ZM114.398 51.135C114.398 44.862 119.482 39.778 125.755 39.778C130.757 39.778 134.98 42.976 136.497 47.486L123.172 55.563C123.951 56.014 124.812 56.26 125.755 56.26C127.805 56.26 129.568 55.03 130.388 53.308L131.003 53.595C130.101 55.563 128.092 56.916 125.755 56.916C124.566 56.916 123.459 56.547 122.557 55.932L118.129 58.638C120.056 60.606 122.762 61.836 125.755 61.836C130.019 61.836 133.75 59.294 135.472 55.645L136.046 55.932C134.242 59.827 130.306 62.492 125.755 62.492C119.482 62.492 114.398 57.408 114.398 51.135ZM115.054 51.135C115.054 52.324 115.259 53.431 115.587 54.497L120.015 51.791C119.974 51.586 119.974 51.34 119.974 51.135C119.974 47.937 122.557 45.354 125.755 45.354C126.944 45.354 128.092 45.723 128.994 46.338L133.381 43.673C131.454 41.664 128.748 40.434 125.755 40.434C119.851 40.434 115.054 45.231 115.054 51.135ZM115.833 55.112C116.284 56.219 116.899 57.244 117.678 58.146L121.983 55.522C121.081 54.743 120.425 53.677 120.138 52.488L115.833 55.112ZM120.63 51.135V51.422L128.379 46.707C127.6 46.256 126.698 46.01 125.755 46.01C122.926 46.01 120.63 48.306 120.63 51.135ZM120.712 52.16C120.958 53.349 121.655 54.415 122.598 55.153L130.798 50.151C130.552 48.962 129.896 47.896 128.953 47.117L120.712 52.16ZM129.568 46.789C130.47 47.568 131.126 48.593 131.372 49.823L135.718 47.158C135.267 46.051 134.611 45.067 133.873 44.165L129.568 46.789ZM149.355 45.846V46.502H148.166C145.665 46.502 143.533 48.634 143.533 51.135C143.533 53.636 145.665 55.768 148.166 55.768H149.355V56.424H148.166C145.296 56.424 142.877 54.005 142.877 51.135C142.877 48.265 145.296 45.846 148.166 45.846H149.355ZM149.355 40.926H148.166C142.549 40.926 137.957 45.518 137.957 51.135C137.957 56.752 142.549 61.344 148.166 61.344H149.355V62H148.166C142.18 62 137.301 57.121 137.301 51.135C137.301 45.149 142.18 40.27 148.166 40.27H149.355V40.926ZM152.824 62V31.25H153.48V46.461C154.382 44.124 156.145 42.197 158.4 41.09V31.25H159.056V40.762C160.204 40.311 161.434 40.065 162.746 40.065C168.199 40.065 172.668 44.534 172.668 49.987V62H172.012V49.987C172.012 44.903 167.83 40.721 162.746 40.721C161.434 40.721 160.204 41.008 159.056 41.5V47.691C159.835 46.461 161.188 45.641 162.746 45.641C165.124 45.641 167.092 47.609 167.092 49.987V62H166.436V49.987C166.436 47.978 164.755 46.297 162.746 46.297C160.737 46.297 159.056 47.978 159.056 49.987V62H158.4V41.828C155.489 43.386 153.48 46.461 153.48 49.987V62H152.824ZM176.527 62V40.27H177.183V46.461C178.085 44.124 179.848 42.197 182.103 41.09V40.27H182.759V40.762C183.907 40.311 185.137 40.065 186.449 40.065C191.902 40.065 196.371 44.534 196.371 49.987V62H195.715V49.987C195.715 44.903 191.533 40.721 186.449 40.721C185.137 40.721 183.907 41.008 182.759 41.5V47.691C183.538 46.461 184.891 45.641 186.449 45.641C188.827 45.641 190.795 47.609 190.795 49.987V62H190.139V49.987C190.139 47.978 188.458 46.297 186.449 46.297C184.44 46.297 182.759 47.978 182.759 49.987V62H182.103V41.828C179.192 43.386 177.183 46.461 177.183 49.987V62H176.527ZM200.23 62V40.27H200.886V62H200.23ZM206.462 40.27V62H205.806V40.27H206.462ZM205.806 38.138V31.25H206.462V38.138H205.806ZM200.886 31.25V38.138H200.23V31.25H200.886ZM209.451 51.135C209.451 44.862 214.535 39.778 220.808 39.778C222.653 39.778 224.375 40.229 225.933 41.008V40.27H226.589V41.377C228.885 42.648 230.648 44.944 231.509 47.322V40.27H232.165V60.155C232.165 66.428 227.122 71.512 220.808 71.512C216.913 71.512 213.469 69.503 211.378 66.51L211.952 66.182C213.92 69.011 217.159 70.856 220.808 70.856C226.794 70.856 231.509 66.1 231.509 60.155V54.907C230.689 57.285 228.844 59.663 226.507 60.934C226.097 63.722 223.76 65.936 220.808 65.936C218.963 65.936 217.282 65.034 216.216 63.722L216.79 63.394C217.692 64.501 219.209 65.28 220.808 65.28C223.268 65.28 225.277 63.599 225.81 61.344C224.293 62.041 222.571 62.492 220.808 62.492C214.535 62.492 209.451 57.408 209.451 51.135ZM210.107 51.135C210.107 57.039 214.904 61.836 220.808 61.836C222.653 61.836 224.375 61.385 225.892 60.565C225.933 60.278 225.933 59.745 225.933 59.212V53.841C224.949 55.645 223.022 56.916 220.808 56.916C217.61 56.916 215.027 54.333 215.027 51.135C215.027 47.937 217.61 45.354 220.808 45.354C223.022 45.354 224.949 46.625 225.933 48.47V41.746C224.416 40.926 222.653 40.434 220.808 40.434C214.904 40.434 210.107 45.231 210.107 51.135ZM215.683 51.135C215.683 53.964 217.979 56.26 220.808 56.26C223.678 56.26 225.933 53.964 225.933 51.135C225.933 48.306 223.678 46.01 220.808 46.01C217.979 46.01 215.683 48.306 215.683 51.135ZM226.589 42.115V60.155C229.336 58.474 231.509 55.071 231.509 51.135C231.509 47.199 229.336 43.796 226.589 42.115ZM246.432 62.492C240.159 62.492 235.075 57.408 235.075 51.135C235.075 44.862 240.159 39.778 246.432 39.778C252.705 39.778 257.789 44.862 257.789 51.135C257.789 57.408 252.705 62.492 246.432 62.492ZM246.432 61.836C252.336 61.836 257.133 57.039 257.133 51.135C257.133 45.231 252.336 40.434 246.432 40.434C240.528 40.434 235.731 45.231 235.731 51.135C235.731 57.039 240.528 61.836 246.432 61.836ZM246.432 56.916C243.234 56.916 240.651 54.333 240.651 51.135C240.651 47.937 243.234 45.354 246.432 45.354C249.63 45.354 252.213 47.937 252.213 51.135C252.213 54.333 249.63 56.916 246.432 56.916ZM246.432 56.26C249.261 56.26 251.557 53.964 251.557 51.135C251.557 48.306 249.261 46.01 246.432 46.01C243.603 46.01 241.307 48.306 241.307 51.135C241.307 53.964 243.603 56.26 246.432 56.26ZM282.663 62H282.007L276.103 46.871V62H275.447V39.532H270.527V62H269.871V33.3H279.014C284.262 33.3 288.444 37.482 288.444 42.73C288.444 46.912 286.353 49.372 283.934 50.889L288.239 62H287.583L283.401 51.217C282.212 51.914 280.531 52.529 279.137 52.939L282.663 62ZM281.761 45.313L283.688 50.274C285.902 48.88 287.788 46.584 287.788 42.73C287.788 37.81 283.934 33.956 279.014 33.956H276.103V38.876H279.014C281.146 38.876 282.868 40.598 282.868 42.73C282.868 43.714 282.499 44.575 281.761 45.313ZM276.103 39.532V46.871L277.661 46.543C280.859 45.846 282.212 44.493 282.212 42.73C282.212 40.926 280.818 39.532 279.014 39.532H276.103ZM270.527 33.956V38.876H275.447V33.956H270.527ZM283.155 50.602L281.269 45.764C280.039 46.707 278.604 47.035 277.005 47.363L278.891 52.283C280.121 51.955 282.13 51.217 283.155 50.602ZM289.929 51.135C289.929 44.862 295.013 39.778 301.286 39.778C306.288 39.778 310.511 42.976 312.028 47.486L298.703 55.563C299.482 56.014 300.343 56.26 301.286 56.26C303.336 56.26 305.099 55.03 305.919 53.308L306.534 53.595C305.632 55.563 303.623 56.916 301.286 56.916C300.097 56.916 298.99 56.547 298.088 55.932L293.66 58.638C295.587 60.606 298.293 61.836 301.286 61.836C305.55 61.836 309.281 59.294 311.003 55.645L311.577 55.932C309.773 59.827 305.837 62.492 301.286 62.492C295.013 62.492 289.929 57.408 289.929 51.135ZM290.585 51.135C290.585 52.324 290.79 53.431 291.118 54.497L295.546 51.791C295.505 51.586 295.505 51.34 295.505 51.135C295.505 47.937 298.088 45.354 301.286 45.354C302.475 45.354 303.623 45.723 304.525 46.338L308.912 43.673C306.985 41.664 304.279 40.434 301.286 40.434C295.382 40.434 290.585 45.231 290.585 51.135ZM291.364 55.112C291.815 56.219 292.43 57.244 293.209 58.146L297.514 55.522C296.612 54.743 295.956 53.677 295.669 52.488L291.364 55.112ZM296.161 51.135V51.422L303.91 46.707C303.131 46.256 302.229 46.01 301.286 46.01C298.457 46.01 296.161 48.306 296.161 51.135ZM296.243 52.16C296.489 53.349 297.186 54.415 298.129 55.153L306.329 50.151C306.083 48.962 305.427 47.896 304.484 47.117L296.243 52.16ZM305.099 46.789C306.001 47.568 306.657 48.593 306.903 49.823L311.249 47.158C310.798 46.051 310.142 45.067 309.404 44.165L305.099 46.789ZM329.929 42.115V60.155C332.676 58.474 334.849 55.071 334.849 51.135C334.849 47.199 332.676 43.796 329.929 42.115ZM324.148 39.778C325.993 39.778 327.715 40.229 329.273 41.008V40.27H329.929V41.377C332.225 42.648 333.988 44.944 334.849 47.322V40.27H335.505V62H334.849V54.907C334.029 57.244 332.225 59.663 329.929 60.934V62H329.273V61.262C327.715 62.041 325.993 62.492 324.148 62.492C317.875 62.492 312.791 57.408 312.791 51.135C312.791 44.862 317.875 39.778 324.148 39.778ZM324.148 61.836C325.993 61.836 327.756 61.385 329.273 60.565V53.841C328.289 55.645 326.362 56.916 324.148 56.916C320.95 56.916 318.367 54.333 318.367 51.135C318.367 47.937 320.95 45.354 324.148 45.354C326.362 45.354 328.289 46.625 329.273 48.47V41.746C327.756 40.926 325.993 40.434 324.148 40.434C318.244 40.434 313.447 45.231 313.447 51.135C313.447 57.039 318.244 61.836 324.148 61.836ZM324.148 56.26C327.018 56.26 329.273 53.964 329.273 51.135C329.273 48.306 327.018 46.01 324.148 46.01C321.319 46.01 319.023 48.306 319.023 51.135C319.023 53.964 321.319 56.26 324.148 56.26ZM350.551 45.846V46.502H349.362C346.861 46.502 344.729 48.634 344.729 51.135C344.729 53.636 346.861 55.768 349.362 55.768H350.551V56.424H349.362C346.492 56.424 344.073 54.005 344.073 51.135C344.073 48.265 346.492 45.846 349.362 45.846H350.551ZM350.551 40.926H349.362C343.745 40.926 339.153 45.518 339.153 51.135C339.153 56.752 343.745 61.344 349.362 61.344H350.551V62H349.362C343.376 62 338.497 57.121 338.497 51.135C338.497 45.149 343.376 40.27 349.362 40.27H350.551V40.926ZM356.07 40.926H352.831V40.27H356.07V33.3H356.726V40.27H361.646V33.3H362.302V40.27H365.541V40.926H362.302V45.846H365.541V46.502H362.302V62H361.646V46.502H356.726V62H356.07V46.502H352.831V45.846H356.07V40.926ZM361.646 40.926H356.726V45.846H361.646V40.926ZM390.873 61.016L400.959 33.3H401.697L391.242 62H390.504L387.921 54.907L385.338 62H384.6L374.145 33.3H374.883L384.969 61.016L387.552 53.923L380.049 33.3H380.787L387.921 52.898L395.055 33.3H395.793L388.29 53.882L390.873 61.016ZM403.549 62V40.27H404.205V62H403.549ZM409.781 40.27V62H409.125V40.27H409.781ZM409.125 38.138V31.25H409.781V38.138H409.125ZM404.205 31.25V38.138H403.549V31.25H404.205ZM416.009 40.926H412.77V40.27H416.009V33.3H416.665V40.27H421.585V33.3H422.241V40.27H425.48V40.926H422.241V45.846H425.48V46.502H422.241V62H421.585V46.502H416.665V62H416.009V46.502H412.77V45.846H416.009V40.926ZM421.585 40.926H416.665V45.846H421.585V40.926ZM426.822 51.135C426.822 44.862 431.906 39.778 438.179 39.778C443.181 39.778 447.404 42.976 448.921 47.486L435.596 55.563C436.375 56.014 437.236 56.26 438.179 56.26C440.229 56.26 441.992 55.03 442.812 53.308L443.427 53.595C442.525 55.563 440.516 56.916 438.179 56.916C436.99 56.916 435.883 56.547 434.981 55.932L430.553 58.638C432.48 60.606 435.186 61.836 438.179 61.836C442.443 61.836 446.174 59.294 447.896 55.645L448.47 55.932C446.666 59.827 442.73 62.492 438.179 62.492C431.906 62.492 426.822 57.408 426.822 51.135ZM427.478 51.135C427.478 52.324 427.683 53.431 428.011 54.497L432.439 51.791C432.398 51.586 432.398 51.34 432.398 51.135C432.398 47.937 434.981 45.354 438.179 45.354C439.368 45.354 440.516 45.723 441.418 46.338L445.805 43.673C443.878 41.664 441.172 40.434 438.179 40.434C432.275 40.434 427.478 45.231 427.478 51.135ZM428.257 55.112C428.708 56.219 429.323 57.244 430.102 58.146L434.407 55.522C433.505 54.743 432.849 53.677 432.562 52.488L428.257 55.112ZM433.054 51.135V51.422L440.803 46.707C440.024 46.256 439.122 46.01 438.179 46.01C435.35 46.01 433.054 48.306 433.054 51.135ZM433.136 52.16C433.382 53.349 434.079 54.415 435.022 55.153L443.222 50.151C442.976 48.962 442.32 47.896 441.377 47.117L433.136 52.16ZM441.992 46.789C442.894 47.568 443.55 48.593 443.796 49.823L448.142 47.158C447.691 46.051 447.035 45.067 446.297 44.165L441.992 46.789ZM460.056 62V33.3H468.092C473.299 33.3 477.522 37.523 477.522 42.73C477.522 44.534 477.03 46.215 476.128 47.65C477.03 49.044 477.522 50.766 477.522 52.57C477.522 57.777 473.299 62 468.092 62H460.056ZM460.712 61.344H465.632V56.424H460.712V61.344ZM460.712 55.768H465.632V49.372H460.712V55.768ZM460.712 48.716H465.632V46.584H460.712V48.716ZM460.712 45.928H465.632V39.532H460.712V45.928ZM460.712 38.876H465.632V33.956H460.712V38.876ZM466.288 61.344H468.092C472.93 61.344 476.866 57.408 476.866 52.57C476.866 50.725 476.292 49.044 475.349 47.65C476.292 46.256 476.866 44.575 476.866 42.73C476.866 37.892 472.93 33.956 468.092 33.956H466.288V38.876H468.092C470.224 38.876 471.946 40.598 471.946 42.73C471.946 44.862 470.224 46.584 468.092 46.584H466.288V48.716H468.092C470.224 48.716 471.946 50.438 471.946 52.57C471.946 54.702 470.224 56.424 468.092 56.424H466.288V61.344ZM466.288 55.768H468.092C469.855 55.768 471.29 54.333 471.29 52.57C471.29 50.807 469.855 49.372 468.092 49.372H466.288V55.768ZM466.288 45.928H468.092C469.855 45.928 471.29 44.493 471.29 42.73C471.29 40.967 469.855 39.532 468.092 39.532H466.288V45.928ZM491.191 62.492C484.918 62.492 479.834 57.408 479.834 51.135C479.834 44.862 484.918 39.778 491.191 39.778C497.464 39.778 502.548 44.862 502.548 51.135C502.548 57.408 497.464 62.492 491.191 62.492ZM491.191 61.836C497.095 61.836 501.892 57.039 501.892 51.135C501.892 45.231 497.095 40.434 491.191 40.434C485.287 40.434 480.49 45.231 480.49 51.135C480.49 57.039 485.287 61.836 491.191 61.836ZM491.191 56.916C487.993 56.916 485.41 54.333 485.41 51.135C485.41 47.937 487.993 45.354 491.191 45.354C494.389 45.354 496.972 47.937 496.972 51.135C496.972 54.333 494.389 56.916 491.191 56.916ZM491.191 56.26C494.02 56.26 496.316 53.964 496.316 51.135C496.316 48.306 494.02 46.01 491.191 46.01C488.362 46.01 486.066 48.306 486.066 51.135C486.066 53.964 488.362 56.26 491.191 56.26ZM505.488 62V40.27H506.144V62H505.488ZM511.72 40.27V62H511.064V40.27H511.72ZM511.064 38.138V31.25H511.72V38.138H511.064ZM506.144 31.25V38.138H505.488V31.25H506.144ZM516.554 31.25V62H515.898V31.25H516.554ZM522.13 31.25V62H521.474V31.25H522.13ZM525.078 51.135C525.078 44.862 530.162 39.778 536.435 39.778C541.437 39.778 545.66 42.976 547.177 47.486L533.852 55.563C534.631 56.014 535.492 56.26 536.435 56.26C538.485 56.26 540.248 55.03 541.068 53.308L541.683 53.595C540.781 55.563 538.772 56.916 536.435 56.916C535.246 56.916 534.139 56.547 533.237 55.932L528.809 58.638C530.736 60.606 533.442 61.836 536.435 61.836C540.699 61.836 544.43 59.294 546.152 55.645L546.726 55.932C544.922 59.827 540.986 62.492 536.435 62.492C530.162 62.492 525.078 57.408 525.078 51.135ZM525.734 51.135C525.734 52.324 525.939 53.431 526.267 54.497L530.695 51.791C530.654 51.586 530.654 51.34 530.654 51.135C530.654 47.937 533.237 45.354 536.435 45.354C537.624 45.354 538.772 45.723 539.674 46.338L544.061 43.673C542.134 41.664 539.428 40.434 536.435 40.434C530.531 40.434 525.734 45.231 525.734 51.135ZM526.513 55.112C526.964 56.219 527.579 57.244 528.358 58.146L532.663 55.522C531.761 54.743 531.105 53.677 530.818 52.488L526.513 55.112ZM531.31 51.135V51.422L539.059 46.707C538.28 46.256 537.378 46.01 536.435 46.01C533.606 46.01 531.31 48.306 531.31 51.135ZM531.392 52.16C531.638 53.349 532.335 54.415 533.278 55.153L541.478 50.151C541.232 48.962 540.576 47.896 539.633 47.117L531.392 52.16ZM540.248 46.789C541.15 47.568 541.806 48.593 542.052 49.823L546.398 47.158C545.947 46.051 545.291 45.067 544.553 44.165L540.248 46.789ZM554.747 62V42.689C552.533 44.042 549.827 46.83 549.827 51.709V62H549.171V40.27H549.827V47.732C550.852 44.903 552.451 43.304 554.747 41.951V40.27H555.403V41.582C557.043 40.762 558.806 40.352 560.528 40.352V41.008C558.806 41.008 557.002 41.459 555.403 42.32V49.044C556.346 47.199 558.314 45.928 560.528 45.928V46.584C557.658 46.584 555.403 48.88 555.403 51.709V62H554.747ZM578.357 39.532V45.928H581.268C583.072 45.928 584.466 44.534 584.466 42.73C584.466 40.926 583.072 39.532 581.268 39.532H578.357ZM578.357 38.876H581.268C583.4 38.876 585.122 40.598 585.122 42.73C585.122 44.862 583.4 46.584 581.268 46.584H578.357V51.504H581.268C586.188 51.504 590.042 47.65 590.042 42.73C590.042 37.81 586.188 33.956 581.268 33.956H578.357V38.876ZM572.781 52.16V62H572.125V33.3H581.268C586.516 33.3 590.698 37.482 590.698 42.73C590.698 47.978 586.516 52.16 581.268 52.16H578.357V62H577.701V52.16H572.781ZM572.781 39.532V45.928H577.701V39.532H572.781ZM577.701 33.956H572.781V38.876H577.701V33.956ZM577.701 46.584H572.781V51.504H577.701V46.584ZM594.15 31.25V62H593.494V31.25H594.15ZM599.726 31.25V62H599.07V31.25H599.726ZM619.812 42.115V60.155C622.559 58.474 624.732 55.071 624.732 51.135C624.732 47.199 622.559 43.796 619.812 42.115ZM614.031 39.778C615.876 39.778 617.598 40.229 619.156 41.008V40.27H619.812V41.377C622.108 42.648 623.871 44.944 624.732 47.322V40.27H625.388V62H624.732V54.907C623.912 57.244 622.108 59.663 619.812 60.934V62H619.156V61.262C617.598 62.041 615.876 62.492 614.031 62.492C607.758 62.492 602.674 57.408 602.674 51.135C602.674 44.862 607.758 39.778 614.031 39.778ZM614.031 61.836C615.876 61.836 617.639 61.385 619.156 60.565V53.841C618.172 55.645 616.245 56.916 614.031 56.916C610.833 56.916 608.25 54.333 608.25 51.135C608.25 47.937 610.833 45.354 614.031 45.354C616.245 45.354 618.172 46.625 619.156 48.47V41.746C617.639 40.926 615.876 40.434 614.031 40.434C608.127 40.434 603.33 45.231 603.33 51.135C603.33 57.039 608.127 61.836 614.031 61.836ZM614.031 56.26C616.901 56.26 619.156 53.964 619.156 51.135C619.156 48.306 616.901 46.01 614.031 46.01C611.202 46.01 608.906 48.306 608.906 51.135C608.906 53.964 611.202 56.26 614.031 56.26ZM631.619 40.926H628.38V40.27H631.619V33.3H632.275V40.27H637.195V33.3H637.851V40.27H641.09V40.926H637.851V45.846H641.09V46.502H637.851V62H637.195V46.502H632.275V62H631.619V46.502H628.38V45.846H631.619V40.926ZM637.195 40.926H632.275V45.846H637.195V40.926ZM642.433 51.135C642.433 44.862 647.517 39.778 653.79 39.778C658.792 39.778 663.015 42.976 664.532 47.486L651.207 55.563C651.986 56.014 652.847 56.26 653.79 56.26C655.84 56.26 657.603 55.03 658.423 53.308L659.038 53.595C658.136 55.563 656.127 56.916 653.79 56.916C652.601 56.916 651.494 56.547 650.592 55.932L646.164 58.638C648.091 60.606 650.797 61.836 653.79 61.836C658.054 61.836 661.785 59.294 663.507 55.645L664.081 55.932C662.277 59.827 658.341 62.492 653.79 62.492C647.517 62.492 642.433 57.408 642.433 51.135ZM643.089 51.135C643.089 52.324 643.294 53.431 643.622 54.497L648.05 51.791C648.009 51.586 648.009 51.34 648.009 51.135C648.009 47.937 650.592 45.354 653.79 45.354C654.979 45.354 656.127 45.723 657.029 46.338L661.416 43.673C659.489 41.664 656.783 40.434 653.79 40.434C647.886 40.434 643.089 45.231 643.089 51.135ZM643.868 55.112C644.319 56.219 644.934 57.244 645.713 58.146L650.018 55.522C649.116 54.743 648.46 53.677 648.173 52.488L643.868 55.112ZM648.665 51.135V51.422L656.414 46.707C655.635 46.256 654.733 46.01 653.79 46.01C650.961 46.01 648.665 48.306 648.665 51.135ZM648.747 52.16C648.993 53.349 649.69 54.415 650.633 55.153L658.833 50.151C658.587 48.962 657.931 47.896 656.988 47.117L648.747 52.16ZM657.603 46.789C658.505 47.568 659.161 48.593 659.407 49.823L663.753 47.158C663.302 46.051 662.646 45.067 661.908 44.165L657.603 46.789ZM678.723 33.956H672.86V33.3H690.818V33.956H684.955V38.876H690.818V39.532H684.955V62H684.299V39.532H679.379V62H678.723V39.532H672.86V38.876H678.723V33.956ZM684.299 33.956H679.379V38.876H684.299V33.956ZM689.399 51.135C689.399 44.862 694.483 39.778 700.756 39.778C705.758 39.778 709.981 42.976 711.498 47.486L698.173 55.563C698.952 56.014 699.813 56.26 700.756 56.26C702.806 56.26 704.569 55.03 705.389 53.308L706.004 53.595C705.102 55.563 703.093 56.916 700.756 56.916C699.567 56.916 698.46 56.547 697.558 55.932L693.13 58.638C695.057 60.606 697.763 61.836 700.756 61.836C705.02 61.836 708.751 59.294 710.473 55.645L711.047 55.932C709.243 59.827 705.307 62.492 700.756 62.492C694.483 62.492 689.399 57.408 689.399 51.135ZM690.055 51.135C690.055 52.324 690.26 53.431 690.588 54.497L695.016 51.791C694.975 51.586 694.975 51.34 694.975 51.135C694.975 47.937 697.558 45.354 700.756 45.354C701.945 45.354 703.093 45.723 703.995 46.338L708.382 43.673C706.455 41.664 703.749 40.434 700.756 40.434C694.852 40.434 690.055 45.231 690.055 51.135ZM690.834 55.112C691.285 56.219 691.9 57.244 692.679 58.146L696.984 55.522C696.082 54.743 695.426 53.677 695.139 52.488L690.834 55.112ZM695.631 51.135V51.422L703.38 46.707C702.601 46.256 701.699 46.01 700.756 46.01C697.927 46.01 695.631 48.306 695.631 51.135ZM695.713 52.16C695.959 53.349 696.656 54.415 697.599 55.153L705.799 50.151C705.553 48.962 704.897 47.896 703.954 47.117L695.713 52.16ZM704.569 46.789C705.471 47.568 706.127 48.593 706.373 49.823L710.719 47.158C710.268 46.051 709.612 45.067 708.874 44.165L704.569 46.789ZM724.356 45.846V46.502H723.167C720.666 46.502 718.534 48.634 718.534 51.135C718.534 53.636 720.666 55.768 723.167 55.768H724.356V56.424H723.167C720.297 56.424 717.878 54.005 717.878 51.135C717.878 48.265 720.297 45.846 723.167 45.846H724.356ZM724.356 40.926H723.167C717.55 40.926 712.958 45.518 712.958 51.135C712.958 56.752 717.55 61.344 723.167 61.344H724.356V62H723.167C717.181 62 712.302 57.121 712.302 51.135C712.302 45.149 717.181 40.27 723.167 40.27H724.356V40.926ZM727.825 62V31.25H728.481V46.461C729.383 44.124 731.146 42.197 733.401 41.09V31.25H734.057V40.762C735.205 40.311 736.435 40.065 737.747 40.065C743.2 40.065 747.669 44.534 747.669 49.987V62H747.013V49.987C747.013 44.903 742.831 40.721 737.747 40.721C736.435 40.721 735.205 41.008 734.057 41.5V47.691C734.836 46.461 736.189 45.641 737.747 45.641C740.125 45.641 742.093 47.609 742.093 49.987V62H741.437V49.987C741.437 47.978 739.756 46.297 737.747 46.297C735.738 46.297 734.057 47.978 734.057 49.987V62H733.401V41.828C730.49 43.386 728.481 46.461 728.481 49.987V62H727.825ZM751.528 62V40.27H752.184V46.461C753.086 44.124 754.849 42.197 757.104 41.09V40.27H757.76V40.762C758.908 40.311 760.138 40.065 761.45 40.065C766.903 40.065 771.372 44.534 771.372 49.987V62H770.716V49.987C770.716 44.903 766.534 40.721 761.45 40.721C760.138 40.721 758.908 41.008 757.76 41.5V47.691C758.539 46.461 759.892 45.641 761.45 45.641C763.828 45.641 765.796 47.609 765.796 49.987V62H765.14V49.987C765.14 47.978 763.459 46.297 761.45 46.297C759.441 46.297 757.76 47.978 757.76 49.987V62H757.104V41.828C754.193 43.386 752.184 46.461 752.184 49.987V62H751.528ZM775.231 62V40.27H775.887V62H775.231ZM781.463 40.27V62H780.807V40.27H781.463ZM780.807 38.138V31.25H781.463V38.138H780.807ZM775.887 31.25V38.138H775.231V31.25H775.887ZM784.452 51.135C784.452 44.862 789.536 39.778 795.809 39.778C797.654 39.778 799.376 40.229 800.934 41.008V40.27H801.59V41.377C803.886 42.648 805.649 44.944 806.51 47.322V40.27H807.166V60.155C807.166 66.428 802.123 71.512 795.809 71.512C791.914 71.512 788.47 69.503 786.379 66.51L786.953 66.182C788.921 69.011 792.16 70.856 795.809 70.856C801.795 70.856 806.51 66.1 806.51 60.155V54.907C805.69 57.285 803.845 59.663 801.508 60.934C801.098 63.722 798.761 65.936 795.809 65.936C793.964 65.936 792.283 65.034 791.217 63.722L791.791 63.394C792.693 64.501 794.21 65.28 795.809 65.28C798.269 65.28 800.278 63.599 800.811 61.344C799.294 62.041 797.572 62.492 795.809 62.492C789.536 62.492 784.452 57.408 784.452 51.135ZM785.108 51.135C785.108 57.039 789.905 61.836 795.809 61.836C797.654 61.836 799.376 61.385 800.893 60.565C800.934 60.278 800.934 59.745 800.934 59.212V53.841C799.95 55.645 798.023 56.916 795.809 56.916C792.611 56.916 790.028 54.333 790.028 51.135C790.028 47.937 792.611 45.354 795.809 45.354C798.023 45.354 799.95 46.625 800.934 48.47V41.746C799.417 40.926 797.654 40.434 795.809 40.434C789.905 40.434 785.108 45.231 785.108 51.135ZM790.684 51.135C790.684 53.964 792.98 56.26 795.809 56.26C798.679 56.26 800.934 53.964 800.934 51.135C800.934 48.306 798.679 46.01 795.809 46.01C792.98 46.01 790.684 48.306 790.684 51.135ZM801.59 42.115V60.155C804.337 58.474 806.51 55.071 806.51 51.135C806.51 47.199 804.337 43.796 801.59 42.115ZM821.433 62.492C815.16 62.492 810.076 57.408 810.076 51.135C810.076 44.862 815.16 39.778 821.433 39.778C827.706 39.778 832.79 44.862 832.79 51.135C832.79 57.408 827.706 62.492 821.433 62.492ZM821.433 61.836C827.337 61.836 832.134 57.039 832.134 51.135C832.134 45.231 827.337 40.434 821.433 40.434C815.529 40.434 810.732 45.231 810.732 51.135C810.732 57.039 815.529 61.836 821.433 61.836ZM821.433 56.916C818.235 56.916 815.652 54.333 815.652 51.135C815.652 47.937 818.235 45.354 821.433 45.354C824.631 45.354 827.214 47.937 827.214 51.135C827.214 54.333 824.631 56.916 821.433 56.916ZM821.433 56.26C824.262 56.26 826.558 53.964 826.558 51.135C826.558 48.306 824.262 46.01 821.433 46.01C818.604 46.01 816.308 48.306 816.308 51.135C816.308 53.964 818.604 56.26 821.433 56.26ZM857.664 62H857.008L851.104 46.871V62H850.448V39.532H845.528V62H844.872V33.3H854.015C859.263 33.3 863.445 37.482 863.445 42.73C863.445 46.912 861.354 49.372 858.935 50.889L863.24 62H862.584L858.402 51.217C857.213 51.914 855.532 52.529 854.138 52.939L857.664 62ZM856.762 45.313L858.689 50.274C860.903 48.88 862.789 46.584 862.789 42.73C862.789 37.81 858.935 33.956 854.015 33.956H851.104V38.876H854.015C856.147 38.876 857.869 40.598 857.869 42.73C857.869 43.714 857.5 44.575 856.762 45.313ZM851.104 39.532V46.871L852.662 46.543C855.86 45.846 857.213 44.493 857.213 42.73C857.213 40.926 855.819 39.532 854.015 39.532H851.104ZM845.528 33.956V38.876H850.448V33.956H845.528ZM858.156 50.602L856.27 45.764C855.04 46.707 853.605 47.035 852.006 47.363L853.892 52.283C855.122 51.955 857.131 51.217 858.156 50.602ZM864.93 51.135C864.93 44.862 870.014 39.778 876.287 39.778C881.289 39.778 885.512 42.976 887.029 47.486L873.704 55.563C874.483 56.014 875.344 56.26 876.287 56.26C878.337 56.26 880.1 55.03 880.92 53.308L881.535 53.595C880.633 55.563 878.624 56.916 876.287 56.916C875.098 56.916 873.991 56.547 873.089 55.932L868.661 58.638C870.588 60.606 873.294 61.836 876.287 61.836C880.551 61.836 884.282 59.294 886.004 55.645L886.578 55.932C884.774 59.827 880.838 62.492 876.287 62.492C870.014 62.492 864.93 57.408 864.93 51.135ZM865.586 51.135C865.586 52.324 865.791 53.431 866.119 54.497L870.547 51.791C870.506 51.586 870.506 51.34 870.506 51.135C870.506 47.937 873.089 45.354 876.287 45.354C877.476 45.354 878.624 45.723 879.526 46.338L883.913 43.673C881.986 41.664 879.28 40.434 876.287 40.434C870.383 40.434 865.586 45.231 865.586 51.135ZM866.365 55.112C866.816 56.219 867.431 57.244 868.21 58.146L872.515 55.522C871.613 54.743 870.957 53.677 870.67 52.488L866.365 55.112ZM871.162 51.135V51.422L878.911 46.707C878.132 46.256 877.23 46.01 876.287 46.01C873.458 46.01 871.162 48.306 871.162 51.135ZM871.244 52.16C871.49 53.349 872.187 54.415 873.13 55.153L881.33 50.151C881.084 48.962 880.428 47.896 879.485 47.117L871.244 52.16ZM880.1 46.789C881.002 47.568 881.658 48.593 881.904 49.823L886.25 47.158C885.799 46.051 885.143 45.067 884.405 44.165L880.1 46.789ZM904.93 42.115V60.155C907.677 58.474 909.85 55.071 909.85 51.135C909.85 47.199 907.677 43.796 904.93 42.115ZM899.149 39.778C900.994 39.778 902.716 40.229 904.274 41.008V40.27H904.93V41.377C907.226 42.648 908.989 44.944 909.85 47.322V40.27H910.506V62H909.85V54.907C909.03 57.244 907.226 59.663 904.93 60.934V62H904.274V61.262C902.716 62.041 900.994 62.492 899.149 62.492C892.876 62.492 887.792 57.408 887.792 51.135C887.792 44.862 892.876 39.778 899.149 39.778ZM899.149 61.836C900.994 61.836 902.757 61.385 904.274 60.565V53.841C903.29 55.645 901.363 56.916 899.149 56.916C895.951 56.916 893.368 54.333 893.368 51.135C893.368 47.937 895.951 45.354 899.149 45.354C901.363 45.354 903.29 46.625 904.274 48.47V41.746C902.757 40.926 900.994 40.434 899.149 40.434C893.245 40.434 888.448 45.231 888.448 51.135C888.448 57.039 893.245 61.836 899.149 61.836ZM899.149 56.26C902.019 56.26 904.274 53.964 904.274 51.135C904.274 48.306 902.019 46.01 899.149 46.01C896.32 46.01 894.024 48.306 894.024 51.135C894.024 53.964 896.32 56.26 899.149 56.26ZM925.552 45.846V46.502H924.363C921.862 46.502 919.73 48.634 919.73 51.135C919.73 53.636 921.862 55.768 924.363 55.768H925.552V56.424H924.363C921.493 56.424 919.074 54.005 919.074 51.135C919.074 48.265 921.493 45.846 924.363 45.846H925.552ZM925.552 40.926H924.363C918.746 40.926 914.154 45.518 914.154 51.135C914.154 56.752 918.746 61.344 924.363 61.344H925.552V62H924.363C918.377 62 913.498 57.121 913.498 51.135C913.498 45.149 918.377 40.27 924.363 40.27H925.552V40.926ZM931.071 40.926H927.832V40.27H931.071V33.3H931.727V40.27H936.647V33.3H937.303V40.27H940.542V40.926H937.303V45.846H940.542V46.502H937.303V62H936.647V46.502H931.727V62H931.071V46.502H927.832V45.846H931.071V40.926ZM936.647 40.926H931.727V45.846H936.647V40.926ZM965.874 61.016L975.96 33.3H976.698L966.243 62H965.505L962.922 54.907L960.339 62H959.601L949.146 33.3H949.884L959.97 61.016L962.553 53.923L955.05 33.3H955.788L962.922 52.898L970.056 33.3H970.794L963.291 53.882L965.874 61.016ZM978.549 62V40.27H979.205V62H978.549ZM984.781 40.27V62H984.125V40.27H984.781ZM984.125 38.138V31.25H984.781V38.138H984.125ZM979.205 31.25V38.138H978.549V31.25H979.205ZM991.01 40.926H987.771V40.27H991.01V33.3H991.666V40.27H996.586V33.3H997.242V40.27H1000.48V40.926H997.242V45.846H1000.48V46.502H997.242V62H996.586V46.502H991.666V62H991.01V46.502H987.771V45.846H991.01V40.926ZM996.586 40.926H991.666V45.846H996.586V40.926ZM1001.82 51.135C1001.82 44.862 1006.91 39.778 1013.18 39.778C1018.18 39.778 1022.41 42.976 1023.92 47.486L1010.6 55.563C1011.38 56.014 1012.24 56.26 1013.18 56.26C1015.23 56.26 1016.99 55.03 1017.81 53.308L1018.43 53.595C1017.53 55.563 1015.52 56.916 1013.18 56.916C1011.99 56.916 1010.88 56.547 1009.98 55.932L1005.55 58.638C1007.48 60.606 1010.19 61.836 1013.18 61.836C1017.44 61.836 1021.18 59.294 1022.9 55.645L1023.47 55.932C1021.67 59.827 1017.73 62.492 1013.18 62.492C1006.91 62.492 1001.82 57.408 1001.82 51.135ZM1002.48 51.135C1002.48 52.324 1002.68 53.431 1003.01 54.497L1007.44 51.791C1007.4 51.586 1007.4 51.34 1007.4 51.135C1007.4 47.937 1009.98 45.354 1013.18 45.354C1014.37 45.354 1015.52 45.723 1016.42 46.338L1020.81 43.673C1018.88 41.664 1016.17 40.434 1013.18 40.434C1007.28 40.434 1002.48 45.231 1002.48 51.135ZM1003.26 55.112C1003.71 56.219 1004.32 57.244 1005.1 58.146L1009.41 55.522C1008.51 54.743 1007.85 53.677 1007.56 52.488L1003.26 55.112ZM1008.06 51.135V51.422L1015.8 46.707C1015.03 46.256 1014.12 46.01 1013.18 46.01C1010.35 46.01 1008.06 48.306 1008.06 51.135ZM1008.14 52.16C1008.38 53.349 1009.08 54.415 1010.02 55.153L1018.22 50.151C1017.98 48.962 1017.32 47.896 1016.38 47.117L1008.14 52.16ZM1016.99 46.789C1017.9 47.568 1018.55 48.593 1018.8 49.823L1023.14 47.158C1022.69 46.051 1022.04 45.067 1021.3 44.165L1016.99 46.789ZM1035.06 62V33.3H1043.09C1048.3 33.3 1052.52 37.523 1052.52 42.73C1052.52 44.534 1052.03 46.215 1051.13 47.65C1052.03 49.044 1052.52 50.766 1052.52 52.57C1052.52 57.777 1048.3 62 1043.09 62H1035.06ZM1035.71 61.344H1040.63V56.424H1035.71V61.344ZM1035.71 55.768H1040.63V49.372H1035.71V55.768ZM1035.71 48.716H1040.63V46.584H1035.71V48.716ZM1035.71 45.928H1040.63V39.532H1035.71V45.928ZM1035.71 38.876H1040.63V33.956H1035.71V38.876ZM1041.29 61.344H1043.09C1047.93 61.344 1051.87 57.408 1051.87 52.57C1051.87 50.725 1051.29 49.044 1050.35 47.65C1051.29 46.256 1051.87 44.575 1051.87 42.73C1051.87 37.892 1047.93 33.956 1043.09 33.956H1041.29V38.876H1043.09C1045.23 38.876 1046.95 40.598 1046.95 42.73C1046.95 44.862 1045.23 46.584 1043.09 46.584H1041.29V48.716H1043.09C1045.23 48.716 1046.95 50.438 1046.95 52.57C1046.95 54.702 1045.23 56.424 1043.09 56.424H1041.29V61.344ZM1041.29 55.768H1043.09C1044.86 55.768 1046.29 54.333 1046.29 52.57C1046.29 50.807 1044.86 49.372 1043.09 49.372H1041.29V55.768ZM1041.29 45.928H1043.09C1044.86 45.928 1046.29 44.493 1046.29 42.73C1046.29 40.967 1044.86 39.532 1043.09 39.532H1041.29V45.928ZM1066.19 62.492C1059.92 62.492 1054.84 57.408 1054.84 51.135C1054.84 44.862 1059.92 39.778 1066.19 39.778C1072.47 39.778 1077.55 44.862 1077.55 51.135C1077.55 57.408 1072.47 62.492 1066.19 62.492ZM1066.19 61.836C1072.1 61.836 1076.89 57.039 1076.89 51.135C1076.89 45.231 1072.1 40.434 1066.19 40.434C1060.29 40.434 1055.49 45.231 1055.49 51.135C1055.49 57.039 1060.29 61.836 1066.19 61.836ZM1066.19 56.916C1062.99 56.916 1060.41 54.333 1060.41 51.135C1060.41 47.937 1062.99 45.354 1066.19 45.354C1069.39 45.354 1071.97 47.937 1071.97 51.135C1071.97 54.333 1069.39 56.916 1066.19 56.916ZM1066.19 56.26C1069.02 56.26 1071.32 53.964 1071.32 51.135C1071.32 48.306 1069.02 46.01 1066.19 46.01C1063.36 46.01 1061.07 48.306 1061.07 51.135C1061.07 53.964 1063.36 56.26 1066.19 56.26ZM1080.49 62V40.27H1081.14V62H1080.49ZM1086.72 40.27V62H1086.06V40.27H1086.72ZM1086.06 38.138V31.25H1086.72V38.138H1086.06ZM1081.14 31.25V38.138H1080.49V31.25H1081.14ZM1091.56 31.25V62H1090.9V31.25H1091.56ZM1097.13 31.25V62H1096.48V31.25H1097.13ZM1100.08 51.135C1100.08 44.862 1105.16 39.778 1111.44 39.778C1116.44 39.778 1120.66 42.976 1122.18 47.486L1108.85 55.563C1109.63 56.014 1110.49 56.26 1111.44 56.26C1113.49 56.26 1115.25 55.03 1116.07 53.308L1116.68 53.595C1115.78 55.563 1113.77 56.916 1111.44 56.916C1110.25 56.916 1109.14 56.547 1108.24 55.932L1103.81 58.638C1105.74 60.606 1108.44 61.836 1111.44 61.836C1115.7 61.836 1119.43 59.294 1121.15 55.645L1121.73 55.932C1119.92 59.827 1115.99 62.492 1111.44 62.492C1105.16 62.492 1100.08 57.408 1100.08 51.135ZM1100.74 51.135C1100.74 52.324 1100.94 53.431 1101.27 54.497L1105.7 51.791C1105.66 51.586 1105.66 51.34 1105.66 51.135C1105.66 47.937 1108.24 45.354 1111.44 45.354C1112.63 45.354 1113.77 45.723 1114.68 46.338L1119.06 43.673C1117.14 41.664 1114.43 40.434 1111.44 40.434C1105.53 40.434 1100.74 45.231 1100.74 51.135ZM1101.51 55.112C1101.97 56.219 1102.58 57.244 1103.36 58.146L1107.66 55.522C1106.76 54.743 1106.11 53.677 1105.82 52.488L1101.51 55.112ZM1106.31 51.135V51.422L1114.06 46.707C1113.28 46.256 1112.38 46.01 1111.44 46.01C1108.61 46.01 1106.31 48.306 1106.31 51.135ZM1106.39 52.16C1106.64 53.349 1107.34 54.415 1108.28 55.153L1116.48 50.151C1116.23 48.962 1115.58 47.896 1114.63 47.117L1106.39 52.16ZM1115.25 46.789C1116.15 47.568 1116.81 48.593 1117.05 49.823L1121.4 47.158C1120.95 46.051 1120.29 45.067 1119.55 44.165L1115.25 46.789ZM1129.75 62V42.689C1127.53 44.042 1124.83 46.83 1124.83 51.709V62H1124.17V40.27H1124.83V47.732C1125.85 44.903 1127.45 43.304 1129.75 41.951V40.27H1130.4V41.582C1132.04 40.762 1133.81 40.352 1135.53 40.352V41.008C1133.81 41.008 1132 41.459 1130.4 42.32V49.044C1131.35 47.199 1133.31 45.928 1135.53 45.928V46.584C1132.66 46.584 1130.4 48.88 1130.4 51.709V62H1129.75ZM1153.36 39.532V45.928H1156.27C1158.07 45.928 1159.47 44.534 1159.47 42.73C1159.47 40.926 1158.07 39.532 1156.27 39.532H1153.36ZM1153.36 38.876H1156.27C1158.4 38.876 1160.12 40.598 1160.12 42.73C1160.12 44.862 1158.4 46.584 1156.27 46.584H1153.36V51.504H1156.27C1161.19 51.504 1165.04 47.65 1165.04 42.73C1165.04 37.81 1161.19 33.956 1156.27 33.956H1153.36V38.876ZM1147.78 52.16V62H1147.13V33.3H1156.27C1161.52 33.3 1165.7 37.482 1165.7 42.73C1165.7 47.978 1161.52 52.16 1156.27 52.16H1153.36V62H1152.7V52.16H1147.78ZM1147.78 39.532V45.928H1152.7V39.532H1147.78ZM1152.7 33.956H1147.78V38.876H1152.7V33.956ZM1152.7 46.584H1147.78V51.504H1152.7V46.584ZM1169.15 31.25V62H1168.49V31.25H1169.15ZM1174.73 31.25V62H1174.07V31.25H1174.73ZM1194.81 42.115V60.155C1197.56 58.474 1199.73 55.071 1199.73 51.135C1199.73 47.199 1197.56 43.796 1194.81 42.115ZM1189.03 39.778C1190.88 39.778 1192.6 40.229 1194.16 41.008V40.27H1194.81V41.377C1197.11 42.648 1198.87 44.944 1199.73 47.322V40.27H1200.39V62H1199.73V54.907C1198.91 57.244 1197.11 59.663 1194.81 60.934V62H1194.16V61.262C1192.6 62.041 1190.88 62.492 1189.03 62.492C1182.76 62.492 1177.67 57.408 1177.67 51.135C1177.67 44.862 1182.76 39.778 1189.03 39.778ZM1189.03 61.836C1190.88 61.836 1192.64 61.385 1194.16 60.565V53.841C1193.17 55.645 1191.25 56.916 1189.03 56.916C1185.83 56.916 1183.25 54.333 1183.25 51.135C1183.25 47.937 1185.83 45.354 1189.03 45.354C1191.25 45.354 1193.17 46.625 1194.16 48.47V41.746C1192.64 40.926 1190.88 40.434 1189.03 40.434C1183.13 40.434 1178.33 45.231 1178.33 51.135C1178.33 57.039 1183.13 61.836 1189.03 61.836ZM1189.03 56.26C1191.9 56.26 1194.16 53.964 1194.16 51.135C1194.16 48.306 1191.9 46.01 1189.03 46.01C1186.2 46.01 1183.91 48.306 1183.91 51.135C1183.91 53.964 1186.2 56.26 1189.03 56.26ZM1206.62 40.926H1203.38V40.27H1206.62V33.3H1207.28V40.27H1212.2V33.3H1212.85V40.27H1216.09V40.926H1212.85V45.846H1216.09V46.502H1212.85V62H1212.2V46.502H1207.28V62H1206.62V46.502H1203.38V45.846H1206.62V40.926ZM1212.2 40.926H1207.28V45.846H1212.2V40.926ZM1217.43 51.135C1217.43 44.862 1222.52 39.778 1228.79 39.778C1233.79 39.778 1238.02 42.976 1239.53 47.486L1226.21 55.563C1226.99 56.014 1227.85 56.26 1228.79 56.26C1230.84 56.26 1232.6 55.03 1233.42 53.308L1234.04 53.595C1233.14 55.563 1231.13 56.916 1228.79 56.916C1227.6 56.916 1226.49 56.547 1225.59 55.932L1221.16 58.638C1223.09 60.606 1225.8 61.836 1228.79 61.836C1233.05 61.836 1236.79 59.294 1238.51 55.645L1239.08 55.932C1237.28 59.827 1233.34 62.492 1228.79 62.492C1222.52 62.492 1217.43 57.408 1217.43 51.135ZM1218.09 51.135C1218.09 52.324 1218.29 53.431 1218.62 54.497L1223.05 51.791C1223.01 51.586 1223.01 51.34 1223.01 51.135C1223.01 47.937 1225.59 45.354 1228.79 45.354C1229.98 45.354 1231.13 45.723 1232.03 46.338L1236.42 43.673C1234.49 41.664 1231.78 40.434 1228.79 40.434C1222.89 40.434 1218.09 45.231 1218.09 51.135ZM1218.87 55.112C1219.32 56.219 1219.93 57.244 1220.71 58.146L1225.02 55.522C1224.12 54.743 1223.46 53.677 1223.17 52.488L1218.87 55.112ZM1223.67 51.135V51.422L1231.41 46.707C1230.64 46.256 1229.73 46.01 1228.79 46.01C1225.96 46.01 1223.67 48.306 1223.67 51.135ZM1223.75 52.16C1223.99 53.349 1224.69 54.415 1225.63 55.153L1233.83 50.151C1233.59 48.962 1232.93 47.896 1231.99 47.117L1223.75 52.16ZM1232.6 46.789C1233.51 47.568 1234.16 48.593 1234.41 49.823L1238.75 47.158C1238.3 46.051 1237.65 45.067 1236.91 44.165L1232.6 46.789ZM1253.72 33.956H1247.86V33.3H1265.82V33.956H1259.96V38.876H1265.82V39.532H1259.96V62H1259.3V39.532H1254.38V62H1253.72V39.532H1247.86V38.876H1253.72V33.956ZM1259.3 33.956H1254.38V38.876H1259.3V33.956ZM1264.4 51.135C1264.4 44.862 1269.48 39.778 1275.76 39.778C1280.76 39.778 1284.98 42.976 1286.5 47.486L1273.17 55.563C1273.95 56.014 1274.81 56.26 1275.76 56.26C1277.81 56.26 1279.57 55.03 1280.39 53.308L1281 53.595C1280.1 55.563 1278.09 56.916 1275.76 56.916C1274.57 56.916 1273.46 56.547 1272.56 55.932L1268.13 58.638C1270.06 60.606 1272.76 61.836 1275.76 61.836C1280.02 61.836 1283.75 59.294 1285.47 55.645L1286.05 55.932C1284.24 59.827 1280.31 62.492 1275.76 62.492C1269.48 62.492 1264.4 57.408 1264.4 51.135ZM1265.06 51.135C1265.06 52.324 1265.26 53.431 1265.59 54.497L1270.02 51.791C1269.98 51.586 1269.98 51.34 1269.98 51.135C1269.98 47.937 1272.56 45.354 1275.76 45.354C1276.95 45.354 1278.09 45.723 1279 46.338L1283.38 43.673C1281.46 41.664 1278.75 40.434 1275.76 40.434C1269.85 40.434 1265.06 45.231 1265.06 51.135ZM1265.83 55.112C1266.29 56.219 1266.9 57.244 1267.68 58.146L1271.98 55.522C1271.08 54.743 1270.43 53.677 1270.14 52.488L1265.83 55.112ZM1270.63 51.135V51.422L1278.38 46.707C1277.6 46.256 1276.7 46.01 1275.76 46.01C1272.93 46.01 1270.63 48.306 1270.63 51.135ZM1270.71 52.16C1270.96 53.349 1271.66 54.415 1272.6 55.153L1280.8 50.151C1280.55 48.962 1279.9 47.896 1278.95 47.117L1270.71 52.16ZM1279.57 46.789C1280.47 47.568 1281.13 48.593 1281.37 49.823L1285.72 47.158C1285.27 46.051 1284.61 45.067 1283.87 44.165L1279.57 46.789ZM1299.36 45.846V46.502H1298.17C1295.67 46.502 1293.53 48.634 1293.53 51.135C1293.53 53.636 1295.67 55.768 1298.17 55.768H1299.36V56.424H1298.17C1295.3 56.424 1292.88 54.005 1292.88 51.135C1292.88 48.265 1295.3 45.846 1298.17 45.846H1299.36ZM1299.36 40.926H1298.17C1292.55 40.926 1287.96 45.518 1287.96 51.135C1287.96 56.752 1292.55 61.344 1298.17 61.344H1299.36V62H1298.17C1292.18 62 1287.3 57.121 1287.3 51.135C1287.3 45.149 1292.18 40.27 1298.17 40.27H1299.36V40.926ZM1302.83 62V31.25H1303.48V46.461C1304.38 44.124 1306.15 42.197 1308.4 41.09V31.25H1309.06V40.762C1310.21 40.311 1311.44 40.065 1312.75 40.065C1318.2 40.065 1322.67 44.534 1322.67 49.987V62H1322.01V49.987C1322.01 44.903 1317.83 40.721 1312.75 40.721C1311.44 40.721 1310.21 41.008 1309.06 41.5V47.691C1309.84 46.461 1311.19 45.641 1312.75 45.641C1315.13 45.641 1317.09 47.609 1317.09 49.987V62H1316.44V49.987C1316.44 47.978 1314.76 46.297 1312.75 46.297C1310.74 46.297 1309.06 47.978 1309.06 49.987V62H1308.4V41.828C1305.49 43.386 1303.48 46.461 1303.48 49.987V62H1302.83ZM1326.53 62V40.27H1327.18V46.461C1328.09 44.124 1329.85 42.197 1332.1 41.09V40.27H1332.76V40.762C1333.91 40.311 1335.14 40.065 1336.45 40.065C1341.9 40.065 1346.37 44.534 1346.37 49.987V62H1345.72V49.987C1345.72 44.903 1341.53 40.721 1336.45 40.721C1335.14 40.721 1333.91 41.008 1332.76 41.5V47.691C1333.54 46.461 1334.89 45.641 1336.45 45.641C1338.83 45.641 1340.8 47.609 1340.8 49.987V62H1340.14V49.987C1340.14 47.978 1338.46 46.297 1336.45 46.297C1334.44 46.297 1332.76 47.978 1332.76 49.987V62H1332.1V41.828C1329.19 43.386 1327.18 46.461 1327.18 49.987V62H1326.53ZM1350.23 62V40.27H1350.89V62H1350.23ZM1356.46 40.27V62H1355.81V40.27H1356.46ZM1355.81 38.138V31.25H1356.46V38.138H1355.81ZM1350.89 31.25V38.138H1350.23V31.25H1350.89ZM1359.45 51.135C1359.45 44.862 1364.54 39.778 1370.81 39.778C1372.66 39.778 1374.38 40.229 1375.94 41.008V40.27H1376.59V41.377C1378.89 42.648 1380.65 44.944 1381.51 47.322V40.27H1382.17V60.155C1382.17 66.428 1377.12 71.512 1370.81 71.512C1366.92 71.512 1363.47 69.503 1361.38 66.51L1361.95 66.182C1363.92 69.011 1367.16 70.856 1370.81 70.856C1376.8 70.856 1381.51 66.1 1381.51 60.155V54.907C1380.69 57.285 1378.85 59.663 1376.51 60.934C1376.1 63.722 1373.76 65.936 1370.81 65.936C1368.97 65.936 1367.28 65.034 1366.22 63.722L1366.79 63.394C1367.69 64.501 1369.21 65.28 1370.81 65.28C1373.27 65.28 1375.28 63.599 1375.81 61.344C1374.3 62.041 1372.57 62.492 1370.81 62.492C1364.54 62.492 1359.45 57.408 1359.45 51.135ZM1360.11 51.135C1360.11 57.039 1364.91 61.836 1370.81 61.836C1372.66 61.836 1374.38 61.385 1375.89 60.565C1375.94 60.278 1375.94 59.745 1375.94 59.212V53.841C1374.95 55.645 1373.02 56.916 1370.81 56.916C1367.61 56.916 1365.03 54.333 1365.03 51.135C1365.03 47.937 1367.61 45.354 1370.81 45.354C1373.02 45.354 1374.95 46.625 1375.94 48.47V41.746C1374.42 40.926 1372.66 40.434 1370.81 40.434C1364.91 40.434 1360.11 45.231 1360.11 51.135ZM1365.69 51.135C1365.69 53.964 1367.98 56.26 1370.81 56.26C1373.68 56.26 1375.94 53.964 1375.94 51.135C1375.94 48.306 1373.68 46.01 1370.81 46.01C1367.98 46.01 1365.69 48.306 1365.69 51.135ZM1376.59 42.115V60.155C1379.34 58.474 1381.51 55.071 1381.51 51.135C1381.51 47.199 1379.34 43.796 1376.59 42.115ZM1396.43 62.492C1390.16 62.492 1385.08 57.408 1385.08 51.135C1385.08 44.862 1390.16 39.778 1396.43 39.778C1402.71 39.778 1407.79 44.862 1407.79 51.135C1407.79 57.408 1402.71 62.492 1396.43 62.492ZM1396.43 61.836C1402.34 61.836 1407.14 57.039 1407.14 51.135C1407.14 45.231 1402.34 40.434 1396.43 40.434C1390.53 40.434 1385.73 45.231 1385.73 51.135C1385.73 57.039 1390.53 61.836 1396.43 61.836ZM1396.43 56.916C1393.24 56.916 1390.65 54.333 1390.65 51.135C1390.65 47.937 1393.24 45.354 1396.43 45.354C1399.63 45.354 1402.22 47.937 1402.22 51.135C1402.22 54.333 1399.63 56.916 1396.43 56.916ZM1396.43 56.26C1399.26 56.26 1401.56 53.964 1401.56 51.135C1401.56 48.306 1399.26 46.01 1396.43 46.01C1393.61 46.01 1391.31 48.306 1391.31 51.135C1391.31 53.964 1393.61 56.26 1396.43 56.26ZM1432.66 62H1432.01L1426.1 46.871V62H1425.45V39.532H1420.53V62H1419.87V33.3H1429.02C1434.26 33.3 1438.45 37.482 1438.45 42.73C1438.45 46.912 1436.35 49.372 1433.94 50.889L1438.24 62H1437.58L1433.4 51.217C1432.21 51.914 1430.53 52.529 1429.14 52.939L1432.66 62ZM1431.76 45.313L1433.69 50.274C1435.9 48.88 1437.79 46.584 1437.79 42.73C1437.79 37.81 1433.94 33.956 1429.02 33.956H1426.1V38.876H1429.02C1431.15 38.876 1432.87 40.598 1432.87 42.73C1432.87 43.714 1432.5 44.575 1431.76 45.313ZM1426.1 39.532V46.871L1427.66 46.543C1430.86 45.846 1432.21 44.493 1432.21 42.73C1432.21 40.926 1430.82 39.532 1429.02 39.532H1426.1ZM1420.53 33.956V38.876H1425.45V33.956H1420.53ZM1433.16 50.602L1431.27 45.764C1430.04 46.707 1428.61 47.035 1427.01 47.363L1428.89 52.283C1430.12 51.955 1432.13 51.217 1433.16 50.602ZM1439.93 51.135C1439.93 44.862 1445.01 39.778 1451.29 39.778C1456.29 39.778 1460.51 42.976 1462.03 47.486L1448.7 55.563C1449.48 56.014 1450.34 56.26 1451.29 56.26C1453.34 56.26 1455.1 55.03 1455.92 53.308L1456.54 53.595C1455.63 55.563 1453.62 56.916 1451.29 56.916C1450.1 56.916 1448.99 56.547 1448.09 55.932L1443.66 58.638C1445.59 60.606 1448.29 61.836 1451.29 61.836C1455.55 61.836 1459.28 59.294 1461 55.645L1461.58 55.932C1459.77 59.827 1455.84 62.492 1451.29 62.492C1445.01 62.492 1439.93 57.408 1439.93 51.135ZM1440.59 51.135C1440.59 52.324 1440.79 53.431 1441.12 54.497L1445.55 51.791C1445.51 51.586 1445.51 51.34 1445.51 51.135C1445.51 47.937 1448.09 45.354 1451.29 45.354C1452.48 45.354 1453.62 45.723 1454.53 46.338L1458.91 43.673C1456.99 41.664 1454.28 40.434 1451.29 40.434C1445.38 40.434 1440.59 45.231 1440.59 51.135ZM1441.37 55.112C1441.82 56.219 1442.43 57.244 1443.21 58.146L1447.52 55.522C1446.61 54.743 1445.96 53.677 1445.67 52.488L1441.37 55.112ZM1446.16 51.135V51.422L1453.91 46.707C1453.13 46.256 1452.23 46.01 1451.29 46.01C1448.46 46.01 1446.16 48.306 1446.16 51.135ZM1446.24 52.16C1446.49 53.349 1447.19 54.415 1448.13 55.153L1456.33 50.151C1456.08 48.962 1455.43 47.896 1454.49 47.117L1446.24 52.16ZM1455.1 46.789C1456 47.568 1456.66 48.593 1456.9 49.823L1461.25 47.158C1460.8 46.051 1460.14 45.067 1459.41 44.165L1455.1 46.789ZM1479.93 42.115V60.155C1482.68 58.474 1484.85 55.071 1484.85 51.135C1484.85 47.199 1482.68 43.796 1479.93 42.115ZM1474.15 39.778C1476 39.778 1477.72 40.229 1479.28 41.008V40.27H1479.93V41.377C1482.23 42.648 1483.99 44.944 1484.85 47.322V40.27H1485.51V62H1484.85V54.907C1484.03 57.244 1482.23 59.663 1479.93 60.934V62H1479.28V61.262C1477.72 62.041 1476 62.492 1474.15 62.492C1467.88 62.492 1462.79 57.408 1462.79 51.135C1462.79 44.862 1467.88 39.778 1474.15 39.778ZM1474.15 61.836C1476 61.836 1477.76 61.385 1479.28 60.565V53.841C1478.29 55.645 1476.36 56.916 1474.15 56.916C1470.95 56.916 1468.37 54.333 1468.37 51.135C1468.37 47.937 1470.95 45.354 1474.15 45.354C1476.36 45.354 1478.29 46.625 1479.28 48.47V41.746C1477.76 40.926 1476 40.434 1474.15 40.434C1468.25 40.434 1463.45 45.231 1463.45 51.135C1463.45 57.039 1468.25 61.836 1474.15 61.836ZM1474.15 56.26C1477.02 56.26 1479.28 53.964 1479.28 51.135C1479.28 48.306 1477.02 46.01 1474.15 46.01C1471.32 46.01 1469.03 48.306 1469.03 51.135C1469.03 53.964 1471.32 56.26 1474.15 56.26ZM1500.55 45.846V46.502H1499.36C1496.86 46.502 1494.73 48.634 1494.73 51.135C1494.73 53.636 1496.86 55.768 1499.36 55.768H1500.55V56.424H1499.36C1496.49 56.424 1494.08 54.005 1494.08 51.135C1494.08 48.265 1496.49 45.846 1499.36 45.846H1500.55ZM1500.55 40.926H1499.36C1493.75 40.926 1489.16 45.518 1489.16 51.135C1489.16 56.752 1493.75 61.344 1499.36 61.344H1500.55V62H1499.36C1493.38 62 1488.5 57.121 1488.5 51.135C1488.5 45.149 1493.38 40.27 1499.36 40.27H1500.55V40.926ZM1506.07 40.926H1502.83V40.27H1506.07V33.3H1506.73V40.27H1511.65V33.3H1512.3V40.27H1515.54V40.926H1512.3V45.846H1515.54V46.502H1512.3V62H1511.65V46.502H1506.73V62H1506.07V46.502H1502.83V45.846H1506.07V40.926ZM1511.65 40.926H1506.73V45.846H1511.65V40.926ZM1540.88 61.016L1550.96 33.3H1551.7L1541.24 62H1540.51L1537.92 54.907L1535.34 62H1534.6L1524.15 33.3H1524.89L1534.97 61.016L1537.55 53.923L1530.05 33.3H1530.79L1537.92 52.898L1545.06 33.3H1545.8L1538.29 53.882L1540.88 61.016ZM1553.55 62V40.27H1554.21V62H1553.55ZM1559.78 40.27V62H1559.13V40.27H1559.78ZM1559.13 38.138V31.25H1559.78V38.138H1559.13ZM1554.21 31.25V38.138H1553.55V31.25H1554.21ZM1566.01 40.926H1562.77V40.27H1566.01V33.3H1566.67V40.27H1571.59V33.3H1572.24V40.27H1575.48V40.926H1572.24V45.846H1575.48V46.502H1572.24V62H1571.59V46.502H1566.67V62H1566.01V46.502H1562.77V45.846H1566.01V40.926ZM1571.59 40.926H1566.67V45.846H1571.59V40.926ZM1576.82 51.135C1576.82 44.862 1581.91 39.778 1588.18 39.778C1593.18 39.778 1597.41 42.976 1598.92 47.486L1585.6 55.563C1586.38 56.014 1587.24 56.26 1588.18 56.26C1590.23 56.26 1591.99 55.03 1592.81 53.308L1593.43 53.595C1592.53 55.563 1590.52 56.916 1588.18 56.916C1586.99 56.916 1585.89 56.547 1584.98 55.932L1580.56 58.638C1582.48 60.606 1585.19 61.836 1588.18 61.836C1592.45 61.836 1596.18 59.294 1597.9 55.645L1598.47 55.932C1596.67 59.827 1592.73 62.492 1588.18 62.492C1581.91 62.492 1576.82 57.408 1576.82 51.135ZM1577.48 51.135C1577.48 52.324 1577.69 53.431 1578.01 54.497L1582.44 51.791C1582.4 51.586 1582.4 51.34 1582.4 51.135C1582.4 47.937 1584.98 45.354 1588.18 45.354C1589.37 45.354 1590.52 45.723 1591.42 46.338L1595.81 43.673C1593.88 41.664 1591.17 40.434 1588.18 40.434C1582.28 40.434 1577.48 45.231 1577.48 51.135ZM1578.26 55.112C1578.71 56.219 1579.33 57.244 1580.1 58.146L1584.41 55.522C1583.51 54.743 1582.85 53.677 1582.56 52.488L1578.26 55.112ZM1583.06 51.135V51.422L1590.81 46.707C1590.03 46.256 1589.12 46.01 1588.18 46.01C1585.35 46.01 1583.06 48.306 1583.06 51.135ZM1583.14 52.16C1583.38 53.349 1584.08 54.415 1585.02 55.153L1593.22 50.151C1592.98 48.962 1592.32 47.896 1591.38 47.117L1583.14 52.16ZM1591.99 46.789C1592.9 47.568 1593.55 48.593 1593.8 49.823L1598.14 47.158C1597.69 46.051 1597.04 45.067 1596.3 44.165L1591.99 46.789ZM1610.06 62V33.3H1618.09C1623.3 33.3 1627.52 37.523 1627.52 42.73C1627.52 44.534 1627.03 46.215 1626.13 47.65C1627.03 49.044 1627.52 50.766 1627.52 52.57C1627.52 57.777 1623.3 62 1618.09 62H1610.06ZM1610.71 61.344H1615.63V56.424H1610.71V61.344ZM1610.71 55.768H1615.63V49.372H1610.71V55.768ZM1610.71 48.716H1615.63V46.584H1610.71V48.716ZM1610.71 45.928H1615.63V39.532H1610.71V45.928ZM1610.71 38.876H1615.63V33.956H1610.71V38.876ZM1616.29 61.344H1618.09C1622.93 61.344 1626.87 57.408 1626.87 52.57C1626.87 50.725 1626.29 49.044 1625.35 47.65C1626.29 46.256 1626.87 44.575 1626.87 42.73C1626.87 37.892 1622.93 33.956 1618.09 33.956H1616.29V38.876H1618.09C1620.23 38.876 1621.95 40.598 1621.95 42.73C1621.95 44.862 1620.23 46.584 1618.09 46.584H1616.29V48.716H1618.09C1620.23 48.716 1621.95 50.438 1621.95 52.57C1621.95 54.702 1620.23 56.424 1618.09 56.424H1616.29V61.344ZM1616.29 55.768H1618.09C1619.86 55.768 1621.29 54.333 1621.29 52.57C1621.29 50.807 1619.86 49.372 1618.09 49.372H1616.29V55.768ZM1616.29 45.928H1618.09C1619.86 45.928 1621.29 44.493 1621.29 42.73C1621.29 40.967 1619.86 39.532 1618.09 39.532H1616.29V45.928ZM1641.19 62.492C1634.92 62.492 1629.84 57.408 1629.84 51.135C1629.84 44.862 1634.92 39.778 1641.19 39.778C1647.47 39.778 1652.55 44.862 1652.55 51.135C1652.55 57.408 1647.47 62.492 1641.19 62.492ZM1641.19 61.836C1647.1 61.836 1651.89 57.039 1651.89 51.135C1651.89 45.231 1647.1 40.434 1641.19 40.434C1635.29 40.434 1630.49 45.231 1630.49 51.135C1630.49 57.039 1635.29 61.836 1641.19 61.836ZM1641.19 56.916C1638 56.916 1635.41 54.333 1635.41 51.135C1635.41 47.937 1638 45.354 1641.19 45.354C1644.39 45.354 1646.97 47.937 1646.97 51.135C1646.97 54.333 1644.39 56.916 1641.19 56.916ZM1641.19 56.26C1644.02 56.26 1646.32 53.964 1646.32 51.135C1646.32 48.306 1644.02 46.01 1641.19 46.01C1638.36 46.01 1636.07 48.306 1636.07 51.135C1636.07 53.964 1638.36 56.26 1641.19 56.26ZM1655.49 62V40.27H1656.15V62H1655.49ZM1661.72 40.27V62H1661.07V40.27H1661.72ZM1661.07 38.138V31.25H1661.72V38.138H1661.07ZM1656.15 31.25V38.138H1655.49V31.25H1656.15ZM1666.56 31.25V62H1665.9V31.25H1666.56ZM1672.13 31.25V62H1671.48V31.25H1672.13ZM1675.08 51.135C1675.08 44.862 1680.16 39.778 1686.44 39.778C1691.44 39.778 1695.66 42.976 1697.18 47.486L1683.85 55.563C1684.63 56.014 1685.49 56.26 1686.44 56.26C1688.49 56.26 1690.25 55.03 1691.07 53.308L1691.69 53.595C1690.78 55.563 1688.77 56.916 1686.44 56.916C1685.25 56.916 1684.14 56.547 1683.24 55.932L1678.81 58.638C1680.74 60.606 1683.44 61.836 1686.44 61.836C1690.7 61.836 1694.43 59.294 1696.15 55.645L1696.73 55.932C1694.92 59.827 1690.99 62.492 1686.44 62.492C1680.16 62.492 1675.08 57.408 1675.08 51.135ZM1675.74 51.135C1675.74 52.324 1675.94 53.431 1676.27 54.497L1680.7 51.791C1680.66 51.586 1680.66 51.34 1680.66 51.135C1680.66 47.937 1683.24 45.354 1686.44 45.354C1687.63 45.354 1688.77 45.723 1689.68 46.338L1694.06 43.673C1692.14 41.664 1689.43 40.434 1686.44 40.434C1680.53 40.434 1675.74 45.231 1675.74 51.135ZM1676.52 55.112C1676.97 56.219 1677.58 57.244 1678.36 58.146L1682.67 55.522C1681.76 54.743 1681.11 53.677 1680.82 52.488L1676.52 55.112ZM1681.31 51.135V51.422L1689.06 46.707C1688.28 46.256 1687.38 46.01 1686.44 46.01C1683.61 46.01 1681.31 48.306 1681.31 51.135ZM1681.39 52.16C1681.64 53.349 1682.34 54.415 1683.28 55.153L1691.48 50.151C1691.23 48.962 1690.58 47.896 1689.64 47.117L1681.39 52.16ZM1690.25 46.789C1691.15 47.568 1691.81 48.593 1692.05 49.823L1696.4 47.158C1695.95 46.051 1695.29 45.067 1694.56 44.165L1690.25 46.789ZM1704.75 62V42.689C1702.53 44.042 1699.83 46.83 1699.83 51.709V62H1699.17V40.27H1699.83V47.732C1700.85 44.903 1702.45 43.304 1704.75 41.951V40.27H1705.4V41.582C1707.04 40.762 1708.81 40.352 1710.53 40.352V41.008C1708.81 41.008 1707 41.459 1705.4 42.32V49.044C1706.35 47.199 1708.32 45.928 1710.53 45.928V46.584C1707.66 46.584 1705.4 48.88 1705.4 51.709V62H1704.75ZM1728.36 39.532V45.928H1731.27C1733.07 45.928 1734.47 44.534 1734.47 42.73C1734.47 40.926 1733.07 39.532 1731.27 39.532H1728.36ZM1728.36 38.876H1731.27C1733.4 38.876 1735.12 40.598 1735.12 42.73C1735.12 44.862 1733.4 46.584 1731.27 46.584H1728.36V51.504H1731.27C1736.19 51.504 1740.04 47.65 1740.04 42.73C1740.04 37.81 1736.19 33.956 1731.27 33.956H1728.36V38.876ZM1722.78 52.16V62H1722.13V33.3H1731.27C1736.52 33.3 1740.7 37.482 1740.7 42.73C1740.7 47.978 1736.52 52.16 1731.27 52.16H1728.36V62H1727.7V52.16H1722.78ZM1722.78 39.532V45.928H1727.7V39.532H1722.78ZM1727.7 33.956H1722.78V38.876H1727.7V33.956ZM1727.7 46.584H1722.78V51.504H1727.7V46.584ZM1744.15 31.25V62H1743.5V31.25H1744.15ZM1749.73 31.25V62H1749.07V31.25H1749.73ZM1769.81 42.115V60.155C1772.56 58.474 1774.73 55.071 1774.73 51.135C1774.73 47.199 1772.56 43.796 1769.81 42.115ZM1764.03 39.778C1765.88 39.778 1767.6 40.229 1769.16 41.008V40.27H1769.81V41.377C1772.11 42.648 1773.87 44.944 1774.73 47.322V40.27H1775.39V62H1774.73V54.907C1773.91 57.244 1772.11 59.663 1769.81 60.934V62H1769.16V61.262C1767.6 62.041 1765.88 62.492 1764.03 62.492C1757.76 62.492 1752.68 57.408 1752.68 51.135C1752.68 44.862 1757.76 39.778 1764.03 39.778ZM1764.03 61.836C1765.88 61.836 1767.64 61.385 1769.16 60.565V53.841C1768.17 55.645 1766.25 56.916 1764.03 56.916C1760.83 56.916 1758.25 54.333 1758.25 51.135C1758.25 47.937 1760.83 45.354 1764.03 45.354C1766.25 45.354 1768.17 46.625 1769.16 48.47V41.746C1767.64 40.926 1765.88 40.434 1764.03 40.434C1758.13 40.434 1753.33 45.231 1753.33 51.135C1753.33 57.039 1758.13 61.836 1764.03 61.836ZM1764.03 56.26C1766.9 56.26 1769.16 53.964 1769.16 51.135C1769.16 48.306 1766.9 46.01 1764.03 46.01C1761.2 46.01 1758.91 48.306 1758.91 51.135C1758.91 53.964 1761.2 56.26 1764.03 56.26ZM1781.62 40.926H1778.38V40.27H1781.62V33.3H1782.28V40.27H1787.2V33.3H1787.85V40.27H1791.09V40.926H1787.85V45.846H1791.09V46.502H1787.85V62H1787.2V46.502H1782.28V62H1781.62V46.502H1778.38V45.846H1781.62V40.926ZM1787.2 40.926H1782.28V45.846H1787.2V40.926ZM1792.43 51.135C1792.43 44.862 1797.52 39.778 1803.79 39.778C1808.79 39.778 1813.02 42.976 1814.53 47.486L1801.21 55.563C1801.99 56.014 1802.85 56.26 1803.79 56.26C1805.84 56.26 1807.6 55.03 1808.42 53.308L1809.04 53.595C1808.14 55.563 1806.13 56.916 1803.79 56.916C1802.6 56.916 1801.5 56.547 1800.59 55.932L1796.17 58.638C1798.09 60.606 1800.8 61.836 1803.79 61.836C1808.06 61.836 1811.79 59.294 1813.51 55.645L1814.08 55.932C1812.28 59.827 1808.34 62.492 1803.79 62.492C1797.52 62.492 1792.43 57.408 1792.43 51.135ZM1793.09 51.135C1793.09 52.324 1793.3 53.431 1793.62 54.497L1798.05 51.791C1798.01 51.586 1798.01 51.34 1798.01 51.135C1798.01 47.937 1800.59 45.354 1803.79 45.354C1804.98 45.354 1806.13 45.723 1807.03 46.338L1811.42 43.673C1809.49 41.664 1806.78 40.434 1803.79 40.434C1797.89 40.434 1793.09 45.231 1793.09 51.135ZM1793.87 55.112C1794.32 56.219 1794.94 57.244 1795.71 58.146L1800.02 55.522C1799.12 54.743 1798.46 53.677 1798.17 52.488L1793.87 55.112ZM1798.67 51.135V51.422L1806.42 46.707C1805.64 46.256 1804.73 46.01 1803.79 46.01C1800.96 46.01 1798.67 48.306 1798.67 51.135ZM1798.75 52.16C1798.99 53.349 1799.69 54.415 1800.63 55.153L1808.83 50.151C1808.59 48.962 1807.93 47.896 1806.99 47.117L1798.75 52.16ZM1807.6 46.789C1808.51 47.568 1809.16 48.593 1809.41 49.823L1813.75 47.158C1813.3 46.051 1812.65 45.067 1811.91 44.165L1807.6 46.789Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_442_862">
-<rect width="1940" height="343" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/frontend/src/assets/react.svg b/frontend/src/assets/react.svg
deleted file mode 100644
index 6c87de9bb3..0000000000
--- a/frontend/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/technigo-logo.svg b/frontend/src/assets/technigo-logo.svg
deleted file mode 100644
index 3f0da3e572..0000000000
--- a/frontend/src/assets/technigo-logo.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg width="747" height="358" viewBox="0 0 747 358" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M680.871 277.565C680.871 278.037 680.871 278.509 680.871 278.509C680.871 294.544 664.598 307.278 644.107 307.278C623.615 307.278 607.342 294.544 607.342 278.509C607.342 278.037 607.342 277.565 607.342 277.565H541.648C542.251 321.427 587.453 356.8 644.107 356.8C700.157 356.8 745.962 321.427 746.565 277.565H680.871Z" fill="#FF4575"/>
-<path d="M746.565 276.64C745.947 277.127 745.947 277.127 746.565 276.64C745.947 277.127 746.565 277.127 746.565 276.64Z" fill="#FF0055"/>
-<path d="M745.963 277.1C745.361 232.767 700.159 197.394 643.505 197.394C587.454 197.394 541.65 232.767 541.047 276.628C541.047 276.628 541.047 276.628 541.047 277.1C541.047 277.1 541.047 277.1 541.047 277.572H607.343C607.946 262.479 624.219 250.217 644.108 250.217C663.997 250.217 679.667 262.479 680.872 277.572L745.963 277.1C746.566 277.1 745.963 277.1 745.963 277.1Z" fill="#FFC700"/>
-<path d="M520.547 277.097C520.547 320.959 475.345 356.803 418.691 356.803C362.641 356.803 316.836 320.959 316.836 277.097C316.836 233.235 362.038 197.391 418.691 197.391C446.415 197.391 471.729 206.352 490.412 220.501C490.412 220.501 369.27 278.04 370.476 277.097H520.547Z" fill="#0025FF"/>
-<path d="M228.848 197.394H298.76V356.806H228.848V197.394Z" fill="#FFAEC1"/>
-<path d="M251.147 351.144C249.339 351.144 248.134 350.672 246.326 350.672H242.107C237.285 350.672 233.067 351.144 228.848 352.087V356.803H271.036C267.42 355.388 263.804 353.973 260.188 353.03C257.174 352.087 254.161 351.615 251.147 351.144Z" fill="white"/>
-<path d="M281.888 339.362C276.463 336.061 270.436 333.231 263.807 331.345C261.999 330.873 260.191 330.401 258.985 329.93C257.177 329.458 255.369 328.987 253.561 328.987C251.753 328.515 249.945 328.515 248.137 328.515H242.712C237.891 328.515 233.672 328.987 229.453 329.93V338.419C233.672 337.476 238.494 336.533 242.712 336.533C254.766 336.533 265.615 340.777 275.258 346.909C280.08 349.738 284.298 353.04 288.517 356.813C288.517 357.284 289.12 357.284 289.12 357.756H298.763V352.097C293.339 346.909 287.915 343.136 281.888 339.362Z" fill="white"/>
-<path d="M298.158 328.033C293.336 324.26 287.912 320.487 282.488 316.714C276.461 313.412 270.434 310.111 263.201 307.753L257.777 306.338C255.969 305.866 253.558 305.866 251.75 305.394C249.339 304.923 247.531 304.923 245.723 304.923H243.312C242.71 304.923 243.312 304.923 242.107 304.923H241.504H240.299C238.491 304.923 236.08 304.923 234.272 305.394L228.848 306.338V314.356C229.45 314.356 230.053 313.884 230.656 313.884L235.477 312.941C237.285 312.469 238.491 312.941 240.299 312.469H241.504H242.107C241.504 312.469 242.107 312.469 242.107 312.469H244.518C246.326 312.469 248.134 312.469 249.339 312.941C250.545 313.412 252.353 313.412 253.558 313.884L257.777 315.299C263.804 317.185 269.228 320.015 274.05 323.317C282.488 328.976 290.323 335.579 296.952 342.182L298.158 328.033Z" fill="white"/>
-<path d="M282.49 293.598C276.463 290.296 270.436 286.995 263.204 284.637L257.78 283.222C255.972 282.75 253.561 282.75 251.753 282.279C249.945 281.807 248.137 281.807 246.329 281.807H243.918C243.315 281.807 243.918 281.807 242.712 281.807H242.11H240.904C239.096 281.807 236.685 281.807 234.877 282.279L229.453 283.222V290.768C230.056 290.768 230.659 290.296 231.261 290.296L236.083 289.353C237.891 288.881 239.096 289.353 240.904 288.881H242.11H242.712C242.11 288.881 242.712 288.881 243.315 288.881H245.726C247.534 288.881 249.342 288.881 250.547 289.353C251.753 289.825 253.561 289.825 254.766 290.296L259.588 291.711C265.615 293.598 271.039 296.427 276.463 299.729C284.901 305.389 292.133 311.52 299.366 318.123V304.917C293.339 301.144 287.915 296.899 282.49 293.598Z" fill="white"/>
-<path d="M281.885 270.033C275.858 266.732 269.831 263.431 262.599 261.072L257.174 259.658C255.366 259.186 252.955 259.186 251.147 258.714C249.339 258.243 247.531 258.243 245.723 258.243H243.312C242.71 258.243 243.312 258.243 242.107 258.243H241.504H240.299C238.491 258.243 236.08 258.243 234.272 258.714L228.848 259.658V266.732C229.45 266.732 230.053 266.26 230.656 266.26L235.477 265.317C237.285 264.846 238.491 265.317 240.299 264.846H241.504H242.107C241.504 264.846 242.107 264.846 242.71 264.846H245.12C246.929 264.846 248.737 264.846 249.942 265.317C251.147 265.789 252.955 265.789 254.161 266.26L258.982 267.675C265.009 269.562 270.434 272.392 275.858 275.693C284.296 280.881 291.528 287.484 298.158 294.087V281.824C293.336 278.051 287.912 273.807 281.885 270.033Z" fill="white"/>
-<path d="M281.902 256.346C287.929 260.591 293.354 265.779 298.778 270.967V259.176C297.572 258.232 296.367 257.289 295.162 256.346H281.902Z" fill="white"/>
-<path d="M134.211 274.75V356.814H203.521V274.279L150.484 274.75H134.211Z" fill="#0025FF"/>
-<path d="M102.27 197.394C46.2189 197.394 0.414062 231.352 0.414062 273.799V356.806H70.3267V274.742H134.815H151.088H204.125C203.522 231.823 158.32 197.394 102.27 197.394Z" fill="#FFC700"/>
-<path d="M676.613 0.718262H746.526V160.13H676.613V0.718262Z" fill="#FF4575"/>
-<path d="M618.163 0.718262H548.25V80.4242H618.163V0.718262Z" fill="#FFAEC1"/>
-<path d="M548.25 84.1993V160.132H618.163V84.1993V80.4263H548.25V84.1993Z" fill="#0025FF"/>
-<path d="M630.806 55.4302C626.587 57.7883 621.766 60.1465 617.547 62.5047V71.4657C627.19 65.8061 636.833 60.6181 646.476 55.4302H630.806Z" fill="#0018A4"/>
-<path d="M626.587 84.1926C638.038 76.1749 650.695 69.1004 663.352 62.0259L672.995 56.8379L676.008 54.9514H660.941C647.079 62.0259 633.217 69.572 619.958 78.0614C619.355 78.5331 618.15 79.0047 617.547 79.9479V90.7955C620.56 88.909 623.574 86.5508 626.587 84.1926Z" fill="#0018A4"/>
-<path d="M640.459 96.9338C645.281 92.2175 650.102 87.9728 656.129 84.1998C667.58 76.182 680.237 69.1075 692.894 62.033C697.113 59.6749 701.331 57.7883 705.55 55.4302H691.688C677.224 62.5047 663.362 70.0508 650.102 79.0118C644.075 83.2565 638.048 87.5012 633.227 92.2175C627.803 96.9338 623.584 102.593 620.57 108.725H631.419C633.83 104.48 636.843 100.707 640.459 96.9338Z" fill="#0018A4"/>
-<path d="M686.269 84.1953C697.118 76.1775 709.775 68.6314 722.431 61.0852C726.65 58.7271 730.266 56.3689 734.485 54.0107L721.226 54.4824C707.364 62.0285 693.502 70.0463 680.845 79.0073C674.818 83.252 669.394 87.9683 664.572 92.6846C659.751 97.401 655.532 103.061 653.121 109.192L662.764 108.72C665.175 104.475 668.188 100.231 671.805 96.4577C675.421 92.6846 680.845 88.4399 686.269 84.1953Z" fill="#0018A4"/>
-<path d="M715.799 83.7243C725.442 77.1215 735.688 70.9902 746.536 65.3306V58.7278C734.483 65.3306 721.826 71.9335 710.375 79.4796C704.348 83.7243 698.321 87.969 693.499 92.6853C688.678 97.4017 683.856 103.061 681.445 108.721H690.486C695.91 99.2882 705.553 91.2704 715.799 83.7243Z" fill="#0018A4"/>
-<path d="M745.329 83.7253C745.932 83.7253 745.932 83.2536 746.534 83.2536V75.7075C744.726 77.1224 742.316 78.0657 740.508 79.4806C734.481 83.7253 728.454 87.97 723.632 92.6863C718.81 97.4026 714.592 102.591 711.578 108.722H720.016C722.427 104.477 726.043 100.232 729.659 96.4594C734.481 91.743 739.905 87.97 745.329 83.7253Z" fill="#0018A4"/>
-<path d="M746.54 100.702C744.732 103.06 742.924 105.89 741.719 108.72H746.54V100.702Z" fill="#0018A4"/>
-<path d="M527.184 160.13C471.133 160.13 425.328 124.286 425.328 80.4242C425.328 36.5623 470.53 0.718262 527.184 0.718262V160.13Z" fill="#FFD338"/>
-<path d="M311.406 1.18401C339.733 1.18401 365.046 10.145 383.127 24.294C364.444 9.67339 339.13 0.712373 311.406 1.18401C254.753 1.18401 209.551 36.5565 209.551 80.8899C209.551 36.5565 254.753 1.18401 311.406 1.18401Z" fill="#D1A537"/>
-<path d="M310.801 160.598C338.525 160.598 363.838 151.637 382.522 137.488C382.522 137.488 261.983 80.4209 262.585 80.8926H208.945C209.548 124.754 254.75 160.598 310.801 160.598Z" fill="#FF4575"/>
-<path d="M413.261 80.4162C413.261 58.2494 401.809 38.4409 383.729 24.2919C365.648 10.1429 339.732 1.18188 312.008 1.18188C255.957 1.18188 210.152 36.5543 210.152 80.8878H263.792L413.261 80.4162Z" fill="#FFAEC1"/>
-<path d="M93.8398 1.19873H163.753V160.611H93.8398V1.19873Z" fill="#FF4575"/>
-<path d="M195.687 30.4375V85.1469H0.414062V30.4375H195.687Z" fill="#0025FF"/>
-</svg>
diff --git a/frontend/src/components/BackendStatusIndicator.tsx b/frontend/src/components/BackendStatusIndicator.tsx
new file mode 100644
index 0000000000..11576ac373
--- /dev/null
+++ b/frontend/src/components/BackendStatusIndicator.tsx
@@ -0,0 +1,112 @@
+import { useEffect } from 'react'
+import styled, { keyframes } from 'styled-components'
+import { useBackendStatusStore } from '../store/backendStatusStore'
+import { Loader } from '../global-components/loader'
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`
+
+const StatusContainer = styled.div<{ $isError?: boolean }>`
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 10000;
+  background: ${props => props.$isError ? '#fee' : '#fff'};
+  border: 2px solid ${props => props.$isError ? '#f44' : '#ddd'};
+  border-radius: 12px;
+  padding: 16px 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 350px;
+  animation: ${fadeIn} 0.3s ease-out;
+`
+
+const StatusText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
+
+const StatusTitle = styled.div<{ $isError?: boolean }>`
+  font-weight: 600;
+  font-size: 14px;
+  color: ${props => props.$isError ? '#c00' : '#333'};
+`
+
+const StatusMessage = styled.div`
+  font-size: 12px;
+  color: #666;
+`
+
+const LoaderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+
+  /* Scale down the loader to fit */
+  > div {
+    transform: scale(0.3);
+  }
+`
+
+const ErrorIcon = styled.div`
+  font-size: 24px;
+  color: #f44;
+`
+
+interface BackendStatusIndicatorProps {
+  autoCheck?: boolean
+}
+
+export const BackendStatusIndicator = ({ autoCheck = true }: BackendStatusIndicatorProps) => {
+  const { status, isSpinningUp, error, checkBackendHealth } = useBackendStatusStore()
+
+  useEffect(() => {
+    if (autoCheck) {
+      checkBackendHealth()
+    }
+  }, [autoCheck, checkBackendHealth])
+
+  // Don't show anything if backend is ready or idle
+  if (status === 'ready' || status === 'idle') {
+    return null
+  }
+
+  const isError = status === 'error'
+
+  return (
+    <StatusContainer $isError={isError}>
+      {isError ? (
+        <ErrorIcon>⚠️</ErrorIcon>
+      ) : (
+        <LoaderWrapper>
+          <Loader />
+        </LoaderWrapper>
+      )}
+      <StatusText>
+        <StatusTitle $isError={isError}>
+          {isError ? 'Connection Error' : isSpinningUp ? 'Backend Waking Up' : 'Connecting...'}
+        </StatusTitle>
+        <StatusMessage>
+          {isError
+            ? error || 'Unable to connect to backend'
+            : isSpinningUp
+              ? 'This may take up to 60 seconds...'
+              : 'Checking server status...'}
+        </StatusMessage>
+      </StatusText>
+    </StatusContainer>
+  )
+}
diff --git a/frontend/src/config/api.ts b/frontend/src/config/api.ts
new file mode 100644
index 0000000000..7ae8c5f857
--- /dev/null
+++ b/frontend/src/config/api.ts
@@ -0,0 +1 @@
+export const baseUrl = import.meta.env.VITE_API_BASE_URL || '';
\ No newline at end of file
diff --git a/frontend/src/data/comments.json b/frontend/src/data/comments.json
new file mode 100644
index 0000000000..7680c8c15c
--- /dev/null
+++ b/frontend/src/data/comments.json
@@ -0,0 +1,62 @@
+[
+  {
+    "id": 1,
+    "message": "What is the difference between 'let', 'const', and 'var' in JavaScript, and when should each be used?",
+    "user": "Alice",
+    "dateCreated": "2025-06-17T10:15:00Z"
+  },
+  {
+    "id": 2,
+    "message": "How does JavaScript handle asynchronous operations, and what are the advantages of using promises over callbacks?",
+    "user": "Brian",
+    "dateCreated": "2025-06-17T10:16:00Z"
+  },
+  {
+    "id": 3,
+    "message": "Can you explain how closures work in JavaScript with a real-world example to demonstrate their usefulness?",
+    "user": "Carmen",
+    "dateCreated": "2025-06-17T10:17:00Z"
+  },
+  {
+    "id": 4,
+    "message": "Why is 'this' keyword context-dependent in JavaScript and how can arrow functions help avoid confusion with it?",
+    "user": "Daniel",
+    "dateCreated": "2025-06-17T10:18:00Z"
+  },
+  {
+    "id": 5,
+    "message": "What is event bubbling in JavaScript and how can you stop it from propagating to parent elements?",
+    "user": "Eva",
+    "dateCreated": "2025-06-17T10:19:00Z"
+  },
+  {
+    "id": 6,
+    "message": "How do JavaScript modules work and what is the difference between CommonJS and ES6 module syntax?",
+    "user": "Frank",
+    "dateCreated": "2025-06-17T10:20:00Z"
+  },
+  {
+    "id": 7,
+    "message": "What are JavaScript prototypes and how do they enable inheritance between objects in JavaScript?",
+    "user": "Grace",
+    "dateCreated": "2025-06-17T10:21:00Z"
+  },
+  {
+    "id": 8,
+    "message": "In JavaScript, how does the event loop handle asynchronous operations like setTimeout or API calls?",
+    "user": "Henry",
+    "dateCreated": "2025-06-17T10:22:00Z"
+  },
+  {
+    "id": 9,
+    "message": "What is the purpose of the 'use strict' directive in JavaScript and when should it be applied?",
+    "user": "Isla",
+    "dateCreated": "2025-06-17T10:23:00Z"
+  },
+  {
+    "id": 10,
+    "message": "How does JavaScript handle equality comparisons, and what is the difference between '==' and '===' operators?",
+    "user": "Jake",
+    "dateCreated": "2025-06-17T10:24:00Z"
+  }
+]
\ No newline at end of file
diff --git a/frontend/src/global-components/CarouselFix.ts b/frontend/src/global-components/CarouselFix.ts
new file mode 100644
index 0000000000..a3f4e580f6
--- /dev/null
+++ b/frontend/src/global-components/CarouselFix.ts
@@ -0,0 +1,14 @@
+import { createGlobalStyle } from "styled-components"
+
+export const CarouselFix = createGlobalStyle`
+  /* Target the individual slide elements */
+  .carousel .slide {
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  /* Optionally remove outline if focused */
+  .carousel .slide:focus {
+    outline: none;
+  }
+`
diff --git a/frontend/src/global-components/ComfirmBox.tsx b/frontend/src/global-components/ComfirmBox.tsx
new file mode 100644
index 0000000000..3db8b11e96
--- /dev/null
+++ b/frontend/src/global-components/ComfirmBox.tsx
@@ -0,0 +1,84 @@
+import { MediaQueries } from "../themes/mediaQueries"
+import styled from "styled-components"
+
+// Props for the ConfirmBox
+type ConfirmBoxProps = {
+  message?: string
+  onConfirm: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onCancel: () => void
+}
+
+export const ConfirmBox = ({
+  message,
+  onCancel,
+  onConfirm,
+}: ConfirmBoxProps) => {
+  return (
+    <FormContainer>
+      <h3>{message}</h3>
+      <Wrapper>
+        <CancelBtn onClick={onCancel}>Cancel</CancelBtn>
+        <RemoveBtn onClick={onConfirm}>Remove</RemoveBtn>
+      </Wrapper>
+    </FormContainer>
+  )
+}
+
+// Styles
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 20px;
+  width: 92vw;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  z-index: 200;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 500px;
+  }
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  width: 100%;
+  column-gap: 10px;
+`
+
+const CancelBtn = styled.button`
+  height: 40px;
+  width: 50%;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 10px;
+  border: none;
+  transition: ease 0.3s;
+  color: white;
+
+  &:hover {
+    transform: scale(0.96);
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+  }
+`
+
+const RemoveBtn = styled.button`
+  height: 40px;
+  width: 50%;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 10px;
+  border: none;
+  transition: ease 0.3s;
+  background-color: #a61818;
+  color: white;
+
+  &:hover {
+    transform: scale(0.96);
+    background-color: #c51d1d;
+  }
+`
diff --git a/frontend/src/global-components/PageNotFound.tsx b/frontend/src/global-components/PageNotFound.tsx
new file mode 100644
index 0000000000..53c2b1abd5
--- /dev/null
+++ b/frontend/src/global-components/PageNotFound.tsx
@@ -0,0 +1,63 @@
+import styled from "styled-components"
+import { Link } from "react-router-dom"
+
+export const PageNotFound = () => {
+  return (
+    <Container>
+      <Content>
+        <Icon>👻</Icon>
+        <Title>Page Not Found</Title>
+        <Message>
+          The page you're looking for doesn't exist or has been moved.
+        </Message>
+        <HomeButton to="/">Go Home</HomeButton>
+      </Content>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  min-height: 100vh;
+  background: #f9fafb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+`
+
+const Content = styled.div`
+  text-align: center;
+  max-width: 400px;
+`
+
+const Icon = styled.div`
+  font-size: 4rem;
+  color: #9ca3af;
+  margin-bottom: 1rem;
+`
+
+const Title = styled.h1`
+  font-size: 2.5rem;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+`
+
+const Message = styled.p`
+  color: #6b7280;
+  margin-bottom: 1.5rem;
+`
+
+const HomeButton = styled(Link)`
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  background-color: #1f2937;
+  color: #fff;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: #374151;
+  }
+`
diff --git a/frontend/src/global-components/Section.tsx b/frontend/src/global-components/Section.tsx
new file mode 100644
index 0000000000..a30c8b0ff4
--- /dev/null
+++ b/frontend/src/global-components/Section.tsx
@@ -0,0 +1,46 @@
+// Section.tsx
+import styled from "styled-components"
+import { MediaQueries } from "../themes/mediaQueries"
+
+interface SectionProps {
+  $secondarySection?: boolean
+  $thirdSection?: boolean
+  children?: React.ReactNode
+}
+
+export const Section = styled.section<SectionProps>`
+  background-color: ${(props) => {
+    if (props.$thirdSection) return "#141A20"
+    if (props.$secondarySection) return props.theme.colors.lightGray
+    return props.theme.colors.background
+  }};
+
+  color: ${(props) => {
+    if (props.$thirdSection) return "white"
+    if (props.$secondarySection) return "white"
+    return props.theme.colors.text
+  }};
+
+  width: 100%;
+  padding: 34px 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 84px 0;
+  }
+`
+
+export const Container = styled.div`
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 24px;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 1300px;
+    padding: 0 40px;
+  }
+
+  @media ${MediaQueries.widescreen} {
+    max-width: 1500px;
+    padding: 0 40px;
+  }
+`
diff --git a/frontend/src/global-components/StyledForm.tsx b/frontend/src/global-components/StyledForm.tsx
new file mode 100644
index 0000000000..4baea73d49
--- /dev/null
+++ b/frontend/src/global-components/StyledForm.tsx
@@ -0,0 +1,255 @@
+import styled from "styled-components"
+import { Link } from "react-router-dom"
+
+//#region ----- STYLED FORM COMPONENTS -----
+
+// Form wrapper - use this to wrap your entire form
+export const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+`
+
+// Form group - wraps each field (label + input)
+export const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+  width: 100%;
+
+  label {
+    margin-bottom: 5px;
+    font-weight: 500;
+  }
+
+  /* Dynamic required/optional labels using CSS */
+  label:has(+ input:required)::after {
+    content: " *";
+    color: red;
+  }
+
+  label:has(+ input:optional)::after {
+    content: " (optional)";
+    color: gray;
+    font-size: 0.9em;
+  }
+
+  label:has(+ div input[type="radio"]:required)::after {
+    content: " *";
+    color: red;
+  }
+
+  input,
+  textarea {
+    height: 40px;
+    width: 100%;
+    background-color: #f6f6f6;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    box-sizing: border-box;
+    font-family: inherit;
+  }
+
+  textarea {
+    height: auto;
+    resize: vertical;
+    min-height: 80px;
+  }
+`
+
+// Styled label
+export const StyledLabel = styled.label`
+  margin-bottom: 5px;
+  font-weight: 500;
+`
+
+// Styled input
+export const StyledInput = styled.input`
+  height: 40px;
+  width: 100%;
+  background-color: #f6f6f6;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  font-family: inherit;
+`
+
+// Styled textarea
+export const StyledTextarea = styled.textarea`
+  height: auto;
+  width: 100%;
+  background-color: #f6f6f6;
+  border: none;
+  border-radius: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  font-family: inherit;
+  resize: vertical;
+  min-height: 80px;
+`
+
+// Password wrapper for password fields with toggle
+export const PasswordWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  input {
+    flex: 1;
+    width: 100%;
+  }
+`
+
+// Password toggle button
+export const PasswordToggleButton = styled.button`
+  position: absolute;
+  right: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+`
+
+// Radio button group
+export const RadioGroup = styled.div`
+  display: flex;
+  gap: 16px;
+  justify-content: flex-start;
+`
+
+// Radio button label
+export const RadioLabel = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+
+  input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  span {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #999;
+    border-radius: 50%;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  input[type="radio"]:checked + span::before {
+    content: "";
+    display: block;
+    width: 8px;
+    height: 8px;
+    background-color: ${({ theme }) => theme.colors.primary};
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  input[type="radio"]:focus + span {
+    box-shadow: 0 0 0 3px rgba(100, 150, 250, 0.6);
+  }
+`
+
+// Button wrapper
+export const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+`
+
+// Styled button
+export const StyledButton = styled.button`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 50px;
+  margin: 40px 0;
+  text-align: center;
+  transition: ease 0.3s;
+  font-family: inherit;
+
+  &:hover:not(:disabled) {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`
+
+// Error message
+export const ErrorMessage = styled.div`
+  color: red;
+  margin-bottom: 10px;
+  text-align: center;
+  font-weight: 500;
+  width: 100%;
+`
+
+// Styled link
+export const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration: none;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.textHover};
+    transform: scale(0.95);
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.textActive};
+  }
+`
+
+// Link container for multiple links
+export const LinkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+`
+
+// Image preview
+export const PreviewImage = styled.img`
+  margin-top: 10px;
+  border-radius: 10px;
+  height: 80px;
+`
+
+//#endregion
diff --git a/frontend/src/global-components/buttons.tsx b/frontend/src/global-components/buttons.tsx
new file mode 100644
index 0000000000..34f35335d3
--- /dev/null
+++ b/frontend/src/global-components/buttons.tsx
@@ -0,0 +1,63 @@
+import { Link } from "react-router"
+import styled from "styled-components"
+import { MediaQueries } from "../themes/mediaQueries"
+
+interface MainButtonProps {
+  text: string
+  url?: string
+}
+
+// MainButton component
+export const MainButton: React.FC<MainButtonProps> = ({ text, url }) => {
+  const button = <MainStyledButton>{text}</MainStyledButton>
+  return url ? <Link to={url}>{button}</Link> : button
+}
+
+// SmallButton component
+export const SmallButton: React.FC<MainButtonProps> = ({ text, url }) => {
+  const button = <SmallStyledButton>{text}</SmallStyledButton>
+  return url ? <Link to={url}>{button}</Link> : button
+}
+
+// Styled components
+const MainStyledButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  padding: 22px 35px;
+  border-radius: 35px;
+  font-size: 1rem;
+  border: none;
+  transition: all ease 0.3s;
+  box-shadow: 0 4px 15px rgba(22, 106, 240, 0.3);
+  position: relative;
+  overflow: hidden;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 1.2rem;
+  }
+
+  &:hover {
+    scale: 0.95;
+    box-shadow: 0 6px 20px rgba(22, 106, 240, 0.4);
+    background: ${({ theme }) => theme.colors.primaryHover};
+  }
+`
+
+const SmallStyledButton = styled.button`
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  padding: 10px 15px;
+  border-radius: 35px;
+  font-size: 0.9rem;
+  border: none;
+  transition: ease 0.3s;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 1rem;
+  }
+
+  &:hover {
+    scale: 0.95;
+    background-color: ${({ theme }) => theme.colors.primary};
+  }
+`
diff --git a/frontend/src/global-components/checkbox.ts b/frontend/src/global-components/checkbox.ts
new file mode 100644
index 0000000000..383a0df0ec
--- /dev/null
+++ b/frontend/src/global-components/checkbox.ts
@@ -0,0 +1,40 @@
+import styled from "styled-components"
+
+export const CircleCheckboxLabel = styled.label`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+`
+
+export const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+  display: none;
+`
+
+export const StyledCircle = styled.span<{ $checked: boolean }>`
+  width: 20px;
+  height: 20px;
+  border: 2px solid #333;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+
+  background: ${({ $checked }) => ($checked ? "#607491ff;" : "transparent")};
+  border-color: ${({ $checked }) => ($checked ? "#607491ff" : "#333")};
+
+  &::after {
+    content: "";
+    display: ${({ $checked }) => ($checked ? "block" : "none")};
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: translate(-50%, -60%) rotate(45deg);
+  }
+`
diff --git a/frontend/src/global-components/loader.tsx b/frontend/src/global-components/loader.tsx
new file mode 100644
index 0000000000..86811bfcea
--- /dev/null
+++ b/frontend/src/global-components/loader.tsx
@@ -0,0 +1,38 @@
+import styled, { keyframes } from "styled-components"
+
+export const Loader = () => {
+  return <LoaderWheel />
+}
+
+const rotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const prixClipFix = keyframes`
+  0%   { clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0); }
+  25%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
+  50%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
+  75%  { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
+  100% { clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
+`
+
+const LoaderWheel = styled.span`
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  position: relative;
+  animation: ${rotate} 1s linear infinite;
+  display: inline-block;
+
+  &::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 5px solid #0f77e6;
+    animation: ${prixClipFix} 2s linear infinite;
+  }
+`
diff --git a/frontend/src/global-components/navigation/Navigation.tsx b/frontend/src/global-components/navigation/Navigation.tsx
new file mode 100644
index 0000000000..a01d99566a
--- /dev/null
+++ b/frontend/src/global-components/navigation/Navigation.tsx
@@ -0,0 +1,103 @@
+import { useState, useEffect } from "react"
+import { Link, useNavigate } from "react-router-dom"
+import styled from "styled-components"
+import { DesktopNavigation } from "./components/DesktopNavigation"
+import { MobileNavigation } from "./components/MobileNavigation"
+import { useUserStore } from "../../store/userStore"
+import { useThemeStore } from "../../store/themeStore"
+import { useWorkspaceStore } from "../../store/workspaceStore"
+import { MediaQueries } from "../../themes/mediaQueries"
+
+export const Navigation = () => {
+  const user = useUserStore((state) => state.user)
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn)
+  const logout = useUserStore((state) => state.logout)
+  const navigate = useNavigate()
+  const toggleTheme = useThemeStore((state) => state.toggleTheme)
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+  const { fetchUserWorkspaces } = useWorkspaceStore()
+
+  // Initialize workspace on mount for logged-in users
+  useEffect(() => {
+    if (isLoggedIn) {
+      fetchUserWorkspaces()
+    }
+  }, [isLoggedIn, fetchUserWorkspaces])
+
+  const handleLogout = () => {
+    logout()
+    navigate("/")
+    setIsMenuOpen(false)
+  }
+
+  const toggleMenu = () => setIsMenuOpen((prev) => !prev)
+
+  return (
+    <NavHeader role="banner">
+      <LogoLink
+        to="/"
+        aria-label="Classync - Return to homepage"
+      >
+        <LogoTitle>Classync</LogoTitle>
+      </LogoLink>
+
+      <DesktopNavigation
+        user={user}
+        isLoggedIn={isLoggedIn}
+        toggleTheme={toggleTheme}
+        handleLogout={handleLogout}
+      />
+
+      <MobileNavigation
+        user={user}
+        isLoggedIn={isLoggedIn}
+        isMenuOpen={isMenuOpen}
+        toggleMenu={toggleMenu}
+        toggleTheme={toggleTheme}
+        handleLogout={handleLogout}
+      />
+    </NavHeader>
+  )
+}
+
+const NavHeader = styled.header`
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 30px;
+  position: relative;
+  z-index: 1000;
+  height: 8vh;
+
+  @media ${MediaQueries.biggerSizes} {
+    height: 60px;
+  }
+`
+
+const LogoLink = styled(Link)`
+  display: flex;
+  column-gap: 7px;
+  color: white;
+  text-decoration: none;
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  span {
+    font-size: 12px;
+    transform: translateY(2px);
+  }
+
+  &:hover {
+    transform: scale(0.94);
+  }
+`
+
+const LogoTitle = styled.h1`
+  font-size: 1.5rem;
+  margin: 0;
+  font-weight: bold;
+`
diff --git a/frontend/src/global-components/navigation/components/Burger.tsx b/frontend/src/global-components/navigation/components/Burger.tsx
new file mode 100644
index 0000000000..235cfb3209
--- /dev/null
+++ b/frontend/src/global-components/navigation/components/Burger.tsx
@@ -0,0 +1,67 @@
+import styled from "styled-components"
+
+interface HamburgerMenuProps {
+  isOpen: boolean
+  onToggle: () => void
+}
+
+export const HamburgerMenu = ({ isOpen, onToggle }: HamburgerMenuProps) => {
+  return (
+    <Hamburger
+      onClick={onToggle}
+      aria-label={isOpen ? "Close menu" : "Open menu"}
+      aria-expanded={isOpen}
+      role="button"
+    >
+      <Bar
+        open={isOpen}
+        $index={1}
+      />
+      <Bar
+        open={isOpen}
+        $index={2}
+      />
+      <Bar
+        open={isOpen}
+        $index={3}
+      />
+    </Hamburger>
+  )
+}
+
+interface BarProps {
+  open: boolean
+  $index: number
+}
+
+const Hamburger = styled.div`
+  width: 30px;
+  height: 22px;
+  position: relative;
+  cursor: pointer;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &:hover {
+    transform: scale(0.92);
+  }
+`
+
+const Bar = styled.span<BarProps>`
+  display: block;
+  width: 100%;
+  height: 3px;
+  background-color: white;
+  border-radius: 2px;
+  transition: 0.3s ease;
+  transform-origin: ${({ $index }) =>
+    $index === 1 ? "top left" : $index === 3 ? "bottom left" : "center"};
+
+  ${({ open, $index }) => {
+    if ($index === 1) return `transform: ${open ? "rotate(45deg)" : "none"};`
+    if ($index === 2) return `opacity: ${open ? 0 : 1};`
+    if ($index === 3) return `transform: ${open ? "rotate(-45deg)" : "none"};`
+  }}
+`
diff --git a/frontend/src/global-components/navigation/components/DesktopNavigation.tsx b/frontend/src/global-components/navigation/components/DesktopNavigation.tsx
new file mode 100644
index 0000000000..24020ab44d
--- /dev/null
+++ b/frontend/src/global-components/navigation/components/DesktopNavigation.tsx
@@ -0,0 +1,243 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { Link, useLocation } from "react-router-dom"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { WorkspaceSelector } from "./WorkspaceSelector"
+
+interface User {
+  role?: string
+  name?: string
+  profileImage?: string
+}
+
+interface DesktopProps {
+  user: User | null
+  isLoggedIn: boolean
+  toggleTheme: () => void
+  handleLogout: () => void
+}
+
+export const DesktopNavigation = ({
+  user,
+  isLoggedIn,
+  toggleTheme,
+  handleLogout,
+}: DesktopProps) => {
+  const location = useLocation()
+  const [showWorkspaceSelector, setShowWorkspaceSelector] = useState(false)
+
+  return (
+    <DesktopNav
+      aria-label="Desktop Main Navigation"
+      role="navigation"
+    >
+      <ThemeToggleButton
+        onClick={toggleTheme}
+        aria-label="Toggle between light and dark theme"
+        aria-pressed={false}
+      >
+        Toggle Theme
+      </ThemeToggleButton>
+
+      <NavMenu
+        role="menubar"
+        aria-label="Main navigation menu"
+      >
+        {user?.role === "teacher" && (
+          <NavMenuItem role="none">
+            <NavLinkItem
+              to="/teachers"
+              role="menuitem"
+              aria-current={location.pathname === "/teachers" ? "page" : undefined}
+              aria-label="Access teachers dashboard and tools"
+            >
+              Teachers Dashboard
+            </NavLinkItem>
+          </NavMenuItem>
+        )}
+
+        {isLoggedIn ? (
+          <>
+            <NavMenuItem role="none">
+              <NavLinkItem
+                to="/library"
+                role="menuitem"
+                aria-current={location.pathname === "/library" ? "page" : undefined}
+                aria-label="Access video library and courses"
+              >
+                Library
+              </NavLinkItem>
+            </NavMenuItem>
+
+            <UserProfileContainer>
+              <UserProfile
+                onClick={(e) => {
+                  e.preventDefault()
+                  setShowWorkspaceSelector(!showWorkspaceSelector)
+                }}
+              >
+                <img
+                  src={user?.profileImage}
+                  alt={`${user?.name || "User"} profile picture`}
+                  aria-hidden="true"
+                />
+              </UserProfile>
+              {showWorkspaceSelector && (
+                <WorkspaceSelector onClose={() => setShowWorkspaceSelector(false)} />
+              )}
+            </UserProfileContainer>
+
+            <NavMenuItem role="none">
+              <LogoutButton
+                onClick={handleLogout}
+                role="menuitem"
+                aria-label="Sign out of your account"
+              >
+                Logout
+              </LogoutButton>
+            </NavMenuItem>
+          </>
+        ) : (
+          <NavMenuItem role="none">
+            <NavLinkItem
+              to="/login"
+              role="menuitem"
+              aria-current={location.pathname === "/login" ? "page" : undefined}
+              aria-label="Sign in to your account"
+            >
+              Login
+            </NavLinkItem>
+          </NavMenuItem>
+        )}
+      </NavMenu>
+    </DesktopNav>
+  )
+}
+
+const DesktopNav = styled.nav`
+  display: none;
+  align-items: center;
+  gap: 20px;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: flex;
+  }
+`
+
+const NavMenu = styled.ul`
+  list-style: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 20px;
+  padding: 0;
+  margin: 0;
+`
+
+const NavMenuItem = styled.li``
+
+const NavLinkItem = styled(Link)`
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  transition: transform 0.3s ease;
+  padding: 8px 12px;
+  border-radius: 4px;
+
+  &:hover {
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 0 20px;
+  }
+`
+
+const LogoutButton = styled.button`
+  font-size: 18px;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(0.94);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+`
+
+const UserProfileContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`
+
+const UserProfile = styled.button`
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    transform: scale(0.92);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+const ThemeToggleButton = styled.button`
+  padding: 10px 16px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(0.97);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    background: transparent;
+    color: white;
+    font-weight: normal;
+    font-size: 18px;
+    padding: 0;
+  }
+`
diff --git a/frontend/src/global-components/navigation/components/MobileNavigation.tsx b/frontend/src/global-components/navigation/components/MobileNavigation.tsx
new file mode 100644
index 0000000000..50ff89cf24
--- /dev/null
+++ b/frontend/src/global-components/navigation/components/MobileNavigation.tsx
@@ -0,0 +1,313 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { Link, useLocation } from "react-router-dom"
+import { HamburgerMenu } from "./Burger"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { WorkspaceSelector } from "./WorkspaceSelector"
+
+interface User {
+  role?: string
+  name?: string
+  profileImage?: string
+}
+
+interface MobileProps {
+  user: User | null
+  isLoggedIn: boolean
+  isMenuOpen: boolean
+  toggleMenu: () => void
+  toggleTheme: () => void
+  handleLogout: () => void
+}
+
+export const MobileNavigation = ({
+  user,
+  isLoggedIn,
+  isMenuOpen,
+  toggleMenu,
+  toggleTheme,
+  handleLogout,
+}: MobileProps) => {
+  const location = useLocation()
+  const [showWorkspaceSelector, setShowWorkspaceSelector] = useState(false)
+
+  return (
+    <>
+      <MobileMenuToggle>
+        {isLoggedIn && (
+          <UserProfileContainer>
+            <UserProfile
+              onClick={(e) => {
+                e.preventDefault()
+                setShowWorkspaceSelector(!showWorkspaceSelector)
+              }}
+            >
+              <img
+                src={user?.profileImage}
+                alt={`${user?.name || "User"} profile picture`}
+                aria-hidden="true"
+              />
+            </UserProfile>
+            {showWorkspaceSelector && (
+              <WorkspaceSelector onClose={() => setShowWorkspaceSelector(false)} />
+            )}
+          </UserProfileContainer>
+        )}
+        <HamburgerMenu
+          isOpen={isMenuOpen}
+          onToggle={toggleMenu}
+          aria-expanded={isMenuOpen}
+          aria-label="Toggle mobile navigation menu"
+          aria-controls="mobile-nav-menu"
+        />
+      </MobileMenuToggle>
+
+      <MobileNav
+        $isOpen={isMenuOpen}
+        aria-label="Mobile Main Navigation"
+        role="navigation"
+        id="mobile-nav-menu"
+      >
+        <NavMenu
+          role="menu"
+          aria-label="Mobile navigation menu"
+        >
+          <NavMenuItem role="none">
+            <NavLinkItem
+              to="/"
+              onClick={toggleMenu}
+              role="menuitem"
+              aria-current={location.pathname === "/" ? "page" : undefined}
+              aria-label="Return to homepage"
+              tabIndex={isMenuOpen ? 0 : -1}
+            >
+              Home
+            </NavLinkItem>
+          </NavMenuItem>
+
+          {user?.role === "teacher" && (
+            <NavMenuItem role="none">
+              <NavLinkItem
+                to="/teachers"
+                onClick={toggleMenu}
+                role="menuitem"
+                aria-current={location.pathname === "/teachers" ? "page" : undefined}
+                aria-label="Access teachers dashboard and tools"
+                tabIndex={isMenuOpen ? 0 : -1}
+              >
+                Teacher Dashboard
+              </NavLinkItem>
+            </NavMenuItem>
+          )}
+
+          {isLoggedIn ? (
+            <>
+              <NavMenuItem role="none">
+                <NavLinkItem
+                  to="/library"
+                  onClick={toggleMenu}
+                  role="menuitem"
+                  aria-current={location.pathname === "/library" ? "page" : undefined}
+                  aria-label="Access video library and courses"
+                  tabIndex={isMenuOpen ? 0 : -1}
+                >
+                  Library
+                </NavLinkItem>
+              </NavMenuItem>
+              <NavMenuItem role="none">
+                <LogoutButton
+                  onClick={handleLogout}
+                  role="menuitem"
+                  aria-label="Sign out of your account"
+                  tabIndex={isMenuOpen ? 0 : -1}
+                >
+                  Logout
+                </LogoutButton>
+              </NavMenuItem>
+            </>
+          ) : (
+            <NavMenuItem role="none">
+              <NavLinkItem
+                to="/login"
+                onClick={toggleMenu}
+                role="menuitem"
+                aria-current={location.pathname === "/login" ? "page" : undefined}
+                aria-label="Sign in to your account"
+                tabIndex={isMenuOpen ? 0 : -1}
+              >
+                Login
+              </NavLinkItem>
+            </NavMenuItem>
+          )}
+
+          <NavMenuItem role="none">
+            <ThemeToggleButton
+              onClick={toggleTheme}
+              role="menuitem"
+              aria-label="Toggle between light and dark theme"
+              aria-pressed={false}
+              tabIndex={isMenuOpen ? 0 : -1}
+            >
+              Toggle Theme
+            </ThemeToggleButton>
+          </NavMenuItem>
+        </NavMenu>
+      </MobileNav>
+    </>
+  )
+}
+
+const MobileNav = styled.nav<{ $isOpen: boolean }>`
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 8dvh;
+  right: 0;
+  width: 100dvw;
+  height: 92dvh;
+  background-color: ${({ theme }) => theme.colors.primary};
+  padding-top: 50px;
+  padding-left: 30px;
+  align-items: flex-start;
+  z-index: 10;
+
+  transition:
+    transform 0.3s ease,
+    opacity 0.5s ease;
+  transform: ${({ $isOpen }) => ($isOpen ? "translateY(0)" : "translateY(-100%)")};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  pointer-events: ${({ $isOpen }) => ($isOpen ? "auto" : "none")};
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+  }
+`
+
+const MobileMenuToggle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 15px;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+  }
+`
+
+const NavMenu = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`
+
+const NavMenuItem = styled.li``
+
+const NavLinkItem = styled(Link)`
+  color: white;
+  text-decoration: none;
+  font-size: 1.2rem;
+  padding: 12px 16px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
+
+  &:hover {
+    transform: scale(0.98);
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const LogoutButton = styled.button`
+  font-size: 18px;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  padding: 12px 16px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    transform: scale(0.98);
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const UserProfileContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`
+
+const UserProfile = styled.button`
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  overflow: hidden;
+  transition: transform 0.3s ease;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:hover {
+    transform: scale(0.92);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+const ThemeToggleButton = styled.button`
+  padding: 12px 16px;
+  border: none;
+  border-radius: 6px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: white;
+  display: block;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
+    transform: scale(0.98);
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+
+  &:focus {
+    outline: 2px solid white;
+    outline-offset: 2px;
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+`
diff --git a/frontend/src/global-components/navigation/components/WorkspaceSelector.tsx b/frontend/src/global-components/navigation/components/WorkspaceSelector.tsx
new file mode 100644
index 0000000000..b1b555057f
--- /dev/null
+++ b/frontend/src/global-components/navigation/components/WorkspaceSelector.tsx
@@ -0,0 +1,254 @@
+import React, { useState, useEffect, useRef } from "react"
+import { Link } from "react-router-dom"
+import styled from "styled-components"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+import { spacing } from "../../../themes/spacing"
+import { MediaQueries } from "../../../themes/mediaQueries"
+
+interface WorkspaceSelectorProps {
+  onClose: () => void
+}
+
+export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({ onClose }) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const { workspaces, currentWorkspaceId, fetchUserWorkspaces, setCurrentWorkspace } =
+    useWorkspaceStore()
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const loadUserWorkspaces = async () => {
+      setIsLoading(true)
+      try {
+        await fetchUserWorkspaces()
+      } catch (error) {
+        console.error("Failed to load user workspaces:", error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadUserWorkspaces()
+  }, [fetchUserWorkspaces])
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => document.removeEventListener("mousedown", handleClickOutside)
+  }, [onClose])
+
+  const handleWorkspaceSelect = (workspaceId: string) => {
+    setCurrentWorkspace(workspaceId)
+    onClose()
+  }
+
+  return (
+    <DropdownContainer ref={dropdownRef}>
+      <DropdownHeader>
+        <DropdownTitle>Select Workspace</DropdownTitle>
+        <CloseButton
+          onClick={onClose}
+          aria-label="Close workspace selector"
+        >
+          ×
+        </CloseButton>
+      </DropdownHeader>
+
+      <DropdownContent>
+        {isLoading ? (
+          <LoadingText>Loading workspaces...</LoadingText>
+        ) : (
+          <>
+            {workspaces.length === 0 ? (
+              <EmptyText>No workspaces found</EmptyText>
+            ) : (
+              <WorkspaceList>
+                {workspaces.map((workspace) => (
+                  <WorkspaceItem
+                    key={workspace._id}
+                    $isActive={workspace._id === currentWorkspaceId}
+                    onClick={() => handleWorkspaceSelect(workspace._id)}
+                  >
+                    <WorkspaceName>{workspace.name}</WorkspaceName>
+                    {workspace._id === currentWorkspaceId && <CurrentIndicator>✓</CurrentIndicator>}
+                  </WorkspaceItem>
+                ))}
+              </WorkspaceList>
+            )}
+          </>
+        )}
+      </DropdownContent>
+
+      <DropdownFooter>
+        <DropdownLink to="/admin/users">
+          <ProfileIcon>👤</ProfileIcon>
+          User Profile
+        </DropdownLink>
+      </DropdownFooter>
+    </DropdownContainer>
+  )
+}
+
+const DropdownContainer = styled.div`
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: ${({ theme }) => theme.colors.background};
+  border: 1px solid ${({ theme }) => theme.colors.border};
+  border-radius: 10px;
+  box-shadow: 0 4px 20px ${({ theme }) => theme.colors.boxShadow};
+  min-width: 280px;
+  z-index: 1000;
+  margin-top: ${spacing.sm};
+  overflow: hidden;
+
+  @media ${MediaQueries.mobile} {
+    min-width: 260px;
+    right: -10px;
+  }
+`
+
+const DropdownHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${spacing.md};
+  border-bottom: 1px solid ${({ theme }) => theme.colors.border};
+`
+
+const DropdownTitle = styled.h3`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.mobile} {
+    font-size: 15px;
+  }
+`
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 20px;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  cursor: pointer;
+  padding: ${spacing.xs};
+  line-height: 1;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.text};
+    background-color: ${({ theme }) => theme.colors.backgroundHover};
+  }
+
+  &:focus {
+    outline: 2px solid ${({ theme }) => theme.colors.primary};
+    outline-offset: 2px;
+  }
+`
+
+const DropdownContent = styled.div`
+  padding: ${spacing.sm} 0;
+  max-height: 300px;
+  overflow-y: auto;
+`
+
+const LoadingText = styled.div`
+  padding: ${spacing.md};
+  text-align: center;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  font-size: 14px;
+`
+
+const EmptyText = styled.div`
+  padding: ${spacing.md};
+  text-align: center;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  font-size: 14px;
+`
+
+const WorkspaceList = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const WorkspaceItem = styled.div<{ $isActive: boolean }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${spacing.sm} ${spacing.md};
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: ${({ $isActive, theme }) =>
+    $isActive ? theme.colors.lightGray : "transparent"};
+  border-radius: 6px;
+  margin: 0 ${spacing.sm};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.lightGrayHover};
+    transform: scale(0.99);
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.lightGrayActive};
+    transform: scale(0.97);
+  }
+`
+
+const WorkspaceName = styled.span`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text};
+  font-weight: 500;
+`
+
+const CurrentIndicator = styled.span`
+  color: ${({ theme }) => theme.colors.primary};
+  font-weight: bold;
+  font-size: 16px;
+`
+
+const DropdownFooter = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.colors.border};
+  padding: ${spacing.sm} ${spacing.md};
+`
+
+const DropdownLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.sm};
+  padding: ${spacing.sm};
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.lightGrayHover};
+    color: ${({ theme }) => theme.colors.textHover};
+    text-decoration: none;
+    transform: scale(0.99);
+  }
+
+  &:focus {
+    outline: 2px solid ${({ theme }) => theme.colors.primary};
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.lightGrayActive};
+    transform: scale(0.97);
+  }
+`
+
+const ProfileIcon = styled.span`
+  font-size: 16px;
+  color: ${({ theme }) => theme.colors.primary};
+`
diff --git a/frontend/src/index.css b/frontend/src/index.css
index e69de29bb2..033dca35b2 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,73 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Lato", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* font-sizes.css */
+
+/* Headings */
+h1 {
+  font-size: 42px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin: 4px 0;
+}
+
+@media (min-width: 900px) {
+  h1 {
+    font-size: 58px;
+  }
+}
+
+h2 {
+  font-size: 28px;
+  font-weight: 500;
+  line-height: 1.3;
+  margin: 4px 0;
+
+  @media (min-width: 900px) {
+    font-size: 38px;
+  }
+}
+
+h3 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.4;
+  margin: 4px 0;
+}
+
+h4 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.5;
+  margin: 4px 0;
+}
+
+p {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+  margin: 4px 0;
+}
+
+strong {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.6;
+  margin: 4px 0;
+}
+
+small {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 4px 0;
+  color: #666;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
deleted file mode 100644
index 51294f3998..0000000000
--- a/frontend/src/main.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { App } from "./App.jsx";
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000000..7f36ead2ed
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "./index.css"
+import { App } from "./App"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
diff --git a/frontend/src/sections/01-lading-page/01-main/LandingPage.tsx b/frontend/src/sections/01-lading-page/01-main/LandingPage.tsx
new file mode 100644
index 0000000000..844d03f89e
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/01-main/LandingPage.tsx
@@ -0,0 +1,28 @@
+import { Navigation } from "../../../global-components/navigation/Navigation"
+import { Hero } from "../components/Hero"
+import styled from "styled-components"
+// import { ExplainSection } from "../components/ExplainSection"
+import { Demos } from "../components/demo"
+import { Footer } from "../components/Footer"
+import { FeatureSection } from "../components/features/featureSection"
+import { Collaborate } from "../components/Collaborate"
+import { Target } from "../components/target/Target"
+import { BackendStatusIndicator } from "../../../components/BackendStatusIndicator"
+
+export const LandingPage = () => {
+  return (
+    <Container>
+      <BackendStatusIndicator autoCheck={true} />
+      <Navigation />
+      <Hero />
+      <Collaborate />
+      <Demos />
+      <Target />
+      {/* <ExplainSection /> */}
+      <FeatureSection />
+      <Footer />
+    </Container>
+  )
+}
+
+const Container = styled.section``
diff --git a/frontend/src/sections/01-lading-page/components/Collaborate.tsx b/frontend/src/sections/01-lading-page/components/Collaborate.tsx
new file mode 100644
index 0000000000..c026631395
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/Collaborate.tsx
@@ -0,0 +1,107 @@
+import styled from "styled-components"
+import { Section } from "../../../global-components/Section"
+import { Container as BaseContainer } from "../../../global-components/Section"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { spacing } from "../../../themes/spacing"
+
+export const Collaborate = () => {
+  return (
+    <Section aria-labelledby="collaborate-title">
+      <Container>
+        <Title id="collaborate-title">We collaborate with 150+ online schools</Title>
+        <Schools
+          aria-label="Partner schools logos"
+          aria-describedby="collaborate-description"
+        >
+          <SchoolImage
+            src="./School1.webp"
+            alt="School 1 partner logo"
+            aria-label="School 1 partner institution"
+          />
+          <SchoolImage
+            src="./School2.webp"
+            alt="School 2 partner logo"
+            aria-label="School 2 partner institution"
+          />
+          <SchoolImage
+            src="./School7.webp"
+            alt="School 7 partner logo"
+            aria-label="School 7 partner institution"
+          />
+          <SchoolImage
+            src="./School4.webp"
+            alt="School 4 partner logo"
+            aria-label="School 4 partner institution"
+          />
+          <SchoolImage
+            src="./School3.webp"
+            alt="School 3 partner logo"
+            aria-label="School 3 partner institution"
+          />
+          <SchoolImage
+            src="./School6.webp"
+            alt="School 6 partner logo"
+            aria-label="School 6 partner institution"
+          />
+        </Schools>
+        <Description
+          id="collaborate-description"
+          aria-hidden="true"
+        >
+          Our platform collaborates with over 150 online schools and educational institutions to
+          provide comprehensive learning solutions.
+        </Description>
+      </Container>
+    </Section>
+  )
+}
+
+const Container = styled(BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`
+
+const Title = styled.h2`
+  margin-bottom: ${spacing.md};
+`
+
+const Schools = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: ${spacing.md};
+  width: 100%;
+
+  gap: ${spacing.sm};
+
+  @media ${MediaQueries.biggerSizes} {
+    margin-top: ${spacing.lg};
+    gap: ${spacing.lg};
+    flex-wrap: nowrap;
+    justify-content: space-between;
+  }
+`
+
+const SchoolImage = styled.img`
+  border-radius: 15px;
+  height: clamp(80px, 20vw, 180px);
+
+  @media ${MediaQueries.biggerSizes} {
+    height: clamp(50px, 13vw, 180px);
+    flex: 1;
+    object-fit: contain;
+  }
+`
+
+const Description = styled.p`
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+`
diff --git a/frontend/src/sections/01-lading-page/components/ExplainSection.tsx b/frontend/src/sections/01-lading-page/components/ExplainSection.tsx
new file mode 100644
index 0000000000..056b4bc827
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/ExplainSection.tsx
@@ -0,0 +1,54 @@
+// ExplainSection.tsx
+import styled from "styled-components"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { Section, Container } from "../../../global-components/Section"
+import { spacing } from "../../../themes/spacing"
+
+export const ExplainSection = () => {
+  return (
+    <Section>
+      <Container>
+        <Content>
+          <Title>How it works</Title>
+          <ExplainerVideo
+            autoPlay
+            muted
+            loop
+          >
+            <source
+              src="/Explainer3.mp4"
+              type="video/mp4"
+            />
+            Your browser does not support the video tag.
+          </ExplainerVideo>
+        </Content>
+      </Container>
+    </Section>
+  )
+}
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: ${spacing.xl};
+`
+
+const Title = styled.h2`
+  font-size: 2rem;
+  margin: ${spacing.md} 0;
+`
+
+const ExplainerVideo = styled.video`
+  width: 100%;
+  max-width: 600px;
+  border-radius: 15px;
+  height: auto;
+  margin: 0 auto;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.189);
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 1200px;
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/Footer.tsx b/frontend/src/sections/01-lading-page/components/Footer.tsx
new file mode 100644
index 0000000000..97ce1c3593
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/Footer.tsx
@@ -0,0 +1,121 @@
+import styled from "styled-components"
+import { Container } from "../../../global-components/Section"
+import { spacing } from "../../../themes/spacing"
+import { Section as BaseSection } from "../../../global-components/Section"
+import { MediaQueries } from "../../../themes/mediaQueries"
+
+export const Footer = () => {
+  return (
+    <Section
+      role="contentinfo"
+      aria-labelledby="footer-title"
+    >
+      <Container>
+        <Wrapper>
+          <FooterText id="footer-title">This is a school project created by Simon Frisk</FooterText>
+          <SocialLinks aria-label="Social media and project links">
+            <SocialLink>
+              <a
+                href="https://github.com/simfrisk/project-final-simon"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="View project source code on GitHub"
+              >
+                <img
+                  src="/icons/Ic-Github.svg"
+                  alt="GitHub logo"
+                  aria-hidden="true"
+                />
+                <span className="sr-only">GitHub</span>
+              </a>
+            </SocialLink>
+            <SocialLink>
+              <a
+                href="https://www.linkedin.com/in/simon-frisk-59aba7bb/"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="Connect with Simon Frisk on LinkedIn"
+              >
+                <img
+                  src="/icons/Linked-In.svg"
+                  alt="LinkedIn logo"
+                  aria-hidden="true"
+                />
+                <span className="sr-only">LinkedIn</span>
+              </a>
+            </SocialLink>
+          </SocialLinks>
+        </Wrapper>
+      </Container>
+    </Section>
+  )
+}
+
+const Section = styled(BaseSection)`
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  text-align: center;
+  padding: 10px 0 30px 0;
+`
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${spacing.md};
+  margin-top: ${spacing.lg};
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    width: 100%;
+  }
+`
+
+const FooterText = styled.p`
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.4;
+`
+
+const SocialLinks = styled.div`
+  display: flex;
+  gap: ${spacing.md};
+`
+
+const SocialLink = styled.div`
+  a {
+    color: white;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    transition: opacity 0.2s ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &:focus {
+      outline: 2px solid white;
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+  }
+
+  img {
+    height: 30px;
+    width: auto;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/Hero.tsx b/frontend/src/sections/01-lading-page/components/Hero.tsx
new file mode 100644
index 0000000000..ee602ff3d1
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/Hero.tsx
@@ -0,0 +1,127 @@
+import styled from "styled-components"
+import { MainButton } from "../../../global-components/buttons"
+import { Section as BaseSection } from "../../../global-components/Section"
+import { Container as BaseContainer } from "../../../global-components/Section"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { spacing } from "../../../themes/spacing"
+
+export const Hero = () => {
+  return (
+    <Section
+      $secondarySection
+      aria-label="Hero section with introduction to Video Notes for the Modern Classroom"
+    >
+      <Container role="banner">
+        <Content role="presentation">
+          <Logo
+            src="/Hero2.webp"
+            alt="Classync logo"
+          />
+          <MainTitle id="hero-title">Video Notes for the Modern Classroom</MainTitle>
+          <SubTitle id="hero-subtitle">
+            Time-stamped feedback tools built for classrooms, courses, and content creators.
+          </SubTitle>
+          <MainButtonWrapper
+            role="group"
+            aria-label="Primary actions"
+          >
+            <MainButton
+              text="Get Started"
+              url="/signUp"
+              aria-label="Get started by signing up for Classync"
+            />
+            <MainButton
+              text="Login"
+              url="/login"
+              aria-label="Login to your Classync account"
+            />
+          </MainButtonWrapper>
+        </Content>
+        <StyledImage
+          src="./class.webp"
+          alt="Students in a classroom"
+        />
+      </Container>
+    </Section>
+  )
+}
+
+const Section = styled(BaseSection)`
+  position: relative;
+  overflow: hidden; /* prevents video overflow scrollbars */
+`
+
+const Container = styled(BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 20 / 6;
+  gap: ${spacing.lg};
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: center;
+    column-gap: ${spacing.lg};
+  }
+`
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: ${spacing.xs};
+  max-width: 650px;
+  min-width: 300px;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    align-items: flex-start;
+    text-align: left;
+  }
+`
+
+const Logo = styled.img`
+  height: 200px;
+  display: block;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+    height: 250px;
+  }
+`
+
+const MainTitle = styled.h1`
+  margin: ${spacing.sm} 0;
+  color: ${({ theme }) => theme.colors.text};
+  font-weight: 700;
+`
+
+const SubTitle = styled.h2`
+  margin: ${spacing.sm} 0;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  font-size: 21px;
+  width: 80%;
+`
+
+const MainButtonWrapper = styled.div`
+  display: flex;
+  margin: ${spacing.lg} 0;
+  gap: ${spacing.lg};
+`
+
+const StyledImage = styled.img`
+  width: 90%;
+  border-radius: 15px;
+  object-fit: cover;
+  flex-shrink: 0;
+  display: none;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+    max-height: 400px;
+    max-width: 600px;
+    width: clamp(160px, 30vw, 600px);
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/demo.tsx b/frontend/src/sections/01-lading-page/components/demo.tsx
new file mode 100644
index 0000000000..db5d4f1dbc
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/demo.tsx
@@ -0,0 +1,84 @@
+import styled from "styled-components"
+import { Container, Section } from "../../../global-components/Section"
+import { ExplainerCard } from "./explain-section/ExplainerCard"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { spacing } from "../../../themes/spacing"
+
+export const Demos = () => {
+  return (
+    <Section
+      $thirdSection
+      aria-labelledby="demo-title"
+    >
+      <Container>
+        <Title id="demo-title">The platform that powers your online courses</Title>
+        <CardWrapper
+          aria-label="Platform feature demonstrations"
+          aria-describedby="demo-description"
+        >
+          <ExplainerCard
+            title="Find comments in timeline"
+            text="Make sure your comments stay perfectly synced on the timeline when clicked. No interruptions or distractions, just seamless interaction."
+            video="https://res.cloudinary.com/dgr7l5nsx/video/upload/f_mp4/v1754990343/videos/yhzdf7phuo0a0udgm40d.mov"
+            index={1}
+          />
+          <ExplainerCard
+            title="Ask questions at video"
+            text="Your question is placed on the timeline at the exact moment you comment, giving it clear context within the lesson."
+            video="./Commentsform.mp4"
+            index={2}
+          />
+          <ExplainerCard
+            title="Teachers Page to organize questions"
+            text="As a teacher you'll see every unanswered comment on your page, each one linking straight to the exact moment it was posted."
+            video="./Teacher.mp4"
+            index={3}
+          />
+          <ExplainerCard
+            title="Personal comments on time"
+            text="Want to add personal comments? Switch to private mode and easily keep your notes linked directly to the video timeline."
+            video="./PrivetComments.mp4"
+            index={4}
+          />
+          <ExplainerCard
+            title="All your classes in one page"
+            text="Ensure your videos play in their highest resolution, always ad‑free. No competitor distractions or random suggestions here."
+            video="./lib.mp4"
+            index={5}
+          />
+          <ExplainerCard
+            title="Don't forget to give some love"
+            text="Ensure your videos play in their highest resolution, always ad‑free. No competitor distractions or random suggestions here."
+            index={6}
+          />
+        </CardWrapper>
+      </Container>
+    </Section>
+  )
+}
+
+const Title = styled.h2`
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding-bottom: ${spacing.lg};
+  }
+`
+
+const CardWrapper = styled.div`
+  display: grid;
+  gap: ${spacing.xxl};
+  margin: ${spacing.xxl} 0;
+
+  /* 1 column by default (mobile) */
+  grid-template-columns: 1fr;
+
+  @media ${MediaQueries.tablet} {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    /* Up to 3 columns on bigger screens */
+    grid-template-columns: repeat(3, 1fr);
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/explain-section/ExplainerCard.tsx b/frontend/src/sections/01-lading-page/components/explain-section/ExplainerCard.tsx
new file mode 100644
index 0000000000..f5514731b0
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/explain-section/ExplainerCard.tsx
@@ -0,0 +1,107 @@
+import { useRef, useEffect, useState } from "react"
+import { useInView } from "framer-motion"
+import styled from "styled-components"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { spacing } from "../../../../themes/spacing"
+
+type ExplainerCardProps = {
+  title: string
+  text: string
+  video?: string
+  index: number
+}
+
+export const ExplainerCard = ({ title, text, video, index }: ExplainerCardProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const containerRef = useRef<HTMLElement | null>(null)
+  const isInView = useInView(containerRef, { amount: 0.5 })
+  const [isMobile, setIsMobile] = useState(false)
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(MediaQueries.biggerSizes)
+    setIsMobile(!mediaQuery.matches)
+
+    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches)
+    mediaQuery.addEventListener("change", handler)
+    return () => mediaQuery.removeEventListener("change", handler)
+  }, [])
+
+  const handleMouseEnter = () => {
+    if (!isMobile && videoRef.current) {
+      videoRef.current.loop = false
+      videoRef.current.currentTime = 0
+      videoRef.current.play()
+    }
+  }
+
+  useEffect(() => {
+    if (isMobile && videoRef.current) {
+      videoRef.current.loop = true
+      if (isInView) videoRef.current.play()
+      else videoRef.current.pause()
+    }
+  }, [isInView, isMobile])
+
+  return (
+    <Container
+      ref={containerRef}
+      onMouseEnter={handleMouseEnter}
+      aria-labelledby={`card-title-${index}`}
+      aria-describedby={`card-text-${index}`}
+    >
+      <StyledVideo
+        ref={videoRef}
+        muted
+        playsInline
+        aria-label={`Demonstration video for ${title}`}
+        aria-describedby={`card-text-${index}`}
+      >
+        <source
+          src={video || "/Explainer3.mp4"}
+          type="video/mp4"
+        />
+        Your browser does not support the video tag.
+      </StyledVideo>
+      <CardTitle id={`card-title-${index}`}>{title}</CardTitle>
+      <CardText id={`card-text-${index}`}>{text}</CardText>
+    </Container>
+  )
+}
+
+const Container = styled.article`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: ${spacing.sm};
+  border-radius: 15px;
+  width: 100%;
+  /* remove max-width */
+  padding: ${spacing.md};
+  background-color: #1f2a36;
+  transition: transform 0.3s ease-in-out;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+`
+
+const StyledVideo = styled.video`
+  border-radius: 5px;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  width: 100%;
+`
+
+const CardTitle = styled.h3`
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #ffffff;
+`
+
+const CardText = styled.p`
+  margin: 0;
+  font-size: 0.9rem;
+  line-height: 1.4;
+  color: #b0b8c1;
+`
diff --git a/frontend/src/sections/01-lading-page/components/features/aFeatureCard.tsx b/frontend/src/sections/01-lading-page/components/features/aFeatureCard.tsx
new file mode 100644
index 0000000000..f20d18b673
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/features/aFeatureCard.tsx
@@ -0,0 +1,78 @@
+// AFeatureCard.tsx
+import styled from "styled-components"
+import { spacing } from "../../../../themes/spacing"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+
+type AFeatureCardProps = {
+  title: string
+  description: string
+  isActive?: boolean
+}
+
+export const AFeatureCard = ({ title, description, isActive = false }: AFeatureCardProps) => {
+  return (
+    <ButtonContainer
+      $isActive={isActive}
+      aria-pressed={isActive}
+      aria-label={`${title} feature - ${isActive ? "Currently selected" : "Click to select"}`}
+    >
+      <div>
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </div>
+    </ButtonContainer>
+  )
+}
+
+const ButtonContainer = styled.button<{ $isActive: boolean }>`
+  color: white;
+  border: none;
+  border-radius: 10px;
+  border-left: solid 10px ${({ theme }) => theme.colors.primary};
+  text-align: left;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+  background-color: #1f2a36;
+  width: 100%;
+  height: 100%;
+  padding: 10px ${spacing.lg};
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  @media ${MediaQueries.biggerSizes} {
+    height: 150px;
+  }
+
+  p {
+    color: #cecece;
+    margin-top: ${spacing.xs};
+  }
+
+  ${({ $isActive }) =>
+    $isActive &&
+    `
+      @media ${MediaQueries.biggerSizes} {
+        transform: translateY(-2px);
+        background-color: #465169;
+      }
+    `}
+`
+
+const CardTitle = styled.strong`
+  display: block;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #ffffff;
+`
+
+const CardDescription = styled.p`
+  color: #cecece;
+  margin-top: ${spacing.xs};
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-wrap: break-word;
+`
diff --git a/frontend/src/sections/01-lading-page/components/features/featureCards.tsx b/frontend/src/sections/01-lading-page/components/features/featureCards.tsx
new file mode 100644
index 0000000000..20e49fc14a
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/features/featureCards.tsx
@@ -0,0 +1,291 @@
+import { AFeatureCard } from "./aFeatureCard"
+import { useState } from "react"
+import { Carousel } from "react-responsive-carousel"
+import "react-responsive-carousel/lib/styles/carousel.min.css"
+import styled from "styled-components"
+import { spacing } from "../../../../themes/spacing"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+
+export const FeatureCards = () => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+  const [currentImageIndex, setCurrentImageIndex] = useState(0)
+
+  // Calculate which card should be active based on current image
+  const activeCardIndex = currentImageIndex % 3
+
+  const slides = [
+    <AFeatureCard
+      title="Time Stamps"
+      description="Pinpoint exact moments in videos with precise time-stamped comments. Create contextual feedback that stays perfectly synced to your content timeline."
+      isActive={0 === activeCardIndex}
+    />,
+    <AFeatureCard
+      title="Teachers Page"
+      description="Organize and manage all student questions in one centralized location. Track unanswered comments and provide timely feedback efficiently."
+      isActive={1 === activeCardIndex}
+    />,
+    <AFeatureCard
+      title="Personal Comments"
+      description="Switch to private mode for personal notes and observations. Keep your thoughts organized and linked directly to specific video moments."
+      isActive={2 === activeCardIndex}
+    />,
+  ]
+
+  // Images for desktop carousel
+  const images = ["/commentTag.webp", "/teachersTag.webp", "/personalCommentsTag.webp"]
+
+  const next = () => setCurrentSlide((prev) => (prev + 1) % slides.length)
+  const prev = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length)
+
+  const handleCardClick = (cardIndex: number) => {
+    setCurrentImageIndex(cardIndex)
+  }
+
+  const nextImage = () => setCurrentImageIndex((prev) => (prev + 1) % images.length)
+  const prevImage = () => setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length)
+
+  return (
+    <>
+      <Container>
+        {/* Desktop: Images that carousel when clicking on cards */}
+        <DesktopContainer>
+          <CardsContainer aria-label="Feature selection cards">
+            {slides.map((slide, index) => (
+              <ClickableCardContainer
+                key={index}
+                onClick={() => handleCardClick(index)}
+                aria-label={`Select ${["Time Stamps", "Teachers Page", "Personal Comments"][index]} feature`}
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    handleCardClick(index)
+                  }
+                }}
+              >
+                {slide}
+              </ClickableCardContainer>
+            ))}
+          </CardsContainer>
+
+          <ImageCarousel
+            role="region"
+            aria-label="Feature demonstration images"
+            aria-describedby="image-description"
+          >
+            <img
+              src={images[currentImageIndex]}
+              alt={`${["Time Stamps", "Teachers Page", "Personal Comments"][currentImageIndex]} feature demonstration`}
+            />
+            <ImageControls>
+              <button
+                onClick={prevImage}
+                aria-label="Previous feature image"
+                aria-describedby="image-description"
+              >
+                ‹
+              </button>
+              <button
+                onClick={nextImage}
+                aria-label="Next feature image"
+                aria-describedby="image-description"
+              >
+                ›
+              </button>
+            </ImageControls>
+            <div
+              id="image-description"
+              aria-hidden="true"
+            >
+              {`Showing ${["Time Stamps", "Teachers Page", "Personal Comments"][currentImageIndex]} feature demonstration`}
+            </div>
+          </ImageCarousel>
+        </DesktopContainer>
+
+        {/* Mobile: Only card carousel */}
+        <MobileContainer>
+          <Carousel
+            selectedItem={currentSlide}
+            onChange={setCurrentSlide}
+            showThumbs={false}
+            infiniteLoop
+            showArrows={false}
+            showStatus={false}
+            showIndicators={true}
+            swipeable={true}
+            emulateTouch={true}
+            dynamicHeight={false}
+            aria-label="Feature cards carousel"
+            renderIndicator={(
+              onClickHandler: React.MouseEventHandler<HTMLLIElement>,
+              isSelected: boolean,
+              index: number
+            ) => (
+              <Dot
+                key={index}
+                onClick={onClickHandler}
+                $active={isSelected}
+                aria-label={`Go to slide ${index + 1}`}
+                aria-current={isSelected ? "true" : "false"}
+                title={`Slide ${index + 1}`}
+              />
+            )}
+          >
+            {slides.map((slide, index) => (
+              <CardContainer key={index}>{slide}</CardContainer>
+            ))}
+          </Carousel>
+
+          <Controls>
+            <button
+              onClick={prev}
+              aria-label="Previous feature card"
+            >
+              Prev
+            </button>
+            <button
+              onClick={next}
+              aria-label="Next feature card"
+            >
+              Next
+            </button>
+          </Controls>
+        </MobileContainer>
+      </Container>
+    </>
+  )
+}
+
+const Container = styled.div`
+  margin: ${spacing.lg} 0;
+  display: flex;
+  flex-direction: column;
+`
+
+const DesktopContainer = styled.div`
+  display: none;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: flex;
+    align-items: center;
+    gap: ${spacing.xl};
+  }
+`
+
+const MobileContainer = styled.div`
+  display: block;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+  }
+`
+
+const ImageCarousel = styled.div`
+  position: relative;
+  width: 50%;
+  height: 485px;
+  border-radius: 15px;
+  overflow: hidden;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.05);
+  }
+`
+
+const ImageControls = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  padding: 0 ${spacing.md};
+
+  button {
+    background: rgba(0, 0, 0, 0.6);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.8);
+    }
+  }
+`
+
+const CardsContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.md};
+`
+
+const ClickableCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 15px;
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
+  }
+`
+
+const CardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 15px;
+  margin: 15px 0 30px 0;
+`
+
+const Controls = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: ${spacing.sm};
+  margin-top: ${spacing.sm};
+
+  button {
+    padding: ${spacing.sm} ${spacing.lg};
+    border-radius: 10px;
+    font-size: 14px;
+    background-color: #1f2a36;
+    color: #f5f5f5;
+    border: none;
+    cursor: pointer;
+  }
+`
+
+const Dot = styled.li<{ $active: boolean }>`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin: 0 6px;
+  transform: translateY(5px);
+  background-color: ${({ $active, theme }) => ($active ? theme.colors.primary : "#ccc")};
+  display: inline-block;
+  cursor: pointer;
+`
diff --git a/frontend/src/sections/01-lading-page/components/features/featureSection.tsx b/frontend/src/sections/01-lading-page/components/features/featureSection.tsx
new file mode 100644
index 0000000000..34880b2c43
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/features/featureSection.tsx
@@ -0,0 +1,35 @@
+// FeatureSection.tsx
+import { Section, Container } from "../../../../global-components/Section"
+import { FeatureTitle } from "./featureTitle"
+import { FeatureCards } from "./featureCards"
+import styled from "styled-components"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { spacing } from "../../../../themes/spacing"
+
+export const FeatureSection = () => {
+  return (
+    <Section
+      $thirdSection
+      aria-labelledby="feature-title"
+    >
+      <Container>
+        <FeatureTitle />
+        <CardWrapper>
+          <FeatureCards />
+        </CardWrapper>
+      </Container>
+    </Section>
+  )
+}
+
+const CardWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.lg};
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/features/featureTitle.tsx b/frontend/src/sections/01-lading-page/components/features/featureTitle.tsx
new file mode 100644
index 0000000000..7d72b6bc50
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/features/featureTitle.tsx
@@ -0,0 +1,43 @@
+// FeatureTitle.tsx
+import styled from "styled-components"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { spacing } from "../../../../themes/spacing"
+
+export const FeatureTitle = () => {
+  return (
+    <Container>
+      <Title id="feature-title">Classync 101</Title>
+      <Description>
+        Take control of your comments with timestamps to keep everything organized and easy to find
+        and remember. Whether you're reviewing lessons or giving feedback, it's all clear,
+        trackable, and right where you need it.
+      </Description>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  padding-bottom: ${spacing.sm};
+
+  @media ${MediaQueries.biggerSizes} {
+    padding-bottom: ${spacing.xxl};
+  }
+`
+
+const Title = styled.h2`
+  margin: ${spacing.md} 0;
+  text-align: left;
+`
+
+const Description = styled.h3`
+  margin: 0 auto;
+  color: #eeeeee;
+  font-size: 18px;
+  text-align: left;
+
+  @media ${MediaQueries.biggerSizes} {
+    margin-left: 0;
+    width: 67%;
+    font-size: 21px;
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/target/Target.tsx b/frontend/src/sections/01-lading-page/components/target/Target.tsx
new file mode 100644
index 0000000000..f8dc4f087c
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/target/Target.tsx
@@ -0,0 +1,187 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { Container, Section as BaseSection } from "../../../../global-components/Section"
+import { TargetItem } from "./TargetItem"
+import { spacing } from "../../../../themes/spacing"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { motion } from "framer-motion"
+
+interface Item {
+  title: string
+  description: string
+  image: string
+}
+
+export const Target = () => {
+  const items: Item[] = [
+    {
+      title: "Online Education",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus est eget est egestas sodales quis id mi. Aenean quis massa tempus, viverra nisi sit amet, finibus ex. Sed tortor massa, iaculis ut ipsum nec, ornare ullamcorper magna.",
+      image: "/SchoolTeam.webp",
+    },
+    {
+      title: "Teacher Feedback",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus est eget est egestas sodales quis id mi. Aenean quis massa tempus, viverra nisi sit amet, finibus ex. Sed tortor massa, iaculis ut ipsum nec, ornare ullamcorper magna.",
+      image: "/TeacherTeam.webp",
+    },
+    {
+      title: "Group Projects",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus est eget est egestas sodales quis id mi. Aenean quis massa tempus, viverra nisi sit amet, finibus ex. Sed tortor massa, iaculis ut ipsum nec, ornare ullamcorper magna.",
+      image: "/GroupTeam.webp",
+    },
+    {
+      title: "Sports & Performance",
+      description:
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus est eget est egestas sodales quis id mi. Aenean quis massa tempus, viverra nisi sit amet, finibus ex. Sed tortor massa, iaculis ut ipsum nec, ornare ullamcorper magna.",
+      image: "/SportTeam.webp",
+    },
+  ]
+
+  // Image shown on the left
+  const [activeIndex, setActiveIndex] = useState<number>(0)
+
+  // Menu open state
+  const [openIndex, setOpenIndex] = useState<number | null>(null)
+
+  return (
+    <Section aria-labelledby="target-title">
+      <Container>
+        <Header>
+          <Title id="target-title">Who is it for?</Title>
+          <h3>
+            Our platform is designed for educators and students who need precise, time-stamped
+            feedback on video content. Our tools help you pinpoint exact moments and provide
+            contextual feedback that enhances learning.
+          </h3>
+        </Header>
+        <ContentContainer>
+          <ImageContainer
+            aria-label="Target audience visual representations"
+            aria-describedby="target-description"
+          >
+            {items.map((item, index) => (
+              <Image
+                key={index}
+                src={item.image}
+                alt={`${item.title} - Visual representation`}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: activeIndex === index ? 1 : 0 }}
+                transition={{ duration: 0.4 }}
+                aria-hidden={activeIndex !== index}
+              />
+            ))}
+          </ImageContainer>
+
+          <List
+            aria-label="Target audience categories"
+            aria-describedby="target-description"
+          >
+            {/* here are the children */}
+            {items.map((item, index) => (
+              <TargetItem
+                key={index}
+                {...item}
+                index={index}
+                isOpen={openIndex === index}
+                onClick={() => {
+                  setOpenIndex(openIndex === index ? null : index)
+                  setActiveIndex(index)
+                }}
+              />
+            ))}
+          </List>
+        </ContentContainer>
+      </Container>
+    </Section>
+  )
+}
+
+// ---------------- Styled ----------------
+const Section = styled(BaseSection)`
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  color: ${({ theme }) => theme.colors.text};
+`
+
+const Title = styled.h2`
+  text-align: left;
+  margin-bottom: ${spacing.md};
+
+  @media ${MediaQueries.biggerSizes} {
+    text-align: left;
+  }
+`
+
+const Header = styled.div`
+  text-align: left;
+  padding-bottom: ${spacing.md};
+
+  @media ${MediaQueries.biggerSizes} {
+    text-align: left;
+    width: 70%;
+    padding-bottom: ${spacing.xxl};
+  }
+
+  h3 {
+    font-size: 18px;
+
+    @media ${MediaQueries.biggerSizes} {
+      font-size: 21px;
+    }
+  }
+`
+
+const ContentContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: column;
+  gap: ${spacing.lg};
+  align-items: stretch;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: stretch;
+    gap: ${spacing.xxl};
+  }
+`
+
+const ImageContainer = styled.div`
+  position: relative;
+  width: 100%;
+  flex-shrink: 0;
+  margin: 0 auto;
+
+  @media ${MediaQueries.biggerSizes} {
+    margin: 0;
+    flex: 1; // Add this to make it expand
+  }
+`
+
+const Image = styled(motion.img)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  object-fit: contain;
+  object-fit: cover;
+  border-radius: 20px;
+`
+
+const List = styled.ul`
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.lg};
+  padding: 0;
+  margin: 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex: 1;
+    margin: 0;
+    width: 50%;
+  }
+`
diff --git a/frontend/src/sections/01-lading-page/components/target/TargetItem.tsx b/frontend/src/sections/01-lading-page/components/target/TargetItem.tsx
new file mode 100644
index 0000000000..3b74cad5e9
--- /dev/null
+++ b/frontend/src/sections/01-lading-page/components/target/TargetItem.tsx
@@ -0,0 +1,105 @@
+import { motion, AnimatePresence } from "framer-motion"
+import styled from "styled-components"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+
+interface TargetItemProps {
+  title: string
+  description: string
+  index: number
+  isOpen?: boolean
+  onClick?: () => void
+}
+
+export const TargetItem = ({ title, description, index, isOpen, onClick }: TargetItemProps) => {
+  return (
+    <ListItem>
+      <HeaderButton
+        onClick={onClick}
+        aria-expanded={isOpen}
+        aria-controls={`target-content-${index}`}
+        aria-label={`${isOpen ? "Collapse" : "Expand"} ${title} details`}
+      >
+        <h3 id={`target-title-${index}`}>{title}</h3>
+        <span aria-hidden="true">{isOpen ? "–" : "+"}</span>
+      </HeaderButton>
+
+      <AnimatePresence initial={false}>
+        {isOpen && (
+          <motion.section
+            id={`target-content-${index}`}
+            initial={{ height: 0 }}
+            animate={{ height: "auto" }}
+            exit={{ height: 0 }}
+            transition={{ duration: 0.25, ease: "easeInOut" }}
+            style={{ overflow: "hidden" }}
+            aria-labelledby={`target-title-${index}`}
+          >
+            <motion.div
+              initial={{ y: -5, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              exit={{ y: -5, opacity: 0 }}
+              transition={{ duration: 0.25 }}
+            >
+              <Content>{description}</Content>
+            </motion.div>
+          </motion.section>
+        )}
+      </AnimatePresence>
+    </ListItem>
+  )
+}
+
+// ---------------- styled ----------------
+const ListItem = styled.li`
+  margin-bottom: 8px;
+  border-radius: 16px;
+  border: 1px solid ${({ theme }) => theme.colors.offBackground};
+  background: ${({ theme }) => theme.colors.background};
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  list-style-type: none;
+  margin-left: 0;
+  padding-left: 0;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 800px;
+  }
+`
+
+const HeaderButton = styled.button`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 20px 28px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  font-size: 20px;
+  font-weight: 600;
+
+  h3 {
+    font-size: 24px;
+    margin: 0;
+    color: ${({ theme }) => theme.colors.text};
+  }
+
+  span {
+    color: ${({ theme }) => theme.colors.textAlternative};
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 1;
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.offBackgroundHover};
+  }
+`
+
+const Content = styled.div`
+  padding: 20px 28px;
+  font-size: 18px;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  line-height: 1.6;
+`
diff --git a/frontend/src/sections/01-lading-page/components/test.tsx b/frontend/src/sections/01-lading-page/components/test.tsx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/src/sections/02-log-in-page/LogInPage.tsx b/frontend/src/sections/02-log-in-page/LogInPage.tsx
new file mode 100644
index 0000000000..7126cbbfb3
--- /dev/null
+++ b/frontend/src/sections/02-log-in-page/LogInPage.tsx
@@ -0,0 +1,64 @@
+import React from "react"
+import styled from "styled-components"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { MediaQueries } from "../../themes/mediaQueries"
+import { LoginForm } from "./components/LoginForm"
+import { LoginHeader } from "./components/LoginHeader"
+
+export const LogInPage: React.FC = () => {
+  return (
+    <>
+      <Navigation />
+      <Container>
+        <SideContainer aria-hidden="true" />
+        <MainCard>
+          <Card>
+            <LoginHeader />
+            <LoginForm />
+          </Card>
+        </MainCard>
+      </Container>
+    </>
+  )
+}
+
+/* Styled Components */
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 94dvh;
+`
+
+const SideContainer = styled.section`
+  display: none;
+  width: 80%;
+  background-image: url("/sideImage2.webp");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: ${({ theme }) => theme.colors.secondary};
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+  }
+`
+
+const MainCard = styled.main`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 2000px;
+  }
+`
+
+const Card = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  width: 100%;
+  max-width: 600px;
+  margin: 64px auto;
+`
diff --git a/frontend/src/sections/02-log-in-page/components/LoginForm.tsx b/frontend/src/sections/02-log-in-page/components/LoginForm.tsx
new file mode 100644
index 0000000000..60adc06d87
--- /dev/null
+++ b/frontend/src/sections/02-log-in-page/components/LoginForm.tsx
@@ -0,0 +1,190 @@
+//#region ----- IMPORTS -----
+import React, { useState, useEffect } from "react"
+import styled from "styled-components"
+import { useNavigate, Link } from "react-router-dom"
+import { useUserStore } from "../../../store/userStore"
+import { handleLoginSubmit } from "./utils/loginHandleSubmit"
+import { BackendStatusIndicator } from "../../../components/BackendStatusIndicator"
+
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const LoginForm: React.FC = () => {
+  const navigate = useNavigate()
+  const { login, isLoggedIn } = useUserStore()
+
+  const [formData, setFormData] = useState({ email: "", password: "" })
+  const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Redirect if user is already logged in
+  useEffect(() => {
+    if (isLoggedIn) navigate("/library")
+  }, [isLoggedIn, navigate])
+
+  // Toggle between showing and hiding the password
+  const togglePasswordVisibility = () => setShowPassword((prev) => !prev)
+
+  // Handle input field changes
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  // Handle form submission using the utility function
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
+    handleLoginSubmit(e, formData, login, setError, navigate)
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <>
+      <BackendStatusIndicator autoCheck={true} />
+      <form
+        onSubmit={handleSubmit}
+        noValidate
+      >
+        <FormGroup>
+          <label htmlFor="email">Email Address</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="Enter Email"
+            value={formData.email}
+            onChange={handleChange}
+            required
+            aria-required="true"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <label htmlFor="password">Password</label>
+          <PasswordWrapper>
+            <input
+              type={showPassword ? "text" : "password"}
+              id="password"
+              name="password"
+              placeholder="Enter Password"
+              value={formData.password}
+              onChange={handleChange}
+              required
+              minLength={1}
+              aria-required="true"
+            />
+            <PasswordToggleButton
+              type="button"
+              onClick={togglePasswordVisibility}
+              aria-label={showPassword ? "Hide password" : "Show password"}
+              aria-pressed={showPassword}
+            >
+              <img
+                src={showPassword ? "/icons/visibility_off.svg" : "/icons/visibility_on.svg"}
+                alt=""
+                width={20}
+                height={20}
+                aria-hidden="true"
+              />
+            </PasswordToggleButton>
+          </PasswordWrapper>
+        </FormGroup>
+
+        {error && <ErrorMessage role="alert">{error}</ErrorMessage>}
+
+        <ButtonWrapper>
+          <StyledButton type="submit">Login</StyledButton>
+        </ButtonWrapper>
+
+        <StyledLink to="/signUp">Create Account</StyledLink>
+      </form>
+    </>
+  )
+}
+
+//#endregion*
+
+//#region ----- STYLED COMPONENTS -----
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+
+  label {
+    margin-bottom: 5px;
+    font-weight: 500;
+  }
+
+  input {
+    height: 40px;
+    width: 100%;
+    background-color: #f6f6f6;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+`
+
+const PasswordWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  input {
+    flex: 1;
+    width: 100%;
+  }
+`
+
+const PasswordToggleButton = styled.button`
+  position: absolute;
+  right: 10px;
+  background: none;
+  border: none;
+  cursor: pointer;
+`
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+const StyledButton = styled.button`
+  padding: 10px 20px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 50px;
+  margin: 40px auto;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  margin-top: 10px;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.textHover};
+    transform: scale(0.95);
+  }
+`
+
+const ErrorMessage = styled.div`
+  color: red;
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 10px;
+`
+//#endregion
diff --git a/frontend/src/sections/02-log-in-page/components/LoginHeader.tsx b/frontend/src/sections/02-log-in-page/components/LoginHeader.tsx
new file mode 100644
index 0000000000..8983334393
--- /dev/null
+++ b/frontend/src/sections/02-log-in-page/components/LoginHeader.tsx
@@ -0,0 +1,46 @@
+import styled from "styled-components"
+
+export const LoginHeader = () => {
+  return (
+    <Header>
+      <Logo
+        src="/logo2.webp"
+        alt="Classync logo"
+      />
+
+      <WelcomeMessage id="login-heading">
+        <Title>Welcome</Title>
+        <p>Nice to have you back.</p>
+      </WelcomeMessage>
+    </Header>
+  )
+}
+
+/* Header / Logo */
+const Header = styled.header`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+const Logo = styled.img`
+  height: 150px;
+  width: 150px;
+  border-radius: 20px;
+  margin-left: 15px;
+`
+
+/* Welcome message */
+const WelcomeMessage = styled.div`
+  text-align: center;
+  margin: 10px 0 30px 0;
+`
+
+const Title = styled.h1`
+  font-size: 32px;
+  font-weight: 500;
+  text-align: center;
+  margin-bottom: 20px;
+  color: ${({ theme }) => theme.colors.text};
+`
diff --git a/frontend/src/sections/02-log-in-page/components/utils/loginHandleSubmit.ts b/frontend/src/sections/02-log-in-page/components/utils/loginHandleSubmit.ts
new file mode 100644
index 0000000000..70e41f6334
--- /dev/null
+++ b/frontend/src/sections/02-log-in-page/components/utils/loginHandleSubmit.ts
@@ -0,0 +1,35 @@
+// utils/auth.ts
+import type { NavigateFunction } from "react-router"
+
+type LoginFunction = (
+  email: string,
+  password: string
+) => Promise<{ success: boolean; message?: string }>
+
+export const handleLoginSubmit = async (
+  e: React.FormEvent<HTMLFormElement>,
+  formData: { email: string; password: string },
+  login: LoginFunction,
+  setError: (msg: string | null) => void,
+  navigate: NavigateFunction
+) => {
+  e.preventDefault()
+  const form = e.currentTarget as HTMLFormElement & {
+    email: HTMLInputElement
+    password: HTMLInputElement
+  }
+
+  if (!form.checkValidity()) {
+    form.reportValidity()
+    return
+  }
+
+  const result = await login(formData.email, formData.password)
+
+  if (result.success) {
+    setError(null)
+    navigate("/library")
+  } else {
+    setError(result.message || "Login failed")
+  }
+}
diff --git a/frontend/src/sections/03-sign-up-page/SignUpPage.tsx b/frontend/src/sections/03-sign-up-page/SignUpPage.tsx
new file mode 100644
index 0000000000..1616dc67c0
--- /dev/null
+++ b/frontend/src/sections/03-sign-up-page/SignUpPage.tsx
@@ -0,0 +1,81 @@
+import styled from "styled-components"
+import { MediaQueries } from "../../themes/mediaQueries"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { SignUpHeader } from "./components/signUpHeader"
+import { SignUpForm } from "./components/signUpForm"
+
+export const SignUpPage: React.FC = () => {
+  return (
+    <>
+      <Navigation />
+      <Container>
+        <SideContainer aria-hidden="true" />
+        <MainCardContainer>
+          <Card>
+            <SignUpHeader />
+            <SignUpForm />
+          </Card>
+        </MainCardContainer>
+      </Container>
+    </>
+  )
+}
+
+/* Styled Components */
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
+`
+
+const SideContainer = styled.section`
+  display: none;
+  width: 80%;
+  background-image: url("/sideImage2.webp");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: ${({ theme }) => theme.colors.secondary};
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+  }
+`
+
+const MainCardContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 2000px;
+  }
+`
+
+const Card = styled.main`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  width: 100%;
+  max-width: 600px;
+  margin: 10px auto;
+
+  @media ${MediaQueries.biggerSizes} {
+    justify-content: center;
+    width: 95%;
+    margin: 20px auto;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="file"] {
+    height: 40px;
+    background-color: #f6f6f6;
+    border: none;
+    border-radius: 5px;
+    margin: 10px 0;
+    width: 100%;
+    padding: 10px;
+  }
+`
diff --git a/frontend/src/sections/03-sign-up-page/components/signUpForm.tsx b/frontend/src/sections/03-sign-up-page/components/signUpForm.tsx
new file mode 100644
index 0000000000..0277dcab46
--- /dev/null
+++ b/frontend/src/sections/03-sign-up-page/components/signUpForm.tsx
@@ -0,0 +1,320 @@
+//#region ----- IMPORTS -----
+import { useState, useEffect } from "react"
+import styled from "styled-components"
+import { Link, useNavigate, useLocation } from "react-router-dom"
+import { useUserStore } from "../../../store/userStore"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+import { handleSignUpSubmit } from "./utils/signUpHandleSubmit"
+import { BackendStatusIndicator } from "../../../components/BackendStatusIndicator"
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const SignUpForm: React.FC = () => {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { createUser } = useUserStore()
+  const { validateInvitationToken } = useWorkspaceStore()
+
+  const [preview, setPreview] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [invitationToken, setInvitationToken] = useState<string | null>(null)
+  const [invitationRole, setInvitationRole] = useState<string | null>(null)
+  const [isValidatingInvitation, setIsValidatingInvitation] = useState(false)
+
+  // Check for invitation token in URL
+  useEffect(() => {
+    const urlParams = new URLSearchParams(location.search)
+    const token = urlParams.get("token")
+
+    if (token) {
+      setInvitationToken(token)
+      setIsValidatingInvitation(true)
+
+      // Validate invitation token
+      validateInvitationToken(token)
+        .then((result) => {
+          setIsValidatingInvitation(false)
+          if (!result.valid) {
+            setError("Invalid or expired invitation link")
+          } else {
+            setInvitationRole(result.allowedRole || "student")
+          }
+        })
+        .catch((err) => {
+          setIsValidatingInvitation(false)
+          setError("Failed to validate invitation. Please check your link.")
+          console.error("Invitation validation error:", err)
+        })
+    }
+  }, [location.search, validateInvitationToken])
+
+  const handlePreview = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) setPreview(URL.createObjectURL(file))
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
+    handleSignUpSubmit(e, createUser, setError, navigate, invitationToken, invitationRole)
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <>
+      <BackendStatusIndicator autoCheck={true} />
+      {invitationToken && invitationRole && (
+        <InvitationNotice>
+          <h3>
+            {invitationRole === "teacher"
+              ? "👨‍🏫 You've been invited as a Teacher!"
+              : "👨‍🎓 You've been invited as a Student!"}
+          </h3>
+          <p>Create your account here to get started</p>
+        </InvitationNotice>
+      )}
+
+      {isValidatingInvitation && <LoadingNotice>Validating invitation...</LoadingNotice>}
+
+      <form
+        onSubmit={handleSubmit}
+        noValidate
+        aria-describedby="form-error"
+      >
+        <FormGroup>
+          <label htmlFor="fullName">Full name</label>
+          <input
+            type="text"
+            id="fullName"
+            name="fullName"
+            placeholder="Enter full name"
+            minLength={2}
+            maxLength={100}
+            required
+            aria-required="true"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <label htmlFor="email">Email</label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            placeholder="Enter Email"
+            minLength={4}
+            maxLength={100}
+            required
+            aria-required="true"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            name="password"
+            placeholder="Enter Password"
+            minLength={5}
+            required
+            aria-required="true"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <label htmlFor="profileImage">Upload profile picture</label>
+          <input
+            type="file"
+            id="profileImage"
+            name="profileImage"
+            accept="image/*"
+            onChange={handlePreview}
+            aria-describedby={preview ? "image-preview" : undefined}
+          />
+        </FormGroup>
+
+        {/* <FormGroup>
+          <label htmlFor="role-teacher">Role</label>
+          <RoleGroup>
+            <RoleLabel htmlFor="role-teacher">
+              <input
+                id="role-teacher"
+                type="radio"
+                name="role"
+                value="teacher"
+                required
+              />
+              <span></span>
+              Teacher
+            </RoleLabel>
+
+            <RoleLabel htmlFor="role-student">
+              <input
+                id="role-student"
+                type="radio"
+                name="role"
+                value="student"
+                required
+              />
+              <span></span>
+              Student
+            </RoleLabel>
+          </RoleGroup>
+        </FormGroup> */}
+
+        {error && <ErrorMessage id="form-error">{error}</ErrorMessage>}
+        {preview && (
+          <PreviewImage
+            src={preview}
+            alt="Profile preview"
+            id="image-preview"
+          />
+        )}
+
+        <ButtonWrapper>
+          <StyledButton type="submit">Sign up</StyledButton>
+        </ButtonWrapper>
+
+        <LinkContainer>
+          <p>Already have an account?</p>
+          <StyledLink to="/login">Log in</StyledLink>
+        </LinkContainer>
+      </form>
+    </>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 15px;
+
+  label {
+    margin-bottom: 5px;
+    font-weight: 500;
+  }
+
+  /* Dynamic required/optional labels using CSS */
+  label:has(+ input:required)::after {
+    content: " *";
+    color: red;
+  }
+
+  label:has(+ input:optional)::after {
+    content: " (optional)";
+    color: gray;
+    font-size: 0.9em;
+  }
+
+  label:has(+ div input[type="radio"]:required)::after {
+    content: " *";
+    color: red;
+  }
+
+  input {
+    height: 40px;
+    width: 100%;
+    background-color: #f6f6f6;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+`
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+`
+
+const StyledButton = styled.button`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 50px;
+  margin: 20px 0;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+const StyledLink = styled(Link)`
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration: none;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.textHover};
+    transform: scale(0.95);
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors.textActive};
+  }
+`
+
+const LinkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`
+
+const ErrorMessage = styled.div`
+  color: red;
+  margin-bottom: 10px;
+  text-align: center;
+  font-weight: 500;
+`
+
+const PreviewImage = styled.img`
+  margin-top: 10px;
+  border-radius: 10px;
+  height: 80px;
+`
+
+const InvitationNotice = styled.div`
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  padding: 20px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  text-align: center;
+
+  h3 {
+    margin: 0 0 10px 0;
+    font-size: 22px;
+    font-weight: 700;
+  }
+
+  p {
+    margin: 0;
+    font-size: 16px;
+    opacity: 0.9;
+  }
+`
+
+const LoadingNotice = styled.div`
+  background: #f8f9fa;
+  border: 1px solid #dee2e6;
+  color: #495057;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  text-align: center;
+  font-weight: 500;
+`
+//#endregion
diff --git a/frontend/src/sections/03-sign-up-page/components/signUpHeader.tsx b/frontend/src/sections/03-sign-up-page/components/signUpHeader.tsx
new file mode 100644
index 0000000000..492b1768c0
--- /dev/null
+++ b/frontend/src/sections/03-sign-up-page/components/signUpHeader.tsx
@@ -0,0 +1,19 @@
+import styled from "styled-components"
+
+export const SignUpHeader = () => {
+  return (
+    <>
+      <header>
+        <Title id="signup-heading">Sign up to get started</Title>
+      </header>
+    </>
+  )
+}
+
+const Title = styled.h1`
+  font-size: 28px;
+  font-weight: 500;
+  text-align: center;
+  margin-bottom: 20px;
+  color: ${({ theme }) => theme.colors.text};
+`
diff --git a/frontend/src/sections/03-sign-up-page/components/utils/signUpHandleSubmit.ts b/frontend/src/sections/03-sign-up-page/components/utils/signUpHandleSubmit.ts
new file mode 100644
index 0000000000..724077ca24
--- /dev/null
+++ b/frontend/src/sections/03-sign-up-page/components/utils/signUpHandleSubmit.ts
@@ -0,0 +1,56 @@
+import type { NavigateFunction } from "react-router"
+import type { FormEvent } from "react"
+
+type CreateUserFunction = (formData: FormData) => Promise<{ success: boolean; message?: string }>
+
+export const handleSignUpSubmit = async (
+  e: FormEvent<HTMLFormElement>,
+  createUser: CreateUserFunction,
+  setError: (msg: string | null) => void,
+  navigate: NavigateFunction,
+  invitationToken?: string | null,
+  invitationRole?: string | null
+) => {
+  e.preventDefault()
+
+  const form = e.currentTarget as HTMLFormElement & {
+    fullName: HTMLInputElement
+    email: HTMLInputElement
+    password: HTMLInputElement
+    profileImage: HTMLInputElement
+  }
+
+  if (!form.checkValidity()) {
+    form.reportValidity()
+    return
+  }
+
+  const formData = new FormData()
+  formData.append("name", form.fullName.value)
+  formData.append("email", form.email.value)
+  formData.append("password", form.password.value)
+  // Set role based on invitation role, or default to teacher if no invitation
+  const role = invitationToken && invitationRole ? invitationRole : "teacher"
+  formData.append("role", role)
+  if (invitationToken) {
+    formData.append("invitationToken", invitationToken)
+  }
+  if (form.profileImage.files?.[0]) {
+    formData.append("image", form.profileImage.files[0])
+  }
+
+  const result = await createUser(formData)
+
+  if (result.success) {
+    setError(null)
+    if (invitationToken) {
+      // User signed up with invitation, redirect to library
+      navigate("/library")
+    } else {
+      // Regular signup, redirect to create workspace
+      navigate("/create-workspace")
+    }
+  } else {
+    setError(result.message || "Sign up failed")
+  }
+}
diff --git a/frontend/src/sections/04-video-library-page/VideoLibraryPage.tsx b/frontend/src/sections/04-video-library-page/VideoLibraryPage.tsx
new file mode 100644
index 0000000000..c9a1cce1dd
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/VideoLibraryPage.tsx
@@ -0,0 +1,98 @@
+import { Outlet, useLocation } from "react-router-dom"
+import { SideMenu } from "./components/side-menu/SideMenu"
+import styled from "styled-components"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { MediaQueries } from "../../themes/mediaQueries"
+import { CreateClass } from "./components/CreateClass"
+import { useEditingStore } from "../../store/editStore"
+
+export const VideoLibraryPage = () => {
+  const isEditingClass = useEditingStore((state) => state.isEditingClass)
+  const setIsEditingClass = useEditingStore((state) => state.setIsEditingClass)
+  const location = useLocation()
+
+  const handleModalClose = () => {
+    setIsEditingClass(false)
+  }
+
+  // Don't show modal when on the main /library route (ChooseClassMessage route)
+  const showModal = isEditingClass && !location.pathname.endsWith("/library")
+
+  return (
+    <>
+      <InvisibleH1>Video Library</InvisibleH1>
+      <Navigation />
+      <MainSection aria-label="Video Library Section">
+        <ContentWrapper>
+          <SideNavContainer aria-label="Video Library Navigation">
+            <SideMenu />
+          </SideNavContainer>
+          <Outlet />
+        </ContentWrapper>
+      </MainSection>
+      {showModal && (
+        <ModalContainer onClick={handleModalClose}>
+          <ModalContent onClick={(e) => e.stopPropagation()}>
+            <CreateClass />
+          </ModalContent>
+        </ModalContainer>
+      )}
+    </>
+  )
+}
+
+const MainSection = styled.section`
+  width: 100%;
+  padding: 34px 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 0;
+  }
+`
+
+const ContentWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+`
+
+const SideNavContainer = styled.section`
+  width: 250px;
+  flex-shrink: 0;
+  display: none;
+  background-color: ${({ theme }) => theme.colors.background};
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+    padding: 72px 0;
+  }
+`
+
+const ModalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(2, 2, 2, 0.621);
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const ModalContent = styled.div`
+  position: relative;
+  z-index: 1001;
+`
+
+const InvisibleH1 = styled.h1`
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+`
diff --git a/frontend/src/sections/04-video-library-page/components/ChooseClassMessage.tsx b/frontend/src/sections/04-video-library-page/components/ChooseClassMessage.tsx
new file mode 100644
index 0000000000..ff39dc4251
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/ChooseClassMessage.tsx
@@ -0,0 +1,85 @@
+import styled from "styled-components"
+import { useClassStore } from "../../../store/classStore"
+import { useUserStore } from "../../../store/userStore"
+import { useState } from "react"
+import { CreateClass } from "./CreateClass"
+
+export const ChooseClassMessage = () => {
+  const classes = useClassStore((state) => state.classes)
+  const user = useUserStore((state) => state.user)
+  const userRole = user?.role
+  const [showCreateForm, setShowCreateForm] = useState(false)
+
+  const handleCreateClass = () => {
+    setShowCreateForm(true)
+  }
+
+  return (
+    <Container>
+      {classes.length === 0 && userRole === "teacher" ? (
+        <NoClassesContainer>
+          <h2>Welcome to your Library!</h2>
+          <p>You don't have any classes yet. Create your first class to get started.</p>
+          {showCreateForm ? (
+            <CreateFormWrapper>
+              <CreateClass onClose={() => setShowCreateForm(false)} />
+            </CreateFormWrapper>
+          ) : (
+            <CreateButton onClick={handleCreateClass}>Create Your First Class</CreateButton>
+          )}
+        </NoClassesContainer>
+      ) : (
+        <h2>Please choose a class from the sidebar.</h2>
+      )}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 20px;
+  text-align: center;
+`
+
+const NoClassesContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  max-width: 600px;
+
+  h2 {
+    margin-bottom: 10px;
+  }
+
+  p {
+    font-size: 1.1rem;
+    margin-bottom: 20px;
+  }
+`
+
+const CreateButton = styled.button`
+  padding: 12px 24px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 10px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+const CreateFormWrapper = styled.div`
+  width: 100%;
+  max-width: 500px;
+`
diff --git a/frontend/src/sections/04-video-library-page/components/CreateClass.tsx b/frontend/src/sections/04-video-library-page/components/CreateClass.tsx
new file mode 100644
index 0000000000..fca7509b63
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/CreateClass.tsx
@@ -0,0 +1,119 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useState } from "react"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useClassStore } from "../../../store/classStore"
+import { useEditingStore } from "../../../store/editStore"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+interface CreateClassProps {
+  onClose?: () => void
+}
+
+export const CreateClass = ({ onClose }: CreateClassProps = {}) => {
+  const addClass = useClassStore((state) => state.addClass)
+  const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId)
+  const [classTitle, setClassTitle] = useState("")
+  const setIsEditingClass = useEditingStore((state) => state.setIsEditingClass)
+
+  const handleCreateProject = async () => {
+    if (!classTitle.trim()) return
+    if (!currentWorkspaceId) {
+      console.error("No workspace selected")
+      return
+    }
+    await addClass(classTitle, currentWorkspaceId)
+    setClassTitle("")
+
+    // Handle close - either via callback or editing store
+
+    if (onClose) {
+      onClose()
+    } else {
+      setIsEditingClass(false)
+    }
+  }
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <FormContainer
+      as="form"
+      onClick={(e) => e.stopPropagation()}
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleCreateProject()
+      }}
+    >
+      <h3>Create a new class</h3>
+      <ClassNameInput
+        placeholder="Class Name"
+        maxLength={100}
+        required
+        value={classTitle}
+        onChange={(e) => setClassTitle(e.target.value)}
+        onClick={(e) => e.stopPropagation()}
+      />
+      <AddProjectBtn
+        type="submit"
+        onClick={(e) => e.stopPropagation()}
+      >
+        Add Class
+      </AddProjectBtn>
+    </FormContainer>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  width: 92vw;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  border: 2px solid ${({ theme }) => theme.colors.textAlternative};
+  border-radius: 10px;
+  padding: 25px 20px;
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 500px;
+  }
+
+  input {
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#363f49" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+    margin: 6px 0;
+  }
+
+  h3 {
+    color: ${({ theme }) => theme.colors.text};
+    text-align: center;
+  }
+`
+
+const ClassNameInput = styled.input`
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  width: 100%;
+`
+
+const AddProjectBtn = styled.button`
+  height: 40px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 10px;
+  border: none;
+  transition: ease 0.3s;
+  color: white;
+
+  &:hover {
+    transform: scale(0.96);
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/04-video-library-page/components/CreateProject.tsx b/frontend/src/sections/04-video-library-page/components/CreateProject.tsx
new file mode 100644
index 0000000000..65638f3d29
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/CreateProject.tsx
@@ -0,0 +1,270 @@
+//#region ----- IMPORTS -----
+import { useParams } from "react-router-dom"
+import styled from "styled-components"
+import { useState, useRef } from "react"
+import { useProjectStore } from "../../../store/projectStore"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useEditingStore } from "../../../store/editStore"
+import { spacing } from "../../../themes/spacing"
+//#endregion
+
+//#region ----- CONSTANTS -----
+const MAX_FILE_SIZE = 100 * 1024 * 1024 // 100MB
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const CreateProject = () => {
+  const { classId } = useParams<{ classId: string }>()
+  const addProject = useProjectStore((state) => state.addProject)
+  const setIsEditingProject = useEditingStore((state) => state.setIsEditingProject)
+
+  const [projectName, setProjectName] = useState("")
+  const [projectDescription, setProjectDescription] = useState("")
+  const [teacher, setTeacher] = useState("")
+  const [videoFile, setVideoFile] = useState<File | null>(null)
+  const [errorMesage, setErrorMessage] = useState("")
+  const projectNameRef = useRef<HTMLInputElement>(null)
+
+  //#endregion
+
+  //#region ----- HANDLERS -----
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    if (file.size > MAX_FILE_SIZE) {
+      setErrorMessage("Video file size exceeds 100MB. Please select a smaller file.")
+      e.target.value = ""
+      setVideoFile(null)
+      return
+    }
+
+    setErrorMessage("")
+    setVideoFile(file)
+  }
+
+  const handleCreateProject = async () => {
+    if (!projectName.trim()) {
+      setErrorMessage("Please fill in a project name")
+      projectNameRef.current?.focus()
+      return
+    }
+
+    if (!classId) {
+      alert("No class ID found in the route.")
+      return
+    }
+
+    if (videoFile && videoFile.size > MAX_FILE_SIZE) {
+      alert("Video file size exceeds 100MB.")
+      return
+    }
+
+    await addProject(classId, {
+      projectName,
+      projectDescription,
+      teacher,
+      classId,
+      video: videoFile,
+    })
+
+    // Clear inputs after creation
+    setProjectName("")
+    setProjectDescription("")
+    setTeacher("")
+    setVideoFile(null)
+    setIsEditingProject(false)
+  }
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <FormContainer
+      as="form"
+      onSubmit={(e) => {
+        e.preventDefault()
+        handleCreateProject()
+      }}
+    >
+      <h3>Create a new project</h3>
+      <ProjectNameInput
+        placeholder="Project Name"
+        ref={projectNameRef}
+        value={projectName}
+        maxLength={200}
+        onChange={(e) => setProjectName(e.target.value)}
+      />
+      <DescriptionTextArea
+        placeholder="Project Description"
+        value={projectDescription}
+        onChange={(e) => setProjectDescription(e.target.value)}
+      />
+      <ProjectNameInput
+        placeholder="Teacher in video"
+        value={teacher}
+        onChange={(e) => setTeacher(e.target.value)}
+      />
+      <VideoUploadLabel htmlFor="video-upload">
+        Upload video
+        <HiddenFileInput
+          id="video-upload"
+          type="file"
+          accept="video/*"
+          onChange={handleFileChange}
+        />
+      </VideoUploadLabel>
+      {videoFile && (
+        <FileInfo>
+          <FileName>{videoFile.name}</FileName>
+          <RemoveFileBtn onClick={() => setVideoFile(null)}>✕</RemoveFileBtn>
+        </FileInfo>
+      )}
+
+      <ErrorMessage>{errorMesage}</ErrorMessage>
+
+      <AddProjectBtn
+        type="submit"
+        onClick={handleCreateProject}
+      >
+        Add Project
+      </AddProjectBtn>
+    </FormContainer>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: ${spacing.md};
+  width: 92vw;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  border: 2px solid ${({ theme }) => theme.colors.textAlternative};
+  border-radius: 10px;
+  padding: 25px 20px;
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 500px;
+  }
+
+  h3 {
+    color: ${({ theme }) => theme.colors.text};
+    text-align: center;
+    margin: 0 0 ${spacing.sm} 0;
+  }
+
+  input {
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#363f49" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+    margin: 0;
+  }
+
+  textarea {
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#363f49" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+    margin: 0;
+    resize: vertical;
+  }
+
+  input[type="file"] {
+    background-color: transparent;
+  }
+`
+
+const ProjectNameInput = styled.input`
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  width: 100%;
+  height: 45px;
+`
+
+const DescriptionTextArea = styled.textarea`
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  width: 100%;
+  min-height: 200px;
+
+  @media ${MediaQueries.smallPhone} {
+    min-height: 80px !important;
+  }
+`
+
+const AddProjectBtn = styled.button`
+  height: 40px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 10px;
+  border: none;
+  transition: ease 0.3s;
+  color: white;
+
+  &:hover {
+    transform: scale(0.96);
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+  }
+`
+
+const ErrorMessage = styled.p`
+  color: red;
+  font-weight: bold;
+  padding-left: 4px;
+  margin: 0;
+`
+
+const VideoUploadLabel = styled.label`
+  display: inline-block;
+  padding: 10px 16px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border-radius: 6px;
+  cursor: pointer;
+  margin: 0;
+  text-align: center;
+  font-weight: 500;
+  width: fit-content;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+  }
+`
+
+const HiddenFileInput = styled.input`
+  display: none;
+`
+
+const FileInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: ${spacing.sm};
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.colors.lightBlue};
+  border-radius: 6px;
+  margin-top: ${spacing.sm};
+  color: ${({ theme }) => theme.colors.text};
+`
+
+const FileName = styled.span`
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const RemoveFileBtn = styled.button`
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  cursor: pointer;
+  font-size: 1.2em;
+  padding: 0;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/04-video-library-page/components/Project.tsx b/frontend/src/sections/04-video-library-page/components/Project.tsx
new file mode 100644
index 0000000000..b75bd832d7
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/Project.tsx
@@ -0,0 +1,358 @@
+//#region ----- IMPORTS -----
+import { useNavigate } from "react-router-dom"
+import styled from "styled-components"
+import type { ProjectType } from "../../../store/projectStore"
+import { useEditingStore } from "../../../store/editStore"
+import { useProjectStore } from "../../../store/projectStore"
+import { useState } from "react"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useUserStore } from "../../../store/userStore"
+
+//#endregion
+
+//#region ----- INTERFACES -----
+interface ProjectProps
+  extends Pick<ProjectType, "_id" | "projectName" | "projectDescription" | "thumbnail"> {
+  projectId: string
+  teacher: string
+}
+
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const Project = ({
+  projectId,
+  projectName,
+  projectDescription,
+  teacher,
+  thumbnail,
+}: ProjectProps) => {
+  const navigate = useNavigate()
+  const user = useUserStore((state) => state.user)
+  const [isEditing, setIsEditing] = useState(false)
+  const [errorMesage, setErrorMessage] = useState("")
+
+  const setIsRemovingProject = useEditingStore((state) => state.setIsRemovingProject)
+  const setRemovingProjectId = useEditingStore((state) => state.setRemovingProjectId)
+  const updateProject = useProjectStore((state) => state.updateProject)
+
+  const [newName, setNewName] = useState("")
+  const [newDescription, setNewDescription] = useState("")
+  const [newTeacher, setNewTeacher] = useState("")
+
+  const handleUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    if (!projectId) return
+
+    if (!newName.trim() && !newDescription.trim() && !newTeacher.trim()) {
+      setErrorMessage("Please fill in Name or description")
+      return
+    }
+
+    setErrorMessage("")
+    await updateProject(projectId, {
+      newName,
+      newDescription,
+      newTeacher,
+    })
+  }
+
+  const handleShowDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsRemovingProject(true)
+    setRemovingProjectId(projectId)
+  }
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <>
+      <Card
+        role="button"
+        tabIndex={0}
+        aria-label={`View project ${projectName} by ${teacher || "Unknown"}`}
+        onClick={() => navigate(`/review/${projectId}`)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            navigate(`/review/${projectId}`)
+          }
+        }}
+      >
+        <Thumbnail
+          src={thumbnail || "/fallback-thumbnail.jpg"}
+          alt={`Thumbnail for project ${projectName}`}
+        />
+
+        <TextContainer>
+          <h3 title={projectName}>{projectName}</h3>
+          <p title={projectDescription}>{projectDescription}</p>
+        </TextContainer>
+
+        <CardFooter>
+          <p>{teacher || "Unknown"}</p>
+
+          {user?.role === "teacher" && (
+            <Edit>
+              <button
+                aria-label={`Edit project ${projectName}`}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setIsEditing(true)
+                }}
+              >
+                <img
+                  src="/icons/edit.svg"
+                  alt=""
+                  aria-hidden="true"
+                />
+              </button>
+              <button
+                aria-label={`Delete project ${projectName}`}
+                onClick={handleShowDelete}
+              >
+                <img
+                  src="/icons/delete.svg"
+                  alt=""
+                  aria-hidden="true"
+                />
+              </button>
+            </Edit>
+          )}
+
+          <p>Duration: 12:23</p>
+        </CardFooter>
+      </Card>
+
+      {isEditing && (
+        <TransparentBackground
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="edit-project-title"
+          onClick={() => setIsEditing(false)}
+        >
+          <CreateWrapper onClick={(e) => e.stopPropagation()}>
+            <form onSubmit={handleUpdate}>
+              <h2 id="edit-project-title">Edit Project</h2>
+
+              <label htmlFor="newName">New Name</label>
+              <input
+                id="newName"
+                type="text"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+                aria-required="false"
+              />
+
+              <label htmlFor="newDescription">New Description</label>
+              <textarea
+                id="newDescription"
+                value={newDescription}
+                onChange={(e) => setNewDescription(e.target.value)}
+                aria-required="false"
+              />
+
+              <label htmlFor="newTeacher">New Teacher</label>
+              <textarea
+                id="newTeacher"
+                value={newTeacher}
+                onChange={(e) => setNewTeacher(e.target.value)}
+                aria-required="false"
+              />
+
+              <ErrorMessage role="alert">{errorMesage}</ErrorMessage>
+
+              <button type="submit">Update Project</button>
+            </form>
+          </CreateWrapper>
+        </TransparentBackground>
+      )}
+    </>
+  )
+}
+
+//#endregion
+
+//#region ----- STYLED COMPOENTNS -----
+const Edit = styled.div`
+  opacity: 0;
+  visibility: hidden;
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  margin: 0 20px 0 0;
+  transform: translatey(30%);
+  transition:
+    opacity 0.3s ease,
+    visibility 0s linear 0.3s,
+    transform 0.3s ease;
+
+  button {
+    background-color: rgba(255, 255, 255, 0.8);
+    border: none;
+    border-radius: 6px;
+    padding: 6px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      transform 0.2s ease,
+      background-color 0.2s ease;
+
+    &:hover,
+    &:focus {
+      background-color: rgba(255, 255, 255, 1);
+      transform: scale(1.1);
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+`
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 10px;
+  transition: ease 0.3s;
+  overflow: hidden;
+  box-shadow: 0 4px 5px ${({ theme }) => (theme.name === "dark" ? "none" : theme.colors.boxShadow)};
+  background-color: ${({ theme }) =>
+    theme.name === "dark" ? theme.colors.offBackground : "white"};
+
+  &:hover {
+    transform: scale(0.98);
+  }
+
+  &:hover ${Edit} {
+    opacity: 1;
+    visibility: visible;
+    transform: translatey(0%);
+    transition:
+      opacity 1s ease,
+      visibility 0s linear 0s,
+      transform 0.4s ease;
+  }
+`
+
+const Thumbnail = styled.img`
+  width: 100%;
+  object-fit: cover;
+  aspect-ratio: 16 / 9;
+  border-radius: 10px;
+`
+
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 20px 20px 5px 20px;
+  max-width: 100%;
+  height: 100px;
+
+  h3 {
+    white-space: nowrap; /* prevent title wrap */
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  p {
+    display: -webkit-box; /* important for multiline ellipsis */
+    -webkit-line-clamp: 2; /* limit to 3 lines */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: normal; /* allow wrapping inside the lines */
+    margin-top: 8px;
+  }
+`
+
+const CardFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 2px 20px 20px 20px;
+`
+
+const CreateWrapper = styled.div`
+  position: fixed;
+  width: 400px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: ${({ theme }) => theme.colors.offBackground};
+  border: 2px solid ${({ theme }) => theme.colors.textAlternative};
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+
+  @media ${MediaQueries.smallPhone} {
+    width: 90%;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+  }
+
+  input {
+    height: 32px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#363f49" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+    border: none;
+  }
+
+  textarea {
+    height: 100px;
+    padding: 10px 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#363f49" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+
+    @media ${MediaQueries.smallPhone} {
+      height: 80px;
+    }
+  }
+
+  button {
+    padding: 5px 10px;
+    margin: 10px 0;
+    border-radius: 10px;
+    height: 32px;
+    border: none;
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: white;
+  }
+`
+
+const TransparentBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+`
+
+const ErrorMessage = styled.p`
+  color: red;
+  font-weight: bold;
+  padding-left: 4px;
+`
+
+//#endregion
diff --git a/frontend/src/sections/04-video-library-page/components/ProjectsList.tsx b/frontend/src/sections/04-video-library-page/components/ProjectsList.tsx
new file mode 100644
index 0000000000..668695f145
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/ProjectsList.tsx
@@ -0,0 +1,442 @@
+//#region ----- IMPORTS -----
+import { useEffect, useState } from "react"
+import styled from "styled-components"
+import { useNavigate, useParams } from "react-router-dom"
+
+import { useProjectStore } from "../../../store/projectStore"
+import { useUserStore } from "../../../store/userStore"
+import { useEditingStore } from "../../../store/editStore"
+import { useClassStore } from "../../../store/classStore"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+
+import { Project } from "./Project"
+import { CreateProject } from "./CreateProject"
+import { CreateClass } from "./CreateClass"
+import { Loader } from "../../../global-components/loader"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { ConfirmBox } from "../../../global-components/ComfirmBox"
+//#endregion
+
+//#region ----- ROUTER / NAVIGATION -----
+export const ProjectsList = () => {
+  const { classId } = useParams()
+  const navigate = useNavigate()
+  //#endregion
+
+  //#region ----- STORE HOOKS -----
+  const fetchProjects = useProjectStore((state) => state.fetchProjects)
+  const projects = useProjectStore((state) => state.projects)
+  const loading = useProjectStore((state) => state.loading)
+  const error = useProjectStore((state) => state.error)
+  const deleteProject = useProjectStore((state) => state.deleteProject)
+
+  const user = useUserStore((state) => state.user)
+  const userRole = user?.role
+
+  const isEditingClass = useEditingStore((state) => state.isEditingClass)
+  const isEditingProject = useEditingStore((state) => state.isEditingProject)
+  const isRemovingProject = useEditingStore((state) => state.isRemovingProject)
+  const projectId = useEditingStore((state) => state.removingProjectId)
+
+  const setIsEditingClass = useEditingStore((state) => state.setIsEditingClass)
+  const setIsEditingProject = useEditingStore((state) => state.setIsEditingProject)
+  const setIsRemovingProject = useEditingStore((state) => state.setIsRemovingProject)
+
+  const fetchClassById = useClassStore((state) => state.fetchClassById)
+  const currentClass = useClassStore((state) => state.class)
+  const deleteClass = useClassStore((state) => state.deleteClass)
+  const fetchClasses = useClassStore((state) => state.fetchClasses)
+  const classes = useClassStore((state) => state.classes)
+
+  const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId)
+  const loadCurrentWorkspace = useWorkspaceStore((state) => state.loadCurrentWorkspace)
+  //#endregion
+
+  //#region ----- STATE VARIABLES -----
+  const [deleteSelect, setDeleteSelect] = useState<string>("")
+  const [showOptions, setShowOptions] = useState<boolean>(false)
+  //#endregion
+
+  //#region ----- EFFECTS -----
+  useEffect(() => {
+    loadCurrentWorkspace()
+  }, [loadCurrentWorkspace])
+
+  useEffect(() => {
+    if (currentWorkspaceId) {
+      fetchClasses(currentWorkspaceId)
+    }
+  }, [fetchClasses, currentWorkspaceId])
+
+  useEffect(() => {
+    if (classId) {
+      fetchProjects(classId)
+      fetchClassById(classId)
+    }
+  }, [fetchProjects, fetchClassById, classId])
+  //#endregion
+
+  //#region ----- EVENT HANDLERS -----
+  const handleClassChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedClassId = e.target.value
+    navigate(`/library/classes/${selectedClassId}/projects`)
+  }
+
+  const handleTransparentBackground = () => {
+    setIsEditingClass(false)
+    setIsEditingProject(false)
+    setIsRemovingProject(false)
+  }
+
+  const handleEditClass = () => setIsEditingClass(true)
+  const handleEditProject = () => setIsEditingProject(true)
+  const handleCancel = () => setIsRemovingProject(false)
+
+  const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+
+    if (deleteSelect === "classSelect") {
+      if (!classId) return
+      deleteClass(classId)
+      setDeleteSelect("")
+    } else {
+      if (!projectId) return
+      deleteProject(projectId)
+    }
+
+    setIsRemovingProject(false)
+  }
+  //#endregion
+
+  //#region ----- CONDITIONAL RENDERING -----
+  if (loading) {
+    return (
+      <LoadingContainer>
+        <h3>Loading projects</h3>
+        <Loader />
+      </LoadingContainer>
+    )
+  }
+
+  if (error) return <p>Error: {error}</p>
+  //#endregion
+
+  //#region ----- RENDER UI -----
+  return (
+    <Container>
+      {classes.length > 0 && (
+        <HeaderWrapper>
+          <ClassTitle>{currentClass?.classTitle ?? "Loading class title..."}</ClassTitle>
+
+          <TopBar>
+            <ClassSelect
+              aria-label="Select class"
+              value={classId}
+              onChange={handleClassChange}
+            >
+              {classes.map((cls) => (
+                <option
+                  key={cls._id}
+                  value={cls._id}
+                >
+                  {cls.classTitle}
+                </option>
+              ))}
+            </ClassSelect>
+
+            {userRole === "teacher" && (
+              <StyledButton
+                aria-expanded={showOptions}
+                aria-label={showOptions ? "Hide options" : "Show options"}
+                onClick={() => setShowOptions((prev) => !prev)}
+              >
+                {showOptions ? "Hide" : "Show options"}
+              </StyledButton>
+            )}
+          </TopBar>
+
+          {userRole === "teacher" && showOptions && (
+            <ButtonContainer>
+              <div>
+                <StyledButton
+                  $add
+                  type="button"
+                  onClick={handleEditClass}
+                >
+                  Add class
+                </StyledButton>
+                <StyledButton
+                  $add
+                  type="button"
+                  onClick={handleEditProject}
+                >
+                  Add project
+                </StyledButton>
+              </div>
+              <div>
+                <StyledButton
+                  $delete
+                  type="button"
+                  onClick={() => {
+                    setDeleteSelect("classSelect")
+                    setIsRemovingProject(true)
+                  }}
+                >
+                  Delete class
+                </StyledButton>
+              </div>
+            </ButtonContainer>
+          )}
+        </HeaderWrapper>
+      )}
+
+      {classes.length === 0 && userRole === "teacher" ? (
+        <NoClassesContainer>
+          <NoClassesMessage>
+            You don't have any classes yet. Create your first class to get started.
+          </NoClassesMessage>
+          <CreateFirstClassButton onClick={handleEditClass}>
+            Create Your First Class
+          </CreateFirstClassButton>
+        </NoClassesContainer>
+      ) : projects.length === 0 ? (
+        <NoProjectsContainer>
+          <NoProjectsMessage>You have no projects in this class...</NoProjectsMessage>
+        </NoProjectsContainer>
+      ) : (
+        // Here are the projects
+        <ProjectWrapper>
+          {projects.map(({ _id, projectName, projectDescription, teacher, thumbnail }) => (
+            <Project
+              key={_id}
+              projectId={_id ?? ""}
+              projectName={projectName}
+              projectDescription={projectDescription}
+              teacher={teacher}
+              thumbnail={thumbnail}
+            />
+          ))}
+        </ProjectWrapper>
+      )}
+
+      {(isEditingClass || isEditingProject || isRemovingProject) && (
+        <TransparentBackground onClick={handleTransparentBackground}>
+          <CreateWrapper onClick={(e) => e.stopPropagation()}>
+            {userRole === "teacher" && isEditingClass && <CreateClass />}
+            {userRole === "teacher" && isEditingProject && <CreateProject />}
+            {userRole === "teacher" && isRemovingProject && (
+              <ConfirmBox
+                message={"Are you sure you want to delete?"}
+                onCancel={handleCancel}
+                onConfirm={handleDelete}
+              />
+            )}
+          </CreateWrapper>
+        </TransparentBackground>
+      )}
+    </Container>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+
+// STYLED COMPONENTS
+
+interface StyledButtonProps {
+  $add?: boolean
+  $delete?: boolean
+}
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: 24px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 72px 20px;
+  }
+`
+
+const ProjectWrapper = styled.div`
+  display: grid;
+  width: 100%;
+  padding: 0 15px;
+  gap: 25px;
+  justify-content: center;
+  box-sizing: border-box;
+  grid-template-columns: 1fr;
+
+  @media ${MediaQueries.biggerSizes} {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  }
+
+  @media ${MediaQueries.widescreen} {
+    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  }
+`
+
+const LoadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80dvh;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 80%;
+  }
+`
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+`
+
+const ClassTitle = styled.h2`
+  display: none;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+  }
+`
+
+const TopBar = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 16px;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+  }
+`
+
+const ClassSelect = styled.select`
+  text-align: center;
+  padding: 10px 16px;
+  font-size: 24px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  cursor: pointer;
+  width: 203px;
+  max-width: 100%;
+  transition:
+    border-color 0.3s,
+    box-shadow 0.3s;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primaryHover};
+    box-shadow: rgba(0, 0, 0, 0.14);
+  }
+
+  option {
+    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.text};
+  }
+`
+
+const ButtonContainer = styled.div`
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+  }
+`
+
+const StyledButton = styled.button<StyledButtonProps>`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ theme, $add, $delete }) =>
+    $add ? "green" : $delete ? "red" : theme.colors.primary};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 40px;
+  margin: 10px 4px;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ theme, $add, $delete }) =>
+      $add ? "#28b521" : $delete ? "#fa5e5e" : theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+const TransparentBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(2, 2, 2, 0.621);
+  z-index: 10;
+`
+
+const CreateWrapper = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+`
+
+const NoProjectsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  text-align: center;
+  margin: 30px 0;
+`
+
+const NoProjectsMessage = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+`
+
+const NoClassesContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 40px 20px;
+  text-align: center;
+  margin: 30px 0;
+`
+
+const NoClassesMessage = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 1.2rem;
+  margin-bottom: 20px;
+`
+
+const CreateFirstClassButton = styled.button`
+  padding: 12px 24px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+//#endregion
diff --git a/frontend/src/sections/04-video-library-page/components/side-menu/ClassOptions.tsx b/frontend/src/sections/04-video-library-page/components/side-menu/ClassOptions.tsx
new file mode 100644
index 0000000000..4e6235b286
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/side-menu/ClassOptions.tsx
@@ -0,0 +1,227 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useEditingStore } from "../../../../store/editStore"
+import { useClassStore } from "../../../../store/classStore"
+import { ConfirmBox } from "../../../../global-components/ComfirmBox"
+import { useState } from "react"
+//#endregion
+
+//#region ----- TYPES -----
+interface ClassOptionsProps {
+  classId: string
+}
+
+interface StyledButtonProps {
+  $danger?: boolean
+}
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const ClassOptions = ({ classId }: ClassOptionsProps) => {
+  const removingClassId = useEditingStore((state) => state.removingClassId)
+  const setIsRemovingClass = useEditingStore((state) => state.setIsRemovingClass)
+  const deleteClass = useClassStore((state) => state.deleteClass)
+  const updateClass = useClassStore((state) => state.updateClass)
+
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [showOptions, setShowOptions] = useState(true)
+  const [isEditing, setIsEditing] = useState(false)
+  const [newName, setNewName] = useState("")
+
+  const handleDeleteClick = () => {
+    setShowConfirm(true)
+    setShowOptions(false)
+  }
+
+  const handleConfirmDelete = () => {
+    if (removingClassId) deleteClass(removingClassId)
+    setIsRemovingClass(false)
+    setShowConfirm(false)
+  }
+
+  const handleCancel = () => {
+    setIsRemovingClass(false)
+    setShowConfirm(false)
+  }
+
+  const handleUpdating = (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsEditing(true)
+    setShowOptions(false)
+  }
+
+  const handleSubmitUpdate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!classId) return
+    await updateClass(classId, { newTitle: newName })
+    setIsEditing(false)
+    setIsRemovingClass(false)
+  }
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <>
+      <TransparentBackground
+        onClick={handleCancel}
+        aria-hidden="true"
+      />
+
+      {showOptions && (
+        <Container
+          role="menu"
+          aria-label="Class options"
+        >
+          <StyledButton
+            type="button"
+            onClick={handleUpdating}
+            role="menuitem"
+            aria-label="Edit class name"
+          >
+            Edit name
+          </StyledButton>
+          <StyledButton
+            type="button"
+            $danger
+            onClick={handleDeleteClick}
+            role="menuitem"
+            aria-label="Delete class"
+          >
+            Delete Class
+          </StyledButton>
+        </Container>
+      )}
+
+      {showConfirm && (
+        <ConfirmBox
+          aria-modal="true"
+          aria-labelledby="confirm-delete-title"
+          message="Are you sure you want to delete?"
+          onCancel={handleCancel}
+          onConfirm={handleConfirmDelete}
+        />
+      )}
+
+      {isEditing && (
+        <CreateWrapper
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="edit-class-title"
+        >
+          <form onSubmit={handleSubmitUpdate}>
+            <label
+              htmlFor="newName"
+              id="edit-class-title"
+            >
+              New Name
+            </label>
+            <input
+              id="newName"
+              type="text"
+              required
+              maxLength={100}
+              value={newName}
+              onChange={(e) => setNewName(e.target.value)}
+            />
+            <button
+              type="submit"
+              aria-label="Update class name"
+            >
+              Update Class
+            </button>
+          </form>
+        </CreateWrapper>
+      )}
+    </>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #c7c7c7;
+  position: absolute;
+  padding: 5px 10px;
+  border-radius: 15px;
+  border: none;
+  z-index: 11;
+  top: 25%;
+  right: 79%;
+`
+
+const StyledButton = styled.button<StyledButtonProps>`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ $danger, theme }) => ($danger ? "red" : theme.colors.primary)};
+  color: white;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 40px;
+  width: 100%;
+  margin: 5px auto;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ $danger, theme }) => ($danger ? "#f1948a" : theme.colors.primaryHover)};
+    transform: scale(0.98);
+  }
+`
+
+const TransparentBackground = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(2, 2, 2, 0.621);
+  z-index: 10;
+`
+
+const CreateWrapper = styled.div`
+  position: fixed;
+  width: 400px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: ${({ theme }) => theme.colors.background};
+  padding: 24px;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px ${({ theme }) => theme.colors.boxShadow};
+  z-index: 1000;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+  }
+
+  input {
+    height: 32px;
+    padding: 5px 10px;
+    border-radius: 5px;
+  }
+
+  textarea {
+    height: 100px;
+    padding: 10px 10px;
+    border-radius: 5px;
+  }
+
+  button {
+    padding: 5px 10px;
+    margin: 10px 0;
+    border-radius: 10px;
+    height: 32px;
+    border: none;
+    background-color: ${({ theme }) => theme.colors.primary};
+    color: ${({ theme }) => theme.colors.background};
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/04-video-library-page/components/side-menu/SideMenu.tsx b/frontend/src/sections/04-video-library-page/components/side-menu/SideMenu.tsx
new file mode 100644
index 0000000000..bbe65d7390
--- /dev/null
+++ b/frontend/src/sections/04-video-library-page/components/side-menu/SideMenu.tsx
@@ -0,0 +1,254 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useEffect } from "react"
+import { useClassStore } from "../../../../store/classStore"
+import { useWorkspaceStore } from "../../../../store/workspaceStore"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom"
+import { useEditingStore } from "../../../../store/editStore"
+import { useUserStore } from "../../../../store/userStore"
+import { ClassOptions } from "./ClassOptions"
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const SideMenu = () => {
+  const classes = useClassStore((state) => state.classes)
+  const fetchClasses = useClassStore((state) => state.fetchClasses)
+  const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId)
+  const fetchUserWorkspaces = useWorkspaceStore((state) => state.fetchUserWorkspaces)
+  const location = useLocation()
+
+  const setIsEditingClass = useEditingStore((state) => state.setIsEditingClass)
+  const setIsEditingProject = useEditingStore((state) => state.setIsEditingProject)
+  const setIsRemovingClass = useEditingStore((state) => state.setIsRemovingClass)
+  const isRemovingClass = useEditingStore((set) => set.isRemovingClass)
+  const setRemovingClassId = useEditingStore((set) => set.setRemovingClassId)
+  const removingClassId = useEditingStore((state) => state.removingClassId)
+
+  const user = useUserStore((state) => state.user)
+  const userRole = user?.role
+
+  const { classId } = useParams()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!currentWorkspaceId) {
+      // Fetch workspaces and auto-select first one if none selected
+      fetchUserWorkspaces()
+    }
+  }, [fetchUserWorkspaces, currentWorkspaceId])
+
+  useEffect(() => {
+    if (currentWorkspaceId) {
+      fetchClasses(currentWorkspaceId)
+    }
+  }, [fetchClasses, currentWorkspaceId])
+
+  useEffect(() => {
+    // Only redirect if we have classes and no classId is selected
+    if (!classId && classes.length > 0) {
+      navigate(`/library/classes/${classes[0]._id}/projects`, { replace: true })
+    }
+  }, [classId, classes, navigate])
+
+  const handleEditClass = () => setIsEditingClass(true)
+  const handleEditProject = () => setIsEditingProject(true)
+
+  const handleMoreInfo = (e: React.MouseEvent<HTMLButtonElement>, classId: string) => {
+    e.stopPropagation()
+    e.preventDefault()
+    setIsRemovingClass(true)
+    setRemovingClassId(classId)
+  }
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <Container
+      role="navigation"
+      aria-label="Class Side Menu"
+    >
+      <TopSection aria-label="Class List">
+        <h2>Classes</h2>
+        <ProjectWrapper>
+          {classes.map((cls) => {
+            const to = `/library/classes/${cls._id}/projects`
+            const isActive = location.pathname === to
+
+            return (
+              <Class
+                to={to}
+                key={cls._id}
+                $active={isActive}
+                aria-current={isActive ? "page" : undefined}
+              >
+                <span>{cls.classTitle}</span>
+                {userRole === "teacher" && (
+                  <MoreInfo
+                    onClick={(e) => handleMoreInfo(e, cls._id)}
+                    aria-label={`More options for class ${cls.classTitle}`}
+                    aria-haspopup="true"
+                    role="button"
+                    tabIndex={0}
+                  >
+                    &#8942;
+                  </MoreInfo>
+                )}
+              </Class>
+            )
+          })}
+        </ProjectWrapper>
+      </TopSection>
+
+      {isRemovingClass && <ClassOptions classId={removingClassId || ""} />}
+
+      {userRole === "teacher" && (
+        <BottomSection aria-label="Class Actions">
+          <FormContainer>
+            {classes.length > 0 && (
+              <StyledButton
+                type="button"
+                onClick={handleEditClass}
+                aria-label="Add new class"
+              >
+                + Class
+              </StyledButton>
+            )}
+            {classes.length > 0 && (
+              <StyledButton
+                type="button"
+                onClick={handleEditProject}
+                aria-label="Add new project"
+              >
+                + Project
+              </StyledButton>
+            )}
+          </FormContainer>
+        </BottomSection>
+      )}
+    </Container>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 40px;
+  background-color: ${({ theme }) => theme.colors.background};
+  height: 85dvh;
+  margin-top: 60px;
+  display: none;
+
+  h3 {
+    margin-bottom: 24px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    display: flex;
+  }
+`
+
+const TopSection = styled.div`
+  width: 100%;
+
+  h2 {
+    padding: 0 35px;
+    font-size: 24px;
+  }
+`
+
+const ProjectWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  border-radius: 10px;
+  padding: 10px;
+`
+
+const MoreInfo = styled.button`
+  all: unset;
+  cursor: pointer;
+  visibility: hidden;
+  position: relative;
+  margin: 0;
+  padding: 0 4px;
+  transform: scale(1.2);
+  color: ${({ theme }) => theme.colors.textAlternative};
+  transition: ease 0.3s;
+
+  &:hover {
+    font-weight: bolder;
+    transform: scale(1.4);
+    color: ${({ theme }) => theme.colors.text};
+  }
+`
+
+const Class = styled(Link)<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.colors.text};
+  text-decoration: none;
+  transition: ease 0.2s;
+  font-weight: ${({ $active }) => ($active ? "bold" : "normal")};
+  background-color: ${({ $active, theme }) =>
+    $active ? theme.colors.offBackgroundActive : "none"};
+  border-radius: 10px;
+  width: 100%;
+  padding: 10px 25px;
+  position: relative;
+
+  &:hover {
+    transform: scale(0.97);
+    background-color: ${({ theme }) => theme.colors.offBackgroundHover};
+  }
+
+  &:hover ${MoreInfo} {
+    visibility: visible;
+  }
+`
+
+const BottomSection = styled.div`
+  width: 100%;
+`
+
+const StyledButton = styled.button`
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  text-decoration: none;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  height: 40px;
+  width: 80%;
+  margin: 10px auto;
+  text-align: center;
+  transition: ease 0.3s;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(0.98);
+  }
+`
+
+const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  border-radius: 10px;
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 100%;
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/01-main/ReviewPage.tsx b/frontend/src/sections/05-review-page/01-main/ReviewPage.tsx
new file mode 100644
index 0000000000..d14e1db18c
--- /dev/null
+++ b/frontend/src/sections/05-review-page/01-main/ReviewPage.tsx
@@ -0,0 +1,138 @@
+//#region ----- IMPORTS -----
+import { useEffect } from "react"
+import { useParams } from "react-router-dom"
+import styled from "styled-components"
+
+// Components
+import { CommentForm } from "../components/comment-form/CommentForm"
+import { CommentHeader } from "../components/comment-header/CommentHeader"
+import { CommentSection } from "../components/comment-section/01-main/CommentSection"
+import { DescriptionSection } from "../components/description/DescriptionSection"
+import { ReviewNav } from "../components/nav/ReviewNav"
+import { VideoSection } from "../components/video-section/VideoSection"
+
+// Themes / Stores
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useProjectStore } from "../../../store/projectStore"
+import { commentStore } from "../../../store/commentStore"
+import { useTabStore } from "../../../store/tabStore"
+
+//#endregion
+
+//#region ----- COMPONENT -----
+export const ReviewPage = () => {
+  //#region ----- ROUTER / PARAMS -----
+  const { projectId } = useParams<{ projectId: string }>()
+  //#endregion
+
+  //#region ----- STORE HOOKS -----
+  const activeTab = useTabStore((state) => state.activeTab)
+  const fetchProjectById = useProjectStore((state) => state.fetchProjectById)
+  const fetchComments = commentStore((state) => state.fetchComments)
+  const fetchPrivateComments = commentStore((state) => state.fetchPrivateComments)
+  //#endregion
+
+  //#region ----- EFFECTS -----
+  useEffect(() => {
+    if (!projectId) return
+
+    fetchProjectById(projectId)
+    fetchComments(projectId)
+    fetchPrivateComments(projectId)
+
+    return () => {
+      useProjectStore.setState({ project: null })
+      commentStore.setState({
+        projectComments: [],
+        privateComments: [],
+      })
+    }
+  }, [projectId, fetchProjectById, fetchComments, fetchPrivateComments])
+  //#endregion
+
+  //#region ----- CONDITIONAL RENDERING -----
+  if (!projectId) {
+    return (
+      <main
+        role="main"
+        aria-live="polite"
+      >
+        <p>Project ID not found</p>
+      </main>
+    )
+  }
+  //#endregion
+
+  //#region ----- RENDER UI -----
+  return (
+    <>
+      <InvisibleH1>Project Review</InvisibleH1>
+      <ReviewNav aria-label="Review Navigation" />
+      <MainContainer role="main">
+        <StyledVideoSection aria-label="Project video" />
+
+        <RightColumn>
+          <StyledCommentHeader aria-label="Comments header" />
+
+          {activeTab === "description" && (
+            <StyledDescriptionSection aria-label="Project description" />
+          )}
+          {activeTab !== "description" && <StyledCommentSection aria-label="Project comments" />}
+        </RightColumn>
+
+        {activeTab !== "description" && <StyledCommentForm aria-label="Add a comment" />}
+      </MainContainer>
+    </>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const MainContainer = styled.div`
+  display: grid;
+  width: 100%;
+
+  @media ${MediaQueries.biggerSizes} {
+    grid-template-columns: minmax(auto, calc(80dvh * 16 / 9)) minmax(400px, 1fr);
+    grid-template-areas:
+      "video right"
+      "form right";
+    align-items: start;
+  }
+`
+
+const StyledVideoSection = styled(VideoSection)`
+  grid-area: video;
+`
+
+const StyledCommentForm = styled(CommentForm)`
+  grid-area: form;
+`
+
+const RightColumn = styled.div`
+  @media ${MediaQueries.biggerSizes} {
+    grid-area: right;
+    display: flex;
+    flex-direction: column;
+    background-color: ${({ theme }) => theme.colors.offBackground};
+    height: 100vh;
+  }
+`
+
+const StyledCommentHeader = styled(CommentHeader)``
+
+const StyledCommentSection = styled(CommentSection)``
+
+const StyledDescriptionSection = styled(DescriptionSection)``
+
+const InvisibleH1 = styled.h1`
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+`
+
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-form/CommentForm.tsx b/frontend/src/sections/05-review-page/components/comment-form/CommentForm.tsx
new file mode 100755
index 0000000000..5b369c9757
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-form/CommentForm.tsx
@@ -0,0 +1,180 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useState } from "react"
+
+import { commentStore } from "../../../../store/commentStore"
+import { useVideoStore } from "../../../../store/videoStore"
+import { useTimecode } from "../../../../store/timeCodeStore"
+import { useProjectStore } from "../../../../store/projectStore"
+import { useTabStore } from "../../../../store/tabStore"
+//#endregion
+
+//#region ----- COMPONENT -----
+export const CommentForm = () => {
+  //#endregion
+
+  //#region ----- STORE HOOKS / STATE -----
+  const activeTab = useTabStore((state) => state.activeTab)
+  const setActiveTab = useTabStore((state) => state.setActiveTab)
+
+  const incrementMarkerTrigger = useVideoStore((state) => state.incrementMarkerTrigger)
+  const [text, setText] = useState("")
+  const addMessage = commentStore((state) => state.addMessage)
+  const timecode = useTimecode((state) => state.timecode)
+  const stopVideo = useVideoStore((state) => state.stopVideo)
+
+  const project = useProjectStore((state) => state.project)
+  const projectId = project?._id
+  //#endregion
+
+  //#region ----- HANDLERS -----
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!text.trim()) return
+
+    addMessage({
+      content: text,
+      timeStamp: timecode,
+      projectId: projectId,
+      commentType: activeTab,
+    })
+
+    setText("")
+    incrementMarkerTrigger()
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <FormContainer
+      as="form"
+      onSubmit={handleSubmit}
+      aria-label="Add a comment"
+    >
+      <TextInput
+        id="comment-input"
+        type="text"
+        placeholder="Leave your comment here..."
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onClick={stopVideo}
+        aria-required="true"
+        aria-label="Comment text"
+      />
+
+      <Footer>
+        <TimeTag>
+          <p id="timecode-label">{timecode}</p>
+        </TimeTag>
+
+        {activeTab !== "private" && (
+          <Select
+            value={activeTab}
+            onChange={(e) =>
+              setActiveTab(e.target.value as "description" | "question" | "private" | "public")
+            }
+            aria-label="Select comment type"
+          >
+            <option value="question">Question</option>
+            <option value="public">Public Comment</option>
+          </Select>
+        )}
+
+        <SendButton
+          type="submit"
+          aria-label="Send comment"
+        >
+          Send
+        </SendButton>
+      </Footer>
+    </FormContainer>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const FormContainer = styled.section`
+  position: sticky;
+  bottom: 16px;
+  width: 95%;
+  margin: 0 auto;
+  padding: 12px;
+  border-radius: 12px;
+  background-color: ${({ theme }) => theme.colors.specialblue};
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`
+
+const TextInput = styled.input`
+  height: 48px;
+  padding: 10px 18px;
+  font-size: 16px;
+  border: none;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+
+  &:focus {
+    outline: 2px solid #007bff;
+  }
+`
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+`
+
+const TimeTag = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  p {
+    font-size: 14px;
+    font-weight: 700;
+    color: ${({ theme }) => (theme.name === "dark" ? "#fff" : "#444343")};
+    margin: 0;
+  }
+
+  input {
+    width: 16px;
+    height: 16px;
+  }
+`
+
+const Select = styled.select`
+  padding: 6px 12px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 14px;
+  cursor: pointer;
+
+  &:focus {
+    outline: 2px solid #007bff;
+  }
+`
+
+const SendButton = styled.button`
+  padding: 8px 26px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  border: none;
+  border-radius: 15px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover,
+  &:focus {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    outline: 2px solid #007bff;
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-header/CommentHeader.tsx b/frontend/src/sections/05-review-page/components/comment-header/CommentHeader.tsx
new file mode 100644
index 0000000000..9ade4c8197
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-header/CommentHeader.tsx
@@ -0,0 +1,182 @@
+//#region ----- IMPORTS -----
+import { useState } from "react"
+import styled from "styled-components"
+
+import { useProjectStore } from "../../../../store/projectStore"
+import { MediaQueries } from "../../../../themes/mediaQueries"
+import { useTabStore } from "../../../../store/tabStore"
+import { exportCommentsToSrt } from "../../../../utils/exportSrt"
+//#endregion
+
+//#region ----- Component Logic -----
+export const CommentHeader = () => {
+  const project = useProjectStore((state) => state.project)
+  const activeTab = useTabStore((state) => state.activeTab)
+  const setActiveTab = useTabStore((state) => state.setActiveTab)
+  const [isExporting, setIsExporting] = useState(false)
+
+  if (!project) return null
+
+  const handleExportSrt = async () => {
+    if (!project._id) return
+
+    setIsExporting(true)
+    try {
+      await exportCommentsToSrt(project._id, project.projectName)
+      alert("SRT file exported successfully!")
+    } catch (error) {
+      console.error("Export failed:", error)
+      alert("Failed to export SRT file. Please try again.")
+    } finally {
+      setIsExporting(false)
+    }
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <Container>
+      <Title>{project.projectName}</Title>
+      <ButtonGroup
+        role="tablist"
+        aria-label="Comment tabs"
+      >
+        <TabButton
+          role="tab"
+          id="tab-description"
+          aria-selected={activeTab === "description"}
+          $active={activeTab === "description"}
+          onClick={() => setActiveTab("description")}
+        >
+          Description
+        </TabButton>
+        <TabButton
+          role="tab"
+          id="tab-question"
+          aria-selected={activeTab === "question" || activeTab === "public"}
+          $active={activeTab === "question" || activeTab === "public"}
+          onClick={() => setActiveTab("question")}
+        >
+          Question
+        </TabButton>
+        <TabButton
+          role="tab"
+          id="tab-private"
+          aria-selected={activeTab === "private"}
+          $active={activeTab === "private"}
+          onClick={() => setActiveTab("private")}
+        >
+          Comments
+        </TabButton>
+        <ExportButton
+          onClick={handleExportSrt}
+          disabled={isExporting}
+          aria-label="Export comments as SRT file"
+          title="Export comments as SRT subtitle file"
+        >
+          {isExporting ? "Exporting..." : "Export SRT"}
+        </ExportButton>
+      </ButtonGroup>
+    </Container>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 12px;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 0 0 10px 0;
+  }
+`
+
+const Title = styled.h3`
+  margin: 0 0 12px;
+  font-size: 24px;
+  font-weight: 700;
+
+  @media ${MediaQueries.biggerSizes} {
+    margin: 25px 0;
+  }
+`
+
+const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+
+  @media ${MediaQueries.smallPhone} {
+    gap: 2px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    gap: 16px;
+  }
+`
+
+const TabButton = styled.button<{ $active?: boolean }>`
+  background-color: ${({ $active, theme }) => ($active ? theme.colors.primary : "transparent")};
+  color: ${({ $active }) => ($active ? "white" : "#1566e9")};
+  border: 2px solid #1566e9;
+  padding: 8px 15px;
+  border-radius: 24px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+
+  &:hover {
+    background-color: ${({ $active }) => ($active ? "#0056b3" : "#e6f0ff")};
+    transform: scale(0.96);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgb(0 123 255 / 0.5);
+  }
+
+  @media ${MediaQueries.smallPhone} {
+    padding: 4px 10px;
+  }
+`
+
+const ExportButton = styled.button`
+  background-color: #28a745;
+  color: white;
+  border: 2px solid #28a745;
+  padding: 8px 15px;
+  border-radius: 24px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+
+  &:hover:not(:disabled) {
+    background-color: #218838;
+    border-color: #218838;
+    transform: scale(0.96);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgb(40 167 69 / 0.5);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  @media ${MediaQueries.smallPhone} {
+    padding: 4px 10px;
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-section/01-main/CommentSection.tsx b/frontend/src/sections/05-review-page/components/comment-section/01-main/CommentSection.tsx
new file mode 100644
index 0000000000..65b8adf7d7
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/01-main/CommentSection.tsx
@@ -0,0 +1,385 @@
+//#region ----- IMPORTS -----
+import { useState, useMemo } from "react"
+import styled from "styled-components"
+import { MediaQueries } from "../../../../../themes/mediaQueries"
+
+import { commentStore } from "../../../../../store/commentStore"
+import { useUserStore } from "../../../../../store/userStore"
+import { useTabStore } from "../../../../../store/tabStore"
+import { useVideoStore } from "../../../../../store/videoStore"
+
+import type { MessageType } from "../../../../../store/commentStore"
+import { unFormatTime } from "../../video-section/utils/unFormatTime"
+import { handleReplySubmit } from "./utils/handleReplySubmit"
+
+import { CommentCardHeader } from "../components/CommentCardHeader"
+import { CheckBtn } from "../components/CommentCardHeader"
+import { CommentCardMain } from "../components/CommentCardMain"
+import { CommentCardFooter } from "../components/CommentCardFooter"
+import { Edit } from "../components/CommentCardFooter"
+import { ReplyCard } from "../components/reply-card/ReplyCard"
+
+//#endregion
+
+//#region ----- COMPONENT -----
+export const CommentSection = () => {
+  //#region ----- STORE & STATE HOOKS -----
+  const activeTab = useTabStore((state) => state.activeTab)
+  const { user } = useUserStore()
+
+  const [reply, setReply] = useState("")
+  const [replyToCommentId, setReplyToCommentId] = useState<string | null>(null)
+  const [editingCommentId, setEditingCommentId] = useState<string | null>(null)
+  const [editedContent, setEditedContent] = useState("")
+  const [openReplies, setOpenReplies] = useState<Set<string>>(new Set())
+
+  const selectedCommentId = commentStore((state) => state.selectedCommentId)
+  const addReply = commentStore((state) => state.addReply)
+  const updateComment = commentStore((state) => state.updateComment)
+  const toggleCheck = commentStore((state) => state.toggleCheck)
+  const toggleLike = commentStore((state) => state.toggleLike)
+  const deleteComment = commentStore((state) => state.deleteComment)
+  const setSelectedTimeStamp = commentStore((state) => state.setSelectedTimeStamp)
+  //#endregion
+
+  //#region ----- DATA PREPARATION -----
+  const rawMessages: MessageType[] =
+    activeTab === "private"
+      ? commentStore((state) => state.privateComments)
+      : commentStore((state) => state.projectComments)
+
+  const messages = useMemo(
+    () => [...rawMessages].sort((a, b) => unFormatTime(a.timeStamp) - unFormatTime(b.timeStamp)),
+    [rawMessages]
+  )
+  //#endregion
+
+  //#region ----- HANDLERS -----
+  const toggleReplies = (id: string) => {
+    setOpenReplies((prev) => {
+      const newSet = new Set(prev)
+      if (newSet.has(id)) newSet.delete(id)
+      else newSet.add(id)
+      return newSet
+    })
+  }
+
+  const handleToggleCheck = async (id: string) => {
+    if (user?.role !== "teacher") return
+    await toggleCheck(id)
+  }
+
+  const handleSubmit = (e: React.FormEvent) =>
+    handleReplySubmit(
+      e,
+      reply,
+      replyToCommentId,
+      messages,
+      addReply,
+      setReply,
+      setReplyToCommentId,
+      setOpenReplies
+    )
+
+  const handleSaveEdit = async (commentId: string) => {
+    if (!editedContent.trim()) return
+
+    await updateComment({
+      commentId,
+      content: editedContent.trim(),
+    })
+
+    setEditingCommentId(null)
+    setEditedContent("")
+  }
+
+  const handleCardClick = (timeStamp: string, commentId: string) => {
+    const seconds = unFormatTime(timeStamp)
+    setSelectedTimeStamp(timeStamp)
+    commentStore.getState().setSelectedCommentId(commentId)
+    useVideoStore.getState().setTimeCode(seconds)
+    useVideoStore.getState().incrementMarkerTrigger()
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <CommentListContainer>
+      {messages.map(
+        ({
+          _id,
+          content,
+          createdAt,
+          timeStamp,
+          replies,
+          isChecked,
+          commentCreatedBy,
+          likesCount,
+        }) => (
+          <Card
+            key={_id}
+            $role={commentCreatedBy?.role}
+            onClick={() => handleCardClick(timeStamp, _id)}
+            tabIndex={0}
+            role="button"
+            aria-pressed={selectedCommentId === _id}
+            onKeyDown={(e) => {
+              if (e.target !== e.currentTarget) return
+
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault()
+                handleCardClick(timeStamp, _id)
+              }
+            }}
+            className={selectedCommentId === _id ? "active-comment" : ""}
+          >
+            <CommentCardHeader
+              _id={_id}
+              commentCreatedBy={commentCreatedBy}
+              createdAt={createdAt}
+              isChecked={isChecked}
+              user={user}
+              handleToggleCheck={handleToggleCheck}
+            />
+
+            <CommentCardMain
+              _id={_id}
+              content={content}
+              handleSaveEdit={handleSaveEdit}
+              setEditedContent={setEditedContent}
+              editedContent={editedContent}
+              editingCommentId={editingCommentId}
+              setEditingCommentId={setEditingCommentId}
+            />
+
+            <CommentCardFooter
+              _id={_id}
+              likesCount={likesCount}
+              user={user}
+              commentCreatedBy={commentCreatedBy}
+              editingCommentId={editingCommentId}
+              setEditingCommentId={setEditingCommentId}
+              setEditedContent={setEditedContent}
+              content={content}
+              deleteComment={deleteComment}
+              toggleLike={toggleLike}
+              setReplyToCommentId={setReplyToCommentId}
+            />
+
+            {replyToCommentId === _id && (
+              <AddReplyForm onSubmit={handleSubmit}>
+                <textarea
+                  value={reply}
+                  onChange={(e) => setReply(e.target.value)}
+                  placeholder="Write a reply..."
+                  aria-label={`Write a reply for comment by ${commentCreatedBy?.name ?? "user"}`}
+                  maxLength={500}
+                />
+                <button
+                  type="submit"
+                  aria-label="Submit the reply"
+                  disabled={!reply.trim()}
+                >
+                  Add
+                </button>
+              </AddReplyForm>
+            )}
+
+            {(replies?.length ?? 0) > 0 && (
+              <>
+                <ShowReplies
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toggleReplies(_id)
+                  }}
+                  aria-expanded={openReplies.has(_id)}
+                  aria-controls={`replies-${_id}`}
+                >
+                  <ArrowIcon $isOpen={openReplies.has(_id)} />
+                  <RepliesCount $isSingle={replies?.length === 1}>
+                    {`${replies?.length ?? 0} ${replies?.length === 1 ? "Reply" : "Replies"}`}
+                  </RepliesCount>
+                </ShowReplies>
+
+                {openReplies.has(_id) && (
+                  <ReplyCardContainer id={`replies-${_id}`}>
+                    {replies?.map((reply) => (
+                      <ReplyCard
+                        key={reply._id}
+                        reply={reply}
+                        setReplyToCommentId={setReplyToCommentId}
+                      />
+                    ))}
+                  </ReplyCardContainer>
+                )}
+              </>
+            )}
+          </Card>
+        )
+      )}
+    </CommentListContainer>
+  )
+  //#endregion
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+
+const CommentListContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  padding: 16px;
+  gap: 16px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+
+  @media ${MediaQueries.biggerSizes} {
+    overflow: scroll;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+`
+
+const Card = styled.div<{ $role?: string }>`
+  display: flex;
+  flex-direction: column;
+  border-radius: 12px;
+  padding: 12px 20px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+  transition: 0.3s ease;
+  align-items: stretch;
+  cursor: pointer;
+  background-color: ${({ $role, theme }) =>
+    $role === "teacher" && theme.name === "dark"
+      ? theme.colors.primary
+      : $role === "teacher"
+        ? theme.colors.lightBlue
+        : theme.name === "dark"
+          ? theme.colors.lightBlue
+          : theme.colors.background};
+
+  &:hover {
+    transform: scale(0.98);
+    background-color: ${({ $role, theme }) =>
+      $role === "teacher" && theme.name === "dark"
+        ? theme.colors.primaryHover
+        : $role === "teacher"
+          ? theme.colors.lightBlueHover
+          : theme.name === "dark"
+            ? theme.colors.lightBlueHover
+            : theme.colors.backgroundHover};
+  }
+
+  &:focus {
+    transform: scale(0.98);
+    background-color: ${({ $role, theme }) =>
+      $role === "teacher" && theme.name === "dark"
+        ? theme.colors.primaryActive
+        : $role === "teacher"
+          ? theme.colors.lightBlueActive
+          : theme.name === "dark"
+            ? theme.colors.lightBlueActive
+            : theme.colors.backgroundActive};
+    border-left: solid #007bff 3px;
+    transition: ease 0.2s;
+  }
+
+  &:hover ${Edit} {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  &:hover ${CheckBtn} {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  &.active-comment {
+    border-left: solid #007bff 3px;
+    transform: scale(0.98);
+  }
+`
+
+const ReplyCardContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  &:hover ${Edit} {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+`
+
+const AddReplyForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  textarea {
+    background-color: ${({ theme }) => (theme.name === "dark" ? "#242e3e" : "#fff")};
+    color: ${({ theme }) => theme.colors.text};
+    padding: 10px 12px;
+    border: 1px solid ${({ theme }) => theme.colors.textAlternative};
+    border-radius: 6px;
+    width: 100%;
+    min-height: 80px;
+    margin: 10px 0;
+    resize: vertical;
+  }
+
+  button {
+    width: 100%; // full width
+    padding: 8px 14px;
+    border: none;
+    border-radius: 15px;
+    background-color: #007bff;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #0056b3;
+      transform: scale(0.98);
+    }
+  }
+`
+
+const ShowReplies = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 14px;
+  margin-top: 6px;
+  gap: 6px;
+  padding: 4px 0;
+`
+
+const ArrowIcon = styled.span<{ $isOpen: boolean }>`
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid ${({ theme }) => theme.colors.text};
+  transform: ${({ $isOpen }) => ($isOpen ? "rotate(180deg)" : "rotate(0deg)")};
+`
+
+const RepliesCount = styled.span<{ $isSingle: boolean }>`
+  color: ${({ theme }) => theme.colors.textAlternative};
+  margin-left: 2px;
+`
+
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-section/01-main/utils/handleReplySubmit.ts b/frontend/src/sections/05-review-page/components/comment-section/01-main/utils/handleReplySubmit.ts
new file mode 100644
index 0000000000..ad8872ec99
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/01-main/utils/handleReplySubmit.ts
@@ -0,0 +1,46 @@
+type Message = {
+  _id: string
+  projectId?: string
+  [key: string]: any
+}
+
+type AddReplyFunction = (data: {
+  content: string
+  commentId: string
+  projectId: string
+}) => Promise<void>
+
+export const handleReplySubmit = async (
+  e: React.FormEvent,
+  reply: string,
+  replyToCommentId: string | null,
+  messages: Message[],
+  addReply: AddReplyFunction,
+  setReply: (value: string) => void,
+  setReplyToCommentId: (id: string | null) => void,
+  setOpenReplies: (updater: (prev: Set<string>) => Set<string>) => void
+) => {
+  e.preventDefault()
+
+  if (!reply.trim() || !replyToCommentId) return
+
+  const targetComment = messages.find((msg) => msg._id === replyToCommentId)
+  if (!targetComment || !targetComment.projectId) {
+    console.error("Missing projectId or commentId")
+    return
+  }
+
+  try {
+    await addReply({
+      content: reply.trim(),
+      commentId: targetComment._id,
+      projectId: targetComment.projectId,
+    })
+
+    setReply("")
+    setReplyToCommentId(null)
+    setOpenReplies((prev) => new Set(prev).add(replyToCommentId))
+  } catch (err) {
+    console.error("Failed to add reply:", err)
+  }
+}
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardFooter.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardFooter.tsx
new file mode 100644
index 0000000000..069ee85e67
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardFooter.tsx
@@ -0,0 +1,186 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+//#endregion
+
+//#region ----- TYPES / INTERFACES -----
+interface CommentCardFooterProps {
+  _id: string
+  likesCount?: number
+  user: { role?: string; userId?: string } | null
+  commentCreatedBy?: { role?: string; _id?: string }
+  editingCommentId: string | null
+  setEditingCommentId: (id: string | null) => void
+  setEditedContent: (content: string) => void
+  content: string
+  deleteComment: (id: string) => void
+  toggleLike: (id: string) => void
+  setReplyToCommentId: (id: string) => void
+}
+//#endregion
+
+//#region ----- COMPONENT -----
+export const CommentCardFooter = ({
+  _id,
+  likesCount,
+  user,
+  commentCreatedBy,
+  editingCommentId,
+  setEditingCommentId,
+  setEditedContent,
+  content,
+  deleteComment,
+  toggleLike,
+  setReplyToCommentId,
+}: CommentCardFooterProps) => {
+  //#endregion
+
+  //#region ----- HANDLERS -----
+  const handleEdit = () => {
+    setEditingCommentId(_id)
+    setEditedContent(content)
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <Container>
+      <ReactionGroup>
+        <ActionButton
+          type="button"
+          onClick={() => setReplyToCommentId(_id)}
+          onKeyDown={(e) => e.stopPropagation()}
+          aria-label="Reply to comment"
+        >
+          Reply
+        </ActionButton>
+        <ActionButtonIcon
+          onClick={() => toggleLike(_id)}
+          onKeyDown={(e) => e.stopPropagation()}
+          aria-label={`Like comment. Current likes: ${likesCount ?? 0}`}
+        >
+          <img
+            src="/icons/like.svg"
+            alt=""
+            aria-hidden="true"
+          />
+          <LikeCount $count={likesCount ?? 0}>{likesCount ?? 0}</LikeCount>
+        </ActionButtonIcon>
+      </ReactionGroup>
+
+      {(user?.role === "teacher" || user?.userId === commentCreatedBy?._id) && (
+        <Edit>
+          {editingCommentId !== _id && (
+            <EditButton
+              onClick={handleEdit}
+              onKeyDown={(e) => e.stopPropagation()}
+              aria-label="Edit comment"
+            >
+              <img
+                src="/icons/edit.svg"
+                alt=""
+                aria-hidden="true"
+              />
+            </EditButton>
+          )}
+          <EditButton
+            onClick={() => deleteComment(_id)}
+            onKeyDown={(e) => e.stopPropagation()}
+            aria-label="Delete comment"
+          >
+            <img
+              src="/icons/delete.svg"
+              alt=""
+              aria-hidden="true"
+            />
+          </EditButton>
+        </Edit>
+      )}
+    </Container>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`
+
+const ReactionGroup = styled.div`
+  display: flex;
+  column-gap: 10px;
+`
+
+const ActionButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.textAlternative};
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: underline;
+    transform: scale(0.95);
+  }
+`
+
+const ActionButtonIcon = styled.button`
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: 0;
+  transform: scale(0.7);
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.text};
+  transition: all 0.3s ease;
+
+  img {
+    filter: ${({ theme }) => theme.filter.inverted};
+  }
+
+  &:hover img {
+    transform: scale(0.9);
+  }
+`
+
+const LikeCount = styled.span<{ $count: number }>`
+  visibility: ${({ $count }) => ($count > 0 ? "visible" : "hidden")};
+  font-size: 20px;
+`
+
+export const Edit = styled.div`
+  display: flex;
+  opacity: 0;
+  visibility: hidden;
+  column-gap: 10px;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-right: 10px;
+  transform: translateY(10px);
+`
+
+const EditButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+
+  img {
+    filter: ${({ theme }) => theme.filter.inverted};
+  }
+
+  &:hover img {
+    transform: scale(0.9);
+  }
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardHeader.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardHeader.tsx
new file mode 100644
index 0000000000..42715fc8c6
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardHeader.tsx
@@ -0,0 +1,135 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import {
+  CircleCheckboxLabel,
+  HiddenCheckbox,
+  StyledCircle,
+} from "../../../../../global-components/checkbox"
+import moment from "moment"
+//#endregion
+
+//#region ----- INTERFACES / TYPES -----
+interface CommentCardHeaderProps {
+  _id: string
+  commentCreatedBy?: {
+    name?: string
+    profileImage?: string
+    role?: string
+  }
+  createdAt?: string | Date
+  isChecked: boolean
+  user?: { role?: string } | null
+  handleToggleCheck: (id: string) => void
+}
+//#endregion
+
+//#region ----- COMPONENT -----
+export const CommentCardHeader: React.FC<CommentCardHeaderProps> = ({
+  _id,
+  commentCreatedBy,
+  createdAt,
+  isChecked,
+  user,
+  handleToggleCheck,
+}) => {
+  //#region ----- VARIABLES -----
+  const name = commentCreatedBy?.name || "Anonymous"
+  const timestamp = createdAt ? moment(createdAt).fromNow() : "Unknown time"
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <Container>
+      <ImageContainer $role={commentCreatedBy?.role}>
+        <img
+          src={commentCreatedBy?.profileImage || "/default-profile.png"}
+          alt={`${name}'s profile image`}
+        />
+      </ImageContainer>
+
+      <Content>
+        <CardHeader aria-label={`Comment by ${name} ${timestamp}`}>
+          <strong>{name}</strong>
+          <Dot>&middot;</Dot>
+          <span>{timestamp}</span>
+        </CardHeader>
+      </Content>
+
+      {(user?.role === "teacher" || isChecked) && (
+        <CheckBtn
+          $checked={isChecked}
+          role="checkbox"
+          aria-checked={isChecked}
+          aria-label={`Mark comment by ${name} as checked`}
+          onClick={() => handleToggleCheck(_id)}
+        >
+          <CircleCheckboxLabel>
+            <HiddenCheckbox
+              checked={isChecked}
+              onChange={() => handleToggleCheck(_id)}
+            />
+            <StyledCircle $checked={isChecked} />
+          </CircleCheckboxLabel>
+        </CheckBtn>
+      )}
+    </Container>
+  )
+  //#endregion
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  gap: 15px;
+  align-items: center;
+`
+
+const ImageContainer = styled.div<{ $role?: string }>`
+  flex-shrink: 0;
+  height: 32px;
+  width: 32px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+const Content = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+`
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${({ theme }) => theme.colors.textAlternative};
+`
+
+const Dot = styled.span``
+
+export const CheckBtn = styled.div<{ $checked: boolean }>`
+  opacity: ${({ $checked }) => ($checked ? "1" : "0")};
+  visibility: ${({ $checked }) => ($checked ? "visible" : "hidden")};
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  cursor: pointer;
+  transform: translateY(30%);
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease,
+    transform 0.3s ease;
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardMain.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardMain.tsx
new file mode 100644
index 0000000000..29840a6a03
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/CommentCardMain.tsx
@@ -0,0 +1,89 @@
+import styled from "styled-components"
+import React from "react"
+
+interface CommentCardMainProps {
+  _id: string
+  content: string
+  handleSaveEdit: (id: string) => void
+  setEditedContent: (content: string) => void
+  editedContent: string
+  editingCommentId: string | null
+  setEditingCommentId: (id: string | null) => void
+}
+
+export const CommentCardMain: React.FC<CommentCardMainProps> = ({
+  _id,
+  content,
+  handleSaveEdit,
+  setEditedContent,
+  editedContent,
+  editingCommentId,
+  setEditingCommentId,
+}) => {
+  return (
+    <Container>
+      {editingCommentId === _id ? (
+        <>
+          <TextArea
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            rows={3}
+            aria-label="Write a question or comment to the video"
+          />
+          <ButtonGroup>
+            <Button onClick={() => handleSaveEdit(_id)}>Save</Button>
+            <Button
+              onClick={() => {
+                setEditingCommentId(null)
+                setEditedContent(content)
+              }}
+            >
+              Cancel
+            </Button>
+          </ButtonGroup>
+        </>
+      ) : (
+        content
+      )}
+    </Container>
+  )
+}
+
+/* ---------------- Styled Components ---------------- */
+
+const Container = styled.p`
+  text-align: left;
+  width: 100%;
+  margin: 8px 0;
+  color: ${({ theme }) => theme.colors.textAlternative};
+`
+
+const TextArea = styled.textarea`
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  border-radius: 8px;
+  border: 1px solid lightgray;
+`
+
+const ButtonGroup = styled.div`
+  margin-top: 8px;
+  display: flex;
+  gap: 10px;
+`
+
+const Button = styled.button`
+  padding: 8px 14px;
+  border: none;
+  border-radius: 15px;
+  margin: 8px 2px;
+  color: white;
+  background-color: #007bff;
+  transition: ease 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #1988fe;
+    transform: scale(0.97);
+  }
+`
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCard.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCard.tsx
new file mode 100644
index 0000000000..aeebb9e2da
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCard.tsx
@@ -0,0 +1,101 @@
+import styled from "styled-components"
+import type { ReplyType } from "../../../../../../store/commentStore"
+import { commentStore } from "../../../../../../store/commentStore"
+import { useState } from "react"
+import { ReplyCardHeader } from "./ReplyCardHeader"
+import { Edit } from "./ReplyCardFooter"
+import { ReplyCardMain } from "./ReplyCardMain"
+import { ReplyCardFooter } from "./ReplyCardFooter"
+
+type ReplyCardProps = {
+  reply: ReplyType
+  setReplyToCommentId: (id: string | null) => void
+}
+
+export const ReplyCard = ({ reply, setReplyToCommentId }: ReplyCardProps) => {
+  const deleteReply = commentStore((state) => state.deleteReply)
+  const updateReply = commentStore((state) => state.updateReply)
+  const toggleReplyLike = commentStore((state) => state.toggleReplyLike)
+
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedContent, setEditedContent] = useState(reply.content)
+
+  const handleSaveEdit = async () => {
+    if (editedContent.trim() === "") return
+
+    await updateReply({
+      replyId: reply._id,
+      content: editedContent.trim(),
+    })
+
+    setIsEditing(false)
+  }
+
+  return (
+    <Card $role={reply.replyCreatedBy?.role}>
+      <ReplyCardHeader reply={reply} />
+
+      <ReplyCardMain
+        reply={reply}
+        editedContent={editedContent}
+        setEditedContent={setEditedContent}
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        handleSaveEdit={handleSaveEdit}
+      />
+
+      <ReplyCardFooter
+        reply={reply}
+        isEditing={isEditing}
+        setIsEditing={setIsEditing}
+        setReplyToCommentId={setReplyToCommentId}
+        toggleReplyLike={toggleReplyLike}
+        deleteReply={deleteReply}
+      />
+    </Card>
+  )
+}
+
+const Card = styled.div<{ $role?: string }>`
+  width: 100%;
+  margin: 12px auto;
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ $role, theme }) =>
+    $role === "teacher" && theme.name === "dark"
+      ? theme.colors.primary
+      : $role === "teacher"
+        ? theme.colors.lightBlue
+        : theme.name === "dark"
+          ? theme.colors.lightBlue
+          : theme.colors.background};
+  border-radius: 12px;
+  padding: 12px 20px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
+  border: solid lightgray 1px;
+  transition: 0.3s ease;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(0.98);
+    background-color: ${({ $role, theme }) =>
+      $role === "teacher" && theme.name === "dark"
+        ? theme.colors.primaryHover
+        : $role === "teacher"
+          ? theme.colors.lightBlueHover
+          : theme.name === "dark"
+            ? theme.colors.lightBlueHover
+            : theme.colors.backgroundHover};
+  }
+
+  &:hover ${Edit} {
+    opacity: 1;
+    visibility: visible;
+    transform: translatey(0%);
+    transition:
+      opacity 1s ease,
+      visibility 0s linear 0s,
+      transform 0.4s ease;
+  }
+`
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardFooter.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardFooter.tsx
new file mode 100644
index 0000000000..289297ebd4
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardFooter.tsx
@@ -0,0 +1,175 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import type { ReplyType } from "../../../../../../store/commentStore"
+//#endregion
+
+//#region ----- INTERFACES / TYPES -----
+type ReplyCardFooterProps = {
+  reply: ReplyType
+  isEditing: boolean
+  setIsEditing: (value: boolean) => void
+  setReplyToCommentId: (id: string | null) => void
+  toggleReplyLike: (replyId: string) => void
+  deleteReply: (replyId: string, commentId: string) => void
+}
+//#endregion
+
+//#region ----- COMPONENT -----
+export const ReplyCardFooter = ({
+  reply,
+  isEditing,
+  setIsEditing,
+  setReplyToCommentId,
+  toggleReplyLike,
+  deleteReply,
+}: ReplyCardFooterProps) => {
+  //#region ----- RENDER -----
+  return (
+    <Container
+      role="group"
+      aria-label="Reply actions"
+    >
+      <Actions>
+        <ActionButton
+          onClick={() => setReplyToCommentId(reply.commentId)}
+          aria-label="Reply to this comment"
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          Reply
+        </ActionButton>
+
+        <ActionButtonIcon
+          onClick={() => toggleReplyLike(reply._id)}
+          aria-label={`Like this reply. ${reply.likesCount ?? 0} likes`}
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <img
+            src="/icons/like.svg"
+            alt=""
+            aria-hidden="true"
+          />
+          <LikeCount count={reply.likesCount ?? 0}>
+            {reply.likesCount ?? 0}
+          </LikeCount>
+        </ActionButtonIcon>
+      </Actions>
+
+      <Edit>
+        {!isEditing && (
+          <IconButton
+            onClick={() => setIsEditing(true)}
+            aria-label="Edit this reply"
+            onKeyDown={(e) => e.stopPropagation()}
+          >
+            <img
+              src="/icons/edit.svg"
+              alt=""
+              aria-hidden="true"
+            />
+          </IconButton>
+        )}
+
+        <IconButton
+          onClick={() => deleteReply(reply._id, reply.commentId)}
+          aria-label="Delete this reply"
+          onKeyDown={(e) => e.stopPropagation()}
+        >
+          <img
+            src="/icons/delete.svg"
+            alt=""
+            aria-hidden="true"
+          />
+        </IconButton>
+      </Edit>
+    </Container>
+  )
+  //#endregion
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+`
+
+const Actions = styled.div`
+  display: flex;
+  column-gap: 10px;
+`
+
+const ActionButton = styled.button`
+  color: ${({ theme }) => theme.colors.textAlternative};
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+    outline: none;
+  }
+`
+
+const ActionButtonIcon = styled.button`
+  display: flex;
+  column-gap: 15px;
+  background: none;
+  border: none;
+  padding: 0;
+  transform: scale(0.7);
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    transform: scale(0.9);
+    outline: none;
+  }
+
+  img {
+    filter: ${({ theme }) => theme.filter.inverted};
+  }
+`
+
+const IconButton = styled.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover,
+  &:focus {
+    transform: scale(0.9);
+    outline: none;
+  }
+
+  img {
+    filter: ${({ theme }) => theme.filter.inverted};
+  }
+`
+
+const LikeCount = styled.p<{ count: number }>`
+  visibility: ${({ count }) => (count > 0 ? "inline-block" : "hidden")};
+  font-size: 20px;
+  margin: 0;
+`
+
+export const Edit = styled.div`
+  opacity: 0;
+  visibility: hidden;
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  margin: 0 20px 0 0;
+  cursor: pointer;
+  transform: translateY(30%);
+  transition:
+    opacity 0.3s ease,
+    visibility 0s linear 0.3s,
+    transform 0.3s ease;
+`
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardHeader.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardHeader.tsx
new file mode 100644
index 0000000000..1739534859
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardHeader.tsx
@@ -0,0 +1,83 @@
+import styled from "styled-components"
+import moment from "moment"
+import type { ReplyType } from "../../../../../../store/commentStore"
+
+type ReplyCardHeaderProps = {
+  reply: ReplyType
+}
+
+export const ReplyCardHeader = ({ reply }: ReplyCardHeaderProps) => {
+  return (
+    <Container>
+      <ImageContainer onClick={() => console.log(reply._id)}>
+        <img
+          src={reply.replyCreatedBy?.profileImage || "/default-profile.png"}
+          aria-label={`View profile of ${reply.replyCreatedBy?.name || "Anonymous"}`}
+        />
+      </ImageContainer>
+      <Content>
+        <CardHeader>
+          <strong>{reply.replyCreatedBy?.name || "Anonymous"}</strong>
+          <Dot aria-hidden="true">&middot;</Dot>
+          <span aria-label="Shows when posted">
+            {moment(reply.createdAt).fromNow()}
+          </span>
+        </CardHeader>
+      </Content>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  gap: 15px;
+  align-items: center;
+`
+
+const ImageContainer = styled.div`
+  flex-shrink: 0;
+  height: 32px;
+  width: 32px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`
+
+const Content = styled.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+`
+
+const CardHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${({ theme }) => theme.colors.textAlternative};
+`
+
+const Dot = styled.span``
+
+export const CheckBtn = styled.div`
+  opacity: 0;
+  visibility: hidden;
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  cursor: pointer;
+  transform: translatey(30%);
+  transition:
+    opacity 0.3s ease,
+    visibility 0s linear 0.3s,
+    transform 0.3s ease;
+`
diff --git a/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardMain.tsx b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardMain.tsx
new file mode 100644
index 0000000000..12b6731761
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/comment-section/components/reply-card/ReplyCardMain.tsx
@@ -0,0 +1,71 @@
+import styled from "styled-components"
+import type { ReplyType } from "../../../../../../store/commentStore"
+
+type ReplyCardMainProps = {
+  reply: ReplyType
+  editedContent: string
+  setEditedContent: (content: string) => void
+  isEditing: boolean
+  setIsEditing: (value: boolean) => void
+  handleSaveEdit: () => void
+}
+
+export const ReplyCardMain = ({
+  reply,
+  editedContent,
+  setEditedContent,
+  isEditing,
+  setIsEditing,
+  handleSaveEdit,
+}: ReplyCardMainProps) => {
+  return (
+    <Container>
+      {isEditing ? (
+        <>
+          <textarea
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            rows={3}
+            style={{
+              width: "100%",
+              padding: "8px",
+              fontSize: "14px",
+              borderRadius: "8px",
+              border: "1px solid lightgray",
+            }}
+            maxLength={500}
+          />
+          <div style={{ marginTop: "8px", display: "flex", gap: "10px" }}>
+            <button onClick={handleSaveEdit}>Save</button>
+            <button
+              onClick={() => {
+                setIsEditing(false)
+                setEditedContent(reply.content)
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </>
+      ) : (
+        reply.content
+      )}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  text-align: left;
+  width: 100%;
+  margin: 8px 0;
+  color: ${({ theme }) => theme.colors.textAlternative};
+
+  button {
+    padding: 8px 14px;
+    border: none;
+    border-radius: 15px;
+    margin: 8px 2px;
+    color: white;
+    background-color: #007bff;
+  }
+`
diff --git a/frontend/src/sections/05-review-page/components/description/DescriptionSection.tsx b/frontend/src/sections/05-review-page/components/description/DescriptionSection.tsx
new file mode 100644
index 0000000000..d4ee691555
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/description/DescriptionSection.tsx
@@ -0,0 +1,27 @@
+import styled from "styled-components"
+import { useProjectStore } from "../../../../store/projectStore"
+
+export const DescriptionSection = () => {
+  const project = useProjectStore((state) => state.project)
+
+  if (!project) return null // You could replace this with a loading spinner for better UX
+
+  return (
+    <CommentListContainer
+      role="region"
+      aria-labelledby="project-title"
+      aria-describedby="project-description"
+    >
+      <h3 id="project-title">{project.projectName}</h3>
+      <p id="project-description">{project.projectDescription}</p>
+    </CommentListContainer>
+  )
+}
+
+const CommentListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  width: 100%;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+`
diff --git a/frontend/src/sections/05-review-page/components/nav/ReviewNav.tsx b/frontend/src/sections/05-review-page/components/nav/ReviewNav.tsx
new file mode 100644
index 0000000000..244d78b687
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/nav/ReviewNav.tsx
@@ -0,0 +1,52 @@
+import styled from "styled-components"
+import { useNavigate } from "react-router"
+
+export const ReviewNav = () => {
+  const navigate = useNavigate()
+
+  return (
+    <Container>
+      <BackContainer
+        aria-label="Go back to prevoius page"
+        onClick={() => navigate(-1)}
+      >
+        <img
+          src="/icons/back.svg"
+          alt="Go back"
+        />
+        <p>Go back</p>
+      </BackContainer>
+    </Container>
+  )
+}
+
+const Container = styled.nav`
+  /* background-color: ${({ theme }) => theme.colors.primary}; */
+  display: flex;
+  align-content: center;
+  column-gap: 5px;
+  height: 45px;
+  width: 100%;
+  border-bottom: solid gray 1px;
+`
+
+const BackContainer = styled.div`
+  color: ${({ theme }) => theme.colors.text};
+  display: flex;
+  align-content: center;
+  align-items: center;
+  column-gap: 5px;
+  margin: 0 10px;
+  transition: ease 0.3s;
+  text-decoration: none;
+
+  &:hover {
+    transform: scale(0.95);
+    color: ${({ theme }) => theme.colors.textHover};
+  }
+
+  img {
+    height: 20px;
+    filter: ${({ theme }) => theme.filter.inverted};
+  }
+`
diff --git a/frontend/src/sections/05-review-page/components/video-section/VideoSection.tsx b/frontend/src/sections/05-review-page/components/video-section/VideoSection.tsx
new file mode 100644
index 0000000000..02a1a0371a
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/VideoSection.tsx
@@ -0,0 +1,782 @@
+//#region ---- Imports -----
+import { useRef, useState, useEffect } from "react"
+import styled from "styled-components"
+import { PlayPauseButton } from "./components/PlayPauseBtn"
+import { formatTime } from "./utils/formatTime"
+import { unFormatTime } from "./utils/unFormatTime"
+import { commentStore } from "../../../../store/commentStore"
+import type { MessageType } from "../../../../store/commentStore"
+import { useTimecode } from "../../../../store/timeCodeStore"
+import { useProjectStore } from "../../../../store/projectStore"
+import { useVideoStore } from "../../../../store/videoStore"
+import { useTabStore } from "../../../../store/tabStore"
+//#endregion
+
+//#region ---- Component -----
+export const VideoSection = () => {
+  //#region ---- REFS -----
+  const timelineRef = useRef<HTMLDivElement | null>(null)
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  //#endregion
+
+  //#region ---- STATE -----
+  const [volume, setVolume] = useState(1)
+  const [videoLoaded, setVideoLoaded] = useState(false)
+  const [videoUrl, setVideoUrl] = useState<string | null>(null)
+  const [isFullscreen, setIsFullscreen] = useState(false)
+  const [isTimelineZoomed, setIsTimelineZoomed] = useState(false)
+  const [showSubtitles, setShowSubtitles] = useState(false)
+  //#endregion
+
+  //#region ---- STORES -----
+  const activeTab = useTabStore((state) => state.activeTab)
+
+  const {
+    isPlaying,
+    togglePlay,
+    videoRef: videoEl,
+    setVideoRef,
+    setTimeCode,
+    currentTime,
+    markerTriggerCount,
+  } = useVideoStore()
+
+  const messages: MessageType[] = commentStore((state) =>
+    activeTab === "private" ? state.privateComments : state.projectComments
+  )
+
+  const setTimecode = useTimecode((state) => state.setTimecode)
+  const formattedTime = useTimecode((state) => state.timecode)
+
+  const projectVideo = useProjectStore((state) => state.project?.video)
+  const duration = formatTime(videoEl?.duration || 0)
+  //#endregion
+
+  //#region ---- EFFECTS -----
+  // Sync local videoRef with Zustand store
+  useEffect(() => {
+    if (videoRef.current) {
+      setVideoRef(videoRef.current)
+    }
+  }, [setVideoRef])
+
+  // Set video URL on project load
+  useEffect(() => {
+    if (!projectVideo) {
+      setVideoUrl(null)
+      return
+    }
+
+    if (typeof projectVideo === "string") {
+      setVideoUrl(projectVideo)
+    } else if (projectVideo instanceof File) {
+      const url = URL.createObjectURL(projectVideo)
+      setVideoUrl(url)
+      return () => URL.revokeObjectURL(url)
+    }
+  }, [projectVideo])
+
+  // Loaded metadata
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handleCanPlayThrough = () => setVideoLoaded(true)
+    video.addEventListener("canplaythrough", handleCanPlayThrough)
+    return () => video.removeEventListener("canplaythrough", handleCanPlayThrough)
+  }, [])
+
+  // Update current time and formatted time on play
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handleTimeUpdate = () => {
+      setTimeCode(video.currentTime)
+      setTimecode(formatTime(video.currentTime))
+    }
+
+    video.addEventListener("timeupdate", handleTimeUpdate)
+    return () => video.removeEventListener("timeupdate", handleTimeUpdate)
+  }, [setTimeCode, setTimecode])
+
+  // Keyboard shortcuts for video control
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const video = videoRef.current
+      if (!video) return
+
+      // Only handle if not typing in an input/textarea
+      const target = e.target as HTMLElement
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return
+
+      if (e.key === "ArrowRight") {
+        e.preventDefault()
+        video.currentTime = Math.min(video.currentTime + 3, video.duration)
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault()
+        video.currentTime = Math.max(video.currentTime - 3, 0)
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [])
+
+  // ✅ Seek video when markerTriggerCount changes
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    video.currentTime = currentTime
+    video.pause()
+  }, [markerTriggerCount])
+  //#endregion
+
+  //#region ---- HANDLERS -----
+  // Volume
+  const changeVolume = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newVolume = parseFloat(e.target.value)
+    setVolume(newVolume)
+    if (videoRef.current) {
+      videoRef.current.volume = newVolume
+    }
+  }
+
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen)
+  }
+
+  // Seek via timeline
+  const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const timeline = timelineRef.current
+    const video = videoRef.current
+    if (!timeline || !video || !video.duration) return
+
+    const rect = timeline.getBoundingClientRect()
+    const clickX = e.clientX - rect.left
+    const percent = clickX / rect.width
+    const newTime = percent * video.duration
+    video.currentTime = newTime
+  }
+
+  const progress =
+    videoRef.current && videoRef.current.duration
+      ? (videoRef.current.currentTime / videoRef.current.duration) * 100
+      : 0
+
+  // Get current subtitle to display based on video time
+  const getCurrentSubtitle = () => {
+    if (!showSubtitles || !videoEl || !messages.length) return null
+
+    const currentVideoTime = currentTime
+    const threshold = 6 // Show subtitle for 6 seconds
+
+    // Find the most recent comment that should be displayed
+    // Sort comments by timestamp and find the latest one that has started
+    let activeComment = null
+    let latestCommentTime = -1
+
+    for (const message of messages) {
+      const commentTime = unFormatTime(message.timeStamp)
+
+      // Check if this comment should be showing now
+      if (
+        currentVideoTime >= commentTime &&
+        currentVideoTime < commentTime + threshold &&
+        commentTime > latestCommentTime
+      ) {
+        activeComment = message
+        latestCommentTime = commentTime
+      }
+    }
+
+    return activeComment
+  }
+
+  const currentSubtitle = getCurrentSubtitle()
+  //#endregion
+
+  //#region ---- RENDER -----
+  return (
+    <Container $isFullScreen={isFullscreen}>
+      {/* Loading state */}
+      {!videoLoaded && (
+        <PulsingBackground>
+          <SpinningCircle />
+        </PulsingBackground>
+      )}
+
+      {/* Video render */}
+      <StyledVideo
+        ref={videoRef}
+        onClick={togglePlay}
+        controls={false}
+        aria-label={isPlaying ? "Pause video" : "Play video"}
+        $isFullScreen={isFullscreen}
+      >
+        {videoUrl && (
+          <source
+            src={videoUrl}
+            type="video/mp4"
+          />
+        )}
+        Your browser does not support the video tag.
+      </StyledVideo>
+
+      {/* Subtitle display */}
+      {currentSubtitle && (
+        <SubtitleContainer $isFullScreen={isFullscreen}>
+          <SubtitleText>{currentSubtitle.content}</SubtitleText>
+        </SubtitleContainer>
+      )}
+
+      <Controls $isFullScreen={isFullscreen} $isZoomed={isTimelineZoomed}>
+        <PlayPauseButton
+          isPlaying={isPlaying}
+          onClick={togglePlay}
+          aria-label={isPlaying ? "Pause video" : "Play video"}
+        />
+        <SkipButton
+          onClick={() => {
+            if (videoRef.current) {
+              videoRef.current.currentTime = Math.max(videoRef.current.currentTime - 3, 0)
+            }
+          }}
+          aria-label="Skip backward 3 seconds"
+          title="Skip backward 3 seconds"
+        >
+          <SkipIcon direction="left">
+            <div className="arrow" />
+            <div className="arrow" />
+          </SkipIcon>
+        </SkipButton>
+        <SkipButton
+          onClick={() => {
+            if (videoRef.current) {
+              videoRef.current.currentTime = Math.min(
+                videoRef.current.currentTime + 3,
+                videoRef.current.duration
+              )
+            }
+          }}
+          aria-label="Skip forward 3 seconds"
+          title="Skip forward 3 seconds"
+        >
+          <SkipIcon direction="right">
+            <div className="arrow" />
+            <div className="arrow" />
+          </SkipIcon>
+        </SkipButton>
+        <TimeDisplay aria-live="polite">
+          {formattedTime} / {duration}
+        </TimeDisplay>
+        <VolumeControl>
+          <label htmlFor="volumeSlider">🔊</label>
+          <input
+            id="volumeSlider"
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={volume}
+            onChange={changeVolume}
+            role="slider"
+            aria-valuemin={0}
+            aria-valuemax={1}
+            aria-valuenow={volume}
+            aria-label="Volume control"
+          />
+        </VolumeControl>
+
+        <ZoomButton
+          onClick={() => setIsTimelineZoomed(!isTimelineZoomed)}
+          aria-label={isTimelineZoomed ? "Exit timeline zoom" : "Zoom timeline"}
+          title={isTimelineZoomed ? "Exit timeline zoom" : "Zoom timeline"}
+        >
+          {isTimelineZoomed ? "🔍−" : "🔍+"}
+        </ZoomButton>
+
+        <SubtitleButton
+          onClick={() => setShowSubtitles(!showSubtitles)}
+          aria-label={showSubtitles ? "Hide subtitles" : "Show subtitles"}
+          title={showSubtitles ? "Hide comment subtitles" : "Show comment subtitles"}
+          $active={showSubtitles}
+        >
+          CC
+        </SubtitleButton>
+
+        <FullscreenButton
+          onClick={toggleFullscreen}
+          aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
+        >
+          {isFullscreen ? "⛶" : "⛶"}
+        </FullscreenButton>
+      </Controls>
+
+      <TimelineContainer $isZoomed={isTimelineZoomed} $isFullScreen={isFullscreen}>
+        <PlayBar
+          ref={timelineRef}
+          onClick={handleTimelineClick}
+          role="progressbar"
+          aria-valuemin={0}
+          aria-valuemax={videoEl?.duration || 0}
+          aria-valuenow={videoEl?.currentTime || 0}
+          aria-label="Video progress bar"
+          $isFullScreen={isFullscreen}
+          $isZoomed={isTimelineZoomed}
+        >
+        <Progress style={{ width: `${progress}%` }} />
+        {videoLoaded &&
+          messages.map(({ _id, timeStamp, content }) => {
+            const timeInSeconds = unFormatTime(timeStamp)
+            const percent = videoEl?.duration ? (timeInSeconds / videoEl.duration) * 100 : 0
+
+            return (
+              <MarkerWrapper
+                key={_id}
+                style={{ left: `${percent}%` }}
+              >
+                <Marker
+                  role="button"
+                  tabIndex={0}
+                  aria-label={`Comment at ${timeStamp}: ${content}`}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    commentStore.getState().setSelectedCommentId(_id)
+                    commentStore.getState().setSelectedTimeStamp(timeStamp)
+                    useVideoStore.getState().setTimeCode(timeInSeconds)
+                    useVideoStore.getState().incrementMarkerTrigger()
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      commentStore.getState().setSelectedCommentId(_id)
+                      commentStore.getState().setSelectedTimeStamp(timeStamp)
+                      useVideoStore.getState().setTimeCode(timeInSeconds)
+                      useVideoStore.getState().incrementMarkerTrigger()
+                    }
+                  }}
+                />
+                <MarkerMessage $position={percent}>{content}</MarkerMessage>
+              </MarkerWrapper>
+            )
+          })}
+        </PlayBar>
+      </TimelineContainer>
+    </Container>
+  )
+  //#endregion
+}
+//#endregion
+
+//#region ---- STYLED COMPONENTS -----
+
+const Container = styled.div<{ $isFullScreen: boolean }>`
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  position: relative;
+  background: ${({ theme }) => theme.colors.background};
+  overflow: hidden;
+
+  ${({ $isFullScreen }) =>
+    $isFullScreen &&
+    `
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+    aspect-ratio: unset;
+  `}
+`
+
+const StyledVideo = styled.video<{ $isFullScreen: boolean }>`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background-color: black;
+  color: white;
+`
+
+const Controls = styled.div<{ $isFullScreen: boolean; $isZoomed: boolean }>`
+  position: absolute;
+  bottom: ${({ $isZoomed, $isFullScreen }) =>
+    $isZoomed ? ($isFullScreen ? "130px" : "110px") : $isFullScreen ? "40px" : "20px"};
+  left: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  z-index: 2;
+  transition: bottom 0.3s ease;
+
+  ${({ $isFullScreen }) =>
+    $isFullScreen &&
+    `
+    left: 40px;
+    right: 40px;
+  `}
+`
+
+const SkipButton = styled.button`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.2s;
+  padding: 0;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
+
+const SkipIcon = styled.div<{ direction: "left" | "right" }>`
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  ${({ direction }) => (direction === "left" ? "transform: scaleX(-1);" : "")}
+
+  .arrow {
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-left: 10px solid white;
+  }
+`
+
+const VolumeControl = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  input[type="range"] {
+    width: 80px;
+    background: rgba(255, 255, 255, 0.3);
+    accent-color: ${({ theme }) => theme.colors.primary};
+  }
+`
+
+const ZoomButton = styled.button`
+  background: none;
+  border: none;
+  color: white;
+  font-size: 18px;
+  cursor: pointer;
+  transition: transform 0.2s;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
+
+const SubtitleButton = styled.button<{ $active: boolean }>`
+  background: ${({ $active }) => ($active ? "rgba(255, 255, 255, 0.3)" : "none")};
+  border: 2px solid white;
+  color: white;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s;
+  padding: 4px 8px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
+  }
+`
+
+const FullscreenButton = styled.button`
+  background: none;
+  border: none;
+  color: white;
+  font-size: 24px;
+  cursor: pointer;
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`
+
+const TimeDisplay = styled.div`
+  color: white;
+  font-size: 14px;
+  margin-left: auto;
+`
+
+const TimelineContainer = styled.div<{ $isZoomed: boolean; $isFullScreen: boolean }>`
+  position: absolute;
+  bottom: 10px;
+  left: 20px;
+  right: 20px;
+  overflow-x: ${({ $isZoomed }) => ($isZoomed ? "auto" : "visible")};
+  overflow-y: visible;
+  z-index: 1;
+  padding-top: ${({ $isZoomed }) => ($isZoomed ? "60px" : "0")};
+  padding-bottom: ${({ $isZoomed }) => ($isZoomed ? "10px" : "0")};
+  min-height: ${({ $isZoomed, $isFullScreen }) =>
+    $isZoomed ? ($isFullScreen ? "90px" : "78px") : "auto"};
+  transition: padding 0.3s ease, min-height 0.3s ease;
+
+  ${({ $isFullScreen }) =>
+    $isFullScreen &&
+    `
+    bottom: 20px;
+    left: 40px;
+    right: 40px;
+  `}
+
+  /* Custom scrollbar styling */
+  &::-webkit-scrollbar {
+    height: 6px;
+    margin-top: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.6);
+  }
+`
+
+const PlayBar = styled.div<{ $isFullScreen: boolean; $isZoomed: boolean }>`
+  position: ${({ $isZoomed }) => ($isZoomed ? "absolute" : "relative")};
+  bottom: ${({ $isZoomed }) => ($isZoomed ? "0" : "auto")};
+  width: ${({ $isZoomed }) => ($isZoomed ? "300%" : "100%")};
+  height: ${({ $isZoomed, $isFullScreen }) =>
+    $isZoomed ? "16px" : $isFullScreen ? "12px" : "8px"};
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: width 0.3s ease, height 0.3s ease;
+`
+
+const Progress = styled.div`
+  height: 100%;
+  background: ${({ theme }) => theme.colors.primary};
+  border-radius: 4px;
+  pointer-events: none;
+`
+
+const MarkerWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  overflow: visible;
+  pointer-events: auto;
+
+  &:hover {
+    z-index: 10;
+  }
+
+  &:hover p {
+    display: block;
+  }
+`
+
+const Marker = styled.div`
+  width: 10px;
+  height: 10px;
+  background: #e3e3e3;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 0.2s;
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    width: 22px;
+    height: 22px;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  &:hover {
+    transform: scale(1.3);
+  }
+
+  &:focus {
+    transform: scale(1.2);
+    background-color: white;
+    outline-offset: -2px;
+  }
+`
+
+const MarkerMessage = styled.p<{ $position: number }>`
+  display: none;
+  position: absolute;
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #ffffff;
+  border: solid black 1px;
+  color: #000000;
+  padding: 6px 10px;
+  border-radius: 10px;
+  font-size: 14px;
+  z-index: 3;
+  width: max-content;
+  ${({ $position }) => {
+    // Calculate max-width based on position to prevent clipping
+    // Near edges: smaller max-width causes text to wrap to multiple rows
+    // In middle: full max-width for single-line display when possible
+    const distanceFromEdge = Math.min($position, 100 - $position)
+
+    if (distanceFromEdge < 10) {
+      return 'max-width: 120px;'
+    } else if (distanceFromEdge < 20) {
+      return 'max-width: 200px;'
+    } else {
+      return 'max-width: 300px;'
+    }
+  }}
+  min-width: 100px;
+  white-space: normal;
+  word-wrap: break-word;
+  text-align: center;
+  pointer-events: none;
+
+  ${MarkerWrapper}:hover & {
+    display: block;
+  }
+`
+
+const PulsingBackground = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  background-size: 200% 200%;
+  animation: pulse 3s ease-in-out infinite;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 50%;
+      background-color: #151515;
+      opacity: 0.4;
+    }
+    50% {
+      background-position: 100% 50%;
+      background-color: #252525;
+      opacity: 1;
+    }
+    100% {
+      background-position: 0% 50%;
+      background-color: #151515;
+      opacity: 0.4;
+    }
+  }
+`
+
+const SpinningCircle = styled.div`
+  width: 35px;
+  height: 35px;
+  border: 4px solid transparent;
+  border-top: 4px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  z-index: 21;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`
+
+const SubtitleContainer = styled.div<{ $isFullScreen: boolean }>`
+  position: absolute;
+  bottom: ${({ $isFullScreen }) => ($isFullScreen ? "120px" : "100px")};
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  max-width: 80%;
+  pointer-events: none;
+  transition: bottom 0.3s ease;
+`
+
+const SubtitleText = styled.div`
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.4;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  animation: fadeIn 0.2s ease-in;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`
+
+//#endregion
diff --git a/frontend/src/sections/05-review-page/components/video-section/components/PlayPauseBtn.tsx b/frontend/src/sections/05-review-page/components/video-section/components/PlayPauseBtn.tsx
new file mode 100644
index 0000000000..3a98e718cb
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/components/PlayPauseBtn.tsx
@@ -0,0 +1,64 @@
+import styled from "styled-components"
+
+type PlayPauseButtonProps = {
+  isPlaying: boolean
+  onClick: () => void
+}
+
+export const PlayPauseButton = ({
+  isPlaying,
+  onClick,
+}: PlayPauseButtonProps) => {
+  return (
+    <Button
+      onClick={onClick}
+      className={isPlaying ? "button--active" : ""}
+    >
+      <div className="button__shape button__shape--one" />
+      <div className="button__shape button__shape--two" />
+    </Button>
+  )
+}
+
+// Styled Components
+const Button = styled.div`
+  width: 40px; /* was 80px */
+  height: 40px; /* was 80px */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  transition: border-color 0.3s ease;
+
+  .button__shape {
+    width: 9px; /* was 18px */
+    height: 25px; /* was 50px */
+    background: white;
+    transition: 0.3s ease-in-out;
+
+    &--one {
+      clip-path: polygon(0 0, 100% 25%, 100% 75%, 0% 100%);
+      transform: translateX(2px); /* was 4px */
+    }
+
+    &--two {
+      clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%);
+      transform: translateX(1.95px); /* was 3.9px */
+    }
+  }
+
+  &.button--active {
+    .button__shape {
+      &--one {
+        clip-path: polygon(0 15%, 50% 15%, 50% 85%, 0% 85%);
+        transform: translateX(0px);
+      }
+
+      &--two {
+        clip-path: polygon(50% 15%, 100% 15%, 100% 85%, 50% 85%);
+        transform: translateX(0px);
+      }
+    }
+  }
+`
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/changeVolume.ts b/frontend/src/sections/05-review-page/components/video-section/utils/changeVolume.ts
new file mode 100644
index 0000000000..94aaf3f1d6
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/changeVolume.ts
@@ -0,0 +1,14 @@
+import type { RefObject } from "react"
+
+export const useChangeVolume = (
+  videoRef: RefObject<HTMLVideoElement | null>,
+  setVolume: React.Dispatch<React.SetStateAction<number>>
+) => {
+  return (e: React.ChangeEvent<HTMLInputElement>) => {
+    const vol = parseFloat(e.target.value)
+    setVolume(vol)
+    if (videoRef.current) {
+      videoRef.current.volume = vol
+    }
+  }
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/formatTime.ts b/frontend/src/sections/05-review-page/components/video-section/utils/formatTime.ts
new file mode 100644
index 0000000000..8549fcc3b8
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/formatTime.ts
@@ -0,0 +1,6 @@
+export const formatTime = (time: number): string => {
+  const m = Math.floor(time / 60)
+  const s = Math.floor(time % 60)
+  const ms = Math.floor((time % 1) * 1000)
+  return `${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")},${ms.toString().padStart(3, "0")}`
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/goToTime.ts b/frontend/src/sections/05-review-page/components/video-section/utils/goToTime.ts
new file mode 100644
index 0000000000..6ac230612a
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/goToTime.ts
@@ -0,0 +1,9 @@
+import type { RefObject } from "react"
+
+export const useGoToTime = (videoRef: RefObject<HTMLVideoElement | null>) => {
+  return (time: number) => {
+    if (videoRef.current) {
+      videoRef.current.currentTime = time
+    }
+  }
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/handleTimelineClick.ts b/frontend/src/sections/05-review-page/components/video-section/utils/handleTimelineClick.ts
new file mode 100644
index 0000000000..d05693df03
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/handleTimelineClick.ts
@@ -0,0 +1,17 @@
+import type { RefObject } from "react"
+
+export const getHandleTimelineClick = (
+  videoRef: RefObject<HTMLVideoElement | null>,
+  timelineRef: RefObject<HTMLDivElement | null>
+) => {
+  return (e: React.MouseEvent<HTMLDivElement>) => {
+    const video = videoRef.current
+    const timeline = timelineRef.current
+    if (!video || !timeline) return
+
+    const rect = timeline.getBoundingClientRect()
+    const clickX = e.clientX - rect.left
+    const clickPercent = clickX / rect.width
+    video.currentTime = clickPercent * video.duration
+  }
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/togglePlay.ts b/frontend/src/sections/05-review-page/components/video-section/utils/togglePlay.ts
new file mode 100644
index 0000000000..826db87773
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/togglePlay.ts
@@ -0,0 +1,14 @@
+import type { RefObject } from "react"
+
+export const useTogglePlay = (videoRef: RefObject<HTMLVideoElement | null>) => {
+  return () => {
+    const video = videoRef.current
+    if (!video) return
+
+    if (video.paused) {
+      video.play()
+    } else {
+      video.pause()
+    }
+  }
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/unFormatTime.ts b/frontend/src/sections/05-review-page/components/video-section/utils/unFormatTime.ts
new file mode 100644
index 0000000000..df49dadd81
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/unFormatTime.ts
@@ -0,0 +1,7 @@
+export const unFormatTime = (formattedTime: string): number => {
+  // Handle both old format (MM:SS) and new format (MM:SS,mmm)
+  const [timePart, msPart] = formattedTime.split(",")
+  const [m, s] = timePart.split(":").map(Number)
+  const ms = msPart ? Number(msPart) / 1000 : 0
+  return m * 60 + s + ms
+}
diff --git a/frontend/src/sections/05-review-page/components/video-section/utils/useVideoProgress.ts b/frontend/src/sections/05-review-page/components/video-section/utils/useVideoProgress.ts
new file mode 100644
index 0000000000..9719e33571
--- /dev/null
+++ b/frontend/src/sections/05-review-page/components/video-section/utils/useVideoProgress.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react"
+import type { RefObject } from "react"
+
+export const useVideoProgress = (
+  videoRef: RefObject<HTMLVideoElement | null>
+) => {
+  const [progress, setProgress] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const updateProgress = () => {
+      setProgress((video.currentTime / video.duration) * 100)
+    }
+
+    const updatePlayState = () => {
+      setIsPlaying(!video.paused)
+    }
+
+    video.addEventListener("timeupdate", updateProgress)
+    video.addEventListener("play", updatePlayState)
+    video.addEventListener("pause", updatePlayState)
+
+    return () => {
+      video.removeEventListener("timeupdate", updateProgress)
+      video.removeEventListener("play", updatePlayState)
+      video.removeEventListener("pause", updatePlayState)
+    }
+  }, [videoRef])
+
+  return { progress, isPlaying }
+}
diff --git a/frontend/src/sections/06-teachers-page/TeachersPage.tsx b/frontend/src/sections/06-teachers-page/TeachersPage.tsx
new file mode 100644
index 0000000000..c7189cb2db
--- /dev/null
+++ b/frontend/src/sections/06-teachers-page/TeachersPage.tsx
@@ -0,0 +1,311 @@
+//#region ----- IMPORTS -----
+import { useEffect } from "react"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { useProjectStore } from "../../store/projectStore"
+import styled from "styled-components"
+
+import { TeacherProjectCard } from "./components/TeacherProjectCard"
+import { TeachersSideMenu } from "./components/TeachersSideMenu"
+import { useEditingStore } from "../../store/editStore"
+import { useClassStore } from "../../store/classStore"
+import { useWorkspaceStore } from "../../store/workspaceStore"
+import { MediaQueries } from "../../themes/mediaQueries"
+
+//#endregion
+
+export const TeachersPage = () => {
+  //#region ----- STORE HOOKS -----
+  const projects = useProjectStore((state) => state.projects)
+  const fetchProjectsWithComments = useProjectStore((state) => state.fetchProjectsWithComments)
+  const classes = useClassStore((state) => state.classes)
+  const fetchClasses = useClassStore((state) => state.fetchClasses)
+  const currentWorkspaceId = useWorkspaceStore((state) => state.currentWorkspaceId)
+  const currentClassId = useEditingStore((state) => state.currentClassId)
+  const setCurrentClassId = useEditingStore((state) => state.setCurrentClassId)
+
+  //#endregion
+
+  //#region ----- EFFECTS -----
+
+  // Fetch classes and projects on mount
+  useEffect(() => {
+    if (currentWorkspaceId) {
+      fetchClasses(currentWorkspaceId)
+    }
+    fetchProjectsWithComments()
+  }, [fetchClasses, fetchProjectsWithComments, currentWorkspaceId])
+
+  // Automatically select first class with unchecked student comments
+  const classesWithUncheckedComments = classes.filter((cls) => {
+    const projectsInClass = projects.filter((project) => project.classId === cls._id)
+    const uncheckedStudentCommentsCount = projectsInClass.reduce((count, project) => {
+      const uncheckedStudentComments = (project.comments ?? []).filter(
+        (comment) =>
+          !comment.isChecked &&
+          comment.commentType === "question" &&
+          comment.commentCreatedBy?.role === "student"
+      )
+      return count + uncheckedStudentComments.length
+    }, 0)
+    return uncheckedStudentCommentsCount > 0
+  })
+
+  useEffect(() => {
+    if (classesWithUncheckedComments.length > 0 && !currentClassId) {
+      setCurrentClassId(classesWithUncheckedComments[0]._id)
+    }
+  }, [classesWithUncheckedComments, currentClassId, setCurrentClassId])
+  //#endregion
+
+  //#region ----- EVENT HANDLERS -----
+  const handleClassChange = (id: string) => setCurrentClassId(id)
+  //#endregion
+
+  //#region ----- DERIVED DATA -----
+  // Filter projects for the currently selected class with unchecked questions from students only
+  const filteredProjects = projects
+    .filter((project) => project.classId === currentClassId)
+    .filter(
+      (project) =>
+        Array.isArray(project.comments) &&
+        project.comments.some(
+          (comment) =>
+            comment.commentType === "question" &&
+            comment.isChecked === false &&
+            comment.commentCreatedBy?.role === "student"
+        )
+    )
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <>
+      <Navigation />
+
+      <DashboardLayout>
+        <TeachersSideMenu
+          classesCount={classesWithUncheckedComments}
+          aria-label="Teacher side menu with classes having unchecked comments"
+        />
+
+        <MainContent role="main">
+          <PageTitle tabIndex={-1}>Teachers Dashboard</PageTitle>
+
+          <ClassSelect
+            value={currentClassId || ""}
+            onChange={(e) => handleClassChange(e.target.value)}
+            aria-label="Select class with unchecked comments"
+          >
+            {classesWithUncheckedComments.map((cls) => (
+              <option
+                key={cls._id}
+                value={cls._id}
+              >
+                {cls.classTitle}
+              </option>
+            ))}
+          </ClassSelect>
+
+          <ActionBar
+            role="toolbar"
+            aria-label="Dashboard actions"
+          >
+            <WorkingButton aria-label="View all projects">View Projects</WorkingButton>
+            <ActionButton aria-label="View all comments">View All Comments</ActionButton>
+            <ActionButton aria-label="View messages">View Messages</ActionButton>
+          </ActionBar>
+
+          <ProjectsList aria-label="List of projects with unanswered questions">
+            {filteredProjects.map(
+              ({ _id, projectName, projectDescription, thumbnail, comments }) => {
+                const questionComments = (comments ?? []).filter(
+                  (comment) => comment.commentType === "question" && !comment.isChecked
+                )
+
+                return (
+                  <TeacherProjectCard
+                    key={_id ?? ""}
+                    projectId={_id ?? ""}
+                    projectName={projectName}
+                    projectDescription={projectDescription}
+                    thumbnail={thumbnail}
+                    comments={questionComments}
+                    aria-label={`Project card for ${projectName}, ${questionComments.length} unanswered questions`}
+                  />
+                )
+              }
+            )}
+          </ProjectsList>
+        </MainContent>
+      </DashboardLayout>
+    </>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const PageTitle = styled.h2`
+  text-align: center;
+  margin: 34px 0 24px 0;
+`
+
+const ClassSelect = styled.select`
+  text-align: center;
+  padding: 10px 16px;
+  margin-bottom: 24px;
+  font-size: 16px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  cursor: pointer;
+  width: 203px;
+  max-width: 100%;
+  transition:
+    border-color 0.3s,
+    box-shadow 0.3s;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: none;
+    margin-bottom: 0;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primaryHover};
+    box-shadow: rgba(0, 0, 0, 0.14);
+  }
+
+  option {
+    background-color: ${({ theme }) => theme.colors.background};
+    color: ${({ theme }) => theme.colors.text};
+  }
+`
+
+const DashboardLayout = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    margin-top: 48px;
+  }
+`
+
+const MainContent = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+const ActionBar = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+`
+
+const ProjectsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 20px;
+`
+
+const WorkingButton = styled.button`
+  margin: 0px 10px 20px 10px;
+  padding: 8px 16px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 35px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  max-width: 100px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(1.02);
+  }
+
+  &:focus {
+    outline: 2px solid ${({ theme }) => theme.colors.primaryHover};
+    outline-offset: 2px;
+  }
+
+  @media ${MediaQueries.smallPhone} {
+    margin: 0px 4px 20px 4px;
+    padding: 8px 2px;
+    max-width: 90px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: none;
+  }
+`
+
+const ActionButton = styled.button`
+  position: relative;
+  margin: 0px 6px 20px 6px;
+  padding: 8px 10px;
+  max-width: 100px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 35px;
+  background-color: #a3a3a3;
+  color: white;
+  font-size: 14px;
+  transition: all 0.2s ease;
+  opacity: 0.6;
+  text-decoration: line-through;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: none;
+  }
+
+  &::after {
+    content: "upcoming";
+    position: absolute;
+    top: -8px;
+    right: -15px;
+    background-color: #ff6b6b;
+    color: white;
+    font-size: 10px;
+    font-weight: bold;
+    padding: 2px 6px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    transform: rotate(12deg);
+    letter-spacing: 0.5px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+    @media ${MediaQueries.smallPhone} {
+      top: -10px;
+      right: -8px;
+      transform: rotate(12deg);
+      padding: 2px 4px;
+    }
+
+    @media ${MediaQueries.biggerSizes} {
+      top: -13px;
+      right: -16px;
+      transform: rotate(0deg);
+      padding: 3px 6px;
+    }
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    margin: 0px 10px 20px 10px;
+    padding: 8px 16px;
+  }
+
+  @media ${MediaQueries.smallPhone} {
+    margin: 0px 2px 20px 2px;
+    padding: 8px 2px;
+    max-width: 90px;
+  }
+`
+
+//#endregion
diff --git a/frontend/src/sections/06-teachers-page/components/TeacherProjectCard.tsx b/frontend/src/sections/06-teachers-page/components/TeacherProjectCard.tsx
new file mode 100644
index 0000000000..63e969731d
--- /dev/null
+++ b/frontend/src/sections/06-teachers-page/components/TeacherProjectCard.tsx
@@ -0,0 +1,311 @@
+//#region ----- IMPORTS -----
+import { useState } from "react"
+import styled from "styled-components"
+import { useNavigate } from "react-router-dom"
+import moment from "moment"
+import { motion, AnimatePresence } from "framer-motion"
+import { MediaQueries } from "../../../themes/mediaQueries"
+
+import { useVideoStore } from "../../../store/videoStore"
+import { unFormatTime } from "../../05-review-page/components/video-section/utils/unFormatTime"
+import { commentStore } from "../../../store/commentStore"
+
+import type { MessageType } from "../../../store/commentStore"
+//#endregion
+
+//#region ----- INTERFACES -----
+interface TeacherProjectCardProps {
+  projectId: string
+  projectName: string
+  projectDescription: string
+  thumbnail?: string
+  comments?: MessageType[]
+}
+//#endregion
+
+//#region ----- COMPONENT -----
+export const TeacherProjectCard = ({
+  projectName,
+  projectDescription,
+  thumbnail,
+  comments = [],
+  projectId,
+}: TeacherProjectCardProps) => {
+  //#endregion
+
+  //#region ----- STATE -----
+  const [showComments, setShowComments] = useState(false)
+  const navigate = useNavigate()
+  //#endregion
+
+  //#region ----- HANDLERS -----
+  const timeStampHandler = (
+    e: React.MouseEvent<HTMLElement>,
+    commentId: string,
+    timeStamp: string
+  ) => {
+    e.stopPropagation()
+    const newTimecode = unFormatTime(timeStamp)
+
+    useVideoStore.getState().setTimeCode(newTimecode)
+    commentStore.getState().setSelectedTimeStamp(timeStamp)
+    commentStore.getState().setSelectedCommentId(commentId)
+
+    navigate(`/review/${projectId}?commentId=${commentId}`)
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <CardWrapper>
+      <CardHeaderButton
+        aria-expanded={showComments}
+        aria-controls={`comments-${projectId}`}
+        onClick={() => setShowComments((prev) => !prev)}
+      >
+        <CardThumbnail>
+          <img
+            src={thumbnail || "/default-thumb.jpg"}
+            alt={`Thumbnail for project: ${projectName}`}
+          />
+        </CardThumbnail>
+        <CardContentWrapper>
+          <CardHeader>
+            <h3>{projectName}</h3>
+            <p aria-label={`${comments.length} comments`}>{`${comments.length} items`}</p>
+          </CardHeader>
+          <p>{projectDescription}</p>
+        </CardContentWrapper>
+      </CardHeaderButton>
+
+      <AnimatePresence initial={false}>
+        {showComments && comments.length > 0 && (
+          <motion.section
+            id={`comments-${projectId}`}
+            aria-live="polite"
+            initial={{ height: 0 }}
+            animate={{ height: "auto" }}
+            exit={{ height: 0 }}
+            transition={{ duration: 0.2, ease: "easeInOut" }}
+            style={{ overflow: "hidden" }}
+          >
+            <motion.div
+              initial={{ y: -10 }}
+              animate={{ y: 0 }}
+              exit={{ y: -10 }}
+              transition={{ duration: 0.3 }}
+            >
+              <CommentList>
+                {comments
+                  .filter(
+                    (comment) => !comment.isChecked && comment.commentCreatedBy?.role === "student"
+                  )
+                  .map((comment) => (
+                    <CommentItem key={comment._id}>
+                      <CommentButton
+                        onClick={(e) => timeStampHandler(e, comment._id, comment.timeStamp)}
+                      >
+                        <CommentThumbnail>
+                          <img
+                            src={comment.commentCreatedBy?.profileImage || "/default-profile.jpg"}
+                            alt={`Profile image of ${comment.commentCreatedBy?.name || "unknown user"}`}
+                          />
+                        </CommentThumbnail>
+                        <CommentContent>
+                          <p>{comment.content}</p>
+                          <CommentFooter>
+                            <p>{moment(comment.createdAt).fromNow()}</p>
+                            <p>{comment.commentCreatedBy?.name || "Unknown user"}</p>
+                          </CommentFooter>
+                        </CommentContent>
+                      </CommentButton>
+                    </CommentItem>
+                  ))}
+              </CommentList>
+            </motion.div>
+          </motion.section>
+        )}
+      </AnimatePresence>
+    </CardWrapper>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+
+const CardWrapper = styled.div`
+  width: 90%;
+  max-width: 1000px;
+  margin-bottom: 20px;
+  border-radius: 15px;
+  background-color: ${({ theme }) => theme.colors.offBackground};
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.295);
+  color: inherit;
+  text-decoration: none;
+`
+
+const CardHeaderButton = styled.button`
+  display: flex;
+  width: 100%;
+  align-items: stretch;
+  padding: 14px 18px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(0.998);
+  }
+`
+
+const CardThumbnail = styled.div`
+  width: 100px;
+  aspect-ratio: 1 / 1;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 15px;
+  margin-right: 20px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 130px;
+    aspect-ratio: 4 / 3;
+    margin-right: 30px;
+  }
+`
+
+const CardContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+
+  p {
+    color: ${({ theme }) => theme.colors.text};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    line-height: 1.4;
+    max-height: 67px;
+  }
+`
+
+const CardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  h3 {
+    color: ${({ theme }) => theme.colors.text};
+  }
+
+  p {
+    color: ${({ theme }) => theme.colors.textAlternative};
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    h3 {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
+    }
+
+    p {
+      flex-shrink: 0;
+    }
+  }
+`
+
+const CommentList = styled.div`
+  width: 100%;
+  overflow: hidden;
+`
+
+const CommentItem = styled.div`
+  border-radius: 10px;
+  box-shadow: 0 -2px 0 rgba(32, 32, 32, 0.07);
+  transition:
+    background-color 0.3s ease,
+    box-shadow 0.3s ease;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.offBackgroundHover};
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.295);
+  }
+`
+
+const CommentButton = styled.button`
+  display: flex;
+  align-items: center;
+  column-gap: 22px;
+  width: 100%;
+  padding: 14px 30px;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(0.995);
+  }
+`
+
+const CommentThumbnail = styled.div`
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 40px;
+    height: 40px;
+  }
+`
+
+const CommentContent = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+
+  p {
+    color: ${({ theme }) => theme.colors.text};
+    margin: 0;
+  }
+`
+
+const CommentFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: #888;
+
+  p {
+    color: ${({ theme }) => theme.colors.textAlternative};
+  }
+`
+
+//#endregion
diff --git a/frontend/src/sections/06-teachers-page/components/TeachersSideMenu.tsx b/frontend/src/sections/06-teachers-page/components/TeachersSideMenu.tsx
new file mode 100644
index 0000000000..424a406851
--- /dev/null
+++ b/frontend/src/sections/06-teachers-page/components/TeachersSideMenu.tsx
@@ -0,0 +1,94 @@
+import styled from "styled-components"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import type { ClassType } from "../../../store/classStore"
+import { useEditingStore } from "../../../store/editStore"
+
+interface TeachersSideMenuProps {
+  classesCount: ClassType[]
+}
+export const TeachersSideMenu = ({ classesCount }: TeachersSideMenuProps) => {
+  const currentClassId = useEditingStore((state) => state.currentClassId)
+  const setCurrentClassId = useEditingStore((state) => state.setCurrentClassId)
+
+  const handleClassFetch = (id: string) => setCurrentClassId(id)
+
+  return (
+    <Container>
+      <TopSection>
+        <h2>Classes</h2>
+        <ClassList>
+          {classesCount?.map((cls) => (
+            <ClassItem
+              onClick={() => handleClassFetch(cls._id)}
+              key={cls._id}
+              $selected={currentClassId === cls._id}
+            >
+              <p>{cls.classTitle}</p>
+            </ClassItem>
+          ))}
+        </ClassList>
+      </TopSection>
+    </Container>
+  )
+}
+
+// Styled Components
+const Container = styled.section`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 40px;
+  background-color: ${({ theme }) => theme.colors.background};
+  height: 85dvh;
+  margin-top: 84px;
+  width: 250px;
+  display: none;
+
+  @media ${MediaQueries.biggerSizes} {
+    display: block;
+  }
+`
+
+const TopSection = styled.div`
+  width: 100%;
+
+  h2 {
+    font-size: 24px;
+    padding: 0 35px;
+    margin-bottom: 24px;
+  }
+`
+
+const ClassList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  border-radius: 10px;
+  padding: 10px;
+`
+
+const ClassItem = styled.div<{ $selected?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: ${({ theme }) => theme.colors.text};
+  background-color: ${({ theme, $selected }) =>
+    $selected ? theme.colors.offBackgroundActive : theme.colors.background};
+  border-radius: 10px;
+  width: 100%;
+  padding: 10px 25px;
+  transition: ease 0.2s;
+  cursor: pointer;
+
+  &:hover {
+    transform: scale(0.97);
+    background-color: ${({ theme, $selected }) =>
+      $selected ? theme.colors.offBackgroundActive : theme.colors.offBackgroundHover};
+  }
+
+  p {
+    margin: 0;
+    font-weight: ${({ $selected }) => ($selected ? "bold" : "normal")};
+  }
+`
diff --git a/frontend/src/sections/07-user-page/UserPage.tsx b/frontend/src/sections/07-user-page/UserPage.tsx
new file mode 100644
index 0000000000..623a1478bb
--- /dev/null
+++ b/frontend/src/sections/07-user-page/UserPage.tsx
@@ -0,0 +1,228 @@
+import { useEffect, useState } from "react"
+import { useUserStore } from "../../store/userStore"
+import { useWorkspaceStore } from "../../store/workspaceStore"
+import styled from "styled-components"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { MediaQueries } from "../../themes/mediaQueries"
+import { CurrentUserSection } from "./components/CurrentUserSection"
+import { TeachersSection } from "./components/TeachersSection"
+import { StudentsSection } from "./components/StudentsSection"
+import { TeamsSection } from "./components/TeamsSection"
+import { CreateTeam } from "../08-create-team-page/CreateTeam"
+
+interface ActiveTab {
+  users: string
+  teams: string
+  more: string
+}
+
+export const UserPage = () => {
+  const { getWorkspaceUsers, user: currentUser, loading } = useUserStore()
+  const { currentWorkspaceId } = useWorkspaceStore()
+  const [activeTab, setActiveTab] = useState<keyof ActiveTab>("users")
+
+  useEffect(() => {
+    if (currentWorkspaceId) {
+      getWorkspaceUsers(currentWorkspaceId)
+    }
+  }, [currentWorkspaceId, getWorkspaceUsers])
+
+  return (
+    <>
+      <Navigation />
+      <UserPageContainer
+        role="main"
+        aria-label="User Directory"
+      >
+        <PageHeader>
+          <PageTitle>Users</PageTitle>
+          <PageSubtitle>See all teachers and students</PageSubtitle>
+          <ActionBar
+            role="toolbar"
+            aria-label="Dashboard actions"
+          >
+            <WorkingButton
+              aria-label="View all users"
+              onClick={() => setActiveTab("users")}
+            >
+              Users
+            </WorkingButton>
+            <WorkingButton
+              aria-label="View all teams"
+              onClick={() => setActiveTab("teams")}
+            >
+              Teams
+            </WorkingButton>
+            <WorkingButton
+              aria-label="More"
+              onClick={() => setActiveTab("more")}
+            >
+              More
+            </WorkingButton>
+          </ActionBar>
+        </PageHeader>
+
+        {activeTab === "users" && (
+          <>
+            <CurrentUserSection />
+            {currentUser?.role === "teacher" && (
+              <>
+                {loading ? (
+                  <LoadingContainer>
+                    <Spinner />
+                    <LoadingText>Loading users...</LoadingText>
+                  </LoadingContainer>
+                ) : (
+                  <>
+                    <TeachersSection />
+                    <StudentsSection />
+                  </>
+                )}
+              </>
+            )}
+          </>
+        )}
+        {activeTab === "teams" && (
+          <>
+            {currentUser?.role === "teacher" && <CreateTeam />}
+            <TeamsSection />
+          </>
+        )}
+        {activeTab === "more" && <p>More</p>}
+      </UserPageContainer>
+    </>
+  )
+}
+
+const UserPageContainer = styled.div`
+  min-height: 100vh;
+  background: ${({ theme }) => theme.colors.primary};
+  padding: 16px;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+  }
+`
+
+const PageHeader = styled.div`
+  text-align: center;
+  margin-bottom: 32px;
+  color: white;
+
+  @media ${MediaQueries.biggerSizes} {
+    margin-bottom: 48px;
+  }
+`
+
+const PageTitle = styled.h1`
+  font-size: 32px;
+  font-weight: 800;
+  margin: 0 0 8px 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 56px;
+  }
+`
+
+const PageSubtitle = styled.p`
+  font-size: 16px;
+  opacity: 0.9;
+  margin: 0;
+  font-weight: 300;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 19px;
+  }
+`
+const ActionBar = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 10px;
+`
+
+const WorkingButton = styled.button`
+  margin: 0px 10px 20px 10px;
+  padding: 8px 16px;
+  border: 1px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 35px;
+  background-color: ${({ theme }) => theme.colors.primary};
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  max-width: 100px;
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(1.02);
+  }
+
+  &:focus {
+    outline: 2px solid ${({ theme }) => theme.colors.primaryHover};
+    outline-offset: 2px;
+  }
+
+  @media ${MediaQueries.smallPhone} {
+    margin: 0px 4px 20px 4px;
+    padding: 8px 2px;
+    max-width: 90px;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: none;
+  }
+`
+
+const LoadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 20px;
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin-bottom: 24px;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 64px 32px;
+    border-radius: 20px;
+    margin-bottom: 32px;
+  }
+`
+
+const Spinner = styled.div`
+  width: 48px;
+  height: 48px;
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-top-color: ${({ theme }) => theme.colors.primary};
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 16px;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 56px;
+    height: 56px;
+    border-width: 5px;
+  }
+`
+
+const LoadingText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 16px;
+  font-weight: 500;
+  margin: 0;
+  opacity: 0.8;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 18px;
+  }
+`
diff --git a/frontend/src/sections/07-user-page/components/CreateUserSection.tsx b/frontend/src/sections/07-user-page/components/CreateUserSection.tsx
new file mode 100644
index 0000000000..2a28295cf1
--- /dev/null
+++ b/frontend/src/sections/07-user-page/components/CreateUserSection.tsx
@@ -0,0 +1,47 @@
+import styled from "styled-components"
+import { SignUpForm } from "../../03-sign-up-page/components/signUpForm"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useUserStore } from "../../../store/userStore"
+
+export const CreateUserSection = () => {
+  const { user: currentUser } = useUserStore()
+
+  if (currentUser?.role !== "teacher") {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionTitle>Create User (In development)</SectionTitle>
+      <SignUpForm />
+    </SectionContainer>
+  )
+}
+
+const SectionContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0 0 24px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 32px;
+    margin: 0 0 32px 0;
+  }
+`
diff --git a/frontend/src/sections/07-user-page/components/CurrentUserSection.tsx b/frontend/src/sections/07-user-page/components/CurrentUserSection.tsx
new file mode 100644
index 0000000000..00941f41dd
--- /dev/null
+++ b/frontend/src/sections/07-user-page/components/CurrentUserSection.tsx
@@ -0,0 +1,445 @@
+import styled from "styled-components"
+import { useState } from "react"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useUserStore } from "../../../store/userStore"
+
+export const CurrentUserSection = () => {
+  const { user: currentUser, updateUser } = useUserStore()
+  const [isEditing, setIsEditing] = useState(false)
+  const [formData, setFormData] = useState({
+    name: currentUser?.name || "",
+    email: currentUser?.email || "",
+    role: currentUser?.role || "student",
+    profileImage: currentUser?.profileImage || "",
+  })
+
+  if (!currentUser) {
+    return (
+      <SectionContainer
+        role="region"
+        aria-labelledby="current-user-section"
+        $isCurrentUserSection={true}
+      >
+        <SectionHeader>
+          <SectionTitle id="current-user-section">Current User</SectionTitle>
+          <CurrentUserBadge aria-label="No user found">Not logged in</CurrentUserBadge>
+        </SectionHeader>
+      </SectionContainer>
+    )
+  }
+
+  const editUser = () => {
+    setIsEditing(true)
+    setFormData({
+      name: currentUser.name,
+      email: currentUser.email,
+      role: currentUser.role,
+      profileImage: currentUser.profileImage,
+    })
+  }
+
+  const cancelEdit = () => {
+    setIsEditing(false)
+    setFormData({
+      name: currentUser.name,
+      email: currentUser.email,
+      role: currentUser.role,
+      profileImage: currentUser.profileImage,
+    })
+  }
+
+  const saveUser = async () => {
+    try {
+      const result = await updateUser(currentUser._id!, {
+        newName: formData.name,
+        newEmail: formData.email,
+        newRole: formData.role,
+        newProfileImage: formData.profileImage,
+      })
+
+      if (result.success) {
+        setIsEditing(false)
+      } else {
+        console.error("Failed to update user:", result.message)
+      }
+    } catch (error) {
+      console.error("Error updating user:", error)
+    }
+  }
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }))
+  }
+
+  return (
+    <SectionContainer
+      role="region"
+      aria-labelledby="current-user-section"
+      $isCurrentUserSection={true}
+    >
+      <SectionHeader>
+        <SectionTitle id="current-user-section">Current User</SectionTitle>
+        <CurrentUserBadge aria-label="You are currently logged in">You</CurrentUserBadge>
+      </SectionHeader>
+      <CurrentUserCard
+        role="listitem"
+        aria-label={`Current user: ${currentUser.name}`}
+      >
+        <UserImageContainer>
+          <UserImage
+            src={currentUser.profileImage || "/logo2.png"}
+            alt={`Profile picture of ${currentUser.name}`}
+            onError={(e) => {
+              e.currentTarget.src = "/logo2.png"
+            }}
+          />
+        </UserImageContainer>
+        {!isEditing ? (
+          <EditUserButton
+            onClick={editUser}
+            aria-label={`Edit user ${currentUser.name}`}
+          >
+            ...
+          </EditUserButton>
+        ) : (
+          <ActionButtons>
+            <SaveButton
+              onClick={saveUser}
+              aria-label="Save changes"
+            >
+              ✓
+            </SaveButton>
+            <CancelButton
+              onClick={cancelEdit}
+              aria-label="Cancel editing"
+            >
+              ✕
+            </CancelButton>
+          </ActionButtons>
+        )}
+        <UserInfo>
+          {!isEditing ? (
+            <>
+              <UserName>{currentUser.name}</UserName>
+              <UserEmail aria-label={`Email: ${currentUser.email}`}>{currentUser.email}</UserEmail>
+              <UserRole aria-label={`Role: ${currentUser.role}`}>{currentUser.role}</UserRole>
+            </>
+          ) : (
+            <>
+              <UserInput
+                type="text"
+                value={formData.name}
+                onChange={(e) => handleInputChange("name", e.target.value)}
+                aria-label="Edit name"
+              />
+              <UserInput
+                type="email"
+                value={formData.email}
+                onChange={(e) => handleInputChange("email", e.target.value)}
+                aria-label="Edit email"
+              />
+              <RoleSelect
+                value={formData.role}
+                onChange={(e) => handleInputChange("role", e.target.value)}
+                aria-label="Select role"
+              >
+                <option value="student">Student</option>
+                <option value="teacher">Teacher</option>
+              </RoleSelect>
+              <label htmlFor="profileImage">Profile picture</label>
+              <input
+                type="file"
+                id="profileImage"
+                onChange={(e) => handleInputChange("profileImage", e.target.value)}
+                aria-label="Edit profile picture"
+              />
+            </>
+          )}
+        </UserInfo>
+      </CurrentUserCard>
+    </SectionContainer>
+  )
+}
+
+const SectionContainer = styled.div<{ $isCurrentUserSection?: boolean }>`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  ${({ $isCurrentUserSection, theme }) =>
+    $isCurrentUserSection &&
+    `
+    border: 4px solid ${theme.colors.primary};
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  `}
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 32px;
+    text-align: left;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  flex: 1;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 32px;
+  }
+`
+
+const CurrentUserBadge = styled.span`
+  background: ${({ theme }) => theme.colors.primary};
+  color: ${({ theme }) => theme.colors.background};
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 25px;
+  }
+`
+
+const CurrentUserCard = styled.div`
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  width: 100%;
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 24px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 300px;
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const UserImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+`
+
+const UserImage = styled.img`
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid ${({ theme }) => theme.colors.background};
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 120px;
+    height: 120px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  }
+`
+
+const UserInfo = styled.div`
+  text-align: center;
+`
+
+const UserName = styled.h3`
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 6px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 20px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserEmail = styled.p`
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0 0 6px 0;
+  word-break: break-word;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserRole = styled.p`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0;
+  text-transform: capitalize;
+  font-weight: 500;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 13px;
+  }
+`
+
+const EditUserButton = styled.button`
+  position: absolute;
+  top: 30px;
+  right: 10px;
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 0 10px 6px 10px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primaryHover};
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
+
+const ActionButtons = styled.div`
+  position: absolute;
+  top: 30px;
+  right: 10px;
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+`
+
+const SaveButton = styled.button`
+  background: #4caf50;
+  color: white;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #45a049;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
+
+const CancelButton = styled.button`
+  background: #f44336;
+  color: white;
+  border: none;
+  padding: 6px 10px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #da190b;
+    transform: scale(1.05);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+`
+
+const UserInput = styled.input`
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  font-size: 14px;
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  transition: all 0.3s ease;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primaryHover};
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 16px;
+    padding: 10px 14px;
+  }
+`
+
+const RoleSelect = styled.select`
+  width: 100%;
+  padding: 8px 12px;
+  margin-bottom: 0;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  font-size: 14px;
+  background: ${({ theme }) => theme.colors.background};
+  color: ${({ theme }) => theme.colors.text};
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primaryHover};
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 16px;
+    padding: 10px 14px;
+  }
+`
diff --git a/frontend/src/sections/07-user-page/components/StudentsSection.tsx b/frontend/src/sections/07-user-page/components/StudentsSection.tsx
new file mode 100644
index 0000000000..8c657038e4
--- /dev/null
+++ b/frontend/src/sections/07-user-page/components/StudentsSection.tsx
@@ -0,0 +1,341 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useUserStore } from "../../../store/userStore"
+import { ConfirmBox } from "../../../global-components/ComfirmBox"
+
+export const StudentsSection = () => {
+  const { users, user: currentUser, deleteUser } = useUserStore()
+  const [isEditingStudents, setIsEditingStudents] = useState<boolean>(false)
+  const [showConfirmBox, setShowConfirmBox] = useState<boolean>(false)
+  const [userToDelete, setUserToDelete] = useState<{ id: string; name: string } | null>(null)
+
+  const students = users.filter((user) => user.role === "student")
+
+  const handleEditStudents = () => {
+    setIsEditingStudents(!isEditingStudents)
+  }
+
+  const handleDeleteClick = (userId: string, userName: string) => {
+    setUserToDelete({ id: userId, name: userName })
+    setShowConfirmBox(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    if (userToDelete) {
+      await deleteUser(userToDelete.id)
+      setShowConfirmBox(false)
+      setUserToDelete(null)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setShowConfirmBox(false)
+    setUserToDelete(null)
+  }
+
+  const handleDeleteUser = (user: { _id?: string; name: string }) => {
+    if (user._id) {
+      handleDeleteClick(user._id, user.name)
+    }
+  }
+
+  return (
+    <>
+      <SectionContainer
+        role="region"
+        aria-labelledby="students-section"
+      >
+        <SectionHeader>
+          <SectionTitle id="students-section">Students</SectionTitle>
+          {currentUser?.role === "teacher" && (
+            <EditButton onClick={handleEditStudents}>Edit</EditButton>
+          )}
+          <SectionCountStudent aria-label={`${students.length} students in total`}>
+            {/* Subtracts 1 to hide the placeholder user */}
+            {students.length - 1} students
+          </SectionCountStudent>
+        </SectionHeader>
+        <UsersGrid
+          role="list"
+          aria-label="List of students"
+        >
+          {students
+            //Hides the placeholder user
+            .filter((user) => user._id !== "68a45fbaca5d5d29fe782190")
+            .map((user, index) => (
+              <UserCard
+                key={user._id || `student-${index}`}
+                role="listitem"
+                aria-label={`Student: ${user.name}`}
+                $isCurrentUser={currentUser?._id === user._id}
+              >
+                <UserImageContainer>
+                  {isEditingStudents && (
+                    <DeleteUserButton
+                      onClick={() => handleDeleteUser(user)}
+                      aria-label={`Delete user ${user.name}`}
+                    >
+                      x
+                    </DeleteUserButton>
+                  )}
+                  <UserImage
+                    src={user.profileImage || "/logo2.png"}
+                    alt={`Profile picture of ${user.name}`}
+                    onError={(e) => {
+                      e.currentTarget.src = "/logo2.png"
+                    }}
+                  />
+                </UserImageContainer>
+                <UserInfo>
+                  <UserName>{user.name}</UserName>
+                  <UserEmail aria-label={`Email: ${user.email}`}>{user.email}</UserEmail>
+                  <UserRole aria-label={`Role: ${user.role}`}>{user.role}</UserRole>
+                </UserInfo>
+              </UserCard>
+            ))}
+        </UsersGrid>
+      </SectionContainer>
+
+      {/* Confirm Box Modal */}
+      {showConfirmBox && (
+        <>
+          <Backdrop onClick={handleCancelDelete} />
+          <ConfirmBox
+            message={`Are you sure you want to delete ${userToDelete?.name}?`}
+            onConfirm={handleConfirmDelete}
+            onCancel={handleCancelDelete}
+          />
+        </>
+      )}
+    </>
+  )
+}
+
+const SectionContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 32px;
+    text-align: left;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  flex: 1;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 32px;
+  }
+`
+
+const EditButton = styled.button`
+  background-color: #7e94c5;
+  color: white;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+  }
+`
+
+const SectionCountStudent = styled.span`
+  background: #f021ab;
+  color: white;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 25px;
+  }
+`
+
+const UsersGrid = styled.div`
+  display: grid;
+  justify-content: center;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  align-items: start;
+
+  @media ${MediaQueries.biggerSizes} {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px;
+  }
+`
+
+const UserCard = styled.div<{ $isCurrentUser?: boolean }>`
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+  border: 1px solid ${({ theme }) => theme.colors.background};
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    transform: scale(1.02);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 300px;
+    padding: 24px;
+    border-radius: 16px;
+  }
+`
+
+const UserImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+`
+
+const UserImage = styled.img`
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid ${({ theme }) => theme.colors.background};
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  ${UserCard}:hover & {
+    transform: scale(1.05);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 120px;
+    height: 120px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  }
+`
+
+const UserInfo = styled.div`
+  text-align: center;
+`
+
+const UserName = styled.h3`
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 6px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 20px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserEmail = styled.p`
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0 0 6px 0;
+  word-break: break-word;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserRole = styled.p`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0;
+  text-transform: capitalize;
+  font-weight: 500;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 13px;
+  }
+`
+
+const DeleteUserButton = styled.button`
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background: #ff4757;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
+
+  &:hover {
+    background: #ff3742;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 4px 8px;
+    font-size: 14px;
+    border-radius: 25px;
+  }
+`
+
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 199;
+  backdrop-filter: blur(2px);
+`
diff --git a/frontend/src/sections/07-user-page/components/TeachersSection.tsx b/frontend/src/sections/07-user-page/components/TeachersSection.tsx
new file mode 100644
index 0000000000..88b7ae6a2c
--- /dev/null
+++ b/frontend/src/sections/07-user-page/components/TeachersSection.tsx
@@ -0,0 +1,616 @@
+import { useState } from "react"
+import styled from "styled-components"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useUserStore } from "../../../store/userStore"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+import { ConfirmBox } from "../../../global-components/ComfirmBox"
+
+export const TeachersSection = () => {
+  const { users, user: currentUser, deleteUser } = useUserStore()
+  const { currentWorkspaceId, createInvitationLink } = useWorkspaceStore()
+  const [isEditingTeachers, setIsEditingTeachers] = useState<boolean>(false)
+  const [showConfirmBox, setShowConfirmBox] = useState<boolean>(false)
+  const [userToDelete, setUserToDelete] = useState<{ id: string; name: string } | null>(null)
+  const [showInvitationModal, setShowInvitationModal] = useState<boolean>(false)
+  const [invitationLink, setInvitationLink] = useState<string>("")
+  const [isGeneratingLink, setIsGeneratingLink] = useState<boolean>(false)
+  const [isCopied, setIsCopied] = useState<boolean>(false)
+
+  const teachers = users.filter((user) => user.role === "teacher")
+
+  const handleEditTeachers = () => {
+    setIsEditingTeachers(!isEditingTeachers)
+  }
+
+  const handleDeleteClick = (userId: string, userName: string) => {
+    setUserToDelete({ id: userId, name: userName })
+    setShowConfirmBox(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    if (userToDelete) {
+      await deleteUser(userToDelete.id)
+      setShowConfirmBox(false)
+      setUserToDelete(null)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setShowConfirmBox(false)
+    setUserToDelete(null)
+  }
+
+  const handleDeleteUser = (user: { _id?: string; name: string }) => {
+    if (user._id) {
+      handleDeleteClick(user._id, user.name)
+    }
+  }
+
+  const handleAddTeacher = async () => {
+    if (!currentWorkspaceId) {
+      console.error("No workspace selected")
+      return
+    }
+
+    setIsGeneratingLink(true)
+    try {
+      const link = await createInvitationLink(currentWorkspaceId, undefined, undefined, "teacher")
+      if (link) {
+        setInvitationLink(link)
+        setShowInvitationModal(true)
+      }
+    } catch (error) {
+      console.error("Failed to generate invitation link:", error)
+    } finally {
+      setIsGeneratingLink(false)
+    }
+  }
+
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(invitationLink)
+    setIsCopied(true)
+    setTimeout(() => setIsCopied(false), 2000)
+  }
+
+  const handleCloseInvitationModal = () => {
+    setShowInvitationModal(false)
+    setInvitationLink("")
+    setIsCopied(false)
+  }
+
+  return (
+    <>
+      <SectionContainer
+        role="region"
+        aria-labelledby="teachers-section"
+      >
+        <SectionHeader>
+          <SectionTitle id="teachers-section">Teachers</SectionTitle>
+          {currentUser?.role === "teacher" && (
+            <>
+              <EditButton onClick={handleEditTeachers}>Edit</EditButton>
+              <AddTeacherButton
+                onClick={handleAddTeacher}
+                disabled={isGeneratingLink}
+              >
+                {isGeneratingLink ? "Generating..." : "Add Teacher"}
+              </AddTeacherButton>
+            </>
+          )}
+          <SectionCountTeacher aria-label={`${teachers.length} teachers in total`}>
+            {teachers.length} teachers
+          </SectionCountTeacher>
+        </SectionHeader>
+        <UsersGrid
+          role="list"
+          aria-label="List of teachers"
+        >
+          {teachers
+            .filter((user) => user._id !== currentUser?._id)
+            .map((user, index) => (
+              <UserCard
+                key={user._id || `teacher-${index}`}
+                role="listitem"
+                aria-label={`Teacher: ${user.name}`}
+              >
+                <UserImageContainer>
+                  {isEditingTeachers && (
+                    <DeleteUserButton
+                      onClick={() => handleDeleteUser(user)}
+                      aria-label={`Delete user ${user.name}`}
+                    >
+                      x
+                    </DeleteUserButton>
+                  )}
+                  <UserImage
+                    src={user.profileImage || "/logo2.png"}
+                    alt={`Profile picture of ${user.name}`}
+                    onError={(e) => {
+                      e.currentTarget.src = "/logo2.png"
+                    }}
+                  />
+                </UserImageContainer>
+                <UserInfo>
+                  <UserName>{user.name}</UserName>
+                  <UserEmail aria-label={`Email: ${user.email}`}>{user.email}</UserEmail>
+                  <UserRole aria-label={`Role: ${user.role}`}>{user.role}</UserRole>
+                </UserInfo>
+              </UserCard>
+            ))}
+        </UsersGrid>
+      </SectionContainer>
+
+      {/* Confirm Box Modal */}
+      {showConfirmBox && (
+        <>
+          <Backdrop onClick={handleCancelDelete} />
+          <ConfirmBox
+            message={`Are you sure you want to delete ${userToDelete?.name}?`}
+            onConfirm={handleConfirmDelete}
+            onCancel={handleCancelDelete}
+          />
+        </>
+      )}
+
+      {/* Invitation Link Modal */}
+      {showInvitationModal && (
+        <>
+          <Backdrop onClick={handleCloseInvitationModal} />
+          <InvitationModal>
+            <ModalHeader>
+              <ModalTitle>Teacher Invitation Link</ModalTitle>
+              <CloseButton onClick={handleCloseInvitationModal}>×</CloseButton>
+            </ModalHeader>
+            <ModalContent>
+              <InfoText>
+                Share this link with the teacher you want to invite. They'll be able to create
+                their account and set their own password.
+              </InfoText>
+              <LinkContainer>
+                <LinkInput
+                  type="text"
+                  value={invitationLink}
+                  readOnly
+                />
+                <CopyButton onClick={handleCopyLink}>
+                  {isCopied ? "✓ Copied!" : "Copy Link"}
+                </CopyButton>
+              </LinkContainer>
+              <WarningText>
+                ⚠️ This link will expire in 7 days. Keep it secure and only share with authorized
+                teachers.
+              </WarningText>
+            </ModalContent>
+            <ModalFooter>
+              <DoneButton onClick={handleCloseInvitationModal}>Done</DoneButton>
+            </ModalFooter>
+          </InvitationModal>
+        </>
+      )}
+    </>
+  )
+}
+
+const SectionContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 32px;
+    text-align: left;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  flex: 1;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 32px;
+  }
+`
+
+const EditButton = styled.button`
+  background-color: #7e94c5;
+  color: white;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+  }
+`
+
+const AddTeacherButton = styled.button`
+  background-color: #7e94c5;
+  color: white;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  padding: 10px 20px;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  transition: transform 0.3s ease;
+
+  &:hover:not(:disabled) {
+    transform: scale(1.05);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+  }
+`
+
+const SectionCountTeacher = styled.span`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 8px 16px;
+    font-size: 14px;
+    border-radius: 25px;
+  }
+`
+
+const UsersGrid = styled.div`
+  display: grid;
+  justify-content: center;
+  grid-template-columns: 1fr;
+  gap: 16px;
+  align-items: start;
+
+  @media ${MediaQueries.biggerSizes} {
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 24px;
+  }
+`
+
+const UserCard = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 12px;
+  padding: 20px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s ease;
+  border: 1px solid ${({ theme }) => theme.colors.background};
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    transform: scale(1.02);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 300px;
+    padding: 24px;
+    border-radius: 16px;
+  }
+`
+
+const UserImageContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 16px;
+`
+
+const UserImage = styled.img`
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 4px solid ${({ theme }) => theme.colors.background};
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  ${UserCard}:hover & {
+    transform: scale(1.05);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 120px;
+    height: 120px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  }
+`
+
+const UserInfo = styled.div`
+  text-align: center;
+`
+
+const UserName = styled.h3`
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0 0 6px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 20px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserEmail = styled.p`
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0 0 6px 0;
+  word-break: break-word;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+    margin: 0 0 8px 0;
+  }
+`
+
+const UserRole = styled.p`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0;
+  text-transform: capitalize;
+  font-weight: 500;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 13px;
+  }
+`
+
+const DeleteUserButton = styled.button`
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  background: #ff4757;
+  color: white;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
+
+  &:hover {
+    background: #ff3742;
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.4);
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 4px 8px;
+    font-size: 14px;
+    border-radius: 25px;
+  }
+`
+
+const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 199;
+  backdrop-filter: blur(2px);
+`
+
+const InvitationModal = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 600px;
+  width: 90%;
+  z-index: 200;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+  }
+`
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+`
+
+const ModalTitle = styled.h3`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 24px;
+  }
+`
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+`
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`
+
+const InfoText = styled.p`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0;
+  line-height: 1.5;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 16px;
+  }
+`
+
+const LinkContainer = styled.div`
+  display: flex;
+  gap: 12px;
+  align-items: stretch;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+`
+
+const LinkInput = styled.input`
+  flex: 1;
+  padding: 12px 16px;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 8px;
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text};
+  background: ${({ theme }) => theme.colors.offBackground};
+  font-family: monospace;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 15px;
+  }
+`
+
+const CopyButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primaryHover};
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 16px;
+  }
+`
+
+const WarningText = styled.p`
+  font-size: 13px;
+  color: #ff9800;
+  margin: 0;
+  padding: 12px;
+  background: rgba(255, 152, 0, 0.1);
+  border-radius: 8px;
+  line-height: 1.5;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+  }
+`
+
+const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+`
+
+const DoneButton = styled.button`
+  background: #2ed573;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #26b364;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(46, 213, 115, 0.3);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+`
diff --git a/frontend/src/sections/07-user-page/components/TeamsSection.tsx b/frontend/src/sections/07-user-page/components/TeamsSection.tsx
new file mode 100644
index 0000000000..dd46ef55ac
--- /dev/null
+++ b/frontend/src/sections/07-user-page/components/TeamsSection.tsx
@@ -0,0 +1,327 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+import { MediaQueries } from "../../../themes/mediaQueries"
+import { useTeamStore } from "../../../store/teamStore"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+import { useUserStore } from "../../../store/userStore"
+//#endregion
+
+export const TeamsSection = () => {
+  //#region ----- STORE HOOKS -----
+  const { teams, loading, fetchTeams } = useTeamStore()
+  const { currentWorkspaceId } = useWorkspaceStore()
+  const { user: currentUser } = useUserStore()
+  const navigate = useNavigate()
+  //#endregion
+
+  //#region ----- EFFECTS -----
+  useEffect(() => {
+    if (currentWorkspaceId) {
+      fetchTeams(currentWorkspaceId)
+    }
+  }, [currentWorkspaceId, fetchTeams])
+  //#endregion
+
+  //#region ----- DERIVED DATA -----
+  const filteredTeams =
+    currentUser?.role === "student"
+      ? teams.filter((team) => {
+          // For students, check if they are members of this team
+          return team.assignedStudents?.some((student) => student._id === currentUser._id)
+        })
+      : teams
+  //#endregion
+
+  //#region ----- RENDER -----
+  if (loading && teams.length === 0) {
+    return (
+      <SectionContainer>
+        <SectionHeader>
+          <SectionTitle>Teams</SectionTitle>
+          <LoadingText>Loading teams...</LoadingText>
+        </SectionHeader>
+      </SectionContainer>
+    )
+  }
+
+  if (!currentWorkspaceId) {
+    return (
+      <SectionContainer>
+        <SectionHeader>
+          <SectionTitle>Teams</SectionTitle>
+          <NoWorkspaceText>Please select a workspace to view teams</NoWorkspaceText>
+        </SectionHeader>
+      </SectionContainer>
+    )
+  }
+
+  if (filteredTeams.length === 0) {
+    return (
+      <SectionContainer>
+        <SectionHeader>
+          <SectionTitle>Teams</SectionTitle>
+          <NoTeamsText>
+            {currentUser?.role === "student"
+              ? "You are not assigned to any teams yet"
+              : "No teams found in this workspace"}
+          </NoTeamsText>
+        </SectionHeader>
+      </SectionContainer>
+    )
+  }
+
+  return (
+    <TeamsGrid>
+      {filteredTeams.map((team) => {
+        const teacherCount = team.assignedTeachers?.length || 0
+        const studentCount = team.assignedStudents?.length || 0
+        const memberCount = teacherCount + studentCount
+        const classCount = team.accessTo?.length || 0
+
+        return (
+          <TeamCard
+            key={team._id}
+            onClick={() => navigate(`/admin/teams/${team._id}`)}
+          >
+            <TeamCardHeader>
+              <TeamCardTitle>{team.teamName}</TeamCardTitle>
+              <MemberBadge>{memberCount} members</MemberBadge>
+            </TeamCardHeader>
+
+            <TeamCardContent>
+              <WorkspaceInfo>
+                <WorkspaceLabel>Workspace:</WorkspaceLabel>
+                <WorkspaceName>{team.workspaceId?.name || "Unknown"}</WorkspaceName>
+              </WorkspaceInfo>
+
+              <StatsRow>
+                <StatItem>
+                  <StatIcon>👥</StatIcon>
+                  <StatValue>{memberCount} members</StatValue>
+                </StatItem>
+                <StatItem>
+                  <StatIcon>📚</StatIcon>
+                  <StatValue>{classCount} classes</StatValue>
+                </StatItem>
+              </StatsRow>
+            </TeamCardContent>
+
+            <ViewDetailsButton>View Details →</ViewDetailsButton>
+          </TeamCard>
+        )
+      })}
+    </TeamsGrid>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const TeamsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 20px;
+  padding: 0 0 24px 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    gap: 24px;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    max-width: 100%;
+  }
+`
+
+const TeamCard = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
+    border-color: ${({ theme }) => theme.colors.primary};
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 24px;
+    border-radius: 20px;
+  }
+`
+
+const TeamCardHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+`
+
+const TeamCardTitle = styled.h3`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 24px;
+  }
+`
+
+const MemberBadge = styled.span`
+  background: #2ed573;
+  color: white;
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+  margin-left: 8px;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+`
+
+const TeamCardContent = styled.div`
+  margin-bottom: 16px;
+`
+
+const WorkspaceInfo = styled.div`
+  margin-bottom: 16px;
+`
+
+const WorkspaceLabel = styled.span`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.6;
+  font-weight: 500;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 13px;
+  }
+`
+
+const WorkspaceName = styled.span`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text};
+  margin-left: 6px;
+  font-weight: 600;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 15px;
+  }
+`
+
+const StatsRow = styled.div`
+  display: flex;
+  gap: 16px;
+`
+
+const StatItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+
+const StatIcon = styled.span`
+  font-size: 16px;
+`
+
+const StatValue = styled.span`
+  font-size: 13px;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.8;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 14px;
+  }
+`
+
+const ViewDetailsButton = styled.div`
+  color: ${({ theme }) => theme.colors.primary};
+  font-size: 14px;
+  font-weight: 600;
+  text-align: right;
+  margin-top: 12px;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 15px;
+  }
+`
+
+// Styled Components for loading/empty states
+const SectionContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  padding-bottom: 16px;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 32px;
+    text-align: left;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 24px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  flex: 1;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 32px;
+  }
+`
+
+const LoadingText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  margin: 0;
+`
+
+const NoWorkspaceText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  margin: 0;
+`
+
+const NoTeamsText = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  margin: 0;
+`
+//#endregion
diff --git a/frontend/src/sections/08-create-team-page/CreateTeam.tsx b/frontend/src/sections/08-create-team-page/CreateTeam.tsx
new file mode 100644
index 0000000000..74da47aeda
--- /dev/null
+++ b/frontend/src/sections/08-create-team-page/CreateTeam.tsx
@@ -0,0 +1,328 @@
+//#region ----- IMPORTS -----
+import { useState } from "react"
+import styled from "styled-components"
+import { useTeamStore } from "../../store/teamStore"
+import { useWorkspaceStore } from "../../store/workspaceStore"
+import { MediaQueries } from "../../themes/mediaQueries"
+//#endregion
+
+export const CreateTeam = () => {
+  //#region ----- STORE HOOKS -----
+  const { createTeam, loading, error, message, fetchTeams } = useTeamStore()
+  const { currentWorkspaceId } = useWorkspaceStore()
+  //#endregion
+
+  //#region ----- STATE -----
+  const [showForm, setShowForm] = useState(false)
+  const [formData, setFormData] = useState({
+    teamName: "",
+  })
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  //#endregion
+
+  //#region ----- EVENT HANDLERS -----
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setFormData((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    if (!currentWorkspaceId) {
+      return
+    }
+
+    setIsSubmitting(true)
+    try {
+      await createTeam(currentWorkspaceId, {
+        teamName: formData.teamName,
+      })
+
+      // If successful, reset form and hide it
+      if (message && message.includes("successfully")) {
+        setFormData({ teamName: "" })
+        setShowForm(false)
+        // Refresh the teams list
+        if (currentWorkspaceId) {
+          fetchTeams(currentWorkspaceId)
+        }
+      }
+    } catch (error) {
+      console.error("Failed to create team:", error)
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+  //#endregion
+
+  //#region ----- RENDER -----
+  return (
+    <CreateTeamSection>
+      {!showForm ? (
+        <CreateButton onClick={() => setShowForm(true)}>➕ Create New Team</CreateButton>
+      ) : (
+        <FormContainer>
+          <FormHeader>
+            <FormTitle>Create New Team</FormTitle>
+            <CloseButton
+              onClick={() => {
+                setShowForm(false)
+                setFormData({ teamName: "" })
+              }}
+            >
+              ✕
+            </CloseButton>
+          </FormHeader>
+
+          <StyledForm
+            onSubmit={handleSubmit}
+            noValidate
+          >
+            <FormGroup>
+              <Label htmlFor="teamName">Team Name</Label>
+              <Input
+                type="text"
+                id="teamName"
+                name="teamName"
+                placeholder="Enter team name"
+                value={formData.teamName}
+                onChange={handleChange}
+                required
+                autoFocus
+              />
+            </FormGroup>
+
+            {error && <ErrorMessage>{error}</ErrorMessage>}
+            {message && <SuccessMessage>{message}</SuccessMessage>}
+
+            {!currentWorkspaceId && (
+              <ErrorMessage>Please select a workspace to create a team</ErrorMessage>
+            )}
+
+            <ButtonGroup>
+              <CancelButton
+                type="button"
+                onClick={() => {
+                  setShowForm(false)
+                  setFormData({ teamName: "" })
+                }}
+              >
+                Cancel
+              </CancelButton>
+              <SubmitButton
+                type="submit"
+                disabled={
+                  loading || isSubmitting || !currentWorkspaceId || !formData.teamName.trim()
+                }
+              >
+                {loading || isSubmitting ? "Creating..." : "Create Team"}
+              </SubmitButton>
+            </ButtonGroup>
+          </StyledForm>
+        </FormContainer>
+      )}
+    </CreateTeamSection>
+  )
+  //#endregion
+}
+
+//#region ----- STYLED COMPONENTS -----
+const CreateTeamSection = styled.div`
+  margin-bottom: 24px;
+`
+
+const CreateButton = styled.button`
+  background: ${({ theme }) => theme.colors.secondary};
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  width: 100%;
+  max-width: 300px;
+  margin: 0 auto;
+  display: block;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primaryHover};
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 14px 28px;
+    font-size: 17px;
+  }
+`
+
+const FormContainer = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 0 auto;
+  width: 100%;
+  max-width: 600px;
+
+  @media ${MediaQueries.biggerSizes} {
+    max-width: 800px;
+    padding: 32px;
+    border-radius: 20px;
+  }
+`
+
+const FormHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+`
+
+const FormTitle = styled.h3`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 24px;
+  }
+`
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 4px 8px;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const StyledForm = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`
+
+const FormGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+const Label = styled.label`
+  font-size: 14px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 15px;
+  }
+`
+
+const Input = styled.input`
+  padding: 12px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  font-size: 14px;
+  background: ${({ theme }) => theme.colors.offBackground};
+  color: ${({ theme }) => theme.colors.text};
+  transition: all 0.3s ease;
+
+  &:focus {
+    outline: none;
+    border-color: ${({ theme }) => theme.colors.primary};
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.colors.text};
+    opacity: 0.5;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 14px 18px;
+    font-size: 15px;
+  }
+`
+
+const ButtonGroup = styled.div`
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+  margin-top: 8px;
+`
+
+const CancelButton = styled.button`
+  background: #6c757d;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #5a6268;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 12px 24px;
+    font-size: 15px;
+  }
+`
+
+const SubmitButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.colors.primaryHover};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 12px 24px;
+    font-size: 15px;
+  }
+`
+
+const ErrorMessage = styled.div`
+  color: #ff6b6b;
+  font-size: 14px;
+  margin-top: -8px;
+`
+
+const SuccessMessage = styled.div`
+  color: #2ed573;
+  font-size: 14px;
+  margin-top: -8px;
+`
+//#endregion
diff --git a/frontend/src/sections/09-create-workspace/CreateWorkspacePage.tsx b/frontend/src/sections/09-create-workspace/CreateWorkspacePage.tsx
new file mode 100644
index 0000000000..70aa9ef157
--- /dev/null
+++ b/frontend/src/sections/09-create-workspace/CreateWorkspacePage.tsx
@@ -0,0 +1,31 @@
+import { Navigation } from "../../global-components/navigation/Navigation"
+import { CreateWorkspaceHeader } from "./components/CreateWorkspaceHeader"
+import { CreateWorkspaceForm } from "./components/CreateWorkspaceForm"
+import styled from "styled-components"
+
+export const CreateWorkspacePage = () => {
+  return (
+    <>
+      <Navigation />
+      <Section>
+        <CreateWorkspaceHeader />
+        <CreateWorkspaceForm />
+      </Section>
+    </>
+  )
+}
+
+const Section = styled.section`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 500px;
+  margin: 150px auto 0 auto;
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 16px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07);
+  padding: 32px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`
diff --git a/frontend/src/sections/09-create-workspace/components/CreateWorkspaceForm.tsx b/frontend/src/sections/09-create-workspace/components/CreateWorkspaceForm.tsx
new file mode 100644
index 0000000000..66bf0cfbd6
--- /dev/null
+++ b/frontend/src/sections/09-create-workspace/components/CreateWorkspaceForm.tsx
@@ -0,0 +1,56 @@
+//#region ----- IMPORTS -----
+import React, { useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { useWorkspaceStore } from "../../../store/workspaceStore"
+import { handleCreateWorkspaceSubmit } from "./utils/createWorkspaceHandleSubmit"
+import {
+  StyledForm,
+  FormGroup,
+  StyledButton,
+  ButtonWrapper,
+  ErrorMessage,
+} from "../../../global-components/StyledForm"
+//#endregion
+
+//#region ----- COMPONENT LOGIC -----
+export const CreateWorkspaceForm: React.FC = () => {
+  const navigate = useNavigate()
+  const { createWorkspace } = useWorkspaceStore()
+
+  const [error, setError] = useState<string | null>(null)
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) =>
+    handleCreateWorkspaceSubmit(e, createWorkspace, setError, navigate)
+
+  //#endregion
+
+  //#region ----- RENDERED UI -----
+  return (
+    <StyledForm
+      onSubmit={handleSubmit}
+      noValidate
+      aria-describedby="form-error"
+    >
+      <FormGroup>
+        <label htmlFor="workspaceName">Workspace name</label>
+        <input
+          type="text"
+          id="workspaceName"
+          name="workspaceName"
+          placeholder="Enter workspace name"
+          minLength={2}
+          maxLength={100}
+          required
+          aria-required="true"
+        />
+      </FormGroup>
+
+      {error && <ErrorMessage id="form-error">{error}</ErrorMessage>}
+
+      <ButtonWrapper>
+        <StyledButton type="submit">Create Workspace</StyledButton>
+      </ButtonWrapper>
+    </StyledForm>
+  )
+}
+//#endregion
diff --git a/frontend/src/sections/09-create-workspace/components/CreateWorkspaceHeader.tsx b/frontend/src/sections/09-create-workspace/components/CreateWorkspaceHeader.tsx
new file mode 100644
index 0000000000..2b464315c0
--- /dev/null
+++ b/frontend/src/sections/09-create-workspace/components/CreateWorkspaceHeader.tsx
@@ -0,0 +1,16 @@
+import styled from "styled-components"
+
+export const CreateWorkspaceHeader = () => {
+  return (
+    <div>
+      <CenteredHeader>Create Workspace</CenteredHeader>
+    </div>
+  )
+}
+
+const CenteredHeader = styled.h1`
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.text};
+`
diff --git a/frontend/src/sections/09-create-workspace/components/utils/createWorkspaceHandleSubmit.ts b/frontend/src/sections/09-create-workspace/components/utils/createWorkspaceHandleSubmit.ts
new file mode 100644
index 0000000000..72f0a595f9
--- /dev/null
+++ b/frontend/src/sections/09-create-workspace/components/utils/createWorkspaceHandleSubmit.ts
@@ -0,0 +1,33 @@
+import type { NavigateFunction } from "react-router"
+import type { FormEvent } from "react"
+
+type CreateWorkspaceFunction = (
+  workspaceName: string
+) => Promise<{ success: boolean; message?: string; workspaceId?: string }>
+
+export const handleCreateWorkspaceSubmit = async (
+  e: FormEvent<HTMLFormElement>,
+  createWorkspace: CreateWorkspaceFunction,
+  setError: (msg: string | null) => void,
+  navigate: NavigateFunction
+) => {
+  e.preventDefault()
+
+  const form = e.currentTarget as HTMLFormElement & {
+    workspaceName: HTMLInputElement
+  }
+
+  if (!form.checkValidity()) {
+    form.reportValidity()
+    return
+  }
+
+  const result = await createWorkspace(form.workspaceName.value)
+
+  if (result.success) {
+    setError(null)
+    navigate("/library")
+  } else {
+    setError(result.message || "Failed to create workspace")
+  }
+}
diff --git a/frontend/src/sections/10-team-detail-page/TeamDetailPage.tsx b/frontend/src/sections/10-team-detail-page/TeamDetailPage.tsx
new file mode 100644
index 0000000000..92f6109076
--- /dev/null
+++ b/frontend/src/sections/10-team-detail-page/TeamDetailPage.tsx
@@ -0,0 +1,1087 @@
+//#region ----- IMPORTS -----
+import styled from "styled-components"
+import { useState, useEffect } from "react"
+import { useParams, useNavigate } from "react-router-dom"
+import { MediaQueries } from "../../themes/mediaQueries"
+import { useTeamStore, type Team } from "../../store/teamStore"
+import { useWorkspaceStore } from "../../store/workspaceStore"
+import { useUserStore } from "../../store/userStore"
+import { useClassStore } from "../../store/classStore"
+import { Navigation } from "../../global-components/navigation/Navigation"
+import moment from "moment"
+//#endregion
+
+//#region ----- INTERFACES -----
+interface Invitation {
+  _id: string
+  token: string
+  teamId?: string
+  expiresAt: string
+  createdBy: {
+    _id: string
+    name: string
+    email: string
+  }
+  createdAt: string
+}
+//#endregion
+
+export const TeamDetailPage = () => {
+  //#region ----- ROUTE PARAMS -----
+  const { teamId } = useParams<{ teamId: string }>()
+  const navigate = useNavigate()
+  //#endregion
+
+  //#region ----- STORE HOOKS -----
+  const { team, loading, fetchTeamById, addTeamClass, removeTeamClass } = useTeamStore()
+  const { currentWorkspaceId, fetchInvitationHistory, createInvitationLink, deleteInvitation } =
+    useWorkspaceStore()
+  const { user: currentUser } = useUserStore()
+  const { fetchClasses, classes } = useClassStore()
+  //#endregion
+
+  //#region ----- STATE -----
+  const [invitations, setInvitations] = useState<Invitation[]>([])
+  const [loadingInvitations, setLoadingInvitations] = useState(false)
+  const [showAssignClassesModal, setShowAssignClassesModal] = useState(false)
+  const [isGeneratingLink, setIsGeneratingLink] = useState(false)
+  const [showExpirationModal, setShowExpirationModal] = useState(false)
+  const [expirationDate, setExpirationDate] = useState<string>("")
+  const [copiedId, setCopiedId] = useState<string | null>(null)
+  //#endregion
+
+  //#region ----- EFFECTS -----
+  useEffect(() => {
+    if (teamId) {
+      fetchTeamById(teamId)
+    }
+  }, [teamId, fetchTeamById])
+
+  useEffect(() => {
+    const loadInvitations = async () => {
+      if (currentWorkspaceId && teamId) {
+        setLoadingInvitations(true)
+        try {
+          const allInvitations = await fetchInvitationHistory(currentWorkspaceId)
+          // Filter invitations for this specific team
+          const teamInvitations = allInvitations.filter((inv: Invitation) => inv.teamId === teamId)
+          setInvitations(teamInvitations)
+        } catch (error) {
+          console.error("Failed to fetch invitations:", error)
+        } finally {
+          setLoadingInvitations(false)
+        }
+      }
+    }
+    loadInvitations()
+  }, [currentWorkspaceId, teamId, fetchInvitationHistory])
+  //#endregion
+
+  //#region ----- EVENT HANDLERS -----
+  const handleAssignClassesClick = async () => {
+    if (currentWorkspaceId) {
+      await fetchClasses(currentWorkspaceId)
+      setShowAssignClassesModal(true)
+    }
+  }
+
+  const handleOpenExpirationModal = () => {
+    // Set default to 7 days from now
+    const defaultDate = new Date()
+    defaultDate.setDate(defaultDate.getDate() + 7)
+    setExpirationDate(defaultDate.toISOString().slice(0, 16))
+    setShowExpirationModal(true)
+  }
+
+  const handleGenerateNewLink = async () => {
+    if (!currentWorkspaceId || !teamId) return
+    setIsGeneratingLink(true)
+    try {
+      const expiresAt = expirationDate ? new Date(expirationDate) : undefined
+      const link = await createInvitationLink(currentWorkspaceId, teamId, expiresAt)
+      if (link) {
+        // Reload invitations to show the new one
+        const allInvitations = await fetchInvitationHistory(currentWorkspaceId)
+        const teamInvitations = allInvitations.filter((inv: Invitation) => inv.teamId === teamId)
+        setInvitations(teamInvitations)
+        setShowExpirationModal(false)
+        setExpirationDate("")
+      }
+    } catch (error) {
+      console.error("Failed to generate invite link:", error)
+    } finally {
+      setIsGeneratingLink(false)
+    }
+  }
+
+  const handleDeleteInvitation = async (invitationId: string) => {
+    if (!currentWorkspaceId || !teamId) return
+    const success = await deleteInvitation(invitationId)
+    if (success) {
+      // Reload invitations to remove the deleted one
+      const allInvitations = await fetchInvitationHistory(currentWorkspaceId)
+      const teamInvitations = allInvitations.filter((inv: Invitation) => inv.teamId === teamId)
+      setInvitations(teamInvitations)
+    }
+  }
+
+  //#endregion
+
+  //#region ----- RENDER -----
+  if (loading || !team) {
+    return (
+      <>
+        <Navigation />
+        <PageContainer>
+          <LoadingText>Loading team details...</LoadingText>
+        </PageContainer>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <Navigation />
+      <PageContainer>
+        <BackButton onClick={() => navigate("/admin/users?tab=teams")}>← Back to Teams</BackButton>
+
+        <TeamHeader>
+          <TeamTitle>{team.teamName}</TeamTitle>
+        </TeamHeader>
+
+        <TeamDescription>
+          Workspace: {team.workspaceId?.name || "Unknown Workspace"}
+        </TeamDescription>
+
+        {currentUser?.role !== "student" && (
+          <ActionsBar>
+            <ActionButton onClick={handleAssignClassesClick}>👥 Assign Classes</ActionButton>
+            <ActionButton
+              onClick={handleOpenExpirationModal}
+              disabled={isGeneratingLink}
+            >
+              {isGeneratingLink ? "Generating..." : "🔗 Generate Invite Link"}
+            </ActionButton>
+          </ActionsBar>
+        )}
+
+        {/* Team Members Section */}
+        <Section>
+          <SectionTitle>Team Members</SectionTitle>
+
+          {/* Teachers Section */}
+          <MemberGroupSection>
+            <MemberGroupHeader>
+              <MemberGroupTitle>Teachers</MemberGroupTitle>
+            </MemberGroupHeader>
+            {team.assignedTeachers && team.assignedTeachers.length > 0 ? (
+              <MembersGrid>
+                {team.assignedTeachers.map((teacher) => (
+                  <MemberCard key={teacher._id}>
+                    <MemberImageContainer>
+                      <MemberImage
+                        src={teacher.profileImage || "/logo2.png"}
+                        alt={`Profile picture of ${teacher.name}`}
+                        onError={(e) => {
+                          e.currentTarget.src = "/logo2.png"
+                        }}
+                      />
+                    </MemberImageContainer>
+                    <MemberInfo>
+                      <MemberName>{teacher.name}</MemberName>
+                      <MemberEmail>{teacher.email}</MemberEmail>
+                      <MemberRole>{teacher.role}</MemberRole>
+                    </MemberInfo>
+                  </MemberCard>
+                ))}
+              </MembersGrid>
+            ) : (
+              <EmptyState>No teachers assigned to this team yet.</EmptyState>
+            )}
+          </MemberGroupSection>
+
+          {/* Students Section */}
+          <MemberGroupSection>
+            <MemberGroupHeader>
+              <MemberGroupTitle>Students</MemberGroupTitle>
+            </MemberGroupHeader>
+            {team.assignedStudents && team.assignedStudents.length > 0 ? (
+              <MembersGrid>
+                {team.assignedStudents.map((student) => (
+                  <MemberCard key={student._id}>
+                    <MemberImageContainer>
+                      <MemberImage
+                        src={student.profileImage || "/logo2.png"}
+                        alt={`Profile picture of ${student.name}`}
+                        onError={(e) => {
+                          e.currentTarget.src = "/logo2.png"
+                        }}
+                      />
+                    </MemberImageContainer>
+                    <MemberInfo>
+                      <MemberName>{student.name}</MemberName>
+                      <MemberEmail>{student.email}</MemberEmail>
+                      <MemberRole>{student.role}</MemberRole>
+                    </MemberInfo>
+                  </MemberCard>
+                ))}
+              </MembersGrid>
+            ) : (
+              <EmptyState>No students assigned to this team yet.</EmptyState>
+            )}
+          </MemberGroupSection>
+        </Section>
+
+        {/* Assigned Classes Section */}
+        <Section>
+          <SectionTitle>Assigned Classes</SectionTitle>
+          {team.accessTo && team.accessTo.length > 0 ? (
+            <ClassesList>
+              {team.accessTo.map((classItem) => (
+                <ClassChip key={classItem._id}>{classItem.classTitle}</ClassChip>
+              ))}
+            </ClassesList>
+          ) : (
+            <EmptyState>No classes assigned to this team yet.</EmptyState>
+          )}
+        </Section>
+
+        {/* Invitation Links Section */}
+        {currentUser?.role !== "student" && (
+          <Section>
+            <SectionTitle>Invitation Links</SectionTitle>
+            {loadingInvitations ? (
+              <LoadingText>Loading invitations...</LoadingText>
+            ) : invitations.length > 0 ? (
+              <InvitationsGrid>
+                {invitations.map((invitation) => {
+                  const isExpired = new Date(invitation.expiresAt) < new Date()
+                  const frontendUrl = import.meta.env.VITE_FRONTEND_URL || window.location.origin
+                  const inviteLink = `${frontendUrl}/signUp?token=${invitation.token}`
+
+                  return (
+                    <InvitationCard
+                      key={invitation._id}
+                      $isExpired={isExpired}
+                    >
+                      <InvitationRow>
+                        <InvitationInfo>
+                          <StatusBadge $isExpired={isExpired}>
+                            {isExpired ? "Expired" : "Active"}
+                          </StatusBadge>
+                          <InvitationText>
+                            <InvitationMeta>
+                              Created by {invitation.createdBy.name} •{" "}
+                              {moment(invitation.createdAt).fromNow()}
+                            </InvitationMeta>
+                            <InvitationExpiry>
+                              Expires: {moment(invitation.expiresAt).format("MMM D, YYYY h:mm A")}
+                            </InvitationExpiry>
+                          </InvitationText>
+                        </InvitationInfo>
+                        <InvitationActions>
+                          {!isExpired && (
+                            <CopyButton
+                              onClick={() => {
+                                navigator.clipboard.writeText(inviteLink)
+                                setCopiedId(invitation._id)
+                                setTimeout(() => setCopiedId(null), 2000)
+                              }}
+                            >
+                              {copiedId === invitation._id ? "✓ Copied!" : "📋 Copy"}
+                            </CopyButton>
+                          )}
+                          <DeleteButton onClick={() => handleDeleteInvitation(invitation._id)}>
+                            🗑️
+                          </DeleteButton>
+                        </InvitationActions>
+                      </InvitationRow>
+                    </InvitationCard>
+                  )
+                })}
+              </InvitationsGrid>
+            ) : (
+              <EmptyState>
+                No invitation links generated yet. Click "Generate Invite Link" to create one.
+              </EmptyState>
+            )}
+          </Section>
+        )}
+
+        {/* Assign Classes Modal */}
+        {showAssignClassesModal && team && (
+          <AssignClassesModal
+            team={team}
+            classes={classes}
+            onClose={() => setShowAssignClassesModal(false)}
+            onSave={async (selectedClasses: string[]) => {
+              const currentClassIds = team.accessTo?.map((classItem) => classItem._id) || []
+
+              // Add new assignments
+              for (const classId of selectedClasses) {
+                if (!currentClassIds.includes(classId)) {
+                  await addTeamClass(team._id, classId)
+                }
+              }
+
+              // Remove unassigned classes
+              for (const classId of currentClassIds) {
+                if (!selectedClasses.includes(classId)) {
+                  await removeTeamClass(team._id, classId)
+                }
+              }
+
+              setShowAssignClassesModal(false)
+            }}
+          />
+        )}
+
+        {/* Expiration Date Modal */}
+        {showExpirationModal && (
+          <ModalOverlay onClick={() => setShowExpirationModal(false)}>
+            <ModalContent onClick={(e) => e.stopPropagation()}>
+              <ModalHeader>
+                <ModalTitle>Set Invitation Expiration</ModalTitle>
+                <CloseButton onClick={() => setShowExpirationModal(false)}>×</CloseButton>
+              </ModalHeader>
+
+              <DatePickerContainer>
+                <DateLabel>Expiration Date & Time:</DateLabel>
+                <DateInput
+                  type="datetime-local"
+                  value={expirationDate}
+                  onChange={(e) => setExpirationDate(e.target.value)}
+                  min={new Date().toISOString().slice(0, 16)}
+                />
+                <DateHint>Default is 7 days from now if not specified</DateHint>
+              </DatePickerContainer>
+
+              <ModalActions>
+                <CancelButton
+                  onClick={() => setShowExpirationModal(false)}
+                  disabled={isGeneratingLink}
+                >
+                  Cancel
+                </CancelButton>
+                <SaveButton
+                  onClick={handleGenerateNewLink}
+                  disabled={isGeneratingLink}
+                >
+                  {isGeneratingLink ? "Generating..." : "Generate Link"}
+                </SaveButton>
+              </ModalActions>
+            </ModalContent>
+          </ModalOverlay>
+        )}
+      </PageContainer>
+    </>
+  )
+  //#endregion
+}
+
+//#region ----- ASSIGN CLASSES MODAL COMPONENT -----
+const AssignClassesModal = ({
+  team,
+  classes,
+  onClose,
+  onSave,
+}: {
+  team: Team
+  classes: any[]
+  onClose: () => void
+  onSave: (selectedClasses: string[]) => Promise<void>
+}) => {
+  const [selectedClasses, setSelectedClasses] = useState<string[]>(
+    team.accessTo?.map((classItem) => classItem._id) || []
+  )
+  const [isLoading, setIsLoading] = useState(false)
+
+  const handleClassToggle = (classId: string) => {
+    setSelectedClasses((prev) =>
+      prev.includes(classId) ? prev.filter((id) => id !== classId) : [...prev, classId]
+    )
+  }
+
+  const handleSave = async () => {
+    setIsLoading(true)
+    try {
+      await onSave(selectedClasses)
+    } catch (error) {
+      console.error("Error updating team classes:", error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  return (
+    <ModalOverlay onClick={onClose}>
+      <ModalContent onClick={(e) => e.stopPropagation()}>
+        <ModalHeader>
+          <ModalTitle>Assign Classes to {team.teamName}</ModalTitle>
+          <CloseButton onClick={onClose}>×</CloseButton>
+        </ModalHeader>
+
+        <ClassListContainer>
+          {classes.length === 0 ? (
+            <NoClassesMessage>No classes available in this workspace.</NoClassesMessage>
+          ) : (
+            classes.map((classItem) => (
+              <ClassItem key={classItem._id}>
+                <ClassCheckbox
+                  type="checkbox"
+                  checked={selectedClasses.includes(classItem._id)}
+                  onChange={() => handleClassToggle(classItem._id)}
+                />
+                <ClassName>{classItem.classTitle}</ClassName>
+              </ClassItem>
+            ))
+          )}
+        </ClassListContainer>
+
+        <ModalActions>
+          <CancelButton
+            onClick={onClose}
+            disabled={isLoading}
+          >
+            Cancel
+          </CancelButton>
+          <SaveButton
+            onClick={handleSave}
+            disabled={isLoading}
+          >
+            {isLoading ? "Saving..." : "Save Assignments"}
+          </SaveButton>
+        </ModalActions>
+      </ModalContent>
+    </ModalOverlay>
+  )
+}
+//#endregion
+
+//#region ----- STYLED COMPONENTS -----
+const PageContainer = styled.div`
+  min-height: 100vh;
+  background: ${({ theme }) => theme.colors.primary};
+  padding: 16px;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+  }
+`
+
+const BackButton = styled.button`
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 8px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-bottom: 24px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+    transform: translateX(-4px);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 10px 20px;
+    font-size: 16px;
+  }
+`
+
+const TeamHeader = styled.div`
+  text-align: center;
+  margin-bottom: 16px;
+`
+
+const TeamTitle = styled.h1`
+  font-size: 32px;
+  font-weight: 800;
+  color: white;
+  margin: 0 0 12px 0;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 48px;
+  }
+`
+
+const TeamDescription = styled.p`
+  font-size: 14px;
+  color: white;
+  margin: 0 0 24px 0;
+  opacity: 0.9;
+  font-style: italic;
+  text-align: center;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 16px;
+    margin: 0 0 32px 0;
+  }
+`
+
+const ActionsBar = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 32px;
+  flex-wrap: wrap;
+`
+
+const ActionButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.colors.primaryHover};
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+`
+
+const Section = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 32px;
+    margin-bottom: 32px;
+    border-radius: 20px;
+  }
+`
+
+const SectionTitle = styled.h2`
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0 0 20px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 24px;
+    margin: 0 0 24px 0;
+  }
+`
+
+const MembersGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+
+  @media ${MediaQueries.biggerSizes} {
+    gap: 20px;
+  }
+`
+
+const MemberCard = styled.div`
+  background: ${({ theme }) => theme.colors.offBackground};
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transition: transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.02);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 20px;
+    border-radius: 16px;
+  }
+`
+
+const MemberImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+`
+
+const MemberImage = styled.img`
+  width: 60px;
+  height: 60px;
+  object-fit: cover;
+  border-radius: 50%;
+  border: 3px solid ${({ theme }) => theme.colors.background};
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  @media ${MediaQueries.biggerSizes} {
+    width: 80px;
+    height: 80px;
+  }
+`
+
+const MemberInfo = styled.div`
+  text-align: center;
+`
+
+const MemberName = styled.h4`
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 18px;
+  }
+`
+
+const MemberEmail = styled.p`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0 0 4px 0;
+  word-break: break-word;
+  opacity: 0.8;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 13px;
+  }
+`
+
+const MemberRole = styled.p`
+  font-size: 11px;
+  color: ${({ theme }) => theme.colors.text};
+  margin: 0;
+  text-transform: capitalize;
+  opacity: 0.7;
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 12px;
+  }
+`
+
+const ClassesList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+`
+
+const ClassChip = styled.span`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  padding: 6px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 500;
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 8px 16px;
+    font-size: 16px;
+  }
+`
+
+const EmptyState = styled.p`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  font-style: italic;
+  margin: 20px 0;
+`
+
+const LoadingText = styled.p`
+  text-align: center;
+  color: white;
+  font-size: 16px;
+  margin-top: 40px;
+`
+
+const InvitationsGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  @media ${MediaQueries.biggerSizes} {
+    gap: 20px;
+  }
+`
+
+const InvitationCard = styled.div<{ $isExpired: boolean }>`
+  background: ${({ theme }) => theme.colors.offBackground};
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border-left: 4px solid
+    ${({ $isExpired, theme }) => ($isExpired ? "#ff6b6b" : theme.colors.primary)};
+  opacity: ${({ $isExpired }) => ($isExpired ? 0.7 : 1)};
+  transition: all 0.2s ease;
+  min-width: 600px;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    transform: translateX(2px);
+  }
+
+  @media ${MediaQueries.biggerSizes} {
+    padding: 18px;
+  }
+
+  @media (max-width: 768px) {
+    min-width: unset;
+  }
+`
+
+const InvitationRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+  }
+`
+
+const InvitationInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+`
+
+const InvitationText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+`
+
+const InvitationMeta = styled.span`
+  font-size: 14px;
+  color: ${({ theme }) => theme.colors.text};
+  font-weight: 500;
+
+  @media (max-width: 768px) {
+    font-size: 13px;
+  }
+`
+
+const InvitationExpiry = styled.span`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.6;
+
+  @media (max-width: 768px) {
+    font-size: 11px;
+  }
+`
+
+const StatusBadge = styled.span<{ $isExpired: boolean }>`
+  background: ${({ $isExpired }) => ($isExpired ? "#ff6b6b" : "#2ed573")};
+  color: white;
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+  flex-shrink: 0;
+`
+
+const InvitationActions = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`
+
+const CopyButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.primaryHover};
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    flex: 1;
+    padding: 10px 16px;
+  }
+`
+
+const DeleteButton = styled.button`
+  background: transparent;
+  color: #ff6b6b;
+  border: 2px solid #ff6b6b;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: #ff6b6b;
+    color: white;
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  @media (max-width: 768px) {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+`
+
+// Modal Styled Components
+const ModalOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+`
+
+const ModalContent = styled.div`
+  background: ${({ theme }) => theme.colors.background};
+  border-radius: 16px;
+  padding: 24px;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+`
+
+const ModalHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid ${({ theme }) => theme.colors.textAlternative};
+`
+
+const ModalTitle = styled.h3`
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 20px;
+`
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  font-size: 24px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.text};
+  padding: 4px 8px;
+
+  &:hover {
+    opacity: 0.7;
+  }
+`
+
+const ClassListContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+  max-height: 300px;
+  overflow-y: auto;
+`
+
+const ClassItem = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.colors.offBackground};
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.offBackgroundHover};
+  }
+`
+
+const ClassCheckbox = styled.input`
+  width: 18px;
+  height: 18px;
+  accent-color: ${({ theme }) => theme.colors.primary};
+`
+
+const ClassName = styled.span`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 16px;
+`
+
+const NoClassesMessage = styled.div`
+  text-align: center;
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  padding: 20px;
+  font-style: italic;
+`
+
+const ModalActions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid ${({ theme }) => theme.colors.textAlternative};
+`
+
+const CancelButton = styled.button`
+  background: #6c757d;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+
+  &:hover:not(:disabled) {
+    background: #5a6268;
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`
+
+const SaveButton = styled.button`
+  background: ${({ theme }) => theme.colors.primary};
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  transition: all 0.3s ease;
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.colors.primaryHover};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+`
+
+const DatePickerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+`
+
+const DateLabel = styled.label`
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 16px;
+  font-weight: 600;
+`
+
+const DateInput = styled.input`
+  background: ${({ theme }) => theme.colors.offBackground};
+  border: 1px solid ${({ theme }) => theme.colors.textAlternative};
+  border-radius: 8px;
+  padding: 12px;
+  color: ${({ theme }) => theme.colors.text};
+  font-size: 16px;
+  outline: none;
+  transition: all 0.3s ease;
+
+  &:focus {
+    border-color: ${({ theme }) => theme.colors.primary};
+    box-shadow: 0 0 0 2px ${({ theme }) => theme.colors.primary}33;
+  }
+
+  &::-webkit-calendar-picker-indicator {
+    filter: ${({ theme }) => theme.filter.inverted};
+    cursor: pointer;
+  }
+`
+
+const DateHint = styled.p`
+  color: ${({ theme }) => theme.colors.text};
+  opacity: 0.7;
+  font-size: 13px;
+  margin: 0;
+  font-style: italic;
+`
+
+const MemberGroupSection = styled.div`
+  margin-bottom: 32px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`
+
+const MemberGroupHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid ${({ theme }) => theme.colors.textAlternative};
+`
+
+const MemberGroupTitle = styled.h3`
+  font-size: 18px;
+  font-weight: 700;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.text};
+
+  @media ${MediaQueries.biggerSizes} {
+    font-size: 20px;
+  }
+`
+//#endregion
diff --git a/frontend/src/store/backendStatusStore.ts b/frontend/src/store/backendStatusStore.ts
new file mode 100644
index 0000000000..8badb8f3a4
--- /dev/null
+++ b/frontend/src/store/backendStatusStore.ts
@@ -0,0 +1,79 @@
+import { create } from 'zustand'
+import { baseUrl } from '../config/api'
+
+interface BackendStatusState {
+  status: 'checking' | 'ready' | 'error' | 'idle'
+  isSpinningUp: boolean
+  error: string | null
+  lastChecked: number | null
+  checkBackendHealth: () => Promise<void>
+  resetStatus: () => void
+}
+
+export const useBackendStatusStore = create<BackendStatusState>((set, get) => ({
+  status: 'idle',
+  isSpinningUp: false,
+  error: null,
+  lastChecked: null,
+
+  checkBackendHealth: async () => {
+    const startTime = Date.now()
+    set({ status: 'checking', isSpinningUp: false, error: null })
+
+    try {
+      // Try to ping a lightweight health endpoint or any endpoint
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), 65000) // 65 second timeout (slightly more than Render spin-up)
+
+      const response = await fetch(`${baseUrl}/health`, {
+        method: 'GET',
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      if (response.ok) {
+        set({
+          status: 'ready',
+          isSpinningUp: false,
+          error: null,
+          lastChecked: Date.now()
+        })
+        return
+      } else {
+        throw new Error(`Backend returned status: ${response.status}`)
+      }
+    } catch (error) {
+      const elapsed = Date.now() - startTime
+
+      // If we've been waiting for a while, it's likely spinning up
+      if (elapsed > 10000 && elapsed < 65000) {
+        set({
+          status: 'checking',
+          isSpinningUp: true,
+          error: 'Backend is waking up, please wait...',
+          lastChecked: Date.now()
+        })
+
+        // Retry after a delay
+        setTimeout(() => {
+          const currentStatus = get().status
+          if (currentStatus === 'checking') {
+            get().checkBackendHealth()
+          }
+        }, 5000)
+      } else {
+        set({
+          status: 'error',
+          isSpinningUp: false,
+          error: error instanceof Error ? error.message : 'Unable to connect to backend',
+          lastChecked: Date.now()
+        })
+      }
+    }
+  },
+
+  resetStatus: () => {
+    set({ status: 'idle', isSpinningUp: false, error: null })
+  },
+}))
diff --git a/frontend/src/store/classStore.ts b/frontend/src/store/classStore.ts
new file mode 100644
index 0000000000..610ba99db9
--- /dev/null
+++ b/frontend/src/store/classStore.ts
@@ -0,0 +1,243 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+
+//#endregion
+
+//#region ----- INTERFACES -----
+export interface ClassType {
+  _id: string
+  classTitle: string
+  workspaceId?: string
+}
+
+interface ClassesStore {
+  classes: ClassType[]
+  class: ClassType | null
+  loading: boolean
+  error: string | null
+  message: string | null
+
+  fetchClasses: (workspaceId: string) => Promise<void>
+  fetchClassById: (classId: string) => Promise<void>
+  addClass: (classTitle: string, workspaceId: string) => Promise<void>
+  deleteClass: (classId: string) => Promise<void>
+  updateClass: (
+    classId: string,
+    updates: { newTitle?: string; newWorkspaceId?: string }
+  ) => Promise<void>
+  getClassesByWorkspace: (workspaceId: string) => ClassType[]
+  clearClasses: () => void
+}
+
+//#endregion
+
+//#region ----- ZUSTAND CLASS STORE -----
+export const useClassStore = create<ClassesStore>((set, get) => ({
+  classes: [],
+  class: null,
+  loading: false,
+  error: null,
+  message: null,
+
+  fetchClasses: async (workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}/classes`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      const json = await response.json()
+      if (response.ok && json.success) {
+        set({
+          classes: json.response,
+          loading: false,
+          message: json.message || null,
+        })
+      } else {
+        throw new Error(json.message || "Failed to fetch classes")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- FETCH CLASS BY ID -----
+  fetchClassById: async (classId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/classes/${classId}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      const json = await response.json()
+      if (response.ok && json.success) {
+        set({
+          class: json.response,
+          loading: false,
+          message: json.message || null,
+        })
+      } else {
+        throw new Error(json.message || "Failed to fetch class")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+  //#endregion
+
+  //#region ----- ADD CLASS -----
+  addClass: async (classTitle: string, workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const res = await fetch(`${baseUrl}/workspace/${workspaceId}/classes`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+        body: JSON.stringify({ classTitle }),
+      })
+
+      const json = await res.json()
+      if (res.ok && json.success) {
+        set((state) => ({
+          classes: [...state.classes, json.response],
+          loading: false,
+          message: json.message || null,
+        }))
+      } else {
+        throw new Error(json.message || "Failed to add class")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- DELETE CLASS -----
+  deleteClass: async (classId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/classes/${classId}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: token,
+        },
+      })
+
+      const data = await response.json()
+      if (response.ok && data.success) {
+        set((state) => ({
+          classes: state.classes.filter((cls) => cls._id !== classId),
+          loading: false,
+          message: data.message || null,
+        }))
+      } else {
+        throw new Error(data.message || "Failed to delete class")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- UPDATE CLASS -----
+
+  updateClass: async (classId: string, updates: { newTitle?: string; newWorkspaceId?: string }) => {
+    set({ loading: true, error: null, message: null })
+
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/classes/${classId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+        body: JSON.stringify(updates), // { newTitle: "..." }
+      })
+
+      if (!response.ok) throw new Error("Failed to update class")
+
+      const data = await response.json()
+
+      if (data.success && data.response) {
+        const updatedClass = data.response
+
+        set((state) => ({
+          classes: state.classes.map((c) => (c._id === classId ? { ...c, ...updatedClass } : c)),
+          class:
+            state.class && state.class._id === classId
+              ? { ...state.class, ...updatedClass }
+              : state.class,
+          loading: false,
+          error: null,
+          message: data.message || "Class updated successfully",
+        }))
+      } else {
+        set({
+          loading: false,
+          error: data.message || "Update failed",
+          message: null,
+        })
+      }
+    } catch (err: unknown) {
+      set({
+        loading: false,
+        error: err instanceof Error ? err.message : "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- GET CLASSES BY WORKSPACE -----
+
+  getClassesByWorkspace: (workspaceId: string) => {
+    const { classes } = get()
+    return classes.filter((cls) => cls.workspaceId === workspaceId)
+  },
+
+  //#endregion
+
+  //#region ----- CLEAR CLASSES -----
+
+  clearClasses: () => {
+    set({
+      classes: [],
+      class: null,
+      loading: false,
+      error: null,
+      message: null,
+    })
+  },
+
+  //#endregion
+}))
diff --git a/frontend/src/store/commentStore.ts b/frontend/src/store/commentStore.ts
new file mode 100644
index 0000000000..642e8a0434
--- /dev/null
+++ b/frontend/src/store/commentStore.ts
@@ -0,0 +1,599 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { persist, createJSONStorage } from "zustand/middleware"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+import { useProjectStore } from "./projectStore"
+
+//#endregion
+
+//#region ----- Interfaces -----
+
+export interface ReplyType {
+  _id: string
+  content: string
+  commentId: string
+  createdAt: Date
+  replyCreatedBy?: {
+    _id: string
+    name: string
+    profileImage: string
+    role?: "teacher" | "student" | string
+  }
+  likesCount?: number
+}
+
+export interface MessageType {
+  _id: string
+  content: string
+  projectId?: string
+  createdAt?: Date
+  timeStamp: string
+  isChecked: boolean
+  commentCreatedBy: {
+    _id: string
+    name: string
+    profileImage: string
+    role?: "teacher" | "student" | string
+  }
+  commentType: string
+  replies?: ReplyType[]
+  likesCount?: number
+}
+
+interface UpdateCommentInput {
+  commentId: string
+  content: string
+}
+
+interface UpdateReplyInput {
+  replyId: string
+  content: string
+}
+
+export interface NewMessageType {
+  content: string
+  projectId?: string
+  timeStamp: string
+  commentType: string
+}
+
+interface MessageStore {
+  allComments: MessageType[]
+  projectComments: MessageType[]
+  privateComments: MessageType[]
+  selectedTimeStamp: string | null
+  selectedCommentId: string | null
+  setSelectedTimeStamp: (stamp: string) => void
+  setSelectedCommentId: (id: string | null) => void
+  addMessage: (msg: NewMessageType) => Promise<void>
+  addReply: (reply: { content: string; commentId: string; projectId?: string }) => Promise<void>
+  clearMessages: () => void
+  toggleCheck: (commentId: string) => Promise<void>
+  toggleLike: (commentId: string) => Promise<void>
+  toggleReplyLike: (replyId: string) => Promise<void>
+  updateComment: (update: UpdateCommentInput) => Promise<void>
+  updateReply: (update: UpdateReplyInput) => Promise<void>
+  deleteReply: (replyId: string, commentId: string) => Promise<void>
+  deleteComment: (commentId: string) => Promise<void>
+  fetchComments: (projectId: string) => Promise<void>
+  fetchAllComments: () => Promise<void>
+  fetchPrivateComments: (projectId: string) => Promise<void>
+  clearComments: () => void
+}
+
+//#endregion
+
+//#region ----- Zustand varibles -----
+
+const mapComment = (item: any): MessageType => ({
+  _id: item._id,
+  content: item.content,
+  projectId: item.projectId,
+  createdAt: new Date(item.createdAt),
+  timeStamp: item.timeStamp,
+  isChecked: item.isChecked,
+  commentCreatedBy: {
+    _id: item.commentCreatedBy._id,
+    name: item.commentCreatedBy.name,
+    profileImage: item.commentCreatedBy.profileImage,
+    role: item.commentCreatedBy.role,
+  },
+  commentType: item.commentType,
+  likesCount: item.likes?.length || 0,
+  replies: (item.replies || []).map((reply: any) => ({
+    _id: reply._id,
+    content: reply.content,
+    commentId: reply.commentId,
+    createdAt: new Date(reply.createdAt),
+    replyCreatedBy: {
+      _id: reply.replyCreatedBy?._id,
+      name: reply.replyCreatedBy?.name,
+      profileImage: reply.replyCreatedBy?.profileImage,
+      role: reply.replyCreatedBy?.role,
+    },
+    likesCount: reply.replyLikes?.length || 0,
+  })),
+})
+
+//#endregion
+
+//#region ----- Zustand Comment Store -----
+export const commentStore = create<MessageStore>()(
+  persist(
+    (set) => ({
+      allComments: [],
+      projectComments: [],
+      privateComments: [],
+      selectedTimeStamp: null,
+      selectedCommentId: null,
+
+      setSelectedTimeStamp: (stamp) => set({ selectedTimeStamp: stamp }),
+      setSelectedCommentId: (id) => set({ selectedCommentId: id }),
+
+      //#endregion
+
+      //#region ----- ADD COMMENTS  -----
+      addMessage: async (msg) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/projects/${msg.projectId}/comments`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              ...(token ? { Authorization: token } : {}),
+            },
+            body: JSON.stringify(msg),
+          })
+
+          if (!response.ok) throw new Error("Failed to post comment")
+
+          const data = await response.json()
+          if (data.success && data.response) {
+            const newMessage = mapComment(data.response)
+
+            set((state) => {
+              const updates: Partial<MessageStore> = {
+                allComments: [...state.allComments, newMessage],
+              }
+
+              if (newMessage.commentType === "private") {
+                updates.privateComments = [...state.privateComments, newMessage]
+              } else {
+                updates.projectComments = [...state.projectComments, newMessage]
+              }
+
+              return updates
+            })
+          }
+        } catch (err: any) {
+          console.error("Error posting comment:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- ADD REPLY -----
+      addReply: async (reply) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/comments/${reply.commentId}/replies`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              ...(token ? { Authorization: token } : {}),
+            },
+            body: JSON.stringify({ content: reply.content }),
+          })
+
+          if (!response.ok) throw new Error("Failed to post reply")
+
+          const data = await response.json()
+          if (data.success && data.response) {
+            const newReply: ReplyType = {
+              _id: data.response._id,
+              content: data.response.content,
+              commentId: data.response.commentId,
+              createdAt: new Date(data.response.createdAt),
+              replyCreatedBy: {
+                _id: data.response.replyCreatedBy?._id,
+                name: data.response.replyCreatedBy?.name,
+                profileImage: data.response.replyCreatedBy?.profileImage,
+                role: data.response.replyCreatedBy?.role,
+              },
+            }
+
+            const updateReplies = (comments: MessageType[]) =>
+              comments.map((msg) =>
+                msg._id === newReply.commentId
+                  ? { ...msg, replies: [...(msg.replies || []), newReply] }
+                  : msg
+              )
+
+            set((state) => ({
+              projectComments: updateReplies(state.projectComments),
+              allComments: updateReplies(state.allComments),
+              privateComments: updateReplies(state.privateComments),
+            }))
+          }
+        } catch (err: any) {
+          console.error("Error posting reply:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- CLEAR MESSAGES -----
+      clearMessages: () => set({ projectComments: [], allComments: [], privateComments: [] }),
+
+      //#endregion
+
+      //#region ----- TOGGLE CHECK -----
+      toggleCheck: async (commentId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/comments/${commentId}/toggle-check`, {
+            method: "PATCH",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+              "Content-Type": "application/json",
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to toggle isChecked")
+
+          const data = await response.json()
+          if (!data.success || !data.response) throw new Error("No updated comment returned")
+
+          const updatedComment = mapComment(data.response)
+
+          const updateComments = (comments: MessageType[]) =>
+            comments.map((msg) => (msg._id === updatedComment._id ? updatedComment : msg))
+
+          set((state) => ({
+            projectComments: updateComments(state.projectComments),
+            allComments: updateComments(state.allComments),
+            privateComments: updateComments(state.privateComments),
+          }))
+
+          //This updates the comments on the project with comments
+          const fetchProjectsWithComments = useProjectStore.getState().fetchProjectsWithComments
+          await fetchProjectsWithComments()
+        } catch (err: any) {
+          console.error("Toggle check failed:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- TOGGLE COMMENT LIKE -----
+      toggleLike: async (commentId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/comments/${commentId}/likes`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to toggle like")
+
+          const data = await response.json()
+
+          if (!data.success) throw new Error("Like toggle failed")
+
+          set((state) => {
+            const updateComments = (comments: MessageType[]) =>
+              comments.map((msg) =>
+                msg._id === commentId
+                  ? {
+                      ...msg,
+                      likesCount: data.totalLikes,
+                    }
+                  : msg
+              )
+
+            return {
+              projectComments: updateComments(state.projectComments),
+              allComments: updateComments(state.allComments),
+              privateComments: updateComments(state.privateComments),
+            }
+          })
+        } catch (err: any) {
+          console.error("Like toggle failed:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- TOGGLE REPLY LIKE -----
+      toggleReplyLike: async (replyId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/replies/${replyId}/likes`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to toggle reply like")
+
+          const data = await response.json()
+          if (!data.success) throw new Error("Reply like toggle failed")
+
+          set((state) => {
+            const updateReplies = (comments: MessageType[]) =>
+              comments.map((comment) => ({
+                ...comment,
+                replies: (comment.replies || []).map((reply) =>
+                  reply._id === replyId ? { ...reply, likesCount: data.totalLikes } : reply
+                ),
+              }))
+
+            return {
+              projectComments: updateReplies(state.projectComments),
+              allComments: updateReplies(state.allComments),
+              privateComments: updateReplies(state.privateComments),
+            }
+          })
+        } catch (err: any) {
+          console.error("Reply like toggle failed:", err.message)
+        }
+      },
+      //#endregion
+
+      //#region ----- UPDATE COMMENT  -----
+      updateComment: async ({ commentId, content }) => {
+        try {
+          const token = getToken()
+
+          const response = await fetch(`${baseUrl}/comments/${commentId}`, {
+            method: "PATCH",
+            headers: {
+              "Content-Type": "application/json",
+              ...(token ? { Authorization: token } : {}),
+            },
+            body: JSON.stringify({ newContent: content }),
+          })
+
+          if (!response.ok) throw new Error("Failed to update comment")
+
+          const data = await response.json()
+
+          if (data.success && data.response) {
+            const updatedComment = mapComment(data.response)
+
+            const updateComments = (comments: MessageType[]) =>
+              comments.map((msg) =>
+                msg._id === commentId ? { ...msg, content: updatedComment.content } : msg
+              )
+
+            set((state) => ({
+              projectComments: updateComments(state.projectComments),
+              allComments: updateComments(state.allComments),
+              privateComments: updateComments(state.privateComments),
+            }))
+          } else {
+            console.error("Update failed:", data.message || "No comment returned")
+          }
+        } catch (err: any) {
+          console.error("Error updating comment:", err.message || "Unknown error")
+        }
+      },
+
+      //#endregion
+
+      //#region ----- UPDATE REPLY -----
+      updateReply: async ({ replyId, content }) => {
+        try {
+          const token = getToken()
+
+          const response = await fetch(
+            `${baseUrl}/replies/${replyId}`, // assuming this is the reply ID
+            {
+              method: "PATCH",
+              headers: {
+                "Content-Type": "application/json",
+                ...(token ? { Authorization: token } : {}),
+              },
+              body: JSON.stringify({ newContent: content }),
+            }
+          )
+
+          if (!response.ok) throw new Error("Failed to update reply")
+
+          const data = await response.json()
+
+          if (data.success && data.response) {
+            const updatedReply = data.response
+
+            const updateReplies = (comments: MessageType[]) =>
+              comments.map((comment) => ({
+                ...comment,
+                replies: (comment.replies || []).map((reply) =>
+                  reply._id === updatedReply._id
+                    ? { ...reply, content: updatedReply.content }
+                    : reply
+                ),
+              }))
+
+            set((state) => ({
+              projectComments: updateReplies(state.projectComments),
+              allComments: updateReplies(state.allComments),
+              privateComments: updateReplies(state.privateComments),
+            }))
+          } else {
+            console.error("Update failed:", data.message || "No reply returned")
+          }
+        } catch (err: any) {
+          console.error("Error updating reply:", err.message || "Unknown error")
+        }
+      },
+
+      //#endregion
+
+      //#region ----- DELETE COMMENTS -----
+      deleteComment: async (commentId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/comments/${commentId}`, {
+            method: "DELETE",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to delete comment")
+
+          const data = await response.json()
+          if (data.success) {
+            set((state) => ({
+              projectComments: state.projectComments.filter((msg) => msg._id !== commentId),
+              allComments: state.allComments.filter((msg) => msg._id !== commentId),
+              privateComments: state.privateComments.filter((msg) => msg._id !== commentId),
+            }))
+          }
+        } catch (err: any) {
+          console.error("Error deleting comment:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- DELETE REPLY -----
+      deleteReply: async (replyId, commentId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/replies/${replyId}`, {
+            method: "DELETE",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to delete reply")
+
+          const data = await response.json()
+          if (data.success) {
+            const filterReplies = (comments: MessageType[]) =>
+              comments.map((msg) =>
+                msg._id === commentId
+                  ? {
+                      ...msg,
+                      replies: (msg.replies || []).filter((r) => r._id !== replyId),
+                    }
+                  : msg
+              )
+
+            set((state) => ({
+              projectComments: filterReplies(state.projectComments),
+              allComments: filterReplies(state.allComments),
+              privateComments: filterReplies(state.privateComments),
+            }))
+          }
+        } catch (err: any) {
+          console.error("Error deleting reply:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- FETCH COMMENTS -----
+      fetchComments: async (projectId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/projects/${projectId}/comments`, {
+            method: "GET",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to fetch comments")
+
+          const json = await response.json()
+          if (json.success && Array.isArray(json.response)) {
+            set({ projectComments: json.response.map(mapComment) })
+          }
+        } catch (err: any) {
+          console.error("Fetch error:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- FETCH ALL COMMENTS -----
+      fetchAllComments: async () => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/comments/all`, {
+            method: "GET",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to fetch all comments")
+
+          const json = await response.json()
+          if (json.success && Array.isArray(json.response)) {
+            set({ allComments: json.response.map(mapComment) })
+          }
+        } catch (err: any) {
+          console.error("Fetch all error:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- FETCH PRIVATE COMMENTS -----
+      fetchPrivateComments: async (projectId) => {
+        try {
+          const token = getToken()
+          const response = await fetch(`${baseUrl}/projects/${projectId}/comments/private`, {
+            method: "GET",
+            headers: {
+              ...(token ? { Authorization: token } : {}),
+            },
+          })
+
+          if (!response.ok) throw new Error("Failed to fetch private comments")
+
+          const json = await response.json()
+          if (json.success && Array.isArray(json.response)) {
+            set({ privateComments: json.response.map(mapComment) })
+          }
+        } catch (err: any) {
+          console.error("Private fetch error:", err.message)
+        }
+      },
+
+      //#endregion
+
+      //#region ----- CLEAR COMMENTS -----
+
+      clearComments: () => {
+        set({
+          allComments: [],
+          projectComments: [],
+          privateComments: [],
+          selectedTimeStamp: null,
+          selectedCommentId: null,
+        })
+      },
+
+      //#endregion
+    }),
+    //#region ----- COMMENT STORAGE -----
+    {
+      name: "comment-storage",
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+)
+
+//#endregion
diff --git a/frontend/src/store/editStore.ts b/frontend/src/store/editStore.ts
new file mode 100644
index 0000000000..ed47f80ea6
--- /dev/null
+++ b/frontend/src/store/editStore.ts
@@ -0,0 +1,43 @@
+import { create } from "zustand"
+
+type EditingState = {
+  isEditingClass: boolean
+  isEditingProject: boolean
+  isRemovingClass: boolean
+  isRemovingProject: boolean
+  removingProjectId: string | null
+  removingClassId: string | null
+
+  currentClassId: string | null
+
+  setIsEditingClass: (value: boolean) => void
+  setIsRemovingProject: (value: boolean) => void
+  setIsEditingProject: (value: boolean) => void
+  setIsRemovingClass: (value: boolean) => void
+
+  setRemovingProjectId: (id: string | null) => void
+  setRemovingClassId: (id: string | null) => void
+
+  setCurrentClassId: (id: string | null) => void
+}
+
+export const useEditingStore = create<EditingState>((set) => ({
+  isEditingClass: false,
+  isRemovingClass: false,
+  isEditingProject: false,
+  isRemovingProject: false,
+  removingProjectId: null,
+  removingClassId: null,
+
+  currentClassId: null,
+
+  setIsEditingClass: (value) => set({ isEditingClass: value }),
+  setIsRemovingClass: (value) => set({ isRemovingClass: value }),
+  setIsEditingProject: (value) => set({ isEditingProject: value }),
+  setIsRemovingProject: (value) => set({ isRemovingProject: value }),
+
+  setRemovingProjectId: (id) => set({ removingProjectId: id }),
+  setRemovingClassId: (id) => set({ removingClassId: id }),
+
+  setCurrentClassId: (id) => set({ currentClassId: id }),
+}))
diff --git a/frontend/src/store/projectStore.ts b/frontend/src/store/projectStore.ts
new file mode 100644
index 0000000000..8f3d6d9443
--- /dev/null
+++ b/frontend/src/store/projectStore.ts
@@ -0,0 +1,349 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+
+//#endregion
+
+//#region ----- INTERFACES -----
+export interface UserType {
+  _id: string
+  name: string
+  email: string
+  profileImage?: string | null
+}
+
+export interface ProjectType {
+  _id?: string
+  classId: string
+  projectName: string
+  projectDescription: string
+  teacher: string
+  video: string | File | null
+  thumbnail?: string
+  projectCreatedBy?: UserType
+  comments?: any[]
+}
+
+interface ProjectsStore {
+  projects: ProjectType[]
+  project: ProjectType | null
+  loading: boolean
+  error: string | null
+  message: string | null
+
+  fetchProjects: (classId: string) => Promise<void>
+  fetchProjectsWithComments: () => Promise<void>
+  fetchProjectById: (projectId: string) => Promise<void>
+  addProject: (classId: string, newProject: ProjectType) => Promise<void>
+  deleteProject: (projectId: string) => Promise<void>
+  updateProject: (
+    projectId: string,
+    updates: { newName?: string; newDescription?: string; newTeacher?: string }
+  ) => Promise<void>
+  clearProjects: () => void
+}
+
+//#endregion
+
+//#region ----- ZUSTAND PROJECT STORE -----
+export const useProjectStore = create<ProjectsStore>((set) => ({
+  projects: [],
+  project: null,
+  loading: false,
+  error: null,
+  message: null,
+
+  //#endregion
+
+  //#region ----- FETCH PROJECTS -----
+  fetchProjects: async (classId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/classes/${classId}/projects`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      if (!response.ok) throw new Error("Network response was not ok")
+
+      const json = await response.json()
+
+      if (json.success) {
+        set({
+          projects: json.response,
+          loading: false,
+          error: null,
+          message: json.message || "Projects fetched successfully",
+        })
+      } else {
+        set({
+          loading: false,
+          error: json.message || "Failed to fetch the projects",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({
+        loading: false,
+        error: err.message || "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- FETCH PROJECT WITH COMMETNS -----
+  fetchProjectsWithComments: async () => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/classes/projects/with-comments`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      if (!response.ok) throw new Error("Network response was not ok")
+
+      const json = await response.json()
+
+      if (json.success) {
+        set({
+          projects: json.response,
+          loading: false,
+          error: null,
+          message: json.message || "Projects with comments fetched successfully",
+        })
+      } else {
+        set({
+          loading: false,
+          error: json.message || "Failed to fetch the projects with comments",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({
+        loading: false,
+        error: err.message || "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- FETCH PROJECT BY ID -----
+  fetchProjectById: async (projectId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/projects/${projectId}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      if (!response.ok) throw new Error("Network response was not ok")
+
+      const json = await response.json()
+
+      if (json.success) {
+        set({
+          project: json.response,
+          loading: false,
+          error: null,
+          message: json.message || "Project fetched successfully",
+        })
+      } else {
+        set({
+          loading: false,
+          error: json.message || "Failed to fetch project",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({
+        loading: false,
+        error: err.message || "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- ADD PROJECT -----
+  addProject: async (classId: string, newProject: ProjectType) => {
+    set({ loading: true, error: null, message: null })
+
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const formData = new FormData()
+      formData.append("projectName", newProject.projectName)
+      formData.append("projectDescription", newProject.projectDescription || "")
+      formData.append("teacher", newProject.teacher || "")
+      if (newProject.video) {
+        formData.append("video", newProject.video)
+      }
+
+      const res = await fetch(`${baseUrl}/classes/${classId}/projects`, {
+        method: "POST",
+        headers: {
+          Authorization: token,
+        },
+        body: formData,
+      })
+
+      if (!res.ok) throw new Error("Failed to add project")
+
+      const json = await res.json()
+
+      if (json.success) {
+        set((state) => ({
+          projects: [...state.projects, json.response],
+          loading: false,
+          error: null,
+          message: json.message,
+        }))
+      } else {
+        set({
+          loading: false,
+          error: json.message || "Failed to add project",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({ loading: false, error: err.message, message: null })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- DELETE PROJECT -----
+  deleteProject: async (projectId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/projects/${projectId}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: token,
+        },
+      })
+
+      if (!response.ok) throw new Error("Failed to delete project")
+
+      const data = await response.json()
+
+      if (data.success) {
+        set((state) => ({
+          projects: state.projects.filter((project) => project._id !== projectId),
+          loading: false,
+          message: data.message,
+          error: null,
+        }))
+      } else {
+        set({
+          loading: false,
+          error: data.message || "Failed to delete project",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({
+        loading: false,
+        error: err.message || "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- UPDATE PROJECT -----
+  updateProject: async (
+    projectId: string,
+    updates: { newName?: string; newDescription?: string; newTeacher?: string }
+  ) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/projects/${projectId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+        body: JSON.stringify(updates),
+      })
+
+      if (!response.ok) throw new Error("Failed to update project")
+
+      const data = await response.json()
+
+      if (data.success && data.response) {
+        const updatedProject = data.response
+
+        set((state) => ({
+          projects: state.projects.map((p) =>
+            p._id === projectId ? { ...p, ...updatedProject } : p
+          ),
+          project:
+            state.project && state.project._id === projectId
+              ? { ...state.project, ...updatedProject }
+              : state.project,
+          loading: false,
+          error: null,
+          message: data.message || "Project updated successfully",
+        }))
+      } else {
+        set({
+          loading: false,
+          error: data.message || "Update failed",
+          message: null,
+        })
+      }
+    } catch (err: any) {
+      set({
+        loading: false,
+        error: err.message || "Unknown error",
+        message: null,
+      })
+    }
+  },
+
+  //#endregion
+
+  //#region ----- CLEAR PROJECTS -----
+
+  clearProjects: () => {
+    set({
+      projects: [],
+      project: null,
+      loading: false,
+      error: null,
+      message: null,
+    })
+  },
+
+  //#endregion
+}))
diff --git a/frontend/src/store/replyStore.ts b/frontend/src/store/replyStore.ts
new file mode 100644
index 0000000000..f033f5152b
--- /dev/null
+++ b/frontend/src/store/replyStore.ts
@@ -0,0 +1,125 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import type { ReplyType as BaseReplyType } from "./commentStore"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+
+//#endregion ----- UPDATE REPLY -----
+
+//#region ----- INTERFACES -----
+export interface ReplyType extends BaseReplyType {
+  likesCount?: number // Added to track likes on replies
+}
+
+interface ReplyInput {
+  content: string
+  commentId: string
+  projectId?: string
+}
+
+interface UpdateReplyInput {
+  replyId: string
+  content: string
+}
+
+interface ReplyStore {
+  replies: ReplyType[]
+  addReply: (reply: ReplyInput) => Promise<void>
+  updateReply: (update: UpdateReplyInput) => Promise<void>
+}
+
+//#endregion
+
+//#region ----- ZUSTAND REPLY STORE -----
+export const replyStore = create<ReplyStore>((set) => ({
+  replies: [],
+
+  //#endregion
+
+  //#region ----- ADD REPLY -----
+  addReply: async (reply) => {
+    try {
+      const token = getToken()
+
+      console.log(reply.commentId)
+
+      const response = await fetch(
+        `${baseUrl}/comments/${reply.commentId}/replies`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            ...(token ? { Authorization: token } : {}),
+          },
+          body: JSON.stringify({ content: reply.content }),
+        }
+      )
+
+      if (!response.ok) throw new Error("Failed to post reply")
+
+      const data = await response.json()
+
+      if (data.success && data.response) {
+        const newReply: ReplyType = {
+          _id: data.response._id,
+          content: data.response.content,
+          commentId: data.response.commentId,
+          createdAt: new Date(data.response.createdAt),
+          replyCreatedBy: {
+            _id: data.response.replyCreatedBy?._id,
+            name: data.response.replyCreatedBy?.name,
+            profileImage: data.response.replyCreatedBy?.profileImage,
+            role: data.response.replyCreatedBy?.role,
+          },
+          likesCount: data.response.likes?.length || 0,
+        }
+
+        set((state) => ({
+          replies: [...state.replies, newReply],
+        }))
+      } else {
+        console.error("Post failed:", data.message || "No reply returned")
+      }
+    } catch (err: any) {
+      console.error("Error posting reply:", err.message || "Unknown error")
+    }
+  },
+
+  //#endregion
+
+  //#region ----- UPDATE REPLY -----
+  updateReply: async ({ replyId, content }) => {
+    try {
+      const token = getToken()
+
+      const response = await fetch(`${baseUrl}/replies/${replyId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: token } : {}),
+        },
+        body: JSON.stringify({ content }),
+      })
+
+      if (!response.ok) throw new Error("Failed to update reply")
+
+      const data = await response.json()
+
+      if (data.success && data.response) {
+        set((state) => ({
+          replies: state.replies.map((reply) =>
+            reply._id === replyId
+              ? { ...reply, content: data.response.content }
+              : reply
+          ),
+        }))
+      } else {
+        console.error("Update failed:", data.message || "No reply returned")
+      }
+    } catch (err: any) {
+      console.error("Error updating reply:", err.message || "Unknown error")
+    }
+  },
+
+  //#endregion
+}))
diff --git a/frontend/src/store/tabStore.ts b/frontend/src/store/tabStore.ts
new file mode 100644
index 0000000000..3424967804
--- /dev/null
+++ b/frontend/src/store/tabStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand"
+
+interface TabStore {
+  activeTab: "description" | "question" | "public" | "private"
+  setActiveTab: (tab: "description" | "question" | "public" | "private") => void
+}
+
+export const useTabStore = create<TabStore>((set) => ({
+  activeTab: "question",
+  setActiveTab: (tab) => set({ activeTab: tab }),
+}))
diff --git a/frontend/src/store/teamStore.ts b/frontend/src/store/teamStore.ts
new file mode 100644
index 0000000000..c07f661c07
--- /dev/null
+++ b/frontend/src/store/teamStore.ts
@@ -0,0 +1,489 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+//#endregion
+
+//#region ----- INTERFACES -----
+export interface TeamMember {
+  _id?: string
+  name: string
+  email: string
+  role: string
+  profileImage?: string
+}
+
+export interface Team {
+  _id: string
+  teamName: string
+  createdBy: TeamMember
+  createdAt: string
+  assignedTeachers: TeamMember[]
+  assignedStudents: TeamMember[]
+  workspaceId: {
+    _id: string
+    name: string
+  }
+  accessTo: Array<{
+    _id: string
+    classTitle: string
+  }>
+  schemaVersion: string
+}
+
+export interface CreateTeamData {
+  teamName: string
+  members?: string[] // Array of user IDs
+  teachers?: string[] // Array of teacher IDs
+  classes?: string[] // Array of class IDs
+}
+
+export interface UpdateTeamData {
+  teamName?: string
+  members?: string[] // Array of user IDs to add
+  teachers?: string[] // Array of teacher IDs to add
+  classes?: string[] // Array of class IDs to add
+}
+
+interface TeamStore {
+  teams: Team[]
+  team: Team | null
+  loading: boolean
+  error: string | null
+  message: string | null
+
+  fetchTeams: (workspaceId: string) => Promise<void>
+  fetchTeamById: (teamId: string) => Promise<void>
+  createTeam: (workspaceId: string, teamData: CreateTeamData) => Promise<void>
+  updateTeam: (teamId: string, teamData: UpdateTeamData) => Promise<void>
+  deleteTeam: (teamId: string) => Promise<void>
+  addTeamMember: (teamId: string, userId: string) => Promise<void>
+  removeTeamMember: (teamId: string, userId: string) => Promise<void>
+  addTeamTeacher: (teamId: string, teacherId: string) => Promise<void>
+  removeTeamTeacher: (teamId: string, teacherId: string) => Promise<void>
+  addTeamClass: (teamId: string, classId: string) => Promise<void>
+  removeTeamClass: (teamId: string, classId: string) => Promise<void>
+}
+//#endregion
+
+//#region ----- ZUSTAND TEAM STORE -----
+export const useTeamStore = create<TeamStore>((set, get) => ({
+  teams: [],
+  team: null,
+  loading: false,
+  error: null,
+  message: null,
+
+  //#endregion
+
+  //#region ----- FETCH TEAMS -----
+  fetchTeams: async (workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}/teams`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to fetch teams")
+      }
+
+      const data = await response.json()
+      set({
+        teams: data.response,
+        loading: false,
+        error: null,
+        message: "Teams fetched successfully",
+      })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch teams"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- FETCH TEAM BY ID -----
+  fetchTeamById: async (teamId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to fetch team")
+      }
+
+      const data = await response.json()
+      set({
+        team: data.response,
+        loading: false,
+        error: null,
+        message: "Team fetched successfully",
+      })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch team"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- CREATE TEAM -----
+  createTeam: async (workspaceId: string, teamData: CreateTeamData) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}/teams`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(teamData),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to create team")
+      }
+
+      const data = await response.json()
+      set((state) => ({
+        teams: [...state.teams, data.response],
+        loading: false,
+        error: null,
+        message: "Team created successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to create team"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- UPDATE TEAM -----
+  updateTeam: async (teamId: string, teamData: UpdateTeamData) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(teamData),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to update team")
+      }
+
+      const data = await response.json()
+      set((state) => ({
+        teams: state.teams.map((team) =>
+          team._id === teamId ? { ...team, ...data.response } : team
+        ),
+        team: state.team?._id === teamId ? { ...state.team, ...data.response } : state.team,
+        loading: false,
+        error: null,
+        message: "Team updated successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to update team"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- DELETE TEAM -----
+  deleteTeam: async (teamId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to delete team")
+      }
+
+      set((state) => ({
+        teams: state.teams.filter((team) => team._id !== teamId),
+        team: state.team?._id === teamId ? null : state.team,
+        loading: false,
+        error: null,
+        message: "Team deleted successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to delete team"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- ADD TEAM MEMBER -----
+  addTeamMember: async (teamId: string, userId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/members/${userId}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to add team member")
+      }
+
+      // Fetch updated team data to get the newly added member info
+      await get().fetchTeamById(teamId)
+      set({ message: "Team member added successfully" })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to add team member"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- REMOVE TEAM MEMBER -----
+  removeTeamMember: async (teamId: string, userId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/members/${userId}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to remove team member")
+      }
+
+      set((state) => ({
+        teams: state.teams.map((team) =>
+          team._id === teamId
+            ? {
+                ...team,
+                assignedTeachers: team.assignedTeachers.filter((teacher) => teacher._id !== userId),
+              }
+            : team
+        ),
+        team:
+          state.team?._id === teamId
+            ? {
+                ...state.team,
+                assignedTeachers: state.team.assignedTeachers.filter(
+                  (teacher) => teacher._id !== userId
+                ),
+              }
+            : state.team,
+        loading: false,
+        error: null,
+        message: "Team member removed successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to remove team member"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- ADD TEAM TEACHER -----
+  addTeamTeacher: async (teamId: string, teacherId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/teachers/${teacherId}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to add team teacher")
+      }
+
+      // Fetch updated team data to get the newly added teacher info
+      await get().fetchTeamById(teamId)
+      set({ message: "Team teacher added successfully" })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to add team teacher"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- REMOVE TEAM TEACHER -----
+  removeTeamTeacher: async (teamId: string, teacherId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/teachers/${teacherId}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to remove team teacher")
+      }
+
+      set((state) => ({
+        teams: state.teams.map((team) =>
+          team._id === teamId
+            ? {
+                ...team,
+                assignedTeachers: team.assignedTeachers.filter(
+                  (teacher) => teacher._id !== teacherId
+                ),
+              }
+            : team
+        ),
+        team:
+          state.team?._id === teamId
+            ? {
+                ...state.team,
+                assignedTeachers: state.team.assignedTeachers.filter(
+                  (teacher) => teacher._id !== teacherId
+                ),
+              }
+            : state.team,
+        loading: false,
+        error: null,
+        message: "Team teacher removed successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to remove team teacher"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- ADD TEAM CLASS -----
+  addTeamClass: async (teamId: string, classId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/classes/${classId}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to add team class")
+      }
+
+      // Fetch updated team data to get the newly added class info
+      await get().fetchTeamById(teamId)
+      set({ message: "Team class added successfully" })
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to add team class"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+
+  //#region ----- REMOVE TEAM CLASS -----
+  removeTeamClass: async (teamId: string, classId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/teams/${teamId}/classes/${classId}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to remove team class")
+      }
+
+      set((state) => ({
+        teams: state.teams.map((team) =>
+          team._id === teamId
+            ? {
+                ...team,
+                accessTo: team.accessTo.filter((classItem) => classItem._id !== classId),
+              }
+            : team
+        ),
+        team:
+          state.team?._id === teamId
+            ? {
+                ...state.team,
+                accessTo: state.team.accessTo.filter((classItem) => classItem._id !== classId),
+              }
+            : state.team,
+        loading: false,
+        error: null,
+        message: "Team class removed successfully",
+      }))
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to remove team class"
+      set({ error: errorMessage, loading: false, message: null })
+    }
+  },
+  //#endregion
+}))
+//#endregion
diff --git a/frontend/src/store/themeStore.ts b/frontend/src/store/themeStore.ts
new file mode 100644
index 0000000000..44c7794219
--- /dev/null
+++ b/frontend/src/store/themeStore.ts
@@ -0,0 +1,24 @@
+import { create } from "zustand"
+
+type ThemeMode = "light" | "dark"
+
+interface ThemeStore {
+  themeMode: ThemeMode
+  setThemeMode: (mode: ThemeMode) => void
+  toggleTheme: () => void
+}
+
+export const useThemeStore = create<ThemeStore>((set) => ({
+  themeMode: (localStorage.getItem("theme") as ThemeMode) || "light",
+  setThemeMode: (mode) => {
+    localStorage.setItem("theme", mode)
+    set({ themeMode: mode })
+  },
+  toggleTheme: () => {
+    set((state) => {
+      const newMode = state.themeMode === "light" ? "dark" : "light"
+      localStorage.setItem("theme", newMode)
+      return { themeMode: newMode }
+    })
+  },
+}))
diff --git a/frontend/src/store/timeCodeStore.ts b/frontend/src/store/timeCodeStore.ts
new file mode 100644
index 0000000000..3631ad8a82
--- /dev/null
+++ b/frontend/src/store/timeCodeStore.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand"
+
+interface TimeCode {
+  timecode: string
+  setTimecode: (time: string) => void
+}
+
+export const useTimecode = create<TimeCode>((set) => ({
+  timecode: "00:00",
+  setTimecode: (time) => set({ timecode: time }),
+}))
diff --git a/frontend/src/store/userStore.ts b/frontend/src/store/userStore.ts
new file mode 100644
index 0000000000..a4fb849076
--- /dev/null
+++ b/frontend/src/store/userStore.ts
@@ -0,0 +1,470 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { baseUrl } from "../config/api"
+import { isColdStartError, getColdStartErrorMessage } from "../utils/apiErrorHandler"
+import { useBackendStatusStore } from "./backendStatusStore"
+//#endregion
+
+//#region ----- INTERFACES -----
+interface AuthUser {
+  _id?: string
+  email: string
+  name: string
+  userId: string
+  accessToken: string
+  role: string
+  profileImage: string
+  workspaceId?: string
+  teams?: string[]
+}
+
+interface UserStore {
+  user: AuthUser | null
+  isLoggedIn: boolean
+  users: AuthUser[]
+  loading: boolean
+  login: (email: string, password: string) => Promise<{ success: boolean; message: string }>
+  logout: () => void
+  createUser: (formData: FormData) => Promise<{ success: boolean; message: string }>
+  getAllUsers: () => Promise<{ success: boolean; message: string }>
+  getWorkspaceUsers: (workspaceId: string) => Promise<{ success: boolean; message: string }>
+  deleteUser: (userId: string) => Promise<{ success: boolean; message: string }>
+  updateUser: (
+    userId: string,
+    updates: {
+      newName?: string
+      newEmail?: string
+      newRole?: string
+      newPassword?: string
+      newProfileImage?: string
+      newWorkspaceId?: string
+    }
+  ) => Promise<{ success: boolean; message: string }>
+  sortUsersByRole: () => void
+  setUserWorkspace: (workspaceId: string) => void
+  fetchCurrentUser: () => Promise<void>
+}
+//#endregion
+
+//#region ----- GET USER FROM LOCAL STORAGE -----
+const savedEmail = localStorage.getItem("email")
+const savedUserId = localStorage.getItem("userId")
+const savedToken = localStorage.getItem("accessToken")
+const savedRole = localStorage.getItem("role")
+const savedName = localStorage.getItem("name")
+const savedProfileImage = localStorage.getItem("profileImage")
+//#endregion
+
+//#region ----- INITIAL USER -----
+const initialUser: AuthUser | null =
+  savedEmail && savedUserId && savedToken && savedRole && savedName && savedProfileImage
+    ? {
+        _id: savedUserId, // Use userId as _id for initial user
+        email: savedEmail,
+        userId: savedUserId,
+        role: savedRole,
+        accessToken: savedToken,
+        name: savedName,
+        profileImage: savedProfileImage,
+      }
+    : null
+//#endregion
+
+//#region ----- ZUSTAND USER STORE -----
+export const useUserStore = create<UserStore>((set, get) => ({
+  user: initialUser,
+  isLoggedIn: !!initialUser,
+  users: [],
+  loading: false,
+
+  //#endregion
+
+  //#region ----- LOGIN -----
+  login: async (email, password) => {
+    try {
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), 65000) // 65 second timeout
+
+      const res = await fetch(`${baseUrl}/session`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+      const data = await res.json()
+
+      if (res.ok && data.accessToken) {
+        const user = {
+          _id: data.userId, // Include _id when available
+          email,
+          userId: data.userId,
+          accessToken: data.accessToken,
+          role: data.role || "student",
+          name: data.name || "",
+          profileImage: data.profileImage || "/SImon.png",
+          teams: data.teams || [],
+        }
+
+        // Save to localStorage
+        localStorage.setItem("email", email)
+        localStorage.setItem("userId", data.userId)
+        localStorage.setItem("accessToken", data.accessToken)
+        localStorage.setItem("role", user.role)
+        localStorage.setItem("name", user.name)
+        localStorage.setItem("profileImage", user.profileImage)
+
+        set({ user, isLoggedIn: true })
+        return { success: true, message: "Login successful" }
+      } else {
+        if (res.status === 401) {
+          return { success: false, message: "Incorrect email or password" }
+        } else if (res.status === 404) {
+          return { success: false, message: "User does not exist" }
+        } else {
+          return {
+            success: false,
+            message: data.error || data.message || "Login failed",
+          }
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Login failed:", err)
+
+      // Check if this is a cold start error and trigger backend health check
+      if (isColdStartError(err)) {
+        const { checkBackendHealth, status } = useBackendStatusStore.getState()
+        if (status === 'idle' || status === 'error') {
+          checkBackendHealth()
+        }
+        return { success: false, message: getColdStartErrorMessage() }
+      }
+
+      return { success: false, message: err instanceof Error ? err.message : "Login failed" }
+    }
+  },
+  //#endregion
+
+  //#region ----- LOGOUT -----
+  logout: () => {
+    localStorage.removeItem("email")
+    localStorage.removeItem("userId")
+    localStorage.removeItem("accessToken")
+    localStorage.removeItem("role")
+    localStorage.removeItem("name")
+    localStorage.removeItem("profileImage")
+    localStorage.removeItem("workspaceId")
+    localStorage.removeItem("currentWorkspaceId")
+    set({ user: null, isLoggedIn: false })
+
+    // Clear all related stores
+    import("./workspaceStore").then(({ useWorkspaceStore }) => {
+      useWorkspaceStore.getState().clearWorkspaceData()
+    })
+    import("./classStore").then(({ useClassStore }) => {
+      useClassStore.getState().clearClasses()
+    })
+    import("./projectStore").then(({ useProjectStore }) => {
+      useProjectStore.getState().clearProjects()
+    })
+    import("./commentStore").then(({ commentStore }) => {
+      commentStore.getState().clearComments()
+    })
+  },
+  //#endregion
+
+  //#region ----- CREATE USER -----
+  createUser: async (formData: FormData) => {
+    try {
+      const controller = new AbortController()
+      const timeoutId = setTimeout(() => controller.abort(), 65000) // 65 second timeout
+
+      const res = await fetch(`${baseUrl}/users`, {
+        method: "POST",
+        body: formData,
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+      const data = await res.json()
+
+      if (res.ok && data.accessToken) {
+        const user = {
+          _id: data.userId, // Include _id when available
+          email: formData.get("email") as string,
+          userId: data.userId,
+          accessToken: data.accessToken,
+          role: formData.get("role") as string,
+          name: formData.get("name") as string,
+          profileImage: data.profileImage,
+          teams: data.teams || [],
+        }
+
+        // Save to localStorage
+        localStorage.setItem("email", user.email)
+        localStorage.setItem("userId", user.userId)
+        localStorage.setItem("accessToken", user.accessToken)
+        localStorage.setItem("role", user.role)
+        localStorage.setItem("name", user.name)
+        localStorage.setItem("profileImage", user.profileImage)
+
+        set({ user, isLoggedIn: true })
+
+        // Automatically fetch workspace data for new users (especially those with invitations)
+        if (data.workspaceId) {
+          localStorage.setItem("currentWorkspaceId", data.workspaceId)
+          import("./workspaceStore").then(({ useWorkspaceStore }) => {
+            useWorkspaceStore.getState().setCurrentWorkspace(data.workspaceId)
+            useWorkspaceStore.getState().fetchUserWorkspaces()
+          })
+        }
+
+        return { success: true, message: "User created successfully" }
+      } else {
+        return {
+          success: false,
+          message: data.message || "Could not create user",
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Create user failed:", err)
+
+      // Check if this is a cold start error and trigger backend health check
+      if (isColdStartError(err)) {
+        const { checkBackendHealth, status } = useBackendStatusStore.getState()
+        if (status === 'idle' || status === 'error') {
+          checkBackendHealth()
+        }
+        return { success: false, message: getColdStartErrorMessage() }
+      }
+
+      return {
+        success: false,
+        message: err instanceof Error ? err.message : "Could not create user",
+      }
+    }
+  },
+  //#endregion
+
+  //#region ----- DELETE USER -----
+  deleteUser: async (userId: string) => {
+    try {
+      const token = localStorage.getItem("accessToken")
+      const response = await fetch(`${baseUrl}/users/${userId}`, {
+        method: "DELETE",
+        headers: {
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+      })
+
+      if (!response.ok) throw new Error("Failed to delete user")
+
+      const data = await response.json()
+      if (data.success) {
+        set({ users: get().users.filter((user) => user._id !== userId) })
+        return { success: true, message: "User deleted successfully" }
+      } else {
+        return {
+          success: false,
+          message: data.message || "Failed to delete user",
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Error deleting user:", err)
+      return {
+        success: false,
+        message: err instanceof Error ? err.message : "Failed to delete user",
+      }
+    }
+  },
+
+  //#endregion
+
+  //#region ----- PATCH USER -----
+
+  updateUser: async (
+    userId: string,
+    updates: {
+      newName?: string
+      newEmail?: string
+      newRole?: string
+      newPassword?: string
+      newProfileImage?: string
+    }
+  ) => {
+    try {
+      const token = localStorage.getItem("accessToken")
+      const response = await fetch(`${baseUrl}/users/${userId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify(updates),
+      })
+
+      if (!response.ok) throw new Error("Failed to patch user")
+
+      const data = await response.json()
+      if (data.success) {
+        // Update the current user if it's the same user being updated
+        const currentUser = get().user
+        if (currentUser && currentUser._id === userId) {
+          const updatedUser = { ...currentUser, ...data.response }
+          set({ user: updatedUser })
+
+          // Update localStorage to persist changes on reload
+          if (updatedUser.name) localStorage.setItem("name", updatedUser.name)
+          if (updatedUser.email) localStorage.setItem("email", updatedUser.email)
+          if (updatedUser.role) localStorage.setItem("role", updatedUser.role)
+          if (updatedUser.profileImage)
+            localStorage.setItem("profileImage", updatedUser.profileImage)
+        }
+
+        // Update the user in the users array
+        set((state) => ({
+          users: state.users.map((user) =>
+            user._id === userId ? { ...user, ...data.response } : user
+          ),
+        }))
+
+        return { success: true, message: "User updated successfully" }
+      } else {
+        return {
+          success: false,
+          message: data.message || "Failed to update user",
+        }
+      }
+    } catch (err: unknown) {
+      return {
+        success: false,
+        message: err instanceof Error ? err.message : "Failed to update user",
+      }
+    }
+  },
+
+  //#endregion
+
+  //#region ----- FETCH CURRENT USER -----
+  fetchCurrentUser: async () => {
+    set({ loading: true })
+    try {
+      const token = localStorage.getItem("accessToken")
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/users/${localStorage.getItem("userId")}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) throw new Error("Failed to fetch current user")
+
+      const data = await response.json()
+      if (data.success) {
+        set({ user: data.response, loading: false })
+      }
+    } catch (error) {
+      console.error("Failed to fetch current user:", error)
+      set({ loading: false })
+    }
+  },
+  //#endregion
+
+  //#region ----- GET ALL USERS -----
+  getAllUsers: async () => {
+    try {
+      const token = localStorage.getItem("accessToken")
+      const res = await fetch(`${baseUrl}/users`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+      })
+
+      const data = await res.json()
+
+      if (res.ok && data.success) {
+        set({ users: data.response })
+        return { success: true, message: "Users fetched successfully" }
+      } else {
+        return {
+          success: false,
+          message: data.message || "Failed to fetch users",
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Get users failed:", err)
+      return { success: false, message: "Failed to fetch users" }
+    }
+  },
+  //#endregion
+
+  //#region ----- GET WORKSPACE USERS -----
+  getWorkspaceUsers: async (workspaceId: string) => {
+    set({ loading: true })
+    try {
+      const token = localStorage.getItem("accessToken")
+      if (!token) throw new Error("Missing access token")
+
+      const res = await fetch(`${baseUrl}/workspace/${workspaceId}/users`, {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+      })
+
+      const data = await res.json()
+
+      if (res.ok && data.success) {
+        set({ users: data.response, loading: false })
+        return { success: true, message: "Workspace users fetched successfully" }
+      } else {
+        set({ loading: false })
+        return {
+          success: false,
+          message: data.message || "Failed to fetch workspace users",
+        }
+      }
+    } catch (err: unknown) {
+      console.error("Get workspace users failed:", err)
+      set({ loading: false })
+      return { success: false, message: "Failed to fetch workspace users" }
+    }
+  },
+  //#endregion
+
+  //#region ----- SORT USERS BY ROLE -----
+
+  sortUsersByRole: () => {
+    const { users } = get()
+    const sortedUsers = [...users].sort((a, b) => {
+      // Define role priority (customize this order as needed)
+      const rolePriority = { admin: 1, teacher: 2, student: 3 }
+      return (
+        (rolePriority[a.role as keyof typeof rolePriority] || 4) -
+        (rolePriority[b.role as keyof typeof rolePriority] || 4)
+      )
+    })
+    set({ users: sortedUsers })
+  },
+
+  //#endregion
+
+  //#region ----- SET USER WORKSPACE -----
+
+  setUserWorkspace: (workspaceId: string) => {
+    const currentUser = get().user
+    if (currentUser) {
+      const updatedUser = { ...currentUser, workspaceId }
+      set({ user: updatedUser })
+      localStorage.setItem("workspaceId", workspaceId)
+    }
+  },
+
+  //#endregion
+}))
diff --git a/frontend/src/store/videoStore.ts b/frontend/src/store/videoStore.ts
new file mode 100644
index 0000000000..d737b0a94c
--- /dev/null
+++ b/frontend/src/store/videoStore.ts
@@ -0,0 +1,49 @@
+import { create } from "zustand"
+
+interface VideoStore {
+  markerTriggerCount: number
+  currentTime: number
+  incrementMarkerTrigger: () => void
+  setTimeCode: (time: number) => void
+
+  videoRef: HTMLVideoElement | null
+  setVideoRef: (ref: HTMLVideoElement) => void
+  isPlaying: boolean
+  togglePlay: () => void
+  stopVideo: () => void
+}
+
+export const useVideoStore = create<VideoStore>((set, get) => ({
+  markerTriggerCount: 0,
+  currentTime: 0,
+
+  incrementMarkerTrigger: () =>
+    set((state) => ({ markerTriggerCount: state.markerTriggerCount + 1 })),
+
+  setTimeCode: (time) => set(() => ({ currentTime: time })),
+
+  videoRef: null,
+  setVideoRef: (ref) => set({ videoRef: ref }),
+  isPlaying: false,
+
+  togglePlay: () => {
+    const video = get().videoRef
+    if (!video) return
+
+    if (video.paused) {
+      video.play()
+      set({ isPlaying: true })
+    } else {
+      video.pause()
+      set({ isPlaying: false })
+    }
+  },
+
+  stopVideo: () => {
+    const video = get().videoRef
+    if (!video) return
+
+    video.pause()
+    set({ isPlaying: false })
+  },
+}))
diff --git a/frontend/src/store/workspaceStore.ts b/frontend/src/store/workspaceStore.ts
new file mode 100644
index 0000000000..1d9a02ec9b
--- /dev/null
+++ b/frontend/src/store/workspaceStore.ts
@@ -0,0 +1,487 @@
+//#region ----- IMPORTS -----
+import { create } from "zustand"
+import { getToken } from "../utils/token"
+import { baseUrl } from "../config/api"
+//#endregion
+
+//#region ----- INTERFACES -----
+export interface WorkspaceType {
+  _id: string
+  name: string
+  createdBy: string
+  createdAt: string
+  teams: string[]
+  schemaVersion: string
+}
+
+interface WorkspaceStore {
+  workspaces: WorkspaceType[]
+  workspace: WorkspaceType | null
+  currentWorkspaceId: string | null
+  loading: boolean
+  error: string | null
+  message: string | null
+
+  fetchWorkspaces: () => Promise<void>
+  fetchUserWorkspaces: () => Promise<void>
+  fetchWorkspaceById: (workspaceId: string) => Promise<void>
+  setCurrentWorkspace: (workspaceId: string) => void
+  loadCurrentWorkspace: () => void
+  createWorkspace: (
+    workspaceName: string
+  ) => Promise<{ success: boolean; message?: string; workspaceId?: string }>
+  updateWorkspace: (workspaceId: string, updates: { newName?: string }) => Promise<void>
+  deleteWorkspace: (workspaceId: string) => Promise<void>
+  createInvitationLink: (workspaceId: string, teamId?: string, expiresAt?: Date, allowedRole?: string) => Promise<string | null>
+  validateInvitationToken: (token: string) => Promise<{ valid: boolean; allowedRole?: string }>
+  fetchInvitationHistory: (workspaceId: string) => Promise<any[]>
+  deleteInvitation: (invitationId: string) => Promise<boolean>
+  deactivateInvitation: (invitationId: string) => Promise<boolean>
+  clearWorkspaceData: () => void
+}
+
+//#endregion
+
+//#region ----- GET CURRENT WORKSPACE FROM LOCAL STORAGE -----
+const savedCurrentWorkspaceId = localStorage.getItem("currentWorkspaceId")
+//#endregion
+
+//#region ----- ZUSTAND WORKSPACE STORE -----
+export const useWorkspaceStore = create<WorkspaceStore>((set) => ({
+  workspaces: [],
+  workspace: null,
+  currentWorkspaceId: savedCurrentWorkspaceId,
+  loading: false,
+  error: null,
+  message: null,
+
+  //#region ----- FETCH WORKSPACES -----
+  fetchWorkspaces: async () => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspaces`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      const json = await response.json()
+      if (response.ok && json.success) {
+        set({
+          workspaces: json.response,
+          loading: false,
+          message: json.message || null,
+        })
+      } else {
+        throw new Error(json.message || "Failed to fetch workspaces")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+  //#endregion
+
+  //#region ----- FETCH USER WORKSPACES -----
+  fetchUserWorkspaces: async () => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/user/workspaces`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      const json = await response.json()
+      if (response.ok && json.success) {
+        set((state) => {
+          const newState = {
+            workspaces: json.response,
+            loading: false,
+            message: json.message || null,
+          }
+
+          // Auto-select first workspace if none is currently selected
+          if (state.currentWorkspaceId === null && json.response.length > 0) {
+            return { ...newState, currentWorkspaceId: json.response[0]._id }
+          }
+
+          return newState
+        })
+      } else {
+        throw new Error(json.message || "Failed to fetch user workspaces")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+  //#endregion
+
+  //#region ----- FETCH WORKSPACE BY ID -----
+  fetchWorkspaceById: async (workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}`, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+      })
+
+      const json = await response.json()
+      if (response.ok && json.success) {
+        set({
+          workspace: json.response,
+          loading: false,
+          message: json.message || null,
+        })
+      } else {
+        throw new Error(json.message || "Failed to fetch workspace")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+  //#endregion
+
+  //#region ----- CREATE WORKSPACE -----
+  createWorkspace: async (workspaceName: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const res = await fetch(`${baseUrl}/workspace`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+        body: JSON.stringify({ name: workspaceName }),
+      })
+
+      const json = await res.json()
+      if (res.ok && json.success) {
+        const createdWorkspace = json.response
+        set((state) => ({
+          workspaces: [...state.workspaces, createdWorkspace],
+          loading: false,
+          message: json.message || null,
+        }))
+        return {
+          success: true,
+          message: json.message || "Workspace created successfully",
+          workspaceId: createdWorkspace._id,
+        }
+      } else {
+        return {
+          success: false,
+          message: json.message || "Failed to create workspace",
+        }
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+      return {
+        success: false,
+        message: err instanceof Error ? err.message : "Failed to create workspace",
+      }
+    }
+  },
+  //#endregion
+
+  //#region ----- UPDATE WORKSPACE -----
+  updateWorkspace: async (workspaceId: string, updates: { newName?: string }) => {
+    set({ loading: true, error: null, message: null })
+
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: token,
+        },
+        body: JSON.stringify(updates),
+      })
+
+      if (!response.ok) throw new Error("Failed to update workspace")
+
+      const data = await response.json()
+
+      if (data.success && data.response) {
+        const updatedWorkspace = data.response
+
+        set((state) => ({
+          workspaces: state.workspaces.map((w) =>
+            w._id === workspaceId ? { ...w, ...updatedWorkspace } : w
+          ),
+          workspace:
+            state.workspace && state.workspace._id === workspaceId
+              ? { ...state.workspace, ...updatedWorkspace }
+              : state.workspace,
+          loading: false,
+          error: null,
+          message: data.message || "Workspace updated successfully",
+        }))
+      } else {
+        set({
+          loading: false,
+          error: data.message || "Update failed",
+          message: null,
+        })
+      }
+    } catch (err: unknown) {
+      set({
+        loading: false,
+        error: err instanceof Error ? err.message : "Unknown error",
+        message: null,
+      })
+    }
+  },
+  //#endregion
+
+  //#region ----- DELETE WORKSPACE -----
+  deleteWorkspace: async (workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}`, {
+        method: "DELETE",
+        headers: {
+          Authorization: token,
+        },
+      })
+
+      const data = await response.json()
+      if (response.ok && data.success) {
+        set((state) => ({
+          workspaces: state.workspaces.filter((w) => w._id !== workspaceId),
+          workspace: state.workspace?._id === workspaceId ? null : state.workspace,
+          loading: false,
+          message: data.message || null,
+        }))
+      } else {
+        throw new Error(data.message || "Failed to delete workspace")
+      }
+    } catch (err: unknown) {
+      set({ loading: false, error: err instanceof Error ? err.message : "Unknown error" })
+    }
+  },
+  //#endregion
+
+  //#region ----- SET CURRENT WORKSPACE -----
+  setCurrentWorkspace: (workspaceId: string) => {
+    localStorage.setItem("currentWorkspaceId", workspaceId)
+    set({ currentWorkspaceId: workspaceId })
+
+    // Also update the user store for backward compatibility
+    import("./userStore").then(({ useUserStore }) => {
+      useUserStore.getState().setUserWorkspace(workspaceId)
+    })
+  },
+  //#endregion
+
+  //#region ----- LOAD CURRENT WORKSPACE -----
+  loadCurrentWorkspace: () => {
+    const storedId = localStorage.getItem("currentWorkspaceId")
+    if (storedId) {
+      set({ currentWorkspaceId: storedId })
+    }
+  },
+  //#endregion
+
+  //#region ----- CREATE INVITATION LINK -----
+  createInvitationLink: async (workspaceId: string, teamId?: string, expiresAt?: Date, allowedRole?: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const url = teamId
+        ? `${baseUrl}/workspace/${workspaceId}/teams/${teamId}/invite`
+        : `${baseUrl}/workspace/${workspaceId}/invite`
+
+      const body: { expiresAt?: string; allowedRole?: string } = {}
+      if (expiresAt) {
+        body.expiresAt = expiresAt.toISOString()
+      }
+      if (allowedRole) {
+        body.allowedRole = allowedRole
+      }
+
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(body),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to create invitation link")
+      }
+
+      const data = await response.json()
+      set({
+        loading: false,
+        error: null,
+        message: `Invitation link created: ${data.signupLink}`,
+      })
+      return data.signupLink
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to create invitation link"
+      set({ error: errorMessage, loading: false, message: null })
+      return null
+    }
+  },
+
+  //#region ----- VALIDATE INVITATION TOKEN -----
+  validateInvitationToken: async (token: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const response = await fetch(`${baseUrl}/invitation/validate/${token}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      })
+
+      if (!response.ok) {
+        set({ loading: false, error: "Invalid invitation token", message: null })
+        return { valid: false }
+      }
+
+      const data = await response.json()
+      set({ loading: false, error: null, message: null })
+      return { valid: data.valid === true, allowedRole: data.allowedRole }
+    } catch (err: unknown) {
+      const errorMessage =
+        err instanceof Error ? err.message : "Failed to validate invitation token"
+      set({ error: errorMessage, loading: false, message: null })
+      return { valid: false }
+    }
+  },
+  //#endregion
+
+  //#region ----- FETCH INVITATION HISTORY -----
+  fetchInvitationHistory: async (workspaceId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/workspace/${workspaceId}/invitations`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to fetch invitation history")
+      }
+
+      const data = await response.json()
+      set({ loading: false, error: null, message: null })
+      return data.invitations || []
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch invitation history"
+      set({ error: errorMessage, loading: false, message: null })
+      return []
+    }
+  },
+  //#endregion
+
+  //#region ----- DELETE INVITATION -----
+  deleteInvitation: async (invitationId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/invitation/${invitationId}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to delete invitation")
+      }
+
+      set({ loading: false, error: null, message: "Invitation deleted successfully" })
+      return true
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to delete invitation"
+      set({ error: errorMessage, loading: false, message: null })
+      return false
+    }
+  },
+  //#endregion
+
+  //#region ----- DEACTIVATE INVITATION -----
+  deactivateInvitation: async (invitationId: string) => {
+    set({ loading: true, error: null, message: null })
+    try {
+      const token = getToken()
+      if (!token) throw new Error("Missing access token")
+
+      const response = await fetch(`${baseUrl}/invitation/${invitationId}/deactivate`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.message || "Failed to deactivate invitation")
+      }
+
+      set({ loading: false, error: null, message: "Invitation deactivated successfully" })
+      return true
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to deactivate invitation"
+      set({ error: errorMessage, loading: false, message: null })
+      return false
+    }
+  },
+  //#endregion
+
+  //#region ----- CLEAR WORKSPACE DATA -----
+  clearWorkspaceData: () => {
+    localStorage.removeItem("currentWorkspaceId")
+    set({
+      workspaces: [],
+      workspace: null,
+      currentWorkspaceId: null,
+      loading: false,
+      error: null,
+      message: null,
+    })
+  },
+  //#endregion
+}))
+//#endregion
diff --git a/frontend/src/themes/colorThemes.ts b/frontend/src/themes/colorThemes.ts
new file mode 100644
index 0000000000..b4825da575
--- /dev/null
+++ b/frontend/src/themes/colorThemes.ts
@@ -0,0 +1,83 @@
+import type { DefaultTheme } from "styled-components"
+import { spacing } from "./spacing"
+import { MediaQueries } from "./mediaQueries"
+
+export const lightTheme: DefaultTheme = {
+  name: "light",
+  colors: {
+    background: "#ffffff",
+    backgroundHover: "#f5f5f5",
+    backgroundActive: "#eaeaea",
+    offBackground: "#f5f5f5",
+    offBackgroundHover: "#eeeeee",
+    offBackgroundActive: "rgba(221, 221, 221, 1)",
+    lightGray: "#E8F0FE",
+    lightGrayHover: "#D1E7FD",
+    lightGrayActive: "#B8D9FB",
+    text: "#111111",
+    textHover: "rgb(31, 31, 31)",
+    textActive: "#333333",
+    textAlternative: "#656565",
+    textAlternativeHover: "#575757ff",
+    textAlternativeActive: "#525252ff",
+    primary: "rgba(22, 106, 240, 1)",
+    primaryHover: "rgba(20, 95, 216, 1)",
+    primaryActive: "rgba(18, 84, 190, 1)",
+    secondary: "rgba(19, 67, 139, 1)",
+    secondaryHover: "rgba(18, 54, 106, 1)",
+    secondaryActive: "rgba(14, 44, 87, 1)",
+    border: "#e0e0e0",
+    borderHover: "#cfcfcf",
+    borderActive: "#bfbfbf",
+    lightBlue: "#deeafb",
+    lightBlueHover: "#d7e7fdff",
+    lightBlueActive: "#bcd6f9ff",
+    specialblue: "rgb(167, 187, 209)",
+    boxShadow: "rgba(0, 0, 0, 0.14)",
+  },
+  filter: {
+    inverted: "invert(0) brightness(1)",
+  },
+  spacing,
+  media: MediaQueries,
+}
+
+export const darkTheme: DefaultTheme = {
+  name: "dark",
+  colors: {
+    background: "rgb(18, 20, 25)",
+    backgroundHover: "rgb(22, 27, 34)",
+    backgroundActive: "rgb(33, 38, 45)",
+    offBackground: "rgb(28, 34, 45)",
+    offBackgroundHover: "rgba(53, 53, 53, 1)",
+    offBackgroundActive: "rgb(120, 120, 120)",
+    lightGray: "#1A2332",
+    lightGrayHover: "#243042",
+    lightGrayActive: "#2E3D52",
+    text: "#ffffff",
+    textHover: "#e5e5e5",
+    textActive: "#cccccc",
+    textAlternative: "#a3a1a1ff",
+    textAlternativeHover: "#969595ff",
+    textAlternativeActive: "#807e7eff",
+    primary: "rgb(44, 84, 124)",
+    primaryHover: "rgb(38, 74, 110)",
+    primaryActive: "rgb(34, 67, 100)",
+    secondary: "rgb(28, 34, 45)",
+    secondaryHover: "#2a2a2a",
+    secondaryActive: "#3a3a3a",
+    border: "#333333",
+    borderHover: "#444444",
+    borderActive: "#555555",
+    lightBlue: "rgb(36, 54, 72)",
+    lightBlueHover: "rgb(40, 60, 80)",
+    lightBlueActive: "rgb(32, 48, 64)",
+    specialblue: "rgba(53, 65, 79, 1)",
+    boxShadow: "rgba(78, 78, 78, 0.51)",
+  },
+  filter: {
+    inverted: "invert(1) brightness(.6)",
+  },
+  spacing,
+  media: MediaQueries,
+}
diff --git a/frontend/src/themes/mediaQueries.ts b/frontend/src/themes/mediaQueries.ts
new file mode 100644
index 0000000000..5581814a3b
--- /dev/null
+++ b/frontend/src/themes/mediaQueries.ts
@@ -0,0 +1,9 @@
+export const MediaQueries = {
+  smallPhone: "(max-width: 350px)",
+  mobile: "(max-width: 500px)",
+  tablet: "(min-width: 601px) and (max-width: 900px)",
+  desktop: "(min-width: 769px) and (max-width: 1200px)",
+  smallerSizes: "(max-width: 900px)",
+  biggerSizes: "(min-width: 900px)",
+  widescreen: "(min-width: 1600px)",
+}
diff --git a/frontend/src/themes/spacing.ts b/frontend/src/themes/spacing.ts
new file mode 100644
index 0000000000..ca2b0f0439
--- /dev/null
+++ b/frontend/src/themes/spacing.ts
@@ -0,0 +1,8 @@
+export const spacing = {
+  xs: "4px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  xxl: "48px",
+}
diff --git a/frontend/src/themes/styled.d.ts b/frontend/src/themes/styled.d.ts
new file mode 100644
index 0000000000..ea2b0a98c5
--- /dev/null
+++ b/frontend/src/themes/styled.d.ts
@@ -0,0 +1,66 @@
+import "styled-components"
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    name: string
+    colors: {
+      background: string
+      backgroundHover: string
+      backgroundActive: string
+
+      offBackground: string
+      offBackgroundHover: string
+      offBackgroundActive: string
+
+      lightGray: string
+      lightGrayHover: string
+      lightGrayActive: string
+
+      text: string
+      textHover: string
+      textActive: string
+
+      textAlternative: string
+      textAlternativeHover: string
+      textAlternativeActive: string
+
+      primary: string
+      primaryHover: string
+      primaryActive: string
+
+      secondary: string
+      secondaryHover: string
+      secondaryActive: string
+
+      border: string
+      borderHover: string
+      borderActive: string
+
+      lightBlue: string
+      lightBlueHover: string
+      lightBlueActive: string
+
+      specialblue: string
+      boxShadow: string
+    }
+    filter: {
+      inverted: string
+    }
+    spacing: {
+      xs: string
+      sm: string
+      md: string
+      lg: string
+      xl: string
+      xxl: string
+    }
+    media: {
+      mobile: string
+      tablet: string
+      desktop: string
+      smallerSizes: string
+      biggerSizes: string
+      widescreen: string
+    }
+  }
+}
diff --git a/frontend/src/utils/RequireAuthentication.tsx b/frontend/src/utils/RequireAuthentication.tsx
new file mode 100644
index 0000000000..6edaa9d313
--- /dev/null
+++ b/frontend/src/utils/RequireAuthentication.tsx
@@ -0,0 +1,21 @@
+import { useUserStore } from "../store/userStore"
+import { Navigate } from "react-router-dom"
+
+export const RequireAuthentication = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn)
+
+  if (!isLoggedIn) {
+    return (
+      <Navigate
+        to="/login"
+        replace
+      />
+    )
+  }
+
+  return <>{children}</>
+}
diff --git a/frontend/src/utils/RequireRole.tsx b/frontend/src/utils/RequireRole.tsx
new file mode 100644
index 0000000000..1363c9a054
--- /dev/null
+++ b/frontend/src/utils/RequireRole.tsx
@@ -0,0 +1,33 @@
+import { useUserStore } from "../store/userStore"
+import { Navigate } from "react-router-dom"
+
+export const RequireRole = ({
+  children,
+  allowedRoles,
+}: {
+  children: React.ReactNode
+  allowedRoles: string[]
+}) => {
+  const user = useUserStore((state) => state.user)
+  const isLoggedIn = useUserStore((state) => state.isLoggedIn)
+
+  if (!isLoggedIn) {
+    return (
+      <Navigate
+        to="/login"
+        replace
+      />
+    )
+  }
+
+  if (!user || !allowedRoles.includes(user.role)) {
+    return (
+      <Navigate
+        to="/"
+        replace
+      />
+    )
+  }
+
+  return <>{children}</>
+}
diff --git a/frontend/src/utils/apiErrorHandler.ts b/frontend/src/utils/apiErrorHandler.ts
new file mode 100644
index 0000000000..fd99e2e448
--- /dev/null
+++ b/frontend/src/utils/apiErrorHandler.ts
@@ -0,0 +1,76 @@
+import { useBackendStatusStore } from '../store/backendStatusStore'
+
+/**
+ * Enhanced fetch wrapper that handles backend cold start scenarios
+ * Automatically triggers health check and updates backend status when needed
+ */
+export const fetchWithErrorHandling = async (
+  url: string,
+  options: RequestInit = {}
+): Promise<Response> => {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), 65000) // 65 second timeout
+
+  try {
+    const response = await fetch(url, {
+      ...options,
+      signal: controller.signal,
+    })
+
+    clearTimeout(timeoutId)
+    return response
+  } catch (error) {
+    clearTimeout(timeoutId)
+
+    // Check if this is a timeout or network error (likely cold start)
+    if (error instanceof Error) {
+      if (error.name === 'AbortError' || error.message.includes('fetch')) {
+        // Trigger backend status check
+        const { checkBackendHealth, status } = useBackendStatusStore.getState()
+        if (status === 'idle' || status === 'error') {
+          checkBackendHealth()
+        }
+      }
+    }
+
+    throw error
+  }
+}
+
+/**
+ * Determines if an error is likely due to backend cold start
+ */
+export const isColdStartError = (error: unknown): boolean => {
+  if (error instanceof Error) {
+    return (
+      error.name === 'AbortError' ||
+      error.message.includes('fetch') ||
+      error.message.includes('network') ||
+      error.message.includes('timeout') ||
+      error.message.includes('Failed to fetch')
+    )
+  }
+  return false
+}
+
+/**
+ * Gets a user-friendly error message for cold start scenarios
+ */
+export const getColdStartErrorMessage = (): string => {
+  return 'The backend is waking up. This may take up to 60 seconds on the free tier.'
+}
+
+/**
+ * Generic error message getter with cold start detection
+ */
+export const getErrorMessage = (error: unknown, defaultMessage: string = 'An error occurred'): string => {
+  if (isColdStartError(error)) {
+    return getColdStartErrorMessage()
+  }
+
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return defaultMessage
+}
diff --git a/frontend/src/utils/exportSrt.ts b/frontend/src/utils/exportSrt.ts
new file mode 100644
index 0000000000..b9daaea04e
--- /dev/null
+++ b/frontend/src/utils/exportSrt.ts
@@ -0,0 +1,72 @@
+import { baseUrl } from "../config/api";
+import { getToken } from "./token";
+
+/**
+ * Exports all comments for a project as an SRT subtitle file
+ * @param projectId - The ID of the project
+ * @param projectName - Optional project name for the filename
+ */
+export const exportCommentsToSrt = async (
+  projectId: string,
+  projectName?: string
+): Promise<void> => {
+  try {
+    const token = getToken();
+
+    const response = await fetch(`${baseUrl}/projects/${projectId}/export/srt`, {
+      method: "GET",
+      headers: {
+        ...(token ? { Authorization: token } : {}),
+      },
+    });
+
+    if (!response.ok) {
+      // Check if it's a JSON error response
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.includes("application/json")) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to export comments");
+      } else {
+        throw new Error(`Failed to export comments: ${response.statusText}`);
+      }
+    }
+
+    // Get the SRT content as text
+    const srtContent = await response.text();
+
+    // Create a blob from the content
+    const blob = new Blob([srtContent], { type: "text/plain;charset=utf-8" });
+
+    // Create download link
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+
+    // Set filename from header or use projectName or default
+    const contentDisposition = response.headers.get("content-disposition");
+    let filename = "comments.srt";
+
+    if (contentDisposition) {
+      const filenameMatch = contentDisposition.match(/filename="?(.+)"?/);
+      if (filenameMatch) {
+        filename = filenameMatch[1];
+      }
+    } else if (projectName) {
+      const safeName = projectName.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+      filename = `${safeName}_comments.srt`;
+    }
+
+    link.download = filename;
+
+    // Trigger download
+    document.body.appendChild(link);
+    link.click();
+
+    // Cleanup
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error("Error exporting SRT file:", error);
+    throw error;
+  }
+};
diff --git a/frontend/src/utils/moment-config.ts b/frontend/src/utils/moment-config.ts
new file mode 100644
index 0000000000..cea6213c03
--- /dev/null
+++ b/frontend/src/utils/moment-config.ts
@@ -0,0 +1,23 @@
+// moment-config.ts
+import moment from "moment"
+
+moment.updateLocale("en", {
+  relativeTime: {
+    future: "in %s",
+    past: (input: string) => {
+      return input === "a few seconds" ? "just now" : `${input} ago`
+    },
+    s: "a few seconds",
+    ss: "%d seconds",
+    m: "a min",
+    mm: "%d min",
+    h: "an hour",
+    hh: "%d hours",
+    d: "a day",
+    dd: "%d days",
+    M: "a month",
+    MM: "%d months",
+    y: "a year",
+    yy: "%d years",
+  },
+})
diff --git a/frontend/src/utils/token.ts b/frontend/src/utils/token.ts
new file mode 100644
index 0000000000..f223fa5055
--- /dev/null
+++ b/frontend/src/utils/token.ts
@@ -0,0 +1,9 @@
+// utils/token.ts
+import { useUserStore } from "../store/userStore"
+
+export const getToken = (): string | null => {
+  return (
+    useUserStore.getState().user?.accessToken ||
+    localStorage.getItem("accessToken")
+  )
+}
diff --git a/frontend/src/vite-env.d.ts b/frontend/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/frontend/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000000..b0b84bfe96
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitAny": false,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000000..c38152f3c3
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": [
+      "ES2023"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.ts
similarity index 81%
rename from frontend/vite.config.js
rename to frontend/vite.config.ts
index 5a33944a9b..8b0f57b91a 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
-// https://vitejs.dev/config/
+// https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
 })
diff --git a/gpg_test.md b/gpg_test.md
new file mode 100644
index 0000000000..8240800469
--- /dev/null
+++ b/gpg_test.md
@@ -0,0 +1,4 @@
+# GPG Signature Test
+This is another test for GPG signing
+Testing GPG signature functionality
+Testing GPG signature with commit
diff --git a/package.json b/package.json
index 680d190772..e1539e7c09 100644
--- a/package.json
+++ b/package.json
@@ -3,5 +3,16 @@
   "version": "1.0.0",
   "scripts": {
     "postinstall": "npm install --prefix backend"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.27.1",
+    "@types/express": "^5.0.3",
+    "@types/mongoose": "^5.11.96",
+    "@types/node": "^24.0.4",
+    "prettier": "3.6.2",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "react-responsive-carousel": "^3.2.23"
   }
-}
\ No newline at end of file
+}