From 04daeb86383a38d24f5f080b2d55ba358ae83fd2 Mon Sep 17 00:00:00 2001
From: ayush00git <ayush.2007.iit@gmail.com>
Date: Sun, 31 May 2026 00:54:42 +0530
Subject: [PATCH 1/2] feat: implementing ui

---
 app/src/components/layout/Footer.tsx          |  46 ++-
 app/src/components/layout/Header.tsx          |  36 +-
 app/src/components/layout/MainLayout.tsx      |   4 +-
 app/src/components/layout/Navbar.tsx          |  67 ++--
 app/src/components/layout/TopBar.tsx          |  26 +-
 app/src/pages/Landing.tsx                     | 306 ++++++++-------
 app/src/pages/auth/AccountResetPass.tsx       | 186 +++++----
 .../pages/auth/CentreHeadForgotPassword.tsx   |  73 ++--
 app/src/pages/auth/CentreHeadLogin.tsx        | 162 ++++----
 app/src/pages/auth/CentreHeadSignup.tsx       | 241 +++++++-----
 app/src/pages/auth/FacultyForgotPassword.tsx  |  71 ++--
 app/src/pages/auth/FacultyLogin.tsx           | 162 ++++----
 app/src/pages/auth/FacultySignup.tsx          | 360 +++++++++++-------
 app/src/pages/auth/StaffLogin.tsx             | 110 +++---
 app/src/pages/auth/VerifyAccount.tsx          |  14 +-
 app/src/pages/auth/WardenForgotPassword.tsx   |  71 ++--
 app/src/pages/auth/WardenLogin.tsx            | 162 ++++----
 app/src/pages/auth/WardenSignup.tsx           | 241 +++++++-----
 app/src/pages/post/CentreHeadPost.tsx         | 178 +++++----
 app/src/pages/post/FacultyPost.tsx            | 223 ++++++-----
 app/src/pages/post/WardenPost.tsx             | 221 ++++++-----
 app/src/pages/profile/Profile.tsx             | 252 ++++++------
 22 files changed, 1882 insertions(+), 1330 deletions(-)

