diff --git a/frontend/src/pages/Department.tsx b/frontend/src/pages/Department.tsx
index 56cafc9..f456c15 100644
--- a/frontend/src/pages/Department.tsx
+++ b/frontend/src/pages/Department.tsx
@@ -51,6 +51,8 @@ export default function DepartmentPage() {
 	const [openModal, setOpenModal] = useState(false);
 	const [editing, setEditing] = useState<Department | null>(null);
 
+	const [searchText, setSearchText] = useState("");
+
 	const [form, setForm] = useState<Department>({
 		departmentId: "",
 		name: "",
@@ -83,6 +85,20 @@ export default function DepartmentPage() {
 		fetchDepartments();
 	}, [fetchDepartments]);
 
+	const filteredDepartments = departments.filter((dep) => {
+		const text = searchText.toLowerCase();
+
+		return (
+			dep.name.toLowerCase().includes(text) ||
+			dep.departmentId.toLowerCase().includes(text) ||
+			dep.para1.toLowerCase().includes(text) ||
+			dep.para2.toLowerCase().includes(text) ||
+			dep.para3.toLowerCase().includes(text) ||
+			dep.facilities.toLowerCase().includes(text) ||
+			dep.services.toLowerCase().includes(text)
+		);
+	});
+
 	function handleChange(
 		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
 	) {
@@ -144,10 +160,18 @@ export default function DepartmentPage() {
 
 	return (
 		<div className="p-6 space-y-6">
-			<div className="flex justify-between items-center">
+			{/* HEADER */}
+			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-3">
 				<h1 className="text-2xl font-bold">Departments</h1>
 
-				<div className="flex gap-3">
+				<div className="flex flex-wrap gap-3">
+					<Input
+						placeholder="Search department..."
+						value={searchText}
+						onChange={(e) => setSearchText(e.target.value)}
+						className="w-[220px]"
+					/>
+
 					<Button
 						variant="outline"
 						onClick={fetchDepartments}
@@ -198,14 +222,14 @@ export default function DepartmentPage() {
 											<Loader2 className="h-6 w-6 animate-spin mx-auto" />
 										</TableCell>
 									</TableRow>
-								) : departments.length === 0 ? (
+								) : filteredDepartments.length === 0 ? (
 									<TableRow>
 										<TableCell colSpan={8} className="text-center">
 											No departments found
 										</TableCell>
 									</TableRow>
 								) : (
-									departments.map((dep) => (
+									filteredDepartments.map((dep) => (
 										<TableRow key={dep.departmentId}>
 											<TableCell>{dep.departmentId}</TableCell>
 
@@ -258,7 +282,6 @@ export default function DepartmentPage() {
 			</Card>
 
 			{/* MODAL */}
-
 			<Dialog open={openModal} onOpenChange={setOpenModal}>
 				<DialogContent className="max-w-4xl">
 					<DialogHeader>