diff --git a/backend/src/controllers/doctor.controller.js b/backend/src/controllers/doctor.controller.js
index a7f6796..a7087a3 100644
--- a/backend/src/controllers/doctor.controller.js
+++ b/backend/src/controllers/doctor.controller.js
@@ -17,37 +17,35 @@ export const getAllDoctors = async (req, res) => {
 		});
 
 		const formatted = doctors.map((doc, index) => {
-			const departmentIds = doc.departments.map(
-				(d) => d.department.departmentId,
-			);
-
-			let timings = [];
-
-			doc.departments.forEach((d) => {
-				const t = d.timing;
-
-				if (!t) return;
-
-				if (t.monday) timings.push(`Monday ${t.monday}`);
-				if (t.tuesday) timings.push(`Tuesday ${t.tuesday}`);
-				if (t.wednesday) timings.push(`Wednesday ${t.wednesday}`);
-				if (t.thursday) timings.push(`Thursday ${t.thursday}`);
-				if (t.friday) timings.push(`Friday ${t.friday}`);
-				if (t.saturday) timings.push(`Saturday ${t.saturday}`);
-				if (t.sunday) timings.push(`Sunday ${t.sunday}`);
-
-				if (t.additional) timings.push(t.additional);
-			});
-
 			return {
 				SL_NO: String(index + 1),
-				Doctor_ID: doc.doctorId,
-				Department_ID: departmentIds,
-				Name: doc.name,
-				Designation: doc.designation,
-				Working_Status: doc.workingStatus,
-				Qualification: doc.qualification,
-				Timing: timings.join(" & "),
+				doctorId: doc.doctorId,
+				name: doc.name,
+				designation: doc.designation,
+				workingStatus: doc.workingStatus,
+				qualification: doc.qualification,
+
+				departments: doc.departments.map((d) => {
+					const t = d.timing || {};
+
+					const timingArray = [
+						t.monday && `Monday ${t.monday}`,
+						t.tuesday && `Tuesday ${t.tuesday}`,
+						t.wednesday && `Wednesday ${t.wednesday}`,
+						t.thursday && `Thursday ${t.thursday}`,
+						t.friday && `Friday ${t.friday}`,
+						t.saturday && `Saturday ${t.saturday}`,
+						t.sunday && `Sunday ${t.sunday}`,
+						t.additional && t.additional,
+					].filter(Boolean);
+
+					return {
+						departmentId: d.department.departmentId,
+						departmentName: d.department.name,
+
+						timing: timingArray.join(" & "),
+					};
+				}),
 			};
 		});
 
@@ -89,29 +87,17 @@ export const getDoctorByDoctorId = async (req, res) => {
 			});
 		}
 
