diff --git a/app/src/components/CommentBox.tsx b/app/src/components/CommentBox.tsx
index 7cfaeee..3504b96 100644
--- a/app/src/components/CommentBox.tsx
+++ b/app/src/components/CommentBox.tsx
@@ -1,4 +1,5 @@
 import { Clock, Pencil, Trash2 } from 'lucide-react';
+import { Loader } from './Loader';
 
 interface CommentBoxProps {
   comment: {
@@ -171,7 +172,7 @@ export function CommentBox({
                     disabled={isBusy || !editingText.trim()}
                     className="bg-zinc-900 text-white hover:bg-zinc-800 font-semibold text-xs px-4.5 py-1.5 rounded-lg transition disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer flex items-center gap-1.5"
                   >
-                    {isBusy && <span className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" />}
+                    {isBusy && <Loader size="xs" color="white" />}
                     Save
                   </button>
                 </div>
diff --git a/app/src/components/Loader.tsx b/app/src/components/Loader.tsx
new file mode 100644
index 0000000..e21ff05
--- /dev/null
+++ b/app/src/components/Loader.tsx
@@ -0,0 +1,30 @@
+interface LoaderProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'white' | 'dark' | 'orange' | 'rose';
+  className?: string;
+}
+
+export function Loader({ size = 'md', color = 'dark', className = '' }: LoaderProps) {
+  const sizeClasses = {
+    xs: 'w-3 h-3 border-2',
+    sm: 'w-4 h-4 border-2',
+    md: 'w-8 h-8 border-[3px]',
+    lg: 'w-12 h-12 border-4',
+    xl: 'w-16 h-16 border-4',
+  };
+
+  const colorClasses = {
+    white: 'border-white/20 border-t-white',
+    dark: 'border-zinc-200 border-t-zinc-800',
+    orange: 'border-amber-100 border-t-amber-500',
+    rose: 'border-rose-100 border-t-rose-500',
+  };
+
+  return (
+    <div
+      className={`rounded-full animate-spin ${sizeClasses[size]} ${colorClasses[color]} ${className}`}
+      role="status"
+      aria-label="loading"
+    />
+  );
+}
diff --git a/app/src/pages/admin/AEPostView.tsx b/app/src/pages/admin/AEPostView.tsx
index 774b4e2..008d9a4 100644
--- a/app/src/pages/admin/AEPostView.tsx
+++ b/app/src/pages/admin/AEPostView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -200,7 +201,7 @@ export function AEPostView() {
       <MainLayout>
         <div className="flex-grow flex items-center justify-center bg-gray-50 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" />
+            <Loader size="lg" color="orange" className="mx-auto mb-4" />
             <p className="text-gray-600 font-semibold">Fetching posts…</p>
           </div>
         </div>
diff --git a/app/src/pages/admin/AdminPostView.tsx b/app/src/pages/admin/AdminPostView.tsx
index fd990fd..c33f522 100644
--- a/app/src/pages/admin/AdminPostView.tsx
+++ b/app/src/pages/admin/AdminPostView.tsx
@@ -23,6 +23,7 @@ import {
 } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
 import { CommentBox } from '../../components/CommentBox';
+import { Loader } from '../../components/Loader';
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
@@ -603,7 +604,7 @@ export function AdminPostView() {
       <MainLayout>
         <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" />
+            <Loader size="lg" color="orange" className="mx-auto mb-4" />
             <p className="text-gray-600 font-semibold">Loading post…</p>
           </div>
         </div>
@@ -921,7 +922,7 @@ export function AdminPostView() {
                             className="inline-flex items-center gap-2 text-xs font-semibold text-white bg-zinc-900 hover:bg-zinc-800 px-4 py-2 rounded-lg transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
                           >
                             {acting ? (
-                              <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                              <Loader size="xs" color="white" />
                             ) : <MessageSquare className="w-3.5 h-3.5" />}
                             Post Comment
                           </button>
@@ -950,7 +951,7 @@ export function AdminPostView() {
                                     className="inline-flex items-center gap-2 text-xs font-semibold text-white bg-amber-500 hover:bg-amber-600 px-4 py-2 rounded-lg transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer"
                                   >
                                     {acting ? (
-                                      <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                      <Loader size="xs" color="white" />
                                     ) : btn.icon}
                                     {btn.label}
                                   </button>
@@ -1000,7 +1001,7 @@ export function AdminPostView() {
                                 className={`inline-flex items-center gap-2 text-xs font-semibold text-white ${buttonColorClass} px-4 py-2 rounded-lg transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none cursor-pointer`}
                               >
                                 {acting ? (
-                                  <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                                  <Loader size="xs" color="white" />
                                 ) : btn.icon}
                                 {btn.label}
                               </button>
diff --git a/app/src/pages/admin/JEPostView.tsx b/app/src/pages/admin/JEPostView.tsx
index 06b84e8..1e1c155 100644
--- a/app/src/pages/admin/JEPostView.tsx
+++ b/app/src/pages/admin/JEPostView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -185,7 +186,7 @@ export function JEPostView() {
       <MainLayout>
         <div className="flex-grow flex items-center justify-center bg-gray-50 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" />
+            <Loader size="lg" color="orange" className="mx-auto mb-4" />
             <p className="text-gray-600 font-semibold">Fetching posts…</p>
           </div>
         </div>
diff --git a/app/src/pages/admin/XENPostView.tsx b/app/src/pages/admin/XENPostView.tsx
index 0c93059..e786a83 100644
--- a/app/src/pages/admin/XENPostView.tsx
+++ b/app/src/pages/admin/XENPostView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import { AlertCircle, ServerCrash, ClipboardList, GraduationCap, BedDouble, Building2, Zap, Hammer } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -187,7 +188,7 @@ export function XENPostView() {
       <MainLayout>
         <div className="flex-grow flex items-center justify-center bg-gray-50 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" />
+            <Loader size="lg" color="orange" className="mx-auto mb-4" />
             <p className="text-gray-600 font-semibold">Fetching posts…</p>
           </div>
         </div>
diff --git a/app/src/pages/auth/AccountResetPass.tsx b/app/src/pages/auth/AccountResetPass.tsx
index dbbf88e..4ff1d07 100644
--- a/app/src/pages/auth/AccountResetPass.tsx
+++ b/app/src/pages/auth/AccountResetPass.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 const roleToApi: Record<string, string> = {
   faculty:    '/api/auth/faculty/reset-password',
@@ -203,12 +204,7 @@ export function AccountResetPass() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Resetting…' : 'Reset Password'}
               </button>
               {loginPath && (
diff --git a/app/src/pages/auth/CentreHeadForgotPassword.tsx b/app/src/pages/auth/CentreHeadForgotPassword.tsx
index 0bdd1f8..fd08ee4 100644
--- a/app/src/pages/auth/CentreHeadForgotPassword.tsx
+++ b/app/src/pages/auth/CentreHeadForgotPassword.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function CentreHeadForgotPassword() {
   const [email, setEmail]         = useState('');
@@ -94,12 +95,7 @@ export function CentreHeadForgotPassword() {
                 disabled={loading || submitted}
                 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 && (
-                  <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 && <Loader size="sm" color="white" />}
                 {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">
diff --git a/app/src/pages/auth/CentreHeadLogin.tsx b/app/src/pages/auth/CentreHeadLogin.tsx
index cc2c6fe..9dc7936 100644
--- a/app/src/pages/auth/CentreHeadLogin.tsx
+++ b/app/src/pages/auth/CentreHeadLogin.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function CentreHeadLogin() {
   const [email, setEmail]           = useState('');
@@ -134,12 +135,7 @@ export function CentreHeadLogin() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Logging in…' : 'Login'}
               </button>
               <Link to="/centre-head/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
diff --git a/app/src/pages/auth/CentreHeadSignup.tsx b/app/src/pages/auth/CentreHeadSignup.tsx
index e8b8737..74a6f79 100644
--- a/app/src/pages/auth/CentreHeadSignup.tsx
+++ b/app/src/pages/auth/CentreHeadSignup.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { BUILDINGS } from '../../constants/models';
 
 export function CentreHeadSignup() {
@@ -191,12 +192,7 @@ export function CentreHeadSignup() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Registering…' : 'Register as Centre Head'}
               </button>
               <Link
diff --git a/app/src/pages/auth/FacultyForgotPassword.tsx b/app/src/pages/auth/FacultyForgotPassword.tsx
index d2d3477..c1f47bd 100644
--- a/app/src/pages/auth/FacultyForgotPassword.tsx
+++ b/app/src/pages/auth/FacultyForgotPassword.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function FacultyForgotPassword() {
   const [email, setEmail]       = useState('');
@@ -94,12 +95,7 @@ export function FacultyForgotPassword() {
                 disabled={loading || submitted}
                 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 && (
-                  <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 && <Loader size="sm" color="white" />}
                 {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">
diff --git a/app/src/pages/auth/FacultyLogin.tsx b/app/src/pages/auth/FacultyLogin.tsx
index 122a9a4..c68e0d1 100644
--- a/app/src/pages/auth/FacultyLogin.tsx
+++ b/app/src/pages/auth/FacultyLogin.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function FacultyLogin() {
   const [email, setEmail]           = useState('');
@@ -134,12 +135,7 @@ export function FacultyLogin() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Logging in…' : 'Login'}
               </button>
               <Link to="/faculty/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
diff --git a/app/src/pages/auth/FacultySignup.tsx b/app/src/pages/auth/FacultySignup.tsx
index 318a930..45f54f8 100644
--- a/app/src/pages/auth/FacultySignup.tsx
+++ b/app/src/pages/auth/FacultySignup.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { DEPARTMENTS, BLOCK_LABELS, BLOCK_TYPES } from '../../constants/models';
 
 export function FacultySignup() {
@@ -251,12 +252,7 @@ export function FacultySignup() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Registering…' : 'Register as Faculty'}
               </button>
               <Link
diff --git a/app/src/pages/auth/StaffLogin.tsx b/app/src/pages/auth/StaffLogin.tsx
index e856f6f..86ce920 100644
--- a/app/src/pages/auth/StaffLogin.tsx
+++ b/app/src/pages/auth/StaffLogin.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 function dashboardFor(position: string): string {
   if (position.startsWith('XEN')) return '/admin/xen';
@@ -140,12 +141,7 @@ export function StaffLogin() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Logging in…' : 'Login to Portal'}
               </button>
             </div>
diff --git a/app/src/pages/auth/VerifyAccount.tsx b/app/src/pages/auth/VerifyAccount.tsx
index f0d5460..5a525b4 100644
--- a/app/src/pages/auth/VerifyAccount.tsx
+++ b/app/src/pages/auth/VerifyAccount.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Link, useSearchParams, useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 type VerifyStatus = 'loading' | 'success' | 'error' | 'no-token';
 
@@ -91,7 +92,7 @@ export function VerifyAccount() {
         {/* 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-[#E5E5E5] border-t-[#111111] animate-spin" />
+            <Loader size="xl" color="dark" className="w-16 h-16" />
             <p className="text-gray-500 font-medium">Verifying your account, please wait…</p>
           </div>
         )}
diff --git a/app/src/pages/auth/WardenForgotPassword.tsx b/app/src/pages/auth/WardenForgotPassword.tsx
index 825ac5f..226b8c2 100644
--- a/app/src/pages/auth/WardenForgotPassword.tsx
+++ b/app/src/pages/auth/WardenForgotPassword.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function WardenForgotPassword() {
   const [email, setEmail]         = useState('');
@@ -94,12 +95,7 @@ export function WardenForgotPassword() {
                 disabled={loading || submitted}
                 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 && (
-                  <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 && <Loader size="sm" color="white" />}
                 {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">
diff --git a/app/src/pages/auth/WardenLogin.tsx b/app/src/pages/auth/WardenLogin.tsx
index dd7626d..b084622 100644
--- a/app/src/pages/auth/WardenLogin.tsx
+++ b/app/src/pages/auth/WardenLogin.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 
 export function WardenLogin() {
   const [email, setEmail]           = useState('');
@@ -134,12 +135,7 @@ export function WardenLogin() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Logging in…' : 'Login'}
               </button>
               <Link to="/warden/signup" className="text-sm text-[#666666] hover:text-[#111111] transition-colors cursor-pointer">
diff --git a/app/src/pages/auth/WardenSignup.tsx b/app/src/pages/auth/WardenSignup.tsx
index 36dc736..f969314 100644
--- a/app/src/pages/auth/WardenSignup.tsx
+++ b/app/src/pages/auth/WardenSignup.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Eye, EyeOff } from 'lucide-react';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { HOSTELS } from '../../constants/models';
 
 export function WardenSignup() {
@@ -191,12 +192,7 @@ export function WardenSignup() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Registering…' : 'Register as Warden'}
               </button>
               <Link
diff --git a/app/src/pages/post/CentreHeadPost.tsx b/app/src/pages/post/CentreHeadPost.tsx
index 8ecfa53..83d9ee8 100644
--- a/app/src/pages/post/CentreHeadPost.tsx
+++ b/app/src/pages/post/CentreHeadPost.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { POST_TYPES } from '../../constants/models';
 
 export function CentreHeadPost() {
@@ -151,12 +152,7 @@ export function CentreHeadPost() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
diff --git a/app/src/pages/post/FacultyPost.tsx b/app/src/pages/post/FacultyPost.tsx
index 3349183..cee551c 100644
--- a/app/src/pages/post/FacultyPost.tsx
+++ b/app/src/pages/post/FacultyPost.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { POST_PLACES, POST_TYPES } from '../../constants/models';
 
 export function FacultyPost() {
@@ -161,12 +162,7 @@ export function FacultyPost() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
diff --git a/app/src/pages/post/PostView.tsx b/app/src/pages/post/PostView.tsx
index 32b5006..7b8f4ec 100644
--- a/app/src/pages/post/PostView.tsx
+++ b/app/src/pages/post/PostView.tsx
@@ -8,6 +8,7 @@ import {
 import { MainLayout } from '../../components/layout/MainLayout';
 import { POST_PLACES } from '../../constants/models';
 import { CommentBox } from '../../components/CommentBox';
+import { Loader } from '../../components/Loader';
 
 type Role = 'faculty' | 'warden' | 'centrehead';
 
@@ -159,7 +160,7 @@ export function PostView() {
       <MainLayout>
         <div className="flex-grow flex items-center justify-center py-12">
           <div className="text-center">
-            <div className="w-12 h-12 border-4 border-gray-900 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+            <Loader size="lg" color="dark" className="mx-auto mb-4" />
             <p className="text-gray-500 font-semibold text-sm">Loading complaint details…</p>
           </div>
         </div>
@@ -313,7 +314,7 @@ export function PostView() {
                   disabled={isBusy}
                   className="inline-flex items-center gap-1 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-xs font-semibold text-white rounded-lg transition disabled:opacity-40 cursor-pointer"
                 >
-                  {isBusy ? <div className="w-3 h-3 border-2 border-white border-t-transparent rounded-full animate-spin" /> : <Check className="w-3.5 h-3.5" />}
+                  {isBusy ? <Loader size="xs" color="white" className="border-2" /> : <Check className="w-3.5 h-3.5" />}
                   Save
                 </button>
                 <button
@@ -332,7 +333,7 @@ export function PostView() {
                 className="inline-flex items-center gap-1 px-3 py-1.5 border border-rose-200 rounded-lg text-xs font-semibold text-rose-600 bg-rose-50 hover:bg-rose-100 transition disabled:opacity-40 cursor-pointer"
               >
                 {isBusy && !isEditing
-                  ? <div className="w-3 h-3 border-2 border-rose-500 border-t-transparent rounded-full animate-spin" />
+                  ? <Loader size="xs" color="rose" className="border-2" />
                   : <Trash2 className="w-3.5 h-3.5" />}
                 Delete
               </button>
@@ -611,7 +612,7 @@ export function PostView() {
                       className="inline-flex items-center gap-1.5 text-xs font-semibold text-white bg-zinc-900 hover:bg-zinc-800 disabled:bg-zinc-200 disabled:text-zinc-400 px-4 py-2 rounded-lg transition-all duration-200 disabled:cursor-not-allowed cursor-pointer"
                     >
                       {commentSubmitting && (
-                        <span className="w-3.5 h-3.5 border-2 border-white border-t-transparent rounded-full animate-spin" />
+                        <Loader size="sm" color="white" className="border-[2px]" />
                       )}
                       Comment
                     </button>
diff --git a/app/src/pages/post/WardenPost.tsx b/app/src/pages/post/WardenPost.tsx
index 1385cc6..b81220c 100644
--- a/app/src/pages/post/WardenPost.tsx
+++ b/app/src/pages/post/WardenPost.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { MainLayout } from '../../components/layout/MainLayout';
+import { Loader } from '../../components/Loader';
 import { POST_TYPES } from '../../constants/models';
 
 export function WardenPost() {
@@ -163,12 +164,7 @@ export function WardenPost() {
                 disabled={loading}
                 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 && <Loader size="sm" color="white" />}
                 {loading ? 'Submitting…' : 'Submit Complaint'}
               </button>
             </div>
diff --git a/app/src/pages/profile/Profile.tsx b/app/src/pages/profile/Profile.tsx
index 5f62f84..5ee478d 100644
--- a/app/src/pages/profile/Profile.tsx
+++ b/app/src/pages/profile/Profile.tsx
@@ -7,6 +7,7 @@ import {
 import { MainLayout } from '../../components/layout/MainLayout';
 import { ComplaintCard } from '../../components/ComplaintCard';
 import type { ComplaintPost, EditForm, Role } from '../../components/ComplaintCard';
+import { Loader } from '../../components/Loader';
 
 interface ProfileData {
   name?: string;
@@ -83,7 +84,7 @@ export function Profile() {
       <MainLayout>
         <div className="flex-grow flex items-center justify-center py-12">
           <div className="text-center">
-            <div className="w-12 h-12 border-4 border-[#111111] border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+            <Loader size="lg" color="dark" className="mx-auto mb-4" />
             <p className="text-[#666666] font-semibold text-sm">Loading profile data…</p>
           </div>
         </div>
@@ -293,7 +294,7 @@ export function Profile() {
 
           {postsLoading && (
             <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" />
+              <Loader size="sm" color="dark" />
               <span className="text-sm font-semibold">Fetching your complaints…</span>
             </div>
           )}