Index: frontend/src/pages/departments/DepartmentDetail.js
===================================================================
--- frontend/src/pages/departments/DepartmentDetail.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ frontend/src/pages/departments/DepartmentDetail.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { departmentService } from '../../services/departmentService';
+import Loading from '../../components/Loading';
+import ErrorAlert from '../../components/ErrorAlert';
+
+function DepartmentDetail() {
+  const formatDepartmentName = (name) => {
+    if (!name) return 'N/A';
+    return name.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  };
+
+  const { departmentId } = useParams();
+  const navigate = useNavigate();
+  const [department, setDepartment] = useState(null);
+  const [doctors, setDoctors] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetchDepartmentAndDoctors();
+  }, [departmentId]);
+
+  const fetchDepartmentAndDoctors = async () => {
+    try {
+      setLoading(true);
+
+      // Fetch department details
+      const deptResponse = await departmentService.getDepartmentById(departmentId);
+      setDepartment(deptResponse.data);
+
+      // Fetch doctors for this department
+      const doctorsResponse = await departmentService.getDoctorsByDepartment(departmentId);
+      setDoctors(doctorsResponse.data);
+    } catch (err) {
+      setError('Failed to fetch data');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <Loading />;
+
+  if (!department) {
+    return (
+      <div>
+        <ErrorAlert message="Department not found" onClose={() => navigate('/departments')} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>{formatDepartmentName(department.departmentName)}</h1>
+        <button
+          onClick={() => navigate('/departments')}
+          className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400"
+        >
+          Back
+        </button>
+      </div>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className="bg-white rounded-lg shadow p-6">
+          <h2 className="text-xl font-bold mb-4">Department Information</h2>
+          <div className="space-y-3">
+            <div className="flex justify-between">
+              <span className="font-semibold text-gray-600">Department ID:</span>
+              <span className="text-gray-800">{department.departmentId}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="font-semibold text-gray-600">Name:</span>
+              <span className="text-gray-800">{formatDepartmentName(department.departmentName)}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="font-semibold text-gray-600">Total Doctors:</span>
+              <span className="text-gray-800 font-bold">{doctors.length}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-blue-50 rounded-lg shadow p-6">
+          <h2 className="text-xl font-bold mb-4">Quick Actions</h2>
+          <div className="space-y-2">
+            <button
+              onClick={() => navigate(`/departments/${departmentId}/doctors`)}
+              className="w-full bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700"
+            >
+              View All Doctors
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white rounded-lg shadow p-6 mt-6">
+        <h2 className="text-xl font-bold mb-4">Assigned Doctors</h2>
+        {doctors.length > 0 ? (
+          <table className="w-full">
+            <thead className="bg-gray-100">
+              <tr>
+                <th className="px-4 py-2 text-left">Name</th>
+                <th className="px-4 py-2 text-left">Email</th>
+                <th className="px-4 py-2 text-left">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {doctors.map((doctor) => (
+                <tr key={doctor.doctorId} className="border-t hover:bg-gray-50">
+                  <td className="px-4 py-2">
+                    {doctor.firstName} {doctor.lastName}
+                  </td>
+                  <td className="px-4 py-2">{doctor.emailAddress}</td>
+                  <td className="px-4 py-2">
+                    <button
+                      onClick={() => navigate(`/doctors/${doctor.doctorId}`)}
+                      className="text-purple-600 hover:underline text-sm"
+                    >
+                      View Profile
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <p className="text-gray-500 text-center py-4">No doctors assigned to this department</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DepartmentDetail;
Index: frontend/src/pages/departments/DepartmentList.js
===================================================================
--- frontend/src/pages/departments/DepartmentList.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ frontend/src/pages/departments/DepartmentList.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
@@ -0,0 +1,127 @@
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { departmentService } from '../../services/departmentService';
+import Loading from '../../components/Loading';
+import ErrorAlert from '../../components/ErrorAlert';
+
+function DepartmentList() {
+  const formatDepartmentName = (name) => {
+    if (!name) return 'N/A';
+    return name.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  };
+
+  const user = JSON.parse(localStorage.getItem('user') || '{}');
+  const isAdmin = user.role === 'ADMIN';
+  const [departments, setDepartments] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    fetchDepartments();
+  }, []);
+
+  const fetchDepartments = async () => {
+    try {
+      setLoading(true);
+      const response = await departmentService.getAllDepartments();
+      setDepartments(response.data);
+    } catch (err) {
+      setError('Failed to fetch departments');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <Loading />;
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 style={{ fontSize: '36px', fontWeight: 'normal', color: '#7c3aed' }}>Hospital Departments</h1>
+        {isAdmin && (
+          <div className="space-x-2">
+            <button
+              onClick={() => navigate('/departments/new')}
+              style={{
+                background: '#bfdbfe',
+                color: '#1e1035',
+                padding: '8px 16px',
+                borderRadius: '6px',
+                border: 'none',
+                cursor: 'pointer',
+                fontSize: '14px',
+                fontWeight: '400'
+              }}
+              onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'}
+              onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}
+            >
+              Add Department
+            </button>
+          </div>
+        )}
+      </div>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {departments.map((dept) => (
+          <div key={dept.departmentId} className="bg-white rounded-lg shadow p-6 hover:shadow-lg transition flex flex-col items-center">
+            <h2 style={{ fontSize: '28px', fontWeight: 'normal', marginBottom: '20px', textAlign: 'center' }}>{formatDepartmentName(dept.departmentName)}</h2>
+            <div className="flex gap-3 w-full">
+              <Link
+                to={`/departments/${dept.departmentId}/doctors`}
+                style={{
+                  flex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: '#9333ea',
+                  color: 'white',
+                  padding: '6px 10px',
+                  borderRadius: '50px',
+                  textDecoration: 'none',
+                  fontSize: '14px',
+                  fontWeight: '400'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#7e22ce'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#9333ea'}
+              >
+                View Doctors
+              </Link>
+              <Link
+                to={`/departments/${dept.departmentId}`}
+                style={{
+                  flex: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: '#7c3aed',
+                  color: 'white',
+                  padding: '6px 10px',
+                  borderRadius: '50px',
+                  textDecoration: 'none',
+                  fontSize: '14px',
+                  fontWeight: '400'
+                }}
+                onMouseEnter={(e) => e.currentTarget.style.background = '#6d28d9'}
+                onMouseLeave={(e) => e.currentTarget.style.background = '#7c3aed'}
+              >
+                View Details
+              </Link>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {departments.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-gray-500">No departments found</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default DepartmentList;
Index: frontend/src/pages/departments/DoctorsByDepartment.js
===================================================================
--- frontend/src/pages/departments/DoctorsByDepartment.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
+++ frontend/src/pages/departments/DoctorsByDepartment.js	(revision 20468d38749c5a3ed89d6df4db22905a1d0c3df1)
@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { departmentService } from '../../services/departmentService';
+import Loading from '../../components/Loading';
+import ErrorAlert from '../../components/ErrorAlert';
+
+function DoctorsByDepartment() {
+  const formatDepartmentName = (name) => {
+    if (!name) return 'N/A';
+    return name.replace(/_DEPT$/, '').replace(/_/g, ' ').split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  };
+
+  const { departmentId } = useParams();
+  const navigate = useNavigate();
+  const [department, setDepartment] = useState(null);
+  const [doctors, setDoctors] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetchDepartmentAndDoctors();
+  }, [departmentId]);
+
+  const fetchDepartmentAndDoctors = async () => {
+    try {
+      setLoading(true);
+
+      // Fetch department details
+      const deptResponse = await departmentService.getDepartmentById(departmentId);
+      setDepartment(deptResponse.data);
+
+      // Fetch doctors for this department
+      const doctorsResponse = await departmentService.getDoctorsByDepartment(departmentId);
+      setDoctors(doctorsResponse.data);
+    } catch (err) {
+      setError('Failed to fetch data');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) return <Loading />;
+
+  if (!department) {
+    return (
+      <div>
+        <ErrorAlert message="Department not found" onClose={() => navigate('/departments')} />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>{formatDepartmentName(department.departmentName)}</h1>
+          <p className="text-gray-600">Doctors in this department: {doctors.length}</p>
+        </div>
+        <button
+          onClick={() => navigate('/departments')}
+          className="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400"
+        >
+          Back
+        </button>
+      </div>
+
+      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        {doctors.length > 0 ? (
+          <table className="w-full">
+            <thead className="bg-gray-100">
+              <tr>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Name</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Email</th>
+                <th className="px-6 py-3 text-left text-sm font-semibold">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {doctors.map((doctor) => (
+                <tr key={doctor.doctorId} className="border-t hover:bg-gray-50">
+                  <td className="px-6 py-3">
+                    {doctor.firstName} {doctor.lastName}
+                  </td>
+                  <td className="px-6 py-3">{doctor.emailAddress}</td>
+                  <td className="px-6 py-3">
+                    <button
+                      onClick={() => navigate(`/doctors/${doctor.doctorId}`)}
+                      className="text-purple-600 hover:underline"
+                    >
+                      View Profile
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : (
+          <div className="p-6 text-center">
+            <p className="text-gray-500">No doctors assigned to this department</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DoctorsByDepartment;