diff --git a/backend/controllers/courseController.ts b/backend/controllers/courseController.ts
index 0bbdca4..facb19f 100644
--- a/backend/controllers/courseController.ts
+++ b/backend/controllers/courseController.ts
@@ -52,7 +52,9 @@ export const getCourseById = async (
 
 		if (id) {
 			// Find course by ID and populate related fields
-			const course = await Course.findById(id).populate(["speakers"]).exec();
+			const course = await Course.findById(id)
+				.populate(["speakers", "handouts"])
+				.exec();
 
 			if (!course) {
 				res.status(404).json({
@@ -118,6 +120,7 @@ export const createCourse = async (
 			productInfo,
 			shortUrl,
 			draft,
+			registrationLimit,
 		} = req.body;
 
 		// Validate required fields
@@ -175,6 +178,7 @@ export const createCourse = async (
 			productInfo,
 			shortUrl,
 			draft,
+			registrationLimit,
 		});
 
 		const savedCourseResponse = await newCourseResponse.save();
@@ -402,9 +406,15 @@ export const getCourseUsers = async (
 			return;
 		}
 
-		// Check if the course exists and populate the students field
+		// Check if the course exists and populate the students field with their roles
 		console.log("Looking up course in database...");
-		const course = await Course.findById(courseId).populate("students");
+		const course = await Course.findById(courseId).populate({
+			path: "students",
+			populate: {
+				path: "role",
+				model: "UserType",
+			},
+		});
 		console.log("Found course:", course ? "Yes" : "No");
 		if (!course) {
 			console.log("Course not found in database");
diff --git a/backend/controllers/handoutController.ts b/backend/controllers/handoutController.ts
index ad309fb..8d53898 100644
--- a/backend/controllers/handoutController.ts
+++ b/backend/controllers/handoutController.ts
@@ -1,10 +1,14 @@
 import { Request, Response } from "express";
 import Handout from "../models/handoutModel";
+import Course from "../models/courseModel";
 
 // @desc    Get all handouts or filter handouts by courseId
 // @route   GET /api/handouts
 // @access  Public
-export const getHandouts = async (req: Request, res: Response): Promise<void> => {
+export const getHandouts = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
 	try {
 		const { courseId } = req.query;
 
@@ -39,7 +43,10 @@ export const getHandouts = async (req: Request, res: Response): Promise<void> =>
 // @desc    Create a new handout
 // @route   POST /api/handouts
 // @access  Public
-export const createHandout = async (req: Request, res: Response): Promise<void> => {
+export const createHandout = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
 	try {
 		const { courseId, fileUrl, fileType } = req.body;
 
@@ -82,7 +89,10 @@ export const createHandout = async (req: Request, res: Response): Promise<void>
 // @desc    Update a handout
 // @route   PUT /api/handouts/:id
 // @access  Public
-export const updateHandout = async (req: Request, res: Response): Promise<void> => {
+export const updateHandout = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
 	try {
 		const { id } = req.params;
 		const { fileUrl, fileType } = req.body;
@@ -124,9 +134,13 @@ export const updateHandout = async (req: Request, res: Response): Promise<void>
 // @desc    Delete a handout
 // @route   DELETE /api/handouts/:id
 // @access  Public
-export const deleteHandout = async (req: Request, res: Response): Promise<void> => {
+export const deleteHandout = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
 	try {
 		const { id } = req.params;
+		const { courseId } = req.body;
 
 		const deletedHandout = await Handout.findByIdAndDelete(id);
 		if (!deletedHandout) {
@@ -137,6 +151,13 @@ export const deleteHandout = async (req: Request, res: Response): Promise<void>
 			return;
 		}
 
+		// Remove reference from Course.handouts
+		if (courseId) {
+			await Course.findByIdAndUpdate(courseId, {
+				$pull: { handouts: id },
+			});
+		}
+
 		res.status(200).json({
 			success: true,
 			data: deletedHandout,
@@ -155,4 +176,4 @@ export const deleteHandout = async (req: Request, res: Response): Promise<void>
 			});
 		}
 	}
-};
\ No newline at end of file
+};
diff --git a/backend/controllers/surveyController.ts b/backend/controllers/surveyController.ts
index e9b4bc5..6a0d535 100644
--- a/backend/controllers/surveyController.ts
+++ b/backend/controllers/surveyController.ts
@@ -5,126 +5,139 @@ import Survey, { ISurvey } from "../models/surveyModel";
 // @route   GET /api/surveys
 // @access  Public
 export const getSurvey = async (req: Request, res: Response): Promise<void> => {
-  try {
-    // Use `findOneAndUpdate` to find the survey and create one if it doesn't exist
-    const survey = await Survey.findOneAndUpdate(
-      {},  // Find the first document (survey)
-      { $setOnInsert: { questions: [] } },  // If no document is found, insert a new one with empty questions
-      { new: true, upsert: true }  // Return the updated/new document, and if not found, create it
-    ).populate({
-      path: "questions",
-      model: "Question",
-    });
-
-    res.status(200).json(survey);
-  } catch (error) {
-    if (error instanceof Error) {
-      res.status(500).json({ message: error.message });
-    } else {
-      res.status(500).json({ message: "An unknown error occurred" });
-    }
-  }
+	try {
+		// Use `findOneAndUpdate` to find the survey and create one if it doesn't exist
+		const survey = await Survey.findOneAndUpdate(
+			{}, // Find the first document (survey)
+			{ $setOnInsert: { questions: [] } }, // If no document is found, insert a new one with empty questions
+			{ new: true, upsert: true } // Return the updated/new document, and if not found, create it
+		).populate({
+			path: "questions",
+			model: "Question",
+		});
+
+		res.status(200).json(survey);
+	} catch (error) {
+		if (error instanceof Error) {
+			res.status(500).json({ message: error.message });
+		} else {
+			res.status(500).json({ message: "An unknown error occurred" });
+		}
+	}
 };
 
 // @desc    Create a new survey (only if it doesn't already exist)
 // @route   POST /api/surveys
 // @access  Public
-// export const createSurvey = async (req: Request, res: Response): Promise<void> => {
-//   try {
-//     // Check if a survey already exists
-//     const existingSurvey = await Survey.findOne();
-
-//     if (existingSurvey) {
-//       res.status(200).json({
-//         survey: existingSurvey,
-//         message: "Survey already exists. You can update it instead.",
-//       });
-//       return;
-//     }
-
-//     const { questions } = req.body;
-
-//     if (!questions) {
-//       res.status(400).json({ message: "Questions are required" });
-//       return;
-//     }
-
-//     // Create a new survey
-//     const survey = new Survey({
-//       questions,
-//     });
-//     await survey.save();
-
-//     res.status(201).json({
-//       survey,
-//       message: "Survey created successfully",
-//     });
-//   } catch (error) {
-//     if (error instanceof Error) {
-//       res.status(500).json({ message: error.message });
-//     } else {
-//       res.status(500).json({ message: "An unknown error occurred" });
-//     }
-//   }
-// };
+export const createSurvey = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
+	try {
+		// Check if a survey already exists
+		const existingSurvey = await Survey.findOne();
+
+		if (existingSurvey) {
+			res.status(200).json({
+				survey: existingSurvey,
+				message: "Survey already exists. You can update it instead.",
+			});
+			return;
+		}
+
+		const { questions } = req.body;
+
+		if (!questions) {
+			res.status(400).json({ message: "Questions are required" });
+			return;
+		}
+
+		// Create a new survey
+		const survey = new Survey({
+			questions,
+		});
+		await survey.save();
+
+		res.status(201).json({
+			survey,
+			message: "Survey created successfully",
+		});
+	} catch (error) {
+		if (error instanceof Error) {
+			res.status(500).json({ message: error.message });
+		} else {
+			res.status(500).json({ message: "An unknown error occurred" });
+		}
+	}
+};
 
 // @desc    Update the existing survey
 // @route   PUT /api/surveys
 // @access  Public
-export const updateSurvey = async (req: Request, res: Response): Promise<void> => {
-  try {
-    const { questions } = req.body;
-
-    // Find the single existing survey (since there is only one survey)
-    const survey = await Survey.findOne();
-
-    if (!survey) {
-      res.status(404).json({ message: "Survey not found" });
-      return;
-    }
-
-    // Update the survey with new questions
-    survey.question = questions;
-    await survey.save();
-
-    res.status(200).json(survey);
-  } catch (error) {
-    if (error instanceof Error) {
-      res.status(500).json({ message: error.message });
-    } else {
-      res.status(500).json({ message: "An unknown error occurred" });
-    }
-  }
+export const updateSurvey = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
+	try {
+		const { questions } = req.body;
+
+		console.log(questions);
+
+		// Find the single existing survey (since there is only one survey)
+		const survey = await Survey.findOne();
+
+		if (!survey) {
+			res.status(404).json({ message: "Survey not found" });
+			return;
+		}
+
+		// Update the survey with new questions
+		survey.questions = questions;
+		await survey.save();
+		console.log("survey", survey);
+
+		res.status(200).json(survey);
+	} catch (error) {
+		if (error instanceof Error) {
+			console.error(error);
+			res.status(500).json({ message: error.message });
+		} else {
+			res.status(500).json({ message: "An unknown error occurred" });
+		}
+	}
 };
 
 // @desc    Delete the survey
 // @route   DELETE /api/surveys
 // @access  Public
-export const deleteSurvey = async (req: Request, res: Response): Promise<void> => {
-  try {
-    // Since there is only one survey, no need to look for it by ID
-    const survey = await Survey.findOne();
-
-    if (!survey) {
-      res.status(404).json({
-        success: false,
-        message: "Survey not found",
-      });
-      return;
-    }
-
-    // Delete the survey
-    await Survey.deleteOne({ _id: survey._id });
-
-    res.status(200).json({
-      success: true,
-      message: "Survey deleted successfully",
-    });
-  } catch (error) {
-    if (error instanceof Error) {
-      res.status(500).json({ message: error.message });
-    } else {
-      res.status(500).json({ message: "An unknown error occurred" });
-    }
-  }
+export const deleteSurvey = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
+	try {
+		// Since there is only one survey, no need to look for it by ID
+		const survey = await Survey.findOne();
+
+		if (!survey) {
+			res.status(404).json({
+				success: false,
+				message: "Survey not found",
+			});
+			return;
+		}
+
+		// Delete the survey
+		await Survey.deleteOne({ _id: survey._id });
+
+		res.status(200).json({
+			success: true,
+			message: "Survey deleted successfully",
+		});
+	} catch (error) {
+		if (error instanceof Error) {
+			res.status(500).json({ message: error.message });
+		} else {
+			res.status(500).json({ message: "An unknown error occurred" });
+		}
+	}
 };
diff --git a/backend/controllers/userController.ts b/backend/controllers/userController.ts
index 16fdeee..09663c9 100644
--- a/backend/controllers/userController.ts
+++ b/backend/controllers/userController.ts
@@ -16,6 +16,9 @@ export const getUsers = async (req: Request, res: Response): Promise<void> => {
 			pagination = "true",
 		} = req.query;
 
+		// Extract _id parameter with proper typing
+		const _id = req.query._id as string | string[] | undefined;
+
 		let query: any = {};
 
 		if (search) {
@@ -29,6 +32,26 @@ export const getUsers = async (req: Request, res: Response): Promise<void> => {
 			query.userType = userType;
 		}
 
+		// Handle _id filtering - support both single ID and array of IDs
+		if (_id) {
+			if (Array.isArray(_id)) {
+				// Multiple IDs: _id[]
+				const objectIds = _id.map((id) => new mongoose.Types.ObjectId(id));
+				query._id = { $in: objectIds };
+			} else {
+				// Single ID or comma-separated string
+				const ids = _id.split(",");
+				if (ids.length > 1) {
+					const objectIds = ids.map(
+						(id) => new mongoose.Types.ObjectId(id.trim())
+					);
+					query._id = { $in: objectIds };
+				} else {
+					query._id = new mongoose.Types.ObjectId(ids[0].trim());
+				}
+			}
+		}
+
 		// If pagination=false, return all matching users
 		if (pagination === "false") {
 			const users = await User.find(query)
@@ -36,6 +59,7 @@ export const getUsers = async (req: Request, res: Response): Promise<void> => {
 					"name email role company certification address1 city state zip phone language certification"
 				)
 				.populate("role");
+
 			res.json({ users, total: users.length, pages: 1 });
 			return;
 		}
@@ -273,11 +297,15 @@ export const checkAdmin = async (req: AuthenticatedRequest, res: Response) => {
 	}
 };
 
-export const getUserById = async (req: Request, res: Response) => {
+export const getUserById = async (
+	req: Request,
+	res: Response
+): Promise<void> => {
 	try {
 		const user = await User.findById(req.params.id);
 		if (!user) {
-			return res.status(404).json({ message: "User not found" });
+			res.status(404).json({ message: "User not found" });
+			return;
 		}
 		res.json(user);
 	} catch (error) {
diff --git a/backend/models/courseModel.ts b/backend/models/courseModel.ts
index bcfdb1a..e5f032b 100644
--- a/backend/models/courseModel.ts
+++ b/backend/models/courseModel.ts
@@ -33,6 +33,7 @@ export interface ICourse extends Document {
 	productInfo: string;
 	shortUrl: string;
 	draft: boolean;
+	registrationLimit: number;
 }
 
 const CourseSchema: Schema = new Schema(
@@ -49,7 +50,7 @@ const CourseSchema: Schema = new Schema(
 				ref: "Rating",
 			},
 		],
-		className: { type: String, required: true },
+		className: { type: String, required: false },
 		discussion: { type: String, required: false },
 		categories: [{ type: String, required: false }],
 		creditNumber: { type: Number, required: false },
@@ -96,6 +97,7 @@ const CourseSchema: Schema = new Schema(
 		productInfo: { type: String, required: false },
 		shortUrl: { type: String, required: false },
 		draft: { type: Boolean, required: true, default: true },
+		registrationLimit: { type: Number, required: false, default: 0 },
 	},
 	{
 		timestamps: true,
diff --git a/backend/models/surveyModel.ts b/backend/models/surveyModel.ts
index f30d6f1..626a623 100644
--- a/backend/models/surveyModel.ts
+++ b/backend/models/surveyModel.ts
@@ -5,7 +5,7 @@ import { IQuestion } from "./questionModel";
 export interface ISurvey extends Document {
 	// Define fields here:
 	id: string;
-	question: mongoose.Types.ObjectId[];
+	questions: mongoose.Types.ObjectId[];
 	courseId: mongoose.Types.ObjectId;
 }
 
diff --git a/backend/routes/surveyRoutes.ts b/backend/routes/surveyRoutes.ts
index e665d07..d4bb3ab 100644
--- a/backend/routes/surveyRoutes.ts
+++ b/backend/routes/surveyRoutes.ts
@@ -15,7 +15,7 @@ router.get("/", getSurvey);
 // router.post("/", createSurvey);
 
 // PUT update survey by ID
-router.put("/:id", updateSurvey);
+router.put("/", updateSurvey);
 
 // DELETE survey by ID
 router.delete("/:id", deleteSurvey);
diff --git a/backend/routes/userRoutes.ts b/backend/routes/userRoutes.ts
index 11329f5..daafb54 100644
--- a/backend/routes/userRoutes.ts
+++ b/backend/routes/userRoutes.ts
@@ -1,6 +1,7 @@
 import express from "express";
 import {
 	getUsers,
+	getUserById,
 	getOrCreateUser,
 	updateUser,
 	deleteUser,
@@ -14,6 +15,9 @@ const router = express.Router();
 // GET all users or by filter
 router.get("/", getUsers);
 
+// GET user by ID
+router.get("/:id", getUserById);
+
 // POST new user if does not exist, otherwise return existing user for login
 router.post("/", getOrCreateUser);
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index db1519d..8b2dcb7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -26,6 +26,7 @@
 				"quill": "^2.0.3",
 				"react": "^18.3.1",
 				"react-country-state-city": "^1.1.12",
+				"react-datepicker": "^8.4.0",
 				"react-dom": "^18.3.1",
 				"react-icons": "^5.4.0",
 				"react-quill": "^2.0.0",
@@ -3039,28 +3040,56 @@
 			"integrity": "sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ=="
 		},
 		"node_modules/@floating-ui/core": {
-			"version": "1.6.9",
-			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
-			"integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz",
+			"integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==",
 			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/utils": "^0.2.9"
+				"@floating-ui/utils": "^0.2.10"
 			}
 		},
 		"node_modules/@floating-ui/dom": {
-			"version": "1.6.13",
-			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
-			"integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz",
+			"integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==",
 			"license": "MIT",
 			"dependencies": {
-				"@floating-ui/core": "^1.6.0",
-				"@floating-ui/utils": "^0.2.9"
+				"@floating-ui/core": "^1.7.2",
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/react": {
+			"version": "0.27.13",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.13.tgz",
+			"integrity": "sha512-Qmj6t9TjgWAvbygNEu1hj4dbHI9CY0ziCMIJrmYoDIn9TUAH5lRmiIeZmRd4c6QEZkzdoH7jNnoNyoY1AIESiA==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/react-dom": "^2.1.4",
+				"@floating-ui/utils": "^0.2.10",
+				"tabbable": "^6.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=17.0.0",
+				"react-dom": ">=17.0.0"
+			}
+		},
+		"node_modules/@floating-ui/react-dom": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.4.tgz",
+			"integrity": "sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.7.2"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
 			}
 		},
 		"node_modules/@floating-ui/utils": {
-			"version": "0.2.9",
-			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
-			"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
 			"license": "MIT"
 		},
 		"node_modules/@googlemaps/js-api-loader": {
@@ -6241,6 +6270,15 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/co": {
 			"version": "4.6.0",
 			"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -14194,6 +14232,21 @@
 				"react": ">=16"
 			}
 		},
+		"node_modules/react-datepicker": {
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-8.4.0.tgz",
+			"integrity": "sha512-6nPDnj8vektWCIOy9ArS3avus9Ndsyz5XgFCJ7nBxXASSpBdSL6lG9jzNNmViPOAOPh6T5oJyGaXuMirBLECag==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/react": "^0.27.3",
+				"clsx": "^2.1.1",
+				"date-fns": "^4.1.0"
+			},
+			"peerDependencies": {
+				"react": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+				"react-dom": "^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+			}
+		},
 		"node_modules/react-dev-utils": {
 			"version": "12.0.1",
 			"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -16328,6 +16381,12 @@
 			"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
 			"integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
 		},
+		"node_modules/tabbable": {
+			"version": "6.2.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+			"integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+			"license": "MIT"
+		},
 		"node_modules/tailwindcss": {
 			"version": "3.4.17",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7d80b36..3687688 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
 		"quill": "^2.0.3",
 		"react": "^18.3.1",
 		"react-country-state-city": "^1.1.12",
+		"react-datepicker": "^8.4.0",
 		"react-dom": "^18.3.1",
 		"react-icons": "^5.4.0",
 		"react-quill": "^2.0.0",
diff --git a/frontend/public/images/pfp.jpg b/frontend/public/images/pfp.jpg
new file mode 100644
index 0000000..82d4b6d
Binary files /dev/null and b/frontend/public/images/pfp.jpg differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4c06dff..5a0877b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import AppRoutes from "./routes/appRoutes";
+import "react-datepicker/dist/react-datepicker.css";
 
 const App: React.FC = () => {
 	return (
diff --git a/frontend/src/components/AdminCoursePreview/AdminCoursePreview.tsx b/frontend/src/components/AdminCoursePreview/AdminCoursePreview.tsx
index a93340c..89d897c 100644
--- a/frontend/src/components/AdminCoursePreview/AdminCoursePreview.tsx
+++ b/frontend/src/components/AdminCoursePreview/AdminCoursePreview.tsx
@@ -35,7 +35,7 @@ interface AdminCoursePreviewProps {
 }
 
 const elemColors: Record<string, string> = {
-	Ongoing: "#30CD5A",
+	Ongoing: "#444444",
 	"Open Registration": "#F79518",
 	"Closed Registration": "#BE0000",
 	Storage: "#444444",
@@ -103,7 +103,14 @@ function AdminCoursePreview({
 					style={{ accentColor: "#8757a3" }}
 				/>
 				<div className="flex items-center gap-2">
-					<span className="font-medium">{product.course.className}</span>
+					<span className="font-medium flex gap-1">
+						{product.course.className}{" "}
+						{product.course.draft ? (
+							<p className="text-red-600 italic">[Draft]</p>
+						) : (
+							""
+						)}
+					</span>
 				</div>
 			</div>
 
@@ -133,15 +140,15 @@ function AdminCoursePreview({
 					</span>
 				)}
 
-				<Calendar className="w-12" />
+				{/* <Calendar className="w-12" />
 				<span className="text-gray-500 w-24">
 					{product.startTime.getMonth() + 1}/{product.startTime.getDate()}/
 					{product.startTime.getFullYear()} at {product.startTime.getHours()}:
 					{product.startTime.getMinutes().toString().padStart(2, "0")}{" "}
 					{product.timeZone}
-				</span>
+				</span> */}
 
-				<div className="flex flex-col space-y-2 w-36">
+				{/* <div className="flex flex-col space-y-2 w-36">
 					<div className="flex flex-row justify-between">
 						<div
 							className="flex rounded-lg border text-white px-1 group relative"
@@ -168,13 +175,16 @@ function AdminCoursePreview({
 						>
 							Live
 						</div>
-						<div
-							className="text-white rounded-lg px-1"
-							style={{ backgroundColor: "#9C75B4" }}
-						>
-							{product.course.students.length} registered
-						</div>
+						
 					</div>
+				</div> */}
+
+				<div className="rounded-lg text-gray-500 px-1">
+					{product.course.students.length}
+					{product.course.registrationLimit > 0
+						? `/${product.course.registrationLimit}`
+						: ""}{" "}
+					registered
 				</div>
 
 				<div className="flex gap-4">
diff --git a/frontend/src/components/EditCourseSidebar/editCoursePageSideBar.tsx b/frontend/src/components/EditCourseSidebar/editCoursePageSideBar.tsx
index cb267a6..33c97bc 100644
--- a/frontend/src/components/EditCourseSidebar/editCoursePageSideBar.tsx
+++ b/frontend/src/components/EditCourseSidebar/editCoursePageSideBar.tsx
@@ -39,7 +39,21 @@ const EditSideBar: React.FC<SideBarProps> = ({ children }) => {
 		const loadCourse = async () => {
 			try {
 				const res = await apiClient.get(`/courses/${courseId}`);
-				setAllFields({ ...res.data.data, _id: courseId });
+				const course = res.data.data;
+
+				const cleanedCourse = {
+					...course,
+					speakers: Array.isArray(course.speakers)
+						? course.speakers.map((s: any) => s._id.toString())
+						: [],
+					_id: courseId,
+					// Convert date strings to Date objects
+					time: course.time ? new Date(course.time) : new Date(),
+					regStart: course.regStart ? new Date(course.regStart) : new Date(),
+					regEnd: course.regEnd ? new Date(course.regEnd) : undefined,
+				};
+
+				setAllFields(cleanedCourse);
 				setFetchedFromBackend();
 			} catch (err) {
 				console.error("Failed to fetch course", err);
@@ -65,7 +79,7 @@ const EditSideBar: React.FC<SideBarProps> = ({ children }) => {
 			highlightLeftOffset: "51.4px",
 		},
 		{
-			name: "Pricing",
+			name: "Settings",
 			path: `${basePath}/pricing`,
 			highlightLeftOffset: "51.4px",
 		},
@@ -90,7 +104,7 @@ const EditSideBar: React.FC<SideBarProps> = ({ children }) => {
 			highlightLeftOffset: "24.5px",
 		},
 		{
-			name: "Participation",
+			name: "Progress",
 			path: `${basePath}/participation`,
 			highlightLeftOffset: "16px",
 		},
@@ -103,11 +117,11 @@ const EditSideBar: React.FC<SideBarProps> = ({ children }) => {
 
 	const filteredSidebarItems = sidebarItems.filter((item) => {
 		if (isManagePage) {
-			return ["Speakers", "Registrants", "Participation", "Email"].includes(
+			return ["Speakers", "Registrants", "Progress", "Email"].includes(
 				item.name
 			);
 		} else {
-			return !["Registrants", "Participation", "Email"].includes(item.name);
+			return !["Registrants", "Progress", "Email"].includes(item.name);
 		}
 	});
 
diff --git a/frontend/src/components/GlobalBlackBar/globalBlackBar.tsx b/frontend/src/components/GlobalBlackBar/globalBlackBar.tsx
index 5b46be3..f8a911c 100644
--- a/frontend/src/components/GlobalBlackBar/globalBlackBar.tsx
+++ b/frontend/src/components/GlobalBlackBar/globalBlackBar.tsx
@@ -9,25 +9,27 @@ const GlobalBlackBar = () => {
 
 	useEffect(() => {
 		const checkTranslateElement = () => {
-			const translateElement = document.getElementById("google_translate_element");
+			const translateElement = document.getElementById(
+				"google_translate_element"
+			);
 			if (translateElement && !translateElement.hasChildNodes()) {
 				if (window.googleTranslateElementInit) {
 					window.googleTranslateElementInit();
 				}
 			}
 		};
-		
+
 		setTimeout(checkTranslateElement, 1000);
 		const handleTranslateClick = () => {
-			const googleElement = document.querySelector('.goog-te-gadget-simple');
+			const googleElement = document.querySelector(".goog-te-gadget-simple");
 			if (googleElement) {
 				(googleElement as HTMLElement).click();
 			} else {
-				console.log('bruh');
+				console.log("bruh");
 				if (window.googleTranslateElementInit) {
 					window.googleTranslateElementInit();
 					setTimeout(() => {
-						const newElement = document.querySelector('.goog-te-gadget-simple');
+						const newElement = document.querySelector(".goog-te-gadget-simple");
 						if (newElement) {
 							(newElement as HTMLElement).click();
 						}
@@ -38,12 +40,12 @@ const GlobalBlackBar = () => {
 
 		const translateLabel = translateLabelRef.current;
 		if (translateLabel) {
-			translateLabel.addEventListener('click', handleTranslateClick);
+			translateLabel.addEventListener("click", handleTranslateClick);
 		}
 
 		return () => {
 			if (translateLabel) {
-				translateLabel.removeEventListener('click', handleTranslateClick);
+				translateLabel.removeEventListener("click", handleTranslateClick);
 			}
 		};
 	}, []);
@@ -54,74 +56,58 @@ const GlobalBlackBar = () => {
 				<div className="contact-info">
 					<div className="contact-item">
 						<Phone className="contact-icon" />
-						<a href="tel:+13036184331">
-							(303) 618-4331
-						</a>
+						<a href="tel:+13036184331">(303) 618-4331</a>
 					</div>
 					<div className="contact-item">
 						<Mail className="contact-icon" />
-						<a href="mailto:info@fostersource.org">
-							info@fostersource.org
-						</a>
+						<a href="mailto:info@bethesource.org">info@bethesource.org</a>
 					</div>
 				</div>
 
 				<div className="social-links">
 					<a
-						href="https://www.facebook.com/FosterSource/"
+						href="https://www.facebook.com/BetheSourceCO/"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<img
-							src="/assets/icons/facebook.png"
-							alt="Facebook"
-						/>
+						<img src="/assets/icons/facebook.png" alt="Facebook" />
 					</a>
 					<a
-						href="https://twitter.com/FosterSource"
+						href="https://x.com/bethesourceco"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<img
-							src="/assets/icons/twitter.png"
-							alt="Twitter"
-						/>
+						<img src="/assets/icons/twitter.png" alt="Twitter" />
 					</a>
 					<a
-						href="https://instagram.com/fostersource"
+						href="https://www.instagram.com/bethesourceco"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<img
-							src="/assets/icons/instagram.png"
-							alt="Instagram"
-						/>
+						<img src="/assets/icons/instagram.png" alt="Instagram" />
 					</a>
 					<a
-						href="https://www.youtube.com/channel/UCh_IJt7uDOjTLlGR14dtCFg"
+						href="https://www.youtube.com/channel/UCYHuLduw7O4XA3iVy7LIy5w"
 						target="_blank"
 						rel="noopener noreferrer"
 					>
-						<img
-							src="/assets/icons/youtube.png"
-							alt="YouTube"
-						/>
+						<img src="/assets/icons/youtube.png" alt="YouTube" />
 					</a>
 				</div>
 			</div>
 
 			<div className="right-side">
 				<div className="translate-wrapper">
-					<span 
-						ref={translateLabelRef} 
+					<span
+						ref={translateLabelRef}
 						className="translate-label"
-						style={{ cursor: 'pointer', color: 'white' }}
+						style={{ cursor: "pointer", color: "white" }}
 					>
 						Traducir
 					</span>
 					<GoogleTranslate />
 				</div>
-				
+
 				<a
 					href="https://fostersource.org/donate/"
 					target="_blank"
diff --git a/frontend/src/components/SaveCourseButtons.tsx b/frontend/src/components/SaveCourseButtons.tsx
index 24b85e3..39c1c15 100644
--- a/frontend/src/components/SaveCourseButtons.tsx
+++ b/frontend/src/components/SaveCourseButtons.tsx
@@ -23,9 +23,11 @@ const SaveCourseButton = ({ prevLink, nextLink }: SaveCourseButtonProps) => {
 			if (course._id) {
 				console.log("course:", course);
 				await apiClient.put(`/courses/${course._id}`, course);
+				navigate("/admin/products");
 				alert("Course updated!");
 			} else {
 				const res = await apiClient.post("/courses", course);
+				navigate("/admin/products");
 				alert("Course created!");
 				// Optionally redirect to edit mode after creating:
 				// navigate(`/admin/product/edit/${res.data.data._id}/details`);
@@ -36,19 +38,32 @@ const SaveCourseButton = ({ prevLink, nextLink }: SaveCourseButtonProps) => {
 		}
 	};
 
+	const handlePublish = async () => {
+		await apiClient.put(`/courses/${course._id}`, { draft: !course.draft });
+		navigate("/admin/products");
+	};
+
 	const navigate = useNavigate();
 
 	return (
 		<div className="w-full flex justify-end gap-4 mt-2 z-50">
+			<button
+				className="text-purple2 cursor-pointer mr-4"
+				onClick={() => {
+					handlePublish();
+				}}
+			>
+				{course.draft ? "Publish" : "Unpublish"}
+			</button>
 			<button
 				onClick={() => {
 					handleSave();
-					navigate("/admin/products");
 				}}
-				className="text-purple2 cursor-pointer"
+				className={`text-purple2 cursor-pointer ${prevLink === "" && nextLink === "" ? "text-white bg-purple2 py-3 px-6 rounded-md" : ""}`}
 			>
 				Exit and Save
 			</button>
+
 			{prevLink === "" ? (
 				<></>
 			) : (
@@ -62,14 +77,18 @@ const SaveCourseButton = ({ prevLink, nextLink }: SaveCourseButtonProps) => {
 				</button>
 			)}
 
-			<button
-				className="px-14 py-2 bg-purple2 text-white rounded-md cursor-pointer"
-				onClick={() => {
-					navigate(`${basePath}/${nextLink}`);
-				}}
-			>
-				Next
-			</button>
+			{nextLink === "" ? (
+				<></>
+			) : (
+				<button
+					className="px-14 py-2 bg-purple2 text-white rounded-md cursor-pointer"
+					onClick={() => {
+						navigate(`${basePath}/${nextLink}`);
+					}}
+				>
+					Next
+				</button>
+			)}
 		</div>
 	);
 };
diff --git a/frontend/src/components/Sidebar/sidebar.tsx b/frontend/src/components/Sidebar/sidebar.tsx
index 580f28b..c16df35 100644
--- a/frontend/src/components/Sidebar/sidebar.tsx
+++ b/frontend/src/components/Sidebar/sidebar.tsx
@@ -46,11 +46,11 @@ export const items = [
 		description: "Catalog",
 		href: "/catalog",
 	},
-	{
-		icon: <Mic />,
-		description: "Podcasts",
-		href: "#",
-	},
+	// {
+	// 	icon: <Mic />,
+	// 	description: "Podcasts",
+	// 	href: "#",
+	// },
 	{
 		icon: <Calendar />,
 		description: "Calendar",
@@ -65,7 +65,7 @@ export const items = [
 	{
 		icon: <Phone />,
 		description: "Contact",
-		href: "mailto:info@fostersource.org",
+		href: "mailto:info@bethesource.org",
 	},
 ];
 
@@ -154,13 +154,7 @@ export function Profile({ isCollapsed, isLoggedIn, name, role }: ProfileProps) {
 				</div>
 			)}
 			{isLoggedIn && (
-				<img
-					src={
-						"https://static-00.iconduck.com/assets.00/profile-default-icon-1024x1023-4u5mrj2v.png"
-					}
-					alt="Profile"
-					className="profile-pic"
-				/>
+				<img src="/images/pfp.jpg" alt="Profile" className="profile-pic" />
 			)}
 			{isLoggedIn && !isCollapsed && (
 				<div className="pl-3 align-middle">
diff --git a/frontend/src/components/dropdown-select.tsx b/frontend/src/components/dropdown-select.tsx
index d57c4d5..107b68b 100644
--- a/frontend/src/components/dropdown-select.tsx
+++ b/frontend/src/components/dropdown-select.tsx
@@ -50,7 +50,7 @@ const Dropdown: React.FC<DropdownProps> = ({ buttonLabel, menuItems }) => {
 
 			{isOpen && (
 				<div
-					className="absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
+					className="absolute left-0 z-10 mt-2 w-40 origin-top-left rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
 					role="menu"
 					aria-orientation="vertical"
 					aria-labelledby="menu-button"
diff --git a/frontend/src/pages/Admin/ComponentPage/CertificateCard.tsx b/frontend/src/pages/Admin/ComponentPage/CertificateCard.tsx
index e9924a3..c7c94df 100644
--- a/frontend/src/pages/Admin/ComponentPage/CertificateCard.tsx
+++ b/frontend/src/pages/Admin/ComponentPage/CertificateCard.tsx
@@ -1,51 +1,66 @@
 import { Dispatch, SetStateAction } from "react";
 import Dropdown from "../../../components/dropdown-select";
-import {Vault, Eye, Wifi} from "lucide-react";
+import { Vault, Eye, Wifi } from "lucide-react";
 import DisplayBar from "./DisplayBar";
 
 interface WorkshopProps {
-  workshop: any;
-  prerequisites: { survey: string; certificate: string };
-  setPrerequisites: Dispatch<SetStateAction<{ survey: string; certificate: string }>>;
+	workshop: any;
+	prerequisites: { survey: string; certificate: string };
+	setPrerequisites: Dispatch<
+		SetStateAction<{ survey: string; certificate: string }>
+	>;
 }
 
 interface CheckboxProps {
-    label: string;
-    checked: boolean;
-    onChange: (checked: boolean) => void;
-  }
-  
-  export function Checkbox({ label, checked, onChange }: CheckboxProps) {
-    return (
-      <label className="flex items-center space-x-1 cursor-pointer text-sm">
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={(e) => onChange(e.target.checked)}
-          className="form-checkbox h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring focus:ring-blue-500"
-        />
-        <span className="text-gray-600">{label}</span>
-      </label>
-    );
-  }
-  
+	label: string;
+	checked: boolean;
+	onChange: (checked: boolean) => void;
+}
 
-export default function CertificateCard({ workshop, prerequisites, setPrerequisites }: WorkshopProps) {
-  const formatMenuItems = [
-    { label: "None Selected", onClick: () => setPrerequisites((prev) => ({ ...prev, survey: "None Selected" })) },
-    { label: "Survey", onClick: () => setPrerequisites((prev) => ({ ...prev, certificate: "Survey" })) }
-  ];
+export function Checkbox({ label, checked, onChange }: CheckboxProps) {
+	return (
+		<label className="flex items-center space-x-1 cursor-pointer text-sm">
+			<input
+				type="checkbox"
+				checked={checked}
+				onChange={(e) => onChange(e.target.checked)}
+				className="form-checkbox h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring focus:ring-blue-500"
+			/>
+			<span className="text-gray-600">{label}</span>
+		</label>
+	);
+}
 
-  return (
-    <div className="border rounded-lg shadow p-4 bg-white w-full last:mr-6 h-[98%] pb-2">
-      <div>
-        <div className="flex flex-row">
-            <Vault />
-            <h2 className="text-xl font-bold pl-2">{workshop?.name || "Certificate"}</h2>
-        </div>
-        
-        <p className="text-sm text-gray-500 mb-5">Certificate Template</p>
-        <p className="text-sm font-medium">Prerequisites</p>
+export default function CertificateCard({
+	workshop,
+	prerequisites,
+	setPrerequisites,
+}: WorkshopProps) {
+	const formatMenuItems = [
+		{
+			label: "None Selected",
+			onClick: () =>
+				setPrerequisites((prev) => ({ ...prev, survey: "None Selected" })),
+		},
+		{
+			label: "Survey",
+			onClick: () =>
+				setPrerequisites((prev) => ({ ...prev, certificate: "Survey" })),
+		},
+	];
+
+	return (
+		<div className="border rounded-lg shadow p-4 bg-white w-full last:mr-6 h-[98%] pb-2">
+			<div>
+				<div className="flex flex-row">
+					<Vault />
+					<h2 className="text-xl font-bold pl-2">
+						{workshop?.name || "Certificate"}
+					</h2>
+				</div>
+
+				<p className="text-sm text-gray-500 mb-5">Certificate Template</p>
+				{/* <p className="text-sm font-medium">Prerequisites</p>
 
         <Dropdown buttonLabel={`None Selected: ${prerequisites.survey}`} menuItems={formatMenuItems} />
         <div className="flex flex-col gap-2 mt-4">
@@ -56,37 +71,42 @@ export default function CertificateCard({ workshop, prerequisites, setPrerequisi
                     throw new Error("Function not implemented.");
                 } } />
         </div>
-        
-        <div className="mt-8 text-xs font-bold">Preview</div>
-        <div className="mt-2 border p-3 rounded-lg border-black h-[350px] relative flex items-center flex-col">
-            <p className="font-medium text-left w-full">Content</p>
-            <div className="flex justify-center">
-                <DisplayBar status={"certificate"} />
-            </div>
-            <div className="text-black text-sm font-medium space-y-2 w-full pt-7 pb-20 mb-24"><span></span></div>
-            <div className=" items-center w-[90%] mb-2">
-                <button className="bg-[#F79518] text-white py-2 px-4 rounded w-full mt-4">
-                    <div className="flex flex-row justify-center">
-                        <Eye className="mr-2"/>
-                        View Certificate
-                    </div>
-                </button>
-            </div>
-        </div>
-
-        <button className="bg-[#8757A3] text-white py-2 px-4 rounded w-full mt-4 transition transform active:scale-95 hover:scale-105" 
-        onClick={() => {console.log("clicked")}}>
-            Edit Component
-        </button>
-
-        <div className="flex justify-center mt-2">
-            <button className="text-purple-600 underline transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95">
-                Hide Component
-            </button>
-        </div>
+         */}
+				<div className="mt-8 text-xs font-bold">Preview</div>
+				<div className="mt-2 border p-3 rounded-lg border-black h-[350px] relative flex items-center flex-col">
+					<p className="font-medium text-left w-full">Content</p>
+					<div className="flex justify-center">
+						<DisplayBar status={"certificate"} />
+					</div>
+					<div className="text-black text-sm font-medium space-y-2 w-full pt-7 pb-20 mb-24">
+						<span></span>
+					</div>
+					<div className=" items-center w-[90%] mb-2">
+						<button className="bg-[#F79518] text-white py-2 px-4 rounded w-full mt-4">
+							<div className="flex flex-row justify-center">
+								<Eye className="mr-2" />
+								View Certificate
+							</div>
+						</button>
+					</div>
+				</div>
 
+				<button
+					className="bg-[#8757A3] text-white py-2 px-4 rounded w-full mt-4 transition transform disabled:bg-gray-400"
+					onClick={() => {
+						console.log("clicked");
+					}}
+					disabled={true}
+				>
+					Edit Component
+				</button>
 
-      </div>
-    </div>
-  );
+				{/* <div className="flex justify-center mt-2">
+					<button className="text-purple-600 underline transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95">
+						Hide Component
+					</button>
+				</div> */}
+			</div>
+		</div>
+	);
 }
diff --git a/frontend/src/pages/Admin/ComponentPage/Component.tsx b/frontend/src/pages/Admin/ComponentPage/Component.tsx
index 8e902ee..c6eab79 100644
--- a/frontend/src/pages/Admin/ComponentPage/Component.tsx
+++ b/frontend/src/pages/Admin/ComponentPage/Component.tsx
@@ -3,6 +3,7 @@ import Dropdown from "../../../components/dropdown-select";
 import WorkshopCard from "./WorkshopCard";
 import SurveyCard from "./SurveyCard";
 import CertificateCard from "./CertificateCard";
+import SaveCourseButton from "../../../components/SaveCourseButtons";
 
 // Card Component
 interface CardProps {
@@ -42,41 +43,44 @@ export default function Component({
 	certificate,
 }: InclusiveSupportPageProps) {
 	return (
-		<div className="flex flex-row w-full gap-4 p-4">
-			<WorkshopCard
-				prerequisites={{
-					survey: "",
-					certificate: "",
-				}}
-				setPrerequisites={function (
-					value: SetStateAction<{ survey: string; certificate: string }>
-				): void {
-					throw new Error("Function not implemented.");
-				}}
-			/>
-			<SurveyCard
-				prerequisites={{
-					survey: "",
-					certificate: "",
-				}}
-				setPrerequisites={function (
-					value: SetStateAction<{ survey: string; certificate: string }>
-				): void {
-					throw new Error("Function not implemented.");
-				}}
-			/>
-			<CertificateCard
-				workshop={undefined}
-				prerequisites={{
-					survey: "",
-					certificate: "",
-				}}
-				setPrerequisites={function (
-					value: SetStateAction<{ survey: string; certificate: string }>
-				): void {
-					throw new Error("Function not implemented.");
-				}}
-			/>
+		<div>
+			<div className="flex flex-row w-full gap-4 p-4">
+				<WorkshopCard
+					prerequisites={{
+						survey: "",
+						certificate: "",
+					}}
+					setPrerequisites={function (
+						value: SetStateAction<{ survey: string; certificate: string }>
+					): void {
+						throw new Error("Function not implemented.");
+					}}
+				/>
+				<SurveyCard
+					prerequisites={{
+						survey: "",
+						certificate: "",
+					}}
+					setPrerequisites={function (
+						value: SetStateAction<{ survey: string; certificate: string }>
+					): void {
+						throw new Error("Function not implemented.");
+					}}
+				/>
+				<CertificateCard
+					workshop={undefined}
+					prerequisites={{
+						survey: "",
+						certificate: "",
+					}}
+					setPrerequisites={function (
+						value: SetStateAction<{ survey: string; certificate: string }>
+					): void {
+						throw new Error("Function not implemented.");
+					}}
+				/>
+			</div>
+			<SaveCourseButton prevLink="pricing" nextLink="handouts" />
 		</div>
 	);
 }
diff --git a/frontend/src/pages/Admin/ComponentPage/SurveyCard.tsx b/frontend/src/pages/Admin/ComponentPage/SurveyCard.tsx
index ff3639f..2a22d19 100644
--- a/frontend/src/pages/Admin/ComponentPage/SurveyCard.tsx
+++ b/frontend/src/pages/Admin/ComponentPage/SurveyCard.tsx
@@ -124,7 +124,7 @@ export default function SurveyCard({
 				<p className="text-sm text-gray-500 mb-5">
 					Survey has {survey.questions.length} questions{" "}
 				</p>
-				<p className="text-sm font-medium">Prerequisites</p>
+				{/* <p className="text-sm font-medium">Prerequisites</p>
 
 				<Dropdown
 					buttonLabel={`None Selected: ${prerequisites.survey}`}
@@ -145,7 +145,7 @@ export default function SurveyCard({
 							throw new Error("Function not implemented.");
 						}}
 					/>
-				</div>
+				</div> */}
 
 				<div className="mt-8 text-xs font-bold">Preview</div>
 				<div className="mt-2 border p-3 rounded-lg border-black h-[350px] relative flex items-center flex-col">
@@ -171,11 +171,11 @@ export default function SurveyCard({
 					Edit Component
 				</button>
 
-				<div className="flex justify-center mt-2">
+				{/* <div className="flex justify-center mt-2">
 					<button className="text-purple-600 underline transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95">
 						Hide Component
 					</button>
-				</div>
+				</div> */}
 			</div>
 		</div>
 	);
diff --git a/frontend/src/pages/Admin/ComponentPage/WorkshopCard.tsx b/frontend/src/pages/Admin/ComponentPage/WorkshopCard.tsx
index 62e01b7..0f21809 100644
--- a/frontend/src/pages/Admin/ComponentPage/WorkshopCard.tsx
+++ b/frontend/src/pages/Admin/ComponentPage/WorkshopCard.tsx
@@ -158,7 +158,7 @@ export default function WorkshopCard({
 				<p className="text-sm text-gray-500 mb-5">
 					Live Event {formatWebinarDate(webinar.startTime)}
 				</p>
-				<p className="text-sm font-medium">Prerequisites</p>
+				{/* <p className="text-sm font-medium">Prerequisites</p>
 
 				<Dropdown
 					buttonLabel={`None Selected: ${prerequisites.survey}`}
@@ -179,7 +179,7 @@ export default function WorkshopCard({
 							throw new Error("Function not implemented.");
 						}}
 					/>
-				</div>
+				</div> */}
 
 				<div className="mt-8 text-xs font-bold">Preview</div>
 				<div className="mt-2 border p-3 rounded-lg border-black h-[350px] relative flex items-center flex-col">
@@ -211,11 +211,11 @@ export default function WorkshopCard({
 					Edit Component
 				</button>
 
-				<div className="flex justify-center mt-2">
+				{/* <div className="flex justify-center mt-2">
 					<button className="text-purple-600 underline transition-transform duration-300 ease-in-out hover:scale-105 active:scale-95">
 						Hide Component
 					</button>
-				</div>
+				</div> */}
 			</div>
 		</div>
 	);
diff --git a/frontend/src/pages/Admin/EditCoursePage/editCoursePage.tsx b/frontend/src/pages/Admin/EditCoursePage/editCoursePage.tsx
index ac78370..c248609 100644
--- a/frontend/src/pages/Admin/EditCoursePage/editCoursePage.tsx
+++ b/frontend/src/pages/Admin/EditCoursePage/editCoursePage.tsx
@@ -227,9 +227,9 @@ const EditCourse = () => {
 		<div className="flex flex-col p-8 bg-white">
 			<p className="text-2xl">Details</p>
 			<div className="mt-2">
-				<div className="flex justify-between flex-row-reverse">
-					<div className="flex flex-col justify-end">
-						<p className="text-xs">Catalog</p>
+				<div className="flex justify-between flex-row-reverse gap-12">
+					<div className="flex flex-col">
+						<p className="text-lg">Thumbnail</p>
 						<div
 							className="border-2 border-dashed border-gray-400 rounded-lg p-6 w-full max-w-lg mx-auto text-center cursor-pointer"
 							onDragOver={(e) => e.preventDefault()}
@@ -283,42 +283,6 @@ const EditCourse = () => {
 							)}
 						</div>
 
-						<p className="text-xs mr-52 mt-10">Banner Image</p>
-						<div
-							className="border-2 border-dashed border-gray-400 rounded-lg p-6 w-full max-w-lg mx-auto text-center cursor-pointer "
-							onDragOver={(e) => e.preventDefault()}
-							onDrop={handleBannerDrop}
-						>
-							<div className="flex flex-col items-center">
-								{/* Upload Icon */}
-								<span className="text-gray-500 text-2xl">⬆️</span>
-
-								{/* Upload Text */}
-								<p className="font-semibold mt-2">
-									Choose a file or drag & drop it here
-								</p>
-								<p className="text-gray-400 text-sm">
-									JPEG or PNG format, up to 50MB
-								</p>
-
-								{/* File Input */}
-								<input
-									type="file"
-									accept=".jpeg, .jpg, .png"
-									className="hidden"
-									id="bannerInput"
-									onChange={handleBannerChange}
-								/>
-								<label
-									htmlFor="bannerInput"
-									className="mt-4 bg-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm cursor-pointer"
-								>
-									Browse Files
-								</label>
-
-								{/* Show Selected File */}
-							</div>
-						</div>
 						<div className="relative text-center">
 							{bannerImage && (
 								<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-[370px] h-[37px] bg-gray-200 flex flex-row items-center px-3 shadow-md rounded-md">
@@ -335,22 +299,22 @@ const EditCourse = () => {
 							)}
 						</div>
 					</div>
-					<div className="">
-						<div className="flex flex-col flex-grow text-sm w-full">
+					<div className=" w-full">
+						<div className="flex flex-col flex-grow text-md w-full">
 							<p>Title</p>
 							<input
 								type="text"
-								className="h-8 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-xs"
+								className="h-12 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
 								placeholder="Title of the class"
 								value={className}
 								onChange={(e) => setField("className", e.target.value)}
 							/>
 						</div>
 						<div className="mt-3">
-							<p className="text-sm">Summary</p>
-							<div className="text-xs">
+							<p className="text-md">Summary</p>
+							<div className="text-md">
 								<textarea
-									className="w-full h-11 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-xs"
+									className="w-full h-12 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
 									placeholder="Enter summary displayed on preview"
 									value={discussion}
 									onChange={(e) => setField("discussion", e.target.value)}
@@ -358,15 +322,15 @@ const EditCourse = () => {
 							</div>
 						</div>
 						<div className="mt-3">
-							<p className="text-sm">Description</p>
+							<p className="text-md">Description</p>
 							<textarea
-								className="w-full h-20 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-xs"
+								className="w-full h-20 p-4 border rounded-lg focus:ring-2 focus:ring-blue-500 text-md"
 								placeholder="Short description that will show on the overview tab"
 								value={courseDescription}
 								onChange={(e) => setField("courseDescription", e.target.value)}
 							/>
 						</div>
-						<div className="mt-2">
+						{/* <div className="mt-2">
 							<div className="flex flex-row items-start space-x-2 w-full">
 								<p className="text-sm leading-none">Short Product Url</p>
 								<p className="text-gray-400 text-xs leading-none">
@@ -381,56 +345,60 @@ const EditCourse = () => {
 									onChange={(e) => setField("shortUrl", e.target.value)}
 								/>
 							</div>
-						</div>
-
-						<div className="flex flex-row">
-							<div className="mt-2 gap-1 flex flex-col text-sm">
-								Credits
-								<div className="">
-									<input
-										type="number"
-										className="h-6 w-20 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-center"
-										min="0"
-										max="10"
-										value={creditNumber}
-										onChange={(e) =>
-											setField("creditNumber", Number(e.target.value))
-										}
-									/>
+						</div> */}
+
+						<div className="flex gap-8">
+							<div className="flex flex-row">
+								<div className="mt-2 gap-1 flex flex-col text-md">
+									Credits
+									<div className="">
+										<input
+											type="number"
+											className="h-12 w-20 p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 text-center"
+											min="0"
+											max="10"
+											value={creditNumber}
+											onChange={(e) =>
+												setField("creditNumber", Number(e.target.value))
+											}
+										/>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div className="mt-3 ml-20 gap-1 flex flex-col text-sm ">
-							Categories
-							<SetOptionsContext.Provider value={setOptions}>
-								<CustomSelect
-									className="w-[250px]"
-									options={options}
-									isMulti
-									value={options.filter((opt) =>
-										categories.includes(opt.value)
-									)}
-									onChange={(selected) => {
-										const selectedValues = (selected as OptionType[]).map(
-											(opt) => opt.value
-										);
-										setField("categories", selectedValues);
-									}}
-									components={{ Option: CustomOption }}
-								/>
-							</SetOptionsContext.Provider>
-						</div>
+							<div className="flex">
+								<div className="mt-3 gap-1 flex flex-col text-md ">
+									Categories
+									<SetOptionsContext.Provider value={setOptions}>
+										<CustomSelect
+											className="w-[250px]"
+											options={options}
+											isMulti
+											value={options.filter((opt) =>
+												categories.includes(opt.value)
+											)}
+											onChange={(selected) => {
+												const selectedValues = (selected as OptionType[]).map(
+													(opt) => opt.value
+												);
+												setField("categories", selectedValues);
+											}}
+											components={{ Option: CustomOption }}
+										/>
+									</SetOptionsContext.Provider>
+								</div>
 
-						<div className="mt-9 ml-5">
-							<button
-								className="w-32 h-10 text-purple-400"
-								onClick={() => setModalopen(!modalOpen)}
-							>
-								<p className="text-xs font-medium text-purple-400">
-									Add Category
-								</p>
-							</button>
+								<div className="self-end">
+									<button
+										className="w-32 h-10 text-purple-400"
+										onClick={() => setModalopen(!modalOpen)}
+									>
+										<p className="text-xs font-medium text-purple-400">
+											Add Category
+										</p>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 					{/* {modalOpen && (
diff --git a/frontend/src/pages/Admin/HandoutsPage/handoutsPage.tsx b/frontend/src/pages/Admin/HandoutsPage/handoutsPage.tsx
index 9c5a130..637aa37 100644
--- a/frontend/src/pages/Admin/HandoutsPage/handoutsPage.tsx
+++ b/frontend/src/pages/Admin/HandoutsPage/handoutsPage.tsx
@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
 import apiClient from "../../../services/apiClient";
 import { useParams } from "react-router-dom";
+import SaveCourseButton from "../../../components/SaveCourseButtons";
 type Row = {
-	id?: number;
+	id?: string;
 	subject: string;
-	file: string | File;
+	file: string;
 };
 type Handout = {
 	title: string;
@@ -33,10 +34,13 @@ const HandoutPage = () => {
 			const response = await apiClient.get(`/courses/${id}`);
 			const course = response.data.data;
 			const formattedHandouts = course.handouts.map(
-				(handout: { title: string; file: string }, index: number) => ({
-					id: index,
-					subject: handout.title,
-					file: handout.file,
+				(
+					handout: { fileType: string; fileUrl: string; _id: string },
+					index: number
+				) => ({
+					id: handout._id,
+					subject: handout.fileType,
+					file: handout.fileUrl,
 				})
 			);
 			setRows(formattedHandouts);
@@ -46,33 +50,38 @@ const HandoutPage = () => {
 		}
 	};
 
-	const rowsRef = useRef<Handout[]>([]);
-	useEffect(() => {
-		const formattedRows = rows.map(({ subject, file }) => ({
-			title: subject,
-			file: typeof file === "string" ? file : file.name, // handle File object or string
-		}));
+	// const rowsRef = useRef<Handout[]>([]);
+	// useEffect(() => {
+	// 	const formattedRows = rows.map(({ subject, file }) => ({
+	// 		title: subject,
+	// 		file: typeof file === "string" ? file : file.name, // handle File object or string
+	// 	}));
 
-		rowsRef.current = formattedRows;
-	}, [rows]);
+	// 	rowsRef.current = formattedRows;
+	// }, [rows]);
 
 	const updateHandouts = async () => {
+		const formattedHandouts = rows.map(({ subject, file }) => ({
+			title: subject,
+			file: file,
+		}));
+
 		try {
-			const response = await apiClient.put(`/courses/${id}`, {
-				handouts: rowsRef.current,
+			await apiClient.put(`/courses/${id}`, {
+				handouts: formattedHandouts,
 			});
 		} catch (e) {
 			console.log("Error updating course " + e);
 		}
 	};
 
-	useEffect(() => {
-		return () => {
-			if (dataLoaded) {
-				updateHandouts();
-			}
-		};
-	}, [dataLoaded]);
+	// useEffect(() => {
+	// 	return () => {
+	// 		if (dataLoaded) {
+	// 			updateHandouts();
+	// 		}
+	// 	};
+	// }, [dataLoaded]);
 
 	useEffect(() => {
 		getHandouts();
@@ -102,40 +111,79 @@ const HandoutPage = () => {
 		setUploadLink(true);
 	};
 
-	const handleSubmit = (subject: string, file: string | File | null) => {
-		if (file) {
-			let id = rows.length;
-			setRows([...rows, { id, subject, file }]);
+	const handleSubmit = async (subject: string, file: string | File | null) => {
+		if (!file || typeof file !== "string") {
+			alert("Enter a valid link");
+			return;
+		}
+
+		try {
+			// Step 1: Create the handout
+			const handoutResponse = await apiClient.post("/handout", {
+				courseId: id, // from useParams()
+				fileUrl: file,
+				fileType: subject, // or "pdf", "image", etc. if needed
+			});
+
+			const newHandout = handoutResponse.data.data;
+
+			// Step 2: Update the course to include the new handout
+			const response = await apiClient.put(`/courses/${id}`, {
+				$push: { handouts: newHandout._id },
+			});
+
+			console.log("updated course: ", response.data.data);
+
+			// Step 3: Update local state
+			const newRow = {
+				id: newHandout._id,
+				subject,
+				file,
+			};
+			setRows([...rows, newRow]);
+
+			// Cleanup
 			setModalOpen(false);
 			setFile(null);
 			setSubjectValue("");
 			setLink("");
-		} else {
-			alert("Enter link/file");
+		} catch (error) {
+			console.error("Error creating handout or updating course:", error);
+			alert("Failed to save handout");
 		}
 	};
 
-	const handleEditSubmit = (
-		id: number,
+	const handleEditSubmit = async (
+		index: number,
 		subject: string,
-		file: string | File | null
+		file: string
 	) => {
-		if (file) {
-			const updatedRows = rows.map((row, index) => {
-				if (index === id) {
-					// If the row's id matches, update this row with new data
-					console.log(row.id);
-					return { ...row, subject, file };
-				}
-				return row; // Return the unchanged row for others
+		const handout = rows[index];
+		if (!handout?.id || !file || typeof file !== "string") {
+			alert("Invalid handout or missing file URL");
+			return;
+		}
+
+		try {
+			// Backend update
+			await apiClient.put(`/handout/${handout.id}`, {
+				fileUrl: file,
+				fileType: subject,
 			});
-			setRows(updatedRows); // Update the state with the modified rows array
-			setEditModalOpen(false); // Close the modal
-			setFile(null); // Clear the file state if needed
+
+			// Local state update
+			const updatedRows = [...rows];
+			updatedRows[index] = { ...updatedRows[index], subject, file };
+			setRows(updatedRows);
+
+			// Reset
+			setEditModalOpen(false);
+			setFile(null);
 			setLink("");
 			setSubjectValue("");
-		} else {
-			alert("Enter link/file");
+		} catch (err) {
+			console.error("Failed to update handout:", err);
+			alert("Failed to update handout");
 		}
 	};
 
@@ -149,11 +197,25 @@ const HandoutPage = () => {
 		} else {
 			setFile(fileType);
 		}
+		updateHandouts();
 	};
 
-	const handleDelete = (index: number) => {
-		const updatedRows = rows.filter((_, i) => i !== index); // Remove the row at the specified index
-		setRows(updatedRows); // Update the state with the new array
+	const handleDelete = async (index: number) => {
+		const handout = rows[index];
+		if (!handout?.id) return;
+
+		try {
+			await apiClient.delete(`/handout/${handout.id}`, {
+				data: { courseId: id }, // courseId needed for backend update
+			});
+
+			// Local state update
+			const updatedRows = rows.filter((_, i) => i !== index);
+			setRows(updatedRows);
+		} catch (err) {
+			console.error("Error deleting handout:", err);
+			alert("Failed to delete handout");
+		}
 	};
 
 	return (
@@ -312,9 +374,7 @@ const HandoutPage = () => {
 									<button
 										className="w-[124px] h-[34px] bg-purple-500 border rounded-md ml-12"
 										onClick={() => {
-											uploadLink
-												? handleEditSubmit(editId, subjectValue, link)
-												: handleEditSubmit(editId, subjectValue, file);
+											handleEditSubmit(editId, subjectValue, link);
 										}}
 									>
 										<p className="text-white text-xs">Save and Exit</p>
@@ -496,7 +556,7 @@ const HandoutPage = () => {
 											setFile(null);
 										}}
 									>
-										<p className="text-purple-500 text-xs">Exit</p>
+										<p className="text-purple-500 text-xs">Cancel</p>
 									</button>
 								</div>
 							</div>
@@ -526,18 +586,14 @@ const HandoutPage = () => {
 							>
 								<td className="p-2 border">{row.subject}</td>
 								<td className="p-2 border">
-									{typeof row.file === "string" ? (
-										<a
-											href={row.file}
-											target="_blank"
-											rel="noopener noreferrer"
-											className="text-blue-600 underline"
-										>
-											{row.file}
-										</a>
-									) : (
-										<p>{row.file.name}</p>
-									)}
+									<a
+										href={row.file ? row.file : ""}
+										target="_blank"
+										rel="noopener noreferrer"
+										className="text-blue-600 underline"
+									>
+										{row.file}
+									</a>
 								</td>
 
 								<td className="p-2 border flex flex-row">
@@ -558,6 +614,7 @@ const HandoutPage = () => {
 					</tbody>
 				</table>
 			</div>
+			<SaveCourseButton prevLink="components" nextLink="speakers" />
 		</div>
 	);
 };
diff --git a/frontend/src/pages/Admin/Pricing/Pricing.tsx b/frontend/src/pages/Admin/Pricing/Pricing.tsx
index bafa027..66a82e5 100644
--- a/frontend/src/pages/Admin/Pricing/Pricing.tsx
+++ b/frontend/src/pages/Admin/Pricing/Pricing.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { X as XIcon } from "lucide-react";
 import SaveCourseButton from "../../../components/SaveCourseButtons";
+import { useCourseEditStore } from "../../../store/useCourseEditStore";
+import DatePicker from "react-datepicker";
 
 interface UserType {
 	type: string;
@@ -16,46 +18,72 @@ interface PricingProps {
 }
 
 const Pricing: React.FC<PricingProps> = ({ onClose }) => {
-	const [registrationLimit, setRegistrationLimit] = useState("none");
-	const [privateRegistration, setPrivateRegistration] = useState(false);
-	const [earlyBirdPricing, setEarlyBirdPricing] = useState(false);
-	const [noEndSales, setNoEndSales] = useState(false);
-	const [autoCloseAccess, setAutoCloseAccess] = useState(false);
-	const [delayedOpening, setDelayedOpening] = useState(false);
-	const [emailManagers, setEmailManagers] = useState(false);
-	const [emailRegistrants, setEmailRegistrants] = useState(false);
-	const [expirationDays, setExpirationDays] = useState("0");
+	const [registrationLimitEnabled, setRegistrationLimitEnabled] =
+		useState(false);
+	const [registrationLimitInput, setRegistrationLimitInput] = useState("0");
+	const [isInvalidLimit, setIsInvalidLimit] = useState(false);
 
-	const [userTypes, setUserTypes] = useState<UserType[]>(
-		Array(15).fill({
-			type: "Former FP/Adoptive Parent",
-			view: false,
-			register: false,
-			instantRegister: false,
-			price: "",
-			earlyBirdPrice: "",
-		})
-	);
+	// Format Date → datetime-local string
+	const formatDateForInput = (date: Date | null | undefined) => {
+		if (!date) return "";
+		return date.toISOString().slice(0, 16);
+	};
 
-	const DisabledDateInput = ({
-		label,
-		enabled,
-	}: {
-		label: string;
-		enabled: boolean;
-	}) => (
-		<div className="ml-6 mt-1">
-			<div className={`text-sm ${enabled ? "text-gray-900" : "text-gray-400"}`}>
-				{label}
-			</div>
-			<input
-				type="datetime-local"
-				disabled={!enabled}
-				className={`w-64 p-2 border rounded-lg text-sm ${!enabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"}`}
-				placeholder="__/__/____ __:__"
-			/>
-		</div>
-	);
+	// Parse string → Date
+	const parseDateFromInput = (val: string): Date | null => {
+		const parsed = new Date(val);
+		return isNaN(parsed.getTime()) ? null : parsed;
+	};
+
+	// Validate input string is a clean integer
+	const isStringInt = (val: string) => {
+		if (val.trim() === "") return false;
+		const parsed = parseInt(val, 10);
+		return !isNaN(parsed) && parsed.toString() === val.trim();
+	};
+
+	const { registrationLimit, regStart, regEnd, setField } =
+		useCourseEditStore();
+
+	// const [privateRegistration, setPrivateRegistration] = useState(false);
+	// const [earlyBirdPricing, setEarlyBirdPricing] = useState(false);
+	// const [noEndSales, setNoEndSales] = useState(false);
+	// const [autoCloseAccess, setAutoCloseAccess] = useState(false);
+	// const [delayedOpening, setDelayedOpening] = useState(false);
+	// const [emailManagers, setEmailManagers] = useState(false);
+	// const [emailRegistrants, setEmailRegistrants] = useState(false);
+	// const [expirationDays, setExpirationDays] = useState("0");
+
+	// const [userTypes, setUserTypes] = useState<UserType[]>(
+	// 	Array(15).fill({
+	// 		type: "Former FP/Adoptive Parent",
+	// 		view: false,
+	// 		register: false,
+	// 		instantRegister: false,
+	// 		price: "",
+	// 		earlyBirdPrice: "",
+	// 	})
+	// );
+
+	// const DisabledDateInput = ({
+	// 	label,
+	// 	enabled,
+	// }: {
+	// 	label: string;
+	// 	enabled: boolean;
+	// }) => (
+	// 	<div className="ml-6 mt-1">
+	// 		<div className={`text-sm ${enabled ? "text-gray-900" : "text-gray-400"}`}>
+	// 			{label}
+	// 		</div>
+	// 		<input
+	// 			type="datetime-local"
+	// 			disabled={!enabled}
+	// 			className={`w-64 p-2 border rounded-lg text-sm ${!enabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"}`}
+	// 			placeholder="__/__/____ __:__"
+	// 		/>
+	// 	</div>
+	// );
 
 	return (
 		<div className="bg-white w-full">
@@ -73,23 +101,57 @@ const Pricing: React.FC<PricingProps> = ({ onClose }) => {
           </div> */}
 
 			<div className="p-6">
-				<h2 className="text-xl font-bold mb-6"></h2>
-
 				<div className="flex gap-8">
 					<div className="w-1/3">
-						<h3 className="text-sm font-medium mb-2">Registration Limit</h3>
-						<select
-							value={registrationLimit}
-							onChange={(e) => setRegistrationLimit(e.target.value)}
-							className="w-full p-2 border rounded-lg text-sm mb-6"
-						>
-							<option value="none">none</option>
-							<option value="10">10</option>
-							<option value="20">20</option>
-							<option value="30">30</option>
-						</select>
+						<div className="mt-3 gap-2 flex flex-col text-md w-[250px] mb-4">
+							<label className="flex items-center gap-2">
+								<input
+									type="checkbox"
+									className="accent-[#8757a3]"
+									checked={registrationLimitEnabled}
+									onChange={(e) => {
+										setRegistrationLimitEnabled(e.target.checked);
+										if (!e.target.checked) {
+											setIsInvalidLimit(false);
+										}
+									}}
+								/>
+								Set Registration Limit
+							</label>
 
-						<div className="space-y-2 mb-6">
+							<input
+								type="text"
+								disabled={!registrationLimitEnabled}
+								className={`rounded px-2 py-1 focus:outline-none border ${
+									registrationLimitEnabled
+										? isInvalidLimit
+											? "border-red-500"
+											: "border-gray-300"
+										: "bg-gray-100 text-gray-400 border-gray-200"
+								}`}
+								value={registrationLimitInput}
+								onChange={(e) => {
+									const val = e.target.value;
+									setRegistrationLimitInput(val);
+
+									if (isStringInt(val)) {
+										setIsInvalidLimit(false);
+										setField("registrationLimit", parseInt(val, 10));
+									} else {
+										setIsInvalidLimit(true);
+									}
+								}}
+								placeholder="Enter a number"
+							/>
+
+							{registrationLimitEnabled && isInvalidLimit && (
+								<span className="text-red-500 text-sm mt-1">
+									Please enter a valid number
+								</span>
+							)}
+						</div>
+
+						{/* <div className="space-y-2 mb-6">
 							<label className="flex items-center gap-2 text-sm">
 								<input
 									type="checkbox"
@@ -113,29 +175,56 @@ const Pricing: React.FC<PricingProps> = ({ onClose }) => {
 								label="Expiration"
 								enabled={earlyBirdPricing}
 							/>
-						</div>
+						</div> */}
 
 						<div className="space-y-4 mb-6">
 							<div>
-								<h3 className="text-sm font-medium mb-2">Start Sales</h3>
-								<input
-									type="datetime-local"
+								<h3 className="text-sm font-medium mb-2">Start Registration</h3>
+								<DatePicker
+									selected={
+										regStart instanceof Date
+											? regStart
+											: regStart
+												? new Date(regStart)
+												: null
+									}
+									onChange={(date) => date && setField("regStart", date)}
+									showTimeSelect
+									dateFormat="Pp"
 									className="w-64 p-2 border rounded-lg text-sm"
-									placeholder="__/__/____ __:__"
 								/>
 							</div>
 
 							<div>
-								<h3 className="text-sm font-medium mb-2">End Sales</h3>
-								<input
-									type="datetime-local"
+								<div className="flex items-center justify-between mb-2">
+									<h3 className="text-sm font-medium">End Registration</h3>
+									{regEnd && (
+										<button
+											onClick={() => setField("regEnd", undefined)}
+											className="text-xs text-red-600 hover:text-red-800 px-2 py-1 rounded border border-red-300 hover:border-red-500"
+										>
+											Clear Date
+										</button>
+									)}
+								</div>
+								<DatePicker
+									selected={
+										regEnd instanceof Date
+											? regEnd
+											: regEnd
+												? new Date(regEnd)
+												: null
+									}
+									onChange={(date) => setField("regEnd", date || undefined)}
+									showTimeSelect
+									dateFormat="Pp"
 									className="w-64 p-2 border rounded-lg text-sm"
-									placeholder="__/__/____ __:__"
+									placeholderText="Optional - Leave empty for no end date"
+									isClearable
 								/>
 							</div>
 						</div>
-
-						<div className="space-y-2 mb-6">
+						{/* <div className="space-y-2 mb-6">
 							<label className="flex items-center gap-2 text-sm">
 								<input
 									type="checkbox"
@@ -173,9 +262,9 @@ const Pricing: React.FC<PricingProps> = ({ onClose }) => {
 								label="Open For Access Date"
 								enabled={delayedOpening}
 							/>
-						</div>
+						</div> */}
 
-						<div className="space-y-4 mb-6">
+						{/* <div className="space-y-4 mb-6">
 							<h3 className="text-sm font-medium">Expire Registrations</h3>
 							<div className="flex gap-2">
 								<input
@@ -189,9 +278,9 @@ const Pricing: React.FC<PricingProps> = ({ onClose }) => {
 									<option>Days from Registration</option>
 								</select>
 							</div>
-						</div>
+						</div> */}
 
-						<div className="space-y-2">
+						{/* <div className="space-y-2">
 							<label className="flex items-center gap-2 text-sm">
 								<input
 									type="checkbox"
@@ -211,7 +300,7 @@ const Pricing: React.FC<PricingProps> = ({ onClose }) => {
 								/>
 								<span>Email Registrants on Completion</span>
 							</label>
-						</div>
+						</div> */}
 					</div>
 
 					{/* <div className="w-2/3">
diff --git a/frontend/src/pages/Admin/ProductPage/ProductPage.tsx b/frontend/src/pages/Admin/ProductPage/ProductPage.tsx
index c77d655..d78289b 100644
--- a/frontend/src/pages/Admin/ProductPage/ProductPage.tsx
+++ b/frontend/src/pages/Admin/ProductPage/ProductPage.tsx
@@ -303,12 +303,27 @@ export default function ProductPage() {
 		getOptions();
 	}, []);
 
+	const handleAddCourse = async () => {
+		try {
+			const res = await apiClient.post("/courses", {
+				className: "Untitled",
+				draft: true,
+			});
+
+			const createdCourse = res.data.data;
+			navigate(`/admin/product/edit/${createdCourse._id}`);
+		} catch (error) {
+			console.error("Failed to create course", error);
+			// Optional: toast or error message
+		}
+	};
+
 	return (
 		<div className="w-full min-h-screen bg-gray-100">
 			<div className="max-w-screen-2xl mx-auto px-8 py-6">
 				<div className="bg-white border rounded-lg p-6">
 					<div className="mb-6">
-						<h1 className="text-2xl font-bold">Products</h1>
+						<h1 className="text-2xl font-bold">Courses</h1>
 					</div>
 
 					<div className="mb-6">
@@ -318,7 +333,7 @@ export default function ProductPage() {
 								value={searchQuery}
 								onChange={(e) => setSearchQuery(e.target.value)}
 								className="w-full pl-4 pr-16 py-3 rounded-lg border bg-white text-gray-800 placeholder-gray-400"
-								placeholder="Search products..."
+								placeholder="Search courses..."
 							/>
 							<div className="absolute right-0 top-0 bottom-0 flex items-center rounded-r-lg overflow-hidden">
 								<div className="h-full px-4 flex items-center bg-[#9c74b4]">
@@ -425,9 +440,7 @@ export default function ProductPage() {
 						<button
 							className="text-white px-6 py-2.5 rounded-lg font-medium hover:opacity-90"
 							style={{ backgroundColor: "#8757a3" }}
-							onClick={() => {
-								navigate("/admin/product/create");
-							}}
+							onClick={handleAddCourse}
 						>
 							Add Course
 						</button>
diff --git a/frontend/src/pages/Admin/ProductSummaryPage/ProductProgressReport.tsx b/frontend/src/pages/Admin/ProductSummaryPage/ProductProgressReport.tsx
index 4687232..c46eec3 100644
--- a/frontend/src/pages/Admin/ProductSummaryPage/ProductProgressReport.tsx
+++ b/frontend/src/pages/Admin/ProductSummaryPage/ProductProgressReport.tsx
@@ -188,6 +188,10 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 	const [selectedUserType, setSelectedUserType] = useState("All");
 	const [excludeFinished, setExcludeFinished] = useState(false);
 	const [userProgress, setUserProgress] = useState<UserProgress[]>([]);
+	const [originalUserProgress, setOriginalUserProgress] = useState<
+		UserProgress[]
+	>([]);
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const [currentPage, setCurrentPage] = useState(1);
 	const [itemsPerPage] = useState(15);
@@ -338,9 +342,13 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 			}
 
 			setUserProgress(filteredProgress);
+			setOriginalUserProgress(JSON.parse(JSON.stringify(filteredProgress))); // Deep copy
+			setHasUnsavedChanges(false); // Reset change tracking when new data is loaded
 		} catch (error) {
 			console.error("Error fetching data:", error);
 			setUserProgress([]);
+			setOriginalUserProgress([]);
+			setHasUnsavedChanges(false);
 		} finally {
 			setIsLoading(false);
 		}
@@ -361,6 +369,7 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 					: p
 			)
 		);
+		setHasUnsavedChanges(true); // Mark that changes have been made
 		setEditModalOpen(false);
 	};
 
@@ -384,6 +393,9 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 
 			if (response.data.success) {
 				alert("All progress saved successfully.");
+				// Reset change tracking after successful save
+				setOriginalUserProgress(JSON.parse(JSON.stringify(userProgress))); // Deep copy
+				setHasUnsavedChanges(false);
 			} else {
 				console.error("Batch update failed:", response.data.message);
 				alert("Batch update failed.");
@@ -627,9 +639,15 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 													</td>
 													<td
 														className="px-4 py-2 text-sm truncate"
-														title={progress.user.role}
+														title={
+															(progress.user.role as any)?.name ||
+															progress.user.role ||
+															"N/A"
+														}
 													>
-														{progress.user.role}
+														{(progress.user.role as any)?.name ||
+															progress.user.role ||
+															"N/A"}
 													</td>
 													<td className="px-4 py-2 text-sm">
 														{progress.registeredDate ? (
@@ -714,7 +732,12 @@ const ProductProgressReport: React.FC<ProductProgressReportProps> = ({
 
 						<button
 							onClick={handleSaveAllProgress}
-							className="mt-4 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 self-end"
+							disabled={!hasUnsavedChanges}
+							className={`mt-4 px-4 py-2 rounded self-end ${
+								hasUnsavedChanges
+									? "bg-green-600 text-white hover:bg-green-700"
+									: "bg-gray-300 text-gray-500 cursor-not-allowed"
+							}`}
 						>
 							Save All Changes
 						</button>
diff --git a/frontend/src/pages/Admin/RegistrantsPage/Registrants.tsx b/frontend/src/pages/Admin/RegistrantsPage/Registrants.tsx
index b6a20cb..3d4f2c5 100644
--- a/frontend/src/pages/Admin/RegistrantsPage/Registrants.tsx
+++ b/frontend/src/pages/Admin/RegistrantsPage/Registrants.tsx
@@ -1,9 +1,8 @@
 import { useEffect, useState } from "react";
 import { FaTrashAlt as _FaTrashAlt } from "react-icons/fa";
 import { ComponentType } from "react";
+import { useParams } from "react-router-dom";
 import apiClient from "../../../services/apiClient";
-import qs from "qs";
-import { useCourseEditStore } from "../../../store/useCourseEditStore";
 
 const FaTrashAlt = _FaTrashAlt as ComponentType<{
 	size?: number;
@@ -22,9 +21,7 @@ interface RegistrantDisplayInfo {
 }
 
 export default function Registrants() {
-	const { students, setField, setAllFields } = useCourseEditStore();
-
-	const courseId = "67acf95247f5d8867107e881"; // Replace with useParams later
+	const { id: courseId } = useParams<{ id: string }>();
 
 	const [registrants, setRegistrants] = useState<RegistrantDisplayInfo[]>([]);
 	const [searchTerm, setSearchTerm] = useState("");
@@ -34,26 +31,96 @@ export default function Registrants() {
 	useEffect(() => {
 		const fetchRegistrants = async () => {
 			try {
-				const query = qs.stringify(
-					{ _id: { $in: students } },
-					{ arrayFormat: "brackets" }
+				// First, fetch the course data to get the students array
+				const courseRes = await apiClient.get(`/courses/${courseId}`);
+				const courseData = courseRes.data.data; // API returns course in data.data, not data.course
+
+				// If no students in the course, set empty array
+				if (!courseData?.students || courseData.students.length === 0) {
+					setRegistrants([]);
+					return;
+				}
+
+				// Use backend _id filtering for efficiency
+				const userIdsParam = courseData.students.join(",");
+				const usersRes = await apiClient.get(
+					`/users?_id=${userIdsParam}&pagination=false`
+				);
+				const registeredUsers = usersRes.data.users;
+
+				// Try to fetch progress data for registration dates and completion status
+				const progressPromises = courseData.students.map(
+					async (studentId: string) => {
+						try {
+							const progressRes = await apiClient.get(
+								`/progress/progress/${studentId}`
+							);
+							const courseProgress = progressRes.data.progresses?.find(
+								(p: any) => p.course._id === courseId || p.course === courseId
+							);
+							return {
+								userId: studentId,
+								registrationDate: courseProgress?.createdAt || null,
+								completed: courseProgress?.completed || false,
+							};
+						} catch {
+							return {
+								userId: studentId,
+								registrationDate: null,
+								completed: false,
+							};
+						}
+					}
+				);
+
+				const progressData = await Promise.all(progressPromises);
+				const progressMap = new Map(progressData.map((p) => [p.userId, p]));
+
+				// Try to fetch payment data
+				const paymentPromises = courseData.students.map(
+					async (studentId: string) => {
+						try {
+							const paymentsRes = await apiClient.get(
+								`/payments?user=${studentId}&course=${courseId}`
+							);
+							const payment = paymentsRes.data.payments?.[0];
+							return {
+								userId: studentId,
+								paid: payment?.amount ? `$${payment.amount}` : "$0.00",
+								transactionId: payment?.transactionId || "-",
+							};
+						} catch {
+							return {
+								userId: studentId,
+								paid: "$0.00",
+								transactionId: "-",
+							};
+						}
+					}
+				);
+
+				const paymentData = await Promise.all(paymentPromises);
+				const paymentMap = new Map(paymentData.map((p) => [p.userId, p]));
+
+				const formatted: RegistrantDisplayInfo[] = registeredUsers.map(
+					(user: any) => {
+						const progress = progressMap.get(user._id);
+						const payment = paymentMap.get(user._id);
+
+						return {
+							id: user._id,
+							userType: user.role?.name || user.userType || "N/A",
+							fullName: user.name || "Unknown",
+							email: user.email || "No email",
+							registrationDate: progress?.registrationDate
+								? new Date(progress.registrationDate).toLocaleDateString()
+								: "N/A",
+							completed: progress?.completed ? "Yes" : "No",
+							paid: payment?.paid || "$0.00",
+							transactionId: payment?.transactionId || "-",
+						};
+					}
 				);
-				const usersRes = await apiClient.get(`/users?${query}`);
-				const users = usersRes.data.users;
-
-				const formatted: RegistrantDisplayInfo[] = users.map((user: any) => ({
-					id: user._id,
-					userType: user.userType || "N/A",
-					fullName: user.name || "Unknown",
-					email: user.email || "No email",
-					registrationDate: "N/A",
-					completed: "N/A",
-					paid: "$?.??",
-					transactionId: "-",
-					preRegistered: "N/A",
-				}));
-
-				// TODO: fix this
 
 				setRegistrants(formatted);
 			} catch (err: any) {
@@ -64,7 +131,9 @@ export default function Registrants() {
 			}
 		};
 
-		fetchRegistrants();
+		if (courseId) {
+			fetchRegistrants();
+		}
 	}, [courseId]);
 
 	const handleDelete = (id: string) => {
diff --git a/frontend/src/pages/Admin/RegistrationPage/RegistrationPage.tsx b/frontend/src/pages/Admin/RegistrationPage/RegistrationPage.tsx
index f955b50..79f4451 100644
--- a/frontend/src/pages/Admin/RegistrationPage/RegistrationPage.tsx
+++ b/frontend/src/pages/Admin/RegistrationPage/RegistrationPage.tsx
@@ -14,6 +14,7 @@ interface Registration {
 	date: Date;
 	transactionId: string;
 	paid: number;
+	userId: string; // Add userId for better tracking
 }
 
 export default function RegistrationPage() {
@@ -70,48 +71,138 @@ export default function RegistrationPage() {
 
 	const fetchRegistrations = async () => {
 		try {
-			const response = await apiClient.get("/payments");
+			console.log("Fetching registrations from progress data...");
+			const response = await apiClient.get("/progress");
+			console.log("Progress response:", response.data);
 
-			const receivedPayments: Registration[] = [];
+			const receivedRegistrations: Registration[] = [];
 			const courseTitles = new Map<string, string>();
 			const userEmails = new Map<string, string>();
+			const userNames = new Map<string, string>();
+			const paymentData = new Map<
+				string,
+				{ transactionId: string; amount: number }
+			>();
+
+			// First, fetch payment data to get transaction info
+			try {
+				const paymentsResponse = await apiClient.get("/payments");
+				for (const payment of paymentsResponse.data) {
+					for (const courseId of payment.courses) {
+						const key = `${payment.userId}-${courseId}`;
+						paymentData.set(key, {
+							transactionId: payment.transactionId || "N/A",
+							amount: payment.amount || 0,
+						});
+					}
+				}
+			} catch (paymentError) {
+				console.error("Error fetching payment data:", paymentError);
+			}
 
-			for (const payment of response.data) {
-				let userEmail: string;
+			// Process progress data
+			for (const progress of response.data.progresses || response.data || []) {
+				console.log("Processing progress:", progress);
 
-				if (userEmails.has(payment.userId)) {
-					userEmail = userEmails.get(payment.userId)!;
-				} else {
-					const userResp = await apiClient.get(`/users/${payment.userId}`);
-					userEmail = userResp.data.email;
-					userEmails.set(payment.userId, userEmail);
+				const userId = progress.user?._id || progress.user;
+				const courseId = progress.course?._id || progress.course;
+
+				if (!userId || !courseId) {
+					console.warn(
+						"Skipping progress with missing user or course:",
+						progress
+					);
+					continue;
 				}
 
-				for (const courseId of payment.courses) {
-					let courseTitle: string;
+				// Get user info - check if already populated first
+				let userEmail: string;
+				let userName: string;
+
+				// Check if user data is already populated in progress
+				if (
+					progress.user &&
+					typeof progress.user === "object" &&
+					progress.user.email
+				) {
+					userEmail = progress.user.email;
+					userName = progress.user.name || "Unknown User";
+					console.log("Using populated user data:", {
+						email: userEmail,
+						name: userName,
+					});
+				} else if (userEmails.has(userId) && userNames.has(userId)) {
+					userEmail = userEmails.get(userId)!;
+					userName = userNames.get(userId)!;
+				} else {
+					try {
+						console.log("Fetching user:", userId);
+						const userResp = await apiClient.get(`/users/${userId}`);
+						console.log("User response:", userResp.data);
+						userEmail = userResp.data.email || "Unknown Email";
+						userName = userResp.data.name || "Unknown User";
+						userEmails.set(userId, userEmail);
+						userNames.set(userId, userName);
+					} catch (userError) {
+						console.error("Error fetching user:", userError);
+						userEmail = "Unknown Email";
+						userName = "Unknown User";
+					}
+				}
 
-					if (courseTitles.has(courseId)) {
-						courseTitle = courseTitles.get(courseId)!;
-					} else {
+				// Get course info - check if already populated first
+				let courseTitle: string;
+
+				// Check if course data is already populated in progress
+				if (
+					progress.course &&
+					typeof progress.course === "object" &&
+					progress.course.className
+				) {
+					courseTitle = progress.course.className;
+					console.log("Using populated course data:", courseTitle);
+				} else if (courseTitles.has(courseId)) {
+					courseTitle = courseTitles.get(courseId)!;
+				} else {
+					try {
+						console.log("Fetching course:", courseId);
 						const courseResp = await apiClient.get(`/courses/${courseId}`);
-						courseTitle = courseResp.data.className;
+						console.log("Course response:", courseResp.data);
+						courseTitle = courseResp.data.data.className;
 						courseTitles.set(courseId, courseTitle);
+					} catch (courseError) {
+						console.error("Error fetching course:", courseError);
+						courseTitle = "Unknown Course";
 					}
-
-					receivedPayments.push({
-						title: courseTitle,
-						user: payment.userId,
-						email: userEmail,
-						date: payment.date,
-						transactionId: payment.transactionId,
-						paid: payment.amount,
-					});
 				}
+
+				// Get payment info
+				const paymentKey = `${userId}-${courseId}`;
+				const payment = paymentData.get(paymentKey) || {
+					transactionId: "N/A",
+					amount: 0,
+				};
+
+				// Use progress creation date as registration date
+				const registrationDate = progress.createdAt
+					? new Date(progress.createdAt)
+					: new Date();
+
+				receivedRegistrations.push({
+					title: courseTitle,
+					user: userName,
+					userId: userId,
+					email: userEmail,
+					date: registrationDate,
+					transactionId: payment.transactionId,
+					paid: payment.amount,
+				});
 			}
 
-			setRegistrations(receivedPayments);
+			console.log("Final registrations:", receivedRegistrations);
+			setRegistrations(receivedRegistrations);
 		} catch (error) {
-			console.error(error);
+			console.error("Error in fetchRegistrations:", error);
 		}
 	};
 
@@ -279,7 +370,7 @@ export default function RegistrationPage() {
 								{tableHeaders.map((header, idx) => (
 									<th
 										key={idx}
-										className="border border-gray-200 first:rounded-tl-md last:rounded-tr-md text-left pl-3"
+										className="border border-gray-200 first:rounded-tl-md last:rounded-tr-md text-left px-3 py-3"
 									>
 										{header}
 									</th>
@@ -292,22 +383,25 @@ export default function RegistrationPage() {
 									key={rowIdx}
 									className={rowIdx % 2 === 0 ? "bg-white" : "bg-gray-100"}
 								>
-									<td className="border border-gray-200 text-left">
+									<td className="border border-gray-200 text-left px-3 py-2">
 										{registration.title}
 									</td>
-									<td className="border border-gray-200 text-left">
+									<td className="border border-gray-200 text-left px-3 py-2">
 										{registration.user}
 									</td>
-									<td className="border border-gray-200 text-left">
+									<td className="border border-gray-200 text-left px-3 py-2">
 										{registration.email}
 									</td>
-									<td className="border border-gray-200 text-left">
-										{registration.date.toDateString()}
+									<td className="border border-gray-200 text-left px-3 py-2">
+										{registration.date instanceof Date &&
+										!isNaN(registration.date.getTime())
+											? registration.date.toDateString()
+											: "Invalid Date"}
 									</td>
-									<td className="border border-gray-200 text-left">
+									<td className="border border-gray-200 text-left px-3 py-2">
 										{registration.transactionId}
 									</td>
-									<td className="border border-gray-200 text-left">
+									<td className="border border-gray-200 text-left px-3 py-2">
 										{registration.paid}
 									</td>
 								</tr>
diff --git a/frontend/src/pages/Admin/SpeakerPage/Speaker.tsx b/frontend/src/pages/Admin/SpeakerPage/Speaker.tsx
index 7eaa09f..34c8095 100644
--- a/frontend/src/pages/Admin/SpeakerPage/Speaker.tsx
+++ b/frontend/src/pages/Admin/SpeakerPage/Speaker.tsx
@@ -6,6 +6,7 @@ import Dropdown from "../../../components/dropdown-select";
 import SearchDropdown from "../ComponentPage/DropDownSearch";
 import SaveCourseButton from "../../../components/SaveCourseButtons";
 import adminApiClient from "../../../services/adminApiClient";
+import { useParams } from "react-router-dom";
 
 interface Speaker {
 	_id?: string;
@@ -103,23 +104,25 @@ export default function SpeakersPage() {
 	useEffect(() => {
 		if (!hasHydratedRef.current) {
 			hasHydratedRef.current = true;
-			fetchSpeakers(); // only runs after Zustand state is restored
+			fetchSpeakers();
 		}
 	}, [speakers]);
 
+	const { id } = useParams();
+
 	const fetchSpeakers = async () => {
 		try {
 			setLoading(true);
+			const response2 = await apiClient.get(`/courses/${id}`);
+			const course = response2.data.data;
+			setCourseSpeakers(course.speakers);
+
 			const response = await apiClient.get("/speakers");
 			if (Array.isArray(response.data) && response.data.length > 0) {
 				const all = response.data;
 
-				console.log(all);
+				const remaining = all.filter((s) => !course.speakers.includes(s._id));
 
-				const matched = all.filter((s) => speakers.includes(s._id));
-				const remaining = all.filter((s) => !speakers.includes(s._id));
-
-				setCourseSpeakers(matched);
 				setAllSpeakers(remaining);
 			} else {
 				console.warn("No speakers found or data is not an array");
@@ -227,10 +230,24 @@ export default function SpeakersPage() {
 	const handleRemoveSpeaker = async (speakerId: string | undefined) => {
 		if (!speakerId) return;
 
-		const updatedSpeakers = speakers.filter((id) => id !== speakerId);
-		setField("speakers", updatedSpeakers);
+		console.log("speakers", speakers);
 
+		const updatedSpeakers = speakers.filter((s) => s !== speakerId);
+		console.log("updatedSpeakesr", updatedSpeakers);
+		setField("speakers", updatedSpeakers);
 		setCourseSpeakers((prev) => prev.filter((s) => s._id !== speakerId));
+
+		console.log("deleted: ", speakers);
+
+		try {
+			const speakerIds = updatedSpeakers.map((s) => s);
+
+			await apiClient.put(`/courses/${id}`, {
+				speakers: speakerIds,
+			});
+		} catch (err) {
+			console.error("Failed to update course speakers in backend:", err);
+		}
 	};
 
 	const handleUpdateSpeaker = async () => {
@@ -396,17 +413,29 @@ export default function SpeakersPage() {
 							selected={selectedSpeakerNames}
 							setSelected={setSelectedSpeakerNames}
 							placeholder="Search for existing speakers"
-							onSelect={(selectedName) => {
+							onSelect={async (selectedName) => {
 								const matched = allSpeakers.find(
 									(s) => s.name === selectedName
 								);
 								if (matched && matched._id) {
-									setCurrentSpeaker(matched);
-									setField("speakers", [...speakers, matched._id]);
+									// Update Zustand state
+									const updatedSpeakerIds = [...speakers, matched._id];
+									setField("speakers", updatedSpeakerIds);
+
+									// Optimistically update UI
 									setAllSpeakers((prev) =>
 										prev.filter((s) => s._id !== matched._id)
 									);
 									setCourseSpeakers((prev) => [...prev, matched]);
+
+									// ✅ Persist to backend
+									try {
+										await apiClient.put(`/courses/${id}`, {
+											speakers: updatedSpeakerIds,
+										});
+									} catch (err) {
+										console.error("Failed to persist speaker to course:", err);
+									}
 								}
 								handleExit();
 							}}
@@ -639,7 +668,7 @@ export default function SpeakersPage() {
 			{/* Add Speaker Modal */}
 			{showAddModal && <SpeakerFormModal isAdd={true} />}
 
-			<SaveCourseButton prevLink="components" nextLink={"handouts"} />
+			<SaveCourseButton prevLink="" nextLink="" />
 		</div>
 	);
 }
diff --git a/frontend/src/pages/Admin/SurveyPage/Survey.tsx b/frontend/src/pages/Admin/SurveyPage/Survey.tsx
index 8acacf7..b78d5df 100644
--- a/frontend/src/pages/Admin/SurveyPage/Survey.tsx
+++ b/frontend/src/pages/Admin/SurveyPage/Survey.tsx
@@ -2,8 +2,12 @@ import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { List, Trash2, X } from "lucide-react";
 import apiClient from "../../../services/apiClient";
+import { getCleanCourseData } from "../../../store/useCourseEditStore";
 
 const Survey = () => {
+	const course = getCleanCourseData();
+
+	const navigate = useNavigate();
 	const [questions, setQuestions] = useState([
 		{
 			_id: "",
@@ -26,7 +30,7 @@ const Survey = () => {
 			try {
 				const response = await apiClient.get("/surveys"); // Fetch the existing survey
 				const surveyData = response.data;
-				console.log(response.data);
+				console.log("survey: ", surveyData);
 
 				if (surveyData) {
 					setSurveyId(surveyData._id);
@@ -143,10 +147,11 @@ const Survey = () => {
 	};
 
 	const handleLeave = () => {
-		// TODO: Implement exit logic here (e.g., redirecting the user or closing the form)
-		setIsModalOpen(false);
+		// setIsModalOpen(false);
 		// Console log that the user is leaving
 		// console.log("User left the page.");
+
+		navigate(`/admin/product/edit/${course._id}/components`);
 	};
 
 	const handleSaveSurvey = async () => {
@@ -179,6 +184,8 @@ const Survey = () => {
 				})
 			);
 
+			console.log(createdQuestions);
+
 			// Create survey data to send to backend
 			const surveyData = {
 				questions: createdQuestions,
@@ -186,16 +193,14 @@ const Survey = () => {
 
 			if (surveyId) {
 				// If surveyId exists, update the existing survey
-				const response = await apiClient.put(
-					`/surveys/${surveyId}`,
-					surveyData
-				);
+				const response = await apiClient.put(`/surveys`, surveyData);
+				console.log("data from survey after saving question: ", response.data);
 				alert("Survey saved successfully!");
 				setHasUnsavedChanges(false);
 				setSurveyId(response.data._id);
 			} else {
 				// Create a new survey if there is no surveyId
-				//response = await apiClient.post("http://localhost:5001/api/surveys", surveyData);
+				const response = await apiClient.post("/api/surveys", surveyData);
 				console.error("No surveyId");
 			}
 		} catch (err) {
@@ -353,7 +358,7 @@ const Survey = () => {
 
 					{/* Exit Button */}
 					<button
-						onClick={() => setIsModalOpen(true)}
+						onClick={() => handleLeave()}
 						className="w-[200px] text-[#8757A3] border border-[#8757A3] py-2 px-4 rounded-md hover:bg-[#8757A3] hover:text-white focus:ring-2 focus:ring-[#8757A3]"
 					>
 						Exit
diff --git a/frontend/src/pages/Admin/SurveySummaryPage/DetailedSurveyResponse.tsx b/frontend/src/pages/Admin/SurveySummaryPage/DetailedSurveyResponse.tsx
index 525decc..f902c5b 100644
--- a/frontend/src/pages/Admin/SurveySummaryPage/DetailedSurveyResponse.tsx
+++ b/frontend/src/pages/Admin/SurveySummaryPage/DetailedSurveyResponse.tsx
@@ -1,232 +1,288 @@
-import React, { useState, useEffect } from "react"; 
+import React, { useState, useEffect } from "react";
 import apiClient from "../../../services/apiClient";
 import { QuestionType } from "../../../shared/types/question";
 import { X } from "lucide-react";
 import PercentBar from "./PercentBar";
 
 interface DetailedSurveyResponseProps {
-  surveyQuestionIDs: string[]; 
-  toggleModal: React.Dispatch<React.SetStateAction<boolean>>; 
+	surveyQuestionIDs: string[];
+	toggleModal: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 interface SurveyQuestion {
-  question: string; 
-  isMCQ: boolean; 
-  numResponses: number; 
-  responseOptions: string[]; 
-  responses: string[]; 
-  responseBreakdown: number[]; 
+	question: string;
+	isMCQ: boolean;
+	numResponses: number;
+	responseOptions: string[];
+	responses: string[];
+	responseBreakdown: number[];
 }
 
 interface SurveyResponse {
-  userName: string; 
-  userEmail: string; 
-  date: Date; 
-  answers: string[]; 
+	userName: string;
+	userEmail: string;
+	date: Date;
+	answers: string[];
 }
 
-export default function DetailedSurveyResponse({ surveyQuestionIDs, toggleModal }: DetailedSurveyResponseProps) {
-
-  const [surveyQuestions, setSurveyQuestions] = useState<SurveyQuestion[]>([]); 
-  const [surveyResponses, setSurveyResponses] = useState<SurveyResponse[]>([]); 
-
-  const fetchSurveyQuestions = async () => {
-    try {
-      const receivedSurveyQuestions: SurveyQuestion[] = []; 
-      const receivedResponses: SurveyResponse[] = [];
-
-      // Fetch all questions and their responses
-      for (const surveyQuestionID of surveyQuestionIDs) {
-        const response = await apiClient.get(`/questions/${surveyQuestionID}`); 
-        const rawQuestionData: QuestionType = response.data; 
-        
-        const questionData: SurveyQuestion = {
-          question: rawQuestionData.question,
-          isMCQ: rawQuestionData.isMCQ, 
-          responseOptions: rawQuestionData.isMCQ ? rawQuestionData.answers || [] : [], 
-          numResponses: 0,  
-          responses: [], 
-          responseBreakdown: [], 
-        }
-
-        const questionIdResponse = await apiClient.get(`/questionResponses/${surveyQuestionID}`); 
-        const responses = questionIdResponse.data;
-        
-        // Update question data
-        questionData.numResponses = responses.length; 
-        questionData.responses = responses.map((response: any) => response.answer);
-        
-        // Calculate response breakdown for MCQ questions
-        if (questionData.isMCQ) {
-          questionData.responseBreakdown = questionData.responseOptions.map(option => 
-            questionData.responses.filter(response => response === option).length
-          );
-        }
-
-        receivedSurveyQuestions.push(questionData);
-
-        // Process responses
-        responses.forEach((response: any) => {
-          const existingResponse = receivedResponses.find(r => r.userEmail === response.userEmail);
-          if (existingResponse) {
-            existingResponse.answers.push(response.answer);
-          } else {
-            receivedResponses.push({
-              userName: response.userName || 'Anonymous',
-              userEmail: response.userEmail,
-              date: new Date(response.createdAt),
-              answers: [response.answer]
-            });
-          }
-        });
-      }
-
-      setSurveyQuestions(receivedSurveyQuestions);
-      setSurveyResponses(receivedResponses);
-    } catch (error) {
-      console.error('Error fetching survey data:', error); 
-    }
-  }
-
-  const handleDownloadCSV = () => {
-    if (!surveyQuestions.length || !surveyResponses.length) {
-      console.warn('No survey data available to download');
-      return;
-    }
-
-    // Create headers
-    const headers = [
-      'Submitted',
-      'Name',
-      'Registered User Email',
-      ...surveyQuestions.map((q, idx) => `${idx + 1}. ${q.question}`)
-    ];
-
-    // Create rows
-    const rows = surveyResponses.map(response => [
-      response.date.toDateString(),
-      response.userName,
-      response.userEmail,
-      ...response.answers
-    ]);
-
-    // Combine headers and rows
-    const csvContent = [
-      headers.join(','),
-      ...rows.map(row => row.map(cell => `"${cell}"`).join(','))
-    ].join('\n');
-
-    // Create and trigger download
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const link = document.createElement('a');
-    const url = URL.createObjectURL(blob);
-    link.setAttribute('href', url);
-    link.setAttribute('download', 'survey_responses.csv');
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-
-  useEffect(() => {
-    fetchSurveyQuestions(); 
-  }, [])
-
-  return (
-    <div className="absolute inset-0 z-50 bg-black/50 flex items-center justify-center">
-      <div className="bg-white flex flex-col w-11/12 h-5/6 shadow-md border rounded-md p-3">
-        <div className="flex w-full justify-between my-2">
-          <h1 className="text-2xl font-bold">
-            Survey Responses
-          </h1>
-          <X className="border rounded-md border-gray-400 mx-2 cursor-pointer" onClick={() => toggleModal(false)}></X>
-        </div>
-        
-        <div className="flex justify-between">
-          <div className="w-4/12 ml-2">
-            <div className="flex justify-end">
-              <button 
-                className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90 w-2/5"
-                style={{ backgroundColor: '#8757a3' }}
-                // onClick={} //TODO: implement download as PDF
-              >
-                Download as PDF
-              </button>
-            </div>
-            <h2 className="text-xl font-bold">Questions</h2>
-            <div className="flex flex-col">
-              {surveyQuestions.map((question, index) => (
-                <div key={index} className="flex space-x-2 my-2">
-                  <div>{index+1}</div>
-                  <div className="flex flex-col w-full">
-                    <div className="font-bold">{question.question}</div>
-                    <div className="text-xs text-gray-400">{question.isMCQ ? "Multiple Choice" : "Free Response"}</div>
-                    {question.isMCQ ? 
-                      <div className="flex flex-col mt-2">
-                        {question.responseOptions.map((option, opIdx) => (
-                          <div className="text-sm" key={opIdx}>
-                            <div>{option}</div>
-                            <PercentBar percentage={question.responseBreakdown[opIdx]} total={question.numResponses}></PercentBar>
-                          </div>
-                        ))}
-                      </div>
-                      : 
-                      <div className="mt-2">
-                        <div className="text-sm">Responses</div>
-                        <PercentBar percentage={100} total={question.numResponses}></PercentBar>
-                      </div>
-                    }
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex flex-col w-7/12 mr-2 overflow-x-auto overflow-y-auto">
-            <div className="flex justify-end space-x-3">
-              <button 
-                className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90"
-                style={{ backgroundColor: '#8757a3' }}
-                onClick={handleDownloadCSV}
-              >
-                Download as CSV
-              </button>
-              <button 
-                className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90"
-                style={{ backgroundColor: '#8757a3' }}
-                // onClick={} //TODO: implement download as PDF
-              >
-                Download as PDF
-              </button>
-            </div>
-            <h2 className="text-xl font-bold">Individual Responses</h2>
-            <table className="border border-gray-300 rounded-lg overflow-hidden mt-3">
-              <thead>
-                <tr className="text-left text-sm align-bottom bg-gray-200">
-                  <th className="border border-gray-300 p-2 pb-1">Submitted</th>
-                  <th className="border border-gray-300 p-2 pb-1">Name</th>
-                  <th className="border border-gray-300 p-2 pb-1">Registered User Email</th>
-                  {surveyQuestions.map((question, idx) => (
-                    <th key={idx} className="border border-gray-300 p-2 pb-1">{idx+1}. {question.question}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody className="text-sm">
-                {surveyResponses.map((response, rowIdx) => (
-                  <tr key={rowIdx} className={rowIdx % 2 === 0 ? "bg-white" : "bg-gray-200"}>
-                    <td className="border border-gray-300 p-2 pb-1">{response.date.toDateString()}</td>
-                    <td className="border border-gray-300 p-2 pb-1">{response.userName}</td>
-                    <td className="border border-gray-300 p-2 pb-1">{response.userEmail}</td>
-                    {response.answers.map((answer) => (
-                      <td className="border border-gray-300 p-2 pb-1">{answer}</td>
-                    ))}
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    
-  )
-}
\ No newline at end of file
+export default function DetailedSurveyResponse({
+	surveyQuestionIDs,
+	toggleModal,
+}: DetailedSurveyResponseProps) {
+	const [surveyQuestions, setSurveyQuestions] = useState<SurveyQuestion[]>([]);
+	const [surveyResponses, setSurveyResponses] = useState<SurveyResponse[]>([]);
+
+	const fetchSurveyQuestions = async () => {
+		try {
+			console.log("Fetching survey questions for IDs:", surveyQuestionIDs);
+			const receivedSurveyQuestions: SurveyQuestion[] = [];
+			const receivedResponses: SurveyResponse[] = [];
+
+			// Fetch all questions and their responses
+			for (const surveyQuestionID of surveyQuestionIDs) {
+				console.log("Fetching question:", surveyQuestionID);
+
+				// Handle case where surveyQuestionID might be an object or a string
+				const questionId =
+					typeof surveyQuestionID === "string"
+						? surveyQuestionID
+						: (surveyQuestionID as any)._id;
+				console.log("Using question ID:", questionId);
+
+				// Use query parameter to get specific question since there's no GET /:id route
+				const response = await apiClient.get(`/questions?_id=${questionId}`);
+				const questionsArray = response.data;
+
+				if (!questionsArray || questionsArray.length === 0) {
+					console.warn(`Question with ID ${questionId} not found`);
+					continue; // Skip this question if not found
+				}
+
+				const rawQuestionData: QuestionType = questionsArray[0]; // Get first (and should be only) result
+				console.log("Question data:", rawQuestionData);
+
+				const questionData: SurveyQuestion = {
+					question: rawQuestionData.question,
+					isMCQ: rawQuestionData.isMCQ,
+					responseOptions: rawQuestionData.isMCQ
+						? rawQuestionData.answers || []
+						: [],
+					numResponses: 0,
+					responses: [],
+					responseBreakdown: [],
+				};
+
+				console.log("Fetching question responses for questionId:", questionId);
+				const questionIdResponse = await apiClient.get(
+					`/questionResponses?questionId=${questionId}`
+				);
+				const responses = questionIdResponse.data;
+				console.log("Question responses:", responses);
+
+				// Update question data
+				questionData.numResponses = responses.length;
+				questionData.responses = responses.map(
+					(response: any) => response.answer
+				);
+
+				// Calculate response breakdown for MCQ questions
+				if (questionData.isMCQ) {
+					questionData.responseBreakdown = questionData.responseOptions.map(
+						(option) =>
+							questionData.responses.filter((response) => response === option)
+								.length
+					);
+				}
+
+				receivedSurveyQuestions.push(questionData);
+
+				// Process responses
+				responses.forEach((response: any) => {
+					const existingResponse = receivedResponses.find(
+						(r) => r.userEmail === response.userEmail
+					);
+					if (existingResponse) {
+						existingResponse.answers.push(response.answer);
+					} else {
+						receivedResponses.push({
+							userName: response.userName || "Anonymous",
+							userEmail: response.userEmail,
+							date: new Date(response.createdAt),
+							answers: [response.answer],
+						});
+					}
+				});
+			}
+
+			setSurveyQuestions(receivedSurveyQuestions);
+			setSurveyResponses(receivedResponses);
+		} catch (error) {
+			console.error("Error fetching survey data:", error);
+		}
+	};
+
+	const handleDownloadCSV = () => {
+		if (!surveyQuestions.length || !surveyResponses.length) {
+			console.warn("No survey data available to download");
+			return;
+		}
+
+		// Create headers
+		const headers = [
+			"Submitted",
+			"Name",
+			"Registered User Email",
+			...surveyQuestions.map((q, idx) => `${idx + 1}. ${q.question}`),
+		];
+
+		// Create rows
+		const rows = surveyResponses.map((response) => [
+			response.date.toDateString(),
+			response.userName,
+			response.userEmail,
+			...response.answers,
+		]);
+
+		// Combine headers and rows
+		const csvContent = [
+			headers.join(","),
+			...rows.map((row) => row.map((cell) => `"${cell}"`).join(",")),
+		].join("\n");
+
+		// Create and trigger download
+		const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+		const link = document.createElement("a");
+		const url = URL.createObjectURL(blob);
+		link.setAttribute("href", url);
+		link.setAttribute("download", "survey_responses.csv");
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	};
+
+	useEffect(() => {
+		fetchSurveyQuestions();
+	}, []);
+
+	return (
+		<div className="absolute inset-0 z-50 bg-black/50 flex items-center justify-center">
+			<div className="bg-white flex flex-col w-11/12 h-5/6 shadow-md border rounded-md p-3">
+				<div className="flex w-full justify-between my-2">
+					<h1 className="text-2xl font-bold">Survey Responses</h1>
+					<X
+						className="border rounded-md border-gray-400 mx-2 cursor-pointer"
+						onClick={() => toggleModal(false)}
+					></X>
+				</div>
+
+				<div className="flex justify-between">
+					<div className="w-4/12 ml-2">
+						<div className="flex justify-end">
+							<button
+								className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90 w-2/5"
+								style={{ backgroundColor: "#8757a3" }}
+								// onClick={} //TODO: implement download as PDF
+							>
+								Download as PDF
+							</button>
+						</div>
+						<h2 className="text-xl font-bold">Questions</h2>
+						<div className="flex flex-col">
+							{surveyQuestions.map((question, index) => (
+								<div key={index} className="flex space-x-2 my-2">
+									<div>{index + 1}</div>
+									<div className="flex flex-col w-full">
+										<div className="font-bold">{question.question}</div>
+										<div className="text-xs text-gray-400">
+											{question.isMCQ ? "Multiple Choice" : "Free Response"}
+										</div>
+										{question.isMCQ ? (
+											<div className="flex flex-col mt-2">
+												{question.responseOptions.map((option, opIdx) => (
+													<div className="text-sm" key={opIdx}>
+														<div>{option}</div>
+														<PercentBar
+															percentage={question.responseBreakdown[opIdx]}
+															total={question.numResponses}
+														></PercentBar>
+													</div>
+												))}
+											</div>
+										) : (
+											<div className="mt-2">
+												<div className="text-sm">Responses</div>
+												<PercentBar
+													percentage={100}
+													total={question.numResponses}
+												></PercentBar>
+											</div>
+										)}
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+
+					<div className="flex flex-col w-7/12 mr-2 overflow-x-auto overflow-y-auto">
+						<div className="flex justify-end space-x-3">
+							<button
+								className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90"
+								style={{ backgroundColor: "#8757a3" }}
+								onClick={handleDownloadCSV}
+							>
+								Download as CSV
+							</button>
+							<button
+								className="text-white text-sm px-6 py-2.5 rounded-lg font-medium hover:opacity-90"
+								style={{ backgroundColor: "#8757a3" }}
+								// onClick={} //TODO: implement download as PDF
+							>
+								Download as PDF
+							</button>
+						</div>
+						<h2 className="text-xl font-bold">Individual Responses</h2>
+						<table className="border border-gray-300 rounded-lg overflow-hidden mt-3">
+							<thead>
+								<tr className="text-left text-sm align-bottom bg-gray-200">
+									<th className="border border-gray-300 p-2 pb-1">Submitted</th>
+									<th className="border border-gray-300 p-2 pb-1">Name</th>
+									<th className="border border-gray-300 p-2 pb-1">
+										Registered User Email
+									</th>
+									{surveyQuestions.map((question, idx) => (
+										<th key={idx} className="border border-gray-300 p-2 pb-1">
+											{idx + 1}. {question.question}
+										</th>
+									))}
+								</tr>
+							</thead>
+							<tbody className="text-sm">
+								{surveyResponses.map((response, rowIdx) => (
+									<tr
+										key={rowIdx}
+										className={rowIdx % 2 === 0 ? "bg-white" : "bg-gray-200"}
+									>
+										<td className="border border-gray-300 p-2 pb-1">
+											{response.date.toDateString()}
+										</td>
+										<td className="border border-gray-300 p-2 pb-1">
+											{response.userName}
+										</td>
+										<td className="border border-gray-300 p-2 pb-1">
+											{response.userEmail}
+										</td>
+										{response.answers.map((answer) => (
+											<td className="border border-gray-300 p-2 pb-1">
+												{answer}
+											</td>
+										))}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/pages/Admin/SurveySummaryPage/SurveySummary.tsx b/frontend/src/pages/Admin/SurveySummaryPage/SurveySummary.tsx
index eb2e140..918da5b 100644
--- a/frontend/src/pages/Admin/SurveySummaryPage/SurveySummary.tsx
+++ b/frontend/src/pages/Admin/SurveySummaryPage/SurveySummary.tsx
@@ -43,29 +43,36 @@ export default function SurveySummary() {
 
 	const fetchSurveys = async () => {
 		try {
+			console.log("Fetching surveys...");
 			const response = await apiClient.get("/surveys");
 			const survey = response.data;
+			console.log("Survey data:", survey);
 
 			const receivedSurveys: SurveyElem[] = [];
 
-			const courseResponse = await apiClient.get(`/courses/${survey.courseId}`);
-			const courseTitle = courseResponse.data.className;
+			// Get all survey responses since they're not tied to a specific survey
+			console.log("Fetching all survey responses...");
+			const surveyResponsesResponse = await apiClient.get("/surveyResponses");
+			console.log("Survey responses data:", surveyResponsesResponse.data);
 
-			const surveyId = survey.surveyId;
-			const surveyResponses = await apiClient.get(
-				`/surveyResponses/${surveyId}`
-			);
+			const surveyResponses =
+				surveyResponsesResponse.data.data || surveyResponsesResponse.data;
 
 			const surveyData: SurveyElem = {
-				courseTitle: courseTitle,
-				numResponses: surveyResponses.data.length,
-				questionIds: survey.questionIds,
+				courseTitle: "General Survey", // Default title since no course relationship exists
+				numResponses: Array.isArray(surveyResponses)
+					? surveyResponses.length
+					: 0,
+				questionIds: Array.isArray(survey.questions)
+					? survey.questions.map((q: any) => q._id || q)
+					: [],
 			};
 			receivedSurveys.push(surveyData);
 
+			console.log("Final survey data:", receivedSurveys);
 			setSurveys(receivedSurveys);
 		} catch (error) {
-			console.error(error);
+			console.error("Error fetching surveys:", error);
 		}
 	};
 
@@ -80,6 +87,8 @@ export default function SurveySummary() {
 
 	const handleModalOpen = (surveyIdx: number) => {
 		const selectedSurvey = displayedSurveys[surveyIdx];
+		console.log("Opening modal for survey:", selectedSurvey);
+		console.log("Question IDs:", selectedSurvey.questionIds);
 		setModalSurveyIds(selectedSurvey.questionIds);
 		setModalOpen(true);
 	};
@@ -102,7 +111,7 @@ export default function SurveySummary() {
 				<div className="bg-white border rounded-lg p-6">
 					<div className="flex justify-between">
 						<div className="mb-6">
-							<h1 className="text-2xl font-bold">Registration Report</h1>
+							<h1 className="text-2xl font-bold">Survey Results</h1>
 						</div>
 						<Expand className="w-6 border rounded-lg p-1 cursor-pointer"></Expand>
 					</div>
@@ -136,10 +145,10 @@ export default function SurveySummary() {
 									<td className="border border-gray-200 text-left w-9/12 pl-3">
 										{survey.courseTitle}
 									</td>
-									<td className="border border-gray-200 text-left w-2/12 text-center">
+									<td className="border border-gray-200 w-2/12 text-center">
 										{survey.numResponses}
 									</td>
-									<td className="border border-gray-200 text-left w-1/12 justify-items-center">
+									<td className="border border-gray-200 w-1/12 text-center">
 										<Search
 											className="w-6 border rounded-lg p-1 cursor-pointer"
 											onClick={() => handleModalOpen(rowIdx)}
diff --git a/frontend/src/pages/Admin/UserManagementPage/Users.tsx b/frontend/src/pages/Admin/UserManagementPage/Users.tsx
index e6e432d..ca2892c 100644
--- a/frontend/src/pages/Admin/UserManagementPage/Users.tsx
+++ b/frontend/src/pages/Admin/UserManagementPage/Users.tsx
@@ -171,10 +171,13 @@ const UserManagementPage: React.FC = () => {
 	};
 
 	const formatUserForBackend = (userData: UserForm) => {
+		console.log("User form data:", userData); // Debug log
+		console.log("UserType data:", userData.userType); // Debug log
+
 		return {
 			name: `${userData.firstName} ${userData.lastName}`,
 			email: userData.email,
-			userType: userData.userType,
+			role: userData.userType?._id, // Send as 'role' with just the ObjectId
 			company: userData.company,
 			address1: userData.addressLine,
 			city: userData.city,
@@ -192,9 +195,14 @@ const UserManagementPage: React.FC = () => {
 
 		try {
 			const backendUserData = formatUserForBackend(userForm);
+			console.log("Sending user data to backend:", backendUserData); // Debug log
 
 			if (editingUserId) {
-				await apiClient.put(`/users/${editingUserId}`, backendUserData);
+				const response = await apiClient.put(
+					`/users/${editingUserId}`,
+					backendUserData
+				);
+				console.log("Backend response:", response.data); // Debug log
 
 				setUsers((prevUsers) =>
 					prevUsers.map((user) =>
@@ -274,6 +282,7 @@ const UserManagementPage: React.FC = () => {
 			language: "English",
 			certification: "",
 		});
+		setUserType(null); // Also reset the userType state
 	};
 
 	const handleEditUser = (user: User) => {
@@ -292,6 +301,7 @@ const UserManagementPage: React.FC = () => {
 			language: user.language || "English",
 			certification: user.certification || "",
 		});
+		setUserType(user.userType); // Sync the userType state with the form
 		setEditingUserId(user._id || null);
 		setIsUserModalOpen(true);
 	};
@@ -457,11 +467,9 @@ const UserManagementPage: React.FC = () => {
 
 						<button
 							onClick={() => {
-								resetForm();
-								setEditingUserId(null);
-								setIsUserModalOpen(true);
+								alert("This feature is still under development");
 							}}
-							className="px-4 py-1.5 bg-[#7b499a] text-white rounded-md hover:bg-[#6a3e85] transition-colors flex items-center gap-2"
+							className="px-4 py-1.5 bg-gray-400 text-white rounded-md hover:bg-gray-500 transition-colors flex items-center gap-2 cursor-not-allowed"
 						>
 							<span>New User</span>
 						</button>
@@ -576,16 +584,13 @@ const UserManagementPage: React.FC = () => {
 													</button>
 												</Tooltip>
 												<Tooltip text="Login">
-													<button className="text-gray-600 hover:text-gray-900">
-														<FiEye className="w-5 h-5" />
-													</button>
-												</Tooltip>
-												<Tooltip text="Voice Products">
 													<button
-														className="text-gray-600 hover:text-gray-900"
-														onClick={() => openSpeakerModal(user)}
+														className="text-gray-400 hover:text-gray-500 cursor-not-allowed"
+														onClick={() =>
+															alert("This feature is still under development")
+														}
 													>
-														<FiMic className="w-5 h-5" />
+														<FiEye className="w-5 h-5" />
 													</button>
 												</Tooltip>
 												<Tooltip text="Delete">
@@ -863,7 +868,10 @@ const UserManagementPage: React.FC = () => {
 									getOptionLabel={(ut) => ut.name}
 									getOptionValue={(ut) => ut._id}
 									value={userType}
-									onChange={(ut) => setUserType(ut)}
+									onChange={(ut) => {
+										setUserType(ut);
+										setUserForm((prev) => ({ ...prev, userType: ut }));
+									}}
 									placeholder="Choose User Type"
 									styles={{
 										control: (provided, state) => ({
diff --git a/frontend/src/pages/Admin/UserTypesPage/UserTypesPage.tsx b/frontend/src/pages/Admin/UserTypesPage/UserTypesPage.tsx
index 8f60261..ff16be3 100644
--- a/frontend/src/pages/Admin/UserTypesPage/UserTypesPage.tsx
+++ b/frontend/src/pages/Admin/UserTypesPage/UserTypesPage.tsx
@@ -135,9 +135,20 @@ export default function UserTypesPage() {
 									</td>
 									{/* <td className="p-3">{ut.userCount}</td> */}
 									<td className="p-3 flex gap-3">
-										{ut.name === "Foster Parent (Colorado)" ||
-										ut.name === "Staff" ? (
+										{ut.name === "Staff" ? (
 											<></>
+										) : ut.name === "Foster Parent (Colorado)" ? (
+											<div className="flex gap-3">
+												<Pencil
+													className="w-4 h-4 cursor-pointer text-gray-600 hover:text-blue-600"
+													onClick={() => {
+														setSelectedType(ut);
+														setNewName(ut.name);
+														setNewCost(String(ut.cost));
+														setShowEdit(true);
+													}}
+												/>
+											</div>
 										) : (
 											<div className="flex gap-3">
 												<Pencil
@@ -233,10 +244,15 @@ export default function UserTypesPage() {
 							Type Name
 							<input
 								type="text"
-								className="w-full border p-2 mb-4 mt-1"
+								className={`w-full border p-2 mb-4 mt-1 ${
+									selectedType?.name === "Foster Parent (Colorado)"
+										? "bg-gray-100 cursor-not-allowed"
+										: ""
+								}`}
 								value={newName}
 								onChange={(e) => setNewName(e.target.value)}
 								placeholder="Type"
+								disabled={selectedType?.name === "Foster Parent (Colorado)"}
 							/>
 						</label>
 						<label>
diff --git a/frontend/src/pages/Admin/WorkshopCreation/WorkshopCreation.tsx b/frontend/src/pages/Admin/WorkshopCreation/WorkshopCreation.tsx
index e52e784..d82c720 100644
--- a/frontend/src/pages/Admin/WorkshopCreation/WorkshopCreation.tsx
+++ b/frontend/src/pages/Admin/WorkshopCreation/WorkshopCreation.tsx
@@ -13,6 +13,7 @@ import {
 	getCleanCourseData,
 	useCourseEditStore,
 } from "../../../store/useCourseEditStore";
+import { useNavigate } from "react-router-dom";
 
 export default function WorkshopCreation() {
 	const [webinarData, setWebinarData] = useState({
@@ -48,6 +49,8 @@ export default function WorkshopCreation() {
 
 	const course = getCleanCourseData();
 
+	const navigate = useNavigate();
+
 	function getInitialType() {
 		if (course.productType === "Virtual Training - On Demand") {
 			return "on demand";
@@ -320,10 +323,16 @@ export default function WorkshopCreation() {
 						/>
 					)}
 				</div>
-				<SaveCourseButton
-					prevLink="pricing"
-					nextLink="speakers"
-				></SaveCourseButton>
+				<div className="flex justify-end">
+					<button
+						className="px-14 py-2 bg-purple2 text-white rounded-md cursor-pointer"
+						onClick={() => {
+							navigate(`/admin/product/edit/${course._id}/components`);
+						}}
+					>
+						Back
+					</button>
+				</div>
 			</form>
 
 			{/* New Meeting Modal */}
diff --git a/frontend/src/pages/Catalog/Catalog.tsx b/frontend/src/pages/Catalog/Catalog.tsx
index 822a7e9..7ce085d 100644
--- a/frontend/src/pages/Catalog/Catalog.tsx
+++ b/frontend/src/pages/Catalog/Catalog.tsx
@@ -12,8 +12,12 @@ import {
 
 interface CatalogProps {
 	setCartItemCount: Dispatch<SetStateAction<number>>;
+	isLoggedIn: boolean;
 }
-export default function Catalog({ setCartItemCount }: CatalogProps) {
+export default function Catalog({
+	setCartItemCount,
+	isLoggedIn,
+}: CatalogProps) {
 	const [courses, setCourses] = useState<Course[]>([]);
 	const location = useLocation();
 	const [filteredCourses, setFilteredCourses] = useState<Course[]>([]);
@@ -34,40 +38,122 @@ export default function Catalog({ setCartItemCount }: CatalogProps) {
 			try {
 				setLoading(true);
 
-				const user = JSON.parse(localStorage.getItem("user") || "{}");
-				const userId = user._id;
-
-				// Get all open courses
+				// Get all open courses (not drafts) where registration is currently open
 				const courseResponse = await apiClient.get("/courses");
+				const now = new Date();
+				console.log("Current time:", now);
+
 				const openCourses: Course[] = courseResponse.data.data.filter(
-					(course: Course) =>
-						new Date(course.regStart).getTime() < new Date().getTime()
-				);
+					(course: Course) => {
+						try {
+							const regStart = new Date(course.regStart);
+							const regEnd = course.regEnd ? new Date(course.regEnd) : null;
 
-				// Get user's progresses (i.e. registered courses)
-				const progressResponse = await apiClient.get(
-					`/progress/progress/${userId}`
-				);
-				const registeredCourseIds = new Set(
-					progressResponse.data.progresses.map((p: any) => p.course._id)
-				);
+							// Check for invalid dates
+							if (isNaN(regStart.getTime())) {
+								console.warn(
+									`Invalid regStart for course ${course.className}:`,
+									course.regStart
+								);
+								return false;
+							}
+
+							if (regEnd && isNaN(regEnd.getTime())) {
+								console.warn(
+									`Invalid regEnd for course ${course.className}:`,
+									course.regEnd
+								);
+								return false;
+							}
+
+							// Registration must have started
+							const registrationStarted = regStart.getTime() <= now.getTime();
 
-				// Filter out courses the user is already registered for
-				const unregisteredCourses = openCourses.filter(
-					(course) => !registeredCourseIds.has(course._id)
+							// Registration must not have ended (or no end date set)
+							const registrationNotEnded =
+								!regEnd || regEnd.getTime() >= now.getTime();
+
+							const isVisible =
+								registrationStarted && registrationNotEnded && !course.draft;
+
+							console.log(`Course "${course.className}":`, {
+								regStart: regStart,
+								regEnd: regEnd,
+								registrationStarted,
+								registrationNotEnded,
+								isDraft: course.draft,
+								isVisible,
+							});
+
+							return isVisible;
+						} catch (error) {
+							console.error(
+								`Error processing course ${course.className}:`,
+								error
+							);
+							return false;
+						}
+					}
 				);
 
-				setCourses(unregisteredCourses);
-				setFilteredCourses(unregisteredCourses);
+				if (isLoggedIn) {
+					// Only fetch user progress and filter if user is logged in
+					const user = JSON.parse(localStorage.getItem("user") || "{}");
+					const userId = user._id;
+
+					if (userId) {
+						// Get user's progresses (i.e. registered courses)
+						const progressResponse = await apiClient.get(
+							`/progress/progress/${userId}`
+						);
+						// Filter out courses the user has ANY progress for (both in-progress and completed)
+						const userCourseIds = new Set(
+							progressResponse.data.progresses
+								.filter((p: any) => p.course !== null) // Filter out null courses
+								.map((p: any) => p.course._id)
+						);
+
+						// Filter out courses the user is already registered for OR has completed
+						const availableCourses = openCourses.filter(
+							(course) => !userCourseIds.has(course._id)
+						);
+
+						setCourses(availableCourses);
+						setFilteredCourses(availableCourses);
+					} else {
+						// If no userId found but logged in, show all courses
+						setCourses(openCourses);
+						setFilteredCourses(openCourses);
+					}
+				} else {
+					// If not logged in, show all available courses
+					setCourses(openCourses);
+					setFilteredCourses(openCourses);
+				}
 			} catch (error) {
 				console.error("Error loading catalog:", error);
+				// Fallback to showing all courses if there's an error
+				try {
+					const courseResponse = await apiClient.get("/courses");
+					const openCourses: Course[] = courseResponse.data.data.filter(
+						(course: Course) =>
+							new Date(course.regStart).getTime() < new Date().getTime() &&
+							!course.draft
+					);
+					setCourses(openCourses);
+					setFilteredCourses(openCourses);
+				} catch (fallbackError) {
+					console.error("Fallback course loading failed:", fallbackError);
+					setCourses([]);
+					setFilteredCourses([]);
+				}
 			} finally {
 				setLoading(false);
 			}
 		};
 
 		fetchData();
-	}, []);
+	}, [isLoggedIn]);
 
 	// Initialize cart state from localStorage when the component mounts
 	useEffect(() => {
@@ -192,6 +278,7 @@ export default function Catalog({ setCartItemCount }: CatalogProps) {
 								course={course}
 								setCartItemCount={setCartItemCount}
 								isInCart={cart.some((c) => c._id === course._id)}
+								isLoggedIn={isLoggedIn}
 							/>
 						))
 					) : (
diff --git a/frontend/src/pages/Catalog/CatalogCourseComponent.tsx b/frontend/src/pages/Catalog/CatalogCourseComponent.tsx
index 1e66fce..baee164 100644
--- a/frontend/src/pages/Catalog/CatalogCourseComponent.tsx
+++ b/frontend/src/pages/Catalog/CatalogCourseComponent.tsx
@@ -7,12 +7,14 @@ interface CatalogCourseComponentProps {
 	course: Course;
 	setCartItemCount: Dispatch<SetStateAction<number>>;
 	isInCart: boolean;
+	isLoggedIn: boolean;
 }
 
 export default function CatalogCourseComponent({
 	course,
 	setCartItemCount,
 	isInCart,
+	isLoggedIn,
 }: CatalogCourseComponentProps) {
 	const renderStars = (rating: number) => {
 		const fullStars = Math.floor(rating);
@@ -44,6 +46,12 @@ export default function CatalogCourseComponent({
 		});
 	}
 
+	// Check if course is at registration capacity
+	const isAtCapacity =
+		course.registrationLimit > 0 &&
+		course.students.length >= course.registrationLimit;
+	const isDisabled = isInCart || isAtCapacity;
+
 	return (
 		<div className="flex bg-white shadow-lg rounded-lg overflow-hidden border border-gray-200">
 			<div className="w-3/4 p-6">
@@ -91,26 +99,39 @@ export default function CatalogCourseComponent({
 				</p>
 
 				<div className="flex items-center gap-4 mt-6">
-					<button
-						disabled={isInCart}
-						onClick={() => !isInCart && handleRegister(course)}
-						className={`text-white text-sm font-medium py-2 px-4 rounded-lg transition ${
-							isInCart
-								? "bg-gray-400 cursor-not-allowed"
-								: "bg-orange-500 hover:bg-orange-600"
-						}`}
-					>
-						{isInCart
-							? "Already in Cart"
-							: `Register (${
-									JSON.parse(localStorage.user).role.cost === 0
-										? "Free"
-										: `${new Intl.NumberFormat("en-US", {
-												style: "currency",
-												currency: "USD",
-											}).format(JSON.parse(localStorage.user).role.cost)}`
-								})`}
-					</button>
+					{isLoggedIn ? (
+						<button
+							disabled={isDisabled}
+							onClick={() => !isDisabled && handleRegister(course)}
+							className={`text-white text-sm font-medium py-2 px-4 rounded-lg transition ${
+								isDisabled
+									? "bg-gray-400 cursor-not-allowed"
+									: "bg-orange-500 hover:bg-orange-600"
+							}`}
+						>
+							{isInCart
+								? "Already in Cart"
+								: isAtCapacity
+									? "Course Full"
+									: `Register (${
+											localStorage.user &&
+											JSON.parse(localStorage.user).role?.cost === 0
+												? "Free"
+												: localStorage.user
+													? `${new Intl.NumberFormat("en-US", {
+															style: "currency",
+															currency: "USD",
+														}).format(JSON.parse(localStorage.user).role.cost)}`
+													: "Free"
+										})`}
+						</button>
+					) : (
+						<Link to="/login">
+							<button className="bg-blue-500 text-white text-sm font-medium py-2 px-4 rounded-lg hover:bg-blue-600 transition">
+								Login to Register
+							</button>
+						</Link>
+					)}
 					<Link to={`/courseDetails?courseId=${course._id}`}>
 						<button className="bg-gray-200 text-gray-700 text-sm font-medium py-2 px-4 rounded-lg hover:bg-gray-300 transition">
 							Learn More
diff --git a/frontend/src/pages/Dashboard/dashboard-item.tsx b/frontend/src/pages/Dashboard/dashboard-item.tsx
index cf25481..8c5de09 100644
--- a/frontend/src/pages/Dashboard/dashboard-item.tsx
+++ b/frontend/src/pages/Dashboard/dashboard-item.tsx
@@ -7,6 +7,29 @@ interface DashboardItemProps {
 }
 
 export default function DashboardItem({ course }: DashboardItemProps) {
+	// Handle case where course is null (deleted course)
+	if (!course) {
+		return (
+			<div className="flex bg-red-50 shadow-lg rounded-lg overflow-hidden border border-red-200">
+				<div className="w-3/4 p-6">
+					<h2 className="text-2xl font-semibold text-red-800">
+						Course Not Available
+					</h2>
+					<p className="text-red-600 mt-2">
+						This course has been removed or is no longer available.
+					</p>
+				</div>
+				<div className="w-1/4 bg-red-300">
+					<img
+						src="https://st2.depositphotos.com/2769299/7314/i/450/depositphotos_73146775-stock-photo-a-stack-of-books-on.jpg"
+						alt="Course not available"
+						className="object-cover w-full h-full opacity-50"
+					/>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div className="flex bg-white shadow-lg rounded-lg overflow-hidden border border-gray-200">
 			<div className="w-3/4 p-6">
diff --git a/frontend/src/pages/Dashboard/dashboard.tsx b/frontend/src/pages/Dashboard/dashboard.tsx
index 5d1873d..98cf261 100644
--- a/frontend/src/pages/Dashboard/dashboard.tsx
+++ b/frontend/src/pages/Dashboard/dashboard.tsx
@@ -18,9 +18,13 @@ export default function Dashboard() {
 				setLoading(true);
 				const progresses = (await fetchUserProgress()).progresses;
 				console.log(progresses);
-				setIncompleteCourses(progresses.filter((p: any) => !p.isComplete));
-				setCompletedCourses(progresses.filter((p: any) => p.isComplete));
-				console.log(progresses);
+				// Filter out progress entries with null/deleted courses
+				const validProgresses = progresses.filter(
+					(p: any) => p.course !== null
+				);
+				setIncompleteCourses(validProgresses.filter((p: any) => !p.isComplete));
+				setCompletedCourses(validProgresses.filter((p: any) => p.isComplete));
+				console.log("Valid progresses:", validProgresses);
 				setLoading(false);
 			} catch (error) {
 				console.error(error);
diff --git a/frontend/src/pages/HomePage/Home.tsx b/frontend/src/pages/HomePage/Home.tsx
index 759c5ba..c45f122 100644
--- a/frontend/src/pages/HomePage/Home.tsx
+++ b/frontend/src/pages/HomePage/Home.tsx
@@ -10,7 +10,6 @@ export default function Home() {
 		navigate(`/catalog?format=${format}`);
 	};
 	return (
-		
 		<div className="bg-gray-100 min-h-screen flex w-full">
 			<div className="flex-grow">
 				<main className="container mx-auto py-8 px-6 max-w-screen-lg">
@@ -80,6 +79,7 @@ export default function Home() {
 									}}
 									whileTap={{ scale: 0.93 }}
 									className="bg-black text-white px-6 py-2 rounded-lg shadow hover:bg-gray-800 transition duration-200"
+									onClick={() => navigate("/faqs")}
 								>
 									Learn More
 								</motion.button>
@@ -120,7 +120,7 @@ export default function Home() {
 
 						{/* In-Person Training Tile */}
 						<motion.div
-							className="relative overflow-hidden shadow-lg mx-auto"
+							className="relative overflow-hidden shadow-lg mx-auto cursor-pointer"
 							style={{
 								width: "90%",
 								maxWidth: "600px",
@@ -135,6 +135,7 @@ export default function Home() {
 								boxShadow: "0px 4px 10px rgba(0,0,0,0.3)",
 								transition: { duration: 0.15 },
 							}}
+							onClick={() => handleFilterRedirect("In-Person")}
 						>
 							<img
 								src="/images/inPersonTraining.png"
@@ -187,7 +188,7 @@ export default function Home() {
 										className="bg-orange-500 text-white text-sm font-semibold px-3 py-1 rounded-lg shadow-md"
 										onClick={() => handleFilterRedirect("Live")}
 									>
-										Upcoming
+										Live
 									</motion.button>
 
 									<motion.button
diff --git a/frontend/src/pages/UserAuth/Register.tsx b/frontend/src/pages/UserAuth/Register.tsx
index 74a7dda..cbbf8e6 100644
--- a/frontend/src/pages/UserAuth/Register.tsx
+++ b/frontend/src/pages/UserAuth/Register.tsx
@@ -336,7 +336,8 @@ const Register: React.FC = () => {
 								</div>
 								<div>
 									<label className="block mb-1 text-sm font-medium text-black">
-										Who are you certified through?
+										Who are you certified through? (Provide county or CPA you
+										are with if you are not certified.)
 									</label>
 									<input
 										type="text"
diff --git a/frontend/src/routes/RoutesAndLayouts.tsx b/frontend/src/routes/RoutesAndLayouts.tsx
index 6e27c8b..e5e72e3 100644
--- a/frontend/src/routes/RoutesAndLayouts.tsx
+++ b/frontend/src/routes/RoutesAndLayouts.tsx
@@ -133,18 +133,20 @@ function RoutesAndLayout({
 					{/* ===== LEARNER ROUTES ===== */}
 					<Route path="/" element={<Home />} />
 					<Route
-						path="/dashboard"
+						path="/catalog"
 						element={
-							<PrivateRoute>
-								<Dashboard />
-							</PrivateRoute>
+							<Catalog
+								setCartItemCount={setCartItemCount}
+								isLoggedIn={isLoggedIn}
+							/>
 						}
 					/>
+					<Route path="/faqs" element={<FAQPage />} />
 					<Route
-						path="/catalog"
+						path="/dashboard"
 						element={
 							<PrivateRoute>
-								<Catalog setCartItemCount={setCartItemCount} />
+								<Dashboard />
 							</PrivateRoute>
 						}
 					/>
@@ -164,7 +166,6 @@ function RoutesAndLayout({
 							</PrivateRoute>
 						}
 					/>
-					<Route path="/faqs" element={<FAQPage />} />
 					<Route
 						path="/courseDetails"
 						element={
diff --git a/frontend/src/shared/types/course.tsx b/frontend/src/shared/types/course.tsx
index adcb3ce..e1d7458 100644
--- a/frontend/src/shared/types/course.tsx
+++ b/frontend/src/shared/types/course.tsx
@@ -31,4 +31,5 @@ export type Course = {
 	productInfo: string;
 	shortUrl: string;
 	draft: boolean;
+	registrationLimit: number;
 };
diff --git a/frontend/src/store/useCourseEditStore.ts b/frontend/src/store/useCourseEditStore.ts
index 84c3a70..e97e903 100644
--- a/frontend/src/store/useCourseEditStore.ts
+++ b/frontend/src/store/useCourseEditStore.ts
@@ -29,6 +29,7 @@ interface CourseEditState {
 	productInfo: string;
 	shortUrl?: string;
 	draft: boolean;
+	registrationLimit: number;
 
 	// Hydration & data control
 	hasHydrated: boolean;
@@ -80,6 +81,7 @@ const initialState: Omit<
 	productInfo: "",
 	shortUrl: undefined,
 	draft: true,
+	registrationLimit: 0,
 };
 
 export const useCourseEditStore = create<CourseEditState>()(
@@ -117,8 +119,20 @@ export const useCourseEditStore = create<CourseEditState>()(
 			storage: createJSONStorage(() => sessionStorage),
 
 			onRehydrateStorage: (state) => {
-				return () => {
-					state?.setHydrated(); // this is how Zustand recommends setting hydration flag
+				return (state) => {
+					// Convert date strings back to Date objects after rehydration
+					if (state) {
+						if (typeof state.time === "string") {
+							state.time = new Date(state.time);
+						}
+						if (typeof state.regStart === "string") {
+							state.regStart = new Date(state.regStart);
+						}
+						if (typeof state.regEnd === "string") {
+							state.regEnd = new Date(state.regEnd);
+						}
+						state.setHydrated(); // this is how Zustand recommends setting hydration flag
+					}
 				};
 			},
 		}