diff --git a/app/src/components/layout/Footer.tsx b/app/src/components/layout/Footer.tsx
index f51094f..a035aab 100644
--- a/app/src/components/layout/Footer.tsx
+++ b/app/src/components/layout/Footer.tsx
@@ -2,35 +2,47 @@ import { Mail, Phone, MapPin } from 'lucide-react';
 
 export function Footer() {
   return (
-    <footer className="bg-[#1e1e1e] text-gray-300 py-5 border-t-4 border-[#ff9900] mt-auto">
-      <div className="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 gap-8">
+    <footer className="bg-[#111111] text-white mt-auto">
+      <div className="container mx-auto px-6 py-12 grid grid-cols-1 md:grid-cols-3 gap-10">
         <div>
-          <h3 className="text-white font-bold text-lg mb-4">NIT Hamirpur</h3>
-          <p className="text-sm leading-relaxed mb-4">
-            National Institute of Technology Hamirpur is a public technical university located in Hamirpur, Himachal Pradesh, India.
-            The Estate Office is responsible for the overall maintenance of the campus.
+          <h3 className="font-bold text-base mb-3">NIT Hamirpur</h3>
+          <p className="text-sm text-[#999999] leading-relaxed">
+            National Institute of Technology Hamirpur is a public technical university in Himachal Pradesh.
+            The Estate Office oversees campus maintenance and infrastructure.
           </p>
         </div>
+
+        <div>
+          <h3 className="font-bold text-base mb-3">Quick Links</h3>
+          <ul className="text-sm text-[#999999] space-y-2">
+            <li><a href="#" className="hover:text-white transition-colors">Lodge a Complaint</a></li>
+            <li><a href="#" className="hover:text-white transition-colors">Track Complaint Status</a></li>
+            <li><a href="#" className="hover:text-white transition-colors">Filing Guidelines</a></li>
+            <li><a href="#" className="hover:text-white transition-colors">Staff Portal</a></li>
+          </ul>
+        </div>
+
         <div>
-          <h3 className="text-white font-bold text-lg mb-4">Contact Us</h3>
-          <ul className="text-sm space-y-3">
-            <li className="flex items-start">
-              <MapPin className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
-              <span>National Institute of Technology, Anu, Hamirpur, Himachal Pradesh 177005</span>
+          <h3 className="font-bold text-base mb-3">Contact Us</h3>
+          <ul className="text-sm text-[#999999] space-y-3">
+            <li className="flex items-start gap-2.5">
+              <MapPin className="w-4 h-4 shrink-0 mt-0.5 text-[#666666]" />
+              <span>NIT Hamirpur, Anu, Hamirpur, Himachal Pradesh 177005</span>
             </li>
-            <li className="flex items-center">
-              <Phone className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
+            <li className="flex items-center gap-2.5">
+              <Phone className="w-4 h-4 shrink-0 text-[#666666]" />
               <span>+91-1972-254011</span>
             </li>
-            <li className="flex items-center">
-              <Mail className="w-5 h-5 mr-2 text-[#ff9900] shrink-0" />
+            <li className="flex items-center gap-2.5">
+              <Mail className="w-4 h-4 shrink-0 text-[#666666]" />
               <span>registrar@nith.ac.in</span>
             </li>
           </ul>
         </div>
       </div>
-      <div className="container mx-auto px-4 mt-8 pt-6 border-t border-gray-700 text-sm text-center">
-        <p>&copy; {new Date().getFullYear()} National Institute of Technology Hamirpur. All Rights Reserved.</p>
+
+      <div className="border-t border-[#222222] py-4 text-center text-xs text-[#555555]">
+        &copy; {new Date().getFullYear()} National Institute of Technology Hamirpur. All Rights Reserved.
       </div>
     </footer>
   );
diff --git a/app/src/components/layout/Header.tsx b/app/src/components/layout/Header.tsx
index f28d623..3cdddc1 100644
--- a/app/src/components/layout/Header.tsx
+++ b/app/src/components/layout/Header.tsx
@@ -2,28 +2,30 @@ import { Link } from 'react-router-dom';
 
 export function Header() {
   return (
-    <header className="bg-white py-2 shadow-sm relative z-20">
-      <div className="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
-        <Link to="/" className="flex items-center space-x-4 mb-4 md:mb-0">
-          <img 
-            src="/logo nith.png" 
-            alt="NITH Logo" 
-            className="w-18 h-18 object-contain"
+    <header className="bg-white border-b border-[#E5E5E5] py-4">
+      <div className="container mx-auto px-6 flex items-center justify-between">
+        <Link to="/" className="flex items-center gap-5">
+          <img
+            src="/logo nith.png"
+            alt="NITH Logo"
+            className="w-16 h-16 object-contain"
           />
-          <div className="text-center md:text-left flex flex-col">
-            <h1 className="text-xl md:text-2xl font-bold text-[#2d2d2d] leading-tight">
+          <div className="flex flex-col">
+            <span className="text-sm font-semibold text-[#666666] tracking-wide">
               राष्ट्रीय प्रौद्योगिकी संस्थान हमीरपुर
-            </h1>
-            <h2 className="text-lg md:text-xl font-bold text-[#2d2d2d] leading-tight">
+            </span>
+            <span className="text-xl font-bold text-[#111111] leading-tight">
               National Institute of Technology Hamirpur
-            </h2>
-            <p className="text-xs text-gray-600 mt-1">
-              An Institute of National Importance under Ministry of Education, Govt. of India
-              </p>
+            </span>
+            <span className="text-xs text-[#666666] mt-0.5">
+              An Institute of National Importance · Ministry of Education, Govt. of India
+            </span>
           </div>
         </Link>
-        <div className="flex space-x-4">
-          {/* Right side logos could go here */}
+
+        <div className="hidden md:flex flex-col items-end gap-1">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#666666]">Estate Office</span>
+          <span className="text-lg font-bold text-[#111111]">Complaint Management</span>
         </div>
       </div>
     </header>
diff --git a/app/src/components/layout/MainLayout.tsx b/app/src/components/layout/MainLayout.tsx
index 1130e95..921344c 100644
--- a/app/src/components/layout/MainLayout.tsx
+++ b/app/src/components/layout/MainLayout.tsx
@@ -10,11 +10,11 @@ interface MainLayoutProps {
 
 export function MainLayout({ children }: MainLayoutProps) {
   return (
-    <div className="flex flex-col min-h-screen bg-gray-50">
+    <div className="flex flex-col min-h-screen bg-white">
       <TopBar />
       <Header />
       <Navbar />
-      
+
       <div className="flex-grow flex flex-col">
         {children}
       </div>
diff --git a/app/src/components/layout/Navbar.tsx b/app/src/components/layout/Navbar.tsx
index 0fdf76c..66f9a57 100644
--- a/app/src/components/layout/Navbar.tsx
+++ b/app/src/components/layout/Navbar.tsx
@@ -1,39 +1,54 @@
-import { Search, ChevronDown } from 'lucide-react';
+import { ChevronDown } from 'lucide-react';
 import { Link } from 'react-router-dom';
 
 export function Navbar() {
   return (
-    <nav className="bg-[#4a4a4a] text-white shadow-md sticky top-0 z-30">
-      <div className="container mx-auto px-4">
-        <ul className="flex flex-wrap items-center justify-center text-sm md:text-base font-semibold">
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">
-            <Link to="/">Home</Link>
+    <nav className="bg-[#111111] text-white sticky top-0 z-30">
+      <div className="container mx-auto px-6">
+        <ul className="flex items-center text-sm font-medium">
+          <li>
+            <Link to="/" className="block px-4 py-3 hover:bg-white/10 transition-colors">
+              Home
+            </Link>
           </li>
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer flex items-center group relative">
-            Lodge Complaint <ChevronDown className="ml-1 w-4 h-4" />
-            <div className="absolute top-full left-0 hidden group-hover:block bg-white text-gray-800 shadow-lg min-w-[200px] rounded-b border border-gray-100">
-              <Link to="/faculty/signup" className="block px-4 py-2 hover:bg-gray-100">Faculty</Link>
-              <Link to="/warden/signup" className="block px-4 py-2 hover:bg-gray-100">Warden</Link>
-              <Link to="/centre-head/signup" className="block px-4 py-2 hover:bg-gray-100">Centre Head</Link>
+
+          <li className="relative group">
+            <button className="flex items-center gap-1 px-4 py-3 hover:bg-white/10 transition-colors w-full">
+              Lodge Complaint <ChevronDown className="w-3.5 h-3.5 opacity-60" />
+            </button>
+            <div className="absolute top-full left-0 hidden group-hover:block bg-white text-[#111111] shadow-lg border border-[#E5E5E5] rounded-b-lg min-w-[180px] z-50">
+              <Link to="/faculty/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Faculty</Link>
+              <Link to="/warden/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Warden</Link>
+              <Link to="/centre-head/signup" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Centre Head</Link>
             </div>
           </li>
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Track Status</li>
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer flex items-center">
-            Estate Office Administration <ChevronDown className="ml-1 w-4 h-4" />
+
+          <li>
+            <button className="block px-4 py-3 hover:bg-white/10 transition-colors">
+              Track Status
+            </button>
           </li>
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Guidelines</li>
-          <li className="px-4 py-1.5 hover:bg-[#2d2d2d] cursor-pointer">Contact Us</li>
-          
-          <li className="ml-auto px-4 py-1 flex items-center">
-            <div className="relative flex items-center">
-              <input 
-                type="text" 
-                placeholder="Search..." 
-                className="pl-9 pr-4 py-1 w-44 text-xs bg-white/10 hover:bg-white/15 focus:bg-white/20 text-white placeholder-gray-300 rounded-full border border-white/10 focus:border-[#ff9900] outline-none transition-all duration-300 focus:w-52"
-              />
-              <Search className="absolute left-3 w-3.5 h-3.5 text-gray-300 pointer-events-none" />
+
+          <li className="relative group">
+            <button className="flex items-center gap-1 px-4 py-3 hover:bg-white/10 transition-colors">
+              Administration <ChevronDown className="w-3.5 h-3.5 opacity-60" />
+            </button>
+            <div className="absolute top-full left-0 hidden group-hover:block bg-white text-[#111111] shadow-lg border border-[#E5E5E5] rounded-b-lg min-w-[180px] z-50">
+              <Link to="/staff/login" className="block px-4 py-2.5 text-sm hover:bg-[#F5F5F5] transition-colors">Staff Login</Link>
             </div>
           </li>
+
+          <li>
+            <button className="block px-4 py-3 hover:bg-white/10 transition-colors">
+              Guidelines
+            </button>
+          </li>
+
+          <li>
+            <button className="block px-4 py-3 hover:bg-white/10 transition-colors">
+              Contact Us
+            </button>
+          </li>
         </ul>
       </div>
     </nav>
diff --git a/app/src/components/layout/TopBar.tsx b/app/src/components/layout/TopBar.tsx
index a656c45..6ac302e 100644
--- a/app/src/components/layout/TopBar.tsx
+++ b/app/src/components/layout/TopBar.tsx
@@ -1,22 +1,18 @@
 export function TopBar() {
   return (
-    <div className="bg-[#2d2d2d] text-white py-1 px-4 text-xs">
+    <div className="bg-[#222222] border-b border-[#333333] py-1.5 px-4 text-xs text-[#999999]">
       <div className="container mx-auto flex justify-between items-center">
-        <div className="flex space-x-4">
-          <a href="#" className="hover:text-[#ff9900]">Grey Scale</a>
-          <span className="text-gray-400">|</span>
-          <a href="#" className="hover:text-[#ff9900]">Light Mode</a>
-          <span className="text-gray-400">|</span>
-          <a href="#" className="hover:text-[#ff9900]">Intranet</a>
-          <span className="text-gray-400">|</span>
-          <a href="#" className="hover:text-[#ff9900]">eOffice</a>
-          <span className="text-gray-400">|</span>
-          <a href="#" className="hover:text-[#ff9900]">Webmail</a>
+        <div className="flex items-center space-x-4">
+          <a href="#" className="hover:text-white transition-colors">Intranet</a>
+          <span className="text-[#444444]">|</span>
+          <a href="#" className="hover:text-white transition-colors">eOffice</a>
+          <span className="text-[#444444]">|</span>
+          <a href="#" className="hover:text-white transition-colors">Webmail</a>
         </div>
-        <div className="flex space-x-4">
-          <a href="#" className="hover:text-[#ff9900]">Directory</a>
-          <span className="text-gray-400">|</span>
-          <a href="#" className="hover:text-[#ff9900]">Contact Us</a>
+        <div className="flex items-center space-x-4">
+          <a href="#" className="hover:text-white transition-colors">Directory</a>
+          <span className="text-[#444444]">|</span>
+          <a href="#" className="hover:text-white transition-colors">Contact Us</a>
         </div>
       </div>
     </div>
diff --git a/app/src/pages/Landing.tsx b/app/src/pages/Landing.tsx
index ea70202..dbc2518 100644
--- a/app/src/pages/Landing.tsx
+++ b/app/src/pages/Landing.tsx
@@ -1,175 +1,224 @@
-import { useEffect, useState } from 'react';
-import { Search } from 'lucide-react';
-import { Link } from 'react-router-dom';
+import { useEffect, useRef, useState } from 'react';
+import { ArrowRight, Search } from 'lucide-react';
+import { Link, useNavigate } from 'react-router-dom';
 import { MainLayout } from '../components/layout/MainLayout';
 
+type Profile = { department?: string; hostel?: string; building?: string } | null;
+
+function getPostRoute(profile: NonNullable<Profile>): string {
+  if ('department' in profile) return '/faculty/post';
+  if ('hostel' in profile)     return '/warden/post';
+  return '/centre-head/post';
+}
+
 export function Landing() {
-  const [isAuth, setIsAuth] = useState<boolean | null>(null);
+  const [profile, setProfile]           = useState<Profile>(null);
+  const [isAuth, setIsAuth]             = useState<boolean | null>(null);
+  const [showLoginMenu, setShowLoginMenu] = useState(false);
+  const [trackId, setTrackId]           = useState('');
+  const menuRef                         = useRef<HTMLDivElement>(null);
+  const navigate                        = useNavigate();
 
   useEffect(() => {
     fetch('/api/profile', { credentials: 'include' })
-      .then(res => setIsAuth(res.ok))
+      .then(res => {
+        if (!res.ok) { setIsAuth(false); return null; }
+        return res.json();
+      })
+      .then(data => { if (data) { setProfile(data); setIsAuth(true); } })
       .catch(() => setIsAuth(false));
   }, []);
 
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setShowLoginMenu(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  function handleComplaintClick() {
+    if (isAuth === null) return;
+    if (isAuth && profile) {
+      navigate(getPostRoute(profile));
+    } else {
+      setShowLoginMenu(prev => !prev);
+    }
+  }
+
   return (
     <MainLayout>
-      {/* Hero Section */}
-      <div className="w-full h-[200px] relative bg-[#2d2d2d] border-b-4 border-[#ff9900] overflow-hidden flex items-center">
-        {/* Sleek Solid Grid Pattern */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:20px_20px]"></div>
-        
-        <div className="container mx-auto px-6 relative z-10 w-full">
-          {/* Left Content */}
-          <div className="flex flex-col max-w-2xl">
-            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-[#ff9900]/10 text-[#ff9900] border border-[#ff9900]/20 w-fit mb-2">
-              ESTATE OFFICE PORTAL
-            </span>
-            <h2 className="text-3xl md:text-4xl font-extrabold text-white tracking-tight leading-tight">
-              Complaint Management System
-            </h2>
-            <p className="text-sm md:text-base text-zinc-300 mt-1.5 font-medium">
-              National Institute of Technology Hamirpur
-            </p>
+
+      {/* Hero */}
+      <section className="relative bg-white border-b border-[#E5E5E5]">
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#1111111a_1px,transparent_1px),linear-gradient(to_bottom,#1111111a_1px,transparent_1px)] bg-[size:32px_32px]" />
+        <div className="relative z-10 container mx-auto px-6 py-16 flex flex-col items-center text-center">
+          <div className="inline-flex items-center border border-[#111111] rounded-lg px-3 py-1 text-xs font-bold uppercase tracking-widest text-[#111111] mb-6">
+            Estate Office Portal
+          </div>
+          <h1 className="text-4xl md:text-5xl font-extrabold text-[#111111] leading-tight tracking-tight mb-4 max-w-2xl">
+            Campus Complaint<br />Management System
+          </h1>
+          <p className="text-[#666666] text-base leading-relaxed max-w-xl mb-8">
+            A unified platform for NIT Hamirpur faculty, wardens, and centre heads to file,
+            track, and resolve campus maintenance complaints efficiently.
+          </p>
+          <div className="flex flex-wrap justify-center gap-3">
+            <div className="relative" ref={menuRef}>
+              <button
+                onClick={handleComplaintClick}
+                className="inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white text-sm font-semibold px-6 py-3 rounded-lg transition-colors duration-200 cursor-pointer"
+              >
+                Lodge a Complaint <ArrowRight className="w-4 h-4" />
+              </button>
+              <div
+                className={`absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-[#222222] border border-[#333333] rounded-lg shadow-xl overflow-hidden z-50 min-w-[190px] transition-all duration-200 origin-top ${
+                  showLoginMenu ? 'opacity-100 scale-y-100 pointer-events-auto' : 'opacity-0 scale-y-95 pointer-events-none'
+                }`}
+              >
+                <Link to="/faculty/login" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors border-b border-[#333333] cursor-pointer">
+                  Login as Faculty
+                </Link>
+                <Link to="/warden/login" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors border-b border-[#333333] cursor-pointer">
+                  Login as Warden
+                </Link>
+                <Link to="/centre-head/login" className="block px-5 py-3 text-sm font-medium text-white hover:bg-[#333333] transition-colors cursor-pointer">
+                  Login as Centre Head
+                </Link>
+              </div>
+            </div>
+            <button className="inline-flex items-center gap-2 border border-[#16a34a] text-[#16a34a] hover:bg-[#E6F7ED] text-sm font-semibold px-6 py-3 rounded-lg transition-colors duration-200 cursor-pointer">
+              Track Status <Search className="w-4 h-4" />
+            </button>
           </div>
         </div>
-      </div>
-
-      {/* Quick Tracking Bar */}
-      <div className="bg-gray-50 border-b border-gray-200 shadow-sm py-3">
-        <div className="container mx-auto px-4 flex flex-col md:flex-row items-center justify-center gap-4">
-          <div className="text-xs font-bold text-[#2d2d2d] tracking-wider uppercase">Quick Track:</div>
-          <div className="flex w-full md:w-1/2 max-w-xl relative bg-white border border-gray-200 focus-within:border-[#ff9900] focus-within:ring-4 focus-within:ring-[#ff9900]/10 rounded-full p-1 transition-all duration-300 shadow-sm">
-            <input 
-              type="text" 
-              placeholder="Enter Complaint ID (e.g. CMS-1042)" 
-              className="w-full pl-5 pr-3 py-2 outline-none text-sm text-gray-700 bg-transparent placeholder-gray-400"
+      </section>
+
+      {/* Track Bar */}
+      <section className="bg-[#F5F5F5] border-b border-[#E5E5E5] py-4">
+        <div className="container mx-auto px-6 flex flex-col sm:flex-row items-center gap-3">
+          <span className="text-xs font-bold uppercase tracking-widest text-[#666666] whitespace-nowrap">Quick Track</span>
+          <div className="flex flex-1 max-w-xl border border-[#111111] rounded-lg overflow-hidden bg-white">
+            <input
+              type="text"
+              value={trackId}
+              onChange={e => setTrackId(e.target.value)}
+              placeholder="Enter Complaint ID — e.g. CMS-1042"
+              className="flex-1 px-4 py-2.5 text-sm text-[#111111] placeholder-[#999999] outline-none bg-transparent"
             />
-            <button className="bg-[#ff9900] hover:bg-orange-500 text-white font-bold text-xs uppercase tracking-wider px-6 py-2 rounded-full transition-all duration-300 flex items-center whitespace-nowrap shadow-sm">
-              <Search className="w-3.5 h-3.5 mr-1.5" /> Track Status
+            <button className="bg-[#16a34a] hover:bg-[#15803d] text-white text-xs font-bold uppercase tracking-wider px-5 flex items-center gap-1.5 transition-colors duration-200 cursor-pointer">
+              <Search className="w-3.5 h-3.5" /> Track
             </button>
           </div>
         </div>
-      </div>
-
-      {/* Main Content Grid */}
-      <main className="container mx-auto px-4 py-12 flex-grow">
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          
-          {/* Estate Office Notices */}
-          <div className="col-span-1 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden flex flex-col h-[400px]">
-            <div className="bg-[#2d2d2d] text-white px-4 py-2 font-semibold flex justify-between items-center">
-              <span>Estate Office Notices</span>
-              <button className="text-xs bg-[#ff9900] px-2 py-1 rounded">View All</button>
+      </section>
+
+      {/* Main Content */}
+      <main className="container mx-auto px-6 py-12 flex-grow">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+          {/* Notices */}
+          <div className="border border-[#111111] rounded-lg overflow-hidden flex flex-col">
+            <div className="bg-[#111111] text-white px-5 py-3 flex items-center justify-between">
+              <span className="text-sm font-bold">Estate Office Notices</span>
+              <button className="text-xs border border-white/30 hover:border-white px-2.5 py-1 rounded-lg transition-colors">
+                View All
+              </button>
             </div>
-            <div className="p-4 overflow-y-auto flex-grow">
-              <ul className="space-y-4">
-                <li className="border-b border-gray-100 pb-2">
-                  <span className="text-xs text-red-500 font-bold block mb-1">Urgent</span>
-                  <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium leading-tight block">
-                    Scheduled Power Outage in Main Admin Block due to HT panel maintenance.
-                  </a>
-                  <span className="text-xs text-gray-500 block mt-1">20 May, 2026</span>
-                </li>
-                <li className="border-b border-gray-100 pb-2">
-                  <span className="text-xs text-[#ff9900] font-bold block mb-1">New</span>
-                  <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium leading-tight block">
-                    Water supply disruption expected in Kailash Boys Hostel for pipe repair.
-                  </a>
-                  <span className="text-xs text-gray-500 block mt-1">18 May, 2026</span>
-                </li>
-                <li className="border-b border-gray-100 pb-2">
-                  <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium leading-tight block">
-                    Annual AC servicing schedule released for Departmental Buildings.
-                  </a>
-                  <span className="text-xs text-gray-500 block mt-1">15 May, 2026</span>
-                </li>
-              </ul>
+            <div className="p-5 flex-grow overflow-y-auto space-y-4">
+              {[
+                { tag: 'Urgent', tagBg: '#FCEBEA', title: 'Scheduled power outage in Main Admin Block due to HT panel maintenance.', date: '20 May 2026' },
+                { tag: 'New', tagBg: '#E6F7ED', title: 'Water supply disruption in Kailash Boys Hostel for pipe repair work.', date: '18 May 2026' },
+                { tag: 'Info', tagBg: '#E8F4F9', title: 'Annual AC servicing schedule released for Departmental Buildings.', date: '15 May 2026' },
+                { tag: 'Notice', tagBg: '#F5F5F5', title: 'Road resurfacing work to begin near Admin block from June 1st.', date: '12 May 2026' },
+              ].map(({ tag, tagBg, title, date }) => (
+                <div key={title} className="border-b border-[#E5E5E5] pb-4 last:border-0 last:pb-0">
+                  <span
+                    className="inline-flex items-center border border-[#111111] rounded-lg px-2 py-0.5 text-xs font-bold uppercase tracking-wide text-[#111111] mb-1.5"
+                    style={{ backgroundColor: tagBg }}
+                  >
+                    {tag}
+                  </span>
+                  <p className="text-sm text-[#111111] font-medium leading-snug mb-1">{title}</p>
+                  <span className="text-xs text-[#666666]">{date}</span>
+                </div>
+              ))}
             </div>
           </div>
 
-          {/* Guidelines & Manuals */}
-          <div className="col-span-1 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden flex flex-col h-[400px]">
-            <div className="bg-[#2d2d2d] text-white px-4 py-2 font-semibold flex justify-between items-center">
-              <span>Filing Guidelines</span>
+          {/* Filing Guidelines */}
+          <div className="border border-[#111111] rounded-lg overflow-hidden flex flex-col">
+            <div className="bg-[#111111] text-white px-5 py-3">
+              <span className="text-sm font-bold">Filing Guidelines</span>
             </div>
-            <div className="p-4 overflow-y-auto flex-grow">
-              <ul className="space-y-4">
-                <li className="border-b border-gray-100 pb-3">
-                  <div className="flex space-x-3 items-start">
-                    <div className="bg-gray-100 text-gray-800 rounded px-2 py-1 text-xs font-bold mt-1">1</div>
-                    <div>
-                      <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium block">
-                        Select correct category (Civil/Electrical) to avoid delays.
-                      </a>
-                    </div>
-                  </div>
-                </li>
-                <li className="border-b border-gray-100 pb-3">
-                  <div className="flex space-x-3 items-start">
-                    <div className="bg-gray-100 text-gray-800 rounded px-2 py-1 text-xs font-bold mt-1">2</div>
-                    <div>
-                      <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium block">
-                        Provide accurate location (Building/Room No) in the description.
-                      </a>
-                    </div>
-                  </div>
-                </li>
-                <li className="border-b border-gray-100 pb-3">
-                  <div className="flex space-x-3 items-start">
-                    <div className="bg-gray-100 text-gray-800 rounded px-2 py-1 text-xs font-bold mt-1">3</div>
-                    <div>
-                      <a href="#" className="text-sm text-gray-700 hover:text-[#4a4a4a] font-medium block">
-                        Only Wardens can file complaints for hostel common areas.
-                      </a>
-                    </div>
-                  </div>
-                </li>
-                <li>
-                  <a href="#" className="text-sm text-[#4a4a4a] hover:underline font-bold block mt-2">
-                    Read Complete Manual &rarr;
-                  </a>
-                </li>
-              </ul>
+            <div className="p-5 flex-grow space-y-4">
+              {[
+                { step: '01', text: 'Select the correct category — Civil or Electrical — to ensure proper routing.' },
+                { step: '02', text: 'Provide the exact building and room number in the complaint description.' },
+                { step: '03', text: 'Only Wardens may file complaints for hostel common areas.' },
+                { step: '04', text: 'Attach relevant photos to help the team assess the issue faster.' },
+                { step: '05', text: 'Do not file duplicate complaints for the same issue.' },
+              ].map(({ step, text }) => (
+                <div key={step} className="flex gap-4 items-start">
+                  <span className="flex-shrink-0 text-xs font-bold text-[#666666] w-6 pt-0.5">{step}</span>
+                  <p className="text-sm text-[#111111] leading-snug">{text}</p>
+                </div>
+              ))}
+              <a href="#" className="inline-flex items-center gap-1 text-sm font-bold text-[#111111] hover:underline mt-2">
+                Read Complete Manual <ArrowRight className="w-3.5 h-3.5" />
+              </a>
             </div>
           </div>
 
-          {/* Quick Links & Portal Access */}
-          <div className="col-span-1 bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden flex flex-col">
-            <div className="bg-[#2d2d2d] text-white px-4 py-2 font-semibold flex justify-between items-center">
-              <span>Portal Access</span>
+          {/* Portal Access */}
+          <div className="border border-[#111111] rounded-lg overflow-hidden flex flex-col">
+            <div className="bg-[#111111] text-white px-5 py-3">
+              <span className="text-sm font-bold">Portal Access</span>
             </div>
-            <div className="p-6 flex-grow flex flex-col space-y-4">
+            <div className="p-5 flex-grow flex flex-col gap-3">
 
-              {/* Profile section */}
               {isAuth === true && (
                 <Link
                   to="/profile"
-                  className="w-full bg-[#ff9900] hover:bg-orange-500 text-white py-3 rounded text-sm font-semibold transition-colors text-center block"
+                  className="w-full bg-[#16a34a] hover:bg-[#15803d] text-white text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
                 >
                   My Profile
                 </Link>
               )}
               {isAuth === false && (
-                <p className="text-xs text-center text-gray-400 py-1">
-                  <span className="font-semibold text-[#4a4a4a]">New here?</span> Signup to create a profile.
+                <p className="text-xs text-[#666666] text-center pb-1">
+                  <span className="font-semibold text-[#111111]">New here?</span> Sign up to create your profile.
                 </p>
               )}
 
-              <Link to="/faculty/login" className="w-full bg-[#4a4a4a] hover:bg-[#2d2d2d] text-white py-3 rounded text-sm font-semibold transition-colors text-center block">
+              <Link
+                to="/faculty/login"
+                className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
+              >
                 Login as Faculty
               </Link>
-              <Link to="/warden/login" className="w-full bg-[#4a4a4a] hover:bg-[#2d2d2d] text-white py-3 rounded text-sm font-semibold transition-colors text-center block">
+              <Link
+                to="/warden/login"
+                className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
+              >
                 Login as Warden
               </Link>
-              <Link to="/centre-head/login" className="w-full bg-[#4a4a4a] hover:bg-[#2d2d2d] text-white py-3 rounded text-sm font-semibold transition-colors text-center block">
+              <Link
+                to="/centre-head/login"
+                className="w-full border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200"
+              >
                 Login as Centre Head
               </Link>
-              
-              <div className="mt-auto pt-4 border-t border-gray-200">
-                <p className="text-xs text-gray-500 mb-2">Estate Office Administration</p>
-                <Link to="/staff/login" className="w-full border border-[#4a4a4a] text-[#4a4a4a] hover:bg-gray-50 py-2 rounded text-sm font-semibold transition-colors text-center block">
-                  Staff Login (XEN / AE / JE)
+
+              <div className="mt-auto pt-4 border-t border-[#E5E5E5]">
+                <p className="text-xs text-[#666666] mb-2 font-medium">Estate Office Administration</p>
+                <Link
+                  to="/staff/login"
+                  className="w-full bg-[#222222] hover:bg-[#000000] text-white text-sm font-semibold py-3 rounded-lg text-center transition-colors duration-200 block"
+                >
+                  Staff Login — XEN / AE / JE
                 </Link>
               </div>
             </div>
@@ -177,6 +226,7 @@ export function Landing() {
 
         </div>
       </main>
+
     </MainLayout>
   );
 }
diff --git a/app/src/pages/auth/AccountResetPass.tsx b/app/src/pages/auth/AccountResetPass.tsx
index 2ea683e..dbbf88e 100644
--- a/app/src/pages/auth/AccountResetPass.tsx
+++ b/app/src/pages/auth/AccountResetPass.tsx
@@ -4,14 +4,14 @@ import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 const roleToApi: Record<string, string> = {
-  faculty: '/api/auth/faculty/reset-password',
-  warden: '/api/auth/warden/reset-password',
+  faculty:    '/api/auth/faculty/reset-password',
+  warden:     '/api/auth/warden/reset-password',
   centrehead: '/api/auth/centrehead/reset-password',
 };
 
 const roleToLoginPath: Record<string, string> = {
-  faculty: '/faculty/login',
-  warden: '/warden/login',
+  faculty:    '/faculty/login',
+  warden:     '/warden/login',
   centrehead: '/centre-head/login',
 };
 
@@ -31,17 +31,17 @@ export function AccountResetPass() {
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
 
-  const [password, setPassword] = useState('');
-  const [confirm, setConfirm] = useState('');
+  const [password, setPassword]     = useState('');
+  const [confirm, setConfirm]       = useState('');
   const [showPassword, setShowPassword] = useState(false);
-  const [showConfirm, setShowConfirm] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [showConfirm, setShowConfirm]   = useState(false);
+  const [loading, setLoading]       = useState(false);
+  const [status, setStatus]         = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]       = useState('');
 
   const userToken = searchParams.get('user');
-  const role = userToken ? decodeTokenRole(userToken) : null;
-  const apiUrl = role ? roleToApi[role] : null;
+  const role      = userToken ? decodeTokenRole(userToken) : null;
+  const apiUrl    = role ? roleToApi[role] : null;
   const loginPath = role ? roleToLoginPath[role] : null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -89,12 +89,26 @@ export function AccountResetPass() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   if (!userToken || !apiUrl) {
     return (
       <MainLayout>
-        <div className="container mx-auto px-4 py-12 flex justify-center">
-          <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg p-6 text-center">
-            <p className="text-rose-600 font-semibold">Invalid or expired reset link. Please request a new one.</p>
+        <div className="flex-grow flex flex-col">
+          <div className="border-b border-[#E5E5E5] py-5">
+            <div className="max-w-6xl mx-auto w-full px-8">
+              <h1 className="text-xl font-bold text-[#111111]">Reset Password</h1>
+              <p className="text-sm text-[#666666] mt-0.5">Invalid or expired reset link.</p>
+            </div>
+          </div>
+          <div className="flex-grow flex items-start justify-center px-8 py-12">
+            <div className="w-full max-w-sm space-y-4">
+              <p className="text-sm text-[#666666]">This reset link is invalid or has expired. Please request a new one.</p>
+              <Link to="/" className="inline-block bg-[#222222] hover:bg-[#000000] text-white text-sm font-semibold px-6 py-2.5 rounded-lg transition-colors cursor-pointer">
+                Back to Home
+              </Link>
+            </div>
           </div>
         </div>
       </MainLayout>
@@ -103,96 +117,110 @@ export function AccountResetPass() {
 
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Reset Password</h2>
-            <p className="text-sm text-zinc-300 mt-1">Enter your new password below.</p>
+      <div className="flex-grow flex flex-col">
+
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Reset Password</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Enter your new password below.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 ${
-              status === 'success'
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">New Password</label>
-                <div className="relative">
-                  <input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
+          </div>
+        )}
+
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">New Password</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className={labelCls}>New Password</label>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Confirm Password</label>
-                <div className="relative">
-                  <input
-                    type={showConfirm ? 'text' : 'password'}
-                    value={confirm}
-                    onChange={(e) => setConfirm(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowConfirm(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showConfirm ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
+                <div>
+                  <label className={labelCls}>Confirm Password</label>
+                  <div className="relative">
+                    <input
+                      type={showConfirm ? 'text' : 'password'}
+                      value={confirm}
+                      onChange={e => setConfirm(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowConfirm(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showConfirm ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Resetting...' : 'Reset Password'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Resetting…' : 'Reset Password'}
               </button>
+              {loginPath && (
+                <Link to={loginPath} className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                  Back to Login
+                </Link>
+              )}
             </div>
 
-            {loginPath && (
-              <p className="text-center text-sm text-gray-600 mt-4">
-                <Link to={loginPath} className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Back to Login</Link>
-              </p>
-            )}
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/CentreHeadForgotPassword.tsx b/app/src/pages/auth/CentreHeadForgotPassword.tsx
index d362d54..0bdd1f8 100644
--- a/app/src/pages/auth/CentreHeadForgotPassword.tsx
+++ b/app/src/pages/auth/CentreHeadForgotPassword.tsx
@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function CentreHeadForgotPassword() {
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [email, setEmail]         = useState('');
+  const [loading, setLoading]     = useState(false);
   const [submitted, setSubmitted] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [status, setStatus]       = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]     = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -41,62 +41,75 @@ export function CentreHeadForgotPassword() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Forgot Password</h2>
-            <p className="text-sm text-zinc-300 mt-1">Enter your email to receive a reset link.</p>
+      <div className="flex-grow flex flex-col">
+
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Forgot Password</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Enter your email to receive a reset link.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 ${
-              status === 'success'
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
+          </div>
+        )}
 
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-2">
-              <label className="text-sm font-semibold text-gray-700">Email Address</label>
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Email Address</h2>
               <input
                 type="email"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                placeholder="centrehead@nith.ac.in"
+                onChange={e => setEmail(e.target.value)}
+                className={inputCls}
+                placeholder="head@nith.ac.in"
                 required
               />
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading || submitted}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${(loading || submitted) ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Sending...' : submitted ? 'Link Sent' : 'Send Reset Link'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Sending…' : submitted ? 'Link Sent' : 'Send Reset Link'}
               </button>
+              <Link to="/centre-head/login" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Back to Login
+              </Link>
             </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Remembered? <Link to="/centre-head/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Back to Login</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/CentreHeadLogin.tsx b/app/src/pages/auth/CentreHeadLogin.tsx
index c01e8b5..cc2c6fe 100644
--- a/app/src/pages/auth/CentreHeadLogin.tsx
+++ b/app/src/pages/auth/CentreHeadLogin.tsx
@@ -4,12 +4,12 @@ import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function CentreHeadLogin() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail]           = useState('');
+  const [password, setPassword]     = useState('');
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [loading, setLoading]       = useState(false);
+  const [status, setStatus]         = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]       = useState('');
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -21,9 +21,7 @@ export function CentreHeadLogin() {
     try {
       const response = await fetch('/api/auth/centrehead/login', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),
         credentials: 'include',
       });
@@ -33,15 +31,13 @@ export function CentreHeadLogin() {
       if (response.ok) {
         setStatus('success');
         setMessage(data.success || 'Logged in successfully!');
-        setTimeout(() => {
-          navigate('/profile');
-        }, 1000);
+        setTimeout(() => navigate('/profile'), 1000);
       } else {
         setStatus('error');
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -49,90 +45,126 @@ export function CentreHeadLogin() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Centre Head Login</h2>
-            <p className="text-sm text-zinc-300 mt-1">Access your centre complaint dashboard.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Centre Head Login</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Access your centre complaint dashboard.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="head@nith.ac.in" 
-                  required 
-                />
-              </div>
+          </div>
+        )}
+
+        {/* Form area */}
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Credentials</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className={labelCls}>Email Address</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    type="email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    className={inputCls}
+                    placeholder="head@nith.ac.in"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
+                </div>
+
+                <div>
+                  <div className="flex items-center justify-between mb-1.5">
+                    <label className="text-sm font-semibold text-[#111111]">Password</label>
+                    <Link to="/centre-head/forgot-password" className="text-xs font-medium text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                      Forgot Password?
+                    </Link>
+                  </div>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Logging in...' : 'Login'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Logging in…' : 'Login'}
               </button>
+              <Link to="/centre-head/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Don't have an account? Register
+              </Link>
             </div>
 
-            <p className="text-center text-sm mt-2">
-              <Link to="/centre-head/forgot-password" className="text-[#ff9900] hover:underline cursor-pointer">Forgot Password?</Link>
-            </p>
+            <div className="border-t border-[#CCCCCC]" />
+
+            {/* Other roles */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h2>
+              <div className="flex gap-2">
+                <Link to="/faculty/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Faculty
+                </Link>
+                <Link to="/warden/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Warden
+                </Link>
+              </div>
+            </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Don't have an account? <Link to="/centre-head/signup" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Register here</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/CentreHeadSignup.tsx b/app/src/pages/auth/CentreHeadSignup.tsx
index 447afd1..6630de3 100644
--- a/app/src/pages/auth/CentreHeadSignup.tsx
+++ b/app/src/pages/auth/CentreHeadSignup.tsx
@@ -9,7 +9,7 @@ export function CentreHeadSignup() {
     email: '',
     password: '',
     phone_number: '',
-    building: ''
+    building: '',
   });
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -30,9 +30,7 @@ export function CentreHeadSignup() {
     try {
       const response = await fetch('/api/auth/centrehead/signup', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(formData),
         credentials: 'include',
       });
@@ -47,7 +45,7 @@ export function CentreHeadSignup() {
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -55,94 +53,113 @@ export function CentreHeadSignup() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-lg bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Centre Head Registration</h2>
-            <p className="text-sm text-zinc-300 mt-1">Register to manage complaints for your Building/Centre.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Page header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Centre Head Registration</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Register to manage complaints for your Building / Centre.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
-              {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              )}
-              <span className="font-medium">{message}</span>
-            </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  name="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="head@nith.ac.in" 
-                  required 
-                />
-              </div>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+          <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
+            {status === 'success' ? (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            <span className="font-medium">{message}</span>
+          </div>
+          </div>
+        )}
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
+
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Account Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div>
+                  <label className={labelCls}>Email Address</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    name="password"
-                    value={formData.password}
+                    type="email"
+                    name="email"
+                    value={formData.email}
                     onChange={handleChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    className={inputCls}
+                    placeholder="head@nith.ac.in"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Phone Number</label>
-                <input 
-                  type="tel" 
-                  name="phone_number"
-                  value={formData.phone_number}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="10-digit number" 
-                  pattern="[0-9]{10}" 
-                  required 
-                />
+                <div>
+                  <label className={labelCls}>Phone Number</label>
+                  <input
+                    type="tel"
+                    name="phone_number"
+                    value={formData.phone_number}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="10-digit number"
+                    pattern="[0-9]{10}"
+                    required
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className={labelCls}>Password</label>
+                  <div className="relative max-w-sm">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      name="password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
               </div>
+            </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Assigned Building / Centre</label>
-                <select 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Building Assignment</h2>
+              <div className="max-w-sm">
+                <label className={labelCls}>Assigned Building / Centre</label>
+                <select
                   name="building"
                   value={formData.building}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
+                  className={selectCls}
                   required
                 >
                   <option value="" disabled>Select your Building</option>
@@ -151,23 +168,73 @@ export function CentreHeadSignup() {
                   ))}
                 </select>
               </div>
-
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
-              <button 
-                type="submit" 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
+              <button
+                type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Registering...' : 'Register as Centre Head'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Registering…' : 'Register as Centre Head'}
               </button>
+              <Link
+                to="/centre-head/login"
+                className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer"
+              >
+                Already registered? Login
+              </Link>
             </div>
-            
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Already registered? <Link to="/centre-head/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Login here</Link>
-            </p>
+
           </form>
+
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Who can register?</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Only officially designated NIT Hamirpur centre heads with a valid institute email (<span className="font-semibold">@nith.ac.in</span>) are eligible.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Building Complaints</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Centre Heads can file complaints for academic and administrative buildings assigned to them by the Estate Office.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">After Registration</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                A verification email will be sent to your registered address. You must verify your account before filing complaints.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h3>
+              <div className="space-y-2">
+                <Link to="/faculty/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Faculty</Link>
+                <Link to="/warden/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Warden</Link>
+              </div>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/auth/FacultyForgotPassword.tsx b/app/src/pages/auth/FacultyForgotPassword.tsx
index 8c95b0e..d2d3477 100644
--- a/app/src/pages/auth/FacultyForgotPassword.tsx
+++ b/app/src/pages/auth/FacultyForgotPassword.tsx
@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function FacultyForgotPassword() {
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [email, setEmail]       = useState('');
+  const [loading, setLoading]   = useState(false);
   const [submitted, setSubmitted] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [status, setStatus]     = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]   = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -41,62 +41,75 @@ export function FacultyForgotPassword() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Forgot Password</h2>
-            <p className="text-sm text-zinc-300 mt-1">Enter your email to receive a reset link.</p>
+      <div className="flex-grow flex flex-col">
+
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Forgot Password</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Enter your email to receive a reset link.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 ${
-              status === 'success'
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
+          </div>
+        )}
 
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-2">
-              <label className="text-sm font-semibold text-gray-700">Email Address</label>
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Email Address</h2>
               <input
                 type="email"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
+                onChange={e => setEmail(e.target.value)}
+                className={inputCls}
                 placeholder="faculty@nith.ac.in"
                 required
               />
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading || submitted}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${(loading || submitted) ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Sending...' : submitted ? 'Link Sent' : 'Send Reset Link'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Sending…' : submitted ? 'Link Sent' : 'Send Reset Link'}
               </button>
+              <Link to="/faculty/login" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Back to Login
+              </Link>
             </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Remembered? <Link to="/faculty/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Back to Login</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/FacultyLogin.tsx b/app/src/pages/auth/FacultyLogin.tsx
index 5afe529..122a9a4 100644
--- a/app/src/pages/auth/FacultyLogin.tsx
+++ b/app/src/pages/auth/FacultyLogin.tsx
@@ -4,12 +4,12 @@ import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function FacultyLogin() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail]           = useState('');
+  const [password, setPassword]     = useState('');
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [loading, setLoading]       = useState(false);
+  const [status, setStatus]         = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]       = useState('');
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -21,9 +21,7 @@ export function FacultyLogin() {
     try {
       const response = await fetch('/api/auth/faculty/login', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),
         credentials: 'include',
       });
@@ -33,15 +31,13 @@ export function FacultyLogin() {
       if (response.ok) {
         setStatus('success');
         setMessage(data.success || 'Logged in successfully!');
-        setTimeout(() => {
-          navigate('/profile');
-        }, 1000);
+        setTimeout(() => navigate('/profile'), 1000);
       } else {
         setStatus('error');
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -49,90 +45,126 @@ export function FacultyLogin() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Faculty Login</h2>
-            <p className="text-sm text-zinc-300 mt-1">Access your complaint dashboard.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Faculty Login</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Access your complaint dashboard.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="faculty@nith.ac.in" 
-                  required 
-                />
-              </div>
+          </div>
+        )}
+
+        {/* Form area */}
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Credentials</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className={labelCls}>Email Address</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    type="email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    className={inputCls}
+                    placeholder="faculty@nith.ac.in"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
+                </div>
+
+                <div>
+                  <div className="flex items-center justify-between mb-1.5">
+                    <label className="text-sm font-semibold text-[#111111]">Password</label>
+                    <Link to="/faculty/forgot-password" className="text-xs font-medium text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                      Forgot Password?
+                    </Link>
+                  </div>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Logging in...' : 'Login'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Logging in…' : 'Login'}
               </button>
+              <Link to="/faculty/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Don't have an account? Register
+              </Link>
             </div>
 
-            <p className="text-center text-sm mt-2">
-              <Link to="/faculty/forgot-password" className="text-[#ff9900] hover:underline cursor-pointer">Forgot Password?</Link>
-            </p>
+            <div className="border-t border-[#CCCCCC]" />
+
+            {/* Other roles */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h2>
+              <div className="flex gap-2">
+                <Link to="/warden/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Warden
+                </Link>
+                <Link to="/centre-head/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Centre Head
+                </Link>
+              </div>
+            </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Don't have an account? <Link to="/faculty/signup" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Register here</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/FacultySignup.tsx b/app/src/pages/auth/FacultySignup.tsx
index 90e95f9..318a930 100644
--- a/app/src/pages/auth/FacultySignup.tsx
+++ b/app/src/pages/auth/FacultySignup.tsx
@@ -13,7 +13,7 @@ export function FacultySignup() {
     department: '',
     house_number: '',
     block: '',
-    type: ''
+    type: '',
   });
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -34,9 +34,7 @@ export function FacultySignup() {
     try {
       const response = await fetch('/api/auth/faculty/signup', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(formData),
         credentials: 'include',
       });
@@ -51,7 +49,7 @@ export function FacultySignup() {
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -59,107 +57,128 @@ export function FacultySignup() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-2xl bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Faculty Registration</h2>
-            <p className="text-sm text-zinc-300 mt-1">Register to lodge and track Estate Office complaints.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Page header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Faculty Registration</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Register to lodge and track Estate Office complaints.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
-              {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              )}
-              <span className="font-medium">{message}</span>
-            </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Full Name</label>
-                <input 
-                  type="text" 
-                  name="name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="Dr. John Doe" 
-                  required 
-                />
-              </div>
-              
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  name="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="john@nith.ac.in" 
-                  required 
-                />
-              </div>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+          <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
+            {status === 'success' ? (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            <span className="font-medium">{message}</span>
+          </div>
+          </div>
+        )}
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
+
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            {/* Personal Info */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Personal Information</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div>
+                  <label className={labelCls}>Full Name</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    name="password"
-                    value={formData.password}
+                    type="text"
+                    name="name"
+                    value={formData.name}
                     onChange={handleChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    className={inputCls}
+                    placeholder="Dr. John Doe"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Phone Number</label>
-                <input 
-                  type="tel" 
-                  name="phone_number"
-                  value={formData.phone_number}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="10-digit number" 
-                  pattern="[0-9]{10}" 
-                  required 
-                />
+                <div>
+                  <label className={labelCls}>Email Address</label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="john@nith.ac.in"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className={labelCls}>Password</label>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      name="password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
+
+                <div>
+                  <label className={labelCls}>Phone Number</label>
+                  <input
+                    type="tel"
+                    name="phone_number"
+                    value={formData.phone_number}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="10-digit number"
+                    pattern="[0-9]{10}"
+                    required
+                  />
+                </div>
               </div>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
 
-              <div className="space-y-2 md:col-span-2">
-                <label className="text-sm font-semibold text-gray-700">Department</label>
-                <select 
+            {/* Academic Info */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Academic Details</h2>
+              <div>
+                <label className={labelCls}>Department</label>
+                <select
                   name="department"
                   value={formData.department}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
+                  className={selectCls}
                   required
                 >
                   <option value="" disabled>Select your Department</option>
@@ -168,68 +187,127 @@ export function FacultySignup() {
                   ))}
                 </select>
               </div>
+            </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">House Number</label>
-                <input 
-                  type="text" 
-                  name="house_number"
-                  value={formData.house_number}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="e.g. 104" 
-                  required 
-                />
-              </div>
+            <div className="border-t border-[#CCCCCC]" />
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Block</label>
-                <select 
-                  name="block"
-                  value={formData.block}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  required
-                >
-                  <option value="" disabled>Select Block</option>
-                  {BLOCK_LABELS.map(block => (
-                    <option key={block.value} value={block.value}>{block.label}</option>
-                  ))}
-                </select>
-              </div>
+            {/* Residence Info */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Residence Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+                <div>
+                  <label className={labelCls}>House Number</label>
+                  <input
+                    type="text"
+                    name="house_number"
+                    value={formData.house_number}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="e.g. 104"
+                    required
+                  />
+                </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Type</label>
-                <select 
-                  name="type"
-                  value={formData.type}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  required
-                >
-                  <option value="" disabled>Select Type</option>
-                  {BLOCK_TYPES.map(t => (
-                    <option key={t.value} value={t.value}>{t.label}</option>
-                  ))}
-                </select>
-              </div>
+                <div>
+                  <label className={labelCls}>Block</label>
+                  <select
+                    name="block"
+                    value={formData.block}
+                    onChange={handleChange}
+                    className={selectCls}
+                    required
+                  >
+                    <option value="" disabled>Select Block</option>
+                    {BLOCK_LABELS.map(block => (
+                      <option key={block.value} value={block.value}>{block.label}</option>
+                    ))}
+                  </select>
+                </div>
 
+                <div>
+                  <label className={labelCls}>Type</label>
+                  <select
+                    name="type"
+                    value={formData.type}
+                    onChange={handleChange}
+                    className={selectCls}
+                    required
+                  >
+                    <option value="" disabled>Select Type</option>
+                    {BLOCK_TYPES.map(t => (
+                      <option key={t.value} value={t.value}>{t.label}</option>
+                    ))}
+                  </select>
+                </div>
+              </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
-              <button 
-                type="submit" 
+            <div className="border-t border-[#CCCCCC]" />
+
+            {/* Actions */}
+            <div className="flex items-center gap-4">
+              <button
+                type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Registering...' : 'Register as Faculty'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Registering…' : 'Register as Faculty'}
               </button>
+              <Link
+                to="/faculty/login"
+                className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer"
+              >
+                Already registered? Login
+              </Link>
             </div>
-            
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Already registered? <Link to="/faculty/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Login here</Link>
-            </p>
+
           </form>
+
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Who can register?</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Only NIT Hamirpur faculty members with an official institute email address (<span className="font-semibold">@nith.ac.in</span>) are eligible to register.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Residence Details</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Your house number, block, and type are required to correctly assign complaints related to your residential quarters.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">After Registration</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                A verification email will be sent to your registered address. You must verify your account before you can file complaints.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h3>
+              <div className="space-y-2">
+                <Link to="/warden/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Warden</Link>
+                <Link to="/centre-head/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Centre Head</Link>
+              </div>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/auth/StaffLogin.tsx b/app/src/pages/auth/StaffLogin.tsx
index 73ed41a..8aa5036 100644
--- a/app/src/pages/auth/StaffLogin.tsx
+++ b/app/src/pages/auth/StaffLogin.tsx
@@ -3,6 +3,11 @@ import { Eye, EyeOff } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 
+const gridBg = {
+  backgroundImage: `linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)`,
+  backgroundSize: '32px 32px',
+};
+
 function dashboardFor(position: string): string {
   if (position.startsWith('XEN')) return '/admin/xen';
   if (position.startsWith('AE'))  return '/admin/ae';
@@ -28,9 +33,7 @@ export function StaffLogin() {
     try {
       const response = await fetch('/api/auth/admin/login', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),
         credentials: 'include',
       });
@@ -51,7 +54,7 @@ export function StaffLogin() {
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -61,76 +64,75 @@ export function StaffLogin() {
 
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Estate Office Staff Login</h2>
-            <p className="text-sm text-zinc-300 mt-1">Secure portal for XEN / AE / JE.</p>
+      <div className="container mx-auto px-4 py-16 flex justify-center" style={gridBg}>
+        <div className="w-full max-w-md bg-white border border-[#E5E5E5] border-t-2 border-t-[#111111] rounded-lg overflow-hidden shadow-sm">
+
+          <div className="px-8 pt-8 pb-2">
+            <h2 className="text-2xl font-bold text-[#111111] tracking-tight">Staff Login</h2>
+            <p className="text-sm text-[#666666] mt-1">Secure portal for XEN / AE / JE.</p>
           </div>
 
           {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
+            <div className={`mx-8 mt-6 p-3.5 rounded-lg border text-sm flex items-start gap-2.5 ${
+              status === 'success'
+                ? 'bg-[#E6F7ED] text-[#111111] border-[#111111]'
+                : 'bg-[#FCEBEA] text-[#111111] border-[#111111]'
             }`}>
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
           )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Staff Email Address</label>
-                <input 
-                  type="email" 
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="staff@nith.ac.in" 
-                  required 
-                />
-              </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
-                  <input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
-                    required
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
-                </div>
+          <form onSubmit={handleSubmit} className="px-8 pt-6 pb-8 space-y-5">
+            <div className="space-y-1.5">
+              <label className="text-sm font-semibold text-[#111111]">Staff Email Address</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3.5 py-2.5 border border-[#111111] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#111111] text-sm"
+                placeholder="staff@nith.ac.in"
+                required
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label className="text-sm font-semibold text-[#111111]">Password</label>
+              <div className="relative">
+                <input
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3.5 py-2.5 pr-10 border border-[#111111] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#111111] text-sm"
+                  placeholder="••••••••"
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(prev => !prev)}
+                  className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
               </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
-              <button 
-                type="submit" 
+            <div className="pt-2">
+              <button
+                type="submit"
                 disabled={loading}
-                className="w-full bg-[#4a4a4a] hover:bg-[#2d2d2d] text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className="w-full bg-[#222222] hover:bg-[#000000] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200 disabled:opacity-50 cursor-pointer active:scale-[0.98] text-sm"
               >
-                {loading ? 'Logging in to Portal...' : 'Login to Portal'}
+                {loading ? 'Logging in…' : 'Login to Portal'}
               </button>
             </div>
           </form>
diff --git a/app/src/pages/auth/VerifyAccount.tsx b/app/src/pages/auth/VerifyAccount.tsx
index 3da8386..aa0e4af 100644
--- a/app/src/pages/auth/VerifyAccount.tsx
+++ b/app/src/pages/auth/VerifyAccount.tsx
@@ -83,12 +83,18 @@ export function VerifyAccount() {
 
   return (
     <MainLayout>
-      <div className="flex-1 flex flex-col items-center justify-center px-4 py-16 min-h-[60vh]">
+      <div
+        className="flex-1 flex flex-col items-center justify-center px-4 py-16 min-h-[60vh]"
+        style={{
+          backgroundImage: `linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)`,
+          backgroundSize: '32px 32px',
+        }}
+      >
 
         {/* Loading */}
         {status === 'loading' && (
           <div className="flex flex-col items-center gap-5 text-center">
-            <div className="w-16 h-16 rounded-full border-4 border-gray-200 border-t-[#ff9900] animate-spin" />
+            <div className="w-16 h-16 rounded-full border-4 border-[#E5E5E5] border-t-[#111111] animate-spin" />
             <p className="text-gray-500 font-medium">Verifying your account, please wait…</p>
           </div>
         )}
@@ -106,7 +112,7 @@ export function VerifyAccount() {
               <p className="text-gray-500 mt-1 text-sm">{message}</p>
             </div>
             <p className="text-sm text-gray-400">
-              Redirecting to login in <span className="font-bold text-[#ff9900]">{countdown}s</span>…
+              Redirecting to login in <span className="font-bold text-[#111111]">{countdown}s</span>…
             </p>
           </div>
         )}
@@ -125,7 +131,7 @@ export function VerifyAccount() {
             </div>
             <Link
               to="/"
-              className="bg-[#4a4a4a] hover:bg-[#2d2d2d] text-white font-bold py-2.5 px-8 rounded transition-colors text-sm"
+              className="bg-[#222222] hover:bg-[#111111] text-white font-bold py-2.5 px-8 rounded-lg transition-colors text-sm"
             >
               Back to Home
             </Link>
diff --git a/app/src/pages/auth/WardenForgotPassword.tsx b/app/src/pages/auth/WardenForgotPassword.tsx
index 7c3efb2..825ac5f 100644
--- a/app/src/pages/auth/WardenForgotPassword.tsx
+++ b/app/src/pages/auth/WardenForgotPassword.tsx
@@ -3,11 +3,11 @@ import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function WardenForgotPassword() {
-  const [email, setEmail] = useState('');
-  const [loading, setLoading] = useState(false);
+  const [email, setEmail]         = useState('');
+  const [loading, setLoading]     = useState(false);
   const [submitted, setSubmitted] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [status, setStatus]       = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]     = useState('');
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -41,62 +41,75 @@ export function WardenForgotPassword() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Forgot Password</h2>
-            <p className="text-sm text-zinc-300 mt-1">Enter your email to receive a reset link.</p>
+      <div className="flex-grow flex flex-col">
+
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Forgot Password</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Enter your email to receive a reset link.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 ${
-              status === 'success'
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
+          </div>
+        )}
 
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-2">
-              <label className="text-sm font-semibold text-gray-700">Email Address</label>
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Email Address</h2>
               <input
                 type="email"
                 value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
+                onChange={e => setEmail(e.target.value)}
+                className={inputCls}
                 placeholder="warden@nith.ac.in"
                 required
               />
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading || submitted}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${(loading || submitted) ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Sending...' : submitted ? 'Link Sent' : 'Send Reset Link'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Sending…' : submitted ? 'Link Sent' : 'Send Reset Link'}
               </button>
+              <Link to="/warden/login" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Back to Login
+              </Link>
             </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Remembered? <Link to="/warden/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Back to Login</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/WardenLogin.tsx b/app/src/pages/auth/WardenLogin.tsx
index a677e57..dd7626d 100644
--- a/app/src/pages/auth/WardenLogin.tsx
+++ b/app/src/pages/auth/WardenLogin.tsx
@@ -4,12 +4,12 @@ import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 export function WardenLogin() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail]           = useState('');
+  const [password, setPassword]     = useState('');
   const [showPassword, setShowPassword] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<'success' | 'error' | null>(null);
-  const [message, setMessage] = useState('');
+  const [loading, setLoading]       = useState(false);
+  const [status, setStatus]         = useState<'success' | 'error' | null>(null);
+  const [message, setMessage]       = useState('');
   const navigate = useNavigate();
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -21,9 +21,7 @@ export function WardenLogin() {
     try {
       const response = await fetch('/api/auth/warden/login', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ email, password }),
         credentials: 'include',
       });
@@ -33,15 +31,13 @@ export function WardenLogin() {
       if (response.ok) {
         setStatus('success');
         setMessage(data.success || 'Logged in successfully!');
-        setTimeout(() => {
-          navigate('/profile');
-        }, 1000);
+        setTimeout(() => navigate('/profile'), 1000);
       } else {
         setStatus('error');
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -49,90 +45,126 @@ export function WardenLogin() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-md bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Warden Login</h2>
-            <p className="text-sm text-zinc-300 mt-1">Access your hostel complaint dashboard.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Warden Login</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Access your hostel complaint dashboard.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="warden@nith.ac.in" 
-                  required 
-                />
-              </div>
+          </div>
+        )}
+
+        {/* Form area */}
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Credentials</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className={labelCls}>Email Address</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    type="email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    className={inputCls}
+                    placeholder="warden@nith.ac.in"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600 cursor-pointer"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
+                </div>
+
+                <div>
+                  <div className="flex items-center justify-between mb-1.5">
+                    <label className="text-sm font-semibold text-[#111111]">Password</label>
+                    <Link to="/warden/forgot-password" className="text-xs font-medium text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                      Forgot Password?
+                    </Link>
+                  </div>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Logging in...' : 'Login'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Logging in…' : 'Login'}
               </button>
+              <Link to="/warden/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
+                Don't have an account? Register
+              </Link>
             </div>
 
-            <p className="text-center text-sm mt-2">
-              <Link to="/warden/forgot-password" className="text-[#ff9900] hover:underline cursor-pointer">Forgot Password?</Link>
-            </p>
+            <div className="border-t border-[#CCCCCC]" />
+
+            {/* Other roles */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h2>
+              <div className="flex gap-2">
+                <Link to="/faculty/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Faculty
+                </Link>
+                <Link to="/centre-head/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Centre Head
+                </Link>
+              </div>
+            </div>
 
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Don't have an account? <Link to="/warden/signup" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Register here</Link>
-            </p>
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/auth/WardenSignup.tsx b/app/src/pages/auth/WardenSignup.tsx
index e5c52e7..8063b75 100644
--- a/app/src/pages/auth/WardenSignup.tsx
+++ b/app/src/pages/auth/WardenSignup.tsx
@@ -9,7 +9,7 @@ export function WardenSignup() {
     email: '',
     password: '',
     phone_number: '',
-    hostel: ''
+    hostel: '',
   });
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -30,9 +30,7 @@ export function WardenSignup() {
     try {
       const response = await fetch('/api/auth/warden/signup', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(formData),
         credentials: 'include',
       });
@@ -47,7 +45,7 @@ export function WardenSignup() {
         const errorMsg = data.error || data.email || Object.values(data)[0] || 'An error occurred';
         setMessage(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
       }
-    } catch (err) {
+    } catch {
       setStatus('error');
       setMessage('Failed to connect to the server. Please try again.');
     } finally {
@@ -55,94 +53,113 @@ export function WardenSignup() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-lg bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Warden Registration</h2>
-            <p className="text-sm text-zinc-300 mt-1">Register to manage complaints for your Hostel.</p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Page header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Warden Registration</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Register to manage complaints for your Hostel.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-              status === 'success' 
-                ? 'bg-emerald-50 text-emerald-800 border-emerald-200' 
-                : 'bg-rose-50 text-rose-800 border-rose-200'
-            }`}>
-              {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              )}
-              <span className="font-medium">{message}</span>
-            </div>
-          )}
-          
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="space-y-4">
-              
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Email Address</label>
-                <input 
-                  type="email" 
-                  name="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="warden@nith.ac.in" 
-                  required 
-                />
-              </div>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+          <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
+            {status === 'success' ? (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            ) : (
+              <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            <span className="font-medium">{message}</span>
+          </div>
+          </div>
+        )}
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Password</label>
-                <div className="relative">
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
+
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Account Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div>
+                  <label className={labelCls}>Email Address</label>
                   <input
-                    type={showPassword ? 'text' : 'password'}
-                    name="password"
-                    value={formData.password}
+                    type="email"
+                    name="email"
+                    value={formData.email}
                     onChange={handleChange}
-                    className="w-full px-3 py-2 pr-10 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]"
-                    placeholder="••••••••"
+                    className={inputCls}
+                    placeholder="warden@nith.ac.in"
                     required
                   />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(prev => !prev)}
-                    className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-400 hover:text-gray-600"
-                    tabIndex={-1}
-                  >
-                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                  </button>
                 </div>
-              </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Phone Number</label>
-                <input 
-                  type="tel" 
-                  name="phone_number"
-                  value={formData.phone_number}
-                  onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
-                  placeholder="10-digit number" 
-                  pattern="[0-9]{10}" 
-                  required 
-                />
+                <div>
+                  <label className={labelCls}>Phone Number</label>
+                  <input
+                    type="tel"
+                    name="phone_number"
+                    value={formData.phone_number}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="10-digit number"
+                    pattern="[0-9]{10}"
+                    required
+                  />
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className={labelCls}>Password</label>
+                  <div className="relative max-w-sm">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      name="password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
               </div>
+            </div>
 
-              <div className="space-y-2">
-                <label className="text-sm font-semibold text-gray-700">Assigned Hostel</label>
-                <select 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Hostel Assignment</h2>
+              <div className="max-w-sm">
+                <label className={labelCls}>Assigned Hostel</label>
+                <select
                   name="hostel"
                   value={formData.hostel}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]" 
+                  className={selectCls}
                   required
                 >
                   <option value="" disabled>Select your Hostel</option>
@@ -151,23 +168,73 @@ export function WardenSignup() {
                   ))}
                 </select>
               </div>
-
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
-              <button 
-                type="submit" 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
+              <button
+                type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50 cursor-pointer"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Registering...' : 'Register as Warden'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Registering…' : 'Register as Warden'}
               </button>
+              <Link
+                to="/warden/login"
+                className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer"
+              >
+                Already registered? Login
+              </Link>
             </div>
-            
-            <p className="text-center text-sm text-gray-600 mt-4">
-              Already registered? <Link to="/warden/login" className="text-[#4a4a4a] font-semibold hover:underline cursor-pointer">Login here</Link>
-            </p>
+
           </form>
+
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Who can register?</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Only officially assigned NIT Hamirpur wardens with a valid institute email (<span className="font-semibold">@nith.ac.in</span>) are eligible to register.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Hostel Complaints</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Wardens are the only role authorised to file complaints for hostel common areas such as corridors, washrooms, and common rooms.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">After Registration</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                A verification email will be sent to your registered address. You must verify your account before filing complaints.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h3>
+              <div className="space-y-2">
+                <Link to="/faculty/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Faculty</Link>
+                <Link to="/centre-head/signup" className="block w-full bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg text-center transition-colors cursor-pointer">Register as Centre Head</Link>
+              </div>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/post/CentreHeadPost.tsx b/app/src/pages/post/CentreHeadPost.tsx
index 2869b86..b81d654 100644
--- a/app/src/pages/post/CentreHeadPost.tsx
+++ b/app/src/pages/post/CentreHeadPost.tsx
@@ -52,107 +52,153 @@ export function CentreHeadPost() {
     }
   };
 
-  const inputCls =
-    'w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]';
-  const labelCls = 'text-sm font-semibold text-gray-700';
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
 
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-2xl bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-
-          {/* Header */}
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Submit a Centre Complaint</h2>
-            <p className="text-sm text-zinc-300 mt-1">
-              Lodge a civil or electrical maintenance complaint for your building.
-            </p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Submit a Centre Complaint</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Lodge a civil or electrical maintenance complaint for your building.</p>
           </div>
+        </div>
 
-          {/* Alert */}
-          {message && (
-            <div
-              className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-                status === 'success'
-                  ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                  : 'bg-rose-50 text-rose-800 border-rose-200'
-              }`}
-            >
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
+          </div>
+        )}
 
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="grid grid-cols-1 gap-6">
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
 
-              {/* Type of Post */}
-              <div className="space-y-2">
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Complaint Details</h2>
+              <div className="max-w-sm">
                 <label className={labelCls}>Type of Complaint</label>
-                <select
-                  name="type_of_post"
-                  value={formData.type_of_post}
-                  onChange={handleChange}
-                  className={inputCls}
-                  required
-                >
+                <select name="type_of_post" value={formData.type_of_post} onChange={handleChange} className={selectCls} required>
                   <option value="" disabled>Select Type</option>
                   {POST_TYPES.map(t => (
                     <option key={t.value} value={t.value}>{t.label}</option>
                   ))}
                 </select>
               </div>
+            </div>
 
-              {/* Title */}
-              <div className="space-y-2">
-                <label className={labelCls}>Title</label>
-                <input
-                  type="text"
-                  name="title"
-                  value={formData.title}
-                  onChange={handleChange}
-                  className={inputCls}
-                  placeholder="e.g. Faulty wiring in corridor"
-                  required
-                />
-              </div>
-
-              {/* Description */}
-              <div className="space-y-2">
-                <label className={labelCls}>Description</label>
-                <textarea
-                  name="description"
-                  value={formData.description}
-                  onChange={handleChange}
-                  className={`${inputCls} resize-none`}
-                  placeholder="Provide a detailed description of the issue..."
-                  rows={5}
-                  required
-                />
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Title & Description</h2>
+              <div className="space-y-5">
+                <div>
+                  <label className={labelCls}>Title</label>
+                  <input
+                    type="text"
+                    name="title"
+                    value={formData.title}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="e.g. Faulty wiring in corridor"
+                    required
+                  />
+                </div>
+                <div>
+                  <label className={labelCls}>Description</label>
+                  <textarea
+                    name="description"
+                    value={formData.description}
+                    onChange={handleChange}
+                    className={`${inputCls} resize-none`}
+                    placeholder="Provide a detailed description including the floor or zone..."
+                    rows={6}
+                    required
+                  />
+                </div>
               </div>
-
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Submitting...' : 'Submit Complaint'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
+
           </form>
 
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Filing Guidelines</h3>
+              <ol className="space-y-3">
+                {[
+                  'File only for areas within your assigned Building or Centre.',
+                  'Select Civil or Electrical accurately — misrouting causes delays.',
+                  'Mention the specific floor or zone in the description.',
+                  'Do not file duplicate complaints for the same issue.',
+                  'Complaints are reviewed within 2 working days.',
+                ].map((text, i) => (
+                  <li key={i} className="flex gap-3 items-start">
+                    <span className="text-xs font-bold text-[#666666] shrink-0 pt-0.5">{String(i + 1).padStart(2, '0')}</span>
+                    <p className="text-sm text-[#111111] leading-snug">{text}</p>
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Centre Head Scope</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Centre Heads may only file complaints for buildings and centres under their official jurisdiction.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Complaint Types</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                <span className="font-semibold">Civil</span> — structural, plumbing, water supply.<br />
+                <span className="font-semibold">Electrical</span> — wiring, power, lighting failures.
+              </p>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/post/FacultyPost.tsx b/app/src/pages/post/FacultyPost.tsx
index 95a8e74..d879285 100644
--- a/app/src/pages/post/FacultyPost.tsx
+++ b/app/src/pages/post/FacultyPost.tsx
@@ -53,125 +53,162 @@ export function FacultyPost() {
     }
   };
 
-  const inputCls =
-    'w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]';
-  const labelCls = 'text-sm font-semibold text-gray-700';
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
 
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-2xl bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-
-          {/* Header */}
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Submit a Faculty Complaint</h2>
-            <p className="text-sm text-zinc-300 mt-1">
-              Lodge a residential or departmental maintenance complaint.
-            </p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Submit a Faculty Complaint</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Lodge a residential or departmental maintenance complaint.</p>
           </div>
+        </div>
 
-          {/* Alert */}
-          {message && (
-            <div
-              className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-                status === 'success'
-                  ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                  : 'bg-rose-50 text-rose-800 border-rose-200'
-              }`}
-            >
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-              {/* Place */}
-              <div className="space-y-2">
-                <label className={labelCls}>Complaint Area</label>
-                <select
-                  name="place"
-                  value={formData.place}
-                  onChange={handleChange}
-                  className={inputCls}
-                  required
-                >
-                  <option value="" disabled>Select Area</option>
-                  {POST_PLACES.map(p => (
-                    <option key={p.value} value={p.value}>{p.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Type of Post */}
-              <div className="space-y-2">
-                <label className={labelCls}>Type of Complaint</label>
-                <select
-                  name="type_of_post"
-                  value={formData.type_of_post}
-                  onChange={handleChange}
-                  className={inputCls}
-                  required
-                >
-                  <option value="" disabled>Select Type</option>
-                  {POST_TYPES.map(t => (
-                    <option key={t.value} value={t.value}>{t.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Title */}
-              <div className="space-y-2 md:col-span-2">
-                <label className={labelCls}>Title</label>
-                <input
-                  type="text"
-                  name="title"
-                  value={formData.title}
-                  onChange={handleChange}
-                  className={inputCls}
-                  placeholder="e.g. Water leakage in washroom"
-                  maxLength={50}
-                  required
-                />
-              </div>
-
-              {/* Description */}
-              <div className="space-y-2 md:col-span-2">
-                <label className={labelCls}>Description</label>
-                <textarea
-                  name="description"
-                  value={formData.description}
-                  onChange={handleChange}
-                  className={`${inputCls} resize-none`}
-                  placeholder="Provide a detailed description of the issue..."
-                  rows={5}
-                  required
-                />
+          </div>
+        )}
+
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
+
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Complaint Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div>
+                  <label className={labelCls}>Complaint Area</label>
+                  <select name="place" value={formData.place} onChange={handleChange} className={selectCls} required>
+                    <option value="" disabled>Select Area</option>
+                    {POST_PLACES.map(p => (
+                      <option key={p.value} value={p.value}>{p.label}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div>
+                  <label className={labelCls}>Type of Complaint</label>
+                  <select name="type_of_post" value={formData.type_of_post} onChange={handleChange} className={selectCls} required>
+                    <option value="" disabled>Select Type</option>
+                    {POST_TYPES.map(t => (
+                      <option key={t.value} value={t.value}>{t.label}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className={labelCls}>Title</label>
+                  <input
+                    type="text"
+                    name="title"
+                    value={formData.title}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="e.g. Water leakage in washroom"
+                    maxLength={50}
+                    required
+                  />
+                </div>
               </div>
+            </div>
 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Description</h2>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                className={`${inputCls} resize-none`}
+                placeholder="Provide a detailed description of the issue, including the exact location..."
+                rows={6}
+                required
+              />
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Submitting...' : 'Submit Complaint'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
+
           </form>
 
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Filing Guidelines</h3>
+              <ol className="space-y-3">
+                {[
+                  'Select Civil or Electrical to ensure the complaint reaches the right team.',
+                  'Provide the exact building and room number in the description.',
+                  'Keep the title concise — description is where detail goes.',
+                  'Do not file duplicate complaints for the same issue.',
+                  'Complaints are reviewed within 2 working days.',
+                ].map((text, i) => (
+                  <li key={i} className="flex gap-3 items-start">
+                    <span className="text-xs font-bold text-[#666666] shrink-0 pt-0.5">{String(i + 1).padStart(2, '0')}</span>
+                    <p className="text-sm text-[#111111] leading-snug">{text}</p>
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Complaint Types</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                <span className="font-semibold">Civil</span> — structural, plumbing, water supply issues.<br />
+                <span className="font-semibold">Electrical</span> — wiring, power, lighting failures.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Complaint Areas</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Faculty may file for <span className="font-semibold">residential quarters</span> and <span className="font-semibold">departmental buildings</span> only.
+              </p>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/post/WardenPost.tsx b/app/src/pages/post/WardenPost.tsx
index 6581955..7a33f0a 100644
--- a/app/src/pages/post/WardenPost.tsx
+++ b/app/src/pages/post/WardenPost.tsx
@@ -53,121 +53,164 @@ export function WardenPost() {
     }
   };
 
-  const inputCls =
-    'w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#ff9900]';
-  const labelCls = 'text-sm font-semibold text-gray-700';
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const selectCls = `${inputCls} appearance-none bg-no-repeat bg-[right_0.75rem_center] bg-[length:16px_16px] pr-9` +
+    ` bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")]`;
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
 
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-12 flex justify-center">
-        <div className="w-full max-w-2xl bg-white border border-gray-200 shadow-md rounded-lg overflow-hidden">
-
-          {/* Header */}
-          <div className="bg-[#2d2d2d] text-white px-6 py-4">
-            <h2 className="text-xl font-bold">Submit a Hostel Complaint</h2>
-            <p className="text-sm text-zinc-300 mt-1">
-              Lodge a hostel maintenance complaint on behalf of residents.
-            </p>
+      <div className="flex-grow flex flex-col">
+
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Submit a Hostel Complaint</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Lodge a hostel maintenance complaint on behalf of residents.</p>
           </div>
+        </div>
 
-          {/* Alert */}
-          {message && (
-            <div
-              className={`mx-6 mt-6 p-4 rounded-md border text-sm flex items-start space-x-2 transition-all duration-300 ${
-                status === 'success'
-                  ? 'bg-emerald-50 text-emerald-800 border-emerald-200'
-                  : 'bg-rose-50 text-rose-800 border-rose-200'
-              }`}
-            >
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-5 h-5 text-emerald-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-5 h-5 text-rose-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-
-          {/* Form */}
-          <form onSubmit={handleSubmit} className="p-6 space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-
-              {/* Room Number */}
-              <div className="space-y-2">
-                <label className={labelCls}>Room Number</label>
-                <input
-                  type="text"
-                  name="room_number"
-                  value={formData.room_number}
-                  onChange={handleChange}
-                  className={inputCls}
-                  placeholder="e.g. 204"
-                  required
-                />
-              </div>
-
-              {/* Type of Post */}
-              <div className="space-y-2">
-                <label className={labelCls}>Type of Complaint</label>
-                <select
-                  name="type_of_post"
-                  value={formData.type_of_post}
-                  onChange={handleChange}
-                  className={inputCls}
-                  required
-                >
-                  <option value="" disabled>Select Type</option>
-                  {POST_TYPES.map(t => (
-                    <option key={t.value} value={t.value}>{t.label}</option>
-                  ))}
-                </select>
-              </div>
-
-              {/* Title */}
-              <div className="space-y-2 md:col-span-2">
-                <label className={labelCls}>Title</label>
-                <input
-                  type="text"
-                  name="title"
-                  value={formData.title}
-                  onChange={handleChange}
-                  className={inputCls}
-                  placeholder="e.g. Broken door lock in room 204"
-                  required
-                />
-              </div>
-
-              {/* Description */}
-              <div className="space-y-2 md:col-span-2">
-                <label className={labelCls}>Description</label>
-                <textarea
-                  name="description"
-                  value={formData.description}
-                  onChange={handleChange}
-                  className={`${inputCls} resize-none`}
-                  placeholder="Provide a detailed description of the issue..."
-                  rows={5}
-                  required
-                />
+          </div>
+        )}
+
+        {/* Two-column layout */}
+        <div className="flex flex-grow divide-x divide-[#E5E5E5] max-w-6xl mx-auto w-full">
+
+          {/* LEFT — Form */}
+          <form onSubmit={handleSubmit} className="flex-1 px-8 py-8 space-y-6 min-w-0">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Complaint Details</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                <div>
+                  <label className={labelCls}>Room Number</label>
+                  <input
+                    type="text"
+                    name="room_number"
+                    value={formData.room_number}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="e.g. 204"
+                    required
+                  />
+                </div>
+
+                <div>
+                  <label className={labelCls}>Type of Complaint</label>
+                  <select name="type_of_post" value={formData.type_of_post} onChange={handleChange} className={selectCls} required>
+                    <option value="" disabled>Select Type</option>
+                    {POST_TYPES.map(t => (
+                      <option key={t.value} value={t.value}>{t.label}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="md:col-span-2">
+                  <label className={labelCls}>Title</label>
+                  <input
+                    type="text"
+                    name="title"
+                    value={formData.title}
+                    onChange={handleChange}
+                    className={inputCls}
+                    placeholder="e.g. Broken door lock in room 204"
+                    required
+                  />
+                </div>
               </div>
+            </div>
 
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Description</h2>
+              <textarea
+                name="description"
+                value={formData.description}
+                onChange={handleChange}
+                className={`${inputCls} resize-none`}
+                placeholder="Provide a detailed description of the issue, including the exact location..."
+                rows={6}
+                required
+              />
             </div>
 
-            <div className="pt-4 border-t border-gray-100">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3 px-4 rounded transition-colors disabled:opacity-50"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
-                {loading ? 'Submitting...' : 'Submit Complaint'}
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
+                {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
+
           </form>
 
+          {/* RIGHT — Sidebar */}
+          <aside className="w-72 shrink-0 px-6 py-8 space-y-6 bg-white">
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Filing Guidelines</h3>
+              <ol className="space-y-3">
+                {[
+                  'Only file for hostel common areas — corridors, bathrooms, and common rooms.',
+                  'Include the room or area number for precise identification.',
+                  'Select Civil or Electrical accurately to avoid routing delays.',
+                  'Do not file duplicate complaints for the same issue.',
+                  'Complaints are reviewed within 2 working days.',
+                ].map((text, i) => (
+                  <li key={i} className="flex gap-3 items-start">
+                    <span className="text-xs font-bold text-[#666666] shrink-0 pt-0.5">{String(i + 1).padStart(2, '0')}</span>
+                    <p className="text-sm text-[#111111] leading-snug">{text}</p>
+                  </li>
+                ))}
+              </ol>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Warden Scope</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                Wardens are the only role authorised to file complaints for hostel common areas. Individual room complaints should be raised directly by residents.
+              </p>
+            </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div>
+              <h3 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Complaint Types</h3>
+              <p className="text-sm text-[#111111] leading-relaxed">
+                <span className="font-semibold">Civil</span> — structural, plumbing, water supply.<br />
+                <span className="font-semibold">Electrical</span> — wiring, power, lighting failures.
+              </p>
+            </div>
+
+          </aside>
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx
index 380fc78..5922e4c 100644
--- a/app/src/pages/profile/Profile.tsx
+++ b/app/src/pages/profile/Profile.tsx
@@ -1,33 +1,29 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import {
-  ShieldCheck, LogOut, PlusCircle, AlertCircle, Edit3, UserCheck,
+  ShieldCheck, LogOut, PlusCircle, AlertCircle, Pencil, UserCheck,
   Inbox, ServerCrash,
 } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { ComplaintCard } from '../../components/ComplaintCard';
 import type { ComplaintPost, EditForm, Role } from '../../components/ComplaintCard';
 
-// ── Component ──────────────────────────────────────────────────────────────────
-
 export function Profile() {
   const [profile, setProfile] = useState<any>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError]     = useState<string | null>(null);
   const navigate = useNavigate();
 
-  const [posts, setPosts]           = useState<ComplaintPost[]>([]);
+  const [posts, setPosts]               = useState<ComplaintPost[]>([]);
   const [postsLoading, setPostsLoading] = useState(false);
-  const [postsError, setPostsError] = useState<string | null>(null);
+  const [postsError, setPostsError]     = useState<string | null>(null);
 
-  // Edit state
   const [editingId, setEditingId]   = useState<number | null>(null);
   const [editForm, setEditForm]     = useState<EditForm>({
     title: '', description: '', place: '', room_number: '',
   });
   const [actionLoading, setActionLoading] = useState<number | null>(null);
 
-  // ── Fetch profile ──
   useEffect(() => {
     fetch('/api/profile', { credentials: 'include' })
       .then((res) => {
@@ -42,7 +38,6 @@ export function Profile() {
       });
   }, [navigate]);
 
-  // ── Fetch posts once profile known ──
   useEffect(() => {
     if (!profile) return;
     let endpoint = '';
@@ -62,14 +57,13 @@ export function Profile() {
       .catch((err: Error) => { setPostsError(err.message); setPostsLoading(false); });
   }, [profile]);
 
-  // ── Loading / Error states ──
   if (loading) {
     return (
       <MainLayout>
-        <div className="flex-grow flex items-center justify-center bg-gray-50 py-12">
+        <div className="flex-grow flex items-center justify-center py-12">
           <div className="text-center">
-            <div className="w-12 h-12 border-4 border-[#ff9900] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-            <p className="text-gray-600 font-semibold">Loading profile data...</p>
+            <div className="w-12 h-12 border-4 border-[#111111] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+            <p className="text-[#666666] font-semibold text-sm">Loading profile data…</p>
           </div>
         </div>
       </MainLayout>
@@ -79,36 +73,32 @@ export function Profile() {
   if (error) {
     return (
       <MainLayout>
-        <div className="flex-grow flex items-center justify-center bg-gray-50 py-12">
-          <div className="max-w-md w-full mx-4 bg-white border border-red-200 rounded-xl p-6 shadow-md text-center">
-            <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
-            <h3 className="text-lg font-bold text-gray-800 mb-2">Access Denied</h3>
-            <p className="text-sm text-gray-600 mb-4">{error}</p>
-            <p className="text-xs text-gray-500">Redirecting to Homepage...</p>
+        <div className="flex-grow flex items-center justify-center py-12">
+          <div className="max-w-md w-full mx-4 bg-white border border-[#E5E5E5] border-t-2 border-t-[#111111] rounded-lg p-6 shadow-sm text-center">
+            <AlertCircle className="w-10 h-10 text-[#111111] mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-[#111111] mb-2">Access Denied</h3>
+            <p className="text-sm text-[#666666] mb-4">{error}</p>
+            <p className="text-xs text-[#666666]">Redirecting to Homepage…</p>
           </div>
         </div>
       </MainLayout>
     );
   }
 
-  // ── Derive role ──
   const isFaculty    = 'department' in profile;
   const isWarden     = 'hostel' in profile;
   const isCentreHead = 'building' in profile;
 
-  let roleLabel     = 'User';
-  let roleBadgeCls  = 'bg-gray-100 text-gray-800 border-gray-200';
+  let roleLabel    = 'User';
   let registerRoute = '/';
-  let role: Role    = 'centrehead';
-  if (isFaculty)    { roleLabel = 'Faculty Member'; roleBadgeCls = 'bg-emerald-50 text-emerald-700 border-emerald-200'; registerRoute = '/faculty/post'; role = 'faculty'; }
-  else if (isWarden)     { roleLabel = 'Hostel Warden';  roleBadgeCls = 'bg-indigo-50 text-indigo-700 border-indigo-200';  registerRoute = '/warden/post'; role = 'warden'; }
-  else if (isCentreHead) { roleLabel = 'Centre Head';    roleBadgeCls = 'bg-amber-50 text-amber-700 border-amber-200';    registerRoute = '/centre-head/post'; role = 'centrehead'; }
+  let role: Role   = 'centrehead';
+  if (isFaculty)         { roleLabel = 'Faculty Member'; registerRoute = '/faculty/post';      role = 'faculty'; }
+  else if (isWarden)     { roleLabel = 'Hostel Warden';  registerRoute = '/warden/post';       role = 'warden'; }
+  else if (isCentreHead) { roleLabel = 'Centre Head';    registerRoute = '/centre-head/post';  role = 'centrehead'; }
 
-  // ── API base paths ──
-  const editBase   = isFaculty ? '/api/post/faculty/edit'       : isWarden ? '/api/post/warden/edit'       : '/api/post/centrehead/edit';
-  const deleteBase = isFaculty ? '/api/post/faculty/delete'     : isWarden ? '/api/post/warden/delete'     : '/api/post/centrehead/delete';
+  const editBase   = isFaculty ? '/api/post/faculty/edit'   : isWarden ? '/api/post/warden/edit'   : '/api/post/centrehead/edit';
+  const deleteBase = isFaculty ? '/api/post/faculty/delete' : isWarden ? '/api/post/warden/delete' : '/api/post/centrehead/delete';
 
-  // ── Handlers ──
   const handleLogout = async () => {
     try { await fetch('/api/auth/logout', { method: 'POST' }); } catch {}
     window.location.href = '/';
@@ -169,151 +159,128 @@ export function Profile() {
     }
   }
 
-  // ── Render ──
   return (
     <MainLayout>
-      <div className="flex-grow bg-gray-50 relative overflow-hidden">
-        {/* Grid bg */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:20px_20px] pointer-events-none" />
-
-        {/* ── Profile section (constrained) ── */}
-        <div className="container mx-auto px-6 pt-12 relative z-10 max-w-7xl">
+      <div className="flex-grow relative">
+        <div className="container mx-auto px-6 pt-12 pb-16 max-w-7xl">
 
-          {/* Header row */}
-          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 pb-4 border-b border-gray-200">
+          {/* ── Header ── */}
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8 pb-6 border-b border-[#E5E5E5]">
             <div>
-              <h2 className="text-2xl md:text-3xl font-extrabold text-gray-900 tracking-tight">User Dashboard</h2>
-              <p className="text-sm text-gray-500 mt-1">Manage and view your credentials, residency, and portal access details.</p>
+              <h2 className="text-2xl font-bold text-[#111111] tracking-tight">User Dashboard</h2>
+              <p className="text-sm text-[#666666] mt-1">Manage your credentials, residency, and portal access details.</p>
+            </div>
+
+            <div className="flex items-center gap-2 flex-wrap">
+              <Link
+                to={registerRoute}
+                className="inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors duration-200 active:scale-[0.98] cursor-pointer"
+              >
+                <PlusCircle className="w-4 h-4" /> Register Complaint
+              </Link>
+              <button
+                onClick={() => alert('Edit profile functionality coming soon')}
+                className="inline-flex items-center gap-2 bg-[#222222] hover:bg-[#000000] text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors duration-200 cursor-pointer"
+              >
+                <Pencil className="w-4 h-4" /> Profile
+              </button>
+              <button
+                onClick={handleLogout}
+                className="inline-flex items-center gap-2 border border-[#111111] bg-white hover:bg-[#F5F5F5] text-[#111111] text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors duration-200 cursor-pointer"
+              >
+                <LogOut className="w-4 h-4" /> Logout
+              </button>
             </div>
-            <button
-              onClick={() => alert('Edit profile functionality coming soon')}
-              className="bg-[#2d2d2d] hover:bg-[#4a4a4a] text-white border border-[#2d2d2d] px-5 py-2.5 rounded-lg text-sm font-bold transition-all flex items-center shadow-sm w-fit shrink-0 cursor-pointer"
-            >
-              <Edit3 className="w-4 h-4 mr-2" /> Edit Profile Details
-            </button>
           </div>
 
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-            {/* Profile info (2/3) */}
-            <div className="lg:col-span-2 bg-white border border-gray-200 rounded-2xl p-6 md:p-8 shadow-sm">
-              <h3 className="text-lg font-bold text-gray-800 pb-4 border-b border-gray-100 mb-6 flex items-center">
-                <UserCheck className="w-5 h-5 text-gray-500 mr-2" /> Profile Information Sheet
-              </h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
-                <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Full Name</span>
-                  <span className="block text-base font-semibold text-gray-900">{profile.name || profile.email.split('@')[0]}</span>
-                </div>
-                <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Verification Status</span>
-                  <div className="flex items-center gap-2">
-                    <span className={`inline-flex items-center px-3 py-0.5 rounded-full text-xs font-semibold border ${roleBadgeCls}`}>
-                      <ShieldCheck className="w-3.5 h-3.5 mr-1" /> {roleLabel}
-                    </span>
-                    {profile.is_verified && (
-                      <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-emerald-50 text-emerald-700 border border-emerald-200">Verified</span>
-                    )}
-                  </div>
-                </div>
-                <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Email Address</span>
-                  <span className="block text-base font-semibold text-gray-800">{profile.email}</span>
-                </div>
-                <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Phone Number</span>
-                  <span className="block text-base font-semibold text-gray-800">{profile.phone_number || 'N/A'}</span>
-                </div>
-                {isFaculty && (
-                  <>
-                    <div className="space-y-1.5">
-                      <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Academic Department</span>
-                      <span className="block text-base font-semibold text-gray-800">{profile.department}</span>
-                    </div>
-                    <div className="space-y-1.5">
-                      <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Residence Allotment</span>
-                      <span className="block text-base font-semibold text-gray-800">House No. {profile.house_number}, Block {profile.block} (Type {profile.type})</span>
-                    </div>
-                  </>
-                )}
-                {isWarden && (
-                  <div className="space-y-1.5 col-span-1 md:col-span-2">
-                    <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Hostel Jurisdiction</span>
-                    <span className="block text-base font-semibold text-gray-800">{profile.hostel}</span>
-                  </div>
-                )}
-                {isCentreHead && (
-                  <div className="space-y-1.5 col-span-1 md:col-span-2">
-                    <span className="block text-xs font-bold text-gray-400 uppercase tracking-wider">Centre Jurisdiction</span>
-                    <span className="block text-base font-semibold text-gray-800">{profile.building}</span>
-                  </div>
-                )}
+          {/* ── Profile info card ── */}
+          <div className="bg-white border border-[#E5E5E5] rounded-lg mb-10">
+            {/* Identity row */}
+            <div className="flex items-center justify-between px-6 py-5 border-b border-[#E5E5E5]">
+              <div>
+                <p className="text-base font-bold text-[#111111]">{profile.name || profile.email.split('@')[0]}</p>
+                <p className="text-sm text-[#666666] mt-0.5">{profile.email}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-[#111111] bg-[#F5F5F5] text-xs font-bold text-[#111111] uppercase tracking-wide">
+                  <ShieldCheck className="w-3 h-3" /> {roleLabel}
+                </span>
+                <span className={`inline-flex items-center px-2.5 py-1 rounded-lg border text-xs font-bold uppercase tracking-wide ${
+                  profile.is_verified ? 'bg-[#E6F7ED] border-[#111111] text-[#111111]' : 'bg-[#FCEBEA] border-[#111111] text-[#111111]'
+                }`}>
+                  {profile.is_verified ? 'Verified' : 'Unverified'}
+                </span>
               </div>
             </div>
 
-            {/* Quick actions (1/3) */}
-            <div className="space-y-6">
-              <div className="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm">
-                <h3 className="text-sm font-bold text-gray-800 tracking-wider uppercase mb-4 pb-2 border-b border-gray-100">Quick Portal Actions</h3>
-                <div className="space-y-3">
-                  <Link to={registerRoute} className="w-full bg-[#ff9900] hover:bg-orange-500 text-white font-bold py-3.5 rounded-xl transition-all flex items-center justify-center shadow-md shadow-orange-500/10 text-sm cursor-pointer">
-                    <PlusCircle className="w-4 h-4 mr-2" /> Register a Complaint
-                  </Link>
-                  <button onClick={handleLogout} className="w-full border border-gray-300 hover:bg-gray-50 text-gray-700 font-semibold py-3 rounded-xl transition-all flex items-center justify-center text-sm cursor-pointer">
-                    <LogOut className="w-4 h-4 mr-2" /> End Session / Logout
-                  </button>
-                </div>
-              </div>
-              <div className="bg-gray-100 border border-gray-200 rounded-2xl p-6">
-                <h4 className="text-xs font-bold text-gray-700 uppercase tracking-wider mb-2">Need Assistance?</h4>
-                <p className="text-xs text-gray-500 leading-relaxed mb-3">
-                  If any profile information above is incorrect, please select "Edit Profile Details" or email the Estate Office administration directly.
-                </p>
-                <a href="#" className="text-xs text-gray-600 hover:text-gray-900 font-bold underline flex items-center cursor-pointer">
-                  Read Complaint Filing Manual →
-                </a>
+            {/* Details grid */}
+            <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-y divide-[#E5E5E5]">
+              <div className="px-6 py-4">
+                <p className="text-xs text-[#666666] mb-1">Phone</p>
+                <p className="text-sm font-semibold text-[#111111]">{profile.phone_number || 'N/A'}</p>
               </div>
+              {isFaculty && (
+                <>
+                  <div className="px-6 py-4">
+                    <p className="text-xs text-[#666666] mb-1">Department</p>
+                    <p className="text-sm font-semibold text-[#111111]">{profile.department}</p>
+                  </div>
+                  <div className="px-6 py-4">
+                    <p className="text-xs text-[#666666] mb-1">House / Block</p>
+                    <p className="text-sm font-semibold text-[#111111]">No. {profile.house_number}, Block {profile.block}</p>
+                  </div>
+                  <div className="px-6 py-4">
+                    <p className="text-xs text-[#666666] mb-1">Type</p>
+                    <p className="text-sm font-semibold text-[#111111]">{profile.type}</p>
+                  </div>
+                </>
+              )}
+              {isWarden && (
+                <div className="px-6 py-4">
+                  <p className="text-xs text-[#666666] mb-1">Hostel</p>
+                  <p className="text-sm font-semibold text-[#111111]">{profile.hostel}</p>
+                </div>
+              )}
+              {isCentreHead && (
+                <div className="px-6 py-4">
+                  <p className="text-xs text-[#666666] mb-1">Centre</p>
+                  <p className="text-sm font-semibold text-[#111111]">{profile.building}</p>
+                </div>
+              )}
             </div>
           </div>
-        </div>
 
-        {/* ── Complaints section (full-width) ── */}
-        <div className="mt-10 px-6 pb-12 relative z-10">
-
-          {/* Section header */}
-          <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200">
-            <Inbox className="w-5 h-5 text-gray-500" />
-            <h3 className="text-lg font-bold text-gray-900 tracking-tight">Your Complaints</h3>
+          {/* ── Complaints ── */}
+          <div className="flex items-center gap-3 mb-6 pb-4 border-b border-[#E5E5E5]">
+            <Inbox className="w-4 h-4 text-[#666666]" />
+            <h3 className="text-sm font-bold text-[#111111] uppercase tracking-widest">Your Complaints</h3>
             {!postsLoading && (
-              <span className="bg-gray-200 text-gray-600 text-xs font-bold px-2.5 py-0.5 rounded-full">{posts.length}</span>
+              <span className="bg-[#F5F5F5] border border-[#E5E5E5] text-[#666666] text-xs font-bold px-2 py-0.5 rounded-lg">{posts.length}</span>
             )}
           </div>
 
-          {/* Loading */}
           {postsLoading && (
-            <div className="flex items-center justify-center py-16 gap-3 text-gray-400">
-              <div className="w-5 h-5 border-2 border-[#ff9900] border-t-transparent rounded-full animate-spin" />
+            <div className="flex items-center justify-center py-16 gap-3 text-[#666666]">
+              <div className="w-5 h-5 border-2 border-[#111111] border-t-transparent rounded-full animate-spin" />
               <span className="text-sm font-semibold">Fetching your complaints…</span>
             </div>
           )}
 
-          {/* Error */}
           {!postsLoading && postsError && (
-            <div className="flex flex-col items-center justify-center py-16 gap-2 text-gray-400">
+            <div className="flex flex-col items-center justify-center py-16 gap-2 text-[#666666]">
               <ServerCrash className="w-8 h-8" />
-              <span className="text-sm font-semibold text-red-500">{postsError}</span>
+              <span className="text-sm font-semibold text-[#111111]">{postsError}</span>
             </div>
           )}
 
-          {/* Empty */}
           {!postsLoading && !postsError && posts.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-16 text-gray-400 bg-white rounded-2xl border border-dashed border-gray-200">
-              <Inbox className="w-10 h-10 mb-3 opacity-30" />
-              <span className="text-sm font-semibold">No complaints filed yet.</span>
-              <span className="text-xs mt-1 text-gray-400">Use "Register a Complaint" above to file your first one.</span>
+            <div className="flex flex-col items-center justify-center py-16 bg-white rounded-lg border border-dashed border-[#E5E5E5]">
+              <Inbox className="w-10 h-10 mb-3 text-[#E5E5E5]" />
+              <span className="text-sm font-semibold text-[#111111]">No complaints filed yet.</span>
+              <span className="text-xs mt-1 text-[#666666]">Use "Register Complaint" above to file your first one.</span>
             </div>
           )}
 
-          {/* Cards grid */}
           {!postsLoading && !postsError && posts.length > 0 && (
             <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
               {posts.map((post) => (
@@ -333,6 +300,7 @@ export function Profile() {
               ))}
             </div>
           )}
+
         </div>
       </div>
     </MainLayout>

From 3be230b716b4bf5b8afc18bd8bb76cd1f2fdc69a Mon Sep 17 00:00:00 2001
From: ayush00git <ayush.2007.iit@gmail.com>
Date: Sun, 31 May 2026 20:31:08 +0530
Subject: [PATCH 2/2] fix: auth pages ui

---
 app/src/components/ComplaintCard.tsx  | 572 +++++++++++++++++---------
 app/src/pages/admin/AEPostView.tsx    | 127 ++++--
 app/src/pages/admin/AdminPostView.tsx | 346 +++++++---------
 app/src/pages/admin/JEPostView.tsx    | 160 +++++--
 app/src/pages/admin/XENPostView.tsx   | 123 ++++--
 app/src/pages/auth/StaffLogin.tsx     | 143 ++++---
 app/src/pages/profile/Profile.tsx     |   2 +-
 7 files changed, 930 insertions(+), 543 deletions(-)

diff --git a/app/src/components/ComplaintCard.tsx b/app/src/components/ComplaintCard.tsx
index e308065..f1110a4 100644
--- a/app/src/components/ComplaintCard.tsx
+++ b/app/src/components/ComplaintCard.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import {
   Zap, Hammer, Trash2, Pencil, X, Check, Calendar, MapPin, BedDouble,
-  MessageSquare, ChevronDown, Wrench, GitBranch,
+  MessageSquare, Wrench, GitBranch, ChevronRight, UserCircle, Clock,
 } from 'lucide-react';
 import { POST_PLACES } from '../constants/models';
 
-// ── Types ────────────────────────────────────────────────────────────────────────
+// ── Types ─────────────────────────────────────────────────────────────────────
 
 export type Role = 'faculty' | 'warden' | 'centrehead';
 
@@ -58,29 +59,23 @@ interface ComplaintCardProps {
   onDelete: (postId: number) => void;
 }
 
-// ── Status / stage styling ─────────────────────────────────────────────────────────
+// ── Status config ──────────────────────────────────────────────────────────────
 
-interface StatusStyle {
-  label: string;
-  badge: string;   // pill background/text/border
-  dot: string;     // status dot
-}
+interface StatusStyle { label: string; pill: string; dot: string }
 
 const STATUS_CONFIG: Record<string, StatusStyle> = {
-  Pending_XEN: { label: 'Pending · XEN',  badge: 'bg-amber-50 text-amber-700 border-amber-200',     dot: 'bg-amber-400' },
-  Pending_AE:  { label: 'Pending · AE',   badge: 'bg-blue-50 text-blue-700 border-blue-200',        dot: 'bg-blue-400' },
-  Pending_JE:  { label: 'Pending · JE',   badge: 'bg-indigo-50 text-indigo-700 border-indigo-200',  dot: 'bg-indigo-400' },
-  Resolved_JE: { label: 'Resolved by JE', badge: 'bg-teal-50 text-teal-700 border-teal-200',        dot: 'bg-teal-400' },
-  Resolved:    { label: 'Resolved',       badge: 'bg-emerald-50 text-emerald-700 border-emerald-200', dot: 'bg-emerald-400' },
-  Closed:      { label: 'Closed',         badge: 'bg-red-50 text-red-600 border-red-200',           dot: 'bg-red-400' },
+  Pending_XEN: { label: 'Pending · XEN', pill: 'bg-amber-100 text-amber-800 border-amber-300',    dot: 'bg-amber-400' },
+  Pending_AE:  { label: 'Pending · AE',  pill: 'bg-sky-100 text-sky-800 border-sky-300',          dot: 'bg-sky-400' },
+  Pending_JE:  { label: 'Pending · JE',  pill: 'bg-violet-100 text-violet-800 border-violet-300', dot: 'bg-violet-400' },
+  Resolved_JE: { label: 'Resolved by JE', pill: 'bg-teal-100 text-teal-800 border-teal-300',      dot: 'bg-teal-400' },
+  Resolved:    { label: 'Resolved',       pill: 'bg-emerald-100 text-emerald-800 border-emerald-300', dot: 'bg-emerald-500' },
+  Closed:      { label: 'Closed',         pill: 'bg-rose-100 text-rose-800 border-rose-300',      dot: 'bg-rose-400' },
 };
 
-const FALLBACK_STATUS: StatusStyle = {
-  label: 'Unknown', badge: 'bg-gray-100 text-gray-600 border-gray-200', dot: 'bg-gray-400',
-};
+const FALLBACK: StatusStyle = { label: 'Unknown', pill: 'bg-gray-100 text-gray-600 border-gray-300', dot: 'bg-gray-400' };
 
-function statusStyle(status: string): StatusStyle {
-  return STATUS_CONFIG[status] ?? { ...FALLBACK_STATUS, label: status.replace(/_/g, ' ') };
+function statusStyle(s: string): StatusStyle {
+  return STATUS_CONFIG[s] ?? { ...FALLBACK, label: s.replace(/_/g, ' ') };
 }
 
 const STAGES = ['XEN', 'AE', 'JE'];
@@ -91,226 +86,399 @@ function formatDate(iso: string) {
 
 function formatDateTime(iso: string) {
   return new Date(iso).toLocaleString('en-IN', {
-    day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit',
+    day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
   });
 }
 
-// ── Component ──────────────────────────────────────────────────────────────────────
+function roleLabel(position: string) {
+  return position.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
 
-export function ComplaintCard({
-  post, role, isEditing, isBusy, editForm,
-  onEditFormChange, onStartEdit, onCancelEdit, onSaveEdit, onDelete,
-}: ComplaintCardProps) {
-  const [commentsOpen, setCommentsOpen] = useState(false);
+// ── Type theme ─────────────────────────────────────────────────────────────────
 
-  const isFaculty = role === 'faculty';
-  const isWarden  = role === 'warden';
-  const status    = statusStyle(post.status);
+function typeTheme(isElectrical: boolean) {
+  return isElectrical
+    ? { cardBg: 'bg-amber-50',  accentBar: 'bg-amber-400',  headerBg: 'bg-amber-100/70', iconColor: 'text-amber-600', badge: 'bg-amber-200 text-amber-900 border-amber-400', stageDone: 'bg-amber-500 border-amber-500' }
+    : { cardBg: 'bg-sky-50',    accentBar: 'bg-sky-500',    headerBg: 'bg-sky-100/70',   iconColor: 'text-sky-600',   badge: 'bg-sky-200 text-sky-900 border-sky-400',       stageDone: 'bg-sky-600 border-sky-600' };
+}
+
+// ── Stage tracker ──────────────────────────────────────────────────────────────
+
+function StageTracker({ stage, theme }: { stage: string; theme: ReturnType<typeof typeTheme> }) {
+  const current = STAGES.indexOf(stage);
+  return (
+    <div className="flex items-center gap-2">
+      <GitBranch className={`w-3.5 h-3.5 shrink-0 ${theme.iconColor}`} />
+      <div className="flex items-center gap-0">
+        {STAGES.map((s, idx) => {
+          const done = current >= 0 && idx <= current;
+          const isLast = idx === STAGES.length - 1;
+          return (
+            <div key={s} className="flex items-center">
+              <span className={`text-[10px] font-bold uppercase tracking-wide px-2.5 py-0.5 border transition-colors ${
+                idx === 0 ? 'rounded-l-full' : ''
+              } ${isLast ? 'rounded-r-full' : ''} ${
+                done ? `${theme.stageDone} text-white` : 'bg-white/60 text-gray-400 border-gray-300'
+              }`}>
+                {s}
+              </span>
+              {!isLast && (
+                <div className={`w-px h-4 ${done && current > idx ? theme.stageDone.replace('bg-', 'bg-') : 'bg-gray-300'}`} />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Edit form ──────────────────────────────────────────────────────────────────
+
+function EditFormFields({
+  editForm, isFaculty, isWarden, onEditFormChange,
+}: {
+  editForm: EditForm;
+  isFaculty: boolean;
+  isWarden: boolean;
+  onEditFormChange: (patch: Partial<EditForm>) => void;
+}) {
+  const inputCls = 'w-full text-sm text-gray-800 bg-white border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400/40 focus:border-gray-600';
+  const labelCls = 'block text-[10px] font-bold uppercase tracking-wider text-gray-500 mb-1';
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <label className={labelCls}>Title</label>
+        <input value={editForm.title} onChange={(e) => onEditFormChange({ title: e.target.value })} className={inputCls} />
+      </div>
+      {isFaculty && (
+        <div>
+          <label className={labelCls}>Area / Place</label>
+          <select value={editForm.place} onChange={(e) => onEditFormChange({ place: e.target.value })} className={inputCls}>
+            <option value="" disabled>Select Area</option>
+            {POST_PLACES.map((p) => <option key={p.value} value={p.value}>{p.label}</option>)}
+          </select>
+        </div>
+      )}
+      {isWarden && (
+        <div>
+          <label className={labelCls}>Room Number</label>
+          <input value={editForm.room_number} onChange={(e) => onEditFormChange({ room_number: e.target.value })} className={inputCls} />
+        </div>
+      )}
+      <div>
+        <label className={labelCls}>Description</label>
+        <textarea rows={5} value={editForm.description} onChange={(e) => onEditFormChange({ description: e.target.value })}
+          className={`${inputCls} resize-none`} />
+      </div>
+    </div>
+  );
+}
+
+// ── Comments list ──────────────────────────────────────────────────────────────
+
+function CommentsList({ comments }: { comments: ComplaintComment[] }) {
+  if (comments.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-10 text-center">
+        <MessageSquare className="w-8 h-8 text-gray-200 mb-2" />
+        <p className="text-sm text-gray-400 font-medium">No official responses yet</p>
+        <p className="text-xs text-gray-400 mt-0.5">Comments from staff will appear here.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {comments.map((c, idx) => {
+        const author = c.Author?.position ? roleLabel(c.Author.position) : `Admin #${c.author_id}`;
+        const initials = author.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase();
+        return (
+          <div key={c.id} className="flex gap-3">
+            {/* Avatar */}
+            <div className="shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-slate-600 to-slate-800 flex items-center justify-center text-[11px] font-bold text-white">
+              {initials || <UserCircle className="w-4 h-4" />}
+            </div>
+
+            {/* Bubble */}
+            <div className="flex-1 min-w-0">
+              <div className="bg-white border border-gray-200 rounded-xl rounded-tl-sm px-4 py-3 shadow-sm">
+                <div className="flex items-center justify-between gap-2 mb-1.5">
+                  <span className="text-xs font-bold text-gray-800">{author}</span>
+                  <span className="inline-flex items-center gap-1 text-[10px] text-gray-400 shrink-0">
+                    <Clock className="w-3 h-3" />
+                    {formatDateTime(c.created_at)}
+                  </span>
+                </div>
+                <p className="text-sm text-gray-600 leading-relaxed">{c.comment_text}</p>
+              </div>
+              {idx < comments.length - 1 && <div className="ml-4 w-px h-2 bg-gray-200" />}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Modal ──────────────────────────────────────────────────────────────────────
+
+interface ModalProps extends ComplaintCardProps {
+  onClose: () => void;
+}
+
+function PostModal({
+  post, role, isEditing, isBusy, editForm,
+  onEditFormChange, onStartEdit, onCancelEdit, onSaveEdit, onDelete, onClose,
+}: ModalProps) {
+  const isFaculty    = role === 'faculty';
+  const isWarden     = role === 'warden';
+  const status       = statusStyle(post.status);
   const isElectrical = post.type_of_post === 'Electrical';
-  const comments  = post.comments ?? [];
+  const theme        = typeTheme(isElectrical);
+  const comments     = post.comments ?? [];
   const currentStageIdx = STAGES.indexOf(post.stage);
 
-  return (
-    <div className="bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden flex flex-col">
-
-      {/* ── Top bar ── */}
-      <div className="bg-[#2d2d2d] px-4 py-3 flex items-center gap-2">
-        <span className="text-[11px] font-mono font-bold text-zinc-400">#{post.id}</span>
-
-        {/* type badge */}
-        <span className={`inline-flex items-center gap-1 text-[11px] font-semibold px-2 py-0.5 rounded-full ${
-          isElectrical ? 'text-amber-300 bg-amber-400/10' : 'text-sky-300 bg-sky-400/10'
-        }`}>
-          {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
-          {post.type_of_post}
-        </span>
-
-        {/* action buttons */}
-        <div className="ml-auto flex items-center gap-1.5">
-          {!isEditing && (
-            <button
-              onClick={() => onStartEdit(post)}
-              disabled={isBusy}
-              title="Edit"
-              className="p-1.5 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-40 cursor-pointer"
-            >
-              <Pencil className="w-3.5 h-3.5" />
-            </button>
-          )}
-          {isEditing && (
-            <>
-              <button
-                onClick={() => onSaveEdit(post.id)}
-                disabled={isBusy}
-                title="Save"
-                className="p-1.5 rounded-lg text-emerald-400 hover:text-white hover:bg-emerald-500/20 transition-colors disabled:opacity-40 cursor-pointer"
-              >
-                {isBusy ? <div className="w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin" /> : <Check className="w-3.5 h-3.5" />}
-              </button>
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+    >
+      <div className="bg-white w-full max-w-2xl max-h-[90vh] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+
+        {/* Modal header */}
+        <div className={`${theme.headerBg} border-b border-gray-200 px-6 py-4 flex items-start justify-between gap-4 shrink-0`}>
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-xs font-mono font-bold text-gray-400">#{post.id}</span>
+            <span className={`inline-flex items-center gap-1 text-xs font-bold uppercase tracking-wide px-2.5 py-0.5 rounded-full border ${theme.badge}`}>
+              {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+              {post.type_of_post}
+            </span>
+            <span className={`inline-flex items-center gap-1.5 text-xs font-bold px-2.5 py-0.5 rounded-full border ${status.pill}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+              {status.label}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1 shrink-0">
+            {!isEditing && (
               <button
-                onClick={onCancelEdit}
+                onClick={() => onStartEdit(post)}
                 disabled={isBusy}
-                title="Cancel"
-                className="p-1.5 rounded-lg text-zinc-400 hover:text-white hover:bg-white/10 transition-colors disabled:opacity-40 cursor-pointer"
+                title="Edit"
+                className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors disabled:opacity-40 cursor-pointer"
               >
-                <X className="w-3.5 h-3.5" />
+                <Pencil className="w-4 h-4" />
               </button>
-            </>
-          )}
-          <button
-            onClick={() => onDelete(post.id)}
-            disabled={isBusy}
-            title="Delete"
-            className="p-1.5 rounded-lg text-zinc-400 hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-40 cursor-pointer"
-          >
-            {isBusy && !isEditing ? <div className="w-3.5 h-3.5 border-2 border-red-400 border-t-transparent rounded-full animate-spin" /> : <Trash2 className="w-3.5 h-3.5" />}
-          </button>
+            )}
+            {isEditing && (
+              <>
+                <button onClick={() => onSaveEdit(post.id)} disabled={isBusy} title="Save"
+                  className="p-1.5 rounded-lg bg-emerald-600 hover:bg-emerald-700 transition-colors disabled:opacity-40 cursor-pointer">
+                  {isBusy ? <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-4 h-4 text-white" />}
+                </button>
+                <button onClick={onCancelEdit} disabled={isBusy} title="Cancel"
+                  className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors disabled:opacity-40 cursor-pointer">
+                  <X className="w-4 h-4" />
+                </button>
+              </>
+            )}
+            <button onClick={() => onDelete(post.id)} disabled={isBusy} title="Delete"
+              className="p-1.5 rounded-lg text-gray-400 hover:text-rose-600 hover:bg-rose-50 transition-colors disabled:opacity-40 cursor-pointer">
+              {isBusy && !isEditing
+                ? <div className="w-4 h-4 border-2 border-rose-500 border-t-transparent rounded-full animate-spin" />
+                : <Trash2 className="w-4 h-4" />}
+            </button>
+            <div className="w-px h-5 bg-gray-300 mx-1" />
+            <button onClick={onClose} title="Close"
+              className="p-1.5 rounded-lg text-gray-500 hover:text-gray-900 hover:bg-white/70 transition-colors cursor-pointer">
+              <X className="w-4 h-4" />
+            </button>
+          </div>
         </div>
-      </div>
 
-      {/* ── Body ── */}
-      <div className="p-5 flex flex-col gap-3 flex-1">
-        {isEditing ? (
-          /* ── Edit form ── */
-          <div className="flex flex-col gap-3">
-            <div>
-              <label className="block text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-1">Title</label>
-              <input
-                value={editForm.title}
-                onChange={(e) => onEditFormChange({ title: e.target.value })}
-                className="w-full text-sm font-semibold text-gray-800 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900]"
+        {/* Scrollable content */}
+        <div className="overflow-y-auto flex-1">
+
+          {/* Post details */}
+          <div className="px-6 py-5 border-b border-gray-100">
+            {isEditing ? (
+              <EditFormFields
+                editForm={editForm}
+                isFaculty={isFaculty}
+                isWarden={isWarden}
+                onEditFormChange={onEditFormChange}
               />
-            </div>
-            {isFaculty && (
-              <div>
-                <label className="block text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-1">Area / Place</label>
-                <select
-                  value={editForm.place}
-                  onChange={(e) => onEditFormChange({ place: e.target.value })}
-                  className="w-full text-sm text-gray-800 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900]"
-                >
-                  <option value="" disabled>Select Area</option>
-                  {POST_PLACES.map((p) => (
-                    <option key={p.value} value={p.value}>{p.label}</option>
-                  ))}
-                </select>
-              </div>
-            )}
-            {isWarden && (
-              <div>
-                <label className="block text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-1">Room Number</label>
-                <input
-                  value={editForm.room_number}
-                  onChange={(e) => onEditFormChange({ room_number: e.target.value })}
-                  className="w-full text-sm text-gray-800 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900]"
-                />
+            ) : (
+              <div className="flex flex-col gap-4">
+                <h2 className="text-lg font-bold text-gray-900 leading-snug">{post.title}</h2>
+                <p className="text-sm text-gray-600 leading-relaxed">{post.description}</p>
+
+                <StageTracker stage={post.stage} theme={theme} />
+
+                {/* Meta grid */}
+                <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 pt-2">
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <Calendar className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
+                    <div>
+                      <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Filed on</p>
+                      <p className="font-medium text-xs">{formatDate(post.created_at)}</p>
+                    </div>
+                  </div>
+                  {isFaculty && post.place && (
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <MapPin className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
+                      <div>
+                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Location</p>
+                        <p className="font-medium text-xs">{post.place}</p>
+                      </div>
+                    </div>
+                  )}
+                  {isWarden && post.room_number && (
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <BedDouble className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
+                      <div>
+                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Room</p>
+                        <p className="font-medium text-xs">{post.room_number}</p>
+                      </div>
+                    </div>
+                  )}
+                  {post.assigned_je_id != null && (
+                    <div className="flex items-center gap-2 text-sm text-gray-600">
+                      <Wrench className={`w-4 h-4 shrink-0 ${theme.iconColor}`} />
+                      <div>
+                        <p className="text-[10px] text-gray-400 font-semibold uppercase tracking-wide">Assigned JE</p>
+                        <p className="font-medium text-xs">JE #{post.assigned_je_id}</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
               </div>
             )}
-            <div>
-              <label className="block text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-1">Description</label>
-              <textarea
-                rows={4}
-                value={editForm.description}
-                onChange={(e) => onEditFormChange({ description: e.target.value })}
-                className="w-full text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900]"
-              />
-            </div>
           </div>
-        ) : (
-          /* ── View mode ── */
-          <>
-            {/* Title + status */}
-            <div className="flex items-start justify-between gap-3">
-              <h4 className="text-base font-bold text-gray-900 leading-snug">{post.title}</h4>
-              <span className={`shrink-0 inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full border ${status.badge}`}>
-                <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
-                {status.label}
-              </span>
-            </div>
 
-            <p className="text-sm text-gray-600 leading-relaxed">{post.description}</p>
-
-            {/* Stage tracker */}
-            <div className="flex items-center gap-2 mt-1">
-              <GitBranch className="w-3.5 h-3.5 text-gray-400 shrink-0" />
-              <div className="flex items-center gap-1.5">
-                {STAGES.map((s, idx) => {
-                  const done = currentStageIdx >= 0 && idx <= currentStageIdx;
-                  return (
-                    <span
-                      key={s}
-                      className={`text-[10px] font-bold px-2 py-0.5 rounded-md border ${
-                        done
-                          ? 'bg-[#2d2d2d] text-white border-[#2d2d2d]'
-                          : 'bg-gray-50 text-gray-400 border-gray-200'
-                      }`}
-                    >
-                      {s}
-                    </span>
-                  );
-                })}
+          {/* Comments */}
+          {!isEditing && (
+            <div className="px-6 py-5 bg-gray-50/60">
+              <div className="flex items-center gap-2 mb-4">
+                <MessageSquare className={`w-4 h-4 ${theme.iconColor}`} />
+                <h3 className="text-sm font-bold text-gray-800">Official Responses</h3>
+                {comments.length > 0 && (
+                  <span className="text-xs font-bold bg-gray-200 text-gray-600 px-2 py-0.5 rounded-full">{comments.length}</span>
+                )}
               </div>
+              <CommentsList comments={comments} />
             </div>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// ── Card (compact preview) ─────────────────────────────────────────────────────
 
-            {/* Meta chips */}
-            <div className="flex flex-wrap gap-x-4 gap-y-1.5 pt-3 mt-auto border-t border-gray-100">
+export function ComplaintCard({
+  post, role, isEditing, isBusy, editForm,
+  onEditFormChange, onStartEdit, onCancelEdit, onSaveEdit, onDelete,
+}: ComplaintCardProps) {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const status       = statusStyle(post.status);
+  const isElectrical = post.type_of_post === 'Electrical';
+  const theme        = typeTheme(isElectrical);
+  const comments     = post.comments ?? [];
+  const isFaculty    = role === 'faculty';
+  const isWarden     = role === 'warden';
+
+  return (
+    <>
+      {/* ── Compact card ── */}
+      <div
+        onClick={() => setModalOpen(true)}
+        className={`${theme.cardBg} border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-gray-300 transition-all cursor-pointer group`}
+      >
+        {/* Top accent */}
+        <div className={`h-1 w-full ${theme.accentBar}`} />
+
+        <div className="px-4 py-4">
+          {/* Row 1: badges + actions */}
+          <div className="flex items-center gap-2 mb-3">
+            <span className="text-[11px] font-mono font-bold text-gray-400">#{post.id}</span>
+
+            <span className={`inline-flex items-center gap-1 text-[11px] font-bold uppercase tracking-wide px-2 py-0.5 rounded-full border ${theme.badge}`}>
+              {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+              {post.type_of_post}
+            </span>
+
+            <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold px-2 py-0.5 rounded-full border ${status.pill}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${status.dot}`} />
+              {status.label}
+            </span>
+
+            <div className="ml-auto flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+              <button onClick={() => onStartEdit(post)} disabled={isBusy} title="Edit"
+                className="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-white/80 transition-colors disabled:opacity-40 cursor-pointer">
+                <Pencil className="w-3.5 h-3.5" />
+              </button>
+              <button onClick={() => onDelete(post.id)} disabled={isBusy} title="Delete"
+                className="p-1.5 rounded-lg text-gray-400 hover:text-rose-600 hover:bg-rose-50 transition-colors disabled:opacity-40 cursor-pointer">
+                <Trash2 className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+
+          {/* Title + description */}
+          <h4 className="text-sm font-bold text-gray-900 leading-snug mb-1.5">{post.title}</h4>
+          <p className="text-xs text-gray-500 leading-relaxed line-clamp-2">{post.description}</p>
+
+          {/* Footer row */}
+          <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-200/60">
+            <div className="flex items-center gap-3">
               <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                <Calendar className="w-3.5 h-3.5" /> {formatDate(post.created_at)}
+                <Calendar className="w-3 h-3" /> {formatDate(post.created_at)}
               </span>
               {isFaculty && post.place && (
                 <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                  <MapPin className="w-3.5 h-3.5" /> {post.place}
+                  <MapPin className="w-3 h-3" /> {post.place}
                 </span>
               )}
               {isWarden && post.room_number && (
                 <span className="inline-flex items-center gap-1 text-xs text-gray-400">
-                  <BedDouble className="w-3.5 h-3.5" /> Room {post.room_number}
+                  <BedDouble className="w-3 h-3" /> {post.room_number}
                 </span>
               )}
-              {post.assigned_je_id != null && (
-                <span className="inline-flex items-center gap-1 text-xs text-gray-500 font-medium">
-                  <Wrench className="w-3.5 h-3.5" /> JE #{post.assigned_je_id}
+            </div>
+
+            <div className="flex items-center gap-2">
+              {comments.length > 0 && (
+                <span className="inline-flex items-center gap-1 text-xs text-gray-400">
+                  <MessageSquare className="w-3 h-3" /> {comments.length}
                 </span>
               )}
+              <ChevronRight className={`w-4 h-4 text-gray-300 group-hover:text-gray-500 group-hover:translate-x-0.5 transition-all ${theme.iconColor} opacity-0 group-hover:opacity-100`} />
             </div>
-          </>
-        )}
+          </div>
+        </div>
       </div>
 
-      {/* ── Comments / official responses ── */}
-      {!isEditing && (
-        <div className="border-t border-gray-100">
-          <button
-            onClick={() => setCommentsOpen((o) => !o)}
-            disabled={comments.length === 0}
-            className="w-full flex items-center gap-2 px-5 py-3 text-xs font-bold text-gray-600 hover:bg-gray-50 transition-colors disabled:cursor-default disabled:hover:bg-transparent cursor-pointer"
-          >
-            <MessageSquare className="w-3.5 h-3.5 text-gray-400" />
-            {comments.length === 0
-              ? 'No comments'
-              : `${comments.length} comment${comments.length > 1 ? 's' : ''}`}
-            {comments.length > 0 && (
-              <ChevronDown className={`w-4 h-4 ml-auto text-gray-400 transition-transform ${commentsOpen ? 'rotate-180' : ''}`} />
-            )}
-          </button>
-
-          {commentsOpen && comments.length > 0 && (
-            <ul className="px-5 pb-4 space-y-3 max-h-56 overflow-y-auto">
-              {comments.map((c) => (
-                <li key={c.id} className="flex flex-col gap-0.5">
-                  <div className="flex items-center justify-between gap-2">
-                    <span className="text-[11px] font-bold text-gray-700">
-                      {c.Author?.position ? c.Author.position.replace(/_/g, ' ') : `Admin #${c.author_id}`}
-                    </span>
-                    <span className="text-[10px] text-gray-400">{formatDateTime(c.created_at)}</span>
-                  </div>
-                  <p className="text-xs text-gray-600 leading-relaxed">{c.comment_text}</p>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
+      {/* ── Modal ── */}
+      {modalOpen && (
+        <PostModal
+          post={post}
+          role={role}
+          isEditing={isEditing}
+          isBusy={isBusy}
+          editForm={editForm}
+          onEditFormChange={onEditFormChange}
+          onStartEdit={(p) => { onStartEdit(p); }}
+          onCancelEdit={() => { onCancelEdit(); }}
+          onSaveEdit={(id) => { onSaveEdit(id); }}
+          onDelete={(id) => { onDelete(id); setModalOpen(false); }}
+          onClose={() => { setModalOpen(false); if (isEditing) onCancelEdit(); }}
+        />
       )}
-    </div>
+    </>
   );
 }
diff --git a/app/src/pages/admin/AEPostView.tsx b/app/src/pages/admin/AEPostView.tsx
index 98f319c..68e8583 100644
--- a/app/src/pages/admin/AEPostView.tsx
+++ b/app/src/pages/admin/AEPostView.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2 } from 'lucide-react';
+import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -42,6 +42,31 @@ const STATUS_STYLES: Record<string, string> = {
   Closed:      'bg-red-50 text-red-600',
 };
 
+// Active-chip colours for the filter bar, derived from STATUS_STYLES.
+const FILTER_ACTIVE_STYLES: Record<string, string> = {
+  All:         'bg-[#ff9900] text-white border-[#ff9900]',
+  Pending_XEN: 'bg-amber-500 text-white border-amber-500',
+  Pending_AE:  'bg-blue-500 text-white border-blue-500',
+  Pending_JE:  'bg-indigo-500 text-white border-indigo-500',
+  Resolved_JE: 'bg-teal-500 text-white border-teal-500',
+  Resolved:    'bg-emerald-500 text-white border-emerald-500',
+  Closed:      'bg-red-500 text-white border-red-500',
+};
+
+const STATUS_FILTERS = [
+  'All',
+  'Pending_XEN',
+  'Pending_AE',
+  'Pending_JE',
+  'Resolved_JE',
+  'Resolved',
+  'Closed',
+] as const;
+
+type StatusFilter = (typeof STATUS_FILTERS)[number];
+
+const prettyStatus = (s: string) => s.replace('_', ' ');
+
 interface PostTileProps {
   label: string;
   icon: React.ReactNode;
@@ -61,37 +86,45 @@ function PostTile({ label, icon, role, posts }: PostTileProps) {
         </span>
       </div>
 
-      {/* List */}
+      {/* Card grid */}
       {posts.length === 0 ? (
         <div className="px-5 py-8 text-center text-xs text-gray-400 italic">
           No complaints at the moment.
         </div>
       ) : (
-        <ul className="divide-y divide-gray-100">
-          {posts.map((post) => (
-            <li key={post.id}>
+        <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4 p-5">
+          {posts.map((post) => {
+            const isElectrical = post.type_of_post.toLowerCase() === 'electrical';
+            return (
               <Link
+                key={post.id}
                 to={`/admin/posts/${role}/${post.id}`}
-                className="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50 transition-colors cursor-pointer"
+                className="group flex flex-col gap-3 bg-gray-100 hover:bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md hover:border-[#ff9900]/50 transition-all cursor-pointer"
               >
-                {/* ID chip */}
-                <span className="shrink-0 text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
-                  #{post.id}
-                </span>
+                {/* Top row: id + type */}
+                <div className="flex items-center justify-between gap-2">
+                  <span className="text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+                    #{post.id}
+                  </span>
+                  <span className="flex items-center gap-1 text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+                    {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+                    {post.type_of_post}
+                  </span>
+                </div>
+
                 {/* Title */}
-                <span className="text-sm font-medium text-gray-800 truncate flex-1">{post.title}</span>
-                {/* Type badge */}
-                <span className="shrink-0 text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
-                  {post.type_of_post}
-                </span>
+                <p className="text-sm font-semibold text-gray-800 line-clamp-2 group-hover:text-gray-900">
+                  {post.title}
+                </p>
+
                 {/* Status badge */}
-                <span className={`shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded ${STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-500'}`}>
-                  {post.status.replace('_', ' ')}
+                <span className={`self-start text-[11px] font-semibold px-2 py-0.5 rounded ${STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-500'}`}>
+                  {prettyStatus(post.status)}
                 </span>
               </Link>
-            </li>
-          ))}
-        </ul>
+            );
+          })}
+        </div>
       )}
     </div>
   );
@@ -107,6 +140,7 @@ export function AEPostView() {
   const [data, setData] = useState<AEPostsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<{ message: string; status?: number } | null>(null);
+  const [activeFilter, setActiveFilter] = useState<StatusFilter>('All');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -138,6 +172,20 @@ export function AEPostView() {
       });
   }, [navigate]);
 
+  // Derive the three sections + per-status counts. Kept above the early returns
+  // (and memoised on `data`) so the hook order stays stable across renders.
+  const { facultyPosts, wardenPosts, centreheadPosts, statusCounts } = useMemo(() => {
+    const faculty    = normalise(data?.faculty_posts);
+    const warden     = normalise(data?.warden_posts);
+    const centrehead = normalise(data?.centrehead_posts);
+    const all = [...faculty, ...warden, ...centrehead];
+    const counts: Record<string, number> = { All: all.length };
+    for (const post of all) {
+      counts[post.status] = (counts[post.status] ?? 0) + 1;
+    }
+    return { facultyPosts: faculty, wardenPosts: warden, centreheadPosts: centrehead, statusCounts: counts };
+  }, [data]);
+
   // ── Loading ──
   if (loading) {
     return (
@@ -184,7 +232,8 @@ export function AEPostView() {
     );
   }
 
-  const { faculty_posts: fp, warden_posts: wp, centrehead_posts: cp } = data!;
+  const matchesFilter = (post: PostRow) =>
+    activeFilter === 'All' || post.status === activeFilter;
 
   return (
     <MainLayout>
@@ -206,27 +255,55 @@ export function AEPostView() {
             </p>
           </div>
 
+          {/* Status filter bar */}
+          <div className="mb-8 flex flex-wrap gap-2">
+            {STATUS_FILTERS.map((status) => {
+              const isActive = activeFilter === status;
+              const count = statusCounts[status] ?? 0;
+              return (
+                <button
+                  key={status}
+                  onClick={() => setActiveFilter(status)}
+                  className={`flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full border transition-colors cursor-pointer ${
+                    isActive
+                      ? FILTER_ACTIVE_STYLES[status]
+                      : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  {status === 'All' ? 'All' : prettyStatus(status)}
+                  <span
+                    className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${
+                      isActive ? 'bg-white/25 text-white' : 'bg-gray-100 text-gray-500'
+                    }`}
+                  >
+                    {count}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
           {/* Tiles — stacked vertically, full-width */}
           <div className="flex flex-col gap-6">
             <PostTile
               label="Faculty Posts"
               icon={<GraduationCap className="w-4 h-4" />}
               role="faculty"
-              posts={normalise(fp)}
+              posts={facultyPosts.filter(matchesFilter)}
             />
 
             <PostTile
               label="Warden Posts"
               icon={<BedDouble className="w-4 h-4" />}
               role="warden"
-              posts={normalise(wp)}
+              posts={wardenPosts.filter(matchesFilter)}
             />
 
             <PostTile
               label="Centre Head Posts"
               icon={<Building2 className="w-4 h-4" />}
               role="centrehead"
-              posts={normalise(cp)}
+              posts={centreheadPosts.filter(matchesFilter)}
             />
           </div>
         </div>
diff --git a/app/src/pages/admin/AdminPostView.tsx b/app/src/pages/admin/AdminPostView.tsx
index 44aeace..a39aa2d 100644
--- a/app/src/pages/admin/AdminPostView.tsx
+++ b/app/src/pages/admin/AdminPostView.tsx
@@ -4,21 +4,12 @@ import {
   AlertCircle,
   ServerCrash,
   ArrowLeft,
-  FileText,
-  User,
-  MapPin,
   BedDouble,
   Building2,
-  Phone,
-  Mail,
-  Hash,
-  Calendar,
   Zap,
   Hammer,
   MessageSquare,
   GraduationCap,
-  BookOpen,
-  Home,
   CheckCircle2,
   XCircle,
   ChevronRight,
@@ -132,6 +123,16 @@ const STATUS_STYLES: Record<string, string> = {
   Closed:      'bg-red-50 text-red-600 border-red-200',
 };
 
+// Solid dot colour per status — mirrors the badge palette for the status pill
+const STATUS_DOT: Record<string, string> = {
+  Pending_XEN: 'bg-amber-500',
+  Pending_AE:  'bg-blue-500',
+  Pending_JE:  'bg-indigo-500',
+  Resolved_JE: 'bg-teal-500',
+  Resolved:    'bg-emerald-500',
+  Closed:      'bg-red-500',
+};
+
 // Maps URL role param → API segment for the status endpoint
 const ROLE_TO_STATUS_API: Record<string, string> = {
   faculty:    'faculty_posts',
@@ -168,6 +169,9 @@ function getActionButtons(adminType: string, status: string): ActionButton[] {
       { label: 'Send to AE', review: 'to_ae', icon: <ChevronRight className="w-3.5 h-3.5" /> },
       { label: 'Close Post',  review: 'close',  icon: <XCircle      className="w-3.5 h-3.5" /> },
     ];
+    if (status === 'Resolved_JE') return [
+      { label: 'Close Post', review: 'close', icon: <XCircle className="w-3.5 h-3.5" /> },
+    ];
     if (status === 'Closed') return [
       { label: 'Reopen Post', review: 'open', icon: <RefreshCcw className="w-3.5 h-3.5" /> },
     ];
@@ -199,14 +203,12 @@ function formatDateTime(iso: string) {
   });
 }
 
-function MetaRow({ icon, label, value }: { icon: React.ReactNode; label: string; value: string }) {
+// A single label/value pair in the "About this post" section
+function Detail({ label, value }: { label: string; value?: string }) {
   return (
-    <div className="flex items-start gap-3">
-      <span className="text-gray-400 mt-0.5 shrink-0">{icon}</span>
-      <div>
-        <p className="text-[10px] font-bold uppercase tracking-wider text-gray-400">{label}</p>
-        <p className="text-sm font-semibold text-gray-800">{value || '—'}</p>
-      </div>
+    <div>
+      <dt className="text-[10px] font-bold uppercase tracking-wider text-gray-400 mb-0.5">{label}</dt>
+      <dd className="text-sm font-semibold text-gray-800">{value || '—'}</dd>
     </div>
   );
 }
@@ -318,7 +320,7 @@ export function AdminPostView() {
   if (loading) {
     return (
       <MainLayout>
-        <div className="flex-grow flex items-center justify-center bg-gray-50 py-20">
+        <div className="flex-grow flex items-center justify-center bg-white py-20">
           <div className="text-center">
             <div className="w-12 h-12 border-4 border-[#ff9900] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
             <p className="text-gray-600 font-semibold">Loading post…</p>
@@ -333,8 +335,8 @@ export function AdminPostView() {
     const isAuth = error.status === 401 || error.status === 403;
     return (
       <MainLayout>
-        <div className="flex-grow flex items-center justify-center bg-gray-50 py-20">
-          <div className={`max-w-md w-full mx-4 bg-white rounded-xl p-6 shadow-md text-center border ${isAuth ? 'border-red-200' : 'border-gray-200'}`}>
+        <div className="flex-grow flex items-center justify-center bg-white py-20">
+          <div className="max-w-md w-full mx-4 text-center">
             {isAuth
               ? <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
               : <ServerCrash className="w-12 h-12 text-gray-400 mx-auto mb-4" />
@@ -368,21 +370,25 @@ export function AdminPostView() {
   const roleLabel  = isFaculty ? 'Faculty' : isWarden ? 'Warden' : 'Centre Head';
   const RoleIcon   = isFaculty ? GraduationCap : isWarden ? BedDouble : Building2;
   const statusCls  = STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-700 border-gray-200';
+  const statusDot  = STATUS_DOT[post.status] ?? 'bg-gray-400';
+  const statusText = post.status.replace(/_/g, ' ');
   const backPath   = ADMIN_BACK[adminType ?? ''] ?? '/';
   const actionBtns = getActionButtons(adminType ?? '', post.status);
   const canAct     = actionBtns.length > 0;
   const disabled   = acting || !commentText.trim();
 
+  // Who filed it — faculty have a name, the rest go by email
+  const filedBy = fp?.Author?.name || fp?.Author?.email || wp?.Author?.email || cp?.Author?.email || 'Unknown';
+  const email   = fp?.Author?.email || wp?.Author?.email || cp?.Author?.email;
+  const phone   = fp?.Author?.phone_number || wp?.Author?.phone_number || cp?.Author?.phone_number;
+
   return (
     <MainLayout>
-      <div className="flex-grow bg-gray-50 py-10 relative overflow-hidden">
-        {/* Grid bg */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:20px_20px] pointer-events-none" />
-
-        <div className="px-6 relative z-10">
+      <div className="flex-grow bg-white py-10">
+        <div className="max-w-3xl mx-auto px-6">
 
           {/* Back + breadcrumb */}
-          <div className="mb-6 flex items-center gap-3">
+          <div className="mb-8 flex items-center gap-3">
             <Link
               to={backPath}
               className="flex items-center gap-1.5 text-xs font-semibold text-gray-500 hover:text-gray-900 transition-colors cursor-pointer"
@@ -393,175 +399,135 @@ export function AdminPostView() {
             <span className="text-xs text-gray-400 font-mono">#{post.id} · {roleLabel}</span>
           </div>
 
-          <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
-
-            {/* ── Left: post detail + comments (2/3) ── */}
-            <div className="xl:col-span-2 flex flex-col gap-6">
-
-              {/* Title card */}
-              <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
-                <div className="bg-[#2d2d2d] px-6 py-5">
-                  <div className="flex flex-wrap items-center gap-2 mb-3">
-                    <span className="inline-flex items-center gap-1.5 text-xs font-bold text-zinc-300 bg-white/10 px-2.5 py-1 rounded-full">
-                      <RoleIcon className="w-3.5 h-3.5" /> {roleLabel} Complaint
-                    </span>
-                    <span className="inline-flex items-center gap-1.5 text-xs font-bold text-zinc-300 bg-white/10 px-2.5 py-1 rounded-full">
-                      {post.type_of_post === 'Electrical'
-                        ? <Zap className="w-3.5 h-3.5" />
-                        : <Hammer className="w-3.5 h-3.5" />
-                      }
-                      {post.type_of_post}
-                    </span>
-                  </div>
-                  <h1 className="text-xl font-extrabold text-white leading-snug">{post.title}</h1>
-                </div>
+          {/* ── Post ── */}
+          <div className="flex flex-wrap items-center gap-2 mb-3">
+            <span className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-600 bg-gray-100 px-2.5 py-1 rounded-full">
+              <RoleIcon className="w-3.5 h-3.5" /> {roleLabel}
+            </span>
+            <span className="inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wide text-gray-600 bg-gray-100 px-2.5 py-1 rounded-full">
+              {post.type_of_post === 'Electrical'
+                ? <Zap className="w-3.5 h-3.5" />
+                : <Hammer className="w-3.5 h-3.5" />
+              }
+              {post.type_of_post}
+            </span>
+            <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold px-2.5 py-1 rounded-full border ${statusCls}`}>
+              <span className={`w-1.5 h-1.5 rounded-full ${statusDot}`} />
+              {statusText}
+            </span>
+          </div>
 
-                <div className="p-6">
-                  <div className="flex flex-wrap items-center gap-3 mb-5 pb-5 border-b border-gray-100">
-                    <span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-bold border ${statusCls}`}>
-                      {post.status.replace('_', ' ')}
-                    </span>
-                    <span className="text-xs text-gray-400 font-mono">Stage: {post.stage}</span>
-                    {post.assigned_je_id && (
-                      <span className="text-xs text-gray-400 font-mono">JE #{post.assigned_je_id}</span>
-                    )}
-                    <span className="ml-auto text-xs text-gray-400">Post #{post.id}</span>
-                  </div>
-
-                  <div className="mb-6">
-                    <p className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-2 flex items-center gap-1.5">
-                      <FileText className="w-3.5 h-3.5" /> Description
-                    </p>
-                    <p className="text-sm text-gray-700 leading-relaxed">{post.description}</p>
-                  </div>
-
-                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-5 pt-5 border-t border-gray-100">
-                    {fp && (
-                      <MetaRow icon={<MapPin className="w-4 h-4" />} label="Area" value={fp.place} />
-                    )}
-                    {wp && (
-                      <MetaRow icon={<BedDouble className="w-4 h-4" />} label="Room" value={wp.room_number} />
-                    )}
-                    <MetaRow icon={<Calendar className="w-4 h-4" />} label="Filed On"     value={formatDate(post.created_at)} />
-                    <MetaRow icon={<Calendar className="w-4 h-4" />} label="Last Updated" value={formatDate(post.updated_at)} />
-                    <MetaRow icon={<Hash className="w-4 h-4" />}     label="Post ID"      value={`#${post.id}`} />
-                  </div>
+          {/* Title */}
+          <h1 className="text-2xl md:text-3xl font-extrabold text-gray-900 leading-tight mb-5">
+            {post.title}
+          </h1>
+
+          {/* Description */}
+          <p className="text-base text-gray-700 leading-relaxed whitespace-pre-line mb-10">
+            {post.description}
+          </p>
+
+          {/* About this post */}
+          <h2 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-4">
+            About this post
+          </h2>
+          <dl className="grid grid-cols-2 sm:grid-cols-3 gap-x-6 gap-y-5 bg-gray-50 border border-gray-100 rounded-xl p-5">
+            <Detail label="Filed by" value={filedBy} />
+            {fp && <Detail label="Department" value={fp.Author?.department} />}
+            {fp && <Detail label="Area" value={fp.place} />}
+            {fp && fp.Author && (
+              <Detail label="Residence" value={`House ${fp.Author.house_number}, Block ${fp.Author.block} (Type ${fp.Author.type})`} />
+            )}
+            {wp && <Detail label="Hostel" value={wp.Author?.hostel} />}
+            {wp && <Detail label="Room" value={wp.room_number} />}
+            {cp && <Detail label="Building" value={cp.Author?.building} />}
+            <Detail label="Email" value={email} />
+            <Detail label="Phone" value={phone} />
+            <Detail label="Stage" value={post.stage} />
+            {post.assigned_je_id != null && <Detail label="Assigned JE" value={`#${post.assigned_je_id}`} />}
+            <Detail label="Filed on" value={formatDate(post.created_at)} />
+            <Detail label="Last updated" value={formatDate(post.updated_at)} />
+          </dl>
+
+          {/* ── Comments ── */}
+          <div className="mt-10 pt-8 border-t border-gray-200">
+            <h2 className="text-sm font-bold text-gray-900 flex items-center gap-2 mb-5">
+              <MessageSquare className="w-4 h-4 text-gray-400" />
+              Comments
+              <span className="text-gray-400 font-semibold">({comments.length})</span>
+            </h2>
+
+            {/* Comment list */}
+            {comments.length === 0 ? (
+              <p className="text-sm text-gray-400 italic mb-8">No comments yet.</p>
+            ) : (
+              <ul className="space-y-3 mb-8">
+                {comments.map((c) => {
+                  const who = c.Author?.position ? c.Author.position.replace(/_/g, ' ') : `Admin #${c.author_id}`;
+                  return (
+                    <li key={c.id} className="border-l-2 border-[#ff9900]/50 bg-gray-50 rounded-r-lg px-4 py-3">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-xs font-bold text-gray-800">{who}</span>
+                        <span className="ml-auto text-[11px] text-gray-400">{formatDateTime(c.created_at)}</span>
+                      </div>
+                      <p className="text-sm text-gray-700 leading-relaxed">{c.comment_text}</p>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+
+            {/* ── Comment + action area — always shown; locked when this admin has no applicable actions ── */}
+            <div>
+              <label className="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2">
+                Comment &amp; Update Status
+              </label>
+              <textarea
+                value={commentText}
+                onChange={(e) => setCommentText(e.target.value)}
+                disabled={acting || !canAct}
+                placeholder={canAct
+                  ? 'Add a comment before updating the status…'
+                  : 'No actions available for this complaint at its current stage.'}
+                rows={3}
+                className="w-full text-sm text-gray-800 placeholder-gray-300 bg-gray-50 border border-gray-200 rounded-lg px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition disabled:opacity-50 disabled:cursor-not-allowed"
+              />
+
+              {/* Feedback */}
+              {actError && (
+                <p className="mt-2 text-xs font-semibold text-red-500 flex items-center gap-1.5">
+                  <AlertCircle className="w-3.5 h-3.5 shrink-0" />
+                  {actError}
+                </p>
+              )}
+              {actSuccess && (
+                <p className="mt-2 text-xs font-semibold text-emerald-600 flex items-center gap-1.5">
+                  <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
+                  {actSuccess}
+                </p>
+              )}
+
+              {/* Action buttons — only when this admin can act on the current status */}
+              {canAct && (
+                <div className="mt-3 flex flex-wrap justify-end gap-2">
+                  {actionBtns.map((btn) => (
+                    <button
+                      key={btn.review}
+                      onClick={() => handleAction(btn.review)}
+                      disabled={disabled}
+                      className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#2d2d2d] hover:bg-[#ff9900] px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
+                    >
+                      {acting ? (
+                        <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                      ) : btn.icon}
+                      {btn.label}
+                    </button>
+                  ))}
                 </div>
-              </div>
-
-              {/* ── Comments + action card ── */}
-              <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-6">
-                <h3 className="text-sm font-bold text-gray-800 flex items-center gap-2 mb-4 pb-3 border-b border-gray-100">
-                  <MessageSquare className="w-4 h-4 text-gray-400" />
-                  Comments
-                  <span className="ml-auto bg-gray-100 text-gray-500 text-xs font-semibold px-2 py-0.5 rounded-full">
-                    {comments.length}
-                  </span>
-                </h3>
-
-                {/* Comment list */}
-                {comments.length === 0 ? (
-                  <p className="text-sm text-gray-400 italic text-center py-6">No comments yet.</p>
-                ) : (
-                  <ul className="space-y-2 mb-6">
-                    {comments.map((c) => (
-                      <li key={c.id} className="flex flex-col gap-1 bg-gray-50 border border-gray-100 rounded-xl px-4 py-3">
-                        <div className="flex items-center justify-between gap-2">
-                          <span className="text-xs font-bold text-gray-700">
-                            {c.Author?.position ? c.Author.position.replace(/_/g, ' ') : `Admin #${c.author_id}`}
-                          </span>
-                          <span className="text-[11px] text-gray-400">{formatDateTime(c.created_at)}</span>
-                        </div>
-                        <p className="text-sm text-gray-700 leading-relaxed">{c.comment_text}</p>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-
-                {/* ── Comment + action area (only when this admin has applicable actions) ── */}
-                {canAct && (
-                  <div className={`pt-4 ${comments.length > 0 ? 'border-t border-gray-100' : ''}`}>
-                    <label className="block text-xs font-bold uppercase tracking-wider text-gray-400 mb-2">
-                      Comment &amp; Update Status
-                    </label>
-                    <textarea
-                      value={commentText}
-                      onChange={(e) => setCommentText(e.target.value)}
-                      disabled={acting}
-                      placeholder="Add a comment before updating the status…"
-                      rows={3}
-                      className="w-full text-sm text-gray-800 placeholder-gray-300 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-[#ff9900]/40 focus:border-[#ff9900] transition disabled:opacity-50"
-                    />
-
-                    {/* Feedback */}
-                    {actError && (
-                      <p className="mt-2 text-xs font-semibold text-red-500 flex items-center gap-1.5">
-                        <AlertCircle className="w-3.5 h-3.5 shrink-0" />
-                        {actError}
-                      </p>
-                    )}
-                    {actSuccess && (
-                      <p className="mt-2 text-xs font-semibold text-emerald-600 flex items-center gap-1.5">
-                        <CheckCircle2 className="w-3.5 h-3.5 shrink-0" />
-                        {actSuccess}
-                      </p>
-                    )}
-
-                    {/* Action buttons — same dark-gray, side by side with each other */}
-                    <div className="mt-3 flex flex-wrap justify-end gap-2">
-                      {actionBtns.map((btn) => (
-                        <button
-                          key={btn.review}
-                          onClick={() => handleAction(btn.review)}
-                          disabled={disabled}
-                          className="inline-flex items-center gap-2 text-xs font-bold text-white bg-[#2d2d2d] hover:bg-[#ff9900] px-4 py-2 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer"
-                        >
-                          {acting ? (
-                            <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                          ) : btn.icon}
-                          {btn.label}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-
-            {/* ── Right: author info (1/3) ── */}
-            <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 h-fit">
-              <h3 className="text-sm font-bold text-gray-800 flex items-center gap-2 mb-5 pb-3 border-b border-gray-100">
-                <User className="w-4 h-4 text-gray-400" /> Filed By
-              </h3>
-
-              <div className="flex flex-col gap-4">
-                {fp && fp.Author && (
-                  <>
-                    <MetaRow icon={<User className="w-4 h-4" />}       label="Name"       value={fp.Author.name} />
-                    <MetaRow icon={<Mail className="w-4 h-4" />}       label="Email"      value={fp.Author.email} />
-                    <MetaRow icon={<Phone className="w-4 h-4" />}      label="Phone"      value={fp.Author.phone_number} />
-                    <MetaRow icon={<BookOpen className="w-4 h-4" />}   label="Department" value={fp.Author.department} />
-                    <MetaRow icon={<Home className="w-4 h-4" />}       label="Residence"  value={`House ${fp.Author.house_number}, Block ${fp.Author.block} (Type ${fp.Author.type})`} />
-                  </>
-                )}
-                {wp && wp.Author && (
-                  <>
-                    <MetaRow icon={<Mail className="w-4 h-4" />}       label="Email"  value={wp.Author.email} />
-                    <MetaRow icon={<Phone className="w-4 h-4" />}      label="Phone"  value={wp.Author.phone_number} />
-                    <MetaRow icon={<BedDouble className="w-4 h-4" />}  label="Hostel" value={wp.Author.hostel} />
-                  </>
-                )}
-                {cp && cp.Author && (
-                  <>
-                    <MetaRow icon={<Mail className="w-4 h-4" />}      label="Email"    value={cp.Author.email} />
-                    <MetaRow icon={<Phone className="w-4 h-4" />}     label="Phone"    value={cp.Author.phone_number} />
-                    <MetaRow icon={<Building2 className="w-4 h-4" />} label="Building" value={cp.Author.building} />
-                  </>
-                )}
-              </div>
+              )}
             </div>
-
           </div>
+
         </div>
       </div>
     </MainLayout>
diff --git a/app/src/pages/admin/JEPostView.tsx b/app/src/pages/admin/JEPostView.tsx
index 31bf217..d0eda79 100644
--- a/app/src/pages/admin/JEPostView.tsx
+++ b/app/src/pages/admin/JEPostView.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2 } from 'lucide-react';
+import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -33,15 +33,54 @@ interface PostRow {
   status: string;
 }
 
-const STATUS_STYLES: Record<string, string> = {
-  Pending_XEN: 'bg-amber-50 text-amber-700',
-  Pending_AE:  'bg-blue-50 text-blue-700',
-  Pending_JE:  'bg-indigo-50 text-indigo-700',
-  Resolved_JE: 'bg-teal-50 text-teal-700',
-  Resolved:    'bg-emerald-50 text-emerald-700',
-  Closed:      'bg-red-50 text-red-600',
+// Badge styles per status. `badge` colours the status pill, `dot` colours the
+// small status indicator on each card (and the filter chip dot).
+const STATUS_STYLES: Record<string, { badge: string; dot: string }> = {
+  Pending_XEN: { badge: 'bg-amber-50 text-amber-700',     dot: 'bg-amber-500' },
+  Pending_AE:  { badge: 'bg-blue-50 text-blue-700',       dot: 'bg-blue-500' },
+  Pending_JE:  { badge: 'bg-indigo-50 text-indigo-700',   dot: 'bg-indigo-500' },
+  Resolved_JE: { badge: 'bg-teal-50 text-teal-700',       dot: 'bg-teal-500' },
+  Resolved:    { badge: 'bg-emerald-50 text-emerald-700', dot: 'bg-emerald-500' },
+  Closed:      { badge: 'bg-red-50 text-red-600',         dot: 'bg-red-500' },
 };
 
+const FALLBACK_STYLE = { badge: 'bg-gray-100 text-gray-500', dot: 'bg-gray-400' };
+
+// A complaint card — clickable tile in the responsive grid.
+function PostCard({ post, role }: { post: PostRow; role: string }) {
+  const style = STATUS_STYLES[post.status] ?? FALLBACK_STYLE;
+  const isElectrical = post.type_of_post.toLowerCase() === 'electrical';
+
+  return (
+    <Link
+      to={`/admin/posts/${role}/${post.id}`}
+      className="group flex flex-col gap-3 bg-gray-100 hover:bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md hover:border-[#ff9900]/40 transition-all cursor-pointer"
+    >
+      {/* Top row — ID + type badge */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+          #{post.id}
+        </span>
+        <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
+          {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+          {post.type_of_post}
+        </span>
+      </div>
+
+      {/* Title */}
+      <p className="text-sm font-semibold text-gray-800 leading-snug line-clamp-2 group-hover:text-gray-900">
+        {post.title}
+      </p>
+
+      {/* Status badge */}
+      <span className={`mt-auto inline-flex w-fit items-center gap-1.5 text-[11px] font-semibold px-2 py-0.5 rounded ${style.badge}`}>
+        <span className={`w-1.5 h-1.5 rounded-full ${style.dot}`} />
+        {post.status.replace('_', ' ')}
+      </span>
+    </Link>
+  );
+}
+
 interface PostTileProps {
   label: string;
   icon: React.ReactNode;
@@ -51,52 +90,45 @@ interface PostTileProps {
 
 function PostTile({ label, icon, role, posts }: PostTileProps) {
   return (
-    <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
-      {/* Tile header */}
-      <div className="flex items-center gap-3 px-5 py-4 border-b border-gray-100">
+    <section>
+      {/* Section header */}
+      <div className="flex items-center gap-3 mb-4">
         <span className="text-gray-500">{icon}</span>
         <h3 className="text-sm font-bold text-gray-800 tracking-tight">{label}</h3>
-        <span className="ml-auto bg-gray-100 text-gray-500 text-xs font-semibold px-2 py-0.5 rounded-full">
+        <span className="bg-gray-100 text-gray-500 text-xs font-semibold px-2 py-0.5 rounded-full">
           {posts.length}
         </span>
       </div>
 
-      {/* List */}
+      {/* Card grid */}
       {posts.length === 0 ? (
-        <div className="px-5 py-8 text-center text-xs text-gray-400 italic">
+        <div className="bg-white border border-dashed border-gray-200 rounded-xl px-5 py-8 text-center text-xs text-gray-400 italic">
           No complaints at the moment.
         </div>
       ) : (
-        <ul className="divide-y divide-gray-100">
+        <div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-4">
           {posts.map((post) => (
-            <li key={post.id}>
-              <Link
-                to={`/admin/posts/${role}/${post.id}`}
-                className="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50 transition-colors cursor-pointer"
-              >
-                {/* ID chip */}
-                <span className="shrink-0 text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
-                  #{post.id}
-                </span>
-                {/* Title */}
-                <span className="text-sm font-medium text-gray-800 truncate flex-1">{post.title}</span>
-                {/* Type badge */}
-                <span className="shrink-0 text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
-                  {post.type_of_post}
-                </span>
-                {/* Status badge */}
-                <span className={`shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded ${STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-500'}`}>
-                  {post.status.replace('_', ' ')}
-                </span>
-              </Link>
-            </li>
+            <PostCard key={post.id} post={post} role={role} />
           ))}
-        </ul>
+        </div>
       )}
-    </div>
+    </section>
   );
 }
 
+// ── Status Filter ────────────────────────────────────────────────────────────
+
+// Selectable statuses (in workflow order) plus their human-readable labels.
+const FILTERS: { value: string; label: string }[] = [
+  { value: 'All',         label: 'All' },
+  { value: 'Pending_XEN', label: 'Pending XEN' },
+  { value: 'Pending_AE',  label: 'Pending AE' },
+  { value: 'Pending_JE',  label: 'Pending JE' },
+  { value: 'Resolved_JE', label: 'Resolved by JE' },
+  { value: 'Resolved',    label: 'Resolved' },
+  { value: 'Closed',      label: 'Closed' },
+];
+
 // ── Main Page ──────────────────────────────────────────────────────────────────
 
 interface FetchError extends Error {
@@ -107,6 +139,7 @@ export function JEPostView() {
   const [data, setData] = useState<JEPostsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<{ message: string; status?: number } | null>(null);
+  const [filter, setFilter] = useState('All');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -186,6 +219,22 @@ export function JEPostView() {
 
   const { faculty_posts: fp, warden_posts: wp, centrehead_posts: cp } = data!;
 
+  // Normalise once, then apply the active status filter across all sections.
+  const faculty = normalise(fp);
+  const warden = normalise(wp);
+  const centrehead = normalise(cp);
+
+  const byFilter = (posts: PostRow[]) =>
+    filter === 'All' ? posts : posts.filter((p) => p.status === filter);
+
+  // Per-status counts across all three sections — shown on each filter chip.
+  const counts = (() => {
+    const all = [...faculty, ...warden, ...centrehead];
+    const map: Record<string, number> = { All: all.length };
+    for (const p of all) map[p.status] = (map[p.status] ?? 0) + 1;
+    return map;
+  })();
+
   return (
     <MainLayout>
       <div className="flex-grow bg-gray-50 py-12 relative overflow-hidden">
@@ -206,27 +255,52 @@ export function JEPostView() {
             </p>
           </div>
 
-          {/* Tiles — stacked vertically, full-width */}
-          <div className="flex flex-col gap-6">
+          {/* Status filter bar */}
+          <div className="flex flex-wrap gap-2 mb-8">
+            {FILTERS.map(({ value, label }) => {
+              const active = filter === value;
+              const dot = STATUS_STYLES[value]?.dot;
+              return (
+                <button
+                  key={value}
+                  onClick={() => setFilter(value)}
+                  className={`inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full border transition-colors cursor-pointer ${
+                    active
+                      ? 'bg-[#ff9900] text-white border-[#ff9900]'
+                      : 'bg-white text-gray-600 border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  {dot && <span className={`w-1.5 h-1.5 rounded-full ${active ? 'bg-white' : dot}`} />}
+                  {label}
+                  <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${active ? 'bg-white/25 text-white' : 'bg-gray-100 text-gray-500'}`}>
+                    {counts[value] ?? 0}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Sections — each a responsive card grid */}
+          <div className="flex flex-col gap-10">
             <PostTile
               label="Faculty Posts"
               icon={<GraduationCap className="w-4 h-4" />}
               role="faculty"
-              posts={normalise(fp)}
+              posts={byFilter(faculty)}
             />
 
             <PostTile
               label="Warden Posts"
               icon={<BedDouble className="w-4 h-4" />}
               role="warden"
-              posts={normalise(wp)}
+              posts={byFilter(warden)}
             />
 
             <PostTile
               label="Centre Head Posts"
               icon={<Building2 className="w-4 h-4" />}
               role="centrehead"
-              posts={normalise(cp)}
+              posts={byFilter(centrehead)}
             />
           </div>
         </div>
diff --git a/app/src/pages/admin/XENPostView.tsx b/app/src/pages/admin/XENPostView.tsx
index 961f7b5..8720b3b 100644
--- a/app/src/pages/admin/XENPostView.tsx
+++ b/app/src/pages/admin/XENPostView.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
-import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2 } from 'lucide-react';
+import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
@@ -47,6 +47,18 @@ const STATUS_STYLES: Record<string, string> = {
   Closed:      'bg-red-50 text-red-600',
 };
 
+// Ordered list of selectable statuses (plus the implicit "All" default)
+const STATUS_FILTERS = [
+  'Pending_XEN',
+  'Pending_AE',
+  'Pending_JE',
+  'Resolved_JE',
+  'Resolved',
+  'Closed',
+] as const;
+
+const prettyStatus = (s: string) => s.replace('_', ' ');
+
 interface PostTileProps {
   label: string;
   icon: React.ReactNode;
@@ -54,6 +66,39 @@ interface PostTileProps {
   posts: PostRow[];
 }
 
+function PostCard({ role, post }: { role: string; post: PostRow }) {
+  const isElectrical = post.type_of_post.toLowerCase() === 'electrical';
+  return (
+    <Link
+      to={`/admin/posts/${role}/${post.id}`}
+      className="group flex flex-col gap-3 bg-gray-100 hover:bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md hover:border-[#ff9900]/50 transition-all cursor-pointer"
+    >
+      {/* Top row: id + status */}
+      <div className="flex items-center gap-2">
+        <span className="shrink-0 text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+          #{post.id}
+        </span>
+        <span className={`ml-auto shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded ${STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-500'}`}>
+          {prettyStatus(post.status)}
+        </span>
+      </div>
+
+      {/* Title */}
+      <h4 className="text-sm font-semibold text-gray-800 leading-snug line-clamp-2 group-hover:text-gray-900">
+        {post.title}
+      </h4>
+
+      {/* Type badge */}
+      <div className="mt-auto">
+        <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-gray-600 bg-gray-100 px-2 py-1 rounded">
+          {isElectrical ? <Zap className="w-3 h-3" /> : <Hammer className="w-3 h-3" />}
+          {post.type_of_post}
+        </span>
+      </div>
+    </Link>
+  );
+}
+
 function PostTile({ label, icon, role, posts }: PostTileProps) {
   return (
     <div className="bg-white border border-gray-200 rounded-2xl shadow-sm overflow-hidden">
@@ -66,37 +111,17 @@ function PostTile({ label, icon, role, posts }: PostTileProps) {
         </span>
       </div>
 
-      {/* List */}
+      {/* Card grid */}
       {posts.length === 0 ? (
         <div className="px-5 py-8 text-center text-xs text-gray-400 italic">
           No complaints at the moment.
         </div>
       ) : (
-        <ul className="divide-y divide-gray-100">
+        <div className="p-4 grid sm:grid-cols-2 xl:grid-cols-3 gap-4">
           {posts.map((post) => (
-            <li key={post.id}>
-            <Link
-              to={`/admin/posts/${role}/${post.id}`}
-              className="flex items-center gap-4 px-5 py-3.5 hover:bg-gray-50 transition-colors cursor-pointer"
-            >
-              {/* ID chip */}
-              <span className="shrink-0 text-[11px] font-mono font-bold text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
-                #{post.id}
-              </span>
-              {/* Title */}
-              <span className="text-sm font-medium text-gray-800 truncate flex-1">{post.title}</span>
-              {/* Type badge */}
-              <span className="shrink-0 text-[11px] font-semibold text-gray-500 bg-gray-100 px-2 py-0.5 rounded">
-                {post.type_of_post}
-              </span>
-              {/* Status badge */}
-              <span className={`shrink-0 text-[11px] font-semibold px-2 py-0.5 rounded ${STATUS_STYLES[post.status] ?? 'bg-gray-100 text-gray-500'}`}>
-                {post.status.replace('_', ' ')}
-              </span>
-            </Link>
-            </li>
+            <PostCard key={post.id} role={role} post={post} />
           ))}
-        </ul>
+        </div>
       )}
     </div>
   );
@@ -113,6 +138,7 @@ export function XENPostView() {
   const [data, setData] = useState<XENPostsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<{ message: string; status?: number } | null>(null);
+  const [activeFilter, setActiveFilter] = useState<string>('All');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -194,6 +220,20 @@ export function XENPostView() {
 
   const { faculty_posts: fp, warden_posts: wp, centrehead_posts: cp } = data!;
 
+  const facultyPosts = normalise(fp);
+  const wardenPosts = normalise(wp);
+  const centreheadPosts = normalise(cp);
+  const allPosts = [...facultyPosts, ...wardenPosts, ...centreheadPosts];
+
+  // Apply the active status filter across all sections
+  const applyFilter = (posts: PostRow[]) =>
+    activeFilter === 'All' ? posts : posts.filter((p) => p.status === activeFilter);
+
+  const statusCounts = (status: string) =>
+    status === 'All'
+      ? allPosts.length
+      : allPosts.filter((p) => p.status === status).length;
+
   return (
     <MainLayout>
       <div className="flex-grow bg-gray-50 py-12 relative overflow-hidden">
@@ -214,27 +254,54 @@ export function XENPostView() {
             </p>
           </div>
 
+          {/* Status filter chips */}
+          <div className="mb-8 flex flex-wrap gap-2">
+            {(['All', ...STATUS_FILTERS] as string[]).map((status) => {
+              const isActive = activeFilter === status;
+              return (
+                <button
+                  key={status}
+                  onClick={() => setActiveFilter(status)}
+                  className={`inline-flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-full border transition-colors cursor-pointer ${
+                    isActive
+                      ? 'bg-[#ff9900] text-white border-[#ff9900]'
+                      : 'bg-white text-gray-600 border-gray-200 hover:border-[#ff9900]/50'
+                  }`}
+                >
+                  {status === 'All' ? 'All' : prettyStatus(status)}
+                  <span
+                    className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${
+                      isActive ? 'bg-white/25 text-white' : 'bg-gray-100 text-gray-500'
+                    }`}
+                  >
+                    {statusCounts(status)}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
           {/* Tiles — stacked vertically, full-width */}
           <div className="flex flex-col gap-6">
             <PostTile
               label="Faculty Posts"
               icon={<GraduationCap className="w-4 h-4" />}
               role="faculty"
-              posts={normalise(fp)}
+              posts={applyFilter(facultyPosts)}
             />
 
             <PostTile
               label="Warden Posts"
               icon={<BedDouble className="w-4 h-4" />}
               role="warden"
-              posts={normalise(wp)}
+              posts={applyFilter(wardenPosts)}
             />
 
             <PostTile
               label="Centre Head Posts"
               icon={<Building2 className="w-4 h-4" />}
               role="centrehead"
-              posts={normalise(cp)}
+              posts={applyFilter(centreheadPosts)}
             />
           </div>
         </div>
diff --git a/app/src/pages/auth/StaffLogin.tsx b/app/src/pages/auth/StaffLogin.tsx
index 8aa5036..dd6f88a 100644
--- a/app/src/pages/auth/StaffLogin.tsx
+++ b/app/src/pages/auth/StaffLogin.tsx
@@ -1,13 +1,8 @@
 import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
 
-const gridBg = {
-  backgroundImage: `linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)`,
-  backgroundSize: '32px 32px',
-};
-
 function dashboardFor(position: string): string {
   if (position.startsWith('XEN')) return '/admin/xen';
   if (position.startsWith('AE'))  return '/admin/ae';
@@ -62,81 +57,121 @@ export function StaffLogin() {
     }
   };
 
+  const inputCls = 'w-full px-3.5 py-2.5 border border-[#CCCCCC] rounded-lg focus:outline-none focus:border-[#111111] text-sm text-[#111111] placeholder-[#999999] bg-white transition-colors';
+  const labelCls = 'block text-sm font-semibold text-[#111111] mb-1.5';
+
   return (
     <MainLayout>
-      <div className="container mx-auto px-4 py-16 flex justify-center" style={gridBg}>
-        <div className="w-full max-w-md bg-white border border-[#E5E5E5] border-t-2 border-t-[#111111] rounded-lg overflow-hidden shadow-sm">
+      <div className="flex-grow flex flex-col">
 
-          <div className="px-8 pt-8 pb-2">
-            <h2 className="text-2xl font-bold text-[#111111] tracking-tight">Staff Login</h2>
-            <p className="text-sm text-[#666666] mt-1">Secure portal for XEN / AE / JE.</p>
+        {/* Header strip */}
+        <div className="border-b border-[#E5E5E5] py-5">
+          <div className="max-w-6xl mx-auto w-full px-8">
+            <h1 className="text-xl font-bold text-[#111111]">Staff Login</h1>
+            <p className="text-sm text-[#666666] mt-0.5">Secure portal for XEN / AE / JE.</p>
           </div>
+        </div>
 
-          {message && (
-            <div className={`mx-8 mt-6 p-3.5 rounded-lg border text-sm flex items-start gap-2.5 ${
-              status === 'success'
-                ? 'bg-[#E6F7ED] text-[#111111] border-[#111111]'
-                : 'bg-[#FCEBEA] text-[#111111] border-[#111111]'
-            }`}>
+        {/* Status banner */}
+        {message && (
+          <div className={`border-b text-sm ${status === 'success' ? 'bg-[#E6F7ED] border-[#bbf0d0] text-[#15803d]' : 'bg-[#FCEBEA] border-[#f5c6c4] text-[#b91c1c]'}`}>
+            <div className="max-w-6xl mx-auto w-full px-8 py-3 flex items-center gap-2.5">
               {status === 'success' ? (
-                <svg className="w-4 h-4 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               ) : (
-                <svg className="w-4 h-4 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
               )}
               <span className="font-medium">{message}</span>
             </div>
-          )}
-
-          <form onSubmit={handleSubmit} className="px-8 pt-6 pb-8 space-y-5">
-            <div className="space-y-1.5">
-              <label className="text-sm font-semibold text-[#111111]">Staff Email Address</label>
-              <input
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3.5 py-2.5 border border-[#111111] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#111111] text-sm"
-                placeholder="staff@nith.ac.in"
-                required
-              />
-            </div>
+          </div>
+        )}
+
+        {/* Form area */}
+        <div className="flex-grow flex items-start justify-center px-8 py-12">
+          <form onSubmit={handleSubmit} className="w-full max-w-sm space-y-6">
+
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-4">Credentials</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className={labelCls}>Staff Email Address</label>
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    className={inputCls}
+                    placeholder="staff@nith.ac.in"
+                    required
+                  />
+                </div>
 
-            <div className="space-y-1.5">
-              <label className="text-sm font-semibold text-[#111111]">Password</label>
-              <div className="relative">
-                <input
-                  type={showPassword ? 'text' : 'password'}
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-3.5 py-2.5 pr-10 border border-[#111111] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#111111] text-sm"
-                  placeholder="••••••••"
-                  required
-                />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(prev => !prev)}
-                  className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
-                  tabIndex={-1}
-                >
-                  {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                </button>
+                <div>
+                  <label className={labelCls}>Password</label>
+                  <div className="relative">
+                    <input
+                      type={showPassword ? 'text' : 'password'}
+                      value={password}
+                      onChange={e => setPassword(e.target.value)}
+                      className={`${inputCls} pr-10`}
+                      placeholder="••••••••"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(prev => !prev)}
+                      className="absolute inset-y-0 right-0 flex items-center px-3 text-[#666666] hover:text-[#111111] cursor-pointer transition-colors"
+                      tabIndex={-1}
+                    >
+                      {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
 
-            <div className="pt-2">
+            <div className="border-t border-[#CCCCCC]" />
+
+            <div className="flex items-center gap-4">
               <button
                 type="submit"
                 disabled={loading}
-                className="w-full bg-[#222222] hover:bg-[#000000] text-white font-semibold py-2.5 px-4 rounded-lg transition-colors duration-200 disabled:opacity-50 cursor-pointer active:scale-[0.98] text-sm"
+                className={`inline-flex items-center gap-2 bg-[#16a34a] hover:bg-[#15803d] text-white font-semibold py-2.5 px-8 rounded-lg transition-colors duration-200 text-sm active:scale-[0.98] ${loading ? 'opacity-70 cursor-not-allowed' : 'cursor-pointer'}`}
               >
+                {loading && (
+                  <svg className="animate-spin w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
+                  </svg>
+                )}
                 {loading ? 'Logging in…' : 'Login to Portal'}
               </button>
             </div>
+
+            <div className="border-t border-[#CCCCCC]" />
+
+            {/* Other Roles */}
+            <div>
+              <h2 className="text-xs font-bold uppercase tracking-widest text-[#666666] mb-3">Other Roles</h2>
+              <div className="flex flex-wrap gap-2">
+                <Link to="/faculty/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Faculty
+                </Link>
+                <Link to="/warden/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Warden
+                </Link>
+                <Link to="/centre-head/login" className="bg-[#222222] hover:bg-[#000000] text-white text-xs font-semibold px-3 py-2 rounded-lg transition-colors cursor-pointer">
+                  Login as Centre Head
+                </Link>
+              </div>
+            </div>
+
           </form>
         </div>
+
       </div>
     </MainLayout>
   );
diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx
index 5922e4c..121b2a0 100644
--- a/app/src/pages/profile/Profile.tsx
+++ b/app/src/pages/profile/Profile.tsx
@@ -282,7 +282,7 @@ export function Profile() {
           )}
 
           {!postsLoading && !postsError && posts.length > 0 && (
-            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
+            <div className="flex flex-col gap-4">
               {posts.map((post) => (
                 <ComplaintCard
                   key={post.id}