-		const departments = doctor.departments.map(
-			(d) => d.department.departmentId,
-		);
-
-		const timing = doctor.departments[0]?.timing ?? {};
-
 		const response = {
 			doctorId: doctor.doctorId,
 			name: doctor.name,
 			designation: doctor.designation,
 			workingStatus: doctor.workingStatus,
 			qualification: doctor.qualification,
-			departments,
-			timing: {
-				monday: timing?.monday ?? "",
-				tuesday: timing?.tuesday ?? "",
-				wednesday: timing?.wednesday ?? "",
-				thursday: timing?.thursday ?? "",
-				friday: timing?.friday ?? "",
-				saturday: timing?.saturday ?? "",
-				sunday: timing?.sunday ?? "",
-				additional: timing?.additional ?? "",
-			},
+			departments: doctor.departments.map((d) => ({
+				departmentId: d.department.departmentId,
+				departmentName: d.department.name,
+				timing: d.timing || {},
+			})),
 		};
 
 		res.status(200).json({
@@ -137,7 +123,6 @@ export const createDoctor = async (req, res) => {
 			workingStatus,
 			qualification,
 			departments,
-			timing,
 		} = req.body;
 
 		const doctor = await prisma.doctor.create({
@@ -150,11 +135,13 @@ export const createDoctor = async (req, res) => {
 			},
 		});
 
-		for (const depId of departments) {
+		for (const dep of departments) {
 			const department = await prisma.department.findUnique({
-				where: {departmentId: depId},
+				where: {departmentId: dep.departmentId},
 			});
 
+			if (!department) continue;
+
 			const doctorDepartment = await prisma.doctorDepartment.create({
 				data: {
 					doctorId: doctor.id,
@@ -162,11 +149,11 @@ export const createDoctor = async (req, res) => {
 				},
 			});
 
-			if (timing) {
+			if (dep.timing) {
 				await prisma.doctorTiming.create({
 					data: {
 						doctorDepartmentId: doctorDepartment.id,
-						...timing,
+						...dep.timing,
 					},
 				});
 			}
@@ -189,21 +176,8 @@ export const createDoctor = async (req, res) => {
 export const updateDoctor = async (req, res) => {
 	try {
 		const {doctorId} = req.params;
-		const {
-			name,
-			designation,
-			workingStatus,
-			qualification,
-			departments,
-			timing,
-		} = req.body;
-
-		if (!doctorId) {
-			return res.status(400).json({
-				success: false,
-				message: "Doctor ID is required",
-			});
-		}
+		const {name, designation, workingStatus, qualification, departments} =
+			req.body;
 
 		const doctor = await prisma.doctor.findUnique({
 			where: {doctorId},
@@ -212,75 +186,61 @@ export const updateDoctor = async (req, res) => {
 		if (!doctor) {
 			return res.status(404).json({
 				success: false,
-				message: `Doctor with ID ${doctorId} not found`,
+				message: "Doctor not found",
 			});
 		}
 
-		const updatedDoctor = await prisma.doctor.update({
+		await prisma.doctor.update({
 			where: {id: doctor.id},
 			data: {
-				...(name && {name}),
-				...(designation && {designation}),
-				...(workingStatus && {workingStatus}),
-				...(qualification && {qualification}),
+				name,
+				designation,
+				workingStatus,
+				qualification,
 			},
 		});
 
-		if (departments) {
-			const doctorDepartments = await prisma.doctorDepartment.findMany({
-				where: {doctorId: doctor.id},
+		const oldRelations = await prisma.doctorDepartment.findMany({
+			where: {doctorId: doctor.id},
+		});
+
+		for (const rel of oldRelations) {
+			await prisma.doctorTiming.deleteMany({
+				where: {doctorDepartmentId: rel.id},
+			});
+		}
+
+		await prisma.doctorDepartment.deleteMany({
+			where: {doctorId: doctor.id},
+		});
+
+		for (const dep of departments) {
+			const department = await prisma.department.findUnique({
+				where: {departmentId: dep.departmentId},
 			});
 
-			for (const dd of doctorDepartments) {
-				await prisma.doctorTiming.deleteMany({
-					where: {doctorDepartmentId: dd.id},
-				});
-			}
+			if (!department) continue;
 
-			await prisma.doctorDepartment.deleteMany({
-				where: {doctorId: doctor.id},
+			const doctorDepartment = await prisma.doctorDepartment.create({
+				data: {
+					doctorId: doctor.id,
+					departmentId: department.id,
+				},
 			});
 
-			for (const depId of departments) {
-				const department = await prisma.department.findUnique({
-					where: {departmentId: depId},
-				});
-				if (!department) continue;
-
-				const doctorDepartment = await prisma.doctorDepartment.create({
+			if (dep.timing) {
+				await prisma.doctorTiming.create({
 					data: {
-						doctorId: doctor.id,
-						departmentId: department.id,
+						doctorDepartmentId: doctorDepartment.id,
+						...dep.timing,
 					},
 				});
-
-				if (timing) {
-					await prisma.doctorTiming.create({
-						data: {
-							doctorDepartmentId: doctorDepartment.id,
-							...timing,
-						},
-					});
-				}
-			}
-		} else if (timing) {
-			const doctorDepartments = await prisma.doctorDepartment.findMany({
-				where: {doctorId: doctor.id},
-			});
-
-			for (const dd of doctorDepartments) {
-				await prisma.doctorTiming.upsert({
-					where: {doctorDepartmentId: dd.id},
-					update: {...timing},
-					create: {doctorDepartmentId: dd.id, ...timing},
-				});
 			}
 		}
 
 		res.status(200).json({
 			success: true,
-			message: `Doctor ${doctorId} updated successfully`,
-			data: updatedDoctor,
+			message: "Doctor updated successfully",
 		});
 	} catch (error) {
 		console.error(error);
@@ -403,6 +363,7 @@ export const getDoctorTimingById = async (req, res) => {
 			include: {
 				departments: {
 					include: {
+						department: true,
 						timing: true,
 					},
 				},
@@ -416,23 +377,29 @@ export const getDoctorTimingById = async (req, res) => {
 			});
 		}
 
-		let timing = {};
-
-		if (doctor.departments.length > 0) {
-			timing = doctor.departments[0].timing ?? {};
-		}
-
 		const result = {
-			Doctor_ID: doctor.doctorId,
-			Doctor: doctor.name,
-			Monday: timing?.monday ?? "",
-			Tuesday: timing?.tuesday ?? "",
-			Wednesday: timing?.wednesday ?? "",
-			Thursday: timing?.thursday ?? "",
-			Friday: timing?.friday ?? "",
-			Saturday: timing?.saturday ?? "",
-			Sunday: timing?.sunday ?? "",
-			Additional: timing?.additional ?? "",
+			doctorId: doctor.doctorId,
+			doctorName: doctor.name,
+
+			departments: doctor.departments.map((d) => {
+				const t = d.timing || {};
+
+				return {
+					departmentId: d.department.departmentId,
+					departmentName: d.department.name,
+
+					timing: {
+						monday: t.monday || "",
+						tuesday: t.tuesday || "",
+						wednesday: t.wednesday || "",
+						thursday: t.thursday || "",
+						friday: t.friday || "",
+						saturday: t.saturday || "",
+						sunday: t.sunday || "",
+						additional: t.additional || "",
+					},
+				};
+			}),
 		};
 
 		res.status(200).json({
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ce13fff..de0ab13 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,6 @@ import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
 import Login from "@/pages/Login";
 
 import DashboardLayout from "./layouts/DashboardLayout";
-import Blog from "./pages/Blog";
 
 // import ProtectedRoute from "./components/ProtectedRoutes/ProtectedRoutes";
 
@@ -12,6 +11,7 @@ import PublicRoute from "./auth/PublicRoute";
 import {AuthProvider} from "./context/AuthContext";
 import Department from "./pages/Department";
 import Doctor from "./pages/Doctor";
+import Blog from "./pages/Blog";
 
 export default function App() {
 	return (
@@ -24,9 +24,9 @@ export default function App() {
 
 					<Route element={<ProtectedRoute />}>
 						<Route element={<DashboardLayout />}>
-							<Route path="/blog" element={<Blog />} />
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
+							<Route path="/blog" element={<Blog />} />
 						</Route>
 					</Route>
 
diff --git a/frontend/src/api/doctor.ts b/frontend/src/api/doctor.ts
index f9ab808..18c0014 100644
--- a/frontend/src/api/doctor.ts
+++ b/frontend/src/api/doctor.ts
@@ -6,17 +6,20 @@ export interface Doctor {
 	designation?: string;
 	workingStatus?: string;
 	qualification?: string;
-	departments: string[];
-	timing: {
-		monday?: string;
-		tuesday?: string;
-		wednesday?: string;
-		thursday?: string;
-		friday?: string;
-		saturday?: string;
-		sunday?: string;
-		additional?: string;
-	};
+
+	departments: {
+		departmentId: string;
+		timing?: {
+			monday?: string;
+			tuesday?: string;
+			wednesday?: string;
+			thursday?: string;
+			friday?: string;
+			saturday?: string;
+			sunday?: string;
+			additional?: string;
+		};
+	}[];
 }
 
 export const getDoctorsApi = async () => {
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 573bc08..365ed31 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -16,8 +16,8 @@ export default function Sidebar() {
 			path: "/doctor",
 		},
 		{
-			name: "Subjects",
-			path: "/subjects",
+			name: "Blog",
+			path: "/blog",
 		},
 	];
 
diff --git a/frontend/src/components/ui/scroll-area.tsx b/frontend/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..f49b0a8
--- /dev/null
+++ b/frontend/src/components/ui/scroll-area.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/src/pages/Doctor.tsx b/frontend/src/pages/Doctor.tsx
index 053110a..57c4a56 100644
--- a/frontend/src/pages/Doctor.tsx
+++ b/frontend/src/pages/Doctor.tsx
@@ -1,6 +1,4 @@
 import {useState, useEffect, useCallback} from "react";
-import {AxiosError} from "axios";
-
 import {
 	getDoctorsApi,
 	createDoctorApi,
@@ -19,6 +17,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {ScrollArea} from "@/components/ui/scroll-area";
 
 import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
@@ -30,13 +29,16 @@ import {
 	DialogTitle,
 	DialogFooter,
 } from "@/components/ui/dialog";
-import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
-import {Command, CommandGroup, CommandItem} from "@/components/ui/command";
-import {Check} from "lucide-react";
 
+import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover";
+import {
+	Command,
+	CommandGroup,
+	CommandItem,
+	CommandInput,
+} from "@/components/ui/command";
 import {Input} from "@/components/ui/input";
 import {Loader2, Plus, Pencil, Trash} from "lucide-react";
-import {log} from "console";
 
 interface Department {
 	departmentId: string;
@@ -46,11 +48,9 @@ interface Department {
 export default function DoctorPage() {
 	const [doctors, setDoctors] = useState<any[]>([]);
 	const [departments, setDepartments] = useState<Department[]>([]);
-
 	const [loading, setLoading] = useState(true);
 	const [openModal, setOpenModal] = useState(false);
 	const [editing, setEditing] = useState<any>(null);
-	const [depOpen, setDepOpen] = useState(false);
 	const [search, setSearch] = useState("");
 
 	const [form, setForm] = useState<any>({
@@ -60,7 +60,6 @@ export default function DoctorPage() {
 		workingStatus: "",
 		qualification: "",
 		departments: [],
-		timing: {},
 	});
 
 	const fetchAll = useCallback(async () => {
@@ -89,20 +88,43 @@ export default function DoctorPage() {
 	}
 
 	function handleDepartmentChange(depId: string) {
-		const exists = form.departments.includes(depId);
+		const exists = form.departments.find((d: any) => d.departmentId === depId);
 
-		setForm({
-			...form,
-			departments: exists
-				? form.departments.filter((d: string) => d !== depId)
-				: [...form.departments, depId],
-		});
+		if (exists) {
+			setForm({
+				...form,
+				departments: form.departments.filter(
+					(d: any) => d.departmentId !== depId,
+				),
+			});
+		} else {
+			setForm({
+				...form,
+				departments: [
+					...form.departments,
+					{
+						departmentId: depId,
+						timing: {},
+					},
+				],
+			});
+		}
 	}
 
-	function handleTimingChange(day: string, value: string) {
+	function handleTimingChange(depId: string, day: string, value: string) {
 		setForm({
 			...form,
-			timing: {...form.timing, [day]: value},
+			departments: form.departments.map((d: any) =>
+				d.departmentId === depId
+					? {
+							...d,
+							timing: {
+								...d.timing,
+								[day]: value,
+							},
+						}
+					: d,
+			),
 		});
 	}
 
@@ -115,7 +137,6 @@ export default function DoctorPage() {
 			workingStatus: "",
 			qualification: "",
 			departments: [],
-			timing: {},
 		});
 		setOpenModal(true);
 	}
@@ -124,29 +145,22 @@ export default function DoctorPage() {
 		setEditing(doc);
 
 		try {
-			const timingRes = await getDoctorTimingApi(doc.Doctor_ID);
+			const timingRes = await getDoctorTimingApi(doc.doctorId);
 
-			const t = timingRes?.data || {};
+			const timingData = timingRes?.data?.departments || [];
 
-			const formattedTiming = {
-				sunday: t.Sunday || "",
-				monday: t.Monday || "",
-				tuesday: t.Tuesday || "",
-				wednesday: t.Wednesday || "",
-				thursday: t.Thursday || "",
-				friday: t.Friday || "",
-				saturday: t.Saturday || "",
-				additional: t.Additional || "",
-			};
+			const mappedDepartments = timingData.map((d: any) => ({
+				departmentId: d.departmentId,
+				timing: d.timing || {},
+			}));
 
 			setForm({
-				doctorId: doc.Doctor_ID,
-				name: doc.Name,
-				designation: doc.Designation,
-				workingStatus: doc.workingStatus || doc.Working_Status || "",
-				qualification: doc.Qualification,
-				departments: doc.Department_ID || [],
-				timing: formattedTiming,
+				doctorId: doc.doctorId,
+				name: doc.name,
+				designation: doc.designation,
+				workingStatus: doc.workingStatus,
+				qualification: doc.qualification,
+				departments: mappedDepartments,
 			});
 
 			setOpenModal(true);
@@ -157,21 +171,17 @@ export default function DoctorPage() {
 
 	async function handleSubmit() {
 		try {
-			const cleanTiming: any = {};
-
-			Object.keys(form.timing).forEach((day) => {
-				if (form.timing[day]) {
-					cleanTiming[day] = form.timing[day];
-				}
-			});
-
 			const payload = {
-				...form,
-				timing: cleanTiming,
+				doctorId: form.doctorId,
+				name: form.name,
+				designation: form.designation,
+				workingStatus: form.workingStatus,
+				qualification: form.qualification,
+				departments: form.departments,
 			};
 
 			if (editing) {
-				await updateDoctorApi(editing.Doctor_ID, payload);
+				await updateDoctorApi(editing.doctorId, payload);
 			} else {
 				await createDoctorApi(payload);
 			}
@@ -185,7 +195,6 @@ export default function DoctorPage() {
 
 	async function handleDelete(id: string) {
 		if (!confirm("Delete doctor?")) return;
-
 		await deleteDoctorApi(id);
 		fetchAll();
 	}
@@ -231,21 +240,25 @@ export default function DoctorPage() {
 									</TableRow>
 								) : (
 									doctors.map((doc) => (
-										<TableRow key={doc.Doctor_ID}>
-											<TableCell>{doc.Doctor_ID}</TableCell>
+										<TableRow key={doc.doctorId}>
+											<TableCell>{doc.doctorId}</TableCell>
+											<TableCell>{doc.name}</TableCell>
+											<TableCell>{doc.designation}</TableCell>
+											<TableCell>{doc.workingStatus}</TableCell>
+											<TableCell>{doc.qualification}</TableCell>
 
-											<TableCell>{doc.Name}</TableCell>
+											<TableCell>
+												{doc.departments
+													?.map((d: any) => d.departmentName)
+													.join(", ")}
+											</TableCell>
 
-											<TableCell>{doc.Designation}</TableCell>
-
-											<TableCell>{doc.Working_Status}</TableCell>
-
-											<TableCell>{doc.Qualification}</TableCell>
-
-											<TableCell>{doc.Department_ID?.join(", ")}</TableCell>
-
-											<TableCell className="max-w-[200px] whitespace-normal break-words">
-												<div className="tw-whitespace-nowrap">{doc.Timing}</div>
+											<TableCell className="max-w-[250px] whitespace-normal">
+												{doc.departments?.map((d: any) => (
+													<div key={d.departmentId}>
+														<b>{d.departmentName}:</b> {d.timing}
+													</div>
+												))}
 											</TableCell>
 
 											<TableCell className="flex gap-2">
@@ -260,7 +273,7 @@ export default function DoctorPage() {
 												<Button
 													size="sm"
 													variant="destructive"
-													onClick={() => handleDelete(doc.Doctor_ID)}
+													onClick={() => handleDelete(doc.doctorId)}
 												>
 													<Trash className="h-4 w-4" />
 												</Button>
@@ -275,14 +288,13 @@ export default function DoctorPage() {
 			</Card>
 
 			{/* MODAL */}
-
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
-				<DialogContent className="tw-overflow-x-auto">
+				<DialogContent className="overflow-y-auto max-h-[80vh] ">
 					<DialogHeader>
 						<DialogTitle>{editing ? "Edit Doctor" : "Add Doctor"}</DialogTitle>
 					</DialogHeader>
 
-					<div className="space-y-4 max-h-[70vh] overflow-y-auto">
+					<div className="space-y-4">
 						<Input
 							name="doctorId"
 							placeholder="Doctor ID"
@@ -297,7 +309,6 @@ export default function DoctorPage() {
 							value={form.name}
 							onChange={handleChange}
 						/>
-
 						<Input
 							name="designation"
 							placeholder="Designation"
@@ -310,126 +321,113 @@ export default function DoctorPage() {
 							value={form.workingStatus}
 							onChange={handleChange}
 						/>
+						<Input
+							name="qualification"
+							placeholder="Qualification"
+							value={form.qualification}
+							onChange={handleChange}
+						/>
 
-						{/* Departments MULTI SELECT */}
-
+						{/* Departments */}
 						<div>
-							<p className="tw-font-medium tw-mb-2">Departments</p>
+							<p className="font-medium mb-2">Departments</p>
 
 							<Popover>
 								<PopoverTrigger asChild>
-									<Button
-										variant="outline"
-										className="tw-w-full tw-justify-between tw-text-left"
-									>
-										{form.departments.length > 0
-											? departments
-													.filter((d) =>
-														form.departments.includes(d.departmentId),
-													)
-													.map((d) => d.name)
-													.join(", ")
-											: "Select Departments"}
+									<Button className="w-full justify-between h-auto min-h-[40px]">
+										{form.departments.length > 0 ? (
+											<div className="flex flex-col items-start gap-1 text-left">
+												{form.departments.map((d: any) => {
+													const name = departments.find(
+														(dep) => dep.departmentId === d.departmentId,
+													)?.name;
+
+													return (
+														<span key={d.departmentId} className="text-sm">
+															{name}
+														</span>
+													);
+												})}
+											</div>
+										) : (
+											<span>Select Departments</span>
+										)}
 									</Button>
 								</PopoverTrigger>
 
-								<PopoverContent className="tw-w-full tw-p-0">
+								<PopoverContent className="w-[300px] p-0">
 									<Command>
-										<div className="tw-p-2 tw-border-b">
-											<input
-												placeholder="Search department..."
-												className="tw-w-full tw-border tw-rounded-md tw-px-2 tw-py-1 tw-text-sm"
-												value={search}
-												onChange={(e) => setSearch(e.target.value)}
-											/>
-										</div>
+										<CommandInput placeholder="Search department..." />
 
-										<CommandGroup className="tw-max-h-60 tw-overflow-y-auto">
-											{departments
-												.filter((d) =>
-													d.name.toLowerCase().includes(search.toLowerCase()),
-												)
-												.map((dep) => {
-													const selected = form.departments.includes(
-														dep.departmentId,
-													);
+										<CommandGroup className="max-h-[250px] overflow-y-auto">
+											{departments.map((dep) => {
+												const selected = form.departments.some(
+													(d: any) => d.departmentId === dep.departmentId,
+												);
 
-													return (
-														<CommandItem
-															key={dep.departmentId}
-															onSelect={() =>
-																handleDepartmentChange(dep.departmentId)
-															}
-															className="tw-flex tw-justify-between"
-														>
-															<span>{dep.name}</span>
-
-															{selected && (
-																<span className="tw-text-green-600 tw-text-sm">
-																	✔
-																</span>
-															)}
-														</CommandItem>
-													);
-												})}
+												return (
+													<CommandItem
+														key={dep.departmentId}
+														className="flex justify-between"
+														onSelect={() =>
+															handleDepartmentChange(dep.departmentId)
+														}
+													>
+														<span>{dep.name}</span>
+														{selected && <span>✔</span>}
+													</CommandItem>
+												);
+											})}
 										</CommandGroup>
 									</Command>
 								</PopoverContent>
 							</Popover>
 						</div>
-						<Input
-							placeholder="Sunday"
-							value={form.timing.sunday || ""}
-							onChange={(e) => handleTimingChange("sunday", e.target.value)}
-						/>
 
-						<Input
-							placeholder="Monday"
-							value={form.timing.monday || ""}
-							onChange={(e) => handleTimingChange("monday", e.target.value)}
-						/>
+						{form.departments.map((dep: any) => {
+							const depName = departments.find(
+								(d) => d.departmentId === dep.departmentId,
+							)?.name;
 
-						<Input
-							placeholder="Tuesday"
-							value={form.timing.tuesday || ""}
-							onChange={(e) => handleTimingChange("tuesday", e.target.value)}
-						/>
+							return (
+								<div
+									key={dep.departmentId}
+									className="tw-border tw-p-3 tw-rounded"
+								>
+									<p className="tw-font-semibold">{depName}</p>
 
-						<Input
-							placeholder="Wednesday"
-							value={form.timing.wednesday || ""}
-							onChange={(e) => handleTimingChange("wednesday", e.target.value)}
-						/>
-
-						<Input
-							placeholder="Thursday"
-							value={form.timing.thursday || ""}
-							onChange={(e) => handleTimingChange("thursday", e.target.value)}
-						/>
-
-						<Input
-							placeholder="Friday"
-							value={form.timing.friday || ""}
-							onChange={(e) => handleTimingChange("friday", e.target.value)}
-						/>
-
-						<Input
-							placeholder="Saturday"
-							value={form.timing.saturday || ""}
-							onChange={(e) => handleTimingChange("saturday", e.target.value)}
-						/>
-						<Input
-							placeholder="Additional"
-							value={form.timing.additional || ""}
-							onChange={(e) => handleTimingChange("additional", e.target.value)}
-						/>
+									{[
+										"monday",
+										"tuesday",
+										"wednesday",
+										"thursday",
+										"friday",
+										"saturday",
+										"sunday",
+										"additional",
+									].map((day) => (
+										<Input
+											key={day}
+											placeholder={day}
+											value={dep.timing?.[day] || ""}
+											onChange={(e) =>
+												handleTimingChange(
+													dep.departmentId,
+													day,
+													e.target.value,
+												)
+											}
+										/>
+									))}
+								</div>
+							);
+						})}
 					</div>
 
 					<DialogFooter>
 						<Button variant="outline" onClick={() => setOpenModal(false)}>
 							Cancel
 						</Button>
-
 						<Button onClick={handleSubmit}>
 							{editing ? "Update" : "Create"}
 						</Button>