From 73448a5a68f14a6a0c28e1a7fb070a2357bf9ffa Mon Sep 17 00:00:00 2001
From: Hunter Shierman <hshierman@gmail.com>
Date: Sat, 7 Mar 2026 11:57:30 -0500
Subject: [PATCH 1/2] feat: add add interviewer page - allow admin to add other
 interviewers by sending them an email - basic form page to be used by the
 backend

---
 .../admin/components/AddInterviewers.tsx      | 240 ++++++++++++++++++
 frontend/src/features/dashboard/Dashboard.tsx |  10 +-
 .../features/dashboard/components/Sidebar.tsx |  16 +-
 3 files changed, 264 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/features/admin/components/AddInterviewers.tsx

diff --git a/frontend/src/features/admin/components/AddInterviewers.tsx b/frontend/src/features/admin/components/AddInterviewers.tsx
new file mode 100644
index 0000000..0d17ae7
--- /dev/null
+++ b/frontend/src/features/admin/components/AddInterviewers.tsx
@@ -0,0 +1,240 @@
+import { useState } from "react";
+
+interface AddInterviewersProps {
+	departments?: string[];
+}
+
+export default function AddInterviewers({ departments = ["Engineering", "Design", "Marketing", "Product", "Operations"] }: AddInterviewersProps) {
+	const [activeTab, setActiveTab] = useState<"interviewers" | "candidates">("interviewers");
+	
+	// Interviewer form state
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [email, setEmail] = useState("");
+	const [department, setDepartment] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [successMessage, setSuccessMessage] = useState("");
+	const [errorMessage, setErrorMessage] = useState("");
+
+	// Candidate form state
+	const [candidateFirstName, setCandidateFirstName] = useState("");
+	const [candidateLastName, setCandidateLastName] = useState("");
+	const [candidateEmail, setCandidateEmail] = useState("");
+	const [candidateDepartment, setCandidateDepartment] = useState("");
+	const [isCandidateSubmitting, setIsCandidateSubmitting] = useState(false);
+	const [candidateSuccessMessage, setCandidateSuccessMessage] = useState("");
+	const [candidateErrorMessage, setCandidateErrorMessage] = useState("");
+
+	const handleSendInvite = async () => {
+		setSuccessMessage("");
+		setErrorMessage("");
+
+		if (!firstName || !lastName || !email || !department) {
+			setErrorMessage("Please fill in all fields.");
+			return;
+		}
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(email)) {
+			setErrorMessage("Please enter a valid email address.");
+			return;
+		}
+
+		try {
+			setIsSubmitting(true);
+			// TODO: Replace with actual API call
+			await new Promise((resolve) => setTimeout(resolve, 800));
+
+			setSuccessMessage(`Invite sent to ${email} successfully.`);
+			setFirstName("");
+			setLastName("");
+			setEmail("");
+			setDepartment("");
+		} catch (err) {
+			setErrorMessage("Failed to send invite. Please try again.");
+			console.log(err);
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	const handleSendCandidateInvite = async () => {
+		setCandidateSuccessMessage("");
+		setCandidateErrorMessage("");
+
+		if (!candidateFirstName || !candidateLastName || !candidateEmail || !candidateDepartment) {
+			setCandidateErrorMessage("Please fill in all fields.");
+			return;
+		}
+
+		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+		if (!emailRegex.test(candidateEmail)) {
+			setCandidateErrorMessage("Please enter a valid email address.");
+			return;
+		}
+
+		try {
+			setIsCandidateSubmitting(true);
+			// TODO: Replace with actual API call
+			await new Promise((resolve) => setTimeout(resolve, 800));
+
+			setCandidateSuccessMessage(`Invite sent to ${candidateEmail} successfully.`);
+			setCandidateFirstName("");
+			setCandidateLastName("");
+			setCandidateEmail("");
+			setCandidateDepartment("");
+		} catch (err) {
+			setCandidateErrorMessage("Failed to send invite. Please try again.");
+			console.log(err);
+		} finally {
+			setIsCandidateSubmitting(false);
+		}
+	};
+
+	const formUI = (
+		values: { firstName: string; lastName: string; email: string; department: string },
+		handlers: {
+			setFirstName: (v: string) => void;
+			setLastName: (v: string) => void;
+			setEmail: (v: string) => void;
+			setDepartment: (v: string) => void;
+		},
+		isSubmitting: boolean,
+		successMessage: string,
+		errorMessage: string,
+		handleSubmit: () => void
+	) => (
+		<div>
+			<p className="text-base font-semibold text-gray-700 mb-4">Add Information</p>
+
+			{successMessage && (
+				<div className="mb-4 text-base text-green-700 bg-green-50 border border-green-200 rounded-lg px-4 py-3">
+					{successMessage}
+				</div>
+			)}
+			{errorMessage && (
+				<div className="mb-4 text-base text-red-700 bg-red-50 border border-red-200 rounded-lg px-4 py-3">
+					{errorMessage}
+				</div>
+			)}
+
+			<div className="mb-5">
+				<label className="block text-base text-gray-600 mb-2">First name</label>
+				<input
+					type="text"
+					value={values.firstName}
+					onChange={(e) => handlers.setFirstName(e.target.value)}
+					className="w-full px-4 py-3 bg-gray-100 rounded-md text-base text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
+				/>
+			</div>
+
+			<div className="mb-5">
+				<label className="block text-base text-gray-600 mb-2">Last name</label>
+				<input
+					type="text"
+					value={values.lastName}
+					onChange={(e) => handlers.setLastName(e.target.value)}
+					className="w-full px-4 py-3 bg-gray-100 rounded-md text-base text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
+				/>
+			</div>
+
+			<div className="mb-5">
+				<label className="block text-base text-gray-600 mb-2">Email address</label>
+				<input
+					type="email"
+					value={values.email}
+					onChange={(e) => handlers.setEmail(e.target.value)}
+					className="w-full px-4 py-3 bg-gray-100 rounded-md text-base text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
+				/>
+			</div>
+
+			<div className="mb-8">
+				<label className="block text-base text-gray-600 mb-2">Department</label>
+				<select
+					value={values.department}
+					onChange={(e) => handlers.setDepartment(e.target.value)}
+					className="w-64 px-4 py-3 bg-gray-100 rounded-md text-base text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300 cursor-pointer"
+				>
+					<option value="">Select</option>
+					{departments.map((dept) => (
+						<option key={dept} value={dept}>
+							{dept}
+						</option>
+					))}
+				</select>
+			</div>
+
+			<div className="flex justify-end">
+				<button
+					onClick={handleSubmit}
+					disabled={isSubmitting}
+					className="bg-gray-900 hover:bg-gray-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white text-base font-medium px-6 py-3 rounded-lg transition-colors"
+				>
+					{isSubmitting ? "Sending..." : "Send Invite"}
+				</button>
+			</div>
+		</div>
+	);
+    return (
+        <>
+            <style>{`
+                @keyframes fadeIn {
+                    from { opacity: 0; transform: translateY(6px); }
+                    to { opacity: 1; transform: translateY(0); }
+                }
+            `}</style>
+            <div className="bg-white rounded-xl border border-gray-200 p-8 h-full">
+                <h1 className="text-3xl font-bold text-gray-900">Add Team Members</h1>
+                <p className="text-gray-500 text-base mt-1 mb-6">
+                    Send invitations for interviewers and candidates to join your team!
+                </p>
+
+                {/* Tabs */}
+                <div className="border-b border-gray-200 mb-6">
+                    <div className="flex">
+                        <button
+                            onClick={() => setActiveTab("interviewers")}
+                            className={`pb-3 px-4 text-base font-medium transition-colors ${
+                                activeTab === "interviewers"
+                                    ? "border-b-2 border-gray-900 text-gray-900"
+                                    : "text-gray-400 hover:text-gray-600"
+                            }`}
+                        >
+                            Add Interviewers
+                        </button>
+                        <button
+                            onClick={() => setActiveTab("candidates")}
+                            className={`pb-3 px-4 text-base font-medium transition-colors ${
+                                activeTab === "candidates"
+                                    ? "border-b-2 border-gray-900 text-gray-900"
+                                    : "text-gray-400 hover:text-gray-600"
+                            }`}
+                        >
+                            Add Candidates
+                        </button>
+                    </div>
+                </div>
+
+                <div key={activeTab} style={{ animation: "fadeIn 0.2s ease-in-out" }}>
+                    {activeTab === "interviewers"
+                        ? formUI(
+                                { firstName, lastName, email, department },
+                                { setFirstName, setLastName, setEmail, setDepartment },
+                                isSubmitting,
+                                successMessage,
+                                errorMessage,
+                                handleSendInvite
+                        )
+                        : formUI(
+                                { firstName: candidateFirstName, lastName: candidateLastName, email: candidateEmail, department: candidateDepartment },
+                                { setFirstName: setCandidateFirstName, setLastName: setCandidateLastName, setEmail: setCandidateEmail, setDepartment: setCandidateDepartment },
+                                isCandidateSubmitting,
+                                candidateSuccessMessage,
+                                candidateErrorMessage,
+                                handleSendCandidateInvite
+                        )}
+                </div>
+            </div>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/frontend/src/features/dashboard/Dashboard.tsx b/frontend/src/features/dashboard/Dashboard.tsx
index b8dffb8..5cf760d 100644
--- a/frontend/src/features/dashboard/Dashboard.tsx
+++ b/frontend/src/features/dashboard/Dashboard.tsx
@@ -7,9 +7,15 @@ import {
 	Availability,
 } from "./components";
 import { AdminSettings } from "../admin/components";
+import AddInterviewers from "../admin/components/AddInterviewers";
+import { useContext } from "react";
+import { AuthContext } from "@/features/auth/services/AuthContext";
+import { UserRole } from "@/features/auth/types/authTypes";
 
 export default function Dashboard() {
 	const [activePage, setActivePage] = useState<string>("dashboard");
+	const auth = useContext(AuthContext);
+	const isCandidate = auth?.user?.role === UserRole.CANDIDATE;
 
 	return (
 		<div className="flex flex-col h-screen">
@@ -30,9 +36,11 @@ export default function Dashboard() {
 						<AdminSettings />
 					) : activePage === "availability" ? (
 						<Availability />
+					) : activePage === "add-interviewers" && !isCandidate ? (
+						<AddInterviewers />
 					) : null}
 				</main>
 			</div>
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/features/dashboard/components/Sidebar.tsx b/frontend/src/features/dashboard/components/Sidebar.tsx
index 6dffbdd..2892dbb 100644
--- a/frontend/src/features/dashboard/components/Sidebar.tsx
+++ b/frontend/src/features/dashboard/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { CalendarDays, LayoutDashboard, Users, Settings, Plus } from "lucide-react";
+import { CalendarDays, LayoutDashboard, Users, Settings, Plus, UserPlus } from "lucide-react";
 import { useContext } from "react";
 import { AuthContext } from "@/features/auth/services/AuthContext";
 import { UserRole } from "@/features/auth/types/authTypes";
@@ -80,11 +80,25 @@ export default function DashboardSidebar({ activePage = "dashboard", onPageChang
 							<span>Admin Settings</span>
 						</button>
 
+						<button
+							onClick={() => onPageChange?.("add-interviewers")}
+							className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-colors ${
+								activePage === "add-interviewers"
+									? "bg-blue-100 text-blue-700 font-semibold"
+									: "text-gray-600 hover:bg-gray-200"
+							}`}
+						>
+							<UserPlus size={20} />
+							<span>Add Interviewers</span>
+						</button>
+
 						{/* Schedule Interviews Button */}
 						<button className="mt-auto flex items-center justify-center space-x-2 bg-black text-white py-3 px-4 rounded-lg font-medium hover:bg-gray-800 transition-colors">
 							<Plus size={20} className="text-white" />
 							<span>Schedule Interviews</span>
 						</button>
+
+						
 					</>
 				)}
 			</nav>

From ec6aa6869f1222db041b536e33bc2552ad065e6a Mon Sep 17 00:00:00 2001
From: Hunter Shierman <hshierman@gmail.com>
Date: Sat, 7 Mar 2026 13:07:18 -0500
Subject: [PATCH 2/2] feat: add candidate availability page with detail view

- Add CandidateAvailability component with search and status filter tabs
- Add CandidateCalendar detail view accessible by clicking a candidate card
- Add candidateTypes.ts to share Candidate interface and statusConfig
- Add AddInterviewers component with tabbed form for interviewers and candidates
- Update AdminSettings with larger fonts and spacing to match design system
- Update DashboardSidebar with new nav items for candidate availability and add interviewers
- Update Dashboard to conditionally render new pages based on activePage and role
---
 .../admin/components/AddInterviewers.tsx      |   2 +-
 .../admin/components/AdminSettings.tsx        |  96 +++--
 .../components/CandidateAvailability.tsx      | 388 ++++++++++++++++++
 .../admin/components/CandidateCalendar.tsx    | 122 ++++++
 frontend/src/features/admin/types/index.ts    |  27 +-
 frontend/src/features/dashboard/Dashboard.tsx |   3 +
 .../features/dashboard/components/Sidebar.tsx |  14 +-
 7 files changed, 596 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/features/admin/components/CandidateAvailability.tsx
 create mode 100644 frontend/src/features/admin/components/CandidateCalendar.tsx

diff --git a/frontend/src/features/admin/components/AddInterviewers.tsx b/frontend/src/features/admin/components/AddInterviewers.tsx
index 0d17ae7..41aa189 100644
--- a/frontend/src/features/admin/components/AddInterviewers.tsx
+++ b/frontend/src/features/admin/components/AddInterviewers.tsx
@@ -183,7 +183,7 @@ export default function AddInterviewers({ departments = ["Engineering", "Design"
                     to { opacity: 1; transform: translateY(0); }
                 }
             `}</style>
-            <div className="bg-white rounded-xl border border-gray-200 p-8 h-full">
+            <div className="bg-white rounded-xl border border-gray-200 p-8 max-w-5xl">
                 <h1 className="text-3xl font-bold text-gray-900">Add Team Members</h1>
                 <p className="text-gray-500 text-base mt-1 mb-6">
                     Send invitations for interviewers and candidates to join your team!
diff --git a/frontend/src/features/admin/components/AdminSettings.tsx b/frontend/src/features/admin/components/AdminSettings.tsx
index 2a357a0..5212c2d 100644
--- a/frontend/src/features/admin/components/AdminSettings.tsx
+++ b/frontend/src/features/admin/components/AdminSettings.tsx
@@ -37,7 +37,6 @@ export default function AdminSettings() {
 	const [interviewersPerInterviewee, setInterviewersPerInterviewee] = useState<number>(2);
 	const [maxInterviewsPerDay, setMaxInterviewsPerDay] = useState<number>(5);
 
-	// Input visibility states
 	const [showRoleInput, setShowRoleInput] = useState(false);
 	const [newRoleName, setNewRoleName] = useState("");
 	const [showDeptInput, setShowDeptInput] = useState(false);
@@ -75,9 +74,7 @@ export default function AdminSettings() {
 
 	const inviteModerator = () => {
 		if (newModeratorEmail.trim()) {
-			// This would typically make an API call to send an invite email
 			console.log("Inviting moderator:", newModeratorEmail);
-			// For demo purposes, add them to the list
 			setModerators([
 				...moderators,
 				{
@@ -93,7 +90,6 @@ export default function AdminSettings() {
 	};
 
 	const handleSave = () => {
-		// This would typically make an API call to save all settings
 		console.log("Saving settings:", {
 			moderators,
 			roles,
@@ -105,35 +101,35 @@ export default function AdminSettings() {
 	};
 
 	return (
-		<div className="max-w-4xl space-y-6">
+		<div className="space-y-6 max-w-7xl">
 			{/* Header */}
 			<h1 className="text-3xl font-bold text-gray-900">Admin Settings</h1>
 
 			{/* Moderators Section */}
-			<div className="bg-white p-6 rounded-lg shadow-sm">
-				<div className="flex items-center justify-between mb-4">
-					<h2 className="text-lg font-semibold text-gray-900">Team Moderators</h2>
+			<div className="bg-white p-8 rounded-xl border border-gray-200">
+				<div className="flex items-center justify-between mb-6">
+					<h2 className="text-xl font-semibold text-gray-900">Team Moderators</h2>
 					<button
 						onClick={() => setShowModeratorInput(!showModeratorInput)}
-						className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
+						className="px-4 py-2 bg-blue-600 text-white text-base rounded-md hover:bg-blue-700 transition-colors"
 					>
 						+ Invite
 					</button>
 				</div>
 
 				{showModeratorInput && (
-					<div className="mb-4 flex gap-2">
+					<div className="mb-5 flex gap-2">
 						<input
 							type="email"
 							value={newModeratorEmail}
 							onChange={(e) => setNewModeratorEmail(e.target.value)}
 							placeholder="Enter moderator email"
-							className="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+							className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 							onKeyPress={(e) => e.key === "Enter" && inviteModerator()}
 						/>
 						<button
 							onClick={inviteModerator}
-							className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
+							className="px-5 py-3 bg-blue-600 text-white text-base rounded-md hover:bg-blue-700 transition-colors"
 						>
 							Send Invite
 						</button>
@@ -142,7 +138,7 @@ export default function AdminSettings() {
 								setShowModeratorInput(false);
 								setNewModeratorEmail("");
 							}}
-							className="px-4 py-2 bg-gray-300 text-gray-700 text-sm rounded-md hover:bg-gray-400 transition-colors"
+							className="px-5 py-3 bg-gray-300 text-gray-700 text-base rounded-md hover:bg-gray-400 transition-colors"
 						>
 							Cancel
 						</button>
@@ -153,12 +149,12 @@ export default function AdminSettings() {
 					{moderators.map((moderator) => (
 						<div
 							key={moderator.id}
-							className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-3 py-1.5 text-sm"
+							className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-4 py-2 text-base"
 						>
 							<span className="text-gray-700">
 								{moderator.name}
 								{moderator.isMain && (
-									<span className="text-gray-500 text-xs ml-1">(main)</span>
+									<span className="text-gray-500 text-sm ml-1">(main)</span>
 								)}
 							</span>
 							{!moderator.isMain && (
@@ -166,7 +162,7 @@ export default function AdminSettings() {
 									onClick={() => removeModerator(moderator.id)}
 									className="text-gray-400 hover:text-red-500 transition-colors ml-1"
 								>
-									<X size={14} />
+									<X size={16} />
 								</button>
 							)}
 						</div>
@@ -175,13 +171,13 @@ export default function AdminSettings() {
 			</div>
 
 			{/* Auto Scheduling Preferences Section */}
-			<div className="bg-white p-6 rounded-lg shadow-sm">
-				<h2 className="text-lg font-semibold text-gray-900 mb-4">
+			<div className="bg-white p-8 rounded-xl border border-gray-200">
+				<h2 className="text-xl font-semibold text-gray-900 mb-6">
 					Auto Scheduling Preferences
 				</h2>
-				<div className="space-y-4">
+				<div className="space-y-6">
 					<div>
-						<label className="block text-sm font-medium text-gray-700 mb-1">
+						<label className="block text-base font-medium text-gray-700 mb-2">
 							Number of Interviewers per Interviewee
 						</label>
 						<input
@@ -189,15 +185,15 @@ export default function AdminSettings() {
 							min="1"
 							value={interviewersPerInterviewee}
 							onChange={(e) => setInterviewersPerInterviewee(parseInt(e.target.value) || 0)}
-							className="w-full md:w-48 px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+							className="w-full md:w-48 px-4 py-3 text-base border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 							placeholder="e.g., 2"
 						/>
-						<p className="text-xs text-gray-500 mt-1">
+						<p className="text-sm text-gray-500 mt-2">
 							Set how many interviewers should meet with each candidate
 						</p>
 					</div>
 					<div>
-						<label className="block text-sm font-medium text-gray-700 mb-1">
+						<label className="block text-base font-medium text-gray-700 mb-2">
 							Max Interviews per Day per Interviewer
 						</label>
 						<input
@@ -205,10 +201,10 @@ export default function AdminSettings() {
 							min="1"
 							value={maxInterviewsPerDay}
 							onChange={(e) => setMaxInterviewsPerDay(parseInt(e.target.value) || 0)}
-							className="w-full md:w-48 px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+							className="w-full md:w-48 px-4 py-3 text-base border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 							placeholder="e.g., 5"
 						/>
-						<p className="text-xs text-gray-500 mt-1">
+						<p className="text-sm text-gray-500 mt-2">
 							Limit daily interviews to prevent interviewer burnout
 						</p>
 					</div>
@@ -218,31 +214,31 @@ export default function AdminSettings() {
 			{/* Two Column Layout for Roles and Departments */}
 			<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 				{/* Manage Roles Section */}
-				<div className="bg-white p-6 rounded-lg shadow-sm">
-					<div className="flex items-center justify-between mb-4">
-						<h2 className="text-lg font-semibold text-gray-900">Interview Roles</h2>
+				<div className="bg-white p-8 rounded-xl border border-gray-200">
+					<div className="flex items-center justify-between mb-6">
+						<h2 className="text-xl font-semibold text-gray-900">Interview Roles</h2>
 						<button
 							onClick={() => setShowRoleInput(!showRoleInput)}
-							className="px-3 py-1.5 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700 transition-colors"
+							className="px-4 py-2 bg-gray-600 text-white text-base rounded-md hover:bg-gray-700 transition-colors"
 						>
 							+ Add
 						</button>
 					</div>
-					<p className="text-xs text-gray-500 mb-3">Roles available for interviewees</p>
+					<p className="text-sm text-gray-500 mb-4">Roles available for interviewees</p>
 
 					{showRoleInput && (
-						<div className="mb-3 flex gap-2">
+						<div className="mb-4 flex gap-2">
 							<input
 								type="text"
 								value={newRoleName}
 								onChange={(e) => setNewRoleName(e.target.value)}
 								placeholder="Enter role name"
-								className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+								className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 								onKeyPress={(e) => e.key === "Enter" && addRole()}
 							/>
 							<button
 								onClick={addRole}
-								className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
+								className="px-4 py-3 bg-blue-600 text-white text-base rounded-md hover:bg-blue-700"
 							>
 								Add
 							</button>
@@ -251,7 +247,7 @@ export default function AdminSettings() {
 									setShowRoleInput(false);
 									setNewRoleName("");
 								}}
-								className="px-3 py-1.5 bg-gray-300 text-gray-700 text-sm rounded-md hover:bg-gray-400"
+								className="px-4 py-3 bg-gray-300 text-gray-700 text-base rounded-md hover:bg-gray-400"
 							>
 								Cancel
 							</button>
@@ -262,14 +258,14 @@ export default function AdminSettings() {
 						{roles.map((role) => (
 							<div
 								key={role.id}
-								className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-3 py-1.5 text-sm"
+								className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-4 py-2 text-base"
 							>
 								<span className="text-gray-700">{role.name}</span>
 								<button
 									onClick={() => removeRole(role.id)}
 									className="text-gray-400 hover:text-red-500 transition-colors ml-1"
 								>
-									<X size={14} />
+									<X size={16} />
 								</button>
 							</div>
 						))}
@@ -277,31 +273,31 @@ export default function AdminSettings() {
 				</div>
 
 				{/* Manage Departments Section */}
-				<div className="bg-white p-6 rounded-lg shadow-sm">
-					<div className="flex items-center justify-between mb-4">
-						<h2 className="text-lg font-semibold text-gray-900">Departments</h2>
+				<div className="bg-white p-8 rounded-xl border border-gray-200">
+					<div className="flex items-center justify-between mb-6">
+						<h2 className="text-xl font-semibold text-gray-900">Departments</h2>
 						<button
 							onClick={() => setShowDeptInput(!showDeptInput)}
-							className="px-3 py-1.5 bg-gray-600 text-white text-sm rounded-md hover:bg-gray-700 transition-colors"
+							className="px-4 py-2 bg-gray-600 text-white text-base rounded-md hover:bg-gray-700 transition-colors"
 						>
 							+ Add
 						</button>
 					</div>
-					<p className="text-xs text-gray-500 mb-3">Departments for interviewers</p>
+					<p className="text-sm text-gray-500 mb-4">Departments for interviewers</p>
 
 					{showDeptInput && (
-						<div className="mb-3 flex gap-2">
+						<div className="mb-4 flex gap-2">
 							<input
 								type="text"
 								value={newDeptName}
 								onChange={(e) => setNewDeptName(e.target.value)}
 								placeholder="Enter department name"
-								className="flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+								className="flex-1 px-4 py-3 text-base border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
 								onKeyPress={(e) => e.key === "Enter" && addDepartment()}
 							/>
 							<button
 								onClick={addDepartment}
-								className="px-3 py-1.5 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700"
+								className="px-4 py-3 bg-blue-600 text-white text-base rounded-md hover:bg-blue-700"
 							>
 								Add
 							</button>
@@ -310,7 +306,7 @@ export default function AdminSettings() {
 									setShowDeptInput(false);
 									setNewDeptName("");
 								}}
-								className="px-3 py-1.5 bg-gray-300 text-gray-700 text-sm rounded-md hover:bg-gray-400"
+								className="px-4 py-3 bg-gray-300 text-gray-700 text-base rounded-md hover:bg-gray-400"
 							>
 								Cancel
 							</button>
@@ -321,14 +317,14 @@ export default function AdminSettings() {
 						{departments.map((dept) => (
 							<div
 								key={dept.id}
-								className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-3 py-1.5 text-sm"
+								className="inline-flex items-center gap-1.5 bg-gray-100 rounded-md px-4 py-2 text-base"
 							>
 								<span className="text-gray-700">{dept.name}</span>
 								<button
 									onClick={() => removeDepartment(dept.id)}
 									className="text-gray-400 hover:text-red-500 transition-colors ml-1"
 								>
-									<X size={14} />
+									<X size={16} />
 								</button>
 							</div>
 						))}
@@ -337,14 +333,14 @@ export default function AdminSettings() {
 			</div>
 
 			{/* Save Button */}
-			<div className="flex justify-end pt-2">
+			<div className="flex justify-end pt-2 pb-8">
 				<button
 					onClick={handleSave}
-					className="px-6 py-2 bg-black text-white text-sm font-medium rounded-md hover:bg-gray-800 transition-colors"
+					className="px-6 py-3 bg-gray-900 text-white text-base font-medium rounded-lg hover:bg-gray-700 transition-colors"
 				>
 					Save Changes
 				</button>
 			</div>
 		</div>
 	);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/features/admin/components/CandidateAvailability.tsx b/frontend/src/features/admin/components/CandidateAvailability.tsx
new file mode 100644
index 0000000..9bc47c0
--- /dev/null
+++ b/frontend/src/features/admin/components/CandidateAvailability.tsx
@@ -0,0 +1,388 @@
+import { useState } from "react";
+import { Search, User, ChevronRight } from "lucide-react";
+import CandidateCalendar from "./CandidateCalendar";
+import { Candidate, statusConfig } from "../types/index";
+
+const mockCandidates: Candidate[] = [
+	{
+		id: "1",
+		name: "Aisha Patel",
+		email: "aisha.patel@email.com",
+		role: "Software Engineer",
+		department: "Engineering",
+		status: "submitted",
+		availability: [
+			{
+				day: "Mon", date: "Jan 13",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Tue", date: "Jan 14",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Wed", date: "Jan 15",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Thu", date: "Jan 16",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Fri", date: "Jan 17",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+		],
+	},
+	{
+		id: "2",
+		name: "Marcus Chen",
+		email: "marcus.chen@email.com",
+		role: "Academic Coordinator",
+		department: "Academics",
+		status: "submitted",
+		availability: [
+			{
+				day: "Mon", date: "Jan 13",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Tue", date: "Jan 14",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Wed", date: "Jan 15",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Thu", date: "Jan 16",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Fri", date: "Jan 17",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+		],
+	},
+	{
+		id: "3",
+		name: "Sofia Reyes",
+		email: "sofia.reyes@email.com",
+		role: "Software Engineer",
+		department: "Engineering",
+		status: "pending",
+		availability: [],
+	},
+	{
+		id: "4",
+		name: "James Okafor",
+		email: "james.okafor@email.com",
+		role: "Software Engineer",
+		department: "Engineering",
+		status: "interviewed",
+		availability: [
+			{
+				day: "Mon", date: "Jan 13",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Tue", date: "Jan 14",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Wed", date: "Jan 15",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Thu", date: "Jan 16",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Fri", date: "Jan 17",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+		],
+	},
+	{
+		id: "5",
+		name: "Priya Nair",
+		email: "priya.nair@email.com",
+		role: "Academic Coordinator",
+		department: "Academics",
+		status: "submitted",
+		availability: [
+			{
+				day: "Mon", date: "Jan 13",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Tue", date: "Jan 14",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Wed", date: "Jan 15",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: false },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+			{
+				day: "Thu", date: "Jan 16",
+				slots: [
+					{ time: "9:00 AM", available: true },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: false },
+					{ time: "1:00 PM", available: false },
+					{ time: "2:00 PM", available: true },
+					{ time: "3:00 PM", available: false },
+				],
+			},
+			{
+				day: "Fri", date: "Jan 17",
+				slots: [
+					{ time: "9:00 AM", available: false },
+					{ time: "10:00 AM", available: true },
+					{ time: "11:00 AM", available: true },
+					{ time: "1:00 PM", available: true },
+					{ time: "2:00 PM", available: false },
+					{ time: "3:00 PM", available: true },
+				],
+			},
+		],
+	},
+];
+
+export default function CandidateAvailability() {
+	const [selectedCandidate, setSelectedCandidate] = useState<Candidate | null>(null);
+	const [search, setSearch] = useState("");
+	const [filterStatus, setFilterStatus] = useState<string>("all");
+	const [viewingAvailability, setViewingAvailability] = useState(false);
+
+	const filtered = mockCandidates.filter((c) => {
+		const matchesSearch =
+			c.name.toLowerCase().includes(search.toLowerCase()) ||
+			c.email.toLowerCase().includes(search.toLowerCase()) ||
+			c.role.toLowerCase().includes(search.toLowerCase());
+		const matchesStatus = filterStatus === "all" || c.status === filterStatus;
+		return matchesSearch && matchesStatus;
+	});
+
+	if (viewingAvailability && selectedCandidate) {
+		return (
+			<CandidateCalendar
+				candidate={selectedCandidate}
+				onBack={() => setViewingAvailability(false)}
+			/>
+		);
+	}
+
+	return (
+		<div className="max-w-3xl">
+			{/* Header */}
+			<div className="mb-6">
+				<h1 className="text-3xl font-bold text-gray-900">Candidate Availability</h1>
+				<p className="text-gray-500 text-base mt-1">
+					{mockCandidates.length} candidates total
+				</p>
+			</div>
+
+			{/* Search */}
+			<div className="relative mb-4">
+				<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+				<input
+					type="text"
+					placeholder="Search candidates..."
+					value={search}
+					onChange={(e) => setSearch(e.target.value)}
+					className="w-full pl-9 pr-4 py-3 bg-white border border-gray-200 rounded-lg text-base text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-300"
+				/>
+			</div>
+
+			{/* Filter Tabs */}
+			<div className="flex gap-1 bg-gray-100 p-1 rounded-lg mb-6">
+				{["all", "submitted", "pending", "interviewed"].map((status) => (
+					<button
+						key={status}
+						onClick={() => setFilterStatus(status)}
+						className={`flex-1 py-2.5 text-sm font-medium rounded-md capitalize transition-colors ${
+							filterStatus === status
+								? "bg-white text-gray-900 shadow-sm"
+								: "text-gray-500 hover:text-gray-700"
+						}`}
+					>
+						{status}
+					</button>
+				))}
+			</div>
+
+			{/* Candidate Cards */}
+			<div className="flex flex-col gap-3">
+				{filtered.map((candidate) => (
+					<button
+						key={candidate.id}
+						onClick={() => {
+							setSelectedCandidate(candidate);
+							setViewingAvailability(true);
+						}}
+						className="w-full text-left p-3 rounded-xl border transition-all bg-white border-gray-200 text-gray-900 hover:border-gray-300 hover:shadow-sm"
+					>
+						<div className="flex items-center gap-4">
+							<div className="w-12 h-12 rounded-full flex items-center justify-center flex-shrink-0 bg-gray-100">
+								<User size={20} className="text-gray-500" />
+							</div>
+							<div className="flex-1 min-w-0">
+								<p className="font-semibold text-base truncate">{candidate.name}</p>
+								<p className="text-sm truncate mt-0.5 text-gray-500">
+									{candidate.role} · {candidate.department}
+								</p>
+								<p className="text-sm truncate text-gray-400">
+									{candidate.email}
+								</p>
+							</div>
+							<div className="flex items-center gap-3 flex-shrink-0">
+								<span className="text-sm text-gray-400">
+									{candidate.availability.length > 0
+										? `${candidate.availability.reduce((acc, d) => acc + d.slots.filter((s) => s.available).length, 0)} open slots`
+										: "No availability yet"}
+								</span>
+								<span className={`text-sm px-3 py-1.5 rounded-full font-medium ${statusConfig[candidate.status].color}`}>
+									{statusConfig[candidate.status].label}
+								</span>
+								<ChevronRight size={18} className="text-gray-400" />
+							</div>
+						</div>
+					</button>
+				))}
+
+				{filtered.length === 0 && (
+					<div className="text-center py-12 text-gray-400 text-base">
+						No candidates found
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/frontend/src/features/admin/components/CandidateCalendar.tsx b/frontend/src/features/admin/components/CandidateCalendar.tsx
new file mode 100644
index 0000000..b932d4b
--- /dev/null
+++ b/frontend/src/features/admin/components/CandidateCalendar.tsx
@@ -0,0 +1,122 @@
+import { ArrowLeft, Clock, CheckCircle, XCircle, User } from "lucide-react";
+import { Candidate, statusConfig } from "../types/index";
+
+interface CandidateDetailProps {
+	candidate: Candidate;
+	onBack: () => void;
+}
+
+export default function CandidateDetail({ candidate, onBack }: CandidateDetailProps) {
+	const totalAvailable = candidate.availability.reduce(
+		(acc, day) => acc + day.slots.filter((s) => s.available).length,
+		0
+	);
+
+	return (
+		<div className="max-w-5xl">
+			{/* Back Button */}
+			<button
+				onClick={onBack}
+				className="flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors mb-6 text-base"
+			>
+				<ArrowLeft size={18} />
+				<span>Back to Candidates</span>
+			</button>
+
+			{/* Candidate Header */}
+			<div className="bg-white rounded-xl border border-gray-200 p-6 mb-6">
+				<div className="flex items-center justify-between">
+					<div className="flex items-center gap-4">
+						<div className="w-14 h-14 rounded-full bg-gray-100 flex items-center justify-center">
+							<User size={24} className="text-gray-500" />
+						</div>
+						<div>
+							<h1 className="text-2xl font-bold text-gray-900">{candidate.name}</h1>
+							<p className="text-gray-500 text-base">{candidate.email}</p>
+							<p className="text-gray-400 text-sm">{candidate.role} · {candidate.department}</p>
+						</div>
+					</div>
+					<div className="flex items-center gap-6">
+						<div className="text-center">
+							<p className="text-3xl font-bold text-gray-900">{totalAvailable}</p>
+							<p className="text-gray-500 text-sm">Open slots</p>
+						</div>
+						<div className="text-center">
+							<p className="text-3xl font-bold text-gray-900">{candidate.availability.length}</p>
+							<p className="text-gray-500 text-sm">Days submitted</p>
+						</div>
+						<span className={`px-3 py-1.5 rounded-full text-sm font-medium ${statusConfig[candidate.status].color}`}>
+							{statusConfig[candidate.status].label}
+						</span>
+					</div>
+				</div>
+			</div>
+
+			{/* Availability Grid */}
+			{candidate.availability.length > 0 ? (
+				<div className="bg-white rounded-xl border border-gray-200 p-6">
+					<div className="flex items-center gap-2 mb-5">
+						<Clock size={18} className="text-gray-400" />
+						<h2 className="text-base font-semibold text-gray-900">Weekly Availability</h2>
+						<div className="ml-auto flex items-center gap-4 text-sm text-gray-500">
+							<span className="flex items-center gap-1.5">
+								<CheckCircle size={14} className="text-green-500" /> Available
+							</span>
+							<span className="flex items-center gap-1.5">
+								<XCircle size={14} className="text-gray-300" /> Unavailable
+							</span>
+						</div>
+					</div>
+
+					<div className="overflow-x-auto">
+						<table className="w-full">
+							<thead>
+								<tr>
+									<th className="text-left text-sm text-gray-400 font-medium pb-3 w-24">Time</th>
+									{candidate.availability.map((day) => (
+										<th key={day.day} className="text-center pb-3">
+											<span className="block text-sm font-semibold text-gray-900">{day.day}</span>
+											<span className="block text-xs text-gray-400">{day.date}</span>
+										</th>
+									))}
+								</tr>
+							</thead>
+							<tbody>
+								{candidate.availability[0].slots.map((_, slotIndex) => (
+									<tr key={slotIndex} className="border-t border-gray-50">
+										<td className="py-2.5 text-sm text-gray-500 font-medium">
+											{candidate.availability[0].slots[slotIndex].time}
+										</td>
+										{candidate.availability.map((day) => (
+											<td key={day.day} className="py-2.5 text-center">
+												{day.slots[slotIndex].available ? (
+													<span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-green-50 border border-green-200">
+														<CheckCircle size={15} className="text-green-500" />
+													</span>
+												) : (
+													<span className="inline-flex items-center justify-center w-8 h-8 rounded-lg bg-gray-50 border border-gray-100">
+														<XCircle size={15} className="text-gray-300" />
+													</span>
+												)}
+											</td>
+										))}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				</div>
+			) : (
+				<div className="bg-white rounded-xl border border-gray-200 flex flex-col items-center justify-center gap-3 text-center p-16">
+					<div className="w-14 h-14 rounded-full bg-yellow-50 flex items-center justify-center">
+						<Clock size={24} className="text-yellow-400" />
+					</div>
+					<h3 className="text-lg font-semibold text-gray-900">No availability submitted</h3>
+					<p className="text-gray-500 text-base max-w-xs">
+						{candidate.name} hasn't submitted their availability yet.
+					</p>
+				</div>
+			)}
+		</div>
+	);
+}
\ No newline at end of file
diff --git a/frontend/src/features/admin/types/index.ts b/frontend/src/features/admin/types/index.ts
index ab0c014..b6b97e9 100644
--- a/frontend/src/features/admin/types/index.ts
+++ b/frontend/src/features/admin/types/index.ts
@@ -1 +1,26 @@
-//
\ No newline at end of file
+export interface TimeSlot {
+    time: string;
+    available: boolean;
+}
+
+export interface DayAvailability {
+    day: string;
+    date: string;
+    slots: TimeSlot[];
+}
+
+export interface Candidate {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    department: string;
+    status: "pending" | "submitted" | "interviewed";
+    availability: DayAvailability[];
+}
+
+export const statusConfig = {
+    submitted: { label: "Submitted", color: "bg-green-100 text-green-700" },
+    pending: { label: "Pending", color: "bg-yellow-100 text-yellow-700" },
+    interviewed: { label: "Interviewed", color: "bg-blue-100 text-blue-700" },
+};
\ No newline at end of file
diff --git a/frontend/src/features/dashboard/Dashboard.tsx b/frontend/src/features/dashboard/Dashboard.tsx
index 5cf760d..b535369 100644
--- a/frontend/src/features/dashboard/Dashboard.tsx
+++ b/frontend/src/features/dashboard/Dashboard.tsx
@@ -8,6 +8,7 @@ import {
 } from "./components";
 import { AdminSettings } from "../admin/components";
 import AddInterviewers from "../admin/components/AddInterviewers";
+import CandidateAvailability from "../admin/components/CandidateAvailability";
 import { useContext } from "react";
 import { AuthContext } from "@/features/auth/services/AuthContext";
 import { UserRole } from "@/features/auth/types/authTypes";
@@ -38,6 +39,8 @@ export default function Dashboard() {
 						<Availability />
 					) : activePage === "add-interviewers" && !isCandidate ? (
 						<AddInterviewers />
+					) : activePage === "candidate-availability" && !isCandidate ? (
+						<CandidateAvailability />
 					) : null}
 				</main>
 			</div>
diff --git a/frontend/src/features/dashboard/components/Sidebar.tsx b/frontend/src/features/dashboard/components/Sidebar.tsx
index 2892dbb..7bacc64 100644
--- a/frontend/src/features/dashboard/components/Sidebar.tsx
+++ b/frontend/src/features/dashboard/components/Sidebar.tsx
@@ -61,13 +61,19 @@ export default function DashboardSidebar({ activePage = "dashboard", onPageChang
 							<Users size={20} />
 							<span>Team Availability</span>
 						</a>
-						<a
-							href="#"
-							className="flex items-center space-x-3 p-3 rounded-lg text-gray-600 hover:bg-gray-200"
+	
+						<button
+							onClick={() => onPageChange?.("candidate-availability")}
+							className={`w-full flex items-center text-left space-x-3 p-3 rounded-lg transition-colors ${
+								activePage === "candidate-availability"
+									? "bg-blue-100 text-blue-700 font-semibold"
+									: "text-gray-600 hover:bg-gray-200"
+							}`}
 						>
 							<Users size={20} />
 							<span>Candidate Availability</span>
-						</a>
+						</button>
+
 						<button
 							onClick={handleAdminSettingsClick}
 							className={`w-full flex items-center space-x-3 p-3 rounded-lg transition-colors ${