diff --git a/client/src/features/admin/components/AdminLayout.tsx b/client/src/features/admin/components/AdminLayout.tsx
index 5d76ca3..064ad1b 100644
--- a/client/src/features/admin/components/AdminLayout.tsx
+++ b/client/src/features/admin/components/AdminLayout.tsx
@@ -4,13 +4,13 @@ import { useAuthStore } from "../../../store/authStore";
 import { motion } from "framer-motion";
 
 // Lucide Icons matching your clean, balanced stroke layouts
-import { 
-  LayoutDashboard, 
-  Users, 
-  ShieldAlert, 
-  LogOut, 
+import {
+  LayoutDashboard,
+  Users,
+  ShieldAlert,
+  LogOut,
   Library,
-  User 
+  User,
 } from "lucide-react";
 
 export const AdminLayout: React.FC = () => {
@@ -23,27 +23,44 @@ export const AdminLayout: React.FC = () => {
   };
 
   const navItems = [
-    { name: "Admin Dashboard", path: "/admin/dashboard", icon: LayoutDashboard, color: "text-blue-600" },
-    { name: "Manage Users", path: "/admin/users", icon: Users, color: "text-amber-700" },
-    { name: "Manage Librarians", path: "/admin/librarians", icon: ShieldAlert, color: "text-rose-600" },
+    {
+      name: "Admin Dashboard",
+      path: "/admin/dashboard",
+      icon: LayoutDashboard,
+      color: "text-blue-600",
+    },
+    {
+      name: "Manage Users",
+      path: "/admin/users",
+      icon: Users,
+      color: "text-amber-700",
+    },
+    {
+      name: "Manage Librarians",
+      path: "/admin/librarians",
+      icon: ShieldAlert,
+      color: "text-rose-600",
+    },
   ];
 
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-amber-50/40 font-sans text-slate-800 antialiased selection:bg-amber-200">
-      
       {/* Sidebar Navigation - Warm Archival Minimalist Layout (Matching 72 width) */}
-      <aside className="w-72 bg-white border-r border-amber-100 flex flex-col justify-between relative z-20 shadow-xs shrink-0">
+      <aside className="w-72 bg-card-bg border-r border-amber-100 flex flex-col justify-between relative z-20 shadow-xs shrink-0">
         <div className="p-6">
           <div className="flex items-center gap-3.5 py-3 border-b border-slate-100 mb-6">
-            
             {/* Elegant Institutional Identity Icon */}
             <div className="w-10 h-10 bg-slate-900 text-amber-100 rounded-lg flex items-center justify-center shadow-xs shrink-0">
               <Library size={20} className="stroke-[2.2]" />
             </div>
-            
+
             <div className="flex flex-col">
-              <span className="font-bold text-base tracking-tight text-slate-900 leading-tight">LMS</span>
-              <span className="text-xs text-slate-400 font-bold uppercase tracking-wider mt-0.5">Admin Portal</span>
+              <span className="font-bold text-base tracking-tight text-text-main leading-tight">
+                LMS
+              </span>
+              <span className="text-xs text-slate-400 font-bold uppercase tracking-wider mt-0.5">
+                Admin Portal
+              </span>
             </div>
           </div>
 
@@ -63,14 +80,17 @@ export const AdminLayout: React.FC = () => {
                     }`
                   }
                 >
-                  <IconComponent size={18} className={`stroke-[2.2] shrink-0 ${item.color}`} />
+                  <IconComponent
+                    size={18}
+                    className={`stroke-[2.2] shrink-0 ${item.color}`}
+                  />
                   <span>{item.name}</span>
                 </NavLink>
               );
             })}
           </nav>
         </div>
-        
+
         {/* Sidebar Footer - Spacious Action Deck matches exactly */}
         <div className="p-5 border-t border-slate-100 bg-slate-50/60">
           <button
@@ -78,30 +98,36 @@ export const AdminLayout: React.FC = () => {
             className="flex w-full items-center justify-center gap-2.5 px-4 py-3 rounded-lg text-sm font-bold text-orange-700 bg-orange-50 hover:bg-orange-100 border border-orange-200/60 transition-all cursor-pointer shadow-2xs"
           >
             <LogOut size={16} className="stroke-[2.5]" />
-            <span>Logout System</span>
+            <span>Logout</span>
           </button>
         </div>
       </aside>
 
       {/* Main Structural Area */}
       <div className="flex-1 flex flex-col overflow-hidden">
-        
         {/* Header Frame - Formatted with identical Height h-22 and Side Padding */}
-        <header className="h-22 bg-white border-b border-amber-100 flex items-center justify-between px-10 shadow-2xs shrink-0">
+        <header className="h-22 bg-card-bg border-b border-amber-100 flex items-center justify-between px-10 shadow-2xs shrink-0">
           <div>
-            <h1 className="text-lg font-bold text-slate-900 tracking-tight">Admin Dashboard</h1>
-            <p className="text-sm text-slate-400 font-medium mt-0.5">Core directory controls and active network administration</p>
+            <h1 className="text-lg font-bold text-text-main tracking-tight">
+              Admin Dashboard
+            </h1>
+            <p className="text-sm text-slate-400 font-medium mt-0.5">
+              Core directory controls and active network administration
+            </p>
           </div>
-          
+
           <div className="flex items-center gap-5">
             <div className="text-right hidden sm:block">
               <p className="text-xs text-slate-400 font-medium tracking-wide uppercase mt-1">
-                ROLE: <span className="text-rose-600 font-bold">{user?.role || "ADMIN"}</span>
+                ROLE:{" "}
+                <span className="text-rose-600 font-bold">
+                  {user?.role || "ADMIN"}
+                </span>
               </p>
             </div>
-            
+
             {/* User Profile Avatar Frame */}
-            <div className="w-11 h-11 bg-slate-50 border border-slate-200/60 text-slate-700 rounded-lg flex items-center justify-center shadow-2xs">
+            <div className="w-11 h-11 bg-slate-50 border border-border-main/60 text-text-main rounded-lg flex items-center justify-center shadow-2xs">
               <User size={18} className="stroke-[2.2]" />
             </div>
           </div>
@@ -120,4 +146,4 @@ export const AdminLayout: React.FC = () => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/DeleteLibrarianProfile.tsx b/client/src/features/admin/components/DeleteLibrarianProfile.tsx
index bb965a0..9a2b0a4 100644
--- a/client/src/features/admin/components/DeleteLibrarianProfile.tsx
+++ b/client/src/features/admin/components/DeleteLibrarianProfile.tsx
@@ -20,54 +20,56 @@ export const DeleteLibrarianProfile: React.FC<DeleteLibrarianProfileProps> = ({
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
       {/* Container: Matches the clean off-white base with soft linen-amber border */}
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
         <div className="text-center">
           {/* Header: Crisp text-base alignment with deep slate-ink tone */}
-          <h3 className="text-base font-bold text-slate-900 tracking-tight">
+          <h3 className="text-base font-bold text-text-main tracking-tight">
             Revoke Administrative Access
           </h3>
-          
+
           {/* Main Paragraph: Structured at text-sm slate-600 for high editorial legibility */}
           <p className="text-sm text-slate-600 mt-4 leading-relaxed">
             Are you completely confident about stripping{" "}
-            <strong className="text-slate-900 font-bold">"{librarianName}"</strong> of all administrative privileges and access layers?
+            <strong className="text-text-main font-bold">
+              "{librarianName}"
+            </strong>{" "}
+            of all administrative privileges and access layers?
           </p>
-          
+
           {/* Callout Block: Shipped with premium cream/rose warning surface tokens */}
           <div className="text-xs text-rose-900 font-medium mt-5 bg-rose-50/60 border border-rose-100 p-4 rounded-xl text-left leading-relaxed">
             <span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">
               ⚠️ Critical Reminder:
             </span>
-            This action completely cleanses their system profile registry. They will instantly lose terminal authentication rights and management access across the network.
+            This action completely cleanses their system profile registry. They
+            will instantly lose terminal authentication rights and management
+            access across the network.
           </div>
         </div>
-        
+
         {/* Modal Action Footers - Crisp Touchpoints */}
         <div className="mt-6 flex justify-end gap-3 pt-5 border-t border-slate-100 text-xs font-bold tracking-wide">
-          
           {/* Cancel/Abort Button */}
-          <button 
-            type="button" 
-            onClick={onClose} 
+          <button
+            type="button"
+            onClick={onClose}
             disabled={isPending}
-            className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Abort
           </button>
-          
+
           {/* Action Button: Dark editorial signature signature button block */}
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             disabled={isPending}
             className="px-4 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all cursor-pointer shadow-sm disabled:bg-slate-700 disabled:cursor-not-allowed min-w-32.5 text-center"
           >
             {isPending ? "Revoking..." : "Confirm Deletion"}
           </button>
-          
         </div>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/DeleteUserModal.tsx b/client/src/features/admin/components/DeleteUserModal.tsx
index 980f735..3a9c70f 100644
--- a/client/src/features/admin/components/DeleteUserModal.tsx
+++ b/client/src/features/admin/components/DeleteUserModal.tsx
@@ -20,54 +20,55 @@ export const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
       {/* Container: Matches the clean off-white base with soft linen-amber border */}
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
         <div className="text-center">
           {/* Header: Crisp text-base alignment with deep slate-ink tone */}
-          <h3 className="text-base font-bold text-slate-900 tracking-tight">
+          <h3 className="text-base font-bold text-text-main tracking-tight">
             Confirm User Account Purge
           </h3>
-          
+
           {/* Main Paragraph: Structured at text-sm slate-600 for high editorial legibility */}
           <p className="text-sm text-slate-600 mt-4 leading-relaxed">
-            Are you sure you want to completely delete the system profile record for{" "}
-            <strong className="text-slate-900 font-bold">"{userName}"</strong> from the library management core engine?
+            Are you sure you want to completely delete the system profile record
+            for{" "}
+            <strong className="text-text-main font-bold">"{userName}"</strong>{" "}
+            from the library management core engine?
           </p>
-          
+
           {/* Callout Block: Shipped with premium cream/rose warning surface tokens */}
           <div className="text-xs text-rose-900 font-medium mt-5 bg-rose-50/60 border border-rose-100 p-4 rounded-xl text-left leading-relaxed">
             <span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">
               ⚠️ Irreversible Action:
             </span>
-            This process instantly flushes out their system user registry parameters, active resource rentals, tracking workflows, and systemic archival logs completely.
+            This process instantly flushes out their system user registry
+            parameters, active resource rentals, tracking workflows, and
+            systemic archival logs completely.
           </div>
         </div>
-        
+
         {/* Modal Action Footers - Crisp Touchpoints */}
         <div className="mt-6 flex justify-end gap-3 pt-5 border-t border-slate-100 text-xs font-bold tracking-wide">
-          
           {/* Cancel Button */}
-          <button 
-            type="button" 
-            onClick={onClose} 
+          <button
+            type="button"
+            onClick={onClose}
             disabled={isPending}
-            className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
           >
             Cancel
           </button>
-          
+
           {/* Action Button: Dark editorial signature signature button block */}
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             disabled={isPending}
             className="px-4 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all cursor-pointer shadow-sm disabled:bg-slate-700 disabled:cursor-not-allowed min-w-30 text-center"
           >
             {isPending ? "Purging Files..." : "Confirm Delete"}
           </button>
-          
         </div>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/LibrarianModal.tsx b/client/src/features/admin/components/LibrarianModal.tsx
index 648a07e..e4f588b 100644
--- a/client/src/features/admin/components/LibrarianModal.tsx
+++ b/client/src/features/admin/components/LibrarianModal.tsx
@@ -26,16 +26,22 @@ interface LibrarianModalProps {
   librarianToEdit?: UserRecord | null;
 }
 
-export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose, librarianToEdit }) => {
+export const LibrarianModal: React.FC<LibrarianModalProps> = ({
+  isOpen,
+  onClose,
+  librarianToEdit,
+}) => {
   const queryClient = useQueryClient();
   const isEditMode = !!librarianToEdit;
 
-  // 💡 FIXED: Initialize state directly from props. 
+  // 💡 FIXED: Initialize state directly from props.
   // Combined with the unique layout `key`, this renders cleanly without a useEffect loop.
   const [name, setName] = useState(librarianToEdit?.name || "");
   const [gmail, setGmail] = useState(librarianToEdit?.gmail || "");
   const [password, setPassword] = useState("");
-  const [phoneNumber, setPhoneNumber] = useState(librarianToEdit?.phone_number || "");
+  const [phoneNumber, setPhoneNumber] = useState(
+    librarianToEdit?.phone_number || "",
+  );
   const [errors, setErrors] = useState<Record<string, string>>({});
 
   const handleResetAndClose = () => {
@@ -46,28 +52,37 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
     setErrors({});
     onClose();
   };
-  
+
   const librarianMutation = useMutation({
     mutationFn: async (payload: Record<string, string>) => {
       if (isEditMode) {
-        const response = await axiosClient.patch(`/admin/librarian/${librarianToEdit?.user_id}`, payload);
+        const response = await axiosClient.patch(
+          `/admin/librarian/${librarianToEdit?.user_id}`,
+          payload,
+        );
         return response.data;
       } else {
-        const response = await axiosClient.post("/admin/add-librarian", payload);
+        const response = await axiosClient.post(
+          "/admin/add-librarian",
+          payload,
+        );
         return response.data;
       }
     },
     onSuccess: () => {
       toast.success(
-        isEditMode 
-          ? "Librarian details updated successfully." 
-          : "New librarian authorized successfully"
+        isEditMode
+          ? "Librarian details updated successfully."
+          : "New librarian authorized successfully",
       );
-      queryClient.invalidateQueries({ queryKey: ["adminUsersMasterFeed"] }); 
+      queryClient.invalidateQueries({ queryKey: ["adminUsersMasterFeed"] });
       handleResetAndClose();
     },
     onError: (error: AxiosError<BackendErrorResponse>) => {
-      toast.error(error.response?.data?.message || "Failed to commit librarian adjustments.");
+      toast.error(
+        error.response?.data?.message ||
+          "Failed to commit librarian adjustments.",
+      );
     },
   });
 
@@ -75,7 +90,7 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
     const localErrors: Record<string, string> = {};
 
     if (!name.trim()) localErrors.name = "Full operational name is mandatory.";
-    
+
     const gmailRegex = /^[a-z0-9](\.?[a-z0-9]){4,29}@gmail\.com$/;
     if (!gmail.trim()) {
       localErrors.gmail = "Routing handle tracking input required.";
@@ -87,14 +102,16 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
     if (!password && !isEditMode) {
       localErrors.password = "Initial assignment authorization key required.";
     } else if (password && !passwordRegex.test(password)) {
-      localErrors.password = "Must contain 8+ characters, with uppercase, lowercase, and numeric parameters.";
+      localErrors.password =
+        "Must contain 8+ characters, with uppercase, lowercase, and numeric parameters.";
     }
 
     const phoneRegex = /^\d{10}$/;
     if (!phoneNumber) {
       localErrors.phoneNumber = "Connectivity line mapping trace required.";
     } else if (!phoneRegex.test(phoneNumber)) {
-      localErrors.phoneNumber = "Requires strict 10-digit numeric character string.";
+      localErrors.phoneNumber =
+        "Requires strict 10-digit numeric character string.";
     }
 
     setErrors(localErrors);
@@ -105,7 +122,7 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
     e.preventDefault();
     if (!validateForm()) return;
 
-    const payload: Record<string, string> = isEditMode 
+    const payload: Record<string, string> = isEditMode
       ? {
           name: name.trim(),
           gmail: gmail.trim().toLowerCase(),
@@ -127,8 +144,7 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md border border-amber-100/80 animate-zoom-in overflow-hidden">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md border border-amber-100/80 animate-zoom-in overflow-hidden">
         {/* Header Layout Block */}
         <div className="p-6 border-b border-slate-100 flex bg-slate-900 items-center justify-between">
           <div>
@@ -136,13 +152,15 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
               {isEditMode ? "Modify Librarian Details" : "Add New Librarian"}
             </h3>
             <p className="text-xs text-slate-400 font-medium mt-0.5">
-              {isEditMode ? "Adjust system operational parameters" : "All fields below are strictly required"}
+              {isEditMode
+                ? "Adjust system operational parameters"
+                : "All fields below are strictly required"}
             </p>
           </div>
-          <button 
-            type="button" 
-            onClick={handleResetAndClose} 
-            className="p-1.5 hover:bg-slate-50 text-slate-400 hover:text-slate-900 rounded-lg transition-colors cursor-pointer"
+          <button
+            type="button"
+            onClick={handleResetAndClose}
+            className="p-1.5 hover:bg-slate-50 text-slate-400 hover:text-text-main rounded-lg transition-colors cursor-pointer"
           >
             <X size={16} />
           </button>
@@ -150,86 +168,133 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
 
         {/* Input Form Fields Wrapper */}
         <form onSubmit={handleSubmission} className="p-6 space-y-4">
-          
           {/* Name Field */}
           <div className="space-y-1.5">
-            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Official Handle Name</label>
+            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+              Official Handle Name
+            </label>
             <div className="relative">
-              <User className="absolute left-3.5 top-3 text-slate-400" size={14} />
+              <User
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={14}
+              />
               <input
                 type="text"
                 placeholder="Marcus Vance"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-slate-900 rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.name ? "border-rose-500 focus:ring-rose-500/5" : "border-slate-200 focus:ring-slate-900/5 focus:border-slate-900"
+                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-text-main rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.name
+                    ? "border-rose-500 focus:ring-rose-500/5"
+                    : "border-border-main focus:ring-slate-900/5 focus:border-slate-900"
                 }`}
               />
             </div>
-            {errors.name && <p className="text-[11px] text-rose-600 font-medium mt-1">{errors.name}</p>}
+            {errors.name && (
+              <p className="text-[11px] text-rose-600 font-medium mt-1">
+                {errors.name}
+              </p>
+            )}
           </div>
 
           {/* Email Field */}
           <div className="space-y-1.5">
-            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">System Routing Address</label>
+            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+              System Routing Address
+            </label>
             <div className="relative">
-              <Mail className="absolute left-3.5 top-3 text-slate-400" size={14} />
+              <Mail
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={14}
+              />
               <input
                 type="text"
                 placeholder="marcus.vance@gmail.com"
                 value={gmail}
                 onChange={(e) => setGmail(e.target.value)}
-                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-slate-900 rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.gmail ? "border-rose-500 focus:ring-rose-500/5" : "border-slate-200 focus:ring-slate-900/5 focus:border-slate-900"
+                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-text-main rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.gmail
+                    ? "border-rose-500 focus:ring-rose-500/5"
+                    : "border-border-main focus:ring-slate-900/5 focus:border-slate-900"
                 }`}
               />
             </div>
-            {errors.gmail && <p className="text-[11px] text-rose-600 font-medium mt-1">{errors.gmail}</p>}
+            {errors.gmail && (
+              <p className="text-[11px] text-rose-600 font-medium mt-1">
+                {errors.gmail}
+              </p>
+            )}
           </div>
 
           {/* Password Field */}
           <div className="space-y-1.5">
             <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block leading-snug">
-              {isEditMode ? "Change Security Password (Leave blank to preserve)" : "Terminal Assignment Password"}
+              {isEditMode
+                ? "Change Security Password (Leave blank to preserve)"
+                : "Terminal Assignment Password"}
             </label>
             <div className="relative">
-              <Lock className="absolute left-3.5 top-3 text-slate-400" size={14} />
+              <Lock
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={14}
+              />
               <input
                 type="text"
                 placeholder={isEditMode ? "••••••••" : "e.g., ClearanceKey99"}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-slate-900 rounded-xl text-xs font-semibold tracking-wide transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.password ? "border-rose-500 focus:ring-rose-500/5" : "border-slate-200 focus:ring-slate-900/5 focus:border-slate-900"
+                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-text-main rounded-xl text-xs font-semibold tracking-wide transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.password
+                    ? "border-rose-500 focus:ring-rose-500/5"
+                    : "border-border-main focus:ring-slate-900/5 focus:border-slate-900"
                 }`}
               />
             </div>
-            {errors.password && <p className="text-[11px] text-rose-600 font-medium mt-1">{errors.password}</p>}
+            {errors.password && (
+              <p className="text-[11px] text-rose-600 font-medium mt-1">
+                {errors.password}
+              </p>
+            )}
           </div>
 
           {/* Phone Number Field */}
           <div className="space-y-1.5">
-            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Secure Mobile String</label>
+            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+              Secure Mobile String
+            </label>
             <div className="relative">
-              <Phone className="absolute left-3.5 top-3 text-slate-400" size={14} />
+              <Phone
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={14}
+              />
               <input
                 type="text"
                 maxLength={10}
                 placeholder="9876543210"
                 value={phoneNumber}
-                onChange={(e) => setPhoneNumber(e.target.value.replace(/\D/g, ""))}
-                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-slate-900 rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.phoneNumber ? "border-rose-500 focus:ring-rose-500/5" : "border-slate-200 focus:ring-slate-900/5 focus:border-slate-900"
+                onChange={(e) =>
+                  setPhoneNumber(e.target.value.replace(/\D/g, ""))
+                }
+                className={`w-full pl-9 pr-4 py-2.5 bg-slate-50 border text-text-main rounded-xl text-xs font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.phoneNumber
+                    ? "border-rose-500 focus:ring-rose-500/5"
+                    : "border-border-main focus:ring-slate-900/5 focus:border-slate-900"
                 }`}
               />
             </div>
-            {errors.phoneNumber && <p className="text-[11px] text-rose-600 font-medium mt-1">{errors.phoneNumber}</p>}
+            {errors.phoneNumber && (
+              <p className="text-[11px] text-rose-600 font-medium mt-1">
+                {errors.phoneNumber}
+              </p>
+            )}
           </div>
 
           {/* Configuration Alert Badge */}
-          <div className="bg-slate-50 p-3 rounded-xl border border-slate-200/60 flex items-center gap-2 text-xs font-bold text-slate-700 select-none">
-            <ShieldCheck size={15} className="text-slate-900" />
-            <span className="text-[11px] uppercase tracking-wide">Enforced Authority Level: LIBRARIAN</span>
+          <div className="bg-slate-50 p-3 rounded-xl border border-border-main/60 flex items-center gap-2 text-xs font-bold text-text-main select-none">
+            <ShieldCheck size={15} className="text-text-main" />
+            <span className="text-[11px] uppercase tracking-wide">
+              Enforced Authority Level: LIBRARIAN
+            </span>
           </div>
 
           {/* Action Footer Buttons */}
@@ -237,7 +302,7 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
             <button
               type="button"
               onClick={handleResetAndClose}
-              className="flex-1 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer text-center"
+              className="flex-1 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer text-center"
             >
               Cancel
             </button>
@@ -246,12 +311,15 @@ export const LibrarianModal: React.FC<LibrarianModalProps> = ({ isOpen, onClose,
               disabled={librarianMutation.isPending}
               className="flex-1 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all shadow-sm cursor-pointer disabled:bg-slate-700 disabled:cursor-not-allowed text-center"
             >
-              {librarianMutation.isPending ? "Syncing..." : isEditMode ? "Apply Changes" : "Authorize Node"}
+              {librarianMutation.isPending
+                ? "Syncing..."
+                : isEditMode
+                  ? "Apply Changes"
+                  : "Authorize Node"}
             </button>
           </div>
-
         </form>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/LibrarianProfile.tsx b/client/src/features/admin/components/LibrarianProfile.tsx
index b2ffedd..3bd8bd9 100644
--- a/client/src/features/admin/components/LibrarianProfile.tsx
+++ b/client/src/features/admin/components/LibrarianProfile.tsx
@@ -1,5 +1,13 @@
 import React, { useState } from "react";
-import { ArrowLeft, Mail, Phone, Calendar, ShieldCheck, Edit3, UserX } from "lucide-react";
+import {
+  ArrowLeft,
+  Mail,
+  Phone,
+  Calendar,
+  ShieldCheck,
+  Edit3,
+  UserX,
+} from "lucide-react";
 import { LibrarianModal } from "./LibrarianModal";
 import { DeleteLibrarianProfile } from "./DeleteLibrarianProfile";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
@@ -20,7 +28,10 @@ interface LibrarianProfileProps {
   onBack: () => void;
 }
 
-export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onBack }) => {
+export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({
+  profile,
+  onBack,
+}) => {
   const queryClient = useQueryClient();
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -28,14 +39,16 @@ export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onB
   // PURGE MUTATION EXECUTION LINK
   const deleteMutation = useMutation({
     mutationFn: async () => {
-      const response = await axiosClient.delete(`/admin/librarian/${profile.user_id}`);
+      const response = await axiosClient.delete(
+        `/admin/librarian/${profile.user_id}`,
+      );
       return response.data;
     },
     onSuccess: () => {
       toast.success("Librarian profile deleted successfully.");
-      queryClient.invalidateQueries({ queryKey: ["adminUsersMasterFeed"] }); 
+      queryClient.invalidateQueries({ queryKey: ["adminUsersMasterFeed"] });
       setIsDeleteModalOpen(false);
-      onBack(); 
+      onBack();
     },
     onError: () => {
       toast.error("Failed to cleanly flush operator entry.");
@@ -46,30 +59,31 @@ export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onB
   return (
     <>
       <div className="space-y-6 max-w-4xl animate-fade-in font-sans">
-        
         {/* Navigation Action Strip */}
         <button
           onClick={onBack}
-          className="flex items-center gap-2 text-xs font-bold text-slate-500 hover:text-slate-900 transition-colors cursor-pointer group uppercase tracking-wider"
+          className="flex items-center gap-2 text-xs font-bold text-slate-500 hover:text-text-main transition-colors cursor-pointer group uppercase tracking-wider"
         >
-          <ArrowLeft size={14} className="transform group-hover:-translate-x-0.5 transition-transform" />
+          <ArrowLeft
+            size={14}
+            className="transform group-hover:-translate-x-0.5 transition-transform"
+          />
           Back
         </button>
 
         {/* Identity Details Box */}
-        <div className="bg-white rounded-2xl border border-slate-100 shadow-xl overflow-hidden">
-          
+        <div className="bg-card-bg rounded-2xl border border-slate-100 shadow-xl overflow-hidden">
           {/* Banner Layout: Swapped to high-contrast dark signature panel */}
           <div className="h-24 bg-slate-900 p-6 flex items-center justify-between border-b border-amber-100/20">
             <span className="text-[10px] font-mono font-bold tracking-widest text-amber-50/60 uppercase">
               System Node: Active Operator
             </span>
-            
+
             {/* FLOATING ACTION MANAGEMENT SYSTEM PORTAL BUTTONS */}
             <div className="flex items-center gap-2.5">
               <button
                 onClick={() => setIsEditModalOpen(true)}
-                className="flex items-center gap-1.5 px-3 py-2 bg-white/10 hover:bg-white/20 text-amber-50 text-[11px] font-bold uppercase tracking-wider rounded-xl transition-all cursor-pointer border border-white/5"
+                className="flex items-center gap-1.5 px-3 py-2 bg-card-bg/10 hover:bg-card-bg/20 text-amber-50 text-[11px] font-bold uppercase tracking-wider rounded-xl transition-all cursor-pointer border border-white/5"
               >
                 <Edit3 size={12} /> Edit Profile
               </button>
@@ -90,17 +104,20 @@ export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onB
 
             <div className="pt-12 md:flex md:items-center md:justify-between border-b border-slate-100 pb-6">
               <div>
-                <h2 className="text-2xl font-bold text-slate-900 tracking-tight">
+                <h2 className="text-2xl font-bold text-text-main tracking-tight">
                   {profile.name}
                 </h2>
                 <p className="text-xs text-slate-600 font-medium mt-1 flex items-center gap-1.5">
-                  <ShieldCheck size={14} className="text-slate-900" /> Assigned Library Officer
+                  <ShieldCheck size={14} className="text-text-main" /> Assigned
+                  Library Officer
                 </p>
               </div>
-              
-              <div className="mt-4 md:mt-0 bg-slate-50 border border-slate-200/60 px-4 py-2 rounded-xl text-left md:text-right">
-                <p className="text-[9px] font-mono font-bold tracking-widest text-slate-400 uppercase">Account ID</p>
-                <p className="text-xs text-slate-900 font-bold uppercase mt-0.5 tracking-wide">
+
+              <div className="mt-4 md:mt-0 bg-slate-50 border border-border-main/60 px-4 py-2 rounded-xl text-left md:text-right">
+                <p className="text-[9px] font-mono font-bold tracking-widest text-slate-400 uppercase">
+                  Account ID
+                </p>
+                <p className="text-xs text-text-main font-bold uppercase mt-0.5 tracking-wide">
                   LIB-{profile.user_id.slice(-6).toUpperCase()}
                 </p>
               </div>
@@ -109,43 +126,53 @@ export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onB
             {/* Matrix Data Grid Fields */}
             <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
               <div className="space-y-1.5">
-                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Email Address</label>
-                <div className="flex items-center gap-2.5 text-sm text-slate-700 font-medium bg-slate-50 p-3 rounded-xl border border-slate-200/60 select-all">
+                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+                  Email Address
+                </label>
+                <div className="flex items-center gap-2.5 text-sm text-text-main font-medium bg-slate-50 p-3 rounded-xl border border-border-main/60 select-all">
                   <Mail size={15} className="text-slate-400" />
                   <span>{profile.gmail}</span>
                 </div>
               </div>
 
               <div className="space-y-1.5">
-                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Phone Number</label>
-                <div className="flex items-center gap-2.5 text-sm text-slate-700 font-medium bg-slate-50 p-3 rounded-xl border border-slate-200/60 select-all">
+                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+                  Phone Number
+                </label>
+                <div className="flex items-center gap-2.5 text-sm text-text-main font-medium bg-slate-50 p-3 rounded-xl border border-border-main/60 select-all">
                   <Phone size={15} className="text-slate-400" />
                   <span>{profile.phone_number || "No Phone Registered"}</span>
                 </div>
               </div>
 
               <div className="space-y-1.5">
-                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Registration Date</label>
-                <div className="flex items-center gap-2.5 text-sm text-slate-700 font-medium bg-slate-50 p-3 rounded-xl border border-slate-200/60">
+                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+                  Registration Date
+                </label>
+                <div className="flex items-center gap-2.5 text-sm text-text-main font-medium bg-slate-50 p-3 rounded-xl border border-border-main/60">
                   <Calendar size={15} className="text-slate-400" />
-                  <span>{new Date(profile.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
+                  <span>
+                    {new Date(profile.created_at).toLocaleDateString(
+                      undefined,
+                      { year: "numeric", month: "long", day: "numeric" },
+                    )}
+                  </span>
                 </div>
               </div>
             </div>
-
           </div>
         </div>
       </div>
 
       {/* OVERLAY LAYERS MODAL PORTALS CONTAINER */}
-      <LibrarianModal 
+      <LibrarianModal
         key={isEditModalOpen ? `edit-${profile.user_id}` : "closed"}
         isOpen={isEditModalOpen}
         onClose={() => setIsEditModalOpen(false)}
         librarianToEdit={profile}
       />
 
-      <DeleteLibrarianProfile 
+      <DeleteLibrarianProfile
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}
         onConfirm={() => deleteMutation.mutate()}
@@ -154,4 +181,4 @@ export const LibrarianProfile: React.FC<LibrarianProfileProps> = ({ profile, onB
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/ManageLibrarians.tsx b/client/src/features/admin/components/ManageLibrarians.tsx
index 57f3bb8..9756c70 100644
--- a/client/src/features/admin/components/ManageLibrarians.tsx
+++ b/client/src/features/admin/components/ManageLibrarians.tsx
@@ -2,9 +2,16 @@ import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { axiosClient } from "../../../api/axiosClient";
 import { useAuthStore } from "../../../store/authStore";
-import { LibrarianProfile } from "./LibrarianProfile"; 
-import { LibrarianModal } from "./LibrarianModal"; 
-import { Mail, Phone, ArrowRight, UserPlus, ChevronLeft, ChevronRight } from "lucide-react"; 
+import { LibrarianProfile } from "./LibrarianProfile";
+import { LibrarianModal } from "./LibrarianModal";
+import {
+  Mail,
+  Phone,
+  ArrowRight,
+  UserPlus,
+  ChevronLeft,
+  ChevronRight,
+} from "lucide-react";
 
 interface UserRecord {
   user_id: string;
@@ -28,8 +35,10 @@ interface ServerApiResponse {
 
 export const ManageLibrarians: React.FC = () => {
   const token = useAuthStore((state) => state.token);
-  const [selectedLibrarian, setSelectedLibrarian] = useState<UserRecord | null>(null);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); 
+  const [selectedLibrarian, setSelectedLibrarian] = useState<UserRecord | null>(
+    null,
+  );
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 10;
@@ -42,26 +51,28 @@ export const ManageLibrarians: React.FC = () => {
         params: {
           limit: itemsPerPage,
           offset: offset,
-        }
+        },
       });
       return res.data;
     },
     enabled: !!token,
   });
 
-  const responsePayload = data?.data; 
+  const responsePayload = data?.data;
 
-  const librariansList: UserRecord[] = Array.isArray(data) 
-    ? data 
-    : Array.isArray(responsePayload) 
-      ? responsePayload 
-      : (responsePayload && "data" in responsePayload && Array.isArray(responsePayload.data))
+  const librariansList: UserRecord[] = Array.isArray(data)
+    ? data
+    : Array.isArray(responsePayload)
+      ? responsePayload
+      : responsePayload &&
+          "data" in responsePayload &&
+          Array.isArray(responsePayload.data)
         ? responsePayload.data
         : [];
 
-  const totalCount: number = Array.isArray(data) 
-    ? librariansList.length 
-    : (responsePayload && "totalCount" in responsePayload)
+  const totalCount: number = Array.isArray(data)
+    ? librariansList.length
+    : responsePayload && "totalCount" in responsePayload
       ? responsePayload.totalCount
       : 0;
 
@@ -81,12 +92,16 @@ export const ManageLibrarians: React.FC = () => {
 
   return (
     <div className="flex flex-col min-h-[calc(100vh-6rem)] max-w-6xl relative animate-fade-in font-sans">
-      
       {/* HEADER CONTROLS */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-white p-5 mb-6 rounded-2xl border border-slate-100 shadow-xs shrink-0">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 bg-card-bg p-5 mb-6 rounded-2xl border border-slate-100 shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Library Operators</h2>
-          <p className="text-xs text-slate-400 font-medium mt-0.5">Manage staff terminals, clearance logs, and authority configurations.</p>
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Library Operators
+          </h2>
+          <p className="text-xs text-slate-400 font-medium mt-0.5">
+            Manage staff terminals, clearance logs, and authority
+            configurations.
+          </p>
         </div>
         <button
           type="button"
@@ -104,44 +119,54 @@ export const ManageLibrarians: React.FC = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1 justify-between">
-          
           {/* SCROLLABLE GRID AREA */}
           <div className="pb-8 flex-1">
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
               {librariansList.length === 0 ? (
-                <div className="col-span-full bg-white text-center py-12 text-sm text-slate-400 border rounded-2xl border-dashed border-slate-200">
+                <div className="col-span-full bg-card-bg text-center py-12 text-sm text-slate-400 border rounded-2xl border-dashed border-border-main">
                   No registered operator accounts tracked on this network.
                 </div>
               ) : (
                 librariansList.map((librarian: UserRecord) => (
-                  <div 
+                  <div
                     key={librarian.user_id}
                     onClick={() => setSelectedLibrarian(librarian)}
-                    className="group bg-white p-5 rounded-2xl border border-slate-100 shadow-xs hover:shadow-md hover:border-slate-200 transition-all cursor-pointer flex flex-col justify-between"
+                    className="group bg-card-bg p-5 rounded-2xl border border-slate-100 shadow-xs hover:shadow-md hover:border-border-main transition-all cursor-pointer flex flex-col justify-between"
                   >
                     <div>
                       <div className="flex justify-between items-start mb-4">
                         <div className="h-10 w-10 bg-slate-900 text-amber-50 rounded-xl flex items-center justify-center font-bold text-sm uppercase">
                           {librarian.name.slice(0, 2)}
                         </div>
-                        <span className="text-[9px] font-mono font-bold tracking-widest text-slate-700 bg-slate-100 px-2.5 py-1 rounded-md uppercase border border-slate-200/40">
+                        <span className="text-[9px] font-mono font-bold tracking-widest text-text-main bg-slate-100 px-2.5 py-1 rounded-md uppercase border border-border-main/40">
                           OP-{librarian.user_id.slice(-4).toUpperCase()}
                         </span>
                       </div>
 
-                      <h3 className="font-bold text-base text-slate-900 group-hover:text-slate-800 transition-colors tracking-tight">
+                      <h3 className="font-bold text-base text-text-main group-hover:text-slate-800 transition-colors tracking-tight">
                         {librarian.name}
                       </h3>
-                      
+
                       <div className="mt-3 space-y-1.5 text-xs text-slate-500 font-medium">
-                        <p className="flex items-center gap-2 select-all"><Mail size={13} className="text-slate-400" /> {librarian.gmail}</p>
-                        <p className="flex items-center gap-2 select-all"><Phone size={13} className="text-slate-400" /> {librarian.phone_number || "No Phone Registered"}</p>
+                        <p className="flex items-center gap-2 select-all">
+                          <Mail size={13} className="text-slate-400" />{" "}
+                          {librarian.gmail}
+                        </p>
+                        <p className="flex items-center gap-2 select-all">
+                          <Phone size={13} className="text-slate-400" />{" "}
+                          {librarian.phone_number || "No Phone Registered"}
+                        </p>
                       </div>
                     </div>
 
-                    <div className="mt-5 pt-3 border-t border-slate-100 flex items-center justify-between text-xs font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
-                      <span className="uppercase tracking-wide text-[10px]">View Full Operator Profile</span>
-                      <ArrowRight size={14} className="transform group-hover:translate-x-1 transition-transform" />
+                    <div className="mt-5 pt-3 border-t border-slate-100 flex items-center justify-between text-xs font-bold text-slate-400 group-hover:text-text-main transition-colors">
+                      <span className="uppercase tracking-wide text-[10px]">
+                        View Full Operator Profile
+                      </span>
+                      <ArrowRight
+                        size={14}
+                        className="transform group-hover:translate-x-1 transition-transform"
+                      />
                     </div>
                   </div>
                 ))
@@ -153,37 +178,44 @@ export const ManageLibrarians: React.FC = () => {
           <div className="sticky bottom-4 left-0 right-0 z-10 mt-auto px-5 py-4 border border-slate-100 rounded-2xl bg-slate-50/50 backdrop-blur-xs flex flex-col sm:flex-row items-center justify-between gap-4 shadow-lg transition-all">
             <div className="text-sm text-slate-500 font-medium">
               <span>
-                Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalCount} Librarians
+                Page {currentPage} / {totalPages}{" "}
+                <span className="text-slate-300 mx-2">|</span> Total{" "}
+                {totalCount} Librarians
               </span>
             </div>
             <div className="flex gap-2">
-                            <button
-                              type="button"
-                              disabled={currentPage === 1 || totalPages <= 1}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.max(prev - 1, 1)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronLeft size={14} />
-                            </button>
-                            <button
-                              type="button"
-                              disabled={currentPage === totalPages || totalPages <= 1}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.min(prev + 1, totalPages)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronRight size={14} />
-                            </button>
-                          </div>
+              <button
+                type="button"
+                disabled={currentPage === 1 || totalPages <= 1}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentPage((prev) => Math.max(prev - 1, 1));
+                }}
+                className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+              >
+                <ChevronLeft size={14} />
+              </button>
+              <button
+                type="button"
+                disabled={currentPage === totalPages || totalPages <= 1}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+                }}
+                className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+              >
+                <ChevronRight size={14} />
+              </button>
+            </div>
           </div>
-
         </div>
       )}
 
       {/* CREATION FILE OVERLAY PORTAL CONTAINER */}
-      <LibrarianModal 
+      <LibrarianModal
         isOpen={isCreateModalOpen}
         onClose={() => setIsCreateModalOpen(false)}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/ManageUsers.tsx b/client/src/features/admin/components/ManageUsers.tsx
index 12d5541..657b20d 100644
--- a/client/src/features/admin/components/ManageUsers.tsx
+++ b/client/src/features/admin/components/ManageUsers.tsx
@@ -2,9 +2,15 @@ import React, { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { axiosClient } from "../../../api/axiosClient";
 import { useAuthStore } from "../../../store/authStore";
-import { Plus, Search, ChevronLeft, ChevronRight } from "lucide-react";
-import { UserModal } from "./UserModal"; 
-import { UserDetailsModal } from "./UserDetailsModal"; 
+import {
+  Plus,
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  RotateCcw,
+} from "lucide-react";
+import { UserModal } from "./UserModal";
+import { UserDetailsModal } from "./UserDetailsModal";
 
 interface UserRecord {
   user_id: string;
@@ -28,32 +34,35 @@ interface ServerApiResponse {
 
 export const ManageUsers: React.FC = () => {
   const token = useAuthStore((state) => state.token);
-  
-  // Server-driven lookup filter parameters matching your portal pattern
+
   const [currentPage, setCurrentPage] = useState(1);
   const [searchQuery, setSearchQuery] = useState("");
   const [roleFilter, setRoleFilter] = useState("");
   const itemsPerPage = 10;
 
-  // Card Overlay state tracking management
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<UserRecord | null>(null);
 
-  // Core background querying pipeline mapping directly to server indices
   const { data, isLoading } = useQuery<ServerApiResponse>({
-    queryKey: ["adminUsersMasterFeed", token, currentPage, searchQuery, roleFilter],
+    queryKey: [
+      "adminUsersMasterFeed",
+      token,
+      currentPage,
+      searchQuery,
+      roleFilter,
+    ],
     queryFn: async () => {
       const offset = (currentPage - 1) * itemsPerPage;
-      
+
       const res = await axiosClient.get("/admin/readers", {
         params: {
           limit: itemsPerPage,
           offset: offset,
           search: searchQuery || undefined,
-          role: roleFilter || undefined // Built-in support for granular filter parameters
-        }
+          role: roleFilter || undefined,
+        },
       });
-      
+
       return res.data;
     },
     enabled: !!token,
@@ -61,21 +70,22 @@ export const ManageUsers: React.FC = () => {
 
   const responsePayload = data?.data;
 
-  // Normalizing records gracefully safely checking standard API patterns
-  const usersList: UserRecord[] = Array.isArray(data) 
-    ? data 
-    : Array.isArray(responsePayload) 
-      ? responsePayload 
-      : (responsePayload && "data" in responsePayload && Array.isArray(responsePayload.data))
+  const usersList: UserRecord[] = Array.isArray(data)
+    ? data
+    : Array.isArray(responsePayload)
+      ? responsePayload
+      : responsePayload &&
+          "data" in responsePayload &&
+          Array.isArray(responsePayload.data)
         ? responsePayload.data
         : [];
 
-  const totalCount: number = Array.isArray(data) 
-    ? usersList.length 
-    : (responsePayload && "totalCount" in responsePayload)
+  const totalCount: number = Array.isArray(data)
+    ? usersList.length
+    : responsePayload && "totalCount" in responsePayload
       ? responsePayload.totalCount
       : 0;
-  
+
   const totalPages = Math.max(1, Math.ceil(totalCount / itemsPerPage));
 
   const handleClearFilters = () => {
@@ -85,109 +95,123 @@ export const ManageUsers: React.FC = () => {
   };
 
   return (
-    <div className="space-y-6 animate-fade-in bg-transparent font-sans text-xs sm:text-sm text-slate-700 pb-12">
-      
-      {/* Page Core Header Block - Spacious Layout Ivory Card */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs">
+    <div className="flex flex-col min-h-screen max-w-6xl mx-auto relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
+      {/* 1. Page Header Block */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Users Database Management</h2>
-          <p className="text-xs text-slate-500 mt-1 font-medium leading-relaxed">
-            Click any system row ledger to view access settings, check full operational logs, or customize user system parameters.
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Users Database Management
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">
+            Click any system row ledger to view access settings, check full
+            operational logs, or customize user system parameters.
           </p>
         </div>
         <button
-          onClick={() => { setSelectedUser(null); setIsModalOpen(true); }}
-          className="flex items-center gap-2 px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl transition-all whitespace-nowrap cursor-pointer shadow-xs self-stretch sm:self-auto justify-center"
+          onClick={() => {
+            setSelectedUser(null);
+            setIsModalOpen(true);
+          }}
+          className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap self-stretch sm:self-auto justify-center"
         >
-          <Plus size={14} />
-          <span>Add New User</span>
+          <Plus size={14} /> Add New User
         </button>
       </div>
 
-      {/* Control Utility Filter Toolbar Line */}
-      <div className="flex flex-col md:flex-row gap-4 bg-white p-5 rounded-2xl border border-slate-200/60 shadow-xs">
+      {/* 2. Standardized Control Pipeline Filter Ribbon */}
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
+        {/* Search Anchored Input */}
         <div className="relative flex-1 w-full">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+            <Search size={16} />
+          </span>
           <input
             type="text"
             placeholder="Search users by name or email database..."
             value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-11 pr-4 py-2 bg-slate-50 border border-slate-200 text-slate-900 rounded-xl text-xs sm:text-sm font-medium placeholder:text-slate-400 focus:bg-white focus:border-slate-900 outline-hidden focus:ring-4 focus:ring-slate-900/5 transition-all"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-10 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
           />
-          <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
         </div>
 
-        <div className="grid grid-cols-2 sm:flex gap-3 w-full md:w-auto">
-
+        {/* Dropdowns Action Block */}
+        <div className="flex flex-wrap md:flex-nowrap gap-2.5 w-full md:w-auto items-center">
+          {/* Reset Filters Control */}
           <button
+            type="button"
             onClick={handleClearFilters}
-            className="px-4 py-2 bg-slate-100 hover:bg-slate-200 border border-slate-200 text-slate-600 text-xs font-bold uppercase tracking-wider rounded-xl transition-all cursor-pointer col-span-2 sm:col-auto whitespace-nowrap"
+            className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            Reset
+            <RotateCcw size={12} /> Reset
           </button>
         </div>
       </div>
 
-      {/* Master Content Ledger Grid Table */}
-      {isLoading ? (
-        <div className="text-center py-24 text-xs text-slate-400 font-bold uppercase tracking-widest animate-pulse">
-          Syncing System Account Directory...
-        </div>
-      ) : (
-        <div className="space-y-4">
-          <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
+      {/* 3. Central Interactive Data Matrix Table */}
+      <div className="flex flex-col flex-1 space-y-5">
+        {isLoading ? (
+          <div className="text-center py-24 text-xs text-slate-400 font-bold uppercase tracking-widest animate-pulse">
+            Syncing System Account Directory...
+          </div>
+        ) : (
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-100 text-[10px] sm:text-xs font-bold text-slate-400 uppercase bg-slate-50/50 tracking-wider">
-                    <th className="py-4 px-6">System ID</th>
-                    <th className="py-4 px-6">User Name</th>
-                    <th className="py-4 px-6">Contact Credentials</th>
-                    <th className="py-4 px-6">Account Role</th>
-                    <th className="py-4 px-6">Entry Date</th>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">System ID</th>
+                    <th className="py-3.5 px-5">User Name</th>
+                    <th className="py-3.5 px-5">Email Address</th>
+                    <th className="py-3.5 px-5">Phone Number</th>
+                    <th className="py-3.5 px-5">Entry Date</th>
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                   {usersList.length === 0 ? (
                     <tr>
-                      <td colSpan={5} className="py-20 text-center text-xs text-slate-500 font-medium">
-                        No active matching subscriber accounts found on server indexing.
+                      <td
+                        colSpan={5}
+                        className="py-20 text-center text-xs text-slate-500 font-medium>"
+                      >
+                        No active matching subscriber accounts found on server
+                        indexing.
                       </td>
                     </tr>
                   ) : (
                     usersList.map((user: UserRecord) => (
-                      <tr 
-                        key={user.user_id} 
-                        onClick={() => setSelectedUser(user)} 
-                        className="hover:bg-slate-50 transition-colors cursor-pointer group select-none"
+                      <tr
+                        key={user.user_id}
+                        onClick={() => setSelectedUser(user)}
+                        className="hover:bg-slate-50/80 transition-colors cursor-pointer group select-none"
                       >
-                        <td className="py-4 px-6 font-semibold text-slate-400 font-mono tracking-tight text-xs uppercase">
+                        <td className="py-3.5 px-5 font-mono text-[11px] font-bold text-slate-400 uppercase">
                           USR-{user.user_id.slice(-4)}
                         </td>
-                        <td className="py-4 px-6 font-bold text-slate-900 transition-colors">
+                        <td className="py-3.5 px-5 font-bold text-text-main">
                           {user.name}
                         </td>
-                        <td className="py-4 px-6">
-                          <div className="font-semibold text-slate-800">{user.gmail}</div>
-                          <div className="text-[11px] sm:text-xs text-slate-400 mt-0.5 font-medium">
-                            {user.phone_number || "No Phone Contact"}
+                        <td className="py-3.5 px-5">
+                          <div className="font-semibold text-slate-800">
+                            {user.gmail}
                           </div>
                         </td>
-                        <td className="py-4 px-6">
-                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-lg text-[11px] sm:text-xs font-bold border ${
-                            user.role === "LIBRARIAN"
-                              ? "bg-amber-50 text-amber-800 border-amber-200/60"
-                              : "bg-slate-100 text-slate-700 border-slate-200/60"
-                          }`}>
-                            {user.role}
-                          </span>
+                        <td className="py-3.5 px-5">
+                          <div className="text-[11px] sm:text-xs text-slate-800 mt-0.5 font-medium">
+                            {user.phone_number || "No Phone Contact"}
+                          </div>
                         </td>
-                        <td className="py-4 px-6 font-semibold text-slate-500 text-xs">
-                          {new Date(user.created_at).toLocaleDateString(undefined, {
-                            year: 'numeric',
-                            month: 'short',
-                            day: 'numeric'
-                          })}
+                        <td className="py-3.5 px-5 font-semibold text-slate-500 text-xs">
+                          {new Date(user.created_at).toLocaleDateString(
+                            undefined,
+                            {
+                              year: "numeric",
+                              month: "short",
+                              day: "numeric",
+                            },
+                          )}
                         </td>
                       </tr>
                     ))
@@ -196,43 +220,50 @@ export const ManageUsers: React.FC = () => {
               </table>
             </div>
 
-            {/* Pagination Navigation Footer Deck */}
+            {/* 4. Pagination Navigation Footer Deck */}
             <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
               <span>
-                Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalCount} Users
+                Page {currentPage} / {totalPages}{" "}
+                <span className="text-slate-300 mx-2">|</span> Total{" "}
+                {totalCount} Users
               </span>
               <div className="flex gap-2">
                 <button
                   type="button"
                   disabled={currentPage === 1 || totalPages <= 1}
-                  onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.max(prev - 1, 1)); }}
-                  className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setCurrentPage((prev) => Math.max(prev - 1, 1));
+                  }}
+                  className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
                 >
                   <ChevronLeft size={14} />
                 </button>
                 <button
                   type="button"
                   disabled={currentPage === totalPages || totalPages <= 1}
-                  onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.min(prev + 1, totalPages)); }}
-                  className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+                  }}
+                  className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
                 >
                   <ChevronRight size={14} />
                 </button>
               </div>
             </div>
-
           </div>
-        </div>
-      )}
+        )}
+      </div>
 
       {/* Popup Form Modals Layers */}
       <UserModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
 
-      <UserDetailsModal 
-        key={selectedUser?.user_id || "none"} 
-        user={selectedUser} 
-        onClose={() => setSelectedUser(null)} 
+      <UserDetailsModal
+        key={selectedUser?.user_id || "none"}
+        user={selectedUser}
+        onClose={() => setSelectedUser(null)}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/UserDetailsModal.tsx b/client/src/features/admin/components/UserDetailsModal.tsx
index fdb2844..fa9037d 100644
--- a/client/src/features/admin/components/UserDetailsModal.tsx
+++ b/client/src/features/admin/components/UserDetailsModal.tsx
@@ -1,5 +1,16 @@
 import React, { useState } from "react";
-import { User, Mail, Phone, Calendar, Shield, Edit2, Trash2, Check, RotateCcw, KeyRound } from "lucide-react";
+import {
+  User,
+  Mail,
+  Phone,
+  Calendar,
+  Shield,
+  Edit2,
+  Trash2,
+  Check,
+  RotateCcw,
+  KeyRound,
+} from "lucide-react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { axiosClient } from "../../../api/axiosClient";
 import { toast } from "sonner";
@@ -26,7 +37,10 @@ interface BackendErrorResponse {
   message: string;
 }
 
-export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClose }) => {
+export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({
+  user,
+  onClose,
+}) => {
   const queryClient = useQueryClient();
   const [isEditing, setIsEditing] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -40,7 +54,10 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
   // 1. UPDATE MUTATION
   const updateMutation = useMutation({
     mutationFn: async (payload: Record<string, string>) => {
-      const response = await axiosClient.patch(`/admin/user/${user?.user_id}`, payload);
+      const response = await axiosClient.patch(
+        `/admin/user/${user?.user_id}`,
+        payload,
+      );
       return response.data;
     },
     onSuccess: () => {
@@ -49,7 +66,9 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
       setIsEditing(false);
     },
     onError: (error: AxiosError<BackendErrorResponse>) => {
-      toast.error(error.response?.data?.message || "Failed to update record details.");
+      toast.error(
+        error.response?.data?.message || "Failed to update record details.",
+      );
     },
   });
 
@@ -76,7 +95,7 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
   const validateForm = () => {
     const localErrors: Record<string, string> = {};
     if (!name.trim()) localErrors.name = "Full name entry is required.";
-    
+
     const gmailRegex = /^[a-z0-9](\.?[a-z0-9]){4,29}@gmail\.com$/;
     if (!gmail.trim()) {
       localErrors.gmail = "Email address tracking parameters are required.";
@@ -92,9 +111,11 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
     }
 
     if (!password) {
-      localErrors.password = "Security credential string allocation is required.";
+      localErrors.password =
+        "Security credential string allocation is required.";
     } else if (password.length < 6) {
-      localErrors.password = "Security strings must be at least 6 characters long.";
+      localErrors.password =
+        "Security strings must be at least 6 characters long.";
     }
 
     setErrors(localErrors);
@@ -130,8 +151,7 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
     <>
       {/* High contrast layout backdrop with frosting filter matching MemberDetailsModal */}
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs font-sans">
-        <div className="w-full max-w-xl rounded-2xl bg-white shadow-xl transition-all overflow-hidden border border-amber-100 flex flex-col max-h-[90vh]">
-          
+        <div className="w-full max-w-xl rounded-2xl bg-card-bg shadow-xl transition-all overflow-hidden border border-amber-100 flex flex-col max-h-[90vh]">
           {/* Header Grid Framework - Clean Bright Banner matching screen formats */}
           <div className="flex items-center justify-between border-b border-slate-100 p-5 bg-slate-900">
             <div>
@@ -139,10 +159,13 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
                 {isEditing ? "Edit User Profile" : "User Account Information"}
               </h3>
               <p className="text-[11px] text-slate-400 mt-0.5 font-bold tracking-wide uppercase">
-                UUID: USR-{user.user_id ? user.user_id.split("-").pop()?.slice(-6).toUpperCase() : "000000"}
+                ID: USR-
+                {user.user_id
+                  ? user.user_id.split("-").pop()?.slice(-4).toUpperCase()
+                  : "0000"}
               </p>
             </div>
-            <button 
+            <button
               type="button"
               onClick={handleMasterClose}
               className="text-slate-400 hover:text-white transition-colors text-base font-bold cursor-pointer p-1.5 hover:bg-slate-800 rounded-lg"
@@ -152,140 +175,197 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
           </div>
 
           {/* Content Box Switcher Container */}
-          <div className="p-6 overflow-y-auto space-y-6 flex-1 text-slate-700">
-            
+          <div className="p-6 overflow-y-auto space-y-6 flex-1 text-text-main">
             {/* Input fields / View Data fields container stack */}
             <div className="space-y-5">
-              
               {/* Full Name Section */}
               <div className="space-y-1.5">
-                <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Full Name</span>
+                <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                  Full Name
+                </span>
                 {isEditing ? (
                   <div className="relative">
-                    <User className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                    <User
+                      className="absolute left-3.5 top-3 text-slate-400"
+                      size={15}
+                    />
                     <input
                       type="text"
                       value={name}
                       onChange={(e) => setName(e.target.value)}
-                      className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                        errors.name 
-                          ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                          : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                      className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                        errors.name
+                          ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                          : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                       }`}
                     />
                   </div>
                 ) : (
-                  <span className="font-bold text-slate-900 block text-base pl-1">{user.name}</span>
+                  <span className="font-bold text-text-main block text-base pl-1">
+                    {user.name}
+                  </span>
+                )}
+                {errors.name && (
+                  <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                    {errors.name}
+                  </p>
                 )}
-                {errors.name && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.name}</p>}
               </div>
 
               {isEditing && <hr className="border-slate-100" />}
 
               {/* Dynamic Interactive Input Grid Setup */}
-              <div className={`grid grid-cols-1 ${isEditing ? "sm:grid-cols-1 gap-y-5" : "sm:grid-cols-2 gap-y-5 gap-x-6"} text-sm`}>
-                
+              <div
+                className={`grid grid-cols-1 ${isEditing ? "sm:grid-cols-1 gap-y-5" : "sm:grid-cols-2 gap-y-5 gap-x-6"} text-sm`}
+              >
                 {/* Email Entry Section */}
                 <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Email Address</span>
+                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                    Email Address
+                  </span>
                   {isEditing ? (
                     <div className="relative">
-                      <Mail className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                      <Mail
+                        className="absolute left-3.5 top-3 text-slate-400"
+                        size={15}
+                      />
                       <input
                         type="text"
                         value={gmail}
                         onChange={(e) => setGmail(e.target.value)}
-                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                          errors.gmail 
-                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                            : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                          errors.gmail
+                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                            : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                         }`}
                       />
                     </div>
                   ) : (
-                    <span className="font-semibold text-slate-900 mt-1 block select-all text-base pl-1">{user.gmail}</span>
+                    <span className="font-semibold text-text-main mt-1 block select-all text-base pl-1">
+                      {user.gmail}
+                    </span>
+                  )}
+                  {errors.gmail && (
+                    <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                      {errors.gmail}
+                    </p>
                   )}
-                  {errors.gmail && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.gmail}</p>}
                 </div>
 
                 {/* Phone Number Entry Section */}
                 <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Phone Number</span>
+                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                    Phone Number
+                  </span>
                   {isEditing ? (
                     <div className="relative">
-                      <Phone className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                      <Phone
+                        className="absolute left-3.5 top-3 text-slate-400"
+                        size={15}
+                      />
                       <input
                         type="text"
                         maxLength={10}
                         value={phoneNumber}
-                        onChange={(e) => setPhoneNumber(e.target.value.replace(/\D/g, ""))}
-                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                          errors.phoneNumber 
-                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                            : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                        onChange={(e) =>
+                          setPhoneNumber(e.target.value.replace(/\D/g, ""))
+                        }
+                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                          errors.phoneNumber
+                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                            : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                         }`}
                       />
                     </div>
                   ) : (
-                    <span className="font-semibold text-slate-900 mt-1 block select-all text-base pl-1">{user.phone_number || "No Verified Phone"}</span>
+                    <span className="font-semibold text-text-main mt-1 block select-all text-base pl-1">
+                      {user.phone_number || "No Verified Phone"}
+                    </span>
+                  )}
+                  {errors.phoneNumber && (
+                    <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                      {errors.phoneNumber}
+                    </p>
                   )}
-                  {errors.phoneNumber && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.phoneNumber}</p>}
                 </div>
 
                 {/* Password Configuration String Row */}
                 <div className="space-y-1.5">
-                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Password</span>
+                  <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                    Password
+                  </span>
                   {isEditing ? (
                     <div className="relative">
-                      <KeyRound className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                      <KeyRound
+                        className="absolute left-3.5 top-3 text-slate-400"
+                        size={15}
+                      />
                       <input
                         type="text"
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         placeholder="Assign new plain text system credential mapping"
-                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                          errors.password 
-                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                            : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                        className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                          errors.password
+                            ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                            : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                         }`}
                       />
                     </div>
                   ) : (
-                    <span className="font-mono font-semibold text-slate-900 mt-1 block select-all text-base tracking-wide pl-1">
+                    <span className="font-mono font-semibold text-text-main mt-1 block select-all text-base tracking-wide pl-1">
                       {user.password || "••••••••"}
                     </span>
                   )}
-                  {errors.password && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.password}</p>}
+                  {errors.password && (
+                    <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                      {errors.password}
+                    </p>
+                  )}
                 </div>
               </div>
 
               {!isEditing && (
                 <>
                   <hr className="border-slate-100" />
-                  
+
                   {/* Immutable Metadata Dashboard Blocks */}
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <div className="bg-slate-50 border border-slate-200/40 p-4 rounded-xl flex items-center gap-3">
-                      <Shield size={18} className="text-slate-500 stroke-[2.2]" />
+                    <div className="bg-slate-50 border border-border-main/40 p-4 rounded-xl flex items-center gap-3">
+                      <Shield
+                        size={18}
+                        className="text-slate-500 stroke-[2.2]"
+                      />
                       <div>
-                        <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wide">Security Role Status</span>
-                        <span className="text-sm font-bold text-slate-800">{user.role}</span>
+                        <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wide">
+                          Security Role Status
+                        </span>
+                        <span className="text-sm font-bold text-slate-800">
+                          {user.role}
+                        </span>
                       </div>
                     </div>
 
-                    <div className="bg-slate-50 border border-slate-200/40 p-4 rounded-xl flex items-center gap-3">
-                      <Calendar size={18} className="text-slate-500 stroke-[2.2]" />
+                    <div className="bg-slate-50 border border-border-main/40 p-4 rounded-xl flex items-center gap-3">
+                      <Calendar
+                        size={18}
+                        className="text-slate-500 stroke-[2.2]"
+                      />
                       <div>
-                        <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wide">System Enrollment Date</span>
+                        <span className="block text-[10px] font-bold text-slate-400 uppercase tracking-wide">
+                          System Enrollment Date
+                        </span>
                         <span className="text-sm font-bold text-slate-800">
-                          {new Date(user.created_at).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}
+                          {new Date(user.created_at).toLocaleDateString(
+                            undefined,
+                            { year: "numeric", month: "long", day: "numeric" },
+                          )}
                         </span>
                       </div>
                     </div>
                   </div>
                 </>
               )}
-
             </div>
 
             {/* Operations Actions Layout Interface Tray Footer */}
@@ -295,7 +375,7 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
                   <button
                     type="button"
                     onClick={handleRevert}
-                    className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 text-xs font-bold uppercase tracking-wide rounded-xl transition-all hover:bg-slate-100 cursor-pointer flex items-center justify-center gap-1.5"
+                    className="px-4 py-3 bg-slate-50 border border-border-main text-text-main text-xs font-bold uppercase tracking-wide rounded-xl transition-all hover:bg-slate-100 cursor-pointer flex items-center justify-center gap-1.5"
                   >
                     <RotateCcw size={14} /> Revert Changes
                   </button>
@@ -305,7 +385,10 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
                     disabled={updateMutation.isPending}
                     className="px-5 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 text-xs font-bold uppercase tracking-wide rounded-xl transition-all disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed cursor-pointer shadow-sm flex items-center justify-center gap-1.5"
                   >
-                    <Check size={14} /> {updateMutation.isPending ? "Saving Sync..." : "Commit Edit"}
+                    <Check size={14} />{" "}
+                    {updateMutation.isPending
+                      ? "Saving Sync..."
+                      : "Commit Edit"}
                   </button>
                 </>
               ) : (
@@ -317,7 +400,7 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
                   >
                     <Trash2 size={14} /> Delete User Profile
                   </button>
-                  
+
                   <button
                     type="button"
                     onClick={() => setIsEditing(true)}
@@ -328,13 +411,12 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
                 </div>
               )}
             </div>
-
           </div>
         </div>
       </div>
 
       {/* Secure Action Delete Confirmation Sub-modal stack overlay */}
-      <DeleteUserModal 
+      <DeleteUserModal
         isOpen={isDeleteModalOpen}
         onClose={() => setIsDeleteModalOpen(false)}
         onConfirm={() => deleteMutation.mutate()}
@@ -343,4 +425,4 @@ export const UserDetailsModal: React.FC<UserDetailsModalProps> = ({ user, onClos
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/components/UserModal.tsx b/client/src/features/admin/components/UserModal.tsx
index c834777..bf08498 100644
--- a/client/src/features/admin/components/UserModal.tsx
+++ b/client/src/features/admin/components/UserModal.tsx
@@ -61,30 +61,36 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
     const localErrors: Record<string, string> = {};
 
     if (!name.trim()) localErrors.name = "Full name entry is required.";
-    
+
     const gmailRegex = /^[a-z0-9](\.?[a-z0-9]){4,29}@gmail\.com$/;
     if (!gmail.trim()) {
       localErrors.gmail = "Email address tracking parameters are required.";
     } else if (!gmailRegex.test(gmail.toLowerCase())) {
-      localErrors.gmail = "Please supply a valid structured @gmail.com routing handle.";
+      localErrors.gmail =
+        "Please supply a valid structured @gmail.com routing handle.";
     }
 
     const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d\W_]{8,}$/;
     if (!password) {
-      localErrors.password = "Security credential string allocation is required.";
+      localErrors.password =
+        "Security credential string allocation is required.";
     } else if (!passwordRegex.test(password)) {
-      localErrors.password = "Must contain 8+ characters, with uppercase, lowercase, and numeric parameters.";
+      localErrors.password =
+        "Must contain 8+ characters, with uppercase, lowercase, and numeric parameters.";
     }
 
     if (password !== confirmPassword) {
-      localErrors.confirmPassword = "Security confirmation mismatch. Verify security values match.";
+      localErrors.confirmPassword =
+        "Security confirmation mismatch. Verify security values match.";
     }
 
     const phoneRegex = /^\d{10}$/;
     if (!phoneNumber) {
-      localErrors.phoneNumber = "Phone connectivity baseline mapping is required.";
+      localErrors.phoneNumber =
+        "Phone connectivity baseline mapping is required.";
     } else if (!phoneRegex.test(phoneNumber)) {
-      localErrors.phoneNumber = "Must register an absolute 10-digit numeric line string.";
+      localErrors.phoneNumber =
+        "Must register an absolute 10-digit numeric line string.";
     }
 
     setErrors(localErrors);
@@ -108,17 +114,20 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100 animate-zoom-in">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100 animate-zoom-in">
         {/* Modal Branding Header - Slate-900 Core Banner Matching MemberModal */}
         <div className="bg-slate-900 border-b border-slate-100 p-5 text-white flex justify-between items-center">
           <div>
-            <h3 className="text-lg font-bold tracking-tight">Add New Reader Profile</h3>
-            <p className="text-[11px] text-slate-400 mt-0.5 font-medium">All system configuration inputs are mandatory</p>
+            <h3 className="text-lg font-bold tracking-tight">
+              Add New Reader Profile
+            </h3>
+            <p className="text-[11px] text-slate-400 mt-0.5 font-medium">
+              All system configuration inputs are mandatory
+            </p>
           </div>
-          <button 
+          <button
             type="button"
-            onClick={handleForcedReset} 
+            onClick={handleForcedReset}
             className="text-slate-400 hover:text-white transition-colors cursor-pointer text-base font-bold p-1.5 hover:bg-slate-800 rounded-lg"
           >
             ✕
@@ -126,64 +135,89 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
         </div>
 
         {/* Input Interactive form area */}
-        <form onSubmit={handleSubmission} className="p-6 space-y-4 text-slate-700">
-          
+        <form
+          onSubmit={handleSubmission}
+          className="p-6 space-y-4 text-text-main"
+        >
           {/* Full Name Input */}
           <div className="space-y-1.5">
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Full Name</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+              Full Name
+            </label>
             <div className="relative">
-              <User className="absolute left-3.5 top-3 text-slate-400" size={15} />
+              <User
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={15}
+              />
               <input
                 type="text"
                 placeholder="Alex Rivera"
                 value={name}
                 onChange={(e) => setName(e.target.value)}
-                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.name 
-                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                    : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.name
+                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                    : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                 }`}
               />
             </div>
-            {errors.name && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.name}</p>}
+            {errors.name && (
+              <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                {errors.name}
+              </p>
+            )}
           </div>
 
           {/* Email Address Input */}
           <div className="space-y-1.5">
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Email Address</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+              Email Address
+            </label>
             <div className="relative">
-              <Mail className="absolute left-3.5 top-3 text-slate-400" size={15} />
+              <Mail
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={15}
+              />
               <input
                 type="text"
                 placeholder="alex.rivera@gmail.com"
                 value={gmail}
                 onChange={(e) => setGmail(e.target.value)}
-                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.gmail 
-                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                    : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.gmail
+                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                    : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                 }`}
               />
             </div>
-            {errors.gmail && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.gmail}</p>}
+            {errors.gmail && (
+              <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                {errors.gmail}
+              </p>
+            )}
           </div>
 
           {/* Security Credentials Block Grid Row */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             {/* Password */}
             <div className="space-y-1.5">
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Password</label>
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+                Password
+              </label>
               <div className="relative">
-                <Lock className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                <Lock
+                  className="absolute left-3.5 top-3 text-slate-400"
+                  size={15}
+                />
                 <input
                   type="text"
-                  placeholder="Password123"
+                  placeholder="Password@123"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-mono tracking-wide font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                    errors.password 
-                      ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                      : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                  className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-mono tracking-wide font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                    errors.password
+                      ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                      : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                   }`}
                 />
               </div>
@@ -191,18 +225,23 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
 
             {/* Confirm Password */}
             <div className="space-y-1.5">
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Confirm Pass</label>
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+                Confirm Password
+              </label>
               <div className="relative">
-                <Lock className="absolute left-3.5 top-3 text-slate-400" size={15} />
+                <Lock
+                  className="absolute left-3.5 top-3 text-slate-400"
+                  size={15}
+                />
                 <input
                   type="text"
-                  placeholder="Password123"
+                  placeholder="Password@123"
                   value={confirmPassword}
                   onChange={(e) => setConfirmPassword(e.target.value)}
-                  className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-mono tracking-wide font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                    errors.confirmPassword 
-                      ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                      : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                  className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-mono tracking-wide font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                    errors.confirmPassword
+                      ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                      : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                   }`}
                 />
               </div>
@@ -216,23 +255,34 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
 
           {/* Mobile Connectivity Number Input */}
           <div className="space-y-1.5">
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Mobile Number</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+              Mobile Number
+            </label>
             <div className="relative">
-              <Phone className="absolute left-3.5 top-3 text-slate-400" size={15} />
+              <Phone
+                className="absolute left-3.5 top-3 text-slate-400"
+                size={15}
+              />
               <input
                 type="text"
                 maxLength={10}
                 placeholder="9876543210"
                 value={phoneNumber}
-                onChange={(e) => setPhoneNumber(e.target.value.replace(/\D/g, ""))}
-                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-white focus:ring-4 ${
-                  errors.phoneNumber 
-                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20" 
-                    : "border-slate-200 text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
+                onChange={(e) =>
+                  setPhoneNumber(e.target.value.replace(/\D/g, ""))
+                }
+                className={`w-full pl-10 pr-4 py-2.5 bg-slate-50 border rounded-xl text-sm font-semibold transition-all outline-hidden focus:bg-card-bg focus:ring-4 ${
+                  errors.phoneNumber
+                    ? "border-rose-300 focus:ring-rose-900/5 focus:border-rose-400 text-rose-900 bg-rose-50/20"
+                    : "border-border-main text-slate-800 focus:ring-slate-900/5 focus:border-slate-400"
                 }`}
               />
             </div>
-            {errors.phoneNumber && <p className="text-xs text-rose-700 font-bold mt-1 pl-1">{errors.phoneNumber}</p>}
+            {errors.phoneNumber && (
+              <p className="text-xs text-rose-700 font-bold mt-1 pl-1">
+                {errors.phoneNumber}
+              </p>
+            )}
           </div>
 
           {/* Enforced Encampment Parameters Verification Card Box */}
@@ -246,7 +296,7 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
             <button
               type="button"
               onClick={handleForcedReset}
-              className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+              className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
             >
               Cancel
             </button>
@@ -258,9 +308,8 @@ export const UserModal: React.FC<UserModalProps> = ({ isOpen, onClose }) => {
               {addUserMutation.isPending ? "Syncing..." : "Create Profile"}
             </button>
           </div>
-
         </form>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/admin/pages/AdminPanel.tsx b/client/src/features/admin/pages/AdminPanel.tsx
index 92a8929..621977b 100644
--- a/client/src/features/admin/pages/AdminPanel.tsx
+++ b/client/src/features/admin/pages/AdminPanel.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link } from "react-router-dom"; 
+import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { axiosClient } from "../../../api/axiosClient";
 import { useAuthStore } from "../../../store/authStore";
@@ -12,7 +12,9 @@ export const AdminPanel: React.FC = () => {
   const { data: readersData, isLoading: isLoadingReaders } = useQuery({
     queryKey: ["adminReadersMasterFeed", token],
     queryFn: async () => {
-      const res = await axiosClient.get("/admin/readers", { params: { limit: 1, offset: 0 } });
+      const res = await axiosClient.get("/admin/readers", {
+        params: { limit: 1, offset: 0 },
+      });
       return res.data?.data || res.data;
     },
     enabled: !!token,
@@ -22,7 +24,9 @@ export const AdminPanel: React.FC = () => {
   const { data: librariansData, isLoading: isLoadingLibrarians } = useQuery({
     queryKey: ["adminUsersMasterFeed", token],
     queryFn: async () => {
-      const res = await axiosClient.get("/admin/librarians", { params: { limit: 1, offset: 0 } });
+      const res = await axiosClient.get("/admin/librarians", {
+        params: { limit: 1, offset: 0 },
+      });
       return res.data?.data || res.data;
     },
     enabled: !!token,
@@ -33,72 +37,78 @@ export const AdminPanel: React.FC = () => {
 
   return (
     <div className="space-y-6 max-w-6xl animate-fade-in font-sans selection:bg-amber-100">
-      
       {/* Premium Welcome Banner Matrix card */}
-      <div className="bg-white p-8 rounded-2xl border border-slate-200/60 shadow-xs relative overflow-hidden">
+      <div className="bg-card-bg p-8 rounded-2xl border border-border-main/60 shadow-xs relative overflow-hidden">
         <div className="absolute top-0 left-0 h-full w-1.5 bg-slate-900" />
-        <h2 className="text-xl font-bold text-slate-900 tracking-tight">
+        <h2 className="text-xl font-bold text-text-main tracking-tight">
           Welcome back, System Admin
         </h2>
         <p className="text-xs text-slate-500 mt-1 font-medium max-w-2xl">
-          System access initialization verified. Select a configuration node below to audit, update, and manage active directory accounts.
+          System access initialization verified. Select a configuration node
+          below to audit, update, and manage active directory accounts.
         </p>
       </div>
 
       {/* Grid Display Metrics Blocks */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-        
         {/* Gateway Card 1: Manage Users */}
         <Link
-          to="/admin/users" 
-          className="group bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs hover:shadow-md hover:border-slate-900 transition-all cursor-pointer flex items-center justify-between"
+          to="/admin/users"
+          className="group bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs hover:shadow-md hover:border-slate-900 transition-all cursor-pointer flex items-center justify-between"
         >
           <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center group-hover:bg-slate-900 group-hover:text-white transition-all duration-300">
+            <div className="w-12 h-12 rounded-xl bg-slate-100 text-text-main flex items-center justify-center group-hover:bg-slate-900 group-hover:text-white transition-all duration-300">
               <Users size={20} />
             </div>
             <div>
-              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Directory Control</p>
-              <h3 className="text-lg font-bold text-slate-900 tracking-tight mt-0.5">
+              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
+                Directory Control
+              </p>
+              <h3 className="text-lg font-bold text-text-main tracking-tight mt-0.5">
                 {isLoadingReaders ? (
-                  <span className="text-xs font-bold animate-pulse text-slate-400">Computing Matrix...</span>
+                  <span className="text-xs font-bold animate-pulse text-slate-400">
+                    Computing Matrix...
+                  </span>
                 ) : (
                   `${totalReaders} Active Readers`
                 )}
               </h3>
             </div>
           </div>
-          <div className="text-slate-400 group-hover:text-slate-900 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all">
+          <div className="text-slate-400 group-hover:text-text-main transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all">
             <ArrowUpRight size={18} />
           </div>
         </Link>
 
         {/* Gateway Card 2: Manage Librarians */}
         <Link
-          to="/admin/librarians" 
-          className="group bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs hover:shadow-md hover:border-slate-900 transition-all cursor-pointer flex items-center justify-between"
+          to="/admin/librarians"
+          className="group bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs hover:shadow-md hover:border-slate-900 transition-all cursor-pointer flex items-center justify-between"
         >
           <div className="flex items-center gap-4">
-            <div className="w-12 h-12 rounded-xl bg-slate-100 text-slate-700 flex items-center justify-center group-hover:bg-slate-900 group-hover:text-white transition-all duration-300">
+            <div className="w-12 h-12 rounded-xl bg-slate-100 text-text-main flex items-center justify-center group-hover:bg-slate-900 group-hover:text-white transition-all duration-300">
               <ShieldCheck size={20} />
             </div>
             <div>
-              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Staff Management</p>
-              <h3 className="text-lg font-bold text-slate-900 tracking-tight mt-0.5">
+              <p className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">
+                Staff Management
+              </p>
+              <h3 className="text-lg font-bold text-text-main tracking-tight mt-0.5">
                 {isLoadingLibrarians ? (
-                  <span className="text-xs font-bold animate-pulse text-slate-400">Computing Matrix...</span>
+                  <span className="text-xs font-bold animate-pulse text-slate-400">
+                    Computing Matrix...
+                  </span>
                 ) : (
                   `${totalLibrarians} Librarians Assigned`
                 )}
               </h3>
             </div>
           </div>
-          <div className="text-slate-400 group-hover:text-slate-900 transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all">
+          <div className="text-slate-400 group-hover:text-text-main transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-all">
             <ArrowUpRight size={18} />
           </div>
         </Link>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/auth/pages/Login.tsx b/client/src/features/auth/pages/Login.tsx
index 45079eb..9225da1 100644
--- a/client/src/features/auth/pages/Login.tsx
+++ b/client/src/features/auth/pages/Login.tsx
@@ -14,18 +14,27 @@ export const Login = () => {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [selectedRole, setSelectedRole] = useState<"ADMIN" | "LIBRARIAN">("LIBRARIAN");
-  
+  const [selectedRole, setSelectedRole] = useState<"ADMIN" | "LIBRARIAN">(
+    "LIBRARIAN",
+  );
+
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [fieldErrors, setFieldErrors] = useState<{ email?: string; password?: string }>({});
+  const [fieldErrors, setFieldErrors] = useState<{
+    email?: string;
+    password?: string;
+  }>({});
 
   const handleFormSubmission = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsLoading(true);
     setFieldErrors({});
 
-    const parsingResults = LoginSchema.safeParse({ email, password, role: selectedRole });
+    const parsingResults = LoginSchema.safeParse({
+      email,
+      password,
+      role: selectedRole,
+    });
 
     if (!parsingResults.success) {
       const structuredErrors: { email?: string; password?: string } = {};
@@ -40,12 +49,18 @@ export const Login = () => {
     }
 
     try {
-      const networkResponse = await axiosClient.post("/auth/login", { gmail: email, password, role: selectedRole });
+      const networkResponse = await axiosClient.post("/auth/login", {
+        gmail: email,
+        password,
+        role: selectedRole,
+      });
       const targetPayload = networkResponse.data?.data || networkResponse.data;
       const { user, token } = targetPayload;
 
       if (!token || !user) {
-        toast.error("Invalid token package structural layout returned from server.");
+        toast.error(
+          "Invalid token package structural layout returned from server.",
+        );
         return;
       }
 
@@ -63,7 +78,9 @@ export const Login = () => {
       }
     } catch (error: unknown) {
       if (axios.isAxiosError(error)) {
-        toast.error(error.response?.data?.message || "Invalid account credentials.");
+        toast.error(
+          error.response?.data?.message || "Invalid account credentials.",
+        );
       } else {
         toast.error("An unexpected infrastructure error occurred.");
       }
@@ -74,37 +91,43 @@ export const Login = () => {
 
   return (
     <div className="min-h-screen w-full flex items-center justify-center bg-slate-50 px-4 font-sans selection:bg-amber-100">
-      <motion.div 
+      <motion.div
         initial={{ opacity: 0, scale: 0.95 }}
         animate={{ opacity: 1, scale: 1 }}
         transition={{ duration: 0.4, ease: "easeOut" }}
-        className="w-full max-w-100 bg-white rounded-2xl shadow-xl border border-slate-200/60 overflow-hidden"
+        className="w-full max-w-100 bg-card-bg rounded-2xl shadow-xl border border-border-main/60 overflow-hidden"
       >
         {/* Branding Header */}
         <div className="bg-slate-900 p-8 text-center text-white border-b border-slate-800">
           <div className="w-12 h-12 bg-amber-500 rounded-xl flex items-center justify-center mx-auto mb-4 shadow-sm">
             <BookOpen size={24} className="text-white" />
           </div>
-          <h2 className="text-lg font-bold tracking-tight">Library Management</h2>
-          <p className="text-[11px] uppercase tracking-widest text-slate-400 font-bold mt-1">Authentication Portal</p>
+          <h2 className="text-lg font-bold tracking-tight">
+            Library Management
+          </h2>
+          <p className="text-[11px] uppercase tracking-widest text-slate-400 font-bold mt-1">
+            Authentication Portal
+          </p>
         </div>
 
         <form onSubmit={handleFormSubmission} className="p-8 space-y-6">
           {/* Role Tabs */}
           <div className="space-y-1.5">
-            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Access Level</label>
+            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+              Access Level
+            </label>
             <div className="grid grid-cols-2 gap-2 bg-slate-100 p-1 rounded-xl">
               <button
                 type="button"
                 onClick={() => setSelectedRole("LIBRARIAN")}
-                className={`py-2 text-[11px] font-bold rounded-lg transition-all ${selectedRole === "LIBRARIAN" ? "bg-white text-slate-900 shadow-xs" : "text-slate-500 hover:text-slate-700"}`}
+                className={`py-2 text-[11px] font-bold rounded-lg transition-all ${selectedRole === "LIBRARIAN" ? "bg-card-bg text-text-main shadow-xs" : "text-slate-500 hover:text-text-main"}`}
               >
                 Librarian
               </button>
               <button
                 type="button"
                 onClick={() => setSelectedRole("ADMIN")}
-                className={`py-2 text-[11px] font-bold rounded-lg transition-all ${selectedRole === "ADMIN" ? "bg-white text-slate-900 shadow-xs" : "text-slate-500 hover:text-slate-700"}`}
+                className={`py-2 text-[11px] font-bold rounded-lg transition-all ${selectedRole === "ADMIN" ? "bg-card-bg text-text-main shadow-xs" : "text-slate-500 hover:text-text-main"}`}
               >
                 Admin
               </button>
@@ -113,42 +136,68 @@ export const Login = () => {
 
           {/* Email Input */}
           <div className="space-y-1.5">
-            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Email Address</label>
+            <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+              Email Address
+            </label>
             <div className="relative group">
-              <Mail className="absolute left-3 top-3 text-slate-400 group-focus-within:text-slate-900 transition-colors" size={16} />
+              <Mail
+                className="absolute left-3 top-3 text-slate-400 group-focus-within:text-text-main transition-colors"
+                size={16}
+              />
               <input
                 type="email"
                 placeholder="admin@library.edu"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-900 outline-none focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
+                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-border-main rounded-xl text-sm font-semibold text-text-main outline-none focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
               />
             </div>
-            {fieldErrors.email && <p className="text-[10px] text-rose-600 font-bold mt-1">{fieldErrors.email}</p>}
+            {fieldErrors.email && (
+              <p className="text-[10px] text-rose-600 font-bold mt-1">
+                {fieldErrors.email}
+              </p>
+            )}
           </div>
 
           {/* Password Input */}
           <div className="space-y-1.5">
             <div className="flex justify-between items-center">
-              <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Password</label>
-              <button type="button" onClick={() => toast.info("Contact Systems Admin.")} className="text-[10px] font-bold text-amber-600 hover:text-amber-700 transition-colors">
+              <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">
+                Password
+              </label>
+              <button
+                type="button"
+                onClick={() => toast.info("Contact Systems Admin.")}
+                className="text-[10px] font-bold text-amber-600 hover:text-amber-700 transition-colors"
+              >
                 Forgot?
               </button>
             </div>
             <div className="relative group">
-              <Lock className="absolute left-3 top-3 text-slate-400 group-focus-within:text-slate-900 transition-colors" size={16} />
+              <Lock
+                className="absolute left-3 top-3 text-slate-400 group-focus-within:text-text-main transition-colors"
+                size={16}
+              />
               <input
                 type={showPassword ? "text" : "password"}
                 placeholder="••••••••"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
-                className="w-full pl-10 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm font-semibold text-slate-900 outline-none focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
+                className="w-full pl-10 pr-10 py-2.5 bg-slate-50 border border-border-main rounded-xl text-sm font-semibold text-text-main outline-none focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
               />
-              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-3 text-slate-400 hover:text-slate-700">
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-3 text-slate-400 hover:text-text-main"
+              >
                 {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
               </button>
             </div>
-            {fieldErrors.password && <p className="text-[10px] text-rose-600 font-bold mt-1">{fieldErrors.password}</p>}
+            {fieldErrors.password && (
+              <p className="text-[10px] text-rose-600 font-bold mt-1">
+                {fieldErrors.password}
+              </p>
+            )}
           </div>
 
           <button
@@ -162,4 +211,4 @@ export const Login = () => {
       </motion.div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/books/components/BookDetailModal.tsx b/client/src/features/books/components/BookDetailModal.tsx
index 5ef95f1..a909e30 100644
--- a/client/src/features/books/components/BookDetailModal.tsx
+++ b/client/src/features/books/components/BookDetailModal.tsx
@@ -3,7 +3,18 @@ import type { BookInventoryItem } from "../../../types/books";
 import { DeleteBookModal } from "./DeleteBookModal";
 
 // Editorial Visual Assets
-import { BookOpen, User, Layers, Calendar, Archive, BookmarkCheck, BarChart3, Edit3, Trash2, X } from "lucide-react";
+import {
+  BookOpen,
+  User,
+  Layers,
+  Calendar,
+  Archive,
+  BookmarkCheck,
+  BarChart3,
+  Edit3,
+  Trash2,
+  X,
+} from "lucide-react";
 
 interface BookDetailModalProps {
   isOpen: boolean;
@@ -36,26 +47,28 @@ export const BookDetailModal = ({
 
   const handleConfirmDeletion = () => {
     setIsDeleteOpen(false); // Close the local delete confirmation modal state
-    onClose();             // Close the core details framework drawer
-    onDeleteTrigger();     // Execute the original deletion action from BooksPage.tsx
+    onClose(); // Close the core details framework drawer
+    onDeleteTrigger(); // Execute the original deletion action from BooksPage.tsx
   };
 
   return (
     <>
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-xs p-4 font-sans text-slate-700 text-left">
-        <div className="bg-white w-full max-w-xl rounded-2xl border border-slate-200 shadow-2xl overflow-hidden animate-scale-up">
-          
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-xs p-4 font-sans text-text-main text-left">
+        <div className="bg-card-bg w-full max-w-xl rounded-2xl border border-border-main shadow-2xl overflow-hidden animate-scale-up">
           {/* Header section */}
           <div className="bg-slate-900 px-8 py-5 border-b border-slate-100 flex justify-between items-center">
             <div>
-              <h3 className="text-xl font-bold text-white tracking-tight">Book Details</h3>
+              <h3 className="text-xl font-bold text-white tracking-tight">
+                Book Details
+              </h3>
               <p className="text-xs text-slate-400 font-mono font-bold tracking-wider mt-1 uppercase">
-                ID: BOOK-{book.id ? String(book.id).slice(-4).toUpperCase() : "0000"}
-              </p>          
+                ID: BOOK-
+                {book.id ? String(book.id).slice(-4).toUpperCase() : "0000"}
+              </p>
             </div>
-            <button 
+            <button
               type="button"
-              onClick={onClose} 
+              onClick={onClose}
               className="text-slate-400 hover:bg-slate-100 hover:rounded-lg transition-colors p-1 cursor-pointer"
             >
               <X size={20} />
@@ -68,7 +81,7 @@ export const BookDetailModal = ({
               <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
                 <BookOpen size={14} /> Book Name
               </label>
-              <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-slate-900">
+              <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl font-semibold text-text-main">
                 {book.title}
               </div>
             </div>
@@ -77,7 +90,7 @@ export const BookDetailModal = ({
               <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
                 <User size={14} /> Author / Creator
               </label>
-              <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800">
+              <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl font-medium text-slate-800">
                 {book.author}
               </div>
             </div>
@@ -87,7 +100,7 @@ export const BookDetailModal = ({
                 <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
                   <Layers size={14} /> Category Classification
                 </label>
-                <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-slate-800 truncate">
+                <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl font-medium text-slate-800 truncate">
                   {book.categoryName}
                 </div>
               </div>
@@ -95,7 +108,7 @@ export const BookDetailModal = ({
                 <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
                   <Calendar size={14} /> Shelf Registry Date
                 </label>
-                <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-500 text-sm font-semibold truncate">
+                <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl text-slate-500 text-sm font-semibold truncate">
                   {shelfEntryDate}
                 </div>
               </div>
@@ -106,7 +119,7 @@ export const BookDetailModal = ({
                 <span className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center justify-center gap-1">
                   <Archive size={12} /> Total Owned
                 </span>
-                <span className="text-xl font-mono font-bold text-slate-900 mt-1 block">
+                <span className="text-xl font-mono font-bold text-text-main mt-1 block">
                   {book.totalCopies}
                 </span>
               </div>
@@ -122,7 +135,7 @@ export const BookDetailModal = ({
                 <span className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center justify-center gap-1">
                   <BarChart3 size={12} /> Lending Count
                 </span>
-                <span className="text-xl font-mono font-bold text-slate-900 mt-1 block">
+                <span className="text-xl font-mono font-bold text-text-main mt-1 block">
                   {book.lendingCount}×
                 </span>
               </div>
@@ -140,7 +153,10 @@ export const BookDetailModal = ({
             </button>
             <button
               type="button"
-              onClick={() => { onClose(); onEditTrigger(); }}
+              onClick={() => {
+                onClose();
+                onEditTrigger();
+              }}
               className="px-6 py-3 bg-slate-900 hover:bg-slate-800 text-white rounded-xl shadow-md transition-all cursor-pointer flex items-center gap-1.5"
             >
               <Edit3 size={16} /> Edit Book
@@ -150,7 +166,7 @@ export const BookDetailModal = ({
       </div>
 
       {/* Embedded inline confirmation screen */}
-      <DeleteBookModal 
+      <DeleteBookModal
         isOpen={isDeleteOpen}
         onClose={() => setIsDeleteOpen(false)}
         onConfirm={handleConfirmDeletion}
@@ -158,4 +174,4 @@ export const BookDetailModal = ({
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/books/components/BookModal.tsx b/client/src/features/books/components/BookModal.tsx
index 74e8362..6080711 100644
--- a/client/src/features/books/components/BookModal.tsx
+++ b/client/src/features/books/components/BookModal.tsx
@@ -24,18 +24,30 @@ interface BookModalProps {
   editingBook?: BookInventoryItem | null;
 }
 
-export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }: BookModalProps) => {
+export const BookModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  categories,
+  editingBook,
+}: BookModalProps) => {
   const [isScanning, setIsScanning] = useState(false);
   const [ocrAlternatives, setOcrAlternatives] = useState<ScoredLine[]>([]);
-  
+
   const [scanCounter, setScanCounter] = useState<number>(() => {
     const saved = localStorage.getItem("dev_scan_counter");
     return saved ? parseInt(saved, 10) : 0;
   });
 
-  const { register, handleSubmit, reset, setValue, formState: { errors } } = useForm<BookFormValues>({
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setValue,
+    formState: { errors },
+  } = useForm<BookFormValues>({
     resolver: zodResolver(BookFormSchema),
-    defaultValues: { title: "", author: "", totalCopies: 1, categoryId: "" }
+    defaultValues: { title: "", author: "", totalCopies: 1, categoryId: "" },
   });
 
   // Simple synchronization cycle without cascading state updates
@@ -45,7 +57,7 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
         title: editingBook.title,
         author: editingBook.author,
         totalCopies: editingBook.totalCopies,
-        categoryId: editingBook.categoryId
+        categoryId: editingBook.categoryId,
       });
     } else {
       reset({ title: "", author: "", totalCopies: 1, categoryId: "" });
@@ -54,7 +66,7 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
 
   // Safely cleans state artifacts within action contexts outside of reactive render loops
   const handleCloseModal = () => {
-    setOcrAlternatives([]); 
+    setOcrAlternatives([]);
     onClose();
   };
 
@@ -73,17 +85,22 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
     try {
       setIsScanning(true);
       setOcrAlternatives([]);
-      toast.loading("Analyzing book layout structures...", { id: "azure-scan" });
+      toast.loading("Analyzing book layout structures...", {
+        id: "azure-scan",
+      });
 
       const response = await axiosClient.post("/ai/scan-cover", formData, {
         headers: { "Content-Type": "multipart/form-data" },
-        timeout: 25000 
+        timeout: 25000,
       });
 
       const payload = response.data;
-      
+
       if (payload && payload.success) {
-        if (payload.alternativeLines && Array.isArray(payload.alternativeLines)) {
+        if (
+          payload.alternativeLines &&
+          Array.isArray(payload.alternativeLines)
+        ) {
           setOcrAlternatives(payload.alternativeLines);
         }
 
@@ -94,18 +111,22 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
         const nextCount = scanCounter + 1;
         setScanCounter(nextCount);
         localStorage.setItem("dev_scan_counter", nextCount.toString());
-        
-        toast.success("Cover parsed with classification filters!", { id: "azure-scan" });
+
+        toast.success("Cover parsed with classification filters!", {
+          id: "azure-scan",
+        });
       } else {
         toast.error("Parsing threshold matching failed.", { id: "azure-scan" });
       }
-    } catch (error) { 
+    } catch (error) {
       console.error(error);
-      
-      const isAxiosError = error && typeof error === "object" && "code" in error;
-      const errorMsg = (isAxiosError && (error as { code: string }).code === "ECONNABORTED")
-        ? "Request timeout! Azure took too long." 
-        : "Error communicating with AI parser layer.";
+
+      const isAxiosError =
+        error && typeof error === "object" && "code" in error;
+      const errorMsg =
+        isAxiosError && (error as { code: string }).code === "ECONNABORTED"
+          ? "Request timeout! Azure took too long."
+          : "Error communicating with AI parser layer.";
 
       toast.error(errorMsg, { id: "azure-scan" });
     } finally {
@@ -117,21 +138,21 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-slate-700 text-left">
-      <div className={`bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200/60 flex flex-col md:flex-row max-h-[90vh] transition-all duration-300 animate-zoom-in ${ocrAlternatives.length > 0 ? "w-full max-w-4xl" : "w-full max-w-lg"}`}>
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-text-main text-left">
+      <div
+        className={`bg-card-bg rounded-2xl shadow-xl overflow-hidden border border-border-main/60 flex flex-col md:flex-row max-h-[90vh] transition-all duration-300 animate-zoom-in ${ocrAlternatives.length > 0 ? "w-full max-w-4xl" : "w-full max-w-lg"}`}
+      >
         {/* LEFT COMPONENT: Primary Form Input Layout */}
         <div className="flex-1 overflow-y-auto flex flex-col">
-          
           {/* Modal Branding Header - Clean Dark Structured Banner */}
           <div className="bg-slate-900 p-5 text-white flex justify-between items-center shrink-0">
             <h3 className="font-bold text-xl uppercase tracking-wider">
               {editingBook ? "Modify Details" : "Add New Book"}
             </h3>
-            <button 
+            <button
               type="button"
-              onClick={handleCloseModal} 
-              className="text-slate-400 hover:text-white transition-colors cursor-pointer p-1.5 hover:bg-white/10 rounded-lg"
+              onClick={handleCloseModal}
+              className="text-slate-400 hover:text-white transition-colors cursor-pointer p-1.5 hover:bg-card-bg/10 rounded-lg"
             >
               <X size={16} />
             </button>
@@ -142,16 +163,17 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
               <div className="p-4 bg-amber-50/40 border border-dashed border-amber-200 rounded-xl space-y-2.5">
                 <div className="flex justify-between items-center">
                   <label className="text-[11px] font-bold text-amber-800 uppercase tracking-wider flex items-center gap-1.5">
-                    <Sparkles size={12} className="text-amber-600" /> Intelligent OCR Engine
+                    <Sparkles size={12} className="text-amber-600" />{" "}
+                    Intelligent OCR Engine
                   </label>
                   <span className="text-[10px] font-mono font-bold bg-amber-100 text-amber-800 px-2 py-0.5 rounded-md">
                     Scans: {scanCounter}/10
                   </span>
                 </div>
-                <input 
-                  type="file" 
-                  accept="image/*" 
-                  onChange={handleAIScanUpload} 
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleAIScanUpload}
                   disabled={isScanning || scanCounter >= 10}
                   className="block w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 transition-all cursor-pointer"
                 />
@@ -163,24 +185,32 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
                 <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
                   <BookOpen size={12} /> Book Title
                 </label>
-                <input 
-                  type="text" 
-                  {...register("title")} 
-                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 text-xs sm:text-sm font-semibold text-slate-900 rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all" 
+                <input
+                  type="text"
+                  {...register("title")}
+                  className="w-full px-4 py-2.5 bg-slate-50 border border-border-main text-xs sm:text-sm font-semibold text-text-main rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-card-bg focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
                 />
-                {errors.title && <p className="text-xs text-rose-700 font-bold mt-1.5">{errors.title.message}</p>}
+                {errors.title && (
+                  <p className="text-xs text-rose-700 font-bold mt-1.5">
+                    {errors.title.message}
+                  </p>
+                )}
               </div>
 
               <div>
                 <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
                   <User size={12} /> Author Name
                 </label>
-                <input 
-                  type="text" 
-                  {...register("author")} 
-                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 text-xs sm:text-sm font-semibold text-slate-900 rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all" 
+                <input
+                  type="text"
+                  {...register("author")}
+                  className="w-full px-4 py-2.5 bg-slate-50 border border-border-main text-xs sm:text-sm font-semibold text-text-main rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-card-bg focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
                 />
-                {errors.author && <p className="text-xs text-rose-700 font-bold mt-1.5">{errors.author.message}</p>}
+                {errors.author && (
+                  <p className="text-xs text-rose-700 font-bold mt-1.5">
+                    {errors.author.message}
+                  </p>
+                )}
               </div>
 
               <div className="grid grid-cols-2 gap-4">
@@ -188,10 +218,10 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
                   <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wide mb-1.5 flex items-center gap-1.5">
                     <Hash size={12} /> Copies
                   </label>
-                  <input 
-                    type="number" 
-                    {...register("totalCopies", { valueAsNumber: true })} 
-                    className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 text-xs sm:text-sm font-bold text-slate-900 rounded-xl outline-hidden focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all" 
+                  <input
+                    type="number"
+                    {...register("totalCopies", { valueAsNumber: true })}
+                    className="w-full px-4 py-2.5 bg-slate-50 border border-border-main text-xs sm:text-sm font-bold text-text-main rounded-xl outline-hidden focus:bg-card-bg focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
                   />
                 </div>
                 <div>
@@ -199,12 +229,16 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
                     <Layers size={12} /> Category
                   </label>
                   <div className="relative">
-                    <select 
-                      {...register("categoryId")} 
-                      className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 text-xs sm:text-sm font-semibold text-slate-700 rounded-xl outline-hidden cursor-pointer focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all appearance-none"
+                    <select
+                      {...register("categoryId")}
+                      className="w-full px-4 py-2.5 bg-slate-50 border border-border-main text-xs sm:text-sm font-semibold text-text-main rounded-xl outline-hidden cursor-pointer focus:bg-card-bg focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all appearance-none"
                     >
                       <option value="">Select Category</option>
-                      {categories.map(cat => <option key={cat.id} value={cat.id}>{cat.name}</option>)}
+                      {categories.map((cat) => (
+                        <option key={cat.id} value={cat.id}>
+                          {cat.name}
+                        </option>
+                      ))}
                     </select>
                   </div>
                 </div>
@@ -212,16 +246,16 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
 
               {/* Action Footer Frame */}
               <div className="pt-4 flex justify-end gap-3 border-t border-slate-100 text-xs font-bold tracking-wide">
-                <button 
-                  type="button" 
-                  onClick={handleCloseModal} 
-                  className="px-4 py-2.5 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+                <button
+                  type="button"
+                  onClick={handleCloseModal}
+                  className="px-4 py-2.5 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
                 >
                   Cancel
                 </button>
-                <button 
-                  type="submit" 
-                  disabled={isScanning} 
+                <button
+                  type="submit"
+                  disabled={isScanning}
                   className="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed cursor-pointer shadow-xs whitespace-nowrap"
                 >
                   {editingBook ? "Update Details" : "Create Book Entry"}
@@ -233,37 +267,44 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
 
         {/* RIGHT COMPONENT: Interactive Diagnostic Mapping Helper Column */}
         {!editingBook && ocrAlternatives.length > 0 && (
-          <div className="w-full md:w-80 bg-slate-50/50 border-t md:border-t-0 md:border-l border-slate-200 p-5 overflow-y-auto max-h-[35vh] md:max-h-full flex flex-col shrink-0">
-            <h4 className="text-[11px] font-bold text-slate-900 uppercase tracking-wider flex items-center gap-1.5 mb-1">
-              <Sparkles size={12} className="text-amber-500" /> OCR Layout Fragments
+          <div className="w-full md:w-80 bg-slate-50/50 border-t md:border-t-0 md:border-l border-border-main p-5 overflow-y-auto max-h-[35vh] md:max-h-full flex flex-col shrink-0">
+            <h4 className="text-[11px] font-bold text-text-main uppercase tracking-wider flex items-center gap-1.5 mb-1">
+              <Sparkles size={12} className="text-amber-500" /> OCR Layout
+              Fragments
             </h4>
             <p className="text-xs text-slate-500 mb-4 leading-relaxed font-medium">
-              Select an isolated segment directly to re-map data properties down into the text inputs:
+              Select an isolated segment directly to re-map data properties down
+              into the text inputs:
             </p>
-            
+
             <div className="space-y-3 flex-1">
               {ocrAlternatives.map((item, idx) => {
                 return (
-                  <div key={idx} className="p-3 rounded-xl border border-slate-200/70 bg-white shadow-xs transition-all">
-                    <div className="font-bold text-slate-900 text-xs tracking-tight">{item.translatedText}</div>
+                  <div
+                    key={idx}
+                    className="p-3 rounded-xl border border-border-main/70 bg-card-bg shadow-xs transition-all"
+                  >
+                    <div className="font-bold text-text-main text-xs tracking-tight">
+                      {item.translatedText}
+                    </div>
                     {item.originalText !== item.translatedText && (
                       <div className="text-[10px] text-slate-400 italic mt-1 font-medium">
                         Raw: "{item.originalText}"
                       </div>
                     )}
-                    
+
                     <div className="mt-3 flex gap-2 pt-2 border-t border-slate-100">
-                      <button 
-                        type="button" 
-                        onClick={() => setValue("title", item.translatedText)} 
-                        className="px-2.5 py-1 bg-slate-50 hover:bg-amber-50 hover:text-amber-700 rounded-lg text-[10px] font-bold uppercase tracking-wider border border-slate-200 transition-colors cursor-pointer"
+                      <button
+                        type="button"
+                        onClick={() => setValue("title", item.translatedText)}
+                        className="px-2.5 py-1 bg-slate-50 hover:bg-amber-50 hover:text-amber-700 rounded-lg text-[10px] font-bold uppercase tracking-wider border border-border-main transition-colors cursor-pointer"
                       >
                         + Title
                       </button>
-                      <button 
-                        type="button" 
-                        onClick={() => setValue("author", item.translatedText)} 
-                        className="px-2.5 py-1 bg-slate-50 hover:bg-amber-50 hover:text-amber-700 rounded-lg text-[10px] font-bold uppercase tracking-wider border border-slate-200 transition-colors cursor-pointer"
+                      <button
+                        type="button"
+                        onClick={() => setValue("author", item.translatedText)}
+                        className="px-2.5 py-1 bg-slate-50 hover:bg-amber-50 hover:text-amber-700 rounded-lg text-[10px] font-bold uppercase tracking-wider border border-border-main transition-colors cursor-pointer"
                       >
                         + Author
                       </button>
@@ -274,8 +315,7 @@ export const BookModal = ({ isOpen, onClose, onSubmit, categories, editingBook }
             </div>
           </div>
         )}
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/books/components/DeleteBookModal.tsx b/client/src/features/books/components/DeleteBookModal.tsx
index f83f568..4d47119 100644
--- a/client/src/features/books/components/DeleteBookModal.tsx
+++ b/client/src/features/books/components/DeleteBookModal.tsx
@@ -8,42 +8,50 @@ interface DeleteBookModalProps {
   bookTitle: string;
 }
 
-export const DeleteBookModal = ({ isOpen, onClose, onConfirm, bookTitle }: DeleteBookModalProps) => {
+export const DeleteBookModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  bookTitle,
+}: DeleteBookModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-slate-700 text-left">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6 border border-slate-200 animate-zoom-in">
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-text-main text-left">
+      <div className="bg-card-bg rounded-2xl shadow-2xl w-full max-w-md p-6 border border-border-main animate-zoom-in">
         <div className="flex flex-col items-center text-center">
           <div className="p-3 bg-rose-50 text-rose-600 rounded-full mb-3.5">
             <Trash2 size={28} />
           </div>
-          
-          <h3 className="text-xl font-bold text-slate-900 tracking-tight">
+
+          <h3 className="text-xl font-bold text-text-main tracking-tight">
             Delete Book From Catalog
           </h3>
-          
+
           <p className="text-base text-slate-500 mt-3 leading-relaxed font-medium">
-            Are you absolutely sure you want to delete <strong className="text-slate-900 font-bold">"{bookTitle}"</strong> permanently from the library repository index?
+            Are you absolutely sure you want to delete{" "}
+            <strong className="text-text-main font-bold">"{bookTitle}"</strong>{" "}
+            permanently from the library repository index?
           </p>
-          
+
           <p className="text-sm text-rose-600 font-semibold mt-4 bg-rose-50 border border-rose-100 p-3.5 rounded-xl leading-relaxed">
-            Warning: This action cannot be reverted and will permanently delete all tracking history and copy instances.
+            Warning: This action cannot be reverted and will permanently delete
+            all tracking history and copy instances.
           </p>
         </div>
-        
+
         {/* Action Panel Buttons */}
         <div className="mt-6 flex justify-end gap-3 pt-4 border-t border-slate-100 text-sm font-bold uppercase tracking-wider">
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="px-4 py-2.5 text-slate-500 hover:text-slate-900 transition-colors cursor-pointer"
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-2.5 text-slate-500 hover:text-text-main transition-colors cursor-pointer"
           >
             Cancel
           </button>
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             className="px-5 py-2.5 text-white bg-rose-600 hover:bg-rose-700 rounded-xl shadow-md transition-all cursor-pointer"
           >
             Confirm Delete
@@ -52,4 +60,4 @@ export const DeleteBookModal = ({ isOpen, onClose, onConfirm, bookTitle }: Delet
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/books/pages/BooksPage.tsx b/client/src/features/books/pages/BooksPage.tsx
index c9b77fd..9843f55 100644
--- a/client/src/features/books/pages/BooksPage.tsx
+++ b/client/src/features/books/pages/BooksPage.tsx
@@ -9,7 +9,17 @@ import type { BookFormValues } from "../schemas/bookSchema";
 import { toast } from "sonner";
 
 // Editorial Icon Elements
-import { Search, Plus, RotateCcw, Award, BookOpen, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Search,
+  Plus,
+  RotateCcw,
+  Award,
+  BookOpen,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  X,
+} from "lucide-react";
 
 export const BooksPage = () => {
   const queryClient = useQueryClient();
@@ -27,7 +37,9 @@ export const BooksPage = () => {
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [isDeleteOpen, setIsDeleteOpen] = useState(false);
   const [isDetailOpen, setIsDetailOpen] = useState(false);
-  const [selectedBook, setSelectedBook] = useState<BookInventoryItem | null>(null);
+  const [selectedBook, setSelectedBook] = useState<BookInventoryItem | null>(
+    null,
+  );
 
   // =========================================================================
   // ⏱️ NATIVE DEBOUNCE LIFECYCLE ENGINE
@@ -43,7 +55,12 @@ export const BooksPage = () => {
 
   // 1. Fetching relational query datasets
   const { data: booksResponse, isLoading } = useQuery({
-    queryKey: ["libraryBooksCatalogFeed", activeSearchQuery, categoryFilter, currentPage],
+    queryKey: [
+      "libraryBooksCatalogFeed",
+      activeSearchQuery,
+      categoryFilter,
+      currentPage,
+    ],
     queryFn: async () => {
       const response = await axiosClient.get("/books", {
         params: {
@@ -57,13 +74,13 @@ export const BooksPage = () => {
     },
   });
 
-  // Dedicated Category Dropdown Feed route 
+  // Dedicated Category Dropdown Feed route
   const { data: categories = [] } = useQuery<BookCategory[]>({
     queryKey: ["bookCategoriesDropdownFeed"],
     queryFn: async () => {
-      const response = await axiosClient.get("/books/categories"); 
+      const response = await axiosClient.get("/books/categories");
       return response.data?.data || [];
-    }
+    },
   });
 
   // Structural mapping layer for explicit type safety checks
@@ -91,7 +108,10 @@ export const BooksPage = () => {
   // Extract core rows and pagination totals safely
   const rawRows: BackendBookRow[] = booksResponse?.data?.rows || [];
   const totalDatabaseRecords = Number(booksResponse?.data?.count || 0);
-  const totalPages = Math.max(1, Math.ceil(totalDatabaseRecords / RECORDS_PER_PAGE));
+  const totalPages = Math.max(
+    1,
+    Math.ceil(totalDatabaseRecords / RECORDS_PER_PAGE),
+  );
 
   // 2. Data Adaptation Mapping
   const parsedBooks: BookInventoryItem[] = rawRows.map((b: BackendBookRow) => ({
@@ -130,21 +150,30 @@ export const BooksPage = () => {
       };
 
       if (selectedBook) {
-        const response = await axiosClient.patch(`/books/${selectedBook.id}`, processedPayload);
+        const response = await axiosClient.patch(
+          `/books/${selectedBook.id}`,
+          processedPayload,
+        );
         return response.data;
       }
-      
+
       const response = await axiosClient.post("/books", processedPayload);
       return response.data;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["libraryBooksCatalogFeed"] });
-      toast.success(selectedBook ? "Book metrics updated successfully." : "New title appended to index safely!");
+      toast.success(
+        selectedBook
+          ? "Book metrics updated successfully."
+          : "New title appended to index safely!",
+      );
       setIsFormOpen(false);
       setSelectedBook(null);
     },
     onError: () => {
-      toast.error("Database schema transaction rejected our data structure formats.");
+      toast.error(
+        "Database schema transaction rejected our data structure formats.",
+      );
     },
   });
 
@@ -158,128 +187,175 @@ export const BooksPage = () => {
       queryClient.invalidateQueries({ queryKey: ["libraryBooksCatalogFeed"] });
       toast.success("Volume profile purged from repository catalog.");
       setIsDeleteOpen(false);
-      setSelectedBook(null); 
-      
+      setSelectedBook(null);
+
       if (parsedBooks.length === 1 && currentPage > 1) {
         setCurrentPage((prev) => prev - 1);
       }
     },
     onError: () => {
       toast.error("Unable to execute target ledger deletion contract.");
-    }
+    },
   });
 
   return (
-    <div className="space-y-6 animate-fade-in pb-12 text-left bg-[#fafafa] min-h-screen font-sans text-xs sm:text-sm text-slate-700">
-      
-      {/* Action Title Jumbotron Header block */}
-      <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-sm flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
+      {/* 💳 Top Deck Banner (Synchronized heights, margins, and layout) */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Books Management Desk</h2>
-          <p className="text-xs text-slate-500 mt-1 font-medium leading-relaxed">
-            View, evaluate, and trace total volume distribution limits across the facility.
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Books Management Desk
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">
+            View, evaluate, and trace total volume distribution limits across
+            the facility.
           </p>
         </div>
         <button
           type="button"
-          onClick={() => { setSelectedBook(null); setIsFormOpen(true); }}
-          className="flex items-center gap-2 px-4 py-2 text-xs font-bold uppercase tracking-wider bg-slate-900 hover:bg-slate-800 text-white rounded-xl transition-all cursor-pointer self-stretch sm:self-auto justify-center shadow-xs"
+          onClick={() => {
+            setSelectedBook(null);
+            setIsFormOpen(true);
+          }}
+          className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap self-stretch sm:self-auto justify-center"
         >
           <Plus size={14} /> Add New Book
         </button>
       </div>
 
-      {/* Query Filter Navigation Controls Line */}
-      <div className="bg-white p-5 rounded-2xl border border-slate-200/60 shadow-sm flex flex-col md:flex-row gap-4 items-center">
-        <div className="relative w-full md:flex-1">
+      {/* 🎛️ Control Filtering Deck (Inline grid alignment setup) */}
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
+        {/* Search Input Box Container */}
+        <div className="relative flex-1 w-full">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+            <Search size={16} />
+          </span>
           <input
             type="text"
             placeholder="Search by book title or author name..."
             value={localSearch}
             onChange={(e) => setLocalSearch(e.target.value)}
-            className="w-full pl-11 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium text-slate-900 placeholder:text-slate-400 outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white transition-all"
+            className="w-full pl-10 pr-10 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
           />
-          <Search size={16} className="text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
+          {localSearch && (
+            <button
+              type="button"
+              onClick={() => {
+                setLocalSearch("");
+              }}
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-text-main p-0.5 cursor-pointer transition-colors"
+            >
+              <X size={14} />
+            </button>
+          )}
         </div>
 
-        <div className="w-full md:w-64 relative">
-          <select
-            value={categoryFilter}
-            onChange={(e) => handleCategoryChange(e.target.value)}
-            className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-bold uppercase tracking-wider text-slate-700 appearance-none outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white cursor-pointer"
+        {/* Filters Grouping Grid */}
+        <div className="flex gap-2.5 w-full md:w-auto items-center">
+          {/* Category Dropdown Selection Box Container */}
+          <div className="w-full md:w-56 relative">
+            <select
+              value={categoryFilter}
+              onChange={(e) => handleCategoryChange(e.target.value)}
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+            >
+              <option value="">All Categories</option>
+              {categories.map((cat) => (
+                <option key={cat.id} value={cat.id}>
+                  {cat.name}
+                </option>
+              ))}
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
+
+          {/* Reset Action Control Trigger */}
+          <button
+            type="button"
+            onClick={handleClearAllFilters}
+            className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            <option value="">All Categories</option>
-            {categories.map((cat) => (
-              <option key={cat.id} value={cat.id}>{cat.name}</option>
-            ))}
-          </select>
+            <RotateCcw size={12} /> Reset
+          </button>
         </div>
-
-        {/* Clear Filter Control Button */}
-        <button
-          type="button"
-          onClick={handleClearAllFilters}
-          className="w-full md:w-auto px-4 py-2 text-xs font-bold uppercase tracking-wider bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-xl transition-all cursor-pointer flex items-center justify-center gap-2 shrink-0 border border-rose-100/40"
-        >
-          <RotateCcw size={14} /> Reset
-        </button>
       </div>
 
-      {/* Ledger Grid Framework View */}
+      {/* 📊 Main Table Grid Render Block Layout */}
       {isLoading ? (
-        <div className="text-center py-24 text-xs font-bold uppercase tracking-widest text-slate-400 animate-pulse">
+        <div className="text-center py-20 text-xs sm:text-sm text-slate-400 font-semibold animate-pulse flex-1 flex flex-col items-center justify-center gap-2">
           Syncing Active Media Ledger Records...
         </div>
       ) : (
-        <div className="space-y-4">
-          <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
+        <div className="flex flex-col flex-1 space-y-5">
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-100 text-[10px] sm:text-xs font-bold text-slate-400 uppercase bg-slate-50/50 tracking-wider">
-                    <th className="py-4 px-6">Book Title & Creator Index</th>
-                    <th className="py-4 px-6">Category</th>
-                    <th className="py-4 px-6 text-center">Total Volumes</th>
-                    <th className="py-4 px-6 text-center">Shelf Availability</th>
-                    <th className="py-4 px-6 text-right">Book Lending Count</th>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">Book Title & Creator Index</th>
+                    <th className="py-3.5 px-5">Category</th>
+                    <th className="py-3.5 px-5 text-center">Total Volumes</th>
+                    <th className="py-3.5 px-5 text-center">
+                      Shelf Availability
+                    </th>
+                    <th className="py-3.5 px-5 text-right">
+                      Book Lending Count
+                    </th>
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                   {parsedBooks.length === 0 ? (
                     <tr>
-                      <td colSpan={5} className="text-center py-20 text-xs text-slate-500 font-medium">
-                        Operational Clear View. Zero matching volume records found inside database indexes.
+                      <td
+                        colSpan={5}
+                        className="text-center py-20 text-xs text-slate-500 font-medium"
+                      >
+                        Operational Clear View. Zero matching volume records
+                        found inside database indexes.
                       </td>
                     </tr>
                   ) : (
                     parsedBooks.map((book) => (
-                      <tr 
-                        key={book.id} 
-                        onClick={() => { setSelectedBook(book); setIsDetailOpen(true); }}
-                        className="hover:bg-slate-50 transition-colors cursor-pointer select-none group"
+                      <tr
+                        key={book.id}
+                        onClick={() => {
+                          setSelectedBook(book);
+                          setIsDetailOpen(true);
+                        }}
+                        className="hover:bg-slate-50/80 transition-colors cursor-pointer select-none group"
                       >
-                        <td className="py-4 px-6 text-slate-900">
-                          <div className="truncate max-w-xs font-bold text-slate-900">{book.title}</div>
-                          <div className="text-[11px] sm:text-xs text-slate-400 font-medium mt-0.5">By {book.author}</div>
+                        <td className="py-3.5 px-5 text-text-main">
+                          <div className="truncate max-w-xs font-bold text-text-main">
+                            {book.title}
+                          </div>
+                          <div className="text-[11px] sm:text-xs text-slate-400 font-medium mt-0.5">
+                            By {book.author}
+                          </div>
                         </td>
-                        <td className="py-4 px-6">
-                          <span className="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-lg text-[11px] sm:text-xs font-bold bg-slate-100 text-slate-700 border border-slate-200/40">
-                            <Award size={12} className="text-amber-500" />
+                        <td className="py-3.5 px-5">
+                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-lg text-[11px] font-bold uppercase tracking-wider bg-slate-50 text-text-main border border-slate-100">
+                            <Award size={11} className="text-amber-500" />
                             {book.categoryName}
                           </span>
                         </td>
-                        <td className="py-4 px-6 text-center font-mono font-bold text-slate-900">{book.totalCopies}</td>
-                        <td className="py-4 px-6 text-center">
-                          <span className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] sm:text-xs font-mono font-bold border ${
-                            book.availableCopies > 0 
-                              ? "bg-emerald-50 text-emerald-700 border-emerald-200" 
-                              : "bg-rose-50 text-rose-700 border-rose-200"
-                          }`}>
+                        <td className="py-3.5 px-5 text-center font-mono font-bold text-text-main">
+                          {book.totalCopies}
+                        </td>
+                        <td className="py-3.5 px-5 text-center">
+                          <span
+                            className={`inline-flex items-center px-2 py-0.5 rounded-md text-[11px] font-mono font-bold uppercase border ${
+                              book.availableCopies > 0
+                                ? "bg-emerald-50 text-emerald-700 border-emerald-100"
+                                : "bg-rose-50 text-rose-700 border-rose-100"
+                            }`}
+                          >
                             {book.availableCopies} left
                           </span>
                         </td>
-                        <td className="py-4 px-6 font-medium text-slate-500 text-right">
-                          <div className="flex items-center justify-end gap-1.5 font-bold text-slate-700 text-xs sm:text-sm">
+                        <td className="py-3.5 px-5 font-medium text-slate-500 text-right">
+                          <div className="flex items-center justify-end gap-1 font-bold text-text-main text-xs sm:text-sm uppercase tracking-wide">
                             <BookOpen size={12} className="text-slate-400" />
                             <span>{book.lendingCount} times</span>
                           </div>
@@ -291,26 +367,34 @@ export const BooksPage = () => {
               </table>
             </div>
 
-            {/* RELIABLE PAGINATION FOOTER ROW CONTROLS */}
+            {/* 🏁 Standard Footer Pagination Row Controls Container */}
             {totalPages > 0 && (
               <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
                 <span>
-                  Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalDatabaseRecords} Books
+                  Page {currentPage} / {totalPages}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalDatabaseRecords} Books
                 </span>
                 <div className="flex gap-2">
                   <button
                     type="button"
                     disabled={currentPage === 1}
-                    onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.max(1, p - 1)); }}
-                    className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.max(1, p - 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
                   >
                     <ChevronLeft size={14} />
                   </button>
                   <button
                     type="button"
                     disabled={currentPage === totalPages}
-                    onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.min(totalPages, p + 1)); }}
-                    className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.min(totalPages, p + 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
                   >
                     <ChevronRight size={14} />
                   </button>
@@ -321,7 +405,7 @@ export const BooksPage = () => {
         </div>
       )}
 
-      {/* Embedded Modals Overlay Orchestration Grid */}
+      {/* 🪟 Modals Infrastructure Overlay Layer Blocks */}
       <BookDetailModal
         isOpen={isDetailOpen}
         onClose={() => setIsDetailOpen(false)}
@@ -341,9 +425,11 @@ export const BooksPage = () => {
       <DeleteBookModal
         isOpen={isDeleteOpen}
         onClose={() => setIsDeleteOpen(false)}
-        onConfirm={() => selectedBook && deleteBookMutation.mutate(selectedBook.id)}
+        onConfirm={() =>
+          selectedBook && deleteBookMutation.mutate(selectedBook.id)
+        }
         bookTitle={selectedBook?.title || ""}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/categories/components/CategoryDetailsModal.tsx b/client/src/features/categories/components/CategoryDetailsModal.tsx
index 0d23c70..2dd7e4f 100644
--- a/client/src/features/categories/components/CategoryDetailsModal.tsx
+++ b/client/src/features/categories/components/CategoryDetailsModal.tsx
@@ -2,7 +2,15 @@ import React, { useState } from "react";
 import type { CategoryMetrics } from "../types/category.types";
 
 // Editorial Visual Assets
-import { Layers, BookOpen, BarChart3, Calendar, Edit3, Trash2, X } from "lucide-react";
+import {
+  Layers,
+  BookOpen,
+  BarChart3,
+  Calendar,
+  Edit3,
+  Trash2,
+  X,
+} from "lucide-react";
 
 interface CategoryDetailsModalProps {
   isOpen: boolean;
@@ -49,28 +57,29 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
       setLocalError("Name must contain alphabets only");
       return;
     }
-    
+
     setLocalError("");
     await onUpdateName(category.category_id, editName.trim());
     setIsEditing(false);
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-xs p-4 font-sans text-slate-700 text-left">
-      <div className="bg-white w-full max-w-xl rounded-2xl border border-slate-200 shadow-2xl overflow-hidden animate-scale-up">
-        
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 backdrop-blur-xs p-4 font-sans text-text-main text-left">
+      <div className="bg-card-bg w-full max-w-xl rounded-2xl border border-border-main shadow-2xl overflow-hidden animate-scale-up">
         {/* Header section - Clean Dark Structured Banner */}
         <div className="bg-slate-900 px-8 py-5 border-b border-slate-100 flex justify-between items-center">
           <div>
-            <h3 className="text-xl font-bold text-white tracking-tight">Category Details</h3>
+            <h3 className="text-xl font-bold text-white tracking-tight">
+              Category Details
+            </h3>
             <p className="text-xs text-slate-400 font-mono font-bold tracking-wider mt-1 uppercase">
               ID: {readableId}
-            </p>          
+            </p>
           </div>
-          <button 
+          <button
             type="button"
-            onClick={onClose} 
-            className="text-slate-400 hover:bg-white/10 hover:rounded-lg transition-colors p-1 cursor-pointer"
+            onClick={onClose}
+            className="text-slate-400 hover:bg-card-bg/10 hover:rounded-lg transition-colors p-1 cursor-pointer"
           >
             <X size={20} />
           </button>
@@ -88,12 +97,16 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
                   type="text"
                   value={editName}
                   onChange={(e) => setEditName(e.target.value)}
-                  className="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 text-sm font-semibold text-slate-900 rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-white focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
+                  className="w-full px-4 py-2.5 bg-slate-50 border border-border-main text-sm font-semibold text-text-main rounded-xl placeholder:text-slate-400 outline-hidden focus:bg-card-bg focus:border-slate-900 focus:ring-4 focus:ring-slate-900/5 transition-all"
                 />
-                {localError && <p className="text-xs text-rose-700 font-bold mt-1.5 px-1">{localError}</p>}
+                {localError && (
+                  <p className="text-xs text-rose-700 font-bold mt-1.5 px-1">
+                    {localError}
+                  </p>
+                )}
               </div>
             ) : (
-              <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl font-semibold text-slate-900">
+              <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl font-semibold text-text-main">
                 {category.category_name}
               </div>
             )}
@@ -105,16 +118,16 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
               <span className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center justify-center gap-1">
                 <BookOpen size={12} /> Total Owned Books
               </span>
-              <span className="text-xl font-mono font-bold text-slate-900 mt-1 block">
+              <span className="text-xl font-mono font-bold text-text-main mt-1 block">
                 {category.booksCount}
               </span>
             </div>
-            
+
             <div className="p-4 bg-amber-50/40 border border-amber-100 rounded-xl text-center">
               <span className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center justify-center gap-1">
                 <BarChart3 size={12} /> Total Borrows
               </span>
-              <span className="text-xl font-mono font-bold text-slate-900 mt-1 block">
+              <span className="text-xl font-mono font-bold text-text-main mt-1 block">
                 {category.lendingCount}
               </span>
             </div>
@@ -125,11 +138,11 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
             <label className="text-xs font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5 mb-2">
               <Calendar size={14} /> System Registry Date
             </label>
-            <div className="px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-slate-500 text-sm font-semibold">
+            <div className="px-4 py-3 bg-slate-50 border border-border-main rounded-xl text-slate-500 text-sm font-semibold">
               {new Date(category.created_at).toLocaleDateString("en-US", {
                 year: "numeric",
                 month: "long",
-                day: "numeric"
+                day: "numeric",
               })}
             </div>
           </div>
@@ -150,8 +163,12 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
             <>
               <button
                 type="button"
-                onClick={() => { setIsEditing(false); setEditName(category.category_name); setLocalError(""); }}
-                className="px-5 py-3 bg-white border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+                onClick={() => {
+                  setIsEditing(false);
+                  setEditName(category.category_name);
+                  setLocalError("");
+                }}
+                className="px-5 py-3 bg-card-bg border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
               >
                 Cancel
               </button>
@@ -177,4 +194,4 @@ export const CategoryDetailsModal: React.FC<CategoryDetailsModalProps> = ({
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/categories/pages/ManageCategories.tsx b/client/src/features/categories/pages/ManageCategories.tsx
index 43f8bf7..3b6c1a6 100644
--- a/client/src/features/categories/pages/ManageCategories.tsx
+++ b/client/src/features/categories/pages/ManageCategories.tsx
@@ -9,15 +9,15 @@ import { categoryFormSchema } from "../validation/category.validation";
 import type { CategoryMetrics } from "../types/category.types";
 
 // Editorial Visual Assets
-import { 
-  Plus, 
-  Search, 
-  X, 
-  ChevronDown, 
-  RotateCcw, 
-  Layers, 
-  BookOpen, 
-  RefreshCw, 
+import {
+  Plus,
+  Search,
+  X,
+  ChevronDown,
+  RotateCcw,
+  Layers,
+  BookOpen,
+  RefreshCw,
   AlertTriangle,
   FolderPlus,
   ChevronLeft,
@@ -43,9 +43,13 @@ export const ManageCategories = () => {
 
   // 🔎 Layout Control Parameters
   const [searchQuery, setSearchQuery] = useState("");
-  const [bookSort, setBookSort] = useState<"NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH">("NONE");
-  const [borrowSort, setBorrowSort] = useState<"NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH">("NONE");
-  const [currentPage, setCurrentPage] = useState(1); 
+  const [bookSort, setBookSort] = useState<
+    "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH"
+  >("NONE");
+  const [borrowSort, setBorrowSort] = useState<
+    "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH"
+  >("NONE");
+  const [currentPage, setCurrentPage] = useState(1);
   const rowsPerPage = 10;
 
   // 📝 Creation Dialog Variables
@@ -54,27 +58,40 @@ export const ManageCategories = () => {
   const [createValidationError, setCreateValidationError] = useState("");
 
   // 📊 Detail Display Management State
-  const [selectedCategory, setSelectedCategory] = useState<CategoryMetrics | null>(null);
+  const [selectedCategory, setSelectedCategory] =
+    useState<CategoryMetrics | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
 
   // 🚨 Deletion Reconfirmation Setup State
-  const [deleteConfirmConfig, setDeleteConfirmConfig] = useState<{ isOpen: boolean; targetCat: CategoryMetrics | null }>({
+  const [deleteConfirmConfig, setDeleteConfirmConfig] = useState<{
+    isOpen: boolean;
+    targetCat: CategoryMetrics | null;
+  }>({
     isOpen: false,
     targetCat: null,
   });
 
   // Query: Fetch structured aggregation framework from server
   const { data: serverPayload, isLoading } = useQuery<ServerPaginationWrapper>({
-    queryKey: ["libraryCategoriesAggregationFeed", token, currentPage, searchQuery, bookSort, borrowSort],
+    queryKey: [
+      "libraryCategoriesAggregationFeed",
+      token,
+      currentPage,
+      searchQuery,
+      bookSort,
+      borrowSort,
+    ],
     queryFn: async () => {
       const params = new URLSearchParams({
         page: currentPage.toString(),
         limit: rowsPerPage.toString(),
         bookSort,
         borrowSort,
-        ...(searchQuery.trim() && { search: searchQuery.trim() })
+        ...(searchQuery.trim() && { search: searchQuery.trim() }),
       });
-      const res = await axiosClient.get(`/categories/metrics?${params.toString()}`);
+      const res = await axiosClient.get(
+        `/categories/metrics?${params.toString()}`,
+      );
       return res.data?.data || res.data;
     },
     enabled: !!token,
@@ -90,31 +107,45 @@ export const ManageCategories = () => {
       return await axiosClient.post("/categories", { category_name: name });
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["libraryCategoriesAggregationFeed"] });
+      queryClient.invalidateQueries({
+        queryKey: ["libraryCategoriesAggregationFeed"],
+      });
       toast.success("New category added successfully.");
       setIsCreateOpen(false);
       setNewCatName("");
     },
-    onError: () => toast.error("Server baseline engine rejected insertion pipeline."),
+    onError: () =>
+      toast.error("Server baseline engine rejected insertion pipeline."),
   });
 
   // Mutation: Save Partial Update Edits
   const updateMutation = useMutation({
     mutationFn: async ({ id, name }: { id: string; name: string }) => {
-      return await axiosClient.patch(`/categories/${id}`, { category_name: name });
+      return await axiosClient.patch(`/categories/${id}`, {
+        category_name: name,
+      });
     },
     onSuccess: (res) => {
       const responseData = res.data as UpdateMutationResponse | undefined;
-      queryClient.invalidateQueries({ queryKey: ["libraryCategoriesAggregationFeed"] });
+      queryClient.invalidateQueries({
+        queryKey: ["libraryCategoriesAggregationFeed"],
+      });
       toast.success("Category name updated successfully.");
-      
+
       if (selectedCategory) {
-        setSelectedCategory((prev) => 
-          prev ? { ...prev, category_name: responseData?.data?.category_name || prev.category_name } : null
+        setSelectedCategory((prev) =>
+          prev
+            ? {
+                ...prev,
+                category_name:
+                  responseData?.data?.category_name || prev.category_name,
+              }
+            : null,
         );
       }
     },
-    onError: () => toast.error("Failed to alter category reference values safely."),
+    onError: () =>
+      toast.error("Failed to alter category reference values safely."),
   });
 
   // Mutation: Permanent Row Cascade Purging
@@ -123,13 +154,18 @@ export const ManageCategories = () => {
       return await axiosClient.delete(`/categories/${id}`);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["libraryCategoriesAggregationFeed"] });
-      toast.success("Categories deleted successfully and Books under the category also removed.");
+      queryClient.invalidateQueries({
+        queryKey: ["libraryCategoriesAggregationFeed"],
+      });
+      toast.success(
+        "Categories deleted successfully and Books under the category also removed.",
+      );
       setIsDetailsOpen(false);
       setSelectedCategory(null);
       setDeleteConfirmConfig({ isOpen: false, targetCat: null });
     },
-    onError: () => toast.error("Database constraint rejected Delete transaction profile."),
+    onError: () =>
+      toast.error("Database constraint rejected Delete transaction profile."),
   });
 
   const handleOpenCreateModal = () => {
@@ -147,8 +183,10 @@ export const ManageCategories = () => {
 
   const handleExecuteCreate = async (e: React.FormEvent) => {
     e.preventDefault();
-    const activeNames = categoriesList.map(c => c.category_name);
-    const validator = categoryFormSchema(activeNames).safeParse({ categoryName: newCatName });
+    const activeNames = categoriesList.map((c) => c.category_name);
+    const validator = categoryFormSchema(activeNames).safeParse({
+      categoryName: newCatName,
+    });
 
     if (!validator.success) {
       setCreateValidationError(validator.error.issues[0].message);
@@ -163,33 +201,38 @@ export const ManageCategories = () => {
     setDeleteConfirmConfig({ isOpen: true, targetCat: cat });
   };
 
-  const isGlobalProcessing = createMutation.isPending || updateMutation.isPending || deleteMutation.isPending;
-  const isFilterActive = searchQuery.trim() !== "" || bookSort !== "NONE" || borrowSort !== "NONE";
+  const isGlobalProcessing =
+    createMutation.isPending ||
+    updateMutation.isPending ||
+    deleteMutation.isPending;
 
   return (
-    <div className="space-y-6 animate-fade-in font-sans text-xs sm:text-sm text-slate-700 text-left">
-      
-      {/* Top Deck Banner */}
-      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
+    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
+      {/* 💳 Top Deck Banner (Synchronized heights, gaps, paddings) */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Categories Management Desk</h2>
-          <p className="text-xs text-slate-500 mt-1 font-medium">Control library book categories, analyze category engagement volumes, and manage inventory segments.</p>
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Categories Management Desk
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium">
+            Control library book categories, analyze category engagement
+            volumes, and manage inventory segments.
+          </p>
         </div>
         <button
           type="button"
           onClick={handleOpenCreateModal}
-          className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap uppercase tracking-wider flex items-center gap-2"
+          className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap"
         >
           <Plus size={14} /> Add New Category
         </button>
       </div>
 
-      {/* Control Filtering Deck */}
-      <div className="flex flex-col lg:flex-row items-stretch lg:items-center gap-4 bg-white p-5 rounded-2xl border border-slate-200 shadow-xs">
-        
+      {/* 🎛️ Control Filtering Deck (Synchronized matching padding) */}
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
         {/* Search Input Box Container */}
-        <div className="relative flex-1">
-          <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
+        <div className="relative flex-1 w-full">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
             <Search size={16} />
           </span>
           <input
@@ -198,96 +241,114 @@ export const ManageCategories = () => {
             value={searchQuery}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               setSearchQuery(e.target.value);
-              setCurrentPage(1); 
+              setCurrentPage(1);
             }}
-            className="w-full pl-11 pr-11 py-2 bg-slate-50 border border-slate-200 text-slate-900 rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
+            className="w-full pl-10 pr-10 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
           />
           {searchQuery && (
             <button
               type="button"
-              onClick={() => { setSearchQuery(""); setCurrentPage(1); }}
-              className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-900 p-1 cursor-pointer transition-colors"
+              onClick={() => {
+                setSearchQuery("");
+                setCurrentPage(1);
+              }}
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-text-main p-0.5 cursor-pointer transition-colors"
             >
               <X size={14} />
             </button>
           )}
         </div>
 
-        {/* Filters Grouping Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 flex-1 lg:flex-none lg:w-[55%]">
-          <div className="relative">
+        {/* Filters Grouping Grid (Aligned horizontally to the right on desktop layouts) */}
+        <div className="flex gap-2.5 w-full md:w-auto items-center">
+          {/* Total Volume Filter dropdown wrapper */}
+          <div className="w-full md:w-48 relative">
             <select
               value={bookSort}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                setBookSort(e.target.value as "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH");
-                setBorrowSort("NONE"); 
-                setCurrentPage(1); 
+                setBookSort(
+                  e.target.value as "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH",
+                );
+                setBorrowSort("NONE");
+                setCurrentPage(1);
               }}
-              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl text-xs sm:text-sm font-bold outline-hidden focus:bg-white cursor-pointer transition-all appearance-none"
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
             >
-              <option value="NONE">Sort by Owned Count: Default</option>
-              <option value="HIGH_TO_LOW">Owned Count: High to Low</option>
-              <option value="LOW_TO_HIGH">Owned Count: Low to High</option>
+              <option value="NONE">Sort by Total Volume</option>
+              <option value="HIGH_TO_LOW">Volume: High to Low</option>
+              <option value="LOW_TO_HIGH">Volume: Low to High</option>
             </select>
             <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
               <ChevronDown size={14} />
             </span>
           </div>
 
-          <div className="relative">
+          {/* Active Borrows Filter dropdown wrapper */}
+          <div className="w-full md:w-48 relative">
             <select
               value={borrowSort}
               onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                setBorrowSort(e.target.value as "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH");
-                setBookSort("NONE"); 
-                setCurrentPage(1); 
+                setBorrowSort(
+                  e.target.value as "NONE" | "HIGH_TO_LOW" | "LOW_TO_HIGH",
+                );
+                setBookSort("NONE");
+                setCurrentPage(1);
               }}
-              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl text-xs sm:text-sm font-bold outline-hidden focus:bg-white cursor-pointer transition-all appearance-none"
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
             >
-              <option value="NONE">Sort by Borrows: Default</option>
-              <option value="HIGH_TO_LOW">Borrows Count: High to Low</option>
-              <option value="LOW_TO_HIGH">Borrows Count: Low to High</option>
+              <option value="NONE">Sort by Borrows</option>
+              <option value="HIGH_TO_LOW">Borrows: High to Low</option>
+              <option value="LOW_TO_HIGH">Borrows: Low to High</option>
             </select>
             <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
               <ChevronDown size={14} />
             </span>
           </div>
-        </div>
 
-        {/* Global Reset Action Trigger */}
-        {isFilterActive && (
+          {/* Reset Action Control Trigger */}
           <button
             type="button"
             onClick={handleResetFilters}
-            className="px-4 py-2 text-xs font-bold text-slate-500 bg-slate-50 border border-slate-200 hover:bg-slate-100 hover:text-slate-900 rounded-xl cursor-pointer transition-all animate-fade-in text-center whitespace-nowrap flex items-center justify-center gap-1.5"
+            className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            <RotateCcw size={12} /> Reset Filters
+            <RotateCcw size={12} /> Reset
           </button>
-        )}
+        </div>
       </div>
 
-      {/* Main Grid Render Table Section */}
+      {/* 📊 Main Data Rendering Workspace */}
       {isLoading ? (
-        <div className="text-center py-24 text-xs sm:text-sm text-slate-400 font-bold animate-pulse tracking-wide flex flex-col items-center justify-center gap-3">
+        <div className="text-center py-20 text-xs sm:text-sm text-slate-400 font-semibold animate-pulse flex-1 flex flex-col items-center justify-center gap-2">
           <RefreshCw size={20} className="animate-spin text-slate-300" />
           Compiling catalog taxonomy architecture indices...
         </div>
       ) : (
-        <div className="space-y-4">
-          <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+        <div className="flex flex-col flex-1 space-y-5">
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-200 text-[10px] sm:text-xs font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
-                    <th className="py-4 px-6 flex items-center gap-1.5"><Layers size={12} /> Category Name Listing</th>
-                    <th className="py-4 px-6"><BookOpen size={12} className="inline mr-1.5" />Total Volume Stack</th>
-                    <th className="py-4 px-6">Active Circulation Borrow Count</th>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">
+                      <Layers size={12} className="inline mr-1.5" />
+                      Category Name Listing
+                    </th>
+                    <th className="py-3.5 px-5">
+                      <BookOpen size={12} className="inline mr-1.5" />
+                      Total Volume Stack
+                    </th>
+                    <th className="py-3.5 px-5">
+                      Active Circulation Borrow Count
+                    </th>
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                   {categoriesList.length === 0 ? (
                     <tr>
-                      <td colSpan={3} className="py-16 text-center text-slate-400 font-medium">
+                      <td
+                        colSpan={3}
+                        className="py-16 text-center text-slate-400 font-medium"
+                      >
                         No library category profiles match the search key terms.
                       </td>
                     </tr>
@@ -295,21 +356,20 @@ export const ManageCategories = () => {
                     categoriesList.map((cat: CategoryMetrics) => (
                       <tr
                         key={cat.category_id}
-                        onClick={() => { setSelectedCategory(cat); setIsDetailsOpen(true); }}
-                        className="hover:bg-slate-50/80 transition-colors cursor-pointer group select-none animate-fade-in"
+                        onClick={() => {
+                          setSelectedCategory(cat);
+                          setIsDetailsOpen(true);
+                        }}
+                        className="hover:bg-slate-50/80 transition-colors cursor-pointer group select-none"
                       >
-                        <td className="py-4 px-6 font-bold text-slate-900 group-hover:text-slate-800 transition-colors">
+                        <td className="py-3.5 px-5 font-bold text-text-main group-hover:text-slate-800 transition-colors">
                           {cat.category_name}
                         </td>
-                        <td className="py-4 px-6 font-medium text-slate-500 font-mono text-[11px] sm:text-xs">
+                        <td className="py-3.5 px-5 text-slate-500 font-medium font-mono text-xs">
                           {cat.booksCount} books
                         </td>
-                        <td className="py-4 px-6">
-                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] sm:text-xs font-bold font-mono tracking-wide border ${
-                            cat.lendingCount > 15 
-                              ? "bg-emerald-50 text-emerald-700 border-emerald-100"
-                              : "bg-slate-100 text-slate-500 border-slate-200"
-                          }`}>
+                        <td className="py-3.5 px-5">
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border bg-slate-50 text-slate-600 border-slate-100">
                             {cat.lendingCount} times
                           </span>
                         </td>
@@ -320,87 +380,79 @@ export const ManageCategories = () => {
               </table>
             </div>
 
-           {totalPages > 0 && (
-                        <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
-                          <span>
-                            Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalRecordsCount} Categories
-                          </span>
-                          <div className="flex gap-2">
-                            <button
-                              type="button"
-                              disabled={currentPage === 1}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.max(1, p - 1)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronLeft size={14} />
-                            </button>
-                            <button
-                              type="button"
-                              disabled={currentPage === totalPages}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.min(totalPages, p + 1)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronRight size={14} />
-                            </button>
-                          </div>
-                        </div>
-                      )}
+            {/* 🏁 Standard Synchronized Footer Pagination Engine Controls */}
+            {totalPages > 0 && (
+              <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+                <span>
+                  Page {currentPage} / {totalPages}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalRecordsCount} Categories
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.max(1, p - 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPages}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.min(totalPages, p + 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
-
-          {/* Pagination Controls Block UI Section */}
-          {/* <div className="flex flex-col sm:flex-row justify-between items-center gap-4 bg-white px-6 py-4 rounded-2xl border border-slate-200 shadow-xs">
-            <span className="text-xs sm:text-sm font-medium text-slate-500">
-              Showing page <b className="text-slate-900 font-mono">{currentPage}</b> of <b className="text-slate-900 font-mono">{totalPages}</b> (<span className="font-mono">{totalRecordsCount}</span> Archives)
-            </span>
-            <div className="flex gap-3 text-xs font-bold uppercase tracking-wider">
-              <button
-                type="button"
-                disabled={currentPage === 1}
-                onClick={() => setCurrentPage((prev) => prev - 1)}
-                className="px-3 py-1.5 bg-white border border-slate-200 rounded-xl text-slate-500 hover:text-slate-900 hover:border-slate-300 disabled:opacity-40 disabled:hover:text-slate-400 disabled:hover:border-slate-200 disabled:cursor-not-allowed cursor-pointer transition-colors"
-              >
-                ◀ Previous
-              </button>
-              <button
-                type="button"
-                disabled={currentPage === totalPages}
-                onClick={() => setCurrentPage((prev) => prev + 1)}
-                className="px-3 py-1.5 bg-white border border-slate-200 rounded-xl text-slate-500 hover:text-slate-900 hover:border-slate-300 disabled:opacity-40 disabled:hover:text-slate-400 disabled:hover:border-slate-200 disabled:cursor-not-allowed cursor-pointer transition-colors"
-              >
-                Next ▶
-              </button>
-            </div>
-          </div> */}
-
-
-          
         </div>
       )}
 
-      {/* Modal A: Pop-up Form for Quick Add Creation */}
+      {/* 🪟 Modals Infrastructure Overlay Layer Blocks */}
       {isCreateOpen && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-          <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs" onClick={() => setIsCreateOpen(false)} />
-          <form 
-            onSubmit={handleExecuteCreate} 
-            className="relative z-10 w-full max-w-md bg-white rounded-2xl p-6 border border-slate-200 shadow-2xl space-y-5 text-slate-700 animate-scale-up"
+          <div
+            className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs"
+            onClick={() => setIsCreateOpen(false)}
+          />
+          <form
+            onSubmit={handleExecuteCreate}
+            className="relative z-10 w-full max-w-md bg-card-bg rounded-2xl p-6 border border-border-main shadow-2xl space-y-5 text-text-main"
           >
             <div>
-              <h3 className="text-lg font-bold text-slate-900 tracking-tight flex items-center gap-2">
-                <FolderPlus size={18} className="text-slate-500" /> Add Category Classification
+              <h3 className="text-lg font-bold text-text-main tracking-tight flex items-center gap-2">
+                <FolderPlus size={18} className="text-slate-500" /> Add Category
+                Classification
               </h3>
-              <p className="text-xs text-slate-500 mt-1 font-medium">Input a unique classification name to initialize shelf tags mapping slots.</p>
+              <p className="text-xs text-slate-500 mt-1 font-medium">
+                Input a unique classification name to initialize shelf tags
+                mapping slots.
+              </p>
             </div>
 
             <div className="space-y-2">
-              <label className="block text-[10px] sm:text-xs font-bold text-slate-400 uppercase tracking-wider">Category Name</label>
+              <label className="block text-[10px] sm:text-xs font-bold text-slate-400 uppercase tracking-wider">
+                Category Name
+              </label>
               <input
                 type="text"
                 autoFocus
                 placeholder="e.g. Science Fiction, Biography, History"
                 value={newCatName}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewCatName(e.target.value)}
-                className="w-full px-4 py-2 bg-slate-50 border border-slate-200 text-slate-900 rounded-xl text-xs sm:text-sm font-bold focus:bg-white outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewCatName(e.target.value)
+                }
+                className="w-full px-4 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-bold focus:bg-card-bg outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
               />
               {createValidationError && (
                 <p className="text-xs text-rose-600 font-medium mt-1.5 flex items-center gap-1">
@@ -413,7 +465,7 @@ export const ManageCategories = () => {
               <button
                 type="button"
                 onClick={() => setIsCreateOpen(false)}
-                className="px-4 py-2 border border-slate-200 text-slate-500 rounded-xl hover:text-slate-900 hover:border-slate-300 transition-colors cursor-pointer"
+                className="px-4 py-2 border border-border-main text-slate-500 rounded-xl hover:text-text-main hover:border-slate-300 transition-colors cursor-pointer"
               >
                 Cancel
               </button>
@@ -429,20 +481,22 @@ export const ManageCategories = () => {
         </div>
       )}
 
-      {/* Modal B: In-depth Asset Details View & Inline Edit Overlay Panel */}
       <CategoryDetailsModal
         isOpen={isDetailsOpen}
         onClose={() => setIsDetailsOpen(false)}
         category={selectedCategory}
-        onUpdateName={async (id, name) => { await updateMutation.mutateAsync({ id, name }); }}
+        onUpdateName={async (id, name) => {
+          await updateMutation.mutateAsync({ id, name });
+        }}
         onDeleteCategory={(cat) => handleTriggerDeleteSequence(cat)}
         isMutating={isGlobalProcessing}
       />
 
-      {/* Modal C: Strict Structural Safeguard Cascade Deletion Popup */}
       <ConfirmationModal
         isOpen={deleteConfirmConfig.isOpen}
-        onClose={() => setDeleteConfirmConfig({ isOpen: false, targetCat: null })}
+        onClose={() =>
+          setDeleteConfirmConfig({ isOpen: false, targetCat: null })
+        }
         onConfirm={() => {
           if (deleteConfirmConfig.targetCat) {
             deleteMutation.mutate(deleteConfirmConfig.targetCat.category_id);
@@ -456,4 +510,4 @@ export const ManageCategories = () => {
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/AmnestySimulator.tsx b/client/src/features/dashboard/components/AmnestySimulator.tsx
index 12375d0..403b53d 100644
--- a/client/src/features/dashboard/components/AmnestySimulator.tsx
+++ b/client/src/features/dashboard/components/AmnestySimulator.tsx
@@ -1,45 +1,60 @@
 import { Sparkles } from "lucide-react";
 
-interface SimulatorProps { 
-  totalOutstanding: number; 
-  discount: number; 
-  onChange: (v: number) => void; 
+interface SimulatorProps {
+  totalOutstanding: number;
+  discount: number;
+  onChange: (v: number) => void;
 }
 
-export const AmnestySimulator = ({ totalOutstanding, discount, onChange }: SimulatorProps) => {
+export const AmnestySimulator = ({
+  totalOutstanding,
+  discount,
+  onChange,
+}: SimulatorProps) => {
   const waivedFine = (totalOutstanding * (discount / 100)).toFixed(0);
   const projectedRecovery = (totalOutstanding - Number(waivedFine)).toFixed(0);
 
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs space-y-4 text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs space-y-4 text-left font-sans">
       <div>
         <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
-          <Sparkles size={12} className="text-amber-500" /> Bulk Amnesty Clearance Simulator
+          <Sparkles size={12} className="text-amber-500" /> Bulk Amnesty
+          Clearance Simulator
         </h3>
         <p className="text-xs text-slate-500 mt-1 leading-relaxed font-medium">
-          Model the financial recovery outcome of offering a percentage-based amnesty fine relief.
+          Model the financial recovery outcome of offering a percentage-based
+          amnesty fine relief.
         </p>
       </div>
 
       <div className="p-4 bg-amber-50/40 border border-amber-100 rounded-xl space-y-3">
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1.5 text-xs font-bold">
-          <span className="text-slate-700 tracking-wide">Relief Rate: {discount}%</span>
-          <span className="text-amber-700 font-mono">Projected Cash Collection: ₹{projectedRecovery}</span>
+          <span className="text-text-main tracking-wide">
+            Relief Rate: {discount}%
+          </span>
+          <span className="text-amber-700 font-mono">
+            Projected Cash Collection: ₹{projectedRecovery}
+          </span>
         </div>
-        
-        <input 
-          type="range" 
-          min="0" 
-          max="100" 
-          value={discount} 
+
+        <input
+          type="range"
+          min="0"
+          max="100"
+          value={discount}
           onChange={(e) => onChange(Number(e.target.value))}
           className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900 focus:outline-hidden"
         />
       </div>
 
       <div className="text-[11px] text-slate-400 font-semibold italic leading-relaxed">
-        Offering this clearance drops <span className="text-rose-600 not-italic font-bold">₹{waivedFine}</span> in toxic debt and creates an immediate collection incentive for unreturned books.
+        Offering this clearance drops{" "}
+        <span className="text-rose-600 not-italic font-bold">
+          ₹{waivedFine}
+        </span>{" "}
+        in toxic debt and creates an immediate collection incentive for
+        unreturned books.
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/CategoryTreeMap.tsx b/client/src/features/dashboard/components/CategoryTreeMap.tsx
index 3482320..2d1dd44 100644
--- a/client/src/features/dashboard/components/CategoryTreeMap.tsx
+++ b/client/src/features/dashboard/components/CategoryTreeMap.tsx
@@ -1,29 +1,46 @@
 // Editorial Visual Assets
 import { PieChart } from "lucide-react";
 
-export const CategoryTreeMap = ({ categories }: { categories: { name: string; value: number; color: string }[] }) => {
+// 🎨 CORE ANCHOR MAP: Kept private (no export) so Vite Fast Refresh stays happy
+const tailwindColorSafelist: Record<string, string> = {
+  "bg-teal-500": "bg-teal-500",
+  "bg-blue-500": "bg-blue-500",
+  "bg-indigo-500": "bg-indigo-500",
+  "bg-amber-500": "bg-amber-500",
+};
+
+export const CategoryTreeMap = ({
+  categories,
+}: {
+  categories: { name: string; value: number; color: string }[];
+}) => {
   const totalValue = categories.reduce((sum, c) => sum + c.value, 0) || 1;
+
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs space-y-4 h-full flex flex-col justify-between text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs space-y-4 h-full flex flex-col justify-between text-left font-sans text-text-main">
+      
+      {/* 👋 HIDDEN COMPILER HOOK: Satisfies TS / ESLint "unused variable" rules */}
+      <span className="hidden">{Object.keys(tailwindColorSafelist).length}</span>
+
       <div>
         <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
           <PieChart size={12} className="text-slate-500" /> Circulation Share by Genre
         </h3>
-        <p className="text-xs text-slate-500 mt-1 leading-relaxed font-medium">
+        <p className="text-xs text-slate-400 mt-1 leading-relaxed font-medium">
           Live operational density mapping across catalog disciplines.
         </p>
       </div>
 
       {/* Structured Distribution Density Bar */}
-      <div className="flex w-full rounded-xl overflow-hidden h-14 border border-white shadow-inner my-2 shrink-0 bg-slate-50">
+      <div className="flex w-full rounded-xl overflow-hidden h-14 border border-border-main/40 shadow-inner my-2 shrink-0 bg-page-bg">
         {categories.map((cat) => (
-          <div 
-            key={cat.name} 
-            className={`${cat.color} h-full transition-all duration-200 group relative cursor-pointer border-r border-white/40 last:border-0`}
+          <div
+            key={cat.name}
+            className={`${cat.color} h-full transition-all duration-200 group relative cursor-pointer border-r border-page-bg/40 last:border-0`}
             style={{ width: `${(cat.value / totalValue) * 100}%` }}
           >
             {/* Subtle overlay tracking on interactive cell selection */}
-            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 dark:group-hover:bg-white/10 transition-colors" />
           </div>
         ))}
       </div>
@@ -31,10 +48,18 @@ export const CategoryTreeMap = ({ categories }: { categories: { name: string; va
       {/* Categorical Color Mapping Grid Legend */}
       <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 pt-2">
         {categories.map((cat) => (
-          <div key={cat.name} className="flex items-center gap-2 overflow-hidden">
-            <span className={`w-2.5 h-2.5 rounded-full ${cat.color} shrink-0 ring-4 ring-slate-50`} />
-            <span className="text-xs font-semibold text-slate-600 truncate">
-              {cat.name} <span className="text-slate-400 font-mono font-bold text-[11px]">({cat.value})</span>
+          <div
+            key={cat.name}
+            className="flex items-center gap-2 overflow-hidden"
+          >
+            <span
+              className={`w-2.5 h-2.5 rounded-full ${cat.color} shrink-0 ring-4 ring-card-bg`}
+            />
+            <span className="text-xs font-semibold text-text-main truncate">
+              {cat.name}{" "}
+              <span className="text-slate-400 font-mono font-bold text-[11px]">
+                ({cat.value})
+              </span>
             </span>
           </div>
         ))}
diff --git a/client/src/features/dashboard/components/CriticalDeficitWidget.tsx b/client/src/features/dashboard/components/CriticalDeficitWidget.tsx
index 1c9a7e7..1cb9967 100644
--- a/client/src/features/dashboard/components/CriticalDeficitWidget.tsx
+++ b/client/src/features/dashboard/components/CriticalDeficitWidget.tsx
@@ -1,14 +1,14 @@
 // Editorial Visual Assets
 import { AlertCircle } from "lucide-react";
 
-interface DeficitItem { 
-  id: string; 
-  name: string; 
-  requests: number; // This represents our calculated demand/urgency score
+interface DeficitItem {
+  id: string;
+  name: string;
+  requests: number;
 }
 
 export const CriticalDeficitWidget = ({ items }: { items: DeficitItem[] }) => (
-  <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
+  <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
     <div>
       <h3 className="text-[11px] font-bold text-rose-600 uppercase tracking-wider flex items-center gap-1.5">
         <AlertCircle size={14} className="text-rose-600" /> Procurement Alerts
@@ -17,29 +17,31 @@ export const CriticalDeficitWidget = ({ items }: { items: DeficitItem[] }) => (
         Critical titles with 0 copies remaining on the shelves.
       </p>
     </div>
-    
+
     <div className="space-y-2.5 my-4 overflow-y-auto max-h-35 pr-1 flex-1">
       {items.length === 0 ? (
         <p className="text-xs text-slate-400 italic py-6 text-center font-medium">
           Zero inventory bottlenecks reported.
         </p>
       ) : (
-        items.map(item => (
-          <div key={item.id} className="flex justify-between items-center bg-rose-50/40 border border-rose-100 p-2.5 rounded-xl transition-colors">
-            <span className="text-xs font-bold text-slate-800 truncate max-w-35 sm:max-w-45" title={item.name}>
+        items.map((item) => (
+          <div
+            key={item.id}
+            className="flex justify-between items-center bg-rose-50/40 border border-rose-100 p-2.5 rounded-xl transition-colors"
+          >
+            <span
+              className="text-xs font-bold text-slate-800 truncate max-w-35 sm:max-w-45"
+              title={item.name}
+            >
               {item.name}
             </span>
+            {/* ⚡ CLEANED: Always shows Out of Stock explicitly for books at 0 available copies */}
             <span className="text-[10px] font-mono font-bold bg-rose-600 text-white px-2.5 py-0.5 rounded-md whitespace-nowrap uppercase tracking-wider">
-              {item.requests > 1 ? `High Demand` : `Out of Stock`}
+              Out of Stock
             </span>
           </div>
         ))
       )}
     </div>
-    
-    {/* Keep this ready for when we link the purchase order handler
-    <button className="w-full py-2.5 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl text-xs font-bold tracking-wide transition-all cursor-pointer shadow-xs">
-      Quick Restock Request
-    </button> */}
   </div>
-);
\ No newline at end of file
+);
diff --git a/client/src/features/dashboard/components/DeadStockWidget.tsx b/client/src/features/dashboard/components/DeadStockWidget.tsx
index cd69973..4084752 100644
--- a/client/src/features/dashboard/components/DeadStockWidget.tsx
+++ b/client/src/features/dashboard/components/DeadStockWidget.tsx
@@ -1,14 +1,14 @@
 // Editorial Visual Assets
 import { Archive } from "lucide-react";
 
-interface DeadBook { 
-  id: string; 
-  title: string; 
-  shelf: string; 
+interface DeadBook {
+  id: string;
+  title: string;
+  shelf: string;
 }
 
 export const DeadStockWidget = ({ items }: { items: DeadBook[] }) => (
-  <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
+  <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
     <div>
       <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
         <Archive size={14} className="text-slate-500" /> Relocation "Dead Stock"
@@ -24,12 +24,18 @@ export const DeadStockWidget = ({ items }: { items: DeadBook[] }) => (
           All assets show healthy conversion rates.
         </p>
       ) : (
-        items.map(item => (
-          <div key={item.id} className="flex justify-between items-center bg-slate-50/50 border border-slate-200/60 p-2.5 rounded-xl transition-colors">
-            <span className="text-xs font-bold text-slate-800 truncate max-w-35 sm:max-w-42.5" title={item.title}>
+        items.map((item) => (
+          <div
+            key={item.id}
+            className="flex justify-between items-center bg-slate-50/50 border border-border-main/60 p-2.5 rounded-xl transition-colors"
+          >
+            <span
+              className="text-xs font-bold text-slate-800 truncate max-w-35 sm:max-w-42.5"
+              title={item.title}
+            >
               {item.title}
             </span>
-            <span className="text-[10px] font-mono font-bold bg-slate-100 border border-slate-200/60 px-2 py-0.5 rounded-md text-slate-600 uppercase tracking-wide">
+            <span className="text-[10px] font-mono font-bold bg-slate-100 border border-border-main/60 px-2 py-0.5 rounded-md text-slate-600 uppercase tracking-wide">
               Shelf: {item.shelf}
             </span>
           </div>
@@ -37,8 +43,8 @@ export const DeadStockWidget = ({ items }: { items: DeadBook[] }) => (
       )}
     </div>
 
-    {/* <button className="w-full py-2.5 border border-slate-200 text-slate-700 bg-white hover:bg-slate-50 rounded-xl text-xs font-bold tracking-wide transition-all cursor-pointer shadow-xs">
+    {/* <button className="w-full py-2.5 border border-border-main text-text-main bg-card-bg hover:bg-slate-50 rounded-xl text-xs font-bold tracking-wide transition-all cursor-pointer shadow-xs">
       Optimize Warehouse Storage
     </button> */}
   </div>
-);
\ No newline at end of file
+);
diff --git a/client/src/features/dashboard/components/EngagementLeaderboard.tsx b/client/src/features/dashboard/components/EngagementLeaderboard.tsx
index 54677d7..bc5cb2a 100644
--- a/client/src/features/dashboard/components/EngagementLeaderboard.tsx
+++ b/client/src/features/dashboard/components/EngagementLeaderboard.tsx
@@ -1,15 +1,15 @@
 // Editorial Visual Assets
 import { Trophy } from "lucide-react";
 
-interface TopUser { 
-  id: string; 
-  name: string; 
-  loans: number; 
-  onTimeRate: number; 
+interface TopUser {
+  id: string;
+  name: string;
+  loans: number;
+  onTimeRate: number;
 }
 
 export const EngagementLeaderboard = ({ members }: { members: TopUser[] }) => (
-  <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs space-y-4 h-full flex flex-col justify-between text-left font-sans">
+  <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs space-y-4 h-full flex flex-col justify-between text-left font-sans">
     <div>
       <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
         <Trophy size={14} className="text-amber-500" /> Elite Reader Engagement
@@ -21,17 +21,25 @@ export const EngagementLeaderboard = ({ members }: { members: TopUser[] }) => (
 
     <div className="divide-y divide-slate-100 flex-1 flex flex-col justify-center min-h-40">
       {members.slice(0, 3).map((member, index) => (
-        <div key={member.id} className="flex items-center justify-between py-3 first:pt-0 last:pb-0">
+        <div
+          key={member.id}
+          className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
+        >
           <div className="flex items-center gap-2.5">
-            <span className="text-[11px] font-mono font-bold text-slate-900 bg-amber-50 border border-amber-100 h-5 w-6 rounded-md flex items-center justify-center">
+            <span className="text-[11px] font-mono font-bold text-text-main bg-amber-50 border border-amber-100 h-5 w-6 rounded-md flex items-center justify-center">
               #{index + 1}
             </span>
-            <span className="text-xs font-bold text-slate-800 truncate max-w-27.5 sm:max-w-35" title={member.name}>
+            <span
+              className="text-xs font-bold text-slate-800 truncate max-w-27.5 sm:max-w-35"
+              title={member.name}
+            >
               {member.name}
             </span>
           </div>
           <div className="text-right">
-            <p className="text-xs font-bold text-slate-900 font-mono">{member.loans} Loans</p>
+            <p className="text-xs font-bold text-text-main font-mono">
+              {member.loans} Loans
+            </p>
             <p className="text-[10px] font-bold text-emerald-600 mt-0.5 uppercase tracking-wide">
               {member.onTimeRate}% On-Time
             </p>
@@ -40,8 +48,8 @@ export const EngagementLeaderboard = ({ members }: { members: TopUser[] }) => (
       ))}
     </div>
 
-    {/* <div className="bg-slate-50 border border-slate-200/60 text-slate-600 text-[10px] font-bold p-2.5 rounded-xl text-center uppercase tracking-wider">
+    {/* <div className="bg-slate-50 border border-border-main/60 text-slate-600 text-[10px] font-bold p-2.5 rounded-xl text-center uppercase tracking-wider">
       Automated Reward Incentives Applied
     </div> */}
   </div>
-);
\ No newline at end of file
+);
diff --git a/client/src/features/dashboard/components/FineVelocityGauge.tsx b/client/src/features/dashboard/components/FineVelocityGauge.tsx
index 93e7934..843107c 100644
--- a/client/src/features/dashboard/components/FineVelocityGauge.tsx
+++ b/client/src/features/dashboard/components/FineVelocityGauge.tsx
@@ -1,44 +1,55 @@
-export const FineVelocityGauge = ({ collected, outstanding }: { collected: number; outstanding: number }) => {
+export const FineVelocityGauge = ({
+  collected,
+  outstanding,
+}: {
+  collected: number;
+  outstanding: number;
+}) => {
   const total = collected + outstanding || 1;
   const percentage = Math.round((collected / total) * 100);
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs flex items-center justify-between gap-4 text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs flex items-center justify-between gap-4 text-left font-sans">
       <div className="space-y-2">
         <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
           Recovery Collection Velocity
         </h3>
         <div className="space-y-1">
-          <p className="text-2xl font-bold text-slate-900 tracking-tight">₹{collected} Recovered</p>
+          <p className="text-2xl font-bold text-text-main tracking-tight">
+            ₹{collected} Recovered
+          </p>
           <p className="text-xs text-slate-400 font-semibold">
-            Remaining Outstanding: <span className="text-slate-600 font-mono">₹{outstanding}</span>
+            Remaining Outstanding:{" "}
+            <span className="text-slate-600 font-mono">₹{outstanding}</span>
           </p>
         </div>
       </div>
-      
+
       {/* Editorial Velocity Circular Gauge */}
       <div className="relative flex items-center justify-center h-24 w-24 shrink-0">
         <svg className="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
           {/* Base track channel layout */}
-          <path 
-            className="text-slate-100" 
-            strokeWidth="3.5" 
-            stroke="currentColor" 
-            fill="none" 
-            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" 
+          <path
+            className="text-slate-100"
+            strokeWidth="3.5"
+            stroke="currentColor"
+            fill="none"
+            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
           />
           {/* Reactive quantitative value progress track layer */}
-          <path 
-            className="text-slate-900" 
-            strokeDasharray={`${percentage}, 100`} 
-            strokeWidth="3.5" 
-            strokeLinecap="round" 
-            stroke="currentColor" 
-            fill="none" 
-            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" 
+          <path
+            className="text-text-main"
+            strokeDasharray={`${percentage}, 100`}
+            strokeWidth="3.5"
+            strokeLinecap="round"
+            stroke="currentColor"
+            fill="none"
+            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
           />
         </svg>
-        <span className="absolute text-sm font-mono font-bold text-slate-900">{percentage}%</span>
+        <span className="absolute text-sm font-mono font-bold text-text-main">
+          {percentage}%
+        </span>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/MetricsGrid.tsx b/client/src/features/dashboard/components/MetricsGrid.tsx
index d82a2e7..6cb4fc1 100644
--- a/client/src/features/dashboard/components/MetricsGrid.tsx
+++ b/client/src/features/dashboard/components/MetricsGrid.tsx
@@ -11,55 +11,75 @@ interface MetricCardProps {
   icon: React.ReactNode;
 }
 
-const MetricCard = ({ title, value, subtext, bgClass, icon }: MetricCardProps) => (
-  <div className="bg-white p-5 rounded-2xl border border-slate-200/60 shadow-xs flex justify-between items-start transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 text-left font-sans">
+const MetricCard = ({
+  title,
+  value,
+  subtext,
+  bgClass,
+  icon,
+}: MetricCardProps) => (
+  <div className="bg-white p-5 rounded-2xl border border-border-main/60 shadow-xs flex justify-between items-start transition-all duration-200 hover:shadow-md hover:-translate-y-0.5 text-left font-sans">
     <div className="space-y-1.5">
-      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">{title}</span>
-      <div className="text-2xl font-bold text-slate-900 tracking-tight font-sans">{value}</div>
-      {subtext && <p className="text-[11px] text-slate-400 font-semibold italic">{subtext}</p>}
+      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">
+        {title}
+      </span>
+      <div className="text-2xl font-bold text-text-main tracking-tight font-sans">
+        {value}
+      </div>
+      {subtext && (
+        <p className="text-[11px] text-slate-400 font-semibold italic">
+          {subtext}
+        </p>
+      )}
     </div>
-    <div className={`p-3 rounded-xl ${bgClass} shadow-xs shrink-0 flex items-center justify-center`}>
+    <div
+      className={`p-3 rounded-xl ${bgClass} shadow-xs shrink-0 flex items-center justify-center`}
+    >
       {icon}
     </div>
   </div>
 );
 
-export const MetricsGrid = ({ data }: { data: DashboardSummaryMetrics | undefined }) => {
+export const MetricsGrid = ({
+  data,
+}: {
+  data: DashboardSummaryMetrics | undefined;
+}) => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4">
-      <MetricCard 
-        title="Total Books" 
-        value={data?.totalBooks || 0} 
-        subtext={`Total copies: ${data?.totalCopies || 0}`} 
-        bgClass="bg-amber-50/50 text-slate-900 border border-amber-100" 
-        icon={<BookOpen size={20} className="text-slate-700" />} 
+      <MetricCard
+        title="Total Books"
+        value={data?.totalBooks || 0}
+        subtext={`Total copies: ${data?.totalCopies || 0}`}
+        bgClass="bg-amber-50/50 text-text-main border border-amber-100"
+        icon={<BookOpen size={20} className="text-text-main" />}
       />
-      <MetricCard 
-        title="Available Books" 
-        value={data?.availableBooks || 0} 
-        bgClass="bg-emerald-50/60 text-emerald-700 border border-emerald-100" 
-        icon={<BookCheck size={20} />} 
+      <MetricCard
+        title="Available Books"
+        value={data?.availableBooks || 0}
+        bgClass="bg-emerald-50/60 text-emerald-700 border border-emerald-100"
+        icon={<BookCheck size={20} />}
       />
-      <MetricCard 
-        title="Active Members" 
-        value={data?.activeMembers || 0} 
-        bgClass="bg-slate-100 text-slate-800 border border-slate-200/60" 
-        icon={<Users size={20} />} 
+      <MetricCard
+        title="Active Members"
+        value={data?.activeMembers || 0}
+        bgClass="bg-slate-100 text-slate-800 border border-border-main/60"
+        icon={<Users size={20} />}
       />
-      <MetricCard 
-        title="Books Overdue" 
-        value={data?.overdueCount || 0} 
+      <MetricCard
+        title="Books Overdue"
+        value={data?.overdueCount || 0}
         subtext={`Late Ratio: ${data?.overduePercentage || 0}%`}
-        bgClass="bg-rose-50 text-rose-600 border border-rose-100" 
-        icon={<AlertTriangle size={20} />} 
+        bgClass="bg-rose-50 text-rose-600 border border-rose-100"
+        icon={<AlertTriangle size={20} />}
       />
-      <MetricCard 
-        title="Outstanding Fines" 
-        value={`₹${data?.totalOutstandingFines || 0}`} 
-        subtext="Fine rate: ₹10/day" 
-        bgClass="bg-amber-50 text-amber-700 border border-amber-200/70" 
-        icon={<Coins size={20} />} 
+      <MetricCard
+        title="Outstanding Fines"
+        value={`₹${data?.totalOutstandingFines || 0}`}
+        subtext="Fine rate: ₹10/day"
+        bgClass="bg-amber-50 text-amber-700 border border-amber-200/70"
+        icon={<Coins size={20} />}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/OverdueTable.tsx b/client/src/features/dashboard/components/OverdueTable.tsx
index 745aafe..3528946 100644
--- a/client/src/features/dashboard/components/OverdueTable.tsx
+++ b/client/src/features/dashboard/components/OverdueTable.tsx
@@ -1,18 +1,23 @@
 import type { OverdueRecord } from "../../../types/dashboard";
 
-export const OverdueTable = ({ records }: { records: OverdueRecord[] | undefined }) => {
+export const OverdueTable = ({
+  records,
+}: {
+  records: OverdueRecord[] | undefined;
+}) => {
   if (!records || records.length === 0) {
     return (
-      <div className="text-center py-12 bg-slate-50/50 rounded-2xl border border-dashed border-slate-200 p-6 font-sans">
+      <div className="text-center py-12 bg-slate-50/50 rounded-2xl border border-dashed border-border-main p-6 font-sans">
         <p className="text-sm text-slate-400 font-semibold">
-          System verification clear: No overdue inventory items currently registered.
+          System verification clear: No overdue inventory items currently
+          registered.
         </p>
       </div>
     );
   }
 
   return (
-    <div className="overflow-x-auto rounded-2xl border border-slate-200/60 shadow-xs font-sans text-left bg-white">
+    <div className="overflow-x-auto rounded-2xl border border-border-main/60 shadow-xs font-sans text-left bg-card-bg">
       <table className="w-full border-collapse">
         <thead>
           <tr className="border-b border-slate-100 text-[10px] font-bold text-slate-400 uppercase tracking-wider bg-slate-50/70">
@@ -20,28 +25,35 @@ export const OverdueTable = ({ records }: { records: OverdueRecord[] | undefined
             <th className="py-4 px-6 font-bold">Borrower Account Reference</th>
             <th className="py-4 px-6 font-bold">Expected Return Date</th>
             <th className="py-4 px-6 font-bold">Delay Period</th>
-            <th className="py-4 px-6 font-bold text-right">Accumulated Penalties</th>
+            <th className="py-4 px-6 font-bold text-right">
+              Accumulated Penalties
+            </th>
           </tr>
         </thead>
-        <tbody className="text-sm divide-y divide-slate-100 text-slate-700">
+        <tbody className="text-sm divide-y divide-slate-100 text-text-main">
           {records.map((row) => (
-            <tr key={row.id} className="hover:bg-slate-50/40 transition-colors group">
-              <td className="py-4 px-6 font-bold text-slate-900 group-hover:text-slate-700 transition-colors">
+            <tr
+              key={row.id}
+              className="hover:bg-slate-50/40 transition-colors group"
+            >
+              <td className="py-4 px-6 font-bold text-text-main group-hover:text-text-main transition-colors">
                 {row.title}
               </td>
               <td className="py-4 px-6 text-slate-600 font-medium">
-                <span className="font-mono text-[10px] bg-slate-100 border border-slate-200/60 px-2 py-0.5 rounded-md text-slate-600 font-bold mr-2 uppercase tracking-wide">
+                <span className="font-mono text-[10px] bg-slate-100 border border-border-main/60 px-2 py-0.5 rounded-md text-slate-600 font-bold mr-2 uppercase tracking-wide">
                   ID: {row.memberId}
                 </span>
                 {row.borrowerName}
               </td>
-              <td className="py-4 px-6 text-slate-500 font-semibold">{row.dueDate}</td>
+              <td className="py-4 px-6 text-slate-500 font-semibold">
+                {row.dueDate}
+              </td>
               <td className="py-4 px-6">
                 <span className="inline-flex items-center px-2.5 py-0.5 rounded-md text-[11px] font-mono font-bold bg-rose-50 text-rose-600 border border-rose-100 uppercase tracking-wide">
                   {row.daysLate} days overdue
                 </span>
               </td>
-              <td className="py-4 px-6 font-bold text-slate-900 text-right font-mono text-base">
+              <td className="py-4 px-6 font-bold text-text-main text-right font-mono text-base">
                 ₹{row.fineAmount}
               </td>
             </tr>
@@ -50,4 +62,4 @@ export const OverdueTable = ({ records }: { records: OverdueRecord[] | undefined
       </table>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/PeakHoursChart.tsx b/client/src/features/dashboard/components/PeakHoursChart.tsx
index f9cb371..b29d615 100644
--- a/client/src/features/dashboard/components/PeakHoursChart.tsx
+++ b/client/src/features/dashboard/components/PeakHoursChart.tsx
@@ -1,13 +1,18 @@
 // Editorial Visual Assets
 import { TrendingUp } from "lucide-react";
 
-export const PeakHoursChart = ({ data }: { data: { day: string; count: number }[] }) => {
-  const maxCount = Math.max(...data.map(d => d.count), 1);
+export const PeakHoursChart = ({
+  data,
+}: {
+  data: { day: string; count: number }[];
+}) => {
+  const maxCount = Math.max(...data.map((d) => d.count), 1);
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs space-y-4 text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs space-y-4 text-left font-sans">
       <div>
         <h3 className="text-[11px] font-bold uppercase tracking-wider text-slate-400 flex items-center gap-1.5">
-          <TrendingUp size={14} className="text-slate-500" /> Foot-Traffic Velocity
+          <TrendingUp size={14} className="text-slate-500" /> Foot-Traffic
+          Velocity
         </h3>
         <p className="text-xs text-slate-500 mt-1 leading-relaxed font-medium">
           Weekly checkout frequencies by operational calendar days.
@@ -17,18 +22,21 @@ export const PeakHoursChart = ({ data }: { data: { day: string; count: number }[
       {/* Bar graph container track */}
       <div className="flex items-end justify-between h-40 pt-6 px-2 bg-slate-50/40 border border-slate-100 rounded-xl">
         {data.map((item) => (
-          <div key={item.day} className="flex flex-col items-center gap-2 group w-full">
+          <div
+            key={item.day}
+            className="flex flex-col items-center gap-2 group w-full"
+          >
             {/* Pop up data floating label indicator */}
-            <div className="text-[10px] font-mono font-bold text-slate-900 bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded-sm opacity-0 group-hover:opacity-100 transition-all duration-200 transform translate-y-1 group-hover:-translate-y-0.5 pointer-events-none">
+            <div className="text-[10px] font-mono font-bold text-text-main bg-amber-50 border border-amber-200 px-1.5 py-0.5 rounded-sm opacity-0 group-hover:opacity-100 transition-all duration-200 transform translate-y-1 group-hover:-translate-y-0.5 pointer-events-none">
               {item.count}
             </div>
-            
+
             {/* Interactive column block chart visualization */}
-            <div 
+            <div
               className="w-8 bg-slate-900 rounded-t-md group-hover:bg-slate-800 transition-all duration-200 cursor-pointer shadow-xs"
               style={{ height: `${(item.count / maxCount) * 110}px` }}
             />
-            
+
             <span className="text-xs text-slate-500 font-bold tracking-wide mt-1 pb-2">
               {item.day}
             </span>
@@ -37,4 +45,4 @@ export const PeakHoursChart = ({ data }: { data: { day: string; count: number }[
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/RetentionAnalytics.tsx b/client/src/features/dashboard/components/RetentionAnalytics.tsx
index 047258d..b91f22b 100644
--- a/client/src/features/dashboard/components/RetentionAnalytics.tsx
+++ b/client/src/features/dashboard/components/RetentionAnalytics.tsx
@@ -1,14 +1,19 @@
 // Editorial Visual Assets
 import { Clock } from "lucide-react";
 
-export const RetentionAnalytics = ({ metrics }: { metrics?: { avgDays: number; threshold: number } }) => {
+export const RetentionAnalytics = ({
+  metrics,
+}: {
+  metrics?: { avgDays: number; threshold: number };
+}) => {
   const avg = metrics?.avgDays || 12.4;
   const maxLimit = metrics?.threshold || 14;
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs flex flex-col justify-between min-h-65 text-left font-sans">
       <div>
         <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
-          <Clock size={14} className="text-slate-500" /> Retention Lifetime Policy
+          <Clock size={14} className="text-slate-500" /> Retention Lifetime
+          Policy
         </h3>
         <p className="text-xs text-slate-500 mt-1 leading-relaxed font-medium">
           Average reading span before returning an item.
@@ -17,8 +22,11 @@ export const RetentionAnalytics = ({ metrics }: { metrics?: { avgDays: number; t
 
       {/* Hero Analytics Counter Callout */}
       <div className="text-center py-5 space-y-1">
-        <div className="text-4xl font-bold text-slate-900 tracking-tight font-sans">
-          {avg} <span className="text-xl font-semibold tracking-normal text-slate-400">Days</span>
+        <div className="text-4xl font-bold text-text-main tracking-tight font-sans">
+          {avg}{" "}
+          <span className="text-xl font-semibold tracking-normal text-slate-400">
+            Days
+          </span>
         </div>
         <p className="text-xs font-bold text-slate-600 uppercase tracking-wide">
           Average Book Lifecycle Span
@@ -26,14 +34,14 @@ export const RetentionAnalytics = ({ metrics }: { metrics?: { avgDays: number; t
       </div>
 
       {/* Threshold Capacity Info block */}
-      <div className="bg-slate-50/50 border border-slate-200/60 p-3.5 rounded-xl text-center space-y-1">
+      <div className="bg-slate-50/50 border border-border-main/60 p-3.5 rounded-xl text-center space-y-1">
         <p className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">
           Current Hard Due Limit Threshold
         </p>
-        <p className="text-xs font-bold text-slate-900 font-mono">
+        <p className="text-xs font-bold text-text-main font-mono">
           {maxLimit} Days Authorized
         </p>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/dashboard/components/ReturnForecaster.tsx b/client/src/features/dashboard/components/ReturnForecaster.tsx
index 5163227..890721c 100644
--- a/client/src/features/dashboard/components/ReturnForecaster.tsx
+++ b/client/src/features/dashboard/components/ReturnForecaster.tsx
@@ -1,13 +1,18 @@
 // Editorial Visual Assets
 import { CalendarDays } from "lucide-react";
 
-export const ReturnForecaster = ({ forecast }: { forecast: { date: string; count: number }[] }) => {
-  const maxForecast = Math.max(...forecast.map(f => f.count), 1);
+export const ReturnForecaster = ({
+  forecast,
+}: {
+  forecast: { date: string; count: number }[];
+}) => {
+  const maxForecast = Math.max(...forecast.map((f) => f.count), 1);
   return (
-    <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs space-y-4 text-left font-sans">
+    <div className="bg-card-bg p-6 rounded-2xl border border-border-main/60 shadow-xs space-y-4 text-left font-sans">
       <div>
         <h3 className="text-[11px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1.5">
-          <CalendarDays size={14} className="text-slate-500" /> 7-Day Return Flow Forecaster
+          <CalendarDays size={14} className="text-slate-500" /> 7-Day Return
+          Flow Forecaster
         </h3>
         <p className="text-xs text-slate-500 mt-1 leading-relaxed font-medium">
           Expected book return volumes to optimize intake shelf arrangements.
@@ -17,18 +22,23 @@ export const ReturnForecaster = ({ forecast }: { forecast: { date: string; count
       {/* Horizontal Data Progress Bars Distribution layout */}
       <div className="space-y-3 pt-1">
         {forecast.map((day) => (
-          <div key={day.date} className="flex items-center gap-4 text-xs font-semibold">
-            <span className="w-16 text-slate-500 font-bold tracking-wide">{day.date}</span>
-            
+          <div
+            key={day.date}
+            className="flex items-center gap-4 text-xs font-semibold"
+          >
+            <span className="w-16 text-slate-500 font-bold tracking-wide">
+              {day.date}
+            </span>
+
             {/* Horizontal progress channel tracks */}
             <div className="flex-1 bg-slate-100 h-2 rounded-lg overflow-hidden">
-              <div 
+              <div
                 className="bg-slate-900 h-full rounded-lg transition-all duration-500 ease-out"
                 style={{ width: `${(day.count / maxForecast) * 100}%` }}
               />
             </div>
-            
-            <span className="w-16 text-right font-mono font-bold text-slate-900 shrink-0">
+
+            <span className="w-16 text-right font-mono font-bold text-text-main shrink-0">
               {day.count} items
             </span>
           </div>
@@ -36,4 +46,4 @@ export const ReturnForecaster = ({ forecast }: { forecast: { date: string; count
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/components/DeleteFinesModal.tsx b/client/src/features/fines/components/DeleteFinesModal.tsx
index 5cd7bc5..d9ab41f 100644
--- a/client/src/features/fines/components/DeleteFinesModal.tsx
+++ b/client/src/features/fines/components/DeleteFinesModal.tsx
@@ -8,16 +8,21 @@ interface DeleteFinesModalProps {
   amount?: number;
 }
 
-export const DeleteFinesModal = ({ isOpen, onClose, onConfirm, memberName, amount }: DeleteFinesModalProps) => {
+export const DeleteFinesModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  memberName,
+  amount,
+}: DeleteFinesModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-55 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-slate-200 animate-zoom-in">
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-55 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="relative bg-card-bg rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden border border-border-main animate-zoom-in">
         {/* Top Close Control */}
         <div className="absolute right-4 top-4">
-          <button 
+          <button
             type="button"
             onClick={onClose}
             className="text-slate-400 hover:text-slate-600 transition-colors cursor-pointer"
@@ -32,40 +37,47 @@ export const DeleteFinesModal = ({ isOpen, onClose, onConfirm, memberName, amoun
             <AlertTriangle size={28} className="text-rose-600" />
           </div>
 
-          <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wide">Delete Fine Record</h3>
-          
+          <h3 className="text-xs font-bold text-text-main uppercase tracking-wide">
+            Delete Fine Record
+          </h3>
+
           <p className="text-[11px] text-slate-500 font-medium mt-3 leading-relaxed px-2">
-            Are you sure you want to permanently delete the fine totaling <span className="font-mono font-bold text-rose-600">₹{amount}.00</span> registered against <span className="font-bold text-slate-900">"{memberName}"</span>?
+            Are you sure you want to permanently delete the fine totaling{" "}
+            <span className="font-mono font-bold text-rose-600">
+              ₹{amount}.00
+            </span>{" "}
+            registered against{" "}
+            <span className="font-bold text-text-main">"{memberName}"</span>?
           </p>
 
           {/* Audit Warning Box */}
           <div className="mt-5 p-3.5 bg-rose-50 rounded-xl border border-rose-100 flex items-start gap-2.5 text-left">
             <AlertCircle size={14} className="text-rose-600 shrink-0 mt-0.5" />
             <p className="text-[11px] text-rose-700 font-bold leading-normal uppercase tracking-wide">
-              Warning: This action will permanently remove this fine record from the history log.
+              Warning: This action will permanently remove this fine record from
+              the history log.
             </p>
           </div>
         </div>
 
         {/* Footer Actions */}
-        <div className="px-6 py-4 bg-slate-50 border-t border-slate-200 flex gap-2">
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 bg-white border border-slate-200 rounded-xl transition-all cursor-pointer"
+        <div className="px-6 py-4 bg-slate-50 border-t border-border-main flex gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main bg-card-bg border border-border-main rounded-xl transition-all cursor-pointer"
           >
             Abort
           </button>
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider text-white bg-rose-600 hover:bg-rose-700 shadow-xs rounded-xl transition-all cursor-pointer"
           >
             Delete record
           </button>
         </div>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/components/FineDetailsModal.tsx b/client/src/features/fines/components/FineDetailsModal.tsx
index 812560b..7a1e78d 100644
--- a/client/src/features/fines/components/FineDetailsModal.tsx
+++ b/client/src/features/fines/components/FineDetailsModal.tsx
@@ -1,6 +1,14 @@
 import { useState } from "react";
 import type { FineRecord } from "../../../types/fines";
-import { X, User, BookOpen, ShieldAlert, DollarSign, Trash2, CheckCircle2 } from "lucide-react";
+import {
+  X,
+  User,
+  BookOpen,
+  ShieldAlert,
+  DollarSign,
+  Trash2,
+  CheckCircle2,
+} from "lucide-react";
 import { DeleteFinesModal } from "./DeleteFinesModal";
 
 interface FineDetailsModalProps {
@@ -11,7 +19,13 @@ interface FineDetailsModalProps {
   onDelete: (id: string) => void;
 }
 
-export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }: FineDetailsModalProps) => {
+export const FineDetailsModal = ({
+  isOpen,
+  fine,
+  onClose,
+  onSettle,
+  onDelete,
+}: FineDetailsModalProps) => {
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   if (!isOpen || !fine) return null;
@@ -24,24 +38,27 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
     outsidePlanDays: 0,
     outsidePlanFine: 0,
     isPlanExpiredNow: !fine.membershipActive,
-    expiryDate: null
+    expiryDate: null,
   };
 
   return (
     <>
-      <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-        <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl overflow-hidden border border-slate-200 animate-zoom-in">
-          
+      <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+        <div className="bg-card-bg rounded-2xl shadow-2xl w-full max-w-xl overflow-hidden border border-border-main animate-zoom-in">
           {/* Header */}
           <div className="bg-slate-900 px-6 py-5 text-white flex justify-between items-center">
             <div>
-              <h3 className="font-bold text-xs uppercase tracking-wider text-slate-200">About Fine Context</h3>
-              <p className="font-mono text-[11px] text-slate-400 tracking-widest mt-0.5">ID: FINE-{displayId}</p>
+              <h3 className="font-bold text-xs uppercase tracking-wider text-slate-200">
+                About Fine Context
+              </h3>
+              <p className="font-mono text-[11px] text-slate-400 tracking-widest mt-0.5">
+                ID: FINE-{displayId}
+              </p>
             </div>
-            <button 
+            <button
               type="button"
-              onClick={onClose} 
-              className="p-1.5 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors cursor-pointer"
+              onClick={onClose}
+              className="p-1.5 hover:bg-card-bg/10 rounded-lg text-slate-400 hover:text-white transition-colors cursor-pointer"
             >
               <X size={16} />
             </button>
@@ -51,20 +68,33 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
             {/* Account Holder Section */}
             <div className="space-y-2">
               <h4 className="text-[11px] font-bold text-slate-400 uppercase tracking-wide flex items-center gap-1.5">
-                <User size={12} className="text-slate-700 shrink-0" /> Member Account Profile
+                <User size={12} className="text-text-main shrink-0" /> Member
+                Account Profile
               </h4>
-              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
+              <div className="bg-slate-50 p-4 rounded-xl border border-border-main grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
                 <div>
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Full Name</span>
-                  <span className="font-bold text-slate-900">{fine.memberName}</span>
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Full Name
+                  </span>
+                  <span className="font-bold text-text-main">
+                    {fine.memberName}
+                  </span>
                 </div>
                 <div>
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Phone Number</span>
-                  <span className="font-mono font-semibold text-slate-700">{fine.memberPhone || "N/A"}</span>
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Phone Number
+                  </span>
+                  <span className="font-mono font-semibold text-text-main">
+                    {fine.memberPhone || "N/A"}
+                  </span>
                 </div>
                 <div className="col-span-2">
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Email Address</span>
-                  <span className="font-mono font-semibold text-slate-700">{fine.memberEmail}</span>
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Email Address
+                  </span>
+                  <span className="font-mono font-semibold text-text-main">
+                    {fine.memberEmail}
+                  </span>
                 </div>
               </div>
             </div>
@@ -72,22 +102,34 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
             {/* Media Asset Section */}
             <div className="space-y-2">
               <h4 className="text-[11px] font-bold text-slate-400 uppercase tracking-wide flex items-center gap-1.5">
-                <BookOpen size={12} className="text-slate-700 shrink-0" /> Circulated Media Target
+                <BookOpen size={12} className="text-text-main shrink-0" />{" "}
+                Circulated Media Target
               </h4>
-              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
+              <div className="bg-slate-50 p-4 rounded-xl border border-border-main grid grid-cols-2 gap-x-4 gap-y-3 text-xs">
                 <div className="col-span-2">
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Book Title</span>
-                  <span className="font-bold text-slate-900 flex items-center gap-1.5">
-                    <BookOpen size={12} className="text-slate-400 shrink-0" /> {fine.bookTitle}
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Book Title
+                  </span>
+                  <span className="font-bold text-text-main flex items-center gap-1.5">
+                    <BookOpen size={12} className="text-slate-400 shrink-0" />{" "}
+                    {fine.bookTitle}
                   </span>
                 </div>
                 <div>
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Author</span>
-                  <span className="text-slate-700 font-semibold">{fine.bookAuthor}</span>
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Author
+                  </span>
+                  <span className="text-text-main font-semibold">
+                    {fine.bookAuthor}
+                  </span>
                 </div>
                 <div>
-                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">Checkout Trigger Date</span>
-                  <span className="font-mono font-semibold text-slate-700">{fine.borrowedDate}</span>
+                  <span className="text-slate-400 block text-[11px] uppercase font-bold tracking-wide mb-0.5">
+                    Checkout Trigger Date
+                  </span>
+                  <span className="font-mono font-semibold text-text-main">
+                    {fine.borrowedDate}
+                  </span>
                 </div>
               </div>
             </div>
@@ -95,35 +137,57 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
             {/* Penalty Calculation */}
             <div className="space-y-2">
               <h4 className="text-[11px] font-bold text-slate-400 uppercase tracking-wide flex items-center gap-1.5">
-                <DollarSign size={12} className="text-slate-700 shrink-0" /> Penalty Matrix Audit
+                <DollarSign size={12} className="text-text-main shrink-0" />{" "}
+                Penalty Matrix Audit
               </h4>
-              <div className="border border-slate-200 rounded-xl overflow-hidden shadow-xs">
+              <div className="border border-border-main rounded-xl overflow-hidden shadow-xs">
                 <table className="w-full text-left border-collapse text-xs">
                   <thead>
-                    <tr className="bg-slate-50 text-slate-400 font-bold text-[11px] uppercase border-b border-slate-200 tracking-wide">
+                    <tr className="bg-slate-50 text-slate-400 font-bold text-[11px] uppercase border-b border-border-main tracking-wide">
                       <th className="py-2.5 px-4">Clause</th>
                       <th className="py-2.5 px-4 text-center">Days</th>
                       <th className="py-2.5 px-4 text-right">Subtotal</th>
                     </tr>
                   </thead>
-                  <tbody className="divide-y divide-slate-100 font-medium text-slate-700">
+                  <tbody className="divide-y divide-slate-100 font-medium text-text-main">
                     <tr>
-                      <td className="py-3 px-4 font-semibold text-slate-700">Standard Plan Rate</td>
-                      <td className="py-3 px-4 text-center font-mono font-bold">{breakdown.withinPlanDays}d</td>
-                      <td className="py-3 px-4 text-right font-mono font-bold">₹{breakdown.withinPlanFine}.00</td>
+                      <td className="py-3 px-4 font-semibold text-text-main">
+                        Standard Plan Rate
+                      </td>
+                      <td className="py-3 px-4 text-center font-mono font-bold">
+                        {breakdown.withinPlanDays}d
+                      </td>
+                      <td className="py-3 px-4 text-right font-mono font-bold">
+                        ₹{breakdown.withinPlanFine}.00
+                      </td>
                     </tr>
                     {breakdown.outsidePlanDays > 0 && (
                       <tr className="bg-rose-50/40">
                         <td className="py-3 px-4 text-rose-700 font-bold flex items-center gap-1.5">
-                          <ShieldAlert size={12} className="text-rose-600 shrink-0" /> Out-of-Plan Climax
+                          <ShieldAlert
+                            size={12}
+                            className="text-rose-600 shrink-0"
+                          />{" "}
+                          Out-of-Plan Climax
+                        </td>
+                        <td className="py-3 px-4 text-center font-mono text-rose-700 font-bold">
+                          {breakdown.outsidePlanDays}d
+                        </td>
+                        <td className="py-3 px-4 text-right font-mono text-rose-700 font-bold">
+                          ₹{breakdown.outsidePlanFine}.00
                         </td>
-                        <td className="py-3 px-4 text-center font-mono text-rose-700 font-bold">{breakdown.outsidePlanDays}d</td>
-                        <td className="py-3 px-4 text-right font-mono text-rose-700 font-bold">₹{breakdown.outsidePlanFine}.00</td>
                       </tr>
                     )}
                     <tr className="bg-slate-900 text-white font-bold">
-                      <td colSpan={2} className="py-3.5 px-4 text-right uppercase tracking-wide text-[11px] text-slate-400">Total Owed Ledger:</td>
-                      <td className="py-3.5 px-4 text-right font-mono text-sm text-amber-400">₹{fine.fine_amount}.00</td>
+                      <td
+                        colSpan={2}
+                        className="py-3.5 px-4 text-right uppercase tracking-wide text-[11px] text-slate-400"
+                      >
+                        Total Owed Ledger:
+                      </td>
+                      <td className="py-3.5 px-4 text-right font-mono text-sm text-amber-400">
+                        ₹{fine.fine_amount}.00
+                      </td>
                     </tr>
                   </tbody>
                 </table>
@@ -132,15 +196,15 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
           </div>
 
           {/* Footer Actions */}
-          <div className="p-4 bg-slate-50 border-t border-slate-200 grid grid-cols-2 gap-3">
-            <button 
+          <div className="p-4 bg-slate-50 border-t border-border-main grid grid-cols-2 gap-3">
+            <button
               type="button"
               onClick={() => setShowDeleteConfirm(true)}
-              className="flex items-center justify-center gap-1.5 py-2.5 px-4 bg-white border border-rose-200 text-rose-600 font-bold text-xs uppercase tracking-wider rounded-xl hover:bg-rose-50 transition-all cursor-pointer shadow-xs"
+              className="flex items-center justify-center gap-1.5 py-2.5 px-4 bg-card-bg border border-rose-200 text-rose-600 font-bold text-xs uppercase tracking-wider rounded-xl hover:bg-rose-50 transition-all cursor-pointer shadow-xs"
             >
               <Trash2 size={12} /> Delete Record
             </button>
-            <button 
+            <button
               type="button"
               onClick={() => onSettle(fine)}
               className="flex items-center justify-center gap-1.5 py-2.5 px-4 bg-rose-600 hover:bg-rose-700 text-white font-bold text-xs uppercase tracking-wider rounded-xl transition-all cursor-pointer shadow-xs"
@@ -152,7 +216,7 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
       </div>
 
       {/* Confirmation Modal */}
-      <DeleteFinesModal 
+      <DeleteFinesModal
         isOpen={showDeleteConfirm}
         onClose={() => setShowDeleteConfirm(false)}
         onConfirm={() => {
@@ -165,4 +229,4 @@ export const FineDetailsModal = ({ isOpen, fine, onClose, onSettle, onDelete }:
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/components/FinesNotificationBanner.tsx b/client/src/features/fines/components/FinesNotificationBanner.tsx
index 6e2fd22..f8c273a 100644
--- a/client/src/features/fines/components/FinesNotificationBanner.tsx
+++ b/client/src/features/fines/components/FinesNotificationBanner.tsx
@@ -5,30 +5,40 @@ interface FinesBannerProps {
   totalUnpaidAmount: number;
 }
 
-export const FinesNotificationBanner = ({ totalCount, totalUnpaidAmount }: FinesBannerProps) => {
+export const FinesNotificationBanner = ({
+  totalCount,
+  totalUnpaidAmount,
+}: FinesBannerProps) => {
   if (totalCount === 0) return null;
 
   return (
     <div className="bg-linear-to-r from-amber-600 to-orange-600 p-5 rounded-2xl text-white shadow-xs flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 animate-slide-in text-left font-sans text-xs sm:text-sm">
       <div className="flex items-center gap-3.5">
-        <div className="p-2.5 bg-white/15 rounded-xl backdrop-blur-xs shrink-0 flex items-center justify-center">
+        <div className="p-2.5 bg-card-bg/15 rounded-xl backdrop-blur-xs shrink-0 flex items-center justify-center">
           <AlertCircle size={18} className="text-white" />
         </div>
         <div>
-          <h4 className="font-bold text-xs uppercase tracking-wider text-amber-50">Overdue Fines Detected</h4>
+          <h4 className="font-bold text-xs uppercase tracking-wider text-amber-50">
+            Overdue Fines Detected
+          </h4>
           <p className="text-[11px] text-amber-100 font-medium mt-0.5">
-            There are currently {totalCount} active overdue items requiring immediate attention.
+            There are currently {totalCount} active overdue items requiring
+            immediate attention.
           </p>
         </div>
       </div>
-      
+
       <div className="flex items-center gap-4 bg-black/10 px-4 py-2.5 rounded-xl border border-white/10 w-full sm:w-auto justify-between shrink-0">
         <div>
-          <span className="text-[11px] block text-amber-200 font-bold uppercase tracking-wide">Total Outstanding Balance</span>
-          <span className="text-base font-bold font-mono mt-0.5 block">₹{totalUnpaidAmount.toLocaleString()}.00</span>
+          <span className="text-[11px] block text-amber-200 font-bold uppercase tracking-wide">
+            Total Outstanding Balance
+          </span>
+          <span className="text-base font-bold font-mono mt-0.5 block">
+            ₹{totalUnpaidAmount.toLocaleString()}.00
+          </span>
         </div>
         <TrendingUp size={14} className="text-amber-200 shrink-0" />
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/components/RestoreFineModal.tsx b/client/src/features/fines/components/RestoreFineModal.tsx
index 4b11333..a843340 100644
--- a/client/src/features/fines/components/RestoreFineModal.tsx
+++ b/client/src/features/fines/components/RestoreFineModal.tsx
@@ -8,33 +8,44 @@ interface RestoreFineModalProps {
   fine: FineRecord | null;
 }
 
-export const RestoreFineModal = ({ isOpen, onClose, onConfirm, fine }: RestoreFineModalProps) => {
+export const RestoreFineModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  fine,
+}: RestoreFineModalProps) => {
   if (!isOpen || !fine) return null;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6 border border-slate-200 animate-zoom-in">
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="bg-card-bg rounded-2xl shadow-2xl w-full max-w-sm p-6 border border-border-main animate-zoom-in">
         <div className="text-center">
           <div className="w-12 h-12 bg-amber-50 rounded-full flex items-center justify-center mx-auto mb-4 border border-amber-100">
             <RotateCcw size={20} className="text-amber-600" />
           </div>
-          <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wide">Restore Fine Record</h3>
+          <h3 className="text-xs font-bold text-text-main uppercase tracking-wide">
+            Restore Fine Record
+          </h3>
           <p className="text-[11px] text-slate-500 font-medium mt-2.5 leading-relaxed">
-            Are you sure you want to revert the payment transaction for <span className="font-bold text-slate-900">"{fine.memberName}"</span>? This will shift the record back to the active overdue list.
+            Are you sure you want to revert the payment transaction for{" "}
+            <span className="font-bold text-text-main">
+              "{fine.memberName}"
+            </span>
+            ? This will shift the record back to the active overdue list.
           </p>
         </div>
-        
+
         <div className="mt-5 pt-1 flex gap-3">
-          <button 
+          <button
             type="button"
-            onClick={onClose} 
-            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-900 border border-slate-200 rounded-xl transition-colors cursor-pointer"
+            onClick={onClose}
+            className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-text-main border border-border-main rounded-xl transition-colors cursor-pointer"
           >
             Cancel
           </button>
-          <button 
+          <button
             type="button"
-            onClick={() => onConfirm(fine.fine_id)} 
+            onClick={() => onConfirm(fine.fine_id)}
             className="flex-1 py-2.5 text-xs font-bold uppercase tracking-wider bg-amber-600 hover:bg-amber-700 text-white rounded-xl shadow-xs transition-all cursor-pointer"
           >
             Restore Entry
@@ -43,4 +54,4 @@ export const RestoreFineModal = ({ isOpen, onClose, onConfirm, fine }: RestoreFi
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/components/SettleFinePaymentModal.tsx b/client/src/features/fines/components/SettleFinePaymentModal.tsx
index ef5d61a..c916e0f 100644
--- a/client/src/features/fines/components/SettleFinePaymentModal.tsx
+++ b/client/src/features/fines/components/SettleFinePaymentModal.tsx
@@ -6,36 +6,48 @@ interface SettleFinePaymentModalProps {
   isOpen: boolean;
   fine: FineRecord | null;
   onClose: () => void;
-  onConfirmSettlement: (payload: { id: string; paidDate: string; paymentMethod?: string }) => void;
+  onConfirmSettlement: (payload: {
+    id: string;
+    paidDate: string;
+    paymentMethod?: string;
+  }) => void;
 }
 
-export const SettleFinePaymentModal = ({ isOpen, fine, onClose, onConfirmSettlement }: SettleFinePaymentModalProps) => {
+export const SettleFinePaymentModal = ({
+  isOpen,
+  fine,
+  onClose,
+  onConfirmSettlement,
+}: SettleFinePaymentModalProps) => {
   const today = new Date().toISOString().split("T")[0];
   const [selectedPaidDate, setSelectedPaidDate] = useState(today);
-  const [paymentMethod, setPaymentMethod] = useState<"CASH" | "CARD" | "UPI">("CASH");
+  const [paymentMethod, setPaymentMethod] = useState<"CASH" | "CARD" | "UPI">(
+    "CASH",
+  );
 
   if (!isOpen || !fine) return null;
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedPaidDate) return;
-    onConfirmSettlement({ 
-      id: fine.fine_id, 
+    onConfirmSettlement({
+      id: fine.fine_id,
       paidDate: selectedPaidDate,
-      paymentMethod: paymentMethod 
+      paymentMethod: paymentMethod,
     });
   };
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-slate-200 animate-zoom-in">
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="bg-card-bg rounded-2xl shadow-2xl w-full max-w-md overflow-hidden border border-border-main animate-zoom-in">
         {/* Header */}
         <div className="bg-rose-600 px-6 py-5 text-white flex justify-between items-center">
-          <h3 className="text-xs font-bold uppercase tracking-wider">Process Fine Settlement</h3>
-          <button 
+          <h3 className="text-xs font-bold uppercase tracking-wider">
+            Process Fine Settlement
+          </h3>
+          <button
             type="button"
-            onClick={onClose} 
+            onClick={onClose}
             className="p-1 text-white/80 hover:text-white rounded-md transition-colors cursor-pointer"
           >
             <X size={16} />
@@ -43,16 +55,19 @@ export const SettleFinePaymentModal = ({ isOpen, fine, onClose, onConfirmSettlem
         </div>
 
         <form onSubmit={handleSubmit} className="p-6 space-y-5">
-          
           {/* Quick Informational Vector */}
-          <div className="p-4 bg-slate-50 border border-slate-200 rounded-xl space-y-2 text-xs">
+          <div className="p-4 bg-slate-50 border border-border-main rounded-xl space-y-2 text-xs">
             <div className="flex justify-between font-bold text-slate-400 uppercase text-[11px] tracking-wide">
               <span>Account Name:</span>
-              <span className="text-slate-900 font-sans font-bold normal-case tracking-normal text-xs">{fine.memberName}</span>
+              <span className="text-text-main font-sans font-bold normal-case tracking-normal text-xs">
+                {fine.memberName}
+              </span>
             </div>
             <div className="flex justify-between font-bold text-slate-400 uppercase text-[11px] tracking-wide items-center pt-1 border-t border-slate-100">
               <span>Balance Due:</span>
-              <span className="text-rose-600 font-mono font-bold text-sm">₹{fine.fine_amount}.00</span>
+              <span className="text-rose-600 font-mono font-bold text-sm">
+                ₹{fine.fine_amount}.00
+              </span>
             </div>
           </div>
 
@@ -70,7 +85,7 @@ export const SettleFinePaymentModal = ({ isOpen, fine, onClose, onConfirmSettlem
                   className={`py-2 text-xs font-bold uppercase tracking-wider border rounded-xl transition-all cursor-pointer ${
                     paymentMethod === method
                       ? "bg-slate-900 border-slate-900 text-white shadow-xs"
-                      : "bg-slate-50 border-slate-200 text-slate-500 hover:text-slate-900"
+                      : "bg-slate-50 border-border-main text-slate-500 hover:text-text-main"
                   }`}
                 >
                   {method}
@@ -91,12 +106,16 @@ export const SettleFinePaymentModal = ({ isOpen, fine, onClose, onConfirmSettlem
                 max={today}
                 value={selectedPaidDate}
                 onChange={(e) => setSelectedPaidDate(e.target.value)}
-                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-xs font-medium text-slate-900 placeholder:text-slate-400 outline-hidden focus:bg-white focus:border-slate-900 transition-all cursor-pointer font-mono"
+                className="w-full pl-9 pr-4 py-2.5 bg-slate-50 border border-border-main rounded-xl text-xs font-medium text-text-main placeholder:text-slate-400 outline-hidden focus:bg-card-bg focus:border-slate-900 transition-all cursor-pointer font-mono"
+              />
+              <Calendar
+                size={14}
+                className="text-slate-400 absolute left-3.5 top-3.5 pointer-events-none"
               />
-              <Calendar size={14} className="text-slate-400 absolute left-3.5 top-3.5 pointer-events-none" />
             </div>
             <p className="text-[11px] text-slate-400 font-medium">
-              *Backdating is permitted for missed database updates. Future dates remain locked.
+              *Backdating is permitted for missed database updates. Future dates
+              remain locked.
             </p>
           </div>
 
@@ -108,9 +127,8 @@ export const SettleFinePaymentModal = ({ isOpen, fine, onClose, onConfirmSettlem
               <CheckSquare size={14} /> Confirm Payment & Close Invoice
             </button>
           </div>
-
         </form>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/fines/pages/FinesPage.tsx b/client/src/features/fines/pages/FinesPage.tsx
index 43ca44b..1f0d86b 100644
--- a/client/src/features/fines/pages/FinesPage.tsx
+++ b/client/src/features/fines/pages/FinesPage.tsx
@@ -11,20 +11,21 @@ import { SettleFinePaymentModal } from "../components/SettleFinePaymentModal";
 import { RestoreFineModal } from "../components/RestoreFineModal";
 
 // Lucide Icons
-import { 
-  Search, 
-  Filter, 
-  ChevronLeft, 
-  ChevronRight, 
-  ShieldAlert, 
-  History, 
-  BookOpen, 
+import {
+  Search,
+  Filter,
+  ChevronLeft,
+  ChevronRight,
+  ShieldAlert,
+  History,
+  BookOpen,
   AlertCircle,
   AlertTriangle,
   RefreshCw,
   User,
   CreditCard,
-  CheckCircle2
+  CheckCircle2,
+  RotateCcw,
 } from "lucide-react";
 
 interface AxiosErrorResponse {
@@ -39,77 +40,93 @@ export const FinesPage = () => {
   const queryClient = useQueryClient();
   const [selectedFine, setSelectedFine] = useState<FineRecord | null>(null);
   const [showRestoreModal, setShowRestoreModal] = useState(false);
-  
+
   // Active View Tab Panel Layout Selector ("active" | "history")
   const [activeTab, setActiveTab] = useState<"active" | "history">("active");
 
   // Search & Metric Filter States
   const [searchQuery, setSearchQuery] = useState("");
-  const [delayIntervalFilter, setDelayIntervalFilter] = useState(""); 
+  const [delayIntervalFilter, setDelayIntervalFilter] = useState("");
 
   // Pagination Controls State
   const [currentPage, setCurrentPage] = useState(1);
   const rowsPerPage = 10;
 
   // Modals Core Management States
-  const [selectedFineForSettlement, setSelectedFineForSettlement] = useState<FineRecord | null>(null);
+  const [selectedFineForSettlement, setSelectedFineForSettlement] =
+    useState<FineRecord | null>(null);
 
   // 1. Fetch Data Stream conditionally depending on active tab view layouts
   const { data: finesFeedPayload = [], isLoading } = useQuery<FineRecord[]>({
     queryKey: ["finesMasterLedgerFeed", activeTab],
     queryFn: async () => {
-      const endpoint = activeTab === "active" ? "/fines/pending" : "/fines/collected";
+      const endpoint =
+        activeTab === "active" ? "/fines/pending" : "/fines/collected";
       const response = await axiosClient.get(endpoint);
       return response.data?.data || response.data || [];
-    }
+    },
   });
 
   const restoreFineMutation = useMutation({
-    mutationFn: async (id: string) => await axiosClient.patch(`/fines/restore/${id}`),
+    mutationFn: async (id: string) =>
+      await axiosClient.patch(`/fines/restore/${id}`),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["finesMasterLedgerFeed"] });
       setShowRestoreModal(false);
       setSelectedFine(null);
-      
+
       toast.success("Entry restored to active ledger!", {
-        description: "💡 ACTION REQUIRED: Remember to go to the 'Returned Books' page to mark this volume as unreturned if needed.",
-        duration: 6000
+        description:
+          "💡 ACTION REQUIRED: Remember to go to the 'Returned Books' page to mark this volume as unreturned if needed.",
+        duration: 6000,
       });
-    }
+    },
   });
 
   // 2. Process payment settlement transaction payload map
   const processPaymentMutation = useMutation({
-    mutationFn: async ({ id, paidDate, paymentMethod }: { id: string; paidDate: string; paymentMethod: "CASH" | "CARD" | "UPI" }) => {
+    mutationFn: async ({
+      id,
+      paidDate,
+      paymentMethod,
+    }: {
+      id: string;
+      paidDate: string;
+      paymentMethod: "CASH" | "CARD" | "UPI";
+    }) => {
       return await axiosClient.patch("/fines/pay", {
-        fine_id: id, 
+        fine_id: id,
         paidDate: paidDate,
-        paymentMethod: paymentMethod
+        paymentMethod: paymentMethod,
       });
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["finesMasterLedgerFeed"] });
       setSelectedFineForSettlement(null);
       toast.success("💸 Invoice Ledger Balanced Successfully!", {
-        description: "Transaction finalized. This record has moved safely to Collected History.",
-        duration: 4000
+        description:
+          "Transaction finalized. This record has moved safely to Collected History.",
+        duration: 4000,
       });
     },
     onError: (err: AxiosErrorResponse) => {
-      toast.error(err?.response?.data?.message || "Execution engine rejected settlement input parameters.");
-    }
+      toast.error(
+        err?.response?.data?.message ||
+          "Execution engine rejected settlement input parameters.",
+      );
+    },
   });
 
-  // 3. Invoice Target Hard/Soft Delete Mutation Node 
+  // 3. Invoice Target Hard/Soft Delete Mutation Node
   const purgeFineMutation = useMutation({
     mutationFn: async (id: string) => {
       return await axiosClient.delete(`/fines/${id}`);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["finesMasterLedgerFeed"] });
-      setSelectedFine(null); 
+      setSelectedFine(null);
       toast.info("Invoice purged from ledger.");
-    }
+    },
   });
 
   // 4. Multi-tier filtering context pipeline logic
@@ -122,23 +139,29 @@ export const FinesPage = () => {
     let passesDelayRange = true;
     if (activeTab === "active" && delayIntervalFilter) {
       if (delayIntervalFilter === "7") passesDelayRange = fine.delayed_days > 7;
-      if (delayIntervalFilter === "14") passesDelayRange = fine.delayed_days > 14;
-      if (delayIntervalFilter === "30") passesDelayRange = fine.delayed_days > 30;
+      if (delayIntervalFilter === "14")
+        passesDelayRange = fine.delayed_days > 14;
+      if (delayIntervalFilter === "30")
+        passesDelayRange = fine.delayed_days > 30;
     }
 
     return passesSearch && passesDelayRange;
   });
 
   // 5. Aggregate metrics computation logic blocks
-  const totalUnpaidInvoicesCount = activeTab === "active" ? finesFeedPayload.length : 0;
-  const aggregateAccruedSumVal = filteredFines.reduce((sum, current) => sum + (current.fine_amount || 0), 0);
+  const totalUnpaidInvoicesCount =
+    activeTab === "active" ? finesFeedPayload.length : 0;
+  const aggregateAccruedSumVal = filteredFines.reduce(
+    (sum, current) => sum + (current.fine_amount || 0),
+    0,
+  );
 
   // 6. Inline dynamic pagination offsets
   const totalItemsCount = filteredFines.length;
   const totalPagesCount = Math.ceil(totalItemsCount / rowsPerPage) || 1;
   const paginatedRowsData = filteredFines.slice(
     (currentPage - 1) * rowsPerPage,
-    currentPage * rowsPerPage
+    currentPage * rowsPerPage,
   );
 
   const handleTabChange = (tab: "active" | "history") => {
@@ -148,25 +171,35 @@ export const FinesPage = () => {
     setCurrentPage(1);
   };
 
+  const handleClearFilters = () => {
+    setSearchQuery("");
+    setDelayIntervalFilter("");
+    setCurrentPage(1);
+  };
+
   return (
-    <div className="space-y-5 animate-fade-in pb-12 text-left font-sans text-xs sm:text-sm text-slate-700">
-      
+    <div className="space-y-5 animate-fade-in pb-12 text-left font-sans text-xs sm:text-sm text-text-main">
       {/* Dynamic Header View Deck */}
-      <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div className="bg-card-bg p-5 rounded-2xl border border-border-main shadow-xs flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Fines Management Desk</h2>
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Fines Management Desk
+          </h2>
           <p className="text-xs text-slate-500 mt-0.5 font-medium">
-            Realtime data syncing. Automatic accrual rates apply dynamically at 12:00 AM nightly: Active Plans (₹10/day) | Expired Plans (₹20/day).
+            Realtime data syncing. Automatic accrual rates apply dynamically at
+            12:00 AM nightly: Active Plans (₹10/day) | Expired Plans (₹20/day).
           </p>
         </div>
 
         {/* Tab Selection Pill Elements */}
-        <div className="flex bg-slate-100 p-1 rounded-xl self-stretch sm:self-auto border border-slate-200">
+        <div className="flex bg-slate-100 p-1 rounded-xl self-stretch sm:self-auto border border-border-main">
           <button
             type="button"
             onClick={() => handleTabChange("active")}
             className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-bold uppercase tracking-wider rounded-lg transition-all cursor-pointer ${
-              activeTab === "active" ? "bg-white text-slate-900 shadow-xs" : "text-slate-500 hover:text-slate-800"
+              activeTab === "active"
+                ? "bg-card-bg text-text-main shadow-xs"
+                : "text-slate-500 hover:text-slate-800"
             }`}
           >
             <ShieldAlert size={14} /> Active Defaulters
@@ -175,7 +208,9 @@ export const FinesPage = () => {
             type="button"
             onClick={() => handleTabChange("history")}
             className={`flex items-center gap-1.5 px-3.5 py-2 text-xs font-bold uppercase tracking-wider rounded-lg transition-all cursor-pointer ${
-              activeTab === "history" ? "bg-white text-slate-900 shadow-xs" : "text-slate-500 hover:text-slate-800"
+              activeTab === "history"
+                ? "bg-card-bg text-text-main shadow-xs"
+                : "text-slate-500 hover:text-slate-800"
             }`}
           >
             <History size={14} /> Collected History
@@ -184,53 +219,89 @@ export const FinesPage = () => {
       </div>
 
       {activeTab === "active" && (
-        <FinesNotificationBanner 
-          totalCount={totalUnpaidInvoicesCount} 
-          totalUnpaidAmount={aggregateAccruedSumVal} 
+        <FinesNotificationBanner
+          totalCount={totalUnpaidInvoicesCount}
+          totalUnpaidAmount={aggregateAccruedSumVal}
         />
       )}
 
       {activeTab === "history" && (
         <div className="bg-emerald-600 p-5 rounded-2xl text-white flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shadow-xs">
           <div>
-            <div className="text-[11px] uppercase font-bold tracking-widest text-emerald-100">Total Audited Balance Collected</div>
-            <div className="text-2xl font-bold font-mono mt-0.5">₹{aggregateAccruedSumVal}.00</div>
+            <div className="text-[11px] uppercase font-bold tracking-widest text-emerald-100">
+              Total Audited Balance Collected
+            </div>
+            <div className="text-2xl font-bold font-mono mt-0.5">
+              ₹{aggregateAccruedSumVal}.00
+            </div>
           </div>
           <div>
             <span className="text-xs font-bold uppercase tracking-wider bg-emerald-500/40 px-3.5 py-1.5 rounded-xl border border-emerald-400/20 inline-flex items-center gap-1.5">
-              <CheckCircle2 size={12} /> {totalItemsCount} Settled Invoices In Archive Ledger
+              <CheckCircle2 size={12} /> {totalItemsCount} Settled Invoices In
+              Archive Ledger
             </span>
           </div>
         </div>
       )}
 
       {/* Search Filter Control Grid */}
-      <div className="bg-white p-4 rounded-2xl border border-slate-200 flex flex-col md:flex-row gap-3 items-center shadow-2xs">
+      {/* Search Filter Control Grid */}
+      <div className="bg-card-bg p-4 rounded-2xl border border-border-main flex flex-col md:flex-row gap-3 items-center shadow-2xs">
+        {/* 🔍 Left Side: Dynamic Text Search Bar */}
         <div className="relative w-full md:flex-1">
           <input
             type="text"
-            placeholder={activeTab === "active" ? "Search active balances by name or title strings..." : "Search historical collections..."}
+            placeholder={
+              activeTab === "active"
+                ? "Search active balances by name or title strings..."
+                : "Search historical collections..."
+            }
             value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium text-slate-900 placeholder:text-slate-400 outline-hidden focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-border-main rounded-xl text-xs sm:text-sm font-medium text-text-main placeholder:text-slate-400 outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all"
+          />
+          <Search
+            size={16}
+            className="text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
           />
-          <Search size={16} className="text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
         </div>
 
+        {/* 🎛️ Right Side: Filters and Reset Actions Group */}
         {activeTab === "active" && (
-          <div className="w-full md:w-64 relative">
-            <select
-              value={delayIntervalFilter}
-              onChange={(e) => { setDelayIntervalFilter(e.target.value); setCurrentPage(1); }}
-              className="w-full pl-10 pr-9 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 appearance-none outline-hidden focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+          <div className="flex gap-3 w-full md:w-auto items-center">
+            {/* 📋 Select Box Component Wrapper */}
+            <div className="w-full md:w-64 relative">
+              <select
+                value={delayIntervalFilter}
+                onChange={(e) => {
+                  setDelayIntervalFilter(e.target.value);
+                  setCurrentPage(1);
+                }}
+                className="w-full pl-10 pr-9 py-2 bg-slate-50 border border-border-main rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+              >
+                <option value="">All Overdue Invoices</option>
+                <option value="7">Critical (&gt; 7 Days)</option>
+                <option value="14">Severe (&gt; 14 Days)</option>
+                <option value="30">High Delinquency (&gt; 30 Days)</option>
+              </select>
+              <Filter
+                size={16}
+                className="text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
+              />
+              <div className="absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-600 w-0 h-0" />
+            </div>
+
+            {/* 🔄 Reset Button - Safely Positioned to the Right Side */}
+            <button
+              type="button"
+              onClick={handleClearFilters}
+              className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all animate-fade-in text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase shadow-3xs"
             >
-              <option value="">All Overdue Invoices</option>
-              <option value="7">Critical (&gt; 7 Days)</option>
-              <option value="14">Severe (&gt; 14 Days)</option>
-              <option value="30">High Delinquency (&gt; 30 Days)</option>
-            </select>
-            <Filter size={16} className="text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none" />
-            <div className="absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-600 w-0 h-0" />
+              <RotateCcw size={12} /> Reset
+            </button>
           </div>
         )}
       </div>
@@ -242,51 +313,80 @@ export const FinesPage = () => {
           Syncing Master Banking Ledger Channels...
         </div>
       ) : (
-        <div className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
+        <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
           <div className="overflow-x-auto">
             <table className="w-full text-left border-collapse">
               <thead>
-                <tr className="border-b border-slate-200 text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
-                  <th className="py-3.5 px-5"><User size={12} className="inline mr-1" />Account Holder Member</th>
-                  <th className="py-3.5 px-5"><BookOpen size={12} className="inline mr-1" />Media Asset Context</th>
-                  <th className="py-3.5 px-5 text-center">{activeTab === "active" ? "Delayed Days" : "Settled Scope"}</th>
+                <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                  <th className="py-3.5 px-5">
+                    <User size={12} className="inline mr-1" />
+                    Account Holder Member
+                  </th>
+                  <th className="py-3.5 px-5">
+                    <BookOpen size={12} className="inline mr-1" />
+                    Media Asset Context
+                  </th>
+                  <th className="py-3.5 px-5 text-center">
+                    {activeTab === "active" ? "Delayed Days" : "Settled Scope"}
+                  </th>
                   <th className="py-3.5 px-5">Accrued Amount</th>
                   <th className="py-3.5 px-5 text-center">Plan Clause</th>
                 </tr>
               </thead>
-              <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+              <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                 {paginatedRowsData.length === 0 ? (
                   <tr>
-                    <td colSpan={5} className="text-center py-16 text-slate-400 font-medium">
-                      Operational Clear View. Zero matching layout targets found.
+                    <td
+                      colSpan={5}
+                      className="text-center py-16 text-slate-400 font-medium"
+                    >
+                      Operational Clear View. Zero matching layout targets
+                      found.
                     </td>
                   </tr>
                 ) : (
                   paginatedRowsData.map((fine) => (
-                    <tr 
-                      key={fine.fine_id} 
+                    <tr
+                      key={fine.fine_id}
                       onClick={() => setSelectedFine(fine)}
                       className="hover:bg-slate-50/80 transition-colors cursor-pointer select-none"
                     >
                       <td className="py-3.5 px-5">
-                        <div className="font-bold text-slate-900">{fine.memberName}</div>
-                        <div className="text-xs font-mono text-slate-400 mt-0.5">{fine.memberEmail}</div>
+                        <div className="font-bold text-text-main">
+                          {fine.memberName}
+                        </div>
+                        <div className="text-xs font-mono text-slate-400 mt-0.5">
+                          {fine.memberEmail}
+                        </div>
                       </td>
                       <td className="py-3.5 px-5 font-medium">
                         <div className="flex items-center gap-1.5 text-slate-800">
-                          <BookOpen size={12} className="text-slate-400 shrink-0" />
+                          <BookOpen
+                            size={12}
+                            className="text-slate-400 shrink-0"
+                          />
                           <span>{fine.bookTitle}</span>
                         </div>
-                        <span className="block text-xs font-mono text-slate-400 pl-4.5 mt-0.5">Due Date: {fine.actualReturnDueDate || fine.actualReturnDate || "N/A"}</span>
+                        <span className="block text-xs font-mono text-slate-400 pl-4.5 mt-0.5">
+                          Due Date:{" "}
+                          {fine.actualReturnDueDate ||
+                            fine.actualReturnDate ||
+                            "N/A"}
+                        </span>
                       </td>
                       <td className="py-3.5 px-5 text-center font-bold">
                         {activeTab === "active" ? (
-                          <span className="text-amber-800 bg-amber-50 border border-amber-100 px-2 py-0.5 rounded-md font-bold text-xs font-mono">{fine.delayed_days} Days Overdue</span>
+                          <span className="text-amber-800 bg-amber-50 border border-amber-100 px-2 py-0.5 rounded-md font-bold text-xs font-mono">
+                            {fine.delayed_days} Days Overdue
+                          </span>
                         ) : (
-                          <span className="text-emerald-700 text-xs font-bold bg-emerald-50 px-2 py-0.5 rounded-md uppercase tracking-wide border border-emerald-100 font-mono">Paid ({fine.paidDate || fine.paid_date || "Settled"})</span>
+                          <span className="text-emerald-700 text-xs font-bold bg-emerald-50 px-2 py-0.5 rounded-md uppercase tracking-wide border border-emerald-100 font-mono">
+                            Paid ({fine.paidDate || fine.paid_date || "Settled"}
+                            )
+                          </span>
                         )}
                       </td>
-                      <td className="py-3.5 px-5 font-mono font-bold text-slate-900 text-xs sm:text-sm">
+                      <td className="py-3.5 px-5 font-mono font-bold text-text-main text-xs sm:text-sm">
                         ₹{fine.fine_amount}.00
                         {fine.paymentMethod && (
                           <span className="text-xs text-slate-400 uppercase font-sans font-bold tracking-wider mt-0.5 flex items-center gap-1">
@@ -295,12 +395,16 @@ export const FinesPage = () => {
                         )}
                       </td>
                       <td className="py-3.5 px-5 text-center">
-                        <span className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border ${
-                          fine.membershipActive 
-                            ? "bg-emerald-50 text-emerald-700 border-emerald-100" 
-                            : "bg-rose-50 text-rose-700 border-rose-100"
-                        }`}>
-                          {fine.membershipActive ? "Active Plan" : "Plan Expired"}
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border ${
+                            fine.membershipActive
+                              ? "bg-emerald-50 text-emerald-700 border-emerald-100"
+                              : "bg-rose-50 text-rose-700 border-rose-100"
+                          }`}
+                        >
+                          {fine.membershipActive
+                            ? "Active Plan"
+                            : "Plan Expired"}
                         </span>
                       </td>
                     </tr>
@@ -311,24 +415,32 @@ export const FinesPage = () => {
           </div>
 
           {/* Pagination Command Module */}
-          <div className="px-5 py-3 bg-slate-50 border-t border-slate-200 flex justify-between items-center text-xs font-medium text-slate-500">
-             <span>
-                  Page {currentPage} / {totalPagesCount} <span className="text-slate-300 mx-2">|</span> Total {totalItemsCount} Fines
-                </span>
+          <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+            <span>
+              Page {currentPage} / {totalPagesCount}{" "}
+              <span className="text-slate-300 mx-2">|</span> Total{" "}
+              {totalItemsCount} Fines
+            </span>
             <div className="flex gap-1">
               <button
                 type="button"
                 disabled={currentPage === 1}
-                onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => p - 1); }}
-                className="p-1.5 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shadow-2xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentPage((p) => p - 1);
+                }}
+                className="p-1.5 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shadow-2xs"
               >
                 <ChevronLeft size={14} />
               </button>
               <button
                 type="button"
                 disabled={currentPage === totalPagesCount}
-                onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => p + 1); }}
-                className="p-1.5 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shadow-2xs"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setCurrentPage((p) => p + 1);
+                }}
+                className="p-1.5 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-40 disabled:cursor-not-allowed cursor-pointer transition-colors shadow-2xs"
               >
                 <ChevronRight size={14} />
               </button>
@@ -343,9 +455,12 @@ export const FinesPage = () => {
           isOpen={!!selectedFine}
           fine={selectedFine}
           onClose={() => setSelectedFine(null)}
-          onSettle={(fine) => { setSelectedFine(null); setSelectedFineForSettlement(fine); }}
-          onDelete={(id) => { 
-              purgeFineMutation.mutate(id)
+          onSettle={(fine) => {
+            setSelectedFine(null);
+            setSelectedFineForSettlement(fine);
+          }}
+          onDelete={(id) => {
+            purgeFineMutation.mutate(id);
           }}
         />
       )}
@@ -353,38 +468,47 @@ export const FinesPage = () => {
       {/* History View Logic - Updated Modal Implementation with Explicit Reminder Notice */}
       {activeTab === "history" && selectedFine && (
         <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 animate-fade-in text-left">
-          <div className="bg-white p-5 rounded-2xl w-full max-w-md shadow-xl border border-slate-200 animate-zoom-in">
-            <h3 className="text-base font-bold text-slate-900 tracking-tight flex items-center gap-2">
-              <AlertCircle size={18} className="text-amber-600 shrink-0" /> Restoration Warning
+          <div className="bg-card-bg p-5 rounded-2xl w-full max-w-md shadow-xl border border-border-main animate-zoom-in">
+            <h3 className="text-base font-bold text-text-main tracking-tight flex items-center gap-2">
+              <AlertCircle size={18} className="text-amber-600 shrink-0" />{" "}
+              Restoration Warning
             </h3>
-            <p className="text-xs font-mono text-slate-500 mt-0.5 mb-3.5 font-bold uppercase tracking-wider">{selectedFine.memberName}</p>
-            
+            <p className="text-xs font-mono text-slate-500 mt-0.5 mb-3.5 font-bold uppercase tracking-wider">
+              {selectedFine.memberName}
+            </p>
+
             {/* ENHANCED EXPLICIT INLINE INSTRUCTION REMINDER BOX FOR LIBRARIANS */}
             <div className="p-3.5 bg-amber-50 rounded-xl border border-amber-200 text-xs sm:text-sm space-y-1.5 leading-relaxed">
               <p className="font-bold uppercase tracking-wider text-[11px] flex items-center gap-1.5 text-amber-800">
                 <AlertTriangle size={12} /> Operational Reminder
               </p>
-              <p className="text-slate-700">
-                Restoring this fine resets it to unpaid status. This balance tracker is bound to a closed book loan.
+              <p className="text-text-main">
+                Restoring this fine resets it to unpaid status. This balance
+                tracker is bound to a closed book loan.
               </p>
               <p className="font-semibold text-amber-950">
-                Please visit the <span className="underline decoration-amber-600/40 font-bold">Returned Books</span> panel afterwards to manually click "Undo Return" if the physical asset is still out of the building.
+                Please visit the{" "}
+                <span className="underline decoration-amber-600/40 font-bold">
+                  Returned Books
+                </span>{" "}
+                panel afterwards to manually click "Undo Return" if the physical
+                asset is still out of the building.
               </p>
             </div>
 
             <div className="flex gap-2.5 mt-5 pt-3.5 border-t border-slate-100">
-              <button 
+              <button
                 type="button"
-                onClick={() => setSelectedFine(null)} 
+                onClick={() => setSelectedFine(null)}
                 className="flex-1 py-2 text-xs sm:text-sm font-bold bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl transition-colors cursor-pointer"
               >
                 Cancel
               </button>
-              <button 
+              <button
                 type="button"
                 onClick={() => {
                   setShowRestoreModal(true);
-                }} 
+                }}
                 className="flex-1 py-2 text-xs sm:text-sm font-bold bg-amber-600 hover:bg-amber-700 text-white rounded-xl shadow-xs transition-all cursor-pointer"
               >
                 Confirm Desk
@@ -394,7 +518,7 @@ export const FinesPage = () => {
         </div>
       )}
 
-      <RestoreFineModal 
+      <RestoreFineModal
         isOpen={showRestoreModal}
         fine={selectedFine}
         onClose={() => setShowRestoreModal(false)}
@@ -405,19 +529,23 @@ export const FinesPage = () => {
         isOpen={!!selectedFineForSettlement}
         fine={selectedFineForSettlement}
         onClose={() => setSelectedFineForSettlement(null)}
-        onConfirmSettlement={(payload: { id: string; paidDate: string; paymentMethod?: string }) => {
-          const resolvedMethod = (payload.paymentMethod === "CARD" || payload.paymentMethod === "UPI") 
-            ? payload.paymentMethod 
-            : "CASH";
-
-          processPaymentMutation.mutate({ 
-            id: payload.id, 
-            paidDate: payload.paidDate, 
-            paymentMethod: resolvedMethod
+        onConfirmSettlement={(payload: {
+          id: string;
+          paidDate: string;
+          paymentMethod?: string;
+        }) => {
+          const resolvedMethod =
+            payload.paymentMethod === "CARD" || payload.paymentMethod === "UPI"
+              ? payload.paymentMethod
+              : "CASH";
+
+          processPaymentMutation.mutate({
+            id: payload.id,
+            paidDate: payload.paidDate,
+            paymentMethod: resolvedMethod,
           });
         }}
       />
-
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/issues/components/DeleteTransactionModal.tsx b/client/src/features/issues/components/DeleteTransactionModal.tsx
index 13dfa45..1a413a6 100644
--- a/client/src/features/issues/components/DeleteTransactionModal.tsx
+++ b/client/src/features/issues/components/DeleteTransactionModal.tsx
@@ -8,26 +8,37 @@ interface DeleteModalProps {
   titleDetails?: string;
 }
 
-export const DeleteTransactionModal = ({ isOpen, onClose, onConfirm, mode, titleDetails }: DeleteModalProps) => {
+export const DeleteTransactionModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  mode,
+  titleDetails,
+}: DeleteModalProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden border border-slate-200 animate-zoom-in">
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm overflow-hidden border border-border-main animate-zoom-in">
         {/* Warning Indicator Context Accent Strip */}
         <div className="bg-rose-50 px-5 py-4 border-b border-rose-100 flex items-center justify-between">
           <div className="flex items-center gap-2.5">
             <div className="p-1.5 bg-rose-100 rounded-lg text-rose-600">
-              {mode === "SINGLE" ? <AlertOctagon size={16} /> : <Trash2 size={16} />}
+              {mode === "SINGLE" ? (
+                <AlertOctagon size={16} />
+              ) : (
+                <Trash2 size={16} />
+              )}
             </div>
             <div>
-              <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wide">
-                {mode === "SINGLE" ? "Purge Circulation Record" : "Purge Completed History"}
+              <h3 className="text-xs font-bold text-text-main uppercase tracking-wide">
+                {mode === "SINGLE"
+                  ? "Purge Circulation Record"
+                  : "Purge Completed History"}
               </h3>
             </div>
           </div>
-          <button 
+          <button
             type="button"
             onClick={onClose}
             className="text-slate-400 hover:text-slate-600 p-1 rounded-lg transition-colors cursor-pointer"
@@ -41,7 +52,13 @@ export const DeleteTransactionModal = ({ isOpen, onClose, onConfirm, mode, title
           <p className="text-xs text-slate-500 font-medium leading-relaxed">
             {mode === "SINGLE" ? (
               <>
-                Are you sure you want to delete this <span className="font-bold text-slate-900">issue_book</span> data file for <span className="font-bold text-slate-900">"{titleDetails}"</span>?
+                Are you sure you want to delete this{" "}
+                <span className="font-bold text-text-main">issue_book</span>{" "}
+                data file for{" "}
+                <span className="font-bold text-text-main">
+                  "{titleDetails}"
+                </span>
+                ?
               </>
             ) : (
               "Are you sure you want to permanently delete all circulation entries with a RETURNED status from the system registry?"
@@ -49,29 +66,29 @@ export const DeleteTransactionModal = ({ isOpen, onClose, onConfirm, mode, title
           </p>
 
           <div className="text-[11px] bg-amber-50 border border-amber-200 text-amber-800 p-3 rounded-xl font-medium leading-normal">
-            ⚠️ Warning: This administrative destruction execution cannot be undone. System database records will alter instantly.
+            ⚠️ Warning: This administrative destruction execution cannot be
+            undone. System database records will alter instantly.
           </div>
         </div>
 
         {/* Control Desk Actions Footer */}
-        <div className="px-5 py-3.5 bg-slate-50 border-t border-slate-200 flex justify-end gap-2">
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 cursor-pointer transition-colors"
+        <div className="px-5 py-3.5 bg-slate-50 border-t border-border-main flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main cursor-pointer transition-colors"
           >
             Abort
           </button>
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-white bg-rose-600 hover:bg-rose-700 shadow-xs rounded-xl transition-all cursor-pointer"
           >
             Confirm Deletion
           </button>
         </div>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/issues/components/IssueDetailsModal.tsx b/client/src/features/issues/components/IssueDetailsModal.tsx
index 418cc2c..e83e8ed 100644
--- a/client/src/features/issues/components/IssueDetailsModal.tsx
+++ b/client/src/features/issues/components/IssueDetailsModal.tsx
@@ -5,7 +5,17 @@ import type { BookIssueRecord } from "../../../types/transactions";
 import { useNavigate } from "react-router-dom"; // For redirecting to payments
 
 // Lucide Icons for the professional popup layout
-import { ShieldAlert, AlertTriangle, ArrowRight, X, User, BookOpen, Calendar, Edit2, CheckCircle2 } from "lucide-react";
+import {
+  ShieldAlert,
+  AlertTriangle,
+  ArrowRight,
+  X,
+  User,
+  BookOpen,
+  Calendar,
+  Edit2,
+  CheckCircle2,
+} from "lucide-react";
 
 interface IssueDetailsModalProps {
   isOpen: boolean;
@@ -15,9 +25,15 @@ interface IssueDetailsModalProps {
   onTriggerEdit: () => void;
 }
 
-export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, onTriggerEdit }: IssueDetailsModalProps) => {
+export const IssueDetailsModal = ({
+  isOpen,
+  onClose,
+  record,
+  onMarkAsReturned,
+  onTriggerEdit,
+}: IssueDetailsModalProps) => {
   const navigate = useNavigate();
-  
+
   // 🟢 State control for our new embedded warning modal layout
   const [showFineBlockModal, setShowFineBlockModal] = useState(false);
 
@@ -26,7 +42,9 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
     queryKey: ["memberHistoricalReturnsCount", record?.memberId],
     queryFn: async () => {
       if (!record?.memberId) return null;
-      const res = await axiosClient.get(`/issues/member-stats/${record.memberId}`);
+      const res = await axiosClient.get(
+        `/issues/member-stats/${record.memberId}`,
+      );
       return res.data?.data || res.data;
     },
     enabled: !!record?.memberId && isOpen,
@@ -35,15 +53,17 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
   if (!isOpen || !record) return null;
 
   // ✨ Feature: Safely parse and isolate the last 4 characters of the transaction UUID
-  const formattedIssueId = record.id && record.id.length >= 4 
-    ? `ISSUE-${record.id.slice(-4).toUpperCase()}`
-    : `ISSUE-${record.id}`;
+  const formattedIssueId =
+    record.id && record.id.length >= 4
+      ? `ISSUE-${record.id.slice(-4).toUpperCase()}`
+      : `ISSUE-${record.id}`;
 
   // 🟢 Intercept Return Action to validate financial status
   const handleReturnClick = () => {
     // Check if there is an active outstanding fine on this specific record
-    const hasUnpaidFine = record.fineAmount && record.fineAmount > 0 && !record.finePaidStatus;
-    
+    const hasUnpaidFine =
+      record.fineAmount && record.fineAmount > 0 && !record.finePaidStatus;
+
     if (hasUnpaidFine) {
       // Catch the restriction instantly and display the professional layout block modal
       setShowFineBlockModal(true);
@@ -56,19 +76,22 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
   return (
     <>
       {/* Primary Issue Details Window Desk Layer */}
-      <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left">
-        <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-slate-light/10 animate-zoom-in">
-          
+      <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left">
+        <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-slate-light/10 animate-zoom-in">
           {/* Header Block Panel */}
           <div className="bg-slate-900 p-5 text-white flex justify-between items-center border-b border-slate-light/10">
             <div>
-              <h2 className="text-xl font-bold text-white tracking-tight mt-0.5">Issue Details</h2>
-              <span className="text-[11px] bg-white/10  text-slate-400 font-mono font-bold py-0.5 rounded-md tracking-wide uppercase">{formattedIssueId}</span>
+              <h2 className="text-xl font-bold text-white tracking-tight mt-0.5">
+                Issue Details
+              </h2>
+              <span className="text-[11px] bg-card-bg/10  text-slate-400 font-mono font-bold py-0.5 rounded-md tracking-wide uppercase">
+                {formattedIssueId}
+              </span>
             </div>
             <div className="flex items-center gap-3">
-              <button 
-                onClick={onClose} 
-                className="p-1.5 hover:bg-white/10 text-slate-400 hover:text-white rounded-xl transition-all cursor-pointer"
+              <button
+                onClick={onClose}
+                className="p-1.5 hover:bg-card-bg/10 text-slate-400 hover:text-white rounded-xl transition-all cursor-pointer"
               >
                 <X size={15} />
               </button>
@@ -77,20 +100,30 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
 
           <div className="p-5 space-y-4">
             {/* Member Meta Information Sub-Card */}
-            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-1.5">
+            <div className="bg-slate-50 p-4 rounded-xl border border-border-main space-y-1.5">
               <div className="flex items-center gap-1.5 mb-1">
                 <User size={14} className="text-slate-400" />
-                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Profile Account Context</span>
+                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">
+                  Profile Account Context
+                </span>
+              </div>
+              <div className="text-sm font-bold text-text-main">
+                {record.memberName}
+              </div>
+              <div className="text-xs text-slate-500 font-medium">
+                ✉️ {record.memberEmail || "No Email Provided"}
               </div>
-              <div className="text-sm font-bold text-slate-900">{record.memberName}</div>
-              <div className="text-xs text-slate-500 font-medium">✉️ {record.memberEmail || "No Email Provided"}</div>
-              <div className="text-xs text-slate-500 font-medium">📞 {record.memberPhone || "No Phone Contact Registered"}</div>
-              
-              <div className="pt-2.5 mt-2 border-t border-slate-200 flex items-center gap-1.5">
-                <span className="text-xs font-medium text-slate-700">
+              <div className="text-xs text-slate-500 font-medium">
+                📞 {record.memberPhone || "No Phone Contact Registered"}
+              </div>
+
+              <div className="pt-2.5 mt-2 border-t border-border-main flex items-center gap-1.5">
+                <span className="text-xs font-medium text-text-main">
                   Active Resource Holdings:{" "}
                   {isLoadingStats ? (
-                    <span className="text-[11px] text-slate-400 animate-pulse font-bold tracking-wider uppercase">Calculating...</span>
+                    <span className="text-[11px] text-slate-400 animate-pulse font-bold tracking-wider uppercase">
+                      Calculating...
+                    </span>
                   ) : (
                     <span className="text-[11px] font-bold text-amber-800 bg-amber-50 border border-amber-200 px-2 py-0.5 rounded-full uppercase tracking-wide">
                       {memberStats?.currentBorrows ?? 0} books outstanding
@@ -104,27 +137,41 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
             <div className="space-y-1 pl-1">
               <div className="flex items-center gap-1.5">
                 <BookOpen size={14} className="text-slate-400" />
-                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">Checked Inventory Volume</span>
+                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block">
+                  Checked Inventory Volume
+                </span>
+              </div>
+              <div className="text-sm font-bold text-text-main">
+                📖 {record.bookTitle}
+              </div>
+              <div className="text-xs text-slate-500 font-medium pl-5">
+                Catalog Author: {record.bookAuthor || "Unknown Reference"}
               </div>
-              <div className="text-sm font-bold text-slate-900">📖 {record.bookTitle}</div>
-              <div className="text-xs text-slate-500 font-medium pl-5">Catalog Author: {record.bookAuthor || "Unknown Reference"}</div>
             </div>
 
             {/* Timeline Parameters Matrix */}
-            <div className="grid grid-cols-2 gap-4 border-t border-b border-slate-200 py-3 font-mono text-xs bg-slate-50/50 px-2 rounded-xl">
+            <div className="grid grid-cols-2 gap-4 border-t border-b border-border-main py-3 font-mono text-xs bg-slate-50/50 px-2 rounded-xl">
               <div>
                 <div className="flex items-center gap-1 mb-1">
                   <Calendar size={13} className="text-slate-400" />
-                  <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide">Checkout Signature</span>
+                  <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide">
+                    Checkout Signature
+                  </span>
+                </div>
+                <div className="text-slate-800 font-bold pl-4">
+                  {record.borrowedDate}
                 </div>
-                <div className="text-slate-800 font-bold pl-4">{record.borrowedDate}</div>
               </div>
               <div>
                 <div className="flex items-center gap-1 mb-1">
                   <Calendar size={13} className="text-slate-800" />
-                  <span className="text-[11px] font-bold text-slate-800 uppercase block font-sans tracking-wide">Target Return Due</span>
+                  <span className="text-[11px] font-bold text-slate-800 uppercase block font-sans tracking-wide">
+                    Target Return Due
+                  </span>
+                </div>
+                <div className="text-text-main font-bold pl-4">
+                  {record.dueDate}
                 </div>
-                <div className="text-slate-900 font-bold pl-4">{record.dueDate}</div>
               </div>
             </div>
 
@@ -133,15 +180,15 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
               <button
                 type="button"
                 onClick={onTriggerEdit}
-                className="flex items-center gap-1.5 px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-slate-700 bg-slate-50 hover:bg-slate-100 rounded-xl border border-slate-200 transition-all cursor-pointer"
+                className="flex items-center gap-1.5 px-3.5 py-2 text-xs font-bold uppercase tracking-wider text-text-main bg-slate-50 hover:bg-slate-100 rounded-xl border border-border-main transition-all cursor-pointer"
               >
                 <Edit2 size={12} /> Edit
               </button>
               <div className="flex gap-2 items-center">
-                <button 
-                  type="button" 
-                  onClick={onClose} 
-                  className="px-3 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 cursor-pointer transition-colors"
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-3 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main cursor-pointer transition-colors"
                 >
                   Cancel
                 </button>
@@ -155,22 +202,22 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
               </div>
             </div>
           </div>
-
         </div>
       </div>
 
       {/* 🟢 NEW SECONDARY PORTAL LAYER: Professional Unpaid Fine Blocking Warning Pop-Up */}
       {showFineBlockModal && (
         <div className="fixed inset-0 z-55 flex items-center justify-center bg-slate-900/50 backdrop-blur-xs p-4 text-left">
-          <div className="bg-white w-full max-w-md rounded-2xl border border-rose-100 shadow-2xl overflow-hidden animate-zoom-in">
-            
+          <div className="bg-card-bg w-full max-w-md rounded-2xl border border-rose-100 shadow-2xl overflow-hidden animate-zoom-in">
             {/* Warning Header block matches standard system alerts */}
             <div className="bg-rose-50 px-6 py-5 border-b border-rose-100 flex items-start gap-3.5">
               <div className="p-2 bg-rose-100 rounded-xl text-rose-600 shrink-0">
                 <ShieldAlert className="w-5 h-5" />
               </div>
               <div>
-                <h3 className="text-base font-bold text-slate-900">Return Blocked: Pending Balance</h3>
+                <h3 className="text-base font-bold text-text-main">
+                  Return Blocked: Pending Balance
+                </h3>
                 <p className="text-[11px] text-rose-700 font-bold mt-0.5 uppercase tracking-wide">
                   Financial Validation Exception Bound
                 </p>
@@ -178,43 +225,55 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
             </div>
 
             {/* Warning Body Parameters */}
-            <div className="p-6 space-y-4 text-xs leading-relaxed text-slate-700 font-medium">
+            <div className="p-6 space-y-4 text-xs leading-relaxed text-text-main font-medium">
               <p className="text-slate-500">
-                The library core system cannot authorize this inventory shelf check-in sequence because an unpaid fine liability matches this active operation.
+                The library core system cannot authorize this inventory shelf
+                check-in sequence because an unpaid fine liability matches this
+                active operation.
               </p>
 
               {/* Data Summary Box */}
-              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 space-y-2">
+              <div className="bg-slate-50 border border-border-main rounded-xl p-4 space-y-2">
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">Account Holder:</span>
-                  <span className="font-bold text-slate-900">{record.memberName}</span>
+                  <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">
+                    Account Holder:
+                  </span>
+                  <span className="font-bold text-text-main">
+                    {record.memberName}
+                  </span>
                 </div>
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">Asset Volume:</span>
-                  <span className="font-bold text-slate-900 max-w-48 truncate">{record.bookTitle}</span>
+                  <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">
+                    Asset Volume:
+                  </span>
+                  <span className="font-bold text-text-main max-w-48 truncate">
+                    {record.bookTitle}
+                  </span>
                 </div>
                 <div className="h-px bg-slate-200 my-1.5" />
                 <div className="flex justify-between items-center pt-0.5">
                   <span className="text-rose-700 font-bold uppercase text-[11px] tracking-wide flex items-center gap-1">
                     <AlertTriangle className="w-3.5 h-3.5" /> Overdue Debt:
                   </span>
-                  <span className="text-base font-bold font-mono text-slate-900">
+                  <span className="text-base font-bold font-mono text-text-main">
                     ₹{record.fineAmount}.00
                   </span>
                 </div>
               </div>
 
-              <p className="text-[11px] text-slate-500 italic bg-slate-50 p-3 rounded-xl border border-slate-200 leading-normal">
-                Policy Rule: Outstanding debt liabilities must clear through the cash registration counter desk before restoring book items back into system catalog slots.
+              <p className="text-[11px] text-slate-500 italic bg-slate-50 p-3 rounded-xl border border-border-main leading-normal">
+                Policy Rule: Outstanding debt liabilities must clear through the
+                cash registration counter desk before restoring book items back
+                into system catalog slots.
               </p>
             </div>
 
             {/* Footer Control Panel */}
-            <div className="px-6 py-4 bg-slate-50 border-t border-slate-200 flex gap-2 justify-end">
+            <div className="px-6 py-4 bg-slate-50 border-t border-border-main flex gap-2 justify-end">
               <button
                 type="button"
                 onClick={() => setShowFineBlockModal(false)}
-                className="px-4 py-2 bg-white text-slate-500 border border-slate-200 hover:text-slate-900 font-bold text-xs uppercase tracking-wider rounded-xl transition-all cursor-pointer"
+                className="px-4 py-2 bg-card-bg text-slate-500 border border-border-main hover:text-text-main font-bold text-xs uppercase tracking-wider rounded-xl transition-all cursor-pointer"
               >
                 Dismiss Alert
               </button>
@@ -230,10 +289,9 @@ export const IssueDetailsModal = ({ isOpen, onClose, record, onMarkAsReturned, o
                 Collect Fine Counter <ArrowRight className="w-3 h-3" />
               </button>
             </div>
-
           </div>
         </div>
       )}
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/issues/components/TransactionModal.tsx b/client/src/features/issues/components/TransactionModal.tsx
index e0a60ef..bf35a7d 100644
--- a/client/src/features/issues/components/TransactionModal.tsx
+++ b/client/src/features/issues/components/TransactionModal.tsx
@@ -12,7 +12,13 @@ interface ExtendedBookIssueRecord extends BookIssueRecord {
 }
 
 interface SearchCompliance {
-  status: "GOOD" | "EXPIRED" | "LIMIT_EXCEEDED" | "WARNING_LAST_SLOT" | "AVAILABLE" | "OUT_OF_STOCK";
+  status:
+    | "GOOD"
+    | "EXPIRED"
+    | "LIMIT_EXCEEDED"
+    | "WARNING_LAST_SLOT"
+    | "AVAILABLE"
+    | "OUT_OF_STOCK";
   message: string;
   isBlocked: boolean;
 }
@@ -49,11 +55,21 @@ interface LocalBorrowMetrics {
 interface TransactionModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (payload: { memberId: string; bookId: string; borrowDate: string; dueDate: string }) => void;
+  onSubmit: (payload: {
+    memberId: string;
+    bookId: string;
+    borrowDate: string;
+    dueDate: string;
+  }) => void;
   editingRecord?: ExtendedBookIssueRecord | null;
 }
 
-export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: TransactionModalProps) => {
+export const TransactionModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  editingRecord,
+}: TransactionModalProps) => {
   const getTodayString = () => new Date().toISOString().split("T")[0];
   const getTomorrowString = () => {
     const tomorrow = new Date();
@@ -68,10 +84,14 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
   };
 
   // ✨ Structural fallback for edit sessions
-  const fixedRecordExpiry = editingRecord ? (editingRecord.membershipExpiryDate || editingRecord.expiryDate || "") : "";
+  const fixedRecordExpiry = editingRecord
+    ? editingRecord.membershipExpiryDate || editingRecord.expiryDate || ""
+    : "";
 
   // ✨ Initial State Configuration
-  const [memberSearch, setMemberSearch] = useState(editingRecord ? editingRecord.memberName : "");
+  const [memberSearch, setMemberSearch] = useState(
+    editingRecord ? editingRecord.memberName : "",
+  );
   const [selectedMember, setSelectedMember] = useState<MemberSearchItem | null>(
     editingRecord
       ? {
@@ -83,13 +103,15 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
           plan_name: "Active Loan Lifecycle",
           maxAllowed: 20,
           currentBorrows: 0,
-          compliance: { status: "GOOD", message: "", isBlocked: false }
+          compliance: { status: "GOOD", message: "", isBlocked: false },
         }
-      : null
+      : null,
   );
   const [showMemberDropdown, setShowMemberDropdown] = useState(false);
 
-  const [bookSearch, setBookSearch] = useState(editingRecord ? editingRecord.bookTitle : "");
+  const [bookSearch, setBookSearch] = useState(
+    editingRecord ? editingRecord.bookTitle : "",
+  );
   const [selectedBook, setSelectedBook] = useState<BookSearchItem | null>(
     editingRecord
       ? {
@@ -97,13 +119,15 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
           title: editingRecord.bookTitle,
           author: editingRecord.bookAuthor || "",
           available_copies: 1,
-          compliance: { status: "AVAILABLE", message: "", isBlocked: false }
+          compliance: { status: "AVAILABLE", message: "", isBlocked: false },
         }
-      : null
+      : null,
   );
   const [showBookDropdown, setShowBookDropdown] = useState(false);
 
-  const [dueDate, setDueDate] = useState(editingRecord ? editingRecord.dueDate : "");
+  const [dueDate, setDueDate] = useState(
+    editingRecord ? editingRecord.dueDate : "",
+  );
   const [borrowMetrics, setBorrowMetrics] = useState<LocalBorrowMetrics>({
     currentBorrows: 0,
     maxAllowed: 20,
@@ -116,17 +140,24 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
   // ✨ Async Network Lifecycle Synchronization
   useEffect(() => {
     if (selectedMember && isOpen) {
-      axiosClient.get(`/issues/member-allowance/${selectedMember.member_id}`)
+      axiosClient
+        .get(`/issues/member-allowance/${selectedMember.member_id}`)
         .then((res) => {
           const metrics = res.data?.data || res.data;
-          
+
           // Fallback parsing priority order for custom API schemas
-          const dynamicExpiry = metrics.expiryDate || metrics.membershipExpiryDate || selectedMember.expiry_date || fixedRecordExpiry;
+          const dynamicExpiry =
+            metrics.expiryDate ||
+            metrics.membershipExpiryDate ||
+            selectedMember.expiry_date ||
+            fixedRecordExpiry;
 
           setBorrowMetrics({
             currentBorrows: metrics.currentBorrows || 0,
             maxAllowed: metrics.maxAllowed || 20,
-            isExpired: selectedMember.membership_status === "EXPIRED" || selectedMember.compliance?.status === "EXPIRED",
+            isExpired:
+              selectedMember.membership_status === "EXPIRED" ||
+              selectedMember.compliance?.status === "EXPIRED",
             expiryDate: dynamicExpiry,
             complianceStatus: selectedMember.compliance?.status || "GOOD",
             complianceMessage: selectedMember.compliance?.message || "",
@@ -134,9 +165,9 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
         })
         .catch(() => {
           // Keep the baseline structural record expiration values safe even if server fails
-          setBorrowMetrics(prev => ({ 
-            ...prev, 
-            expiryDate: fixedRecordExpiry 
+          setBorrowMetrics((prev) => ({
+            ...prev,
+            expiryDate: fixedRecordExpiry,
           }));
         });
     }
@@ -166,26 +197,37 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
   if (!isOpen) return null;
 
   const hasMemberText = memberSearch.trim().length > 0;
-  const isSelectedMemberMatchingInput = selectedMember && selectedMember.name === memberSearch;
-  
+  const isSelectedMemberMatchingInput =
+    selectedMember && selectedMember.name === memberSearch;
+
   // Ensure info card stays loaded instantly on edit parameters
-  const showMemberInfoCard = !!editingRecord || (hasMemberText && isSelectedMemberMatchingInput);
+  const showMemberInfoCard =
+    !!editingRecord || (hasMemberText && isSelectedMemberMatchingInput);
+
+  const reachedPlanCap =
+    borrowMetrics.currentBorrows >= borrowMetrics.maxAllowed ||
+    borrowMetrics.complianceStatus === "LIMIT_EXCEEDED";
 
-  const reachedPlanCap = borrowMetrics.currentBorrows >= borrowMetrics.maxAllowed || borrowMetrics.complianceStatus === "LIMIT_EXCEEDED";
-  
   // 🔒 Fixed Absolute Calendaring System
   const cleanDueDate = formatToISODate(dueDate);
   const maxAllowedDate = formatToISODate(borrowMetrics.expiryDate);
-  const minAllowedDate = editingRecord ? formatToISODate(editingRecord.borrowedDate) : getTomorrowString();
+  const minAllowedDate = editingRecord
+    ? formatToISODate(editingRecord.borrowedDate)
+    : getTomorrowString();
 
-  const isDateRangeInvalid = !!(maxAllowedDate && cleanDueDate > maxAllowedDate) || (cleanDueDate < minAllowedDate);
+  const isDateRangeInvalid =
+    !!(maxAllowedDate && cleanDueDate > maxAllowedDate) ||
+    cleanDueDate < minAllowedDate;
 
-  const isSubmissionBlocked = 
-    !selectedMember || 
-    !selectedBook || 
+  const isSubmissionBlocked =
+    !selectedMember ||
+    !selectedBook ||
     !dueDate ||
     isDateRangeInvalid ||
-    (!editingRecord && (borrowMetrics.isExpired || reachedPlanCap || (selectedBook && selectedBook.available_copies <= 0)));
+    (!editingRecord &&
+      (borrowMetrics.isExpired ||
+        reachedPlanCap ||
+        (selectedBook && selectedBook.available_copies <= 0)));
 
   const handleFormSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -200,104 +242,139 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
   };
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden border border-slate-light/10 animate-zoom-in">
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left">
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-lg overflow-hidden border border-slate-light/10 animate-zoom-in">
         {/* HEADER BLOCK BRANDED SYSTEM */}
         <div className="bg-slate-900 p-5 text-white flex justify-between items-center border-b border-slate-light/10">
           <div>
-            <h3 className="text-[11px] font-bold uppercase tracking-wider text-slate-400">Circulation Terminal</h3>
-            <h2 className="text-xl font-bold text-white tracking-tight mt-0.5">{editingRecord ? "Edit issue details" : "Issue New Book"}</h2>
+            <h3 className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
+              Circulation Terminal
+            </h3>
+            <h2 className="text-xl font-bold text-white tracking-tight mt-0.5">
+              {editingRecord ? "Edit issue details" : "Issue New Book"}
+            </h2>
           </div>
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="p-1.5 hover:bg-white/10 text-slate-400 hover:text-white rounded-xl transition-all cursor-pointer"
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 hover:bg-card-bg/10 text-slate-400 hover:text-white rounded-xl transition-all cursor-pointer"
           >
             <X size={16} />
           </button>
         </div>
 
         <form onSubmit={handleFormSubmit} className="p-5 space-y-4">
-          
           {/* 1. MEMBER LOOKUP INPUT SECTION */}
           <div className="relative">
-            <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Member Name</label>
+            <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">
+              Member Name
+            </label>
             <div className="relative">
-              <User className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
+              <User
+                className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"
+                size={16}
+              />
               <input
                 type="text"
                 disabled={!!editingRecord}
                 value={memberSearch}
-                onChange={(e) => { 
-                  setMemberSearch(e.target.value); 
-                  setShowMemberDropdown(true); 
+                onChange={(e) => {
+                  setMemberSearch(e.target.value);
+                  setShowMemberDropdown(true);
                 }}
                 placeholder="Search member profile index..."
-                className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-slate-900 focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-text-main focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed"
               />
             </div>
-            
-            {showMemberDropdown && suggestedMembers.length > 0 && !editingRecord && (
-              <ul className="absolute left-0 right-0 mt-1 bg-white border border-slate-light/10 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50 divide-y divide-slate-light/5">
-                {suggestedMembers.map((m) => {
-                  const isBlocked = m.compliance?.isBlocked;
-                  const complianceStatus = m.compliance?.status;
-
-                  return (
-                    <li
-                      key={m.member_id}
-                      onClick={() => {
-                        if (isBlocked) {
-                          toast.error(m.compliance?.message || "Cannot select member profile due to active policy blocks.");
-                          return;
-                        }
-                        setMemberSearch(m.name);
-                        setSelectedMember(m);
-                        setShowMemberDropdown(false);
-                      }}
-                      className={`p-3 text-xs flex justify-between items-center transition-colors cursor-pointer ${
-                        isBlocked 
-                          ? "bg-rose-50/70 text-rose-800 hover:bg-rose-100/80" 
-                          : complianceStatus === "WARNING_LAST_SLOT"
-                            ? "bg-amber-50/60 text-amber-900 hover:bg-amber-100/70"
-                            : "hover:bg-canvas-dominant text-slate-700"
-                      }`}
-                    >
-                      <div>
-                        <span className={`font-bold block text-xs sm:text-sm ${isBlocked ? "line-through text-rose-900/60" : "text-slate-900"}`}>{m.name}</span>
-                        <span className="text-slate-500 font-mono text-[11px]">📞 {m.phone_number || "No Contact Profile"}</span>
-                      </div>
-                      <span className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase ${
-                        isBlocked ? "bg-rose-100 text-rose-700" : "bg-slate-100 text-slate-700"
-                      }`}>
-                        {complianceStatus === "EXPIRED" ? "Expired (Blocked)" : complianceStatus === "LIMIT_EXCEEDED" ? "Limit Full" : m.plan_name}
-                      </span>
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
+
+            {showMemberDropdown &&
+              suggestedMembers.length > 0 &&
+              !editingRecord && (
+                <ul className="absolute left-0 right-0 mt-1 bg-card-bg border border-slate-light/10 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50 divide-y divide-slate-light/5">
+                  {suggestedMembers.map((m) => {
+                    const isBlocked = m.compliance?.isBlocked;
+                    const complianceStatus = m.compliance?.status;
+
+                    return (
+                      <li
+                        key={m.member_id}
+                        onClick={() => {
+                          if (isBlocked) {
+                            toast.error(
+                              m.compliance?.message ||
+                                "Cannot select member profile due to active policy blocks.",
+                            );
+                            return;
+                          }
+                          setMemberSearch(m.name);
+                          setSelectedMember(m);
+                          setShowMemberDropdown(false);
+                        }}
+                        className={`p-3 text-xs flex justify-between items-center transition-colors cursor-pointer ${
+                          isBlocked
+                            ? "bg-rose-50/70 text-rose-800 hover:bg-rose-100/80"
+                            : complianceStatus === "WARNING_LAST_SLOT"
+                              ? "bg-amber-50/60 text-amber-900 hover:bg-amber-100/70"
+                              : "hover:bg-canvas-dominant text-text-main"
+                        }`}
+                      >
+                        <div>
+                          <span
+                            className={`font-bold block text-xs sm:text-sm ${isBlocked ? "line-through text-rose-900/60" : "text-text-main"}`}
+                          >
+                            {m.name}
+                          </span>
+                          <span className="text-slate-500 font-mono text-[11px]">
+                            📞 {m.phone_number || "No Contact Profile"}
+                          </span>
+                        </div>
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase ${
+                            isBlocked
+                              ? "bg-rose-100 text-rose-700"
+                              : "bg-slate-100 text-text-main"
+                          }`}
+                        >
+                          {complianceStatus === "EXPIRED"
+                            ? "Expired (Blocked)"
+                            : complianceStatus === "LIMIT_EXCEEDED"
+                              ? "Limit Full"
+                              : m.plan_name}
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
           </div>
 
           {/* DYNAMIC MEMBER INFO OVERLAY DISPLAY CARD */}
           {showMemberInfoCard && (
-            <div className={`p-4 rounded-xl border text-xs space-y-1.5 transition-all ${
-              borrowMetrics.complianceStatus === "LIMIT_EXCEEDED" || borrowMetrics.isExpired
-                ? "bg-rose-50/50 border-rose-100 text-rose-950" 
-                : borrowMetrics.complianceStatus === "WARNING_LAST_SLOT"
-                  ? "bg-amber-50/50 border-amber-100 text-amber-950"
-                  : "bg-slate-50 border-slate-200 text-slate-700"
-            }`}>
+            <div
+              className={`p-4 rounded-xl border text-xs space-y-1.5 transition-all ${
+                borrowMetrics.complianceStatus === "LIMIT_EXCEEDED" ||
+                borrowMetrics.isExpired
+                  ? "bg-rose-50/50 border-rose-100 text-rose-950"
+                  : borrowMetrics.complianceStatus === "WARNING_LAST_SLOT"
+                    ? "bg-amber-50/50 border-amber-100 text-amber-950"
+                    : "bg-slate-50 border-border-main text-text-main"
+              }`}
+            >
               <div className="font-bold flex justify-between items-center">
-                <span className="text-slate-500 uppercase text-[11px] tracking-wide">Plan Load Allocation:</span>
-                <span className="font-bold text-xs sm:text-sm text-slate-900">{borrowMetrics.currentBorrows} / {borrowMetrics.maxAllowed} Assets Held</span>
+                <span className="text-slate-500 uppercase text-[11px] tracking-wide">
+                  Plan Load Allocation:
+                </span>
+                <span className="font-bold text-xs sm:text-sm text-text-main">
+                  {borrowMetrics.currentBorrows} / {borrowMetrics.maxAllowed}{" "}
+                  Assets Held
+                </span>
               </div>
               <p className="text-xs text-slate-500 font-medium leading-relaxed">
-                {borrowMetrics.complianceMessage || `✓ Active operational context verified. Authorized for custom parameters.`}
+                {borrowMetrics.complianceMessage ||
+                  `✓ Active operational context verified. Authorized for custom parameters.`}
               </p>
               {maxAllowedDate && (
-                <p className="text-[11px] text-rose-600 font-mono font-bold uppercase tracking-wider pt-1 border-t border-slate-200">
+                <p className="text-[11px] text-rose-600 font-mono font-bold uppercase tracking-wider pt-1 border-t border-border-main">
                   📅 Plan Expiration Boundary: {maxAllowedDate}
                 </p>
               )}
@@ -306,68 +383,99 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
 
           {/* 2. BOOK LOOKUP INPUT SECTION */}
           <div className="relative">
-            <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Book Asset Index</label>
+            <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">
+              Book Asset Index
+            </label>
             <div className="relative">
-              <BookOpen className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
+              <BookOpen
+                className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"
+                size={16}
+              />
               <input
                 type="text"
                 disabled={!!editingRecord}
                 value={bookSearch}
-                onChange={(e) => { 
-                  setBookSearch(e.target.value); 
-                  setShowBookDropdown(true); 
+                onChange={(e) => {
+                  setBookSearch(e.target.value);
+                  setShowBookDropdown(true);
                 }}
                 placeholder="Search catalog by system title or author..."
-                className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-slate-900 focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-text-main focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all disabled:opacity-50 disabled:cursor-not-allowed"
               />
             </div>
-            
-            {showBookDropdown && suggestedBooks.length > 0 && !editingRecord && (
-              <ul className="absolute left-0 right-0 mt-1 bg-white border border-slate-light/10 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50 divide-y divide-slate-light/5">
-                {suggestedBooks.map((b) => {
-                  const outOfStock = b.compliance?.isBlocked || b.available_copies <= 0;
-                  return (
-                    <li
-                      key={b.book_id}
-                      onClick={() => {
-                        if (outOfStock) {
-                          toast.error("Asset unavailable: Zero matching items remain on library storage shelves.");
-                          return;
-                        }
-                        setBookSearch(b.title);
-                        setSelectedBook(b);
-                        setShowBookDropdown(false);
-                      }}
-                      className={`p-3 text-xs flex justify-between items-center cursor-pointer transition-colors ${
-                        outOfStock ? "bg-rose-50/80 text-rose-800 hover:bg-rose-100/70" : "hover:bg-canvas-dominant text-slate-700"
-                      }`}
-                    >
-                      <div>
-                        <span className="font-bold text-xs sm:text-sm text-slate-900 block">📖 {b.title}</span>
-                        <span className="text-slate-500 text-[11px] block mt-0.5 font-medium">Author: {b.author}</span>
-                      </div>
-                      <span className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase ${
-                        outOfStock ? "bg-rose-100 text-rose-700" : "bg-slate-100 text-slate-600"
-                      }`}>
-                        {outOfStock ? "Out of Stock" : `Copies: ${b.available_copies}`}
-                      </span>
-                    </li>
-                  );
-                })}
-              </ul>
-            )}
+
+            {showBookDropdown &&
+              suggestedBooks.length > 0 &&
+              !editingRecord && (
+                <ul className="absolute left-0 right-0 mt-1 bg-card-bg border border-slate-light/10 rounded-xl shadow-lg max-h-48 overflow-y-auto z-50 divide-y divide-slate-light/5">
+                  {suggestedBooks.map((b) => {
+                    const outOfStock =
+                      b.compliance?.isBlocked || b.available_copies <= 0;
+                    return (
+                      <li
+                        key={b.book_id}
+                        onClick={() => {
+                          if (outOfStock) {
+                            toast.error(
+                              "Asset unavailable: Zero matching items remain on library storage shelves.",
+                            );
+                            return;
+                          }
+                          setBookSearch(b.title);
+                          setSelectedBook(b);
+                          setShowBookDropdown(false);
+                        }}
+                        className={`p-3 text-xs flex justify-between items-center cursor-pointer transition-colors ${
+                          outOfStock
+                            ? "bg-rose-50/80 text-rose-800 hover:bg-rose-100/70"
+                            : "hover:bg-canvas-dominant text-text-main"
+                        }`}
+                      >
+                        <div>
+                          <span className="font-bold text-xs sm:text-sm text-text-main block">
+                            📖 {b.title}
+                          </span>
+                          <span className="text-slate-500 text-[11px] block mt-0.5 font-medium">
+                            Author: {b.author}
+                          </span>
+                        </div>
+                        <span
+                          className={`px-2 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase ${
+                            outOfStock
+                              ? "bg-rose-100 text-rose-700"
+                              : "bg-slate-100 text-slate-600"
+                          }`}
+                        >
+                          {outOfStock
+                            ? "Out of Stock"
+                            : `Copies: ${b.available_copies}`}
+                        </span>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
           </div>
 
           {/* DYNAMIC SELECTED BOOK INFORMATION DISPLAY BLOCK */}
           {selectedBook && bookSearch.trim() === selectedBook.title && (
-            <div className={`p-3 rounded-xl border text-xs flex justify-between items-center ${
-              selectedBook.available_copies <= 0 ? "bg-rose-50/50 border-rose-100 text-rose-950" : "bg-canvas-dominant border-slate-light/10 text-slate-700"
-            }`}>
+            <div
+              className={`p-3 rounded-xl border text-xs flex justify-between items-center ${
+                selectedBook.available_copies <= 0
+                  ? "bg-rose-50/50 border-rose-100 text-rose-950"
+                  : "bg-canvas-dominant border-slate-light/10 text-text-main"
+              }`}
+            >
               <div className="flex gap-2.5 items-center">
                 <HelpCircle size={14} className="text-slate-400" />
                 <div>
-                  <h4 className="font-bold text-slate-900 text-xs">Target Media Profile Anchored</h4>
-                  <p className="text-xs text-slate-500 font-medium w-64 truncate mt-0.5">{selectedBook.title} {selectedBook.author && `— By ${selectedBook.author}`}</p>
+                  <h4 className="font-bold text-text-main text-xs">
+                    Target Media Profile Anchored
+                  </h4>
+                  <p className="text-xs text-slate-500 font-medium w-64 truncate mt-0.5">
+                    {selectedBook.title}{" "}
+                    {selectedBook.author && `— By ${selectedBook.author}`}
+                  </p>
                 </div>
               </div>
             </div>
@@ -376,28 +484,42 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
           {/* 3. CALENDAR WORK PERIOD SETTINGS */}
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Borrow Signature</label>
+              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">
+                Borrow Signature
+              </label>
               <div className="relative">
-                <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400/70 pointer-events-none" size={14} />
-                <input 
-                  type="date" 
-                  readOnly 
-                  value={editingRecord ? formatToISODate(editingRecord.borrowedDate) : getTodayString()} 
-                  className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono font-bold text-slate-400 outline-hidden select-none" 
+                <Calendar
+                  className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400/70 pointer-events-none"
+                  size={14}
+                />
+                <input
+                  type="date"
+                  readOnly
+                  value={
+                    editingRecord
+                      ? formatToISODate(editingRecord.borrowedDate)
+                      : getTodayString()
+                  }
+                  className="w-full pl-9 pr-3 py-2 bg-slate-50 border border-border-main rounded-xl text-xs font-mono font-bold text-slate-400 outline-hidden select-none"
                 />
               </div>
             </div>
             <div>
-              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">Return Due Deadline</label>
+              <label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider block mb-1.5">
+                Return Due Deadline
+              </label>
               <div className="relative">
-                <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={14} />
+                <Calendar
+                  className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"
+                  size={14}
+                />
                 <input
                   type="date"
                   value={cleanDueDate}
                   min={minAllowedDate}
                   max={maxAllowedDate || undefined}
                   onChange={(e) => setDueDate(e.target.value)}
-                  className="w-full pl-9 pr-3 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs font-mono font-bold text-slate-800 outline-hidden focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+                  className="w-full pl-9 pr-3 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs font-mono font-bold text-slate-800 outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
                 />
               </div>
               {maxAllowedDate && (
@@ -410,10 +532,10 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
 
           {/* 4. MODAL ACTION BUTTONS TERMINAL */}
           <div className="pt-4 flex justify-end gap-2.5 border-t border-slate-light/10">
-            <button 
-              type="button" 
-              onClick={onClose} 
-              className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors cursor-pointer"
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main transition-colors cursor-pointer"
             >
               Cancel
             </button>
@@ -429,4 +551,4 @@ export const TransactionModal = ({ isOpen, onClose, onSubmit, editingRecord }: T
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/issues/components/UnpaidFineAlertModal.tsx b/client/src/features/issues/components/UnpaidFineAlertModal.tsx
index 98f521e..b37a210 100644
--- a/client/src/features/issues/components/UnpaidFineAlertModal.tsx
+++ b/client/src/features/issues/components/UnpaidFineAlertModal.tsx
@@ -20,16 +20,17 @@ export const UnpaidFineAlertModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-55 flex items-center justify-center bg-slate-900/50 backdrop-blur-xs p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="bg-white w-full max-w-md rounded-2xl border border-rose-100 shadow-2xl overflow-hidden animate-zoom-in">
-        
+    <div className="fixed inset-0 z-55 flex items-center justify-center bg-slate-900/50 backdrop-blur-xs p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="bg-card-bg w-full max-w-md rounded-2xl border border-rose-100 shadow-2xl overflow-hidden animate-zoom-in">
         {/* Warning Alert Banner Header */}
         <div className="bg-rose-50 px-6 py-5 border-b border-rose-100 flex items-start gap-3.5">
           <div className="p-2 bg-rose-100 rounded-xl text-rose-600 shrink-0">
             <ShieldAlert className="w-5 h-5" />
           </div>
           <div>
-            <h3 className="text-base font-bold text-slate-900">Return Blocked: Pending Balance</h3>
+            <h3 className="text-base font-bold text-text-main">
+              Return Blocked: Pending Balance
+            </h3>
             <p className="text-[11px] text-rose-700 font-bold mt-0.5 uppercase tracking-wide">
               Financial Validation Exception Bound
             </p>
@@ -37,47 +38,59 @@ export const UnpaidFineAlertModal = ({
         </div>
 
         {/* Content Body */}
-        <div className="p-6 space-y-4 text-xs leading-relaxed text-slate-700 font-medium">
+        <div className="p-6 space-y-4 text-xs leading-relaxed text-text-main font-medium">
           <p className="text-slate-500">
-            The library core system cannot authorize this inventory shelf check-in sequence because an unpaid fine liability matches this active operation.
+            The library core system cannot authorize this inventory shelf
+            check-in sequence because an unpaid fine liability matches this
+            active operation.
           </p>
 
           {/* Audit Summary Container */}
-          <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 space-y-2">
+          <div className="bg-slate-50 border border-border-main rounded-xl p-4 space-y-2">
             <div className="flex justify-between items-center">
-              <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">Account Holder:</span>
-              <span className="font-bold text-slate-900">{memberName}</span>
+              <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">
+                Account Holder:
+              </span>
+              <span className="font-bold text-text-main">{memberName}</span>
             </div>
             <div className="flex justify-between items-center">
-              <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">Asset Volume:</span>
-              <span className="font-bold text-slate-900 max-w-48 truncate">{bookTitle}</span>
+              <span className="text-slate-400 uppercase text-[11px] tracking-wide font-bold">
+                Asset Volume:
+              </span>
+              <span className="font-bold text-text-main max-w-48 truncate">
+                {bookTitle}
+              </span>
             </div>
             <div className="h-px bg-slate-200 my-1.5" />
             <div className="flex justify-between items-center pt-0.5">
               <span className="text-rose-700 font-bold uppercase text-[11px] tracking-wide flex items-center gap-1">
                 <AlertTriangle className="w-3.5 h-3.5" /> Overdue Debt:
               </span>
-              <span className="text-base font-bold font-mono text-slate-900">
-                {fineAmount && fineAmount > 0 ? `₹${fineAmount}.00` : "Calculated at Desk"}
+              <span className="text-base font-bold font-mono text-text-main">
+                {fineAmount && fineAmount > 0
+                  ? `₹${fineAmount}.00`
+                  : "Calculated at Desk"}
               </span>
             </div>
           </div>
 
-          <p className="text-[11px] text-slate-500 italic bg-slate-50 p-3 rounded-xl border border-slate-200 leading-normal">
-            Policy Rule: Outstanding debt liabilities must clear through the cash registration counter desk before restoring book items back into system catalog slots.
+          <p className="text-[11px] text-slate-500 italic bg-slate-50 p-3 rounded-xl border border-border-main leading-normal">
+            Policy Rule: Outstanding debt liabilities must clear through the
+            cash registration counter desk before restoring book items back into
+            system catalog slots.
           </p>
         </div>
 
         {/* Action Controls Footer */}
-        <div className="px-6 py-4 bg-slate-50 border-t border-slate-200 flex gap-2 justify-end">
+        <div className="px-6 py-4 bg-slate-50 border-t border-border-main flex gap-2 justify-end">
           <button
             type="button"
             onClick={onClose}
-            className="px-4 py-2 bg-white text-slate-500 border border-slate-200 hover:text-slate-900 font-bold text-xs uppercase tracking-wider rounded-xl transition-all cursor-pointer"
+            className="px-4 py-2 bg-card-bg text-slate-500 border border-border-main hover:text-text-main font-bold text-xs uppercase tracking-wider rounded-xl transition-all cursor-pointer"
           >
             Dismiss Alert
           </button>
-          
+
           {onNavigateToFines && (
             <button
               type="button"
@@ -91,8 +104,7 @@ export const UnpaidFineAlertModal = ({
             </button>
           )}
         </div>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/issues/pages/TransactionsPage.tsx b/client/src/features/issues/pages/TransactionsPage.tsx
index 77d873f..39001e5 100644
--- a/client/src/features/issues/pages/TransactionsPage.tsx
+++ b/client/src/features/issues/pages/TransactionsPage.tsx
@@ -4,23 +4,27 @@ import { axiosClient } from "../../../api/axiosClient";
 import { TransactionModal } from "../components/TransactionModal";
 import { IssueDetailsModal } from "../components/IssueDetailsModal";
 // Import explicit structural types from your updated declarations file
-import type { BookIssueRecord, ComputedIssueStatus } from "../../../types/transactions";
+import type {
+  BookIssueRecord,
+  ComputedIssueStatus,
+} from "../../../types/transactions";
 import { toast } from "sonner";
 import { useAuthStore } from "../../../store/authStore";
 
 // Editorial Visual Assets
-import { 
-  Search, 
-  RotateCcw, 
-  ChevronLeft, 
-  ChevronRight, 
-  Plus, 
-  RefreshCw, 
-  User, 
-  BookOpen, 
-  Calendar, 
+import {
+  Search,
+  RotateCcw,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Plus,
+  RefreshCw,
+  User,
+  BookOpen,
+  Calendar,
   AlertCircle,
-  Activity
+  Activity,
 } from "lucide-react";
 
 export const TransactionsPage = () => {
@@ -35,7 +39,9 @@ export const TransactionsPage = () => {
 
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedRecord, setSelectedRecord] = useState<BookIssueRecord | null>(null);
+  const [selectedRecord, setSelectedRecord] = useState<BookIssueRecord | null>(
+    null,
+  );
 
   // Fetch Master Feed Data Ledger
   const { data: rawIssues = [], isLoading } = useQuery<BookIssueRecord[]>({
@@ -53,7 +59,9 @@ export const TransactionsPage = () => {
       return await axiosClient.post("/issues/return", { issueId });
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["circulationMasterRecordsFeed"] });
+      queryClient.invalidateQueries({
+        queryKey: ["circulationMasterRecordsFeed"],
+      });
       toast.success("Book returned safely!");
       setIsDetailsOpen(false);
     },
@@ -66,19 +74,26 @@ export const TransactionsPage = () => {
 
   // Mutate: Save (Create/Update Parameter Mappings)
   const saveMutation = useMutation({
-    mutationFn: async (payload: { memberId: string; bookId: string; borrowDate: string; dueDate: string }) => {
+    mutationFn: async (payload: {
+      memberId: string;
+      bookId: string;
+      borrowDate: string;
+      dueDate: string;
+    }) => {
       if (selectedRecord) {
         return await axiosClient.patch(`/issues/${selectedRecord.id}`, payload);
       }
       return await axiosClient.post("/issues/borrow", payload);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["circulationMasterRecordsFeed"] });
-      
-      const successMessage = selectedRecord 
-        ? "Book issue record updated successfully." 
+      queryClient.invalidateQueries({
+        queryKey: ["circulationMasterRecordsFeed"],
+      });
+
+      const successMessage = selectedRecord
+        ? "Book issue record updated successfully."
         : "Book issue record created successfully.";
-        
+
       toast.success(successMessage);
       setIsFormOpen(false);
       setSelectedRecord(null);
@@ -96,51 +111,66 @@ export const TransactionsPage = () => {
   // Performance Boost: Memoize single-pass filtering and sorting loops
   const allFilteredRecords = useMemo(() => {
     return rawIssues
-      .reduce<(BookIssueRecord & { computedStatus: ComputedIssueStatus })[]>((acc, record) => {
-        const computedStatus: ComputedIssueStatus = record.status;
+      .reduce<(BookIssueRecord & { computedStatus: ComputedIssueStatus })[]>(
+        (acc, record) => {
+          const computedStatus: ComputedIssueStatus = record.status;
 
-        if (computedStatus === "RETURNED") return acc;
+          if (computedStatus === "RETURNED") return acc;
 
-        const term = searchQuery.toLowerCase();
-        const nameMatch = record.memberName?.toLowerCase().includes(term) || false;
-        const titleMatch = record.bookTitle?.toLowerCase().includes(term) || false;
-        const matchesSearch = nameMatch || titleMatch;
-        const matchesStatus = statusFilter === "" || computedStatus === statusFilter;
+          const term = searchQuery.toLowerCase();
+          const nameMatch =
+            record.memberName?.toLowerCase().includes(term) || false;
+          const titleMatch =
+            record.bookTitle?.toLowerCase().includes(term) || false;
+          const matchesSearch = nameMatch || titleMatch;
+          const matchesStatus =
+            statusFilter === "" || computedStatus === statusFilter;
 
-        if (matchesSearch && matchesStatus) {
-          acc.push({ ...record, computedStatus });
-        }
-        return acc;
-      }, [])
-      .sort((a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime());
+          if (matchesSearch && matchesStatus) {
+            acc.push({ ...record, computedStatus });
+          }
+          return acc;
+        },
+        [],
+      )
+      .sort(
+        (a, b) => new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime(),
+      );
   }, [rawIssues, searchQuery, statusFilter]);
 
   // Safe Client-Side Pagination Boundaries Engine
   const totalRecordsCount = allFilteredRecords.length;
   const totalPages = Math.max(1, Math.ceil(totalRecordsCount / rowsPerPage));
-  
+
   const safeCurrentPage = Math.min(currentPage, totalPages);
 
   // Slice array down to 10 rows maximum for viewport index rendering
   const paginatedRecords = useMemo(() => {
     return allFilteredRecords.slice(
       (safeCurrentPage - 1) * rowsPerPage,
-      safeCurrentPage * rowsPerPage
+      safeCurrentPage * rowsPerPage,
     );
   }, [allFilteredRecords, safeCurrentPage, rowsPerPage]);
 
   return (
-    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-slate-700 text-left">
-      
+    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
       {/* Upper Control Bar Layout */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-5 mb-5 rounded-2xl border border-slate-200 shadow-xs shrink-0">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-            <h2 className="text-xl font-bold text-slate-900 tracking-tight">Borrow & Return Desk</h2>
-          <p className="text-xs text-slate-500 mt-0.5 font-medium">Manage real-time out-of-building media assets, process drop-offs, and track compliance.</p>
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Borrow & Return Desk
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium">
+            Manage real-time out-of-building media assets, process drop-offs,
+            and track compliance.
+          </p>
         </div>
         <button
           type="button"
-          onClick={() => { setSelectedRecord(null); setIsFormOpen(true); }}
+          onClick={() => {
+            setSelectedRecord(null);
+            setIsFormOpen(true);
+          }}
           className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap"
         >
           <Plus size={14} /> Issue New Book
@@ -148,7 +178,7 @@ export const TransactionsPage = () => {
       </div>
 
       {/* Filter & Search Bar Controls Section */}
-      <div className="flex flex-col md:flex-row gap-3 bg-white p-4 mb-5 rounded-2xl border border-slate-200 shadow-2xs shrink-0">
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
         <div className="relative flex-1">
           <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
             <Search size={16} />
@@ -157,27 +187,38 @@ export const TransactionsPage = () => {
             type="text"
             placeholder="Query active loans by member name or book title..."
             value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium text-slate-900 focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all placeholder-slate-400"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-4 py-2 bg-slate-50 border border-border-main rounded-xl text-xs sm:text-sm font-medium text-text-main focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all placeholder-slate-400"
           />
         </div>
         <div className="flex gap-2.5 min-w-xs">
-          <select
-            value={statusFilter}
-            onChange={(e) => { setStatusFilter(e.target.value); setCurrentPage(1); }}
-            className="flex-1 px-3.5 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 focus:bg-white focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all cursor-pointer"
-          >
-            <option value="">All Active Loans</option>
-            <option value="BORROWED">Standard Borrows</option>
-            <option value="OVERDUE">Deadlines Violated</option>
-          </select>
+          <div className="w-full md:w-64 relative">
+            <select
+              value={statusFilter}
+              onChange={(e) => {
+                setStatusFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full px-3.5 pr-10 py-2 bg-slate-50 border border-border-main rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 appearance-none focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 outline-hidden transition-all cursor-pointer"
+            >
+              <option value="">Issue Status</option>
+              <option value="BORROWED">Borrowed</option>
+              <option value="OVERDUE">Overdue</option>
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
 
           <button
             type="button"
             onClick={handleClearFilters}
-            className="flex items-center gap-1 px-3.5 py-2 bg-rose-50 hover:bg-rose-100 text-rose-700 text-xs font-bold rounded-xl transition-all cursor-pointer whitespace-nowrap uppercase tracking-wider border border-rose-100"
+            className="px-4 py-2 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all animate-fade-in text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            <RotateCcw size={12} /> Clear
+            <RotateCcw size={12} /> Reset
           </button>
         </div>
       </div>
@@ -189,47 +230,75 @@ export const TransactionsPage = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1 space-y-5">
-          
           {/* Main List Workspace Table */}
-          <div className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-200 text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
-                    <th className="py-3.5 px-5"><User size={12} className="inline mr-1" />Member Name</th>
-                    <th className="py-3.5 px-5"><BookOpen size={12} className="inline mr-1" />Issued Book Title</th>
-                    <th className="py-3.5 px-5"><Calendar size={12} className="inline mr-1" />Checkout Date</th>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">
+                      <User size={12} className="inline mr-1" />
+                      Member Name
+                    </th>
+                    <th className="py-3.5 px-5">
+                      <BookOpen size={12} className="inline mr-1" />
+                      Issued Book Title
+                    </th>
+                    <th className="py-3.5 px-5">
+                      <Calendar size={12} className="inline mr-1" />
+                      Checkout Date
+                    </th>
                     <th className="py-3.5 px-5">Target Due Deadline</th>
-                    <th className="py-3.5 px-5 text-center"><Activity size={12} className="inline mr-1" />Status Flag</th>
+                    <th className="py-3.5 px-5 text-center">
+                      <Activity size={12} className="inline mr-1" />
+                      Status Flag
+                    </th>
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                   {paginatedRecords.length === 0 ? (
                     <tr>
-                      <td colSpan={5} className="py-16 text-center text-slate-400 font-medium">
-                        No active out-of-building book logs registered on current indexing criteria.
+                      <td
+                        colSpan={5}
+                        className="py-16 text-center text-slate-400 font-medium"
+                      >
+                        No active out-of-building book logs registered on
+                        current indexing criteria.
                       </td>
                     </tr>
                   ) : (
                     paginatedRecords.map((record) => (
                       <tr
                         key={record.id}
-                        onClick={() => { setSelectedRecord(record); setIsDetailsOpen(true); }}
+                        onClick={() => {
+                          setSelectedRecord(record);
+                          setIsDetailsOpen(true);
+                        }}
                         className="hover:bg-slate-50/80 transition-colors cursor-pointer select-none group"
                       >
-                        <td className="py-3.5 px-5 font-bold text-slate-900 group-hover:text-slate-800 transition-colors">
+                        <td className="py-3.5 px-5 font-bold text-text-main group-hover:text-slate-800 transition-colors">
                           {record.memberName}
                         </td>
-                        <td className="py-3.5 px-5 text-slate-800 font-medium">{record.bookTitle}</td>
-                        <td className="py-3.5 px-5 text-slate-500 font-mono text-xs">{record.borrowedDate}</td>
-                        <td className="py-3.5 px-5 font-bold font-mono text-slate-900 text-xs">{record.dueDate}</td>
+                        <td className="py-3.5 px-5 text-slate-800 font-medium">
+                          {record.bookTitle}
+                        </td>
+                        <td className="py-3.5 px-5 text-slate-500 font-mono text-xs">
+                          {record.borrowedDate}
+                        </td>
+                        <td className="py-3.5 px-5 font-bold font-mono text-text-main text-xs">
+                          {record.dueDate}
+                        </td>
                         <td className="py-3.5 px-5 text-center">
-                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border ${
-                            record.computedStatus === "OVERDUE"
-                              ? "bg-rose-50 text-rose-700 border-rose-100 animate-pulse"
-                              : "bg-emerald-50 text-emerald-700 border-emerald-100"
-                          }`}>
-                            {record.computedStatus === "OVERDUE" && <AlertCircle size={10} className="mr-1 inline" />}
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border ${
+                              record.computedStatus === "OVERDUE"
+                                ? "bg-rose-50 text-rose-700 border-rose-100 animate-pulse"
+                                : "bg-emerald-50 text-emerald-700 border-emerald-100"
+                            }`}
+                          >
+                            {record.computedStatus === "OVERDUE" && (
+                              <AlertCircle size={10} className="mr-1 inline" />
+                            )}
                             {record.computedStatus}
                           </span>
                         </td>
@@ -240,82 +309,52 @@ export const TransactionsPage = () => {
               </table>
             </div>
 
-
-              {totalPages > 0 && (
-                        <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
-                          <span>
-                            Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalRecordsCount} Books
-                          </span>
-                          <div className="flex gap-2">
-                            <button
-                              type="button"
-                              disabled={currentPage === 1}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.max(1, p - 1)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronLeft size={14} />
-                            </button>
-                            <button
-                              type="button"
-                              disabled={currentPage === totalPages}
-                              onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.min(totalPages, p + 1)); }}
-                              className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                            >
-                              <ChevronRight size={14} />
-                            </button>
-                          </div>
-                        </div>
-                      )}
+            {totalPages > 0 && (
+              <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+                <span>
+                  Page {currentPage} / {totalPages}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalRecordsCount} Books
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.max(1, p - 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPages}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.min(totalPages, p + 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
-
-          {/* Pagination Controls Footer UI
-          <div className="px-5 py-3 border border-slate-200 rounded-2xl bg-white flex flex-col sm:flex-row items-center justify-between gap-4 shadow-2xs transition-all">
-            <div className="text-xs font-medium text-slate-500">
-              Showing page <b className="text-slate-900 font-mono">{safeCurrentPage}</b> of <b className="text-slate-900 font-mono">{totalPages}</b> (<span className="font-mono">{totalRecordsCount}</span> records logged)
-            </div>
-            
-            <div className="flex items-center gap-1">
-              <button
-                type="button"
-                disabled={safeCurrentPage === 1}
-                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                className="p-1.5 border border-slate-200 rounded-lg bg-white text-slate-500 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-50 hover:text-slate-900 cursor-pointer transition-all"
-              >
-                <ChevronLeft size={14} />
-              </button>
-
-              {Array.from({ length: totalPages }, (_, idx) => idx + 1).map((pageNum) => (
-                <button
-                  key={pageNum}
-                  type="button"
-                  onClick={() => setCurrentPage(pageNum)}
-                  className={`px-3 py-1 text-xs font-bold rounded-lg transition-all cursor-pointer font-mono ${
-                    safeCurrentPage === pageNum
-                      ? "bg-slate-900 text-white shadow-xs"
-                      : "bg-white border border-slate-200 text-slate-600 hover:bg-slate-50 hover:text-slate-900"
-                  }`}
-                >
-                  {pageNum}
-                </button>
-              ))}
-
-              <button
-                type="button"
-                disabled={safeCurrentPage === totalPages}
-                onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
-                className="p-1.5 border border-slate-200 rounded-lg bg-white text-slate-500 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-50 hover:text-slate-900 cursor-pointer transition-all"
-              >
-                <ChevronRight size={14} />
-              </button>
-            </div>
-          </div> */}
-
         </div>
       )}
 
       {/* Modals Layers */}
       <TransactionModal
-        key={isFormOpen ? (selectedRecord ? `edit-${selectedRecord.id}` : "new-issue-form") : "closed"}
+        key={
+          isFormOpen
+            ? selectedRecord
+              ? `edit-${selectedRecord.id}`
+              : "new-issue-form"
+            : "closed"
+        }
         isOpen={isFormOpen}
         onClose={() => setIsFormOpen(false)}
         onSubmit={(vals) => saveMutation.mutate(vals)}
@@ -327,8 +366,11 @@ export const TransactionsPage = () => {
         onClose={() => setIsDetailsOpen(false)}
         record={selectedRecord}
         onMarkAsReturned={(id) => returnBookMutation.mutate(id)}
-        onTriggerEdit={() => { setIsDetailsOpen(false); setIsFormOpen(true); }}
+        onTriggerEdit={() => {
+          setIsDetailsOpen(false);
+          setIsFormOpen(true);
+        }}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/members/components/DeleteConfirmationModal.tsx b/client/src/features/members/components/DeleteConfirmationModal.tsx
index d589c06..9a116b0 100644
--- a/client/src/features/members/components/DeleteConfirmationModal.tsx
+++ b/client/src/features/members/components/DeleteConfirmationModal.tsx
@@ -5,43 +5,54 @@ interface DeleteConfirmationModalProps {
   memberName: string;
 }
 
-export const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, memberName }: DeleteConfirmationModalProps) => {
+export const DeleteConfirmationModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  memberName,
+}: DeleteConfirmationModalProps) => {
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
       {/* Container: Changed to an off-white/ivory-tint base with a soft linen-amber border */}
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm p-6 border border-amber-100/80 animate-zoom-in">
         <div className="text-center">
           {/* Header: Shifted from text-sm to text-base, using a deeper, slate-ink tone */}
-          <h3 className="text-base font-bold text-slate-900 tracking-tight">Confirm Member Deletion</h3>
-          
+          <h3 className="text-base font-bold text-text-main tracking-tight">
+            Confirm Member Deletion
+          </h3>
+
           {/* Main Paragraph: Softened slightly to slate-600 for optimal readability */}
           <p className="text-sm text-slate-600 mt-4 leading-relaxed">
-            Are you sure you want to delete the library member record for <strong className="text-slate-900 font-bold">{memberName}</strong>?
+            Are you sure you want to delete the library member record for{" "}
+            <strong className="text-text-main font-bold">{memberName}</strong>?
           </p>
-          
+
           {/* Callout Block: Shifted to a premium cream/rose warning surface with refined typography rules */}
           <div className="text-xs text-rose-900 font-medium mt-5 bg-rose-50/60 border border-rose-100 p-4 rounded-xl text-left leading-relaxed">
-            <span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">Notice:</span>
-            This action removes the library member profile tier assignment only. The underlying system user account credentials will not be deleted.
+            <span className="font-bold uppercase tracking-wider block mb-1 text-rose-950 text-[11px]">
+              Notice:
+            </span>
+            This action removes the library member profile tier assignment only.
+            The underlying system user account credentials will not be deleted.
           </div>
         </div>
-        
+
         {/* Modal Action Footers - Clear Call to Action */}
         <div className="mt-6 flex justify-end gap-3 pt-5 border-t border-slate-100 text-xs font-bold tracking-wide">
           {/* Cancel Button: Crisp off-white tactile styling */}
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+          <button
+            type="button"
+            onClick={onClose}
+            className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
           >
             Cancel
           </button>
           {/* Action Button: High contrast, dark editorial signature ink button */}
-          <button 
-            type="button" 
-            onClick={onConfirm} 
+          <button
+            type="button"
+            onClick={onConfirm}
             className="px-4 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all cursor-pointer shadow-sm"
           >
             Confirm Deletion
@@ -50,4 +61,4 @@ export const DeleteConfirmationModal = ({ isOpen, onClose, onConfirm, memberName
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/members/components/MemberDetailsModal.tsx b/client/src/features/members/components/MemberDetailsModal.tsx
index 0baf766..8368c99 100644
--- a/client/src/features/members/components/MemberDetailsModal.tsx
+++ b/client/src/features/members/components/MemberDetailsModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import type { LibraryMember, MembershipPlan } from "../../../types/members";
-import { DeleteConfirmationModal } from "./DeleteConfirmationModal"; 
+import { DeleteConfirmationModal } from "./DeleteConfirmationModal";
 
 interface MemberDetailsModalProps {
   isOpen: boolean;
@@ -39,45 +39,54 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
   const handleConfirmDelete = () => {
     onDelete(member.id);
     setIsDeleteOpen(false); // Close the sub-modal overlay
-    onClose();             // Close the master profile drawer together
+    onClose(); // Close the master profile drawer together
   };
 
   return (
     <>
       {/* High contrast bright layout backdrops with light frosting filters */}
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-xs font-sans">
-        <div className="w-full max-w-xl rounded-2xl bg-white shadow-xl transition-all overflow-hidden border border-amber-100 flex flex-col max-h-[90vh]">
-          
+        <div className="w-full max-w-xl rounded-2xl bg-card-bg shadow-xl transition-all overflow-hidden border border-amber-100 flex flex-col max-h-[90vh]">
           {/* Header Grid Framework - Clean Bright Banner */}
           <div className="flex items-center justify-between border-b border-slate-100 p-5 bg-slate-900">
             <h3 className="text-xl font-bold text-white tracking-tight">
               {showRenewalScreen ? "Renew Membership Plan" : "Member Details"}
             </h3>
-            <button 
-              onClick={() => { setShowRenewalScreen(false); onClose(); }}
-              className="text-slate-400 hover:text-slate-900 transition-colors text-base font-bold cursor-pointer p-1.5 hover:bg-slate-100 rounded-lg"
+            <button
+              onClick={() => {
+                setShowRenewalScreen(false);
+                onClose();
+              }}
+              className="text-slate-400 hover:text-text-main transition-colors text-base font-bold cursor-pointer p-1.5 hover:bg-slate-100 rounded-lg"
             >
               ✕
             </button>
           </div>
 
           {/* Content Box Switcher Container */}
-          <div className="p-6 overflow-y-auto space-y-6 flex-1 text-slate-700">
+          <div className="p-6 overflow-y-auto space-y-6 flex-1 text-text-main">
             {!showRenewalScreen ? (
               /* SCREEN A: DETAILED ACCOUNT OVERVIEW INFO CARD */
               <div className="space-y-6">
                 <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                   <div>
-                    <h4 className="text-xl font-bold text-slate-900 tracking-tight">{member.name}</h4>
+                    <h4 className="text-xl font-bold text-text-main tracking-tight">
+                      {member.name}
+                    </h4>
                     <p className="text-xs text-slate-400 font-bold mt-1 tracking-wide uppercase">
-                      ID: REGISTER-{member.id ? member.id.split("-").pop()?.slice(-4).toUpperCase() : "0000"}
+                      ID: REGISTER-
+                      {member.id
+                        ? member.id.split("-").pop()?.slice(-4).toUpperCase()
+                        : "0000"}
                     </p>
                   </div>
-                  <span className={`self-start sm:self-auto inline-flex items-center px-3 py-1 rounded-full text-xs font-bold tracking-wide ${
-                    member.isActive 
-                      ? "bg-emerald-50 text-emerald-700 border border-emerald-200" 
-                      : "bg-rose-50 text-rose-700 border border-rose-200"
-                  }`}>
+                  <span
+                    className={`self-start sm:self-auto inline-flex items-center px-3 py-1 rounded-full text-xs font-bold tracking-wide ${
+                      member.isActive
+                        ? "bg-emerald-50 text-emerald-700 border border-emerald-200"
+                        : "bg-rose-50 text-rose-700 border border-rose-200"
+                    }`}
+                  >
                     {member.isActive ? "Plan: Active" : "Plan: Expired"}
                   </span>
                 </div>
@@ -86,24 +95,36 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-5 gap-x-6 text-sm">
                   <div>
-                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Email Address</span>
-                    <span className="font-semibold text-slate-900 mt-1 block select-all text-base">{member.email}</span>
+                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                      Email Address
+                    </span>
+                    <span className="font-semibold text-text-main mt-1 block select-all text-base">
+                      {member.email}
+                    </span>
                   </div>
                   <div>
-                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Phone Number</span>
-                    <span className="font-semibold text-slate-900 mt-1 block select-all text-base">{member.phoneNumber || "No Verified Phone"}</span>
+                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                      Phone Number
+                    </span>
+                    <span className="font-semibold text-text-main mt-1 block select-all text-base">
+                      {member.phoneNumber || "No Verified Phone"}
+                    </span>
                   </div>
                   <div>
-                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Current Active Plan</span>
+                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                      Current Active Plan
+                    </span>
                     <div className="mt-1.5">
-                      <span className="inline-block px-3 py-1.5 rounded-lg text-xs font-bold bg-slate-100 text-slate-700 border border-slate-200/40">
+                      <span className="inline-block px-3 py-1.5 rounded-lg text-xs font-bold bg-slate-100 text-text-main border border-border-main/40">
                         {member.membershipPlanName}
                       </span>
                     </div>
                   </div>
                   <div>
-                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">Plan Expiry Date</span>
-                    <span className="font-bold text-slate-900 mt-1 block text-base">
+                    <span className="block text-xs font-bold text-slate-400 uppercase tracking-wide">
+                      Plan Expiry Date
+                    </span>
+                    <span className="font-bold text-text-main mt-1 block text-base">
                       {member.expiryDate}
                     </span>
                   </div>
@@ -118,7 +139,7 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
                   >
                     Delete Account
                   </button>
-                  
+
                   <button
                     type="button"
                     onClick={() => {
@@ -135,8 +156,14 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
               /* SCREEN B: DYNAMIC RENEWAL INPUT SCREEN */
               <form onSubmit={handleRenewSubmit} className="space-y-6">
                 <div className="p-4 bg-amber-50/60 border border-amber-200/60 rounded-xl text-sm text-slate-600 font-medium leading-relaxed">
-                  You are renewing the subscription plan for <span className="text-slate-900 font-bold">{member.name}</span>. 
-                  Submitting this update logs the start date as <span className="text-slate-900 font-bold">Today</span> and automatically assigns the corresponding contract validation cycles.
+                  You are renewing the subscription plan for{" "}
+                  <span className="text-text-main font-bold">
+                    {member.name}
+                  </span>
+                  . Submitting this update logs the start date as{" "}
+                  <span className="text-text-main font-bold">Today</span> and
+                  automatically assigns the corresponding contract validation
+                  cycles.
                 </div>
 
                 <div className="space-y-2">
@@ -147,16 +174,23 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
                     required
                     value={selectedPlanId}
                     onChange={(e) => setSelectedPlanId(e.target.value)}
-                    className="w-full px-4 py-3 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl text-sm font-semibold outline-none cursor-pointer focus:bg-white focus:border-slate-400 transition-all"
+                    className="w-full px-4 py-3 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-sm font-semibold outline-none cursor-pointer focus:bg-card-bg focus:border-slate-400 transition-all"
                   >
-                    <option value="" className="text-slate-400">Select an option...</option>
+                    <option value="" className="text-slate-400">
+                      Select an option...
+                    </option>
                     {plans.map((p: MembershipPlan & { plan_name?: string }) => {
-                      const planData = (p as unknown) as Record<string, unknown>;
-                      const fallbackId = planData.membership_plan_id || planData.id;
-                      const fallbackName = planData.plan_name || planData.name || "Unnamed Tier";
-                      
+                      const planData = p as unknown as Record<string, unknown>;
+                      const fallbackId =
+                        planData.membership_plan_id || planData.id;
+                      const fallbackName =
+                        planData.plan_name || planData.name || "Unnamed Tier";
+
                       return (
-                        <option key={String(fallbackId)} value={String(fallbackId)}>
+                        <option
+                          key={String(fallbackId)}
+                          value={String(fallbackId)}
+                        >
                           {String(fallbackName).toUpperCase()}
                         </option>
                       );
@@ -169,7 +203,7 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
                   <button
                     type="button"
                     onClick={() => setShowRenewalScreen(false)}
-                    className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+                    className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
                   >
                     Back to Profile
                   </button>
@@ -196,4 +230,4 @@ export const MemberDetailsModal: React.FC<MemberDetailsModalProps> = ({
       />
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/members/components/MemberModal.tsx b/client/src/features/members/components/MemberModal.tsx
index 6708345..e842cee 100644
--- a/client/src/features/members/components/MemberModal.tsx
+++ b/client/src/features/members/components/MemberModal.tsx
@@ -1,8 +1,15 @@
 import { useEffect } from "react";
 import { useForm, useWatch } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { MemberFormSchema, type MemberFormValues } from "../schemas/memberSchema";
-import type { SystemUser, MembershipPlan, LibraryMember } from "../../../types/members";
+import {
+  MemberFormSchema,
+  type MemberFormValues,
+} from "../schemas/memberSchema";
+import type {
+  SystemUser,
+  MembershipPlan,
+  LibraryMember,
+} from "../../../types/members";
 
 interface MemberModalProps {
   isOpen: boolean;
@@ -13,22 +20,42 @@ interface MemberModalProps {
   editingMember?: LibraryMember | null;
 }
 
-export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMember }: MemberModalProps) => {
-  const { register, handleSubmit, control, setValue, reset, formState: { errors } } = useForm<MemberFormValues>({
+export const MemberModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  users,
+  plans,
+  editingMember,
+}: MemberModalProps) => {
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset,
+    formState: { errors },
+  } = useForm<MemberFormValues>({
     resolver: zodResolver(MemberFormSchema),
-    defaultValues: { userId: "", email: "", phoneNumber: "", membershipPlanId: "", isActive: true }
+    defaultValues: {
+      userId: "",
+      email: "",
+      phoneNumber: "",
+      membershipPlanId: "",
+      isActive: true,
+    },
   });
 
   const selectedUserId = useWatch({
     control,
-    name: "userId"
+    name: "userId",
   });
 
   // 1. Autofill user details AND clear them out safely if user choice becomes empty
   useEffect(() => {
     if (!editingMember) {
       if (selectedUserId) {
-        const selectedUser = users.find(u => u.id === selectedUserId);
+        const selectedUser = users.find((u) => u.id === selectedUserId);
         if (selectedUser) {
           setValue("email", selectedUser.email);
           setValue("phoneNumber", selectedUser.phoneNumber);
@@ -49,15 +76,15 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
           email: editingMember.email,
           phoneNumber: editingMember.phoneNumber,
           membershipPlanId: editingMember.membershipPlanId,
-          isActive: editingMember.isActive
+          isActive: editingMember.isActive,
         });
       } else {
-        reset({ 
-          userId: "", 
-          email: "", 
-          phoneNumber: "", 
-          membershipPlanId: "", 
-          isActive: true 
+        reset({
+          userId: "",
+          email: "",
+          phoneNumber: "",
+          membershipPlanId: "",
+          isActive: true,
         });
       }
     }
@@ -70,21 +97,24 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg overflow-hidden border border-amber-100 animate-zoom-in">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-lg overflow-hidden border border-amber-100 animate-zoom-in">
         {/* Modal Branding Header - Clean Light Structured Banner */}
-        <div className="bg-slate-900 border-b border-slate-100 p-5 text-slate-900 flex justify-between items-center">
-          <h3 className="text-xl text-white font-bold tracking-tight">{editingMember ? "Renew Membership Plan" : "Add New Member"}</h3>
-          <button 
-            onClick={onClose} 
-            className="text-slate-400 hover:text-slate-900 transition-colors cursor-pointer text-base font-bold p-1.5 hover:bg-slate-100 rounded-lg"
+        <div className="bg-slate-900 border-b border-slate-100 p-5 text-text-main flex justify-between items-center">
+          <h3 className="text-xl text-white font-bold tracking-tight">
+            {editingMember ? "Renew Membership Plan" : "Add New Member"}
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-slate-400 hover:text-text-main transition-colors cursor-pointer text-base font-bold p-1.5 hover:bg-slate-100 rounded-lg"
           >
             ✕
           </button>
         </div>
 
-        <form onSubmit={handleSubmit(onSubmit)} className="p-6 space-y-5 text-slate-700">
-          
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="p-6 space-y-5 text-text-main"
+        >
           {/* Form Control: User Selection Selector dropdown */}
           <div>
             <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">
@@ -95,8 +125,8 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
               disabled={!!editingMember || hasNoAvailableUsers}
               className={`w-full px-4 py-3 border rounded-xl text-sm font-semibold outline-none transition-all ${
                 hasNoAvailableUsers && !editingMember
-                  ? "bg-rose-50 border-rose-200 text-rose-700 font-bold" 
-                  : "bg-slate-50 border-slate-200 text-slate-800 focus:bg-white focus:border-slate-400"
+                  ? "bg-rose-50 border-rose-200 text-rose-700 font-bold"
+                  : "bg-slate-50 border-border-main text-slate-800 focus:bg-card-bg focus:border-slate-400"
               } disabled:opacity-40 disabled:cursor-not-allowed`}
             >
               {editingMember ? (
@@ -106,7 +136,7 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
               ) : (
                 <>
                   <option value="">Choose User Profile...</option>
-                  {users.map(u => (
+                  {users.map((u) => (
                     <option key={u.id} value={u.id}>
                       {u.name.toUpperCase()}
                     </option>
@@ -114,74 +144,93 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
                 </>
               )}
             </select>
-            {errors.userId && <p className="text-xs text-rose-700 mt-1.5 font-bold">{errors.userId.message}</p>}
+            {errors.userId && (
+              <p className="text-xs text-rose-700 mt-1.5 font-bold">
+                {errors.userId.message}
+              </p>
+            )}
           </div>
 
           {/* Form Control Block Grid Row (Read Only Meta Profiles) */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div>
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">Email Address</label>
-              <input 
-                type="text" 
-                {...register("email")} 
-                readOnly 
-                className="w-full px-4 py-3 bg-slate-100/70 border border-slate-200 rounded-xl text-sm text-slate-600 font-semibold outline-none cursor-not-allowed select-all" 
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">
+                Email Address
+              </label>
+              <input
+                type="text"
+                {...register("email")}
+                readOnly
+                className="w-full px-4 py-3 bg-slate-100/70 border border-border-main rounded-xl text-sm text-slate-600 font-semibold outline-none cursor-not-allowed select-all"
               />
             </div>
             <div>
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">Phone Number</label>
-              <input 
-                type="text" 
-                {...register("phoneNumber")} 
-                readOnly 
-                className="w-full px-4 py-3 bg-slate-100/70 border border-slate-200 rounded-xl text-sm text-slate-600 font-semibold outline-none cursor-not-allowed select-all" 
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">
+                Phone Number
+              </label>
+              <input
+                type="text"
+                {...register("phoneNumber")}
+                readOnly
+                className="w-full px-4 py-3 bg-slate-100/70 border border-border-main rounded-xl text-sm text-slate-600 font-semibold outline-none cursor-not-allowed select-all"
               />
             </div>
           </div>
 
           {/* Form Control: Membership tier select index */}
           <div>
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">Choose Membership Plan</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block mb-1.5">
+              Choose Membership Plan
+            </label>
             <select
               {...register("membershipPlanId")}
-              className="w-full px-4 py-3 bg-slate-50 border border-slate-200 text-slate-800 rounded-xl text-sm font-semibold outline-none transition-all focus:bg-white focus:border-slate-400 cursor-pointer"
+              className="w-full px-4 py-3 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-sm font-semibold outline-none transition-all focus:bg-card-bg focus:border-slate-400 cursor-pointer"
             >
               <option value="">Select a plan...</option>
-              {plans.map(p => (
+              {plans.map((p) => (
                 <option key={p.membership_plan_id} value={p.membership_plan_id}>
                   {p.plan_name.toUpperCase()} ({p.duration_days} DAYS)
                 </option>
               ))}
             </select>
-            {errors.membershipPlanId && <p className="text-xs text-rose-700 mt-1.5 font-bold">{errors.membershipPlanId.message}</p>}
+            {errors.membershipPlanId && (
+              <p className="text-xs text-rose-700 mt-1.5 font-bold">
+                {errors.membershipPlanId.message}
+              </p>
+            )}
           </div>
 
           {/* Form Control: Continuous Activation Verification parameters */}
           {editingMember && (
             <div className="flex items-center justify-between p-4 bg-amber-50/40 border border-amber-200/60 rounded-xl">
               <div className="pr-4">
-                <span className="text-sm font-bold text-slate-800 block">Membership Continuity Toggle</span>
-                <span className="text-xs text-slate-400 font-medium mt-0.5 block">Updating values shifts account validation cycles to today's parameters.</span>
+                <span className="text-sm font-bold text-slate-800 block">
+                  Membership Continuity Toggle
+                </span>
+                <span className="text-xs text-slate-400 font-medium mt-0.5 block">
+                  Updating values shifts account validation cycles to today's
+                  parameters.
+                </span>
               </div>
-              <input 
-                type="checkbox" 
-                {...register("isActive")} 
-                className="w-5 h-5 text-slate-900 border-slate-300 bg-white rounded-lg focus:ring-0 cursor-pointer accent-slate-900 transition-all" 
+              <input
+                type="checkbox"
+                {...register("isActive")}
+                className="w-5 h-5 text-text-main border-slate-300 bg-card-bg rounded-lg focus:ring-0 cursor-pointer accent-slate-900 transition-all"
               />
             </div>
           )}
 
           {/* Action Footer Frame */}
           <div className="pt-4 flex justify-end gap-3 border-t border-slate-100 text-xs font-bold tracking-wide">
-            <button 
-              type="button" 
-              onClick={onClose} 
-              className="px-4 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
             >
               Cancel
             </button>
-            <button 
-              type="submit" 
+            <button
+              type="submit"
               disabled={hasNoAvailableUsers && !editingMember}
               className="px-5 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl transition-all disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed cursor-pointer shadow-sm"
             >
@@ -192,4 +241,4 @@ export const MemberModal = ({ isOpen, onClose, onSubmit, users, plans, editingMe
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/members/pages/MembersPage.tsx b/client/src/features/members/pages/MembersPage.tsx
index 7365668..55759db 100644
--- a/client/src/features/members/pages/MembersPage.tsx
+++ b/client/src/features/members/pages/MembersPage.tsx
@@ -3,32 +3,56 @@ import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import { axiosClient } from "../../../api/axiosClient";
 import { MemberDetailsModal } from "../components/MemberDetailsModal";
-import { MemberModal } from "../components/MemberModal"; 
-import type { LibraryMember, MembershipPlan, SystemUser } from "../../../types/members";
+import { MemberModal } from "../components/MemberModal";
+import type {
+  LibraryMember,
+  MembershipPlan,
+  SystemUser,
+} from "../../../types/members";
 import type { MemberFormValues } from "../schemas/memberSchema";
 import { toast } from "sonner";
 import { useAuthStore } from "../../../store/authStore";
-import { Plus, Search, ChevronLeft, ChevronRight } from "lucide-react";
+import {
+  Plus,
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  RotateCcw,
+  X,
+} from "lucide-react";
 
 export const MembersPage = () => {
   const queryClient = useQueryClient();
-  
+
   // Server-driven lookup filter parameters
   const [currentPage, setCurrentPage] = useState(1);
   const [searchTerm, setSearchTerm] = useState("");
   const [tierFilter, setTierFilter] = useState("");
   const [statusFilter, setStatusFilter] = useState("");
-  
+
   // Card Overlay state tracking management
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [isFormOpen, setIsFormOpen] = useState(false); 
-  const [selectedMember, setSelectedMember] = useState<LibraryMember | null>(null);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [selectedMember, setSelectedMember] = useState<LibraryMember | null>(
+    null,
+  );
 
   const token = useAuthStore((state) => state.token);
 
   // Core background querying pipeline mapping directly to server indices
-  const { data: membersPayload, isLoading } = useQuery<{ total: number; data: LibraryMember[] }>({
-    queryKey: ["membersListFeed", token, currentPage, searchTerm, tierFilter, statusFilter],
+  const { data: membersPayload, isLoading } = useQuery<{
+    total: number;
+    data: LibraryMember[];
+  }>({
+    queryKey: [
+      "membersListFeed",
+      token,
+      currentPage,
+      searchTerm,
+      tierFilter,
+      statusFilter,
+    ],
     queryFn: async () => {
       const res = await axiosClient.get("/members", {
         params: {
@@ -36,8 +60,8 @@ export const MembersPage = () => {
           limit: 10,
           search: searchTerm || undefined,
           plan: tierFilter || undefined,
-          status: statusFilter || undefined
-        }
+          status: statusFilter || undefined,
+        },
       });
 
       const rootData = res.data?.data || res.data;
@@ -48,17 +72,28 @@ export const MembersPage = () => {
         ? rawRecords.map((dbRow: unknown): LibraryMember => {
             const row = dbRow as Record<string, unknown>;
             const userObj = (row.user || {}) as Record<string, unknown>;
-            const planObj = (row.membership_plan || {}) as Record<string, unknown>;
+            const planObj = (row.membership_plan || {}) as Record<
+              string,
+              unknown
+            >;
 
             return {
               id: String(row.member_id || row.id || ""),
               userId: String(row.user_id || row.userId || ""),
               name: String(userObj.name || "Unknown Member"),
               email: String(userObj.gmail || "No Email Registered"),
-              phoneNumber: String(userObj.phone_number || row.phoneNumber || ""),
-              membershipPlanId: String(row.membership_plan_id || row.membershipPlanId || ""),
-              membershipPlanName: String(planObj.plan_name || "No Plan Tier Assigned"),
-              activationDate: String(row.activation_date || row.activationDate || ""),
+              phoneNumber: String(
+                userObj.phone_number || row.phoneNumber || "",
+              ),
+              membershipPlanId: String(
+                row.membership_plan_id || row.membershipPlanId || "",
+              ),
+              membershipPlanName: String(
+                planObj.plan_name || "No Plan Tier Assigned",
+              ),
+              activationDate: String(
+                row.activation_date || row.activationDate || "",
+              ),
               expiryDate: String(row.expiry_date || row.expiryDate || "N/A"),
               isActive: row.membership_status === "ACTIVE",
             };
@@ -82,7 +117,7 @@ export const MembersPage = () => {
 
   // Fetching profiles to load form modal registration selectors
   const { data: users = [] } = useQuery<SystemUser[]>({
-    queryKey: ["eligibleUsersList", token], 
+    queryKey: ["eligibleUsersList", token],
     queryFn: async () => {
       const res = await axiosClient.get("/members/available-users");
       return res.data?.data || res.data || [];
@@ -96,34 +131,49 @@ export const MembersPage = () => {
       const processedPayload = {
         user_id: payload.userId,
         membership_plan_id: payload.membershipPlanId,
-        is_active: payload.isActive ?? true
+        is_active: payload.isActive ?? true,
       };
 
       if (selectedMember) {
-        return await axiosClient.patch(`/members/${selectedMember.id}`, processedPayload);
+        return await axiosClient.patch(
+          `/members/${selectedMember.id}`,
+          processedPayload,
+        );
       }
       return await axiosClient.post("/members", processedPayload);
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["membersListFeed"] });
       queryClient.invalidateQueries({ queryKey: ["eligibleUsersList"] });
-      
-      toast.success(selectedMember ? "Membership renewed cleanly." : "New library member created successfully!");
+
+      toast.success(
+        selectedMember
+          ? "Membership renewed cleanly."
+          : "New library member created successfully!",
+      );
       setIsFormOpen(false);
       setSelectedMember(null);
     },
     onError: (error: unknown) => {
-      let serverErrorMessage = "Database schema validation failed on submission updates.";
+      let serverErrorMessage =
+        "Database schema validation failed on submission updates.";
       if (error instanceof AxiosError) {
-        serverErrorMessage = error.response?.data?.message || serverErrorMessage;
+        serverErrorMessage =
+          error.response?.data?.message || serverErrorMessage;
       }
       toast.error(serverErrorMessage);
-    }
+    },
   });
 
   // Renew details card mutation mapping updates safely
   const renewMutation = useMutation({
-    mutationFn: async ({ memberId, planId }: { memberId: string; planId: string }) => {
+    mutationFn: async ({
+      memberId,
+      planId,
+    }: {
+      memberId: string;
+      planId: string;
+    }) => {
       return await axiosClient.patch(`/members/${memberId}`, {
         membership_plan_id: planId,
       });
@@ -137,10 +187,11 @@ export const MembersPage = () => {
     onError: (error: unknown) => {
       let serverErrorMessage = "Database contract update failed.";
       if (error instanceof AxiosError) {
-        serverErrorMessage = error.response?.data?.message || serverErrorMessage;
+        serverErrorMessage =
+          error.response?.data?.message || serverErrorMessage;
       }
       toast.error(serverErrorMessage);
-    }
+    },
   });
 
   // Delete account profile dataset logs mutation
@@ -155,7 +206,7 @@ export const MembersPage = () => {
     },
     onError: () => {
       toast.error("Failed to delete member.");
-    }
+    },
   });
 
   const memberList = membersPayload?.data || [];
@@ -170,125 +221,180 @@ export const MembersPage = () => {
   };
 
   return (
-    <div className="space-y-6 animate-fade-in bg-transparent font-sans text-xs sm:text-sm text-slate-700 pb-12">
-      
-      {/* Page Core Header Block - Spacious Layout Ivory Card */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-6 rounded-2xl border border-slate-200/60 shadow-xs">
+    <div className="flex flex-col min-h-screen relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
+      {/* Page Core Header Block */}
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Members Management Desk</h2>
-          <p className="text-xs text-slate-500 mt-1 font-medium leading-relaxed">
-            Click any record row to manage tier tracking, view info cards, or extend membership renewals.
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Members Management Desk
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">
+            Click any record row to manage tier tracking, view info cards, or
+            extend membership renewals.
           </p>
         </div>
         <button
-          onClick={() => { setSelectedMember(null); setIsFormOpen(true); }}
-          className="flex items-center gap-2 px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl transition-all whitespace-nowrap cursor-pointer shadow-xs self-stretch sm:self-auto justify-center"
+          onClick={() => {
+            setSelectedMember(null);
+            setIsFormOpen(true);
+          }}
+          className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all whitespace-nowrap cursor-pointer self-stretch sm:self-auto justify-center"
         >
-          <Plus size={14} />
-          <span>Add New Member</span>
+          <Plus size={14} /> Add New Member
         </button>
       </div>
 
-      {/* Control Utility Filter Toolbar Line */}
-      <div className="flex flex-col md:flex-row gap-4 bg-white p-5 rounded-2xl border border-slate-200/60 shadow-xs">
+      {/* Synchronized Filtering Control Pipeline Ribbon */}
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
+        {/* 🔍 Search Input Anchor Box */}
         <div className="relative flex-1 w-full">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+            <Search size={16} />
+          </span>
           <input
             type="text"
             placeholder="Search by member name..."
             value={searchTerm}
-            onChange={(e) => { setSearchTerm(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-11 pr-4 py-2 bg-slate-50 border border-slate-200 text-slate-900 rounded-xl text-xs sm:text-sm font-medium placeholder:text-slate-400 focus:bg-white focus:border-slate-900 outline-hidden focus:ring-4 focus:ring-slate-900/5 transition-all"
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-10 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
           />
-          <Search size={16} className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
+          {searchTerm && (
+            <button
+              type="button"
+              onClick={() => {
+                setSearchTerm("");
+              }}
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-text-main p-0.5 cursor-pointer transition-colors"
+            >
+              <X size={14} />
+            </button>
+          )}
         </div>
 
-        <div className="grid grid-cols-2 sm:flex gap-3 w-full md:w-auto">
-          <select
-            value={tierFilter}
-            onChange={(e) => { setTierFilter(e.target.value); setCurrentPage(1); }}
-            className="px-4 py-2 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl text-xs sm:text-sm font-bold uppercase tracking-wider outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white cursor-pointer"
-          >
-            <option value="">All Membership Plans</option>
-            {plans.map((p) => (
-              <option key={p.membership_plan_id} value={p.plan_name}>
-                {p.plan_name}
-              </option>
-            ))}
-          </select>
+        {/* Action Dropdowns Group Container */}
+        <div className="flex flex-wrap md:flex-nowrap gap-2.5 w-full md:w-auto items-center">
+          {/* Membership Tier Dropdown */}
+          <div className="w-full md:w-48 relative">
+            <select
+              value={tierFilter}
+              onChange={(e) => {
+                setTierFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+            >
+              <option value="">All Membership Plans</option>
+              {plans.map((p) => (
+                <option key={p.membership_plan_id} value={p.plan_name}>
+                  {p.plan_name}
+                </option>
+              ))}
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
 
-          <select
-            value={statusFilter}
-            onChange={(e) => { setStatusFilter(e.target.value); setCurrentPage(1); }}
-            className="px-4 py-2 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl text-xs sm:text-sm font-bold uppercase tracking-wider outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white cursor-pointer"
-          >
-            <option value="">All Statuses</option>
-            <option value="ACTIVE">Active Plan</option>
-            <option value="EXPIRED">Expired Plan</option>
-          </select>
+          {/* Account Status Filter Box */}
+          <div className="w-full md:w-40 relative">
+            <select
+              value={statusFilter}
+              onChange={(e) => {
+                setStatusFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+            >
+              <option value="">All Statuses</option>
+              <option value="ACTIVE">Active Plan</option>
+              <option value="EXPIRED">Expired Plan</option>
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
 
+          {/* Reset Filters Command */}
           <button
+            type="button"
             onClick={handleClearFilters}
-            className="px-4 py-2 bg-slate-100 hover:bg-slate-200 border border-slate-200 text-slate-600 text-xs font-bold uppercase tracking-wider rounded-xl transition-all cursor-pointer col-span-2 sm:col-auto whitespace-nowrap"
+            className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            Reset
+            <RotateCcw size={12} /> Reset
           </button>
         </div>
       </div>
 
       {/* Master Content Ledger Grid Table */}
       {isLoading ? (
-        <div className="text-center py-24 text-xs text-slate-400 font-bold uppercase tracking-widest animate-pulse">
+        <div className="text-center py-20 text-xs sm:text-sm text-slate-400 font-semibold animate-pulse flex-1 flex flex-col items-center justify-center gap-2">
           Syncing Library Membership Database...
         </div>
       ) : (
-        <div className="space-y-4">
-          <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
+        <div className="flex flex-col flex-1 space-y-5">
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
-                  <tr className="border-b border-slate-100 text-[10px] sm:text-xs font-bold text-slate-400 uppercase bg-slate-50/50 tracking-wider">
-                    <th className="py-4 px-6">Member Name</th>
-                    <th className="py-4 px-6">Contact Details</th>
-                    <th className="py-4 px-6">Current Plan</th>
-                    <th className="py-4 px-6">Plan Expiry Date</th>
-                    <th className="py-4 px-6 text-center">Status</th>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">Member Name</th>
+                    <th className="py-3.5 px-5">Contact Details</th>
+                    <th className="py-3.5 px-5">Current Plan</th>
+                    <th className="py-3.5 px-5">Plan Expiry Date</th>
+                    <th className="py-3.5 px-5 text-center">Status</th>
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
                   {memberList.length === 0 ? (
                     <tr>
-                      <td colSpan={5} className="py-20 text-center text-xs text-slate-500 font-medium">
-                        No active matching subscriber accounts found on server indexing.
+                      <td
+                        colSpan={5}
+                        className="py-20 text-center text-xs text-slate-500 font-medium"
+                      >
+                        No active matching subscriber accounts found on server
+                        indexing.
                       </td>
                     </tr>
                   ) : (
-                    memberList.map(member => (
-                      <tr 
-                        key={member.id} 
-                        onClick={() => { setSelectedMember(member); setIsDetailsOpen(true); }}
-                        className="hover:bg-slate-50 transition-colors cursor-pointer group select-none"
+                    memberList.map((member) => (
+                      <tr
+                        key={member.id}
+                        onClick={() => {
+                          setSelectedMember(member);
+                          setIsDetailsOpen(true);
+                        }}
+                        className="hover:bg-slate-50/80 transition-colors cursor-pointer group select-none"
                       >
-                        <td className="py-4 px-6 font-bold text-slate-900 transition-colors">
+                        <td className="py-3.5 px-5 font-bold text-text-main">
                           {member.name}
                         </td>
-                        <td className="py-4 px-6">
-                          <div className="font-semibold text-slate-800">{member.email}</div>
-                          <div className="text-[11px] sm:text-xs text-slate-400 mt-0.5 font-medium">{member.phoneNumber || "No Phone Contact"}</div>
+                        <td className="py-3.5 px-5">
+                          <div className="font-semibold text-slate-800">
+                            {member.email}
+                          </div>
+                          <div className="text-[11px] text-slate-400 mt-0.5 font-medium">
+                            {member.phoneNumber || "No Phone Contact"}
+                          </div>
                         </td>
-                        <td className="py-4 px-6">
-                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-lg text-[11px] sm:text-xs font-bold bg-slate-100 text-slate-700 border border-slate-200/40">
+                        <td className="py-3.5 px-5">
+                          <span className="inline-flex items-center px-2.5 py-0.5 rounded-lg text-[11px] font-bold uppercase tracking-wider bg-slate-50 border border-slate-100 text-text-main">
                             {member.membershipPlanName}
                           </span>
                         </td>
-                        <td className="py-4 px-6 font-semibold text-slate-500">
+                        <td className="py-3.5 px-5 font-mono font-bold text-slate-500">
                           {member.expiryDate}
                         </td>
-                        <td className="py-4 px-6 text-center">
-                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] sm:text-xs font-bold border ${
-                            member.isActive 
-                              ? "bg-emerald-50 text-emerald-700 border-emerald-200" 
-                              : "bg-rose-50 text-rose-700 border-rose-200"
-                          }`}>
+                        <td className="py-3.5 px-5 text-center">
+                          <span
+                            className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-bold uppercase tracking-wider border ${
+                              member.isActive
+                                ? "bg-emerald-50 text-emerald-700 border-emerald-200"
+                                : "bg-rose-50 text-rose-700 border-rose-200"
+                            }`}
+                          >
                             {member.isActive ? "Active" : "Expired"}
                           </span>
                         </td>
@@ -300,29 +406,39 @@ export const MembersPage = () => {
             </div>
 
             {/* Pagination Navigation Footer Deck */}
-            <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
-              <span>
-                 Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalItems} Members
-              </span>
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  disabled={currentPage === 1 || totalPages <= 1}
-                  onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.max(prev - 1, 1)); }}
-                  className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                >
-                  <ChevronLeft size={14} />
-                </button>
-                <button
-                  type="button"
-                  disabled={currentPage === totalPages || totalPages <= 1}
-                  onClick={(e) => { e.stopPropagation(); setCurrentPage(prev => Math.min(prev + 1, totalPages)); }}
-                  className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                >
-                  <ChevronRight size={14} />
-                </button>
+            {totalPages > 0 && (
+              <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+                <span>
+                  Page {currentPage} / {totalPages}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalItems} Members
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1 || totalPages <= 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((prev) => Math.max(prev - 1, 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPages || totalPages <= 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((prev) => Math.min(prev + 1, totalPages));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       )}
@@ -337,15 +453,18 @@ export const MembersPage = () => {
         editingMember={selectedMember}
       />
 
-      <MemberDetailsModal 
+      <MemberDetailsModal
         isOpen={isDetailsOpen}
         onClose={() => setIsDetailsOpen(false)}
         member={selectedMember}
         plans={plans}
         onDelete={(id) => deleteMutation.mutate(id)}
-        onRenew={(planId) => selectedMember && renewMutation.mutate({ memberId: selectedMember.id, planId })}
+        onRenew={(planId) =>
+          selectedMember &&
+          renewMutation.mutate({ memberId: selectedMember.id, planId })
+        }
         isRenewing={renewMutation.isPending}
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/membershipPlans/components/DeletePlanModal.tsx b/client/src/features/membershipPlans/components/DeletePlanModal.tsx
index 6647fe8..b3aed0d 100644
--- a/client/src/features/membershipPlans/components/DeletePlanModal.tsx
+++ b/client/src/features/membershipPlans/components/DeletePlanModal.tsx
@@ -12,41 +12,51 @@ interface DeletePlanModalProps {
   onSuccessRedirect: () => void;
 }
 
-export const DeletePlanModal = ({ isOpen, planId, planName, onClose, onSuccessRedirect }: DeletePlanModalProps) => {
+export const DeletePlanModal = ({
+  isOpen,
+  planId,
+  planName,
+  onClose,
+  onSuccessRedirect,
+}: DeletePlanModalProps) => {
   const queryClient = useQueryClient();
 
   const deleteMutation = useMutation({
     mutationFn: async () => {
       return await axiosClient.delete(`/plan/delete`, {
-        data: { membership_plan_id: planId }
+        data: { membership_plan_id: planId },
       });
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["membershipPlansMasterFeed"] });
-      toast.info(`Scheme model data "${planName}" cleanly dropped from database.`);
+      queryClient.invalidateQueries({
+        queryKey: ["membershipPlansMasterFeed"],
+      });
+      toast.info(
+        `Scheme model data "${planName}" cleanly dropped from database.`,
+      );
       onSuccessRedirect();
     },
     onError: (err: unknown) => {
-      let errorMessage = "Database execution error. Relational integrity rules may prohibit this operation.";
+      let errorMessage =
+        "Database execution error. Relational integrity rules may prohibit this operation.";
       if (axios.isAxiosError(err) && err.response?.data?.message) {
         errorMessage = err.response.data.message;
       }
       toast.error(errorMessage);
-    }
+    },
   });
 
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 animate-fade-in text-left">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden border border-amber-100/80 animate-zoom-in relative">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-sm overflow-hidden border border-amber-100/80 animate-zoom-in relative">
         {/* Absolute Positioning Dismiss Controller */}
         <div className="absolute right-4 top-4">
-          <button 
+          <button
             type="button"
             onClick={onClose}
-            className="text-slate-400 hover:text-slate-900 transition-colors p-1 hover:bg-slate-50 rounded-lg cursor-pointer"
+            className="text-slate-400 hover:text-text-main transition-colors p-1 hover:bg-slate-50 rounded-lg cursor-pointer"
           >
             <X size={18} />
           </button>
@@ -58,32 +68,39 @@ export const DeletePlanModal = ({ isOpen, planId, planName, onClose, onSuccessRe
             <AlertTriangle size={26} className="text-rose-600" />
           </div>
 
-          <h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide">Delete Membership Plan</h3>
-          
+          <h3 className="text-sm font-bold text-text-main uppercase tracking-wide">
+            Delete Membership Plan
+          </h3>
+
           <p className="text-xs text-slate-500 font-medium mt-3 leading-relaxed px-2">
-            Are you absolutely sure you want to permanently drop the configuration plan <span className="font-bold text-slate-900">"{planName}"</span> from the target database cluster tables?
+            Are you absolutely sure you want to permanently drop the
+            configuration plan{" "}
+            <span className="font-bold text-text-main">"{planName}"</span> from
+            the target database cluster tables?
           </p>
 
           {/* Relational Constraints Alert Notice Callout Block */}
           <div className="mt-5 p-4 bg-amber-50/60 rounded-xl border border-amber-200/60 flex items-start gap-2.5 text-left">
             <AlertCircle size={16} className="text-amber-600 shrink-0 mt-0.5" />
             <p className="text-[11px] text-amber-900 font-bold leading-normal uppercase tracking-tight">
-              Relational Hazard: Members currently bound to this specific plan model id may experience query faults during system verification checkups.
+              Relational Hazard: Members currently bound to this specific plan
+              model id may experience query faults during system verification
+              checkups.
             </p>
           </div>
         </div>
 
         {/* Dynamic Action Trigger Tray */}
         <div className="px-6 py-4 bg-slate-50 border-t border-slate-100 flex gap-3 text-xs font-bold tracking-wide">
-          <button 
-            type="button" 
-            onClick={onClose} 
-            className="flex-1 py-3 text-slate-700 bg-white border border-slate-200 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex-1 py-3 text-text-main bg-card-bg border border-border-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
           >
             Abort
           </button>
-          <button 
-            type="button" 
+          <button
+            type="button"
             onClick={() => deleteMutation.mutate()}
             disabled={deleteMutation.isPending}
             className="flex-1 py-3 text-white bg-rose-600 hover:bg-rose-700 shadow-sm rounded-xl transition-all cursor-pointer disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed"
@@ -91,8 +108,7 @@ export const DeletePlanModal = ({ isOpen, planId, planName, onClose, onSuccessRe
             {deleteMutation.isPending ? "Dropping..." : "Confirm Purge"}
           </button>
         </div>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/membershipPlans/components/PlanDetailsModal.tsx b/client/src/features/membershipPlans/components/PlanDetailsModal.tsx
index 5783d78..c32078c 100644
--- a/client/src/features/membershipPlans/components/PlanDetailsModal.tsx
+++ b/client/src/features/membershipPlans/components/PlanDetailsModal.tsx
@@ -1,6 +1,14 @@
 import { useState } from "react";
 import type { MembershipPlan } from "../pages/ManagePlan";
-import { X, Layers, Calendar, BookOpen, Settings, Trash2, IndianRupee } from "lucide-react";
+import {
+  X,
+  Layers,
+  Calendar,
+  BookOpen,
+  Settings,
+  Trash2,
+  IndianRupee,
+} from "lucide-react";
 import { PlanModal } from "./PlanModal";
 import { DeletePlanModal } from "./DeletePlanModal";
 
@@ -10,7 +18,11 @@ interface PlanDetailsModalProps {
   onClose: () => void;
 }
 
-export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProps) => {
+export const PlanDetailsModal = ({
+  isOpen,
+  plan,
+  onClose,
+}: PlanDetailsModalProps) => {
   const [showEditModal, setShowEditModal] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
@@ -21,18 +33,21 @@ export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProp
   return (
     <>
       <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 animate-fade-in text-left">
-        <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100/80 animate-zoom-in text-slate-700">
-          
+        <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100/80 animate-zoom-in text-text-main">
           {/* Header Strip Layer */}
           <div className="text-white border-b border-slate-100 px-6 py-5 bg-slate-900 flex justify-between items-center">
             <div>
-              <h3 className="text-xl font-bold uppercase tracking-wide">Plan Details</h3>
-              <p className="font-mono text-xs text-slate-400 tracking-wider mt-0.5">Plan ID: PLAN-{displayId}</p>
+              <h3 className="text-xl font-bold uppercase tracking-wide">
+                Plan Details
+              </h3>
+              <p className="font-mono text-xs text-slate-400 tracking-wider mt-0.5">
+                Plan ID: PLAN-{displayId}
+              </p>
             </div>
-            <button 
+            <button
               type="button"
-              onClick={onClose} 
-              className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-slate-900 transition-colors cursor-pointer"
+              onClick={onClose}
+              className="p-1.5 hover:bg-slate-100 rounded-lg text-slate-400 hover:text-text-main transition-colors cursor-pointer"
             >
               <X size={16} />
             </button>
@@ -41,26 +56,32 @@ export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProp
           {/* Details Body Context Frame */}
           <div className="p-6 space-y-4">
             <div className="space-y-1">
-              <span className="text-slate-400 block text-xs uppercase font-bold tracking-wide">Plan Name</span>
-              <div className="text-base font-bold text-slate-900 bg-slate-50 p-3.5 rounded-xl border border-slate-200/60 flex items-center gap-2">
+              <span className="text-slate-400 block text-xs uppercase font-bold tracking-wide">
+                Plan Name
+              </span>
+              <div className="text-base font-bold text-text-main bg-slate-50 p-3.5 rounded-xl border border-border-main/60 flex items-center gap-2">
                 <Layers size={16} className="text-amber-500 shrink-0" />
                 <span>{plan.plan_name}</span>
               </div>
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/60 space-y-1">
+              <div className="bg-slate-50 p-4 rounded-xl border border-border-main/60 space-y-1">
                 <span className="text-slate-400 text-xs uppercase font-bold tracking-wide flex items-center gap-1">
                   <Calendar size={12} /> Duration (Days)
                 </span>
-                <span className="font-mono font-bold text-slate-900 text-base block">{plan.duration_days} Days</span>
+                <span className="font-mono font-bold text-text-main text-base block">
+                  {plan.duration_days} Days
+                </span>
               </div>
 
-              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/60 space-y-1">
+              <div className="bg-slate-50 p-4 rounded-xl border border-border-main/60 space-y-1">
                 <span className="text-slate-400 text-xs uppercase font-bold tracking-wide flex items-center gap-1">
                   <BookOpen size={12} /> Max Limit
                 </span>
-                <span className="font-mono font-bold text-slate-900 text-base block">{plan.max_books_allowed} Books</span>
+                <span className="font-mono font-bold text-text-main text-base block">
+                  {plan.max_books_allowed} Books
+                </span>
               </div>
             </div>
 
@@ -71,20 +92,22 @@ export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProp
                   <IndianRupee size={12} /> Plan Price
                 </span>
               </div>
-              <span className="font-mono font-bold text-2xl text-amber-400">₹{plan.price}</span>
+              <span className="font-mono font-bold text-2xl text-amber-400">
+                ₹{plan.price}
+              </span>
             </div>
           </div>
 
           {/* Core Configuration Control Base Actions */}
           <div className="p-4 bg-slate-50/50 border-t border-slate-100 grid grid-cols-2 gap-3 text-xs font-bold tracking-wide">
-            <button 
+            <button
               type="button"
               onClick={() => setShowDeleteConfirm(true)}
-              className="flex items-center justify-center gap-1.5 py-3 px-4 bg-white border border-rose-200 text-rose-600 uppercase rounded-xl hover:bg-rose-50 transition-all cursor-pointer shadow-sm"
+              className="flex items-center justify-center gap-1.5 py-3 px-4 bg-card-bg border border-rose-200 text-rose-600 uppercase rounded-xl hover:bg-rose-50 transition-all cursor-pointer shadow-sm"
             >
               <Trash2 size={14} /> Delete Plan
             </button>
-            <button 
+            <button
               type="button"
               onClick={() => setShowEditModal(true)}
               className="flex items-center justify-center gap-1.5 py-3 px-4 bg-slate-900 hover:bg-slate-800 text-amber-50 uppercase rounded-xl transition-all cursor-pointer shadow-sm"
@@ -92,28 +115,27 @@ export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProp
               <Settings size={14} /> Edit Plan
             </button>
           </div>
-
         </div>
       </div>
 
       {showEditModal && (
-        <PlanModal 
-          isOpen={showEditModal} 
-          mode="edit" 
-          plan={plan} 
+        <PlanModal
+          isOpen={showEditModal}
+          mode="edit"
+          plan={plan}
           onClose={() => {
             setShowEditModal(false);
             onClose();
-          }} 
+          }}
         />
       )}
 
       {showDeleteConfirm && (
-        <DeletePlanModal 
-          isOpen={showDeleteConfirm} 
-          planId={plan.membership_plan_id} 
-          planName={plan.plan_name} 
-          onClose={() => setShowDeleteConfirm(false)} 
+        <DeletePlanModal
+          isOpen={showDeleteConfirm}
+          planId={plan.membership_plan_id}
+          planName={plan.plan_name}
+          onClose={() => setShowDeleteConfirm(false)}
           onSuccessRedirect={() => {
             setShowDeleteConfirm(false);
             onClose();
@@ -122,4 +144,4 @@ export const PlanDetailsModal = ({ isOpen, plan, onClose }: PlanDetailsModalProp
       )}
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/membershipPlans/components/PlanModal.tsx b/client/src/features/membershipPlans/components/PlanModal.tsx
index 7486241..74c9a4d 100644
--- a/client/src/features/membershipPlans/components/PlanModal.tsx
+++ b/client/src/features/membershipPlans/components/PlanModal.tsx
@@ -17,34 +17,54 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
   const queryClient = useQueryClient();
 
   // Initialize state directly from props to eliminate cascading render warnings
-  const [planName, setPlanName] = useState(() => (mode === "edit" && plan ? plan.plan_name : ""));
-  const [price, setPrice] = useState(() => (mode === "edit" && plan ? String(plan.price) : ""));
-  const [durationDays, setDurationDays] = useState(() => (mode === "edit" && plan ? String(plan.duration_days) : ""));
-  const [maxBooks, setMaxBooks] = useState(() => (mode === "edit" && plan ? String(plan.max_books_allowed) : ""));
+  const [planName, setPlanName] = useState(() =>
+    mode === "edit" && plan ? plan.plan_name : "",
+  );
+  const [price, setPrice] = useState(() =>
+    mode === "edit" && plan ? String(plan.price) : "",
+  );
+  const [durationDays, setDurationDays] = useState(() =>
+    mode === "edit" && plan ? String(plan.duration_days) : "",
+  );
+  const [maxBooks, setMaxBooks] = useState(() =>
+    mode === "edit" && plan ? String(plan.max_books_allowed) : "",
+  );
 
   const planMutation = useMutation({
-    mutationFn: async (payload: { plan_name: string; price: number; duration_days: number; max_books_allowed: number }) => {
+    mutationFn: async (payload: {
+      plan_name: string;
+      price: number;
+      duration_days: number;
+      max_books_allowed: number;
+    }) => {
       if (mode === "create") {
         return await axiosClient.post("/plan/create", payload);
       } else {
         return await axiosClient.patch(`/plan/edit`, {
           membership_plan_id: plan?.membership_plan_id,
-          ...payload
+          ...payload,
         });
       }
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["membershipPlansMasterFeed"] });
-      toast.success(mode === "create" ? "🎉 New Membership Plan Created Successfully" : "Plan Updated Successfully");
+      queryClient.invalidateQueries({
+        queryKey: ["membershipPlansMasterFeed"],
+      });
+      toast.success(
+        mode === "create"
+          ? "🎉 New Membership Plan Created Successfully"
+          : "Plan Updated Successfully",
+      );
       onClose();
     },
     onError: (err: unknown) => {
-      let errorMessage = "Execution error rejected parameter payload metrics map.";
+      let errorMessage =
+        "Execution error rejected parameter payload metrics map.";
       if (axios.isAxiosError(err) && err.response?.data?.message) {
         errorMessage = err.response.data.message;
       }
       toast.error(errorMessage);
-    }
+    },
   });
 
   if (!isOpen) return null;
@@ -59,33 +79,33 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
       plan_name: planName.trim(),
       price: Number(price),
       duration_days: Number(durationDays),
-      max_books_allowed: Number(maxBooks)
+      max_books_allowed: Number(maxBooks),
     });
   };
 
   return (
     <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 animate-fade-in text-left">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100/80 animate-zoom-in">
-        
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-amber-100/80 animate-zoom-in">
         {/* Header Ribbon Layer - Clean Light Structured Banner */}
         <div className="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-900 text-white">
           <h3 className="text-xl font-bold uppercase tracking-wide">
             {mode === "create" ? "Add New Plan" : "Modify Plan Details"}
           </h3>
-          <button 
+          <button
             type="button"
-            onClick={onClose} 
-            className="p-1.5 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
+            onClick={onClose}
+            className="p-1.5 text-slate-400 hover:text-text-main hover:bg-slate-100 rounded-lg transition-colors cursor-pointer"
           >
             <X size={16} />
           </button>
         </div>
 
-        <form onSubmit={handleSubmit} className="p-6 space-y-5 text-slate-700">
-          
+        <form onSubmit={handleSubmit} className="p-6 space-y-5 text-text-main">
           {/* Form Element: Plan Title Entry */}
           <div className="space-y-1.5">
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Plan Name *</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+              Plan Name *
+            </label>
             <div className="relative">
               <input
                 type="text"
@@ -93,15 +113,20 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
                 placeholder="e.g. Bronze, Gold Tier, Corporate Pro"
                 value={planName}
                 onChange={(e) => setPlanName(e.target.value)}
-                className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-base font-semibold text-slate-900 placeholder:text-slate-400 outline-none focus:bg-white focus:border-slate-400 transition-all"
+                className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-border-main rounded-xl text-base font-semibold text-text-main placeholder:text-slate-400 outline-none focus:bg-card-bg focus:border-slate-400 transition-all"
+              />
+              <Layers
+                size={16}
+                className="text-slate-400 absolute left-4 top-3.5"
               />
-              <Layers size={16} className="text-slate-400 absolute left-4 top-3.5" />
             </div>
           </div>
 
           {/* Form Element: Cost Calculation Matrix Input */}
           <div className="space-y-1.5">
-            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Plan Price (₹ INR) *</label>
+            <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+              Plan Price (₹ INR) *
+            </label>
             <div className="relative">
               <input
                 type="number"
@@ -110,16 +135,21 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
                 placeholder="0 for public free tier schemas"
                 value={price}
                 onChange={(e) => setPrice(e.target.value)}
-                className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-base font-bold text-slate-900 placeholder:text-slate-400 outline-none focus:bg-white focus:border-slate-400 transition-all"
+                className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-border-main rounded-xl text-base font-bold text-text-main placeholder:text-slate-400 outline-none focus:bg-card-bg focus:border-slate-400 transition-all"
+              />
+              <IndianRupee
+                size={16}
+                className="text-slate-400 absolute left-4 top-3.5"
               />
-              <IndianRupee size={16} className="text-slate-400 absolute left-4 top-3.5" />
             </div>
           </div>
 
           {/* Form Element Column Rows Layout Splits */}
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <div className="space-y-1.5">
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Duration (Days) *</label>
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+                Duration (Days) *
+              </label>
               <div className="relative">
                 <input
                   type="number"
@@ -128,14 +158,19 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
                   placeholder="e.g. 90"
                   value={durationDays}
                   onChange={(e) => setDurationDays(e.target.value)}
-                  className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-base font-bold text-slate-900 placeholder:text-slate-400 outline-none focus:bg-white focus:border-slate-400 transition-all"
+                  className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-border-main rounded-xl text-base font-bold text-text-main placeholder:text-slate-400 outline-none focus:bg-card-bg focus:border-slate-400 transition-all"
+                />
+                <Calendar
+                  size={16}
+                  className="text-slate-400 absolute left-4 top-3.5"
                 />
-                <Calendar size={16} className="text-slate-400 absolute left-4 top-3.5" />
               </div>
             </div>
 
             <div className="space-y-1.5">
-              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">Max Borrow Limit *</label>
+              <label className="text-xs font-bold text-slate-400 uppercase tracking-wide block">
+                Max Borrow Limit *
+              </label>
               <div className="relative">
                 <input
                   type="number"
@@ -144,19 +179,22 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
                   placeholder="e.g. 15"
                   value={maxBooks}
                   onChange={(e) => setMaxBooks(e.target.value)}
-                  className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-base font-bold text-slate-900 placeholder:text-slate-400 outline-none focus:bg-white focus:border-slate-400 transition-all"
+                  className="w-full pl-11 pr-4 py-3 bg-slate-50 border border-border-main rounded-xl text-base font-bold text-text-main placeholder:text-slate-400 outline-none focus:bg-card-bg focus:border-slate-400 transition-all"
+                />
+                <BookOpen
+                  size={16}
+                  className="text-slate-400 absolute left-4 top-3.5"
                 />
-                <BookOpen size={16} className="text-slate-400 absolute left-4 top-3.5" />
               </div>
             </div>
           </div>
 
           {/* Interactive Footer Controls Frame */}
           <div className="pt-5 border-t border-slate-100 flex gap-3 text-xs font-bold tracking-wide">
-            <button 
-              type="button" 
-              onClick={onClose} 
-              className="flex-1 py-3 bg-slate-50 border border-slate-200 text-slate-700 rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-3 bg-slate-50 border border-border-main text-text-main rounded-xl transition-all hover:bg-slate-100 cursor-pointer"
             >
               Cancel
             </button>
@@ -165,12 +203,12 @@ export const PlanModal = ({ isOpen, mode, plan, onClose }: PlanModalProps) => {
               disabled={planMutation.isPending}
               className="flex-1 py-3 bg-slate-900 hover:bg-slate-800 text-amber-50 rounded-xl flex items-center justify-center gap-2 transition-all cursor-pointer shadow-sm disabled:bg-slate-100 disabled:text-slate-400 disabled:cursor-not-allowed"
             >
-              <Save size={15} /> {planMutation.isPending ? "Syncing..." : "Confirm"}
+              <Save size={15} />{" "}
+              {planMutation.isPending ? "Syncing..." : "Confirm"}
             </button>
           </div>
-
         </form>
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/membershipPlans/pages/ManagePlan.tsx b/client/src/features/membershipPlans/pages/ManagePlan.tsx
index 42cf38c..8d705ec 100644
--- a/client/src/features/membershipPlans/pages/ManagePlan.tsx
+++ b/client/src/features/membershipPlans/pages/ManagePlan.tsx
@@ -7,7 +7,17 @@ import { PlanModal } from "../components/PlanModal";
 import { PlanDetailsModal } from "../components/PlanDetailsModal";
 
 // Lucide Icons
-import { Search, ChevronLeft, ChevronRight, Plus, RotateCcw, Award, BookOpen } from "lucide-react";
+import {
+  Search,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Plus,
+  RotateCcw,
+  Award,
+  BookOpen,
+  X,
+} from "lucide-react";
 
 export interface MembershipPlan {
   membership_plan_id: string;
@@ -34,13 +44,15 @@ export const ManagePlan = () => {
   const rowsPerPage = 10;
 
   // Fetch Data Stream from Database
-  const { data: plansFeedPayload = [], isLoading } = useQuery<MembershipPlan[]>({
-    queryKey: ["membershipPlansMasterFeed"],
-    queryFn: async () => {
-      const response = await axiosClient.get("/plan");
-      return response.data?.data || response.data || [];
-    }
-  });
+  const { data: plansFeedPayload = [], isLoading } = useQuery<MembershipPlan[]>(
+    {
+      queryKey: ["membershipPlansMasterFeed"],
+      queryFn: async () => {
+        const response = await axiosClient.get("/plan");
+        return response.data?.data || response.data || [];
+      },
+    },
+  );
 
   // Clear Filters Pipeline
   const handleClearFilters = () => {
@@ -75,190 +87,257 @@ export const ManagePlan = () => {
   const totalPagesCount = Math.ceil(totalItemsCount / rowsPerPage) || 1;
   const paginatedRowsData = filteredPlans.slice(
     (currentPage - 1) * rowsPerPage,
-    currentPage * rowsPerPage
+    currentPage * rowsPerPage,
   );
 
   return (
-    <div className="space-y-6 animate-fade-in pb-12 text-left bg-[#fafafa] min-h-screen font-sans text-xs sm:text-sm text-slate-700">
-      
+    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 font-sans text-xs sm:text-sm text-text-main text-left">
       {/* Header Deck View */}
-      <div className="bg-white p-6 rounded-2xl border border-slate-200/60 shadow-sm flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 mb-5 rounded-2xl border border-border-main shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Membership Plans Management Desk</h2>
-          <p className="text-xs text-slate-500 mt-1 font-medium leading-relaxed">
-            Configure available registration tiers, duration indexes, and checkout limits.
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Membership Plans Management Desk
+          </h2>
+          <p className="text-xs text-slate-500 mt-0.5 font-medium leading-relaxed">
+            Configure available registration tiers, duration indexes, and
+            checkout limits.
           </p>
         </div>
 
         <button
           type="button"
           onClick={() => setShowCreateModal(true)}
-          className="flex items-center gap-2 px-4 py-2 text-xs font-bold uppercase tracking-wider bg-slate-900 hover:bg-slate-800 text-white rounded-xl transition-all cursor-pointer self-stretch sm:self-auto justify-center shadow-xs"
+          className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 hover:bg-slate-800 text-white text-xs font-bold uppercase tracking-wider rounded-xl shadow-xs transition-all cursor-pointer whitespace-nowrap self-stretch sm:self-auto justify-center"
         >
           <Plus size={14} /> Add New Plan
         </button>
       </div>
 
-      {/* Control Grid Pipeline Filters */}
-      <div className="bg-white p-5 rounded-2xl border border-slate-200/60 shadow-sm flex flex-col md:flex-row gap-4 items-center">
-        <div className="relative w-full md:flex-1">
+      {/* Control Grid Pipeline Filters (Synchronized inline form alignment layout) */}
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 mb-5 rounded-2xl border border-border-main shadow-2xs shrink-0">
+        {/* Search Field Anchor Box */}
+        <div className="relative flex-1 w-full">
+          <span className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+            <Search size={16} />
+          </span>
           <input
             type="text"
             placeholder="Search plan schemes by profile names..."
             value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-11 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-medium text-slate-900 placeholder:text-slate-400 outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white transition-all"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-10 py-2 bg-slate-50 border border-border-main text-text-main rounded-xl text-xs sm:text-sm font-medium outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all placeholder-slate-400"
           />
-          <Search size={16} className="text-slate-400 absolute left-4 top-1/2 -translate-y-1/2" />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => {
+                setSearchQuery("");
+              }}
+              className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 hover:text-text-main p-0.5 cursor-pointer transition-colors"
+            >
+              <X size={14} />
+            </button>
+          )}
         </div>
 
-        <div className="w-full md:w-48 relative">
-          <select
-            value={durationFilter}
-            onChange={(e) => { setDurationFilter(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-bold uppercase tracking-wider text-slate-700 appearance-none outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white cursor-pointer"
-          >
-            <option value="">All Durations</option>
-            <option value="30">30 Days</option>
-            <option value="90">90 Days</option>
-            <option value="180">180 Days</option>
-            <option value="365">365 Days</option>
-          </select>
-        </div>
+        {/* Action Select Dropdowns Group Container */}
+        <div className="flex flex-wrap md:flex-nowrap gap-2.5 w-full md:w-auto items-center">
+          {/* Duration Selector Block */}
+          <div className="w-full md:w-44 relative">
+            <select
+              value={durationFilter}
+              onChange={(e) => {
+                setDurationFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+            >
+              <option value="">All Durations</option>
+              <option value="30">30 Days</option>
+              <option value="90">90 Days</option>
+              <option value="180">180 Days</option>
+              <option value="365">365 Days</option>
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
 
-        <div className="w-full md:w-48 relative">
-          <select
-            value={priceSortFilter}
-            onChange={(e) => { setPriceSortFilter(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs sm:text-sm font-bold uppercase tracking-wider text-slate-700 appearance-none outline-hidden focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 focus:bg-white cursor-pointer"
+          {/* Pricing Sort Selector Block */}
+          <div className="w-full md:w-44 relative">
+            <select
+              value={priceSortFilter}
+              onChange={(e) => {
+                setPriceSortFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full pl-4 pr-10 py-2 bg-slate-50 border border-border-main text-slate-800 rounded-xl text-xs font-bold uppercase tracking-wider appearance-none outline-hidden focus:bg-card-bg focus:ring-4 focus:ring-slate-900/5 focus:border-slate-900 transition-all cursor-pointer"
+            >
+              <option value="">Price Order</option>
+              <option value="low-to-high">Low to High</option>
+              <option value="high-to-low">High to Low</option>
+            </select>
+            <span className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">
+              <ChevronDown size={14} />
+            </span>
+          </div>
+
+          {/* Reset Action Control Trigger */}
+          <button
+            type="button"
+            onClick={handleClearFilters}
+            className="px-4 py-2 h-8.5 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            <option value="">Price Order</option>
-            <option value="low-to-high">Price: Low to High</option>
-            <option value="high-to-low">Price: High to Low</option>
-          </select>
+            <RotateCcw size={12} /> Reset
+          </button>
         </div>
-
-        <button
-          type="button"
-          onClick={handleClearFilters}
-          className="w-full md:w-auto px-4 py-2 text-xs font-bold uppercase tracking-wider bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-xl transition-all cursor-pointer flex items-center justify-center gap-2 shrink-0"
-        >
-          <RotateCcw size={14} /> Reset
-        </button>
       </div>
 
       {/* Central Interactive Data Core Grid Matrix */}
       {isLoading ? (
-        <div className="text-center py-24 text-xs font-bold uppercase tracking-widest text-slate-400 animate-pulse">
+        <div className="text-center py-20 text-xs sm:text-sm text-slate-400 font-semibold animate-pulse flex-1 flex flex-col items-center justify-center gap-2">
           Streaming Active Membership Matrix Configuration Tiers...
         </div>
       ) : (
-        <div className="bg-white rounded-2xl border border-slate-200/60 shadow-sm overflow-hidden">
-          <div className="overflow-x-auto">
-            <table className="w-full text-left border-collapse">
-              <thead>
-                <tr className="border-b border-slate-100 text-[10px] sm:text-xs font-bold text-slate-400 uppercase bg-slate-50/50 tracking-wider">
-                  <th className="py-4 px-6">Plan ID</th>
-                  <th className="py-4 px-6">Plan Name</th>
-                  <th className="py-4 px-6 text-center">Duration</th>
-                  <th className="py-4 px-6 text-center">Max Borrow Limit</th>
-                  <th className="py-4 px-6 text-right">Price</th>
-                  <th className="py-4 px-6 text-right">Date Created</th>
-                </tr>
-              </thead>
-              <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-slate-700">
-                {paginatedRowsData.length === 0 ? (
-                  <tr>
-                    <td colSpan={6} className="text-center py-20 text-xs text-slate-500 font-medium">
-                      Operational Clear View. Zero matching membership target layouts found.
-                    </td>
+        <div className="flex flex-col flex-1 space-y-5">
+          <div className="bg-card-bg rounded-2xl border border-border-main shadow-xs overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full text-left border-collapse">
+                <thead>
+                  <tr className="border-b border-border-main text-[11px] font-bold text-slate-400 uppercase bg-slate-50 tracking-wider">
+                    <th className="py-3.5 px-5">Plan ID</th>
+                    <th className="py-3.5 px-5">Plan Name</th>
+                    <th className="py-3.5 px-5 text-center">Duration</th>
+                    <th className="py-3.5 px-5 text-center">
+                      Max Borrow Limit
+                    </th>
+                    <th className="py-3.5 px-5 text-right">Price</th>
+                    <th className="py-3.5 px-5 text-right">Date Created</th>
                   </tr>
-                ) : (
-                  paginatedRowsData.map((plan) => {
-                    const humanId = plan.membership_plan_id?.slice(-4).toUpperCase() || "0000";
-                    return (
-                      <tr 
-                        key={plan.membership_plan_id} 
-                        onClick={() => setSelectedPlan(plan)}
-                        className="hover:bg-slate-50 transition-colors cursor-pointer group select-none"
+                </thead>
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-100 text-text-main">
+                  {paginatedRowsData.length === 0 ? (
+                    <tr>
+                      <td
+                        colSpan={6}
+                        className="text-center py-20 text-xs text-slate-500 font-medium"
                       >
-                        <td className="py-4 px-6 font-mono font-bold text-slate-400 tracking-wider text-[11px] sm:text-xs">
-                          PLAN-{humanId}
-                        </td>
-                        <td className="py-4 px-6 font-bold text-slate-900">
-                          <div className="flex items-center gap-3">
-                            <Award size={16} className="text-amber-500 shrink-0" />
-                            <span>{plan.plan_name}</span>
-                          </div>
-                        </td>
-                        <td className="py-4 px-6 text-center font-bold">
-                          <span className="bg-slate-100 px-2.5 py-0.5 rounded-lg text-slate-700 text-[11px] sm:text-xs">
-                            {plan.duration_days} Days
-                          </span>
-                        </td>
-                        <td className="py-4 px-6 text-center">
-                          <div className="flex items-center justify-center gap-1.5 font-bold text-slate-700">
-                            <BookOpen size={14} className="text-slate-400" />
-                            <span>{plan.max_books_allowed} Vols</span>
-                          </div>
-                        </td>
-                        <td className="py-4 px-6 font-bold text-slate-900 text-right">
-                          ₹{plan.price}
-                        </td>
-                        <td className="py-4 px-6 font-medium text-slate-500 text-right text-[11px] sm:text-xs">
-                          {new Date(plan.created_at).toLocaleDateString("en-IN", { day: "2-digit", month: "short", year: "numeric" }).toUpperCase()}
-                        </td>
-                      </tr>
-                    );
-                  })
-                )}
-              </tbody>
-            </table>
-          </div>
-
-          <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
-            <span>
-              Page {currentPage} / {totalPagesCount} <span className="text-slate-300 mx-2">|</span> Total {totalItemsCount} Plans
-            </span>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                disabled={currentPage === 1}
-                onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.max(1, p - 1)); }}
-                className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-              >
-                <ChevronLeft size={14} />
-              </button>
-              <button
-                type="button"
-                disabled={currentPage === totalPagesCount}
-                onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.min(totalPagesCount, p + 1)); }}
-                className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-              >
-                <ChevronRight size={14} />
-              </button>
+                        Operational Clear View. Zero matching membership target
+                        layouts found.
+                      </td>
+                    </tr>
+                  ) : (
+                    paginatedRowsData.map((plan) => {
+                      const humanId =
+                        plan.membership_plan_id?.slice(-4).toUpperCase() ||
+                        "0000";
+                      return (
+                        <tr
+                          key={plan.membership_plan_id}
+                          onClick={() => setSelectedPlan(plan)}
+                          className="hover:bg-slate-50/80 transition-colors cursor-pointer group select-none"
+                        >
+                          <td className="py-3.5 px-5 font-mono font-bold text-slate-400 tracking-wider text-[11px] sm:text-xs">
+                            PLAN-{humanId}
+                          </td>
+                          <td className="py-3.5 px-5 font-bold text-text-main">
+                            <div className="flex items-center gap-2.5">
+                              <Award
+                                size={16}
+                                className="text-amber-500 shrink-0"
+                              />
+                              <span>{plan.plan_name}</span>
+                            </div>
+                          </td>
+                          <td className="py-3.5 px-5 text-center font-bold">
+                            <span className="bg-slate-50 px-2.5 py-0.5 rounded-lg text-text-main text-[11px] font-bold uppercase tracking-wider border border-slate-100">
+                              {plan.duration_days} Days
+                            </span>
+                          </td>
+                          <td className="py-3.5 px-5 text-center">
+                            <div className="flex items-center justify-center gap-1.5 font-bold text-text-main">
+                              <BookOpen size={13} className="text-slate-400" />
+                              <span>{plan.max_books_allowed} Vols</span>
+                            </div>
+                          </td>
+                          <td className="py-3.5 px-5 font-mono font-bold text-text-main text-right">
+                            ₹{plan.price}
+                          </td>
+                          <td className="py-3.5 px-5 font-medium text-slate-400 text-right text-[11px] sm:text-xs">
+                            {new Date(plan.created_at)
+                              .toLocaleDateString("en-IN", {
+                                day: "2-digit",
+                                month: "short",
+                                year: "numeric",
+                              })
+                              .toUpperCase()}
+                          </td>
+                        </tr>
+                      );
+                    })
+                  )}
+                </tbody>
+              </table>
             </div>
+
+            {/* Pagination Controls Footer block */}
+            {totalPagesCount > 0 && (
+              <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+                <span>
+                  Page {currentPage} / {totalPagesCount}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalItemsCount} Plans
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.max(1, p - 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPagesCount}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.min(totalPagesCount, p + 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       )}
 
+      {/* Modals Infrastructure Overlay Layer Blocks */}
       {showCreateModal && (
-        <PlanModal 
-          isOpen={showCreateModal} 
-          mode="create" 
-          plan={null} 
-          onClose={() => setShowCreateModal(false)} 
+        <PlanModal
+          isOpen={showCreateModal}
+          mode="create"
+          plan={null}
+          onClose={() => setShowCreateModal(false)}
         />
       )}
 
       {selectedPlan && (
-        <PlanDetailsModal 
-          isOpen={!!selectedPlan} 
-          plan={selectedPlan} 
-          onClose={() => setSelectedPlan(null)} 
+        <PlanDetailsModal
+          isOpen={!!selectedPlan}
+          plan={selectedPlan}
+          onClose={() => setSelectedPlan(null)}
         />
       )}
-
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/returnedbooks/components/ConfirmationModal.tsx b/client/src/features/returnedbooks/components/ConfirmationModal.tsx
index 3c8a9cd..4bf6da3 100644
--- a/client/src/features/returnedbooks/components/ConfirmationModal.tsx
+++ b/client/src/features/returnedbooks/components/ConfirmationModal.tsx
@@ -34,17 +34,16 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
       {/* Backdrop overlay blur */}
-      <div 
-        className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity" 
+      <div
+        className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs transition-opacity"
         onClick={onClose}
       />
 
       {/* Modal Container */}
-      <div className="relative z-10 w-full max-w-sm transform overflow-hidden rounded-2xl bg-white p-6 text-left shadow-xl border border-slate-200 animate-zoom-in">
+      <div className="relative z-10 w-full max-w-sm transform overflow-hidden rounded-2xl bg-card-bg p-6 text-left shadow-xl border border-border-main animate-zoom-in">
         <div className="flex items-start gap-3.5">
-          
           {/* Context Icon indicators matched down to severity matrices */}
           {variant === "danger" && (
             <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-600">
@@ -61,9 +60,9 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
               <Info size={18} />
             </div>
           )}
-          
+
           <div className="text-left w-full mt-0.5">
-            <h3 className="text-xs font-bold text-slate-900 uppercase tracking-wide">
+            <h3 className="text-xs font-bold text-text-main uppercase tracking-wide">
               {title}
             </h3>
             <div className="mt-2">
@@ -84,12 +83,12 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
           >
             {isLoading ? "Processing..." : confirmText}
           </button>
-          
+
           <button
             type="button"
             disabled={isLoading}
             onClick={onClose}
-            className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 border border-slate-200 bg-white hover:bg-slate-50 rounded-xl transition-colors cursor-pointer disabled:opacity-40"
+            className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main border border-border-main bg-card-bg hover:bg-slate-50 rounded-xl transition-colors cursor-pointer disabled:opacity-40"
           >
             {cancelText}
           </button>
@@ -99,4 +98,4 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   );
 };
 
-export default ConfirmationModal;
\ No newline at end of file
+export default ConfirmationModal;
diff --git a/client/src/features/returnedbooks/components/ReturnedDetailsModal.tsx b/client/src/features/returnedbooks/components/ReturnedDetailsModal.tsx
index 0a32033..cda8f1e 100644
--- a/client/src/features/returnedbooks/components/ReturnedDetailsModal.tsx
+++ b/client/src/features/returnedbooks/components/ReturnedDetailsModal.tsx
@@ -19,23 +19,27 @@ export const ReturnedDetailsModal = ({
   if (!isOpen || !record) return null;
 
   // Mask UUID to clear up visual clutter
-  const formattedIssueId = record.id && record.id.length >= 4 
-    ? `ISSUE-${record.id.slice(-4).toUpperCase()}`
-    : `ISSUE-${record.id}`;
+  const formattedIssueId =
+    record.id && record.id.length >= 4
+      ? `ISSUE-${record.id.slice(-4).toUpperCase()}`
+      : `ISSUE-${record.id}`;
 
   return (
-    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-slate-700 text-left animate-fade-in">
-      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-slate-200 animate-zoom-in">
-        
+    <div className="fixed inset-0 bg-slate-900/40 backdrop-blur-xs flex items-center justify-center z-50 p-4 font-sans text-xs sm:text-sm text-text-main text-left animate-fade-in">
+      <div className="bg-card-bg rounded-2xl shadow-xl w-full max-w-md overflow-hidden border border-border-main animate-zoom-in">
         {/* Header Block */}
         <div className="bg-slate-900 px-6 py-5 text-white flex justify-between items-center">
           <div>
-            <h3 className="font-bold text-xs uppercase tracking-wider text-slate-200">Returned Book Details</h3>
-            <span className="text-[11px] text-slate-400 font-mono tracking-widest">{formattedIssueId}</span>
+            <h3 className="font-bold text-xs uppercase tracking-wider text-slate-200">
+              Returned Book Details
+            </h3>
+            <span className="text-[11px] text-slate-400 font-mono tracking-widest">
+              {formattedIssueId}
+            </span>
           </div>
-          <button 
+          <button
             type="button"
-            onClick={onClose} 
+            onClick={onClose}
             className="text-slate-400 hover:text-white p-1 rounded-lg transition-colors cursor-pointer"
           >
             <X size={16} />
@@ -44,41 +48,60 @@ export const ReturnedDetailsModal = ({
 
         <div className="p-6 space-y-5">
           {/* Member Card */}
-          <div className="bg-slate-50 p-4 rounded-xl border border-slate-200 space-y-1.5">
-            <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">Borrower Profile</span>
-            <div className="text-sm font-bold text-slate-900">{record.memberName}</div>
+          <div className="bg-slate-50 p-4 rounded-xl border border-border-main space-y-1.5">
+            <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">
+              Borrower Profile
+            </span>
+            <div className="text-sm font-bold text-text-main">
+              {record.memberName}
+            </div>
             <div className="text-xs text-slate-500 font-medium flex items-center gap-1.5">
-              <Mail size={12} className="shrink-0 text-slate-400" /> {record.memberEmail || "No email provided"}
+              <Mail size={12} className="shrink-0 text-slate-400" />{" "}
+              {record.memberEmail || "No email provided"}
             </div>
             <div className="text-xs text-slate-500 font-medium flex items-center gap-1.5">
-              <Phone size={12} className="shrink-0 text-slate-400" /> {record.memberPhone || "No contact info"}
+              <Phone size={12} className="shrink-0 text-slate-400" />{" "}
+              {record.memberPhone || "No contact info"}
             </div>
           </div>
 
           {/* Book Card */}
           <div className="space-y-1.5 px-1">
-            <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">Book Details</span>
-            <div className="text-sm font-bold text-slate-900 flex items-start gap-2">
+            <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wide block">
+              Book Details
+            </span>
+            <div className="text-sm font-bold text-text-main flex items-start gap-2">
               <BookOpen size={14} className="mt-0.5 text-slate-400 shrink-0" />
               <div>{record.bookTitle}</div>
             </div>
             <div className="text-xs text-slate-500 font-medium pl-5.5">
-              Author: <span className="font-semibold text-slate-700">{record.bookAuthor || "Unknown author"}</span>
+              Author:{" "}
+              <span className="font-semibold text-text-main">
+                {record.bookAuthor || "Unknown author"}
+              </span>
             </div>
           </div>
 
           {/* Core Timeline Grid */}
           <div className="grid grid-cols-3 gap-2 border-t border-b border-slate-100 py-3.5 font-mono text-center text-[11px]">
             <div>
-              <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide mb-0.5">Issued</span>
-              <div className="text-slate-700 font-bold">{record.borrowedDate}</div>
+              <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide mb-0.5">
+                Issued
+              </span>
+              <div className="text-text-main font-bold">
+                {record.borrowedDate}
+              </div>
             </div>
             <div>
-              <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide mb-0.5">Due Date</span>
-              <div className="text-slate-700 font-bold">{record.dueDate}</div>
+              <span className="text-[11px] font-bold text-slate-400 uppercase block font-sans tracking-wide mb-0.5">
+                Due Date
+              </span>
+              <div className="text-text-main font-bold">{record.dueDate}</div>
             </div>
             <div>
-              <span className="text-[11px] font-bold text-emerald-700 uppercase block font-sans tracking-wide mb-0.5">Returned</span>
+              <span className="text-[11px] font-bold text-emerald-700 uppercase block font-sans tracking-wide mb-0.5">
+                Returned
+              </span>
               <div className="text-emerald-700 font-bold bg-emerald-50 px-1.5 py-0.5 rounded-md inline-block">
                 {record.returnedDate || "N/A"}
               </div>
@@ -94,12 +117,12 @@ export const ReturnedDetailsModal = ({
             >
               <RefreshCw size={12} /> Revert Return Status
             </button>
-            
+
             <div className="flex justify-between items-center gap-3 pt-3 border-t border-slate-100">
-              <button 
-                type="button" 
-                onClick={onClose} 
-                className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 cursor-pointer transition-colors"
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-text-main cursor-pointer transition-colors"
               >
                 Close View
               </button>
@@ -113,8 +136,7 @@ export const ReturnedDetailsModal = ({
             </div>
           </div>
         </div>
-
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/features/returnedbooks/pages/ReturnedBooks.tsx b/client/src/features/returnedbooks/pages/ReturnedBooks.tsx
index 5922f37..326dfd5 100644
--- a/client/src/features/returnedbooks/pages/ReturnedBooks.tsx
+++ b/client/src/features/returnedbooks/pages/ReturnedBooks.tsx
@@ -6,7 +6,14 @@ import type { BookIssueRecord } from "../../../types/transactions";
 import { toast } from "sonner";
 import { useAuthStore } from "../../../store/authStore";
 import ConfirmationModal from "../components/ConfirmationModal";
-import { Search, Calendar, RotateCcw, ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
+import {
+  Search,
+  Calendar,
+  RotateCcw,
+  ChevronLeft,
+  ChevronRight,
+  Trash2,
+} from "lucide-react";
 
 export const ReturnedBooks = () => {
   const queryClient = useQueryClient();
@@ -19,7 +26,9 @@ export const ReturnedBooks = () => {
   const rowsPerPage = 10;
 
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [selectedRecord, setSelectedRecord] = useState<BookIssueRecord | null>(null);
+  const [selectedRecord, setSelectedRecord] = useState<BookIssueRecord | null>(
+    null,
+  );
 
   // Declare state trackers for managing the confirmation modal interface
   const [modalConfig, setModalConfig] = useState<{
@@ -38,7 +47,8 @@ export const ReturnedBooks = () => {
     onConfirm: () => {},
   });
 
-  const closeModal = () => setModalConfig((prev) => ({ ...prev, isOpen: false }));
+  const closeModal = () =>
+    setModalConfig((prev) => ({ ...prev, isOpen: false }));
 
   // Query: Feed raw ledger (Fetches full table, filtered to "RETURNED" values below)
   const { data: rawIssues = [], isLoading } = useQuery<BookIssueRecord[]>({
@@ -59,12 +69,17 @@ export const ReturnedBooks = () => {
       });
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["circulationMasterRecordsFeed"] });
-      toast.success("Transaction log reset! Record moved back to Borrowing desk.");
+      queryClient.invalidateQueries({
+        queryKey: ["circulationMasterRecordsFeed"],
+      });
+      toast.success(
+        "Transaction log reset! Record moved back to Borrowing desk.",
+      );
       setIsDetailsOpen(false);
       setSelectedRecord(null);
     },
-    onError: () => toast.error("Failed to alter server parameters mapping logs."),
+    onError: () =>
+      toast.error("Failed to alter server parameters mapping logs."),
   });
 
   // Mutation: Purge single historic ledger entry item permanently
@@ -73,12 +88,15 @@ export const ReturnedBooks = () => {
       return await axiosClient.delete(`/issues/${issueId}`);
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["circulationMasterRecordsFeed"] });
+      queryClient.invalidateQueries({
+        queryKey: ["circulationMasterRecordsFeed"],
+      });
       toast.success("Log item purged permanently.");
       setIsDetailsOpen(false);
       setSelectedRecord(null);
     },
-    onError: () => toast.error("Database constraint rejected execution pipeline."),
+    onError: () =>
+      toast.error("Database constraint rejected execution pipeline."),
   });
 
   // Mutation: Purge ALL historical return items sequentially
@@ -87,10 +105,13 @@ export const ReturnedBooks = () => {
       return await axiosClient.delete("/issues/clear-returned-history");
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["circulationMasterRecordsFeed"] });
+      queryClient.invalidateQueries({
+        queryKey: ["circulationMasterRecordsFeed"],
+      });
       toast.success("Historical completions logs cleared completely!");
     },
-    onError: () => toast.error("Failed to run full table ledger maintenance routine."),
+    onError: () =>
+      toast.error("Failed to run full table ledger maintenance routine."),
   });
 
   // Reset Control Interfacing Actions
@@ -108,18 +129,25 @@ export const ReturnedBooks = () => {
         const term = searchQuery.toLowerCase();
         const nameMatch = rec.memberName?.toLowerCase().includes(term) || false;
         const titleMatch = rec.bookTitle?.toLowerCase().includes(term) || false;
-        const authorMatch = rec.bookAuthor?.toLowerCase().includes(term) || false;
+        const authorMatch =
+          rec.bookAuthor?.toLowerCase().includes(term) || false;
         const textCompliance = nameMatch || titleMatch || authorMatch;
 
         // Calendar Match Checking
-        const matchesDate = dateFilter === "" || (rec.returnedDate && rec.returnedDate.includes(dateFilter));
+        const matchesDate =
+          dateFilter === "" ||
+          (rec.returnedDate && rec.returnedDate.includes(dateFilter));
 
         return textCompliance && matchesDate;
       })
-      .sort((a, b) => new Date(b.returnedDate || 0).getTime() - new Date(a.returnedDate || 0).getTime());
+      .sort(
+        (a, b) =>
+          new Date(b.returnedDate || 0).getTime() -
+          new Date(a.returnedDate || 0).getTime(),
+      );
   }, [rawIssues, searchQuery, dateFilter]);
 
-  // Client-Side Chunking 
+  // Client-Side Chunking
   const totalRecordsCount = auditedRecords.length;
   const totalPages = Math.max(1, Math.ceil(totalRecordsCount / rowsPerPage));
   const safeCurrentPage = Math.min(currentPage, totalPages);
@@ -127,7 +155,7 @@ export const ReturnedBooks = () => {
   const paginatedRecords = useMemo(() => {
     return auditedRecords.slice(
       (safeCurrentPage - 1) * rowsPerPage,
-      safeCurrentPage * rowsPerPage
+      safeCurrentPage * rowsPerPage,
     );
   }, [auditedRecords, safeCurrentPage, rowsPerPage]);
 
@@ -136,7 +164,8 @@ export const ReturnedBooks = () => {
     setModalConfig({
       isOpen: true,
       title: "Revert Transaction Status",
-      description: "Are you sure you want to revert this book back to out-of-building status? This will reduce available warehouse inventory allocations and add it back to the borrower's active counts.",
+      description:
+        "Are you sure you want to revert this book back to out-of-building status? This will reduce available warehouse inventory allocations and add it back to the borrower's active counts.",
       confirmText: "Restore Log",
       variant: "warning",
       onConfirm: () => {
@@ -149,7 +178,8 @@ export const ReturnedBooks = () => {
     setModalConfig({
       isOpen: true,
       title: "Delete Checkout Log Entries",
-      description: "Are you sure you want to permanently delete this checkout log configuration? This structural history profile cannot be recovered afterwards.",
+      description:
+        "Are you sure you want to permanently delete this checkout log configuration? This structural history profile cannot be recovered afterwards.",
       confirmText: "Delete Record",
       variant: "danger",
       onConfirm: () => {
@@ -162,7 +192,8 @@ export const ReturnedBooks = () => {
     setModalConfig({
       isOpen: true,
       title: "⚠️ Clear Entire Historical Logs Ledger",
-      description: "DANGER CONTROL: Are you completely sure you want to drop ALL returned history rows? This structural matrix action is immediate and completely purges all historical circulation files permanently.",
+      description:
+        "DANGER CONTROL: Are you completely sure you want to drop ALL returned history rows? This structural matrix action is immediate and completely purges all historical circulation files permanently.",
       confirmText: "Wipe All Records",
       variant: "danger",
       onConfirm: () => {
@@ -172,19 +203,23 @@ export const ReturnedBooks = () => {
   };
 
   // Determine if any mutations are actively loading to show spinner feedback
-  const isActionLoading = 
-    revertReturnMutation.isPending || 
-    deleteSingleMutation.isPending || 
+  const isActionLoading =
+    revertReturnMutation.isPending ||
+    deleteSingleMutation.isPending ||
     clearAllHistoryMutation.isPending;
 
   return (
-    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 space-y-5 font-sans text-xs sm:text-sm text-slate-700 text-left">
-      
+    <div className="flex flex-col min-h-screen max-w-6xl relative animate-fade-in pb-12 space-y-5 font-sans text-xs sm:text-sm text-text-main text-left">
       {/* Control Layout Top-deck */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white p-5 rounded-2xl border border-slate-light/10 shadow-xs shrink-0">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-card-bg p-5 rounded-2xl border border-slate-light/10 shadow-xs shrink-0">
         <div>
-          <h2 className="text-xl font-bold text-slate-900 tracking-tight">Returned Books Management Desk</h2>
-          <p className="text-xs text-slate-500 font-medium mt-0.5">Review completed book returns, manage archiving, and track overdue fine status ledgers.</p>
+          <h2 className="text-xl font-bold text-text-main tracking-tight">
+            Returned Books Management Desk
+          </h2>
+          <p className="text-xs text-slate-500 font-medium mt-0.5">
+            Review completed book returns, manage archiving, and track overdue
+            fine status ledgers.
+          </p>
         </div>
         {totalRecordsCount > 0 && (
           <button
@@ -197,32 +232,45 @@ export const ReturnedBooks = () => {
       </div>
 
       {/* Interactive Operational Filters Section */}
-      <div className="flex flex-col md:flex-row gap-3 bg-white p-4 rounded-2xl border border-slate-light/10 shadow-xs shrink-0">
+      <div className="flex flex-col md:flex-row gap-3 bg-card-bg p-4 rounded-2xl border border-slate-light/10 shadow-xs shrink-0">
         <div className="relative flex-1">
-          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={16} />
+          <Search
+            className="absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"
+            size={16}
+          />
           <input
             type="text"
             placeholder="Query history by book, author, or borrower name..."
             value={searchQuery}
-            onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
-            className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-slate-900 focus:bg-white focus:ring-4 focus:ring-sage-primary/10 focus:border-sage-primary outline-hidden transition-all"
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              setCurrentPage(1);
+            }}
+            className="w-full pl-10 pr-4 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs sm:text-sm font-medium text-text-main focus:bg-card-bg focus:ring-4 focus:ring-sage-primary/10 focus:border-sage-primary outline-hidden transition-all"
           />
         </div>
         <div className="flex gap-2.5 min-w-xs">
           <div className="relative flex-1">
-            <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" size={14} />
+            <Calendar
+              className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"
+              size={14}
+            />
             <input
               type="date"
               value={dateFilter}
-              onChange={(e) => { setDateFilter(e.target.value); setCurrentPage(1); }}
-              className="w-full pl-9 pr-3 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 focus:bg-white focus:ring-4 focus:ring-sage-primary/10 focus:border-sage-primary outline-hidden transition-all cursor-pointer"
+              onChange={(e) => {
+                setDateFilter(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="w-full pl-9 pr-3 py-2 bg-canvas-dominant border border-slate-light/10 rounded-xl text-xs font-bold uppercase tracking-wider text-slate-800 focus:bg-card-bg focus:ring-4 focus:ring-sage-primary/10 focus:border-sage-primary outline-hidden transition-all cursor-pointer"
             />
           </div>
           <button
+            type="button"
             onClick={handleClearFilters}
-            className="flex items-center gap-1 px-3 py-2 bg-rose-50 hover:bg-rose-100 text-rose-700 text-xs font-bold rounded-xl transition-all cursor-pointer whitespace-nowrap"
+            className="px-4 py-2 text-xs font-bold text-slate-500 bg-slate-50 border border-border-main hover:bg-slate-100 hover:text-text-main rounded-xl cursor-pointer transition-all animate-fade-in text-center whitespace-nowrap flex items-center justify-center gap-1.5 uppercase"
           >
-            <RotateCcw size={12} /> Clear
+            <RotateCcw size={12} /> Reset
           </button>
         </div>
       </div>
@@ -233,9 +281,8 @@ export const ReturnedBooks = () => {
         </div>
       ) : (
         <div className="flex flex-col flex-1 space-y-5">
-          
           {/* INLINE NATURAL LAYOUT TABLE CONTAINER */}
-          <div className="bg-white rounded-2xl border border-slate-light/10 shadow-xs overflow-hidden">
+          <div className="bg-card-bg rounded-2xl border border-slate-light/10 shadow-xs overflow-hidden">
             <div className="overflow-x-auto">
               <table className="w-full text-left border-collapse">
                 <thead>
@@ -245,35 +292,52 @@ export const ReturnedBooks = () => {
                     <th className="py-3.5 px-5">Issued On</th>
                     <th className="py-3.5 px-5">Target Due</th>
                     <th className="py-3.5 px-5">Returned On</th>
-                    <th className="py-3.5 px-5 text-center">Fines Ledger</th>
+                    {/* <th className="py-3.5 px-5 text-center">Fines Ledger</th> */}
                   </tr>
                 </thead>
-                <tbody className="text-xs sm:text-sm divide-y divide-slate-light/5 text-slate-700 font-medium">
+                <tbody className="text-xs sm:text-sm divide-y divide-slate-light/5 text-text-main font-medium">
                   {paginatedRecords.length === 0 ? (
                     <tr>
-                      <td colSpan={6} className="py-12 text-center text-slate-400">
-                        No historical book returns matching the selected filter criteria.
+                      <td
+                        colSpan={6}
+                        className="py-12 text-center text-slate-400"
+                      >
+                        No historical book returns matching the selected filter
+                        criteria.
                       </td>
                     </tr>
                   ) : (
                     paginatedRecords.map((record) => {
-                      const isOverdueDrop = record.returnedDate && record.dueDate && record.returnedDate > record.dueDate;
+                      // const isOverdueDrop = record.returnedDate && record.dueDate && record.returnedDate > record.dueDate;
 
                       return (
                         <tr
                           key={record.id}
-                          onClick={() => { setSelectedRecord(record); setIsDetailsOpen(true); }}
+                          onClick={() => {
+                            setSelectedRecord(record);
+                            setIsDetailsOpen(true);
+                          }}
                           className="hover:bg-canvas-dominant/60 transition-colors cursor-pointer group select-none"
                         >
-                          <td className="py-3.5 px-5 font-bold text-slate-900">
+                          <td className="py-3.5 px-5 font-bold text-text-main">
                             <div>{record.bookTitle}</div>
-                            <span className="text-xs font-medium text-slate-400 tracking-tight font-sans block mt-0.5">By {record.bookAuthor}</span>
+                            <span className="text-xs font-medium text-slate-400 tracking-tight font-sans block mt-0.5">
+                              By {record.bookAuthor}
+                            </span>
+                          </td>
+                          <td className="py-3.5 px-5 font-bold text-text-main">
+                            {record.memberName}
+                          </td>
+                          <td className="py-3.5 px-5 font-mono text-xs text-slate-500">
+                            {record.borrowedDate}
                           </td>
-                          <td className="py-3.5 px-5 font-bold text-slate-900">{record.memberName}</td>
-                          <td className="py-3.5 px-5 font-mono text-xs text-slate-500">{record.borrowedDate}</td>
-                          <td className="py-3.5 px-5 font-mono text-xs text-slate-500">{record.dueDate}</td>
-                          <td className="py-3.5 px-5 font-mono text-xs font-bold text-emerald-600 bg-emerald-50/10">{record.returnedDate}</td>
-                          <td className="py-3.5 px-5 text-center">
+                          <td className="py-3.5 px-5 font-mono text-xs text-slate-500">
+                            {record.dueDate}
+                          </td>
+                          <td className="py-3.5 px-5 font-mono text-xs font-bold text-emerald-600 bg-emerald-50/10">
+                            {record.returnedDate}
+                          </td>
+                          {/* <td className="py-3.5 px-5 text-center">
                             <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-bold tracking-wide uppercase border ${
                               isOverdueDrop 
                                 ? "bg-amber-50 text-amber-700 border-amber-100/40" 
@@ -281,7 +345,7 @@ export const ReturnedBooks = () => {
                             }`}>
                               {isOverdueDrop ? "⚠️ Fine Accrued" : "✓ Settled"}
                             </span>
-                          </td>
+                          </td> */}
                         </tr>
                       );
                     })
@@ -290,75 +354,40 @@ export const ReturnedBooks = () => {
               </table>
             </div>
 
-              {totalPages > 0 && (
-                                    <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
-                                      <span>
-                                        Page {currentPage} / {totalPages} <span className="text-slate-300 mx-2">|</span> Total {totalRecordsCount} Books
-                                      </span>
-                                      <div className="flex gap-2">
-                                        <button
-                                          type="button"
-                                          disabled={currentPage === 1}
-                                          onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.max(1, p - 1)); }}
-                                          className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                                        >
-                                          <ChevronLeft size={14} />
-                                        </button>
-                                        <button
-                                          type="button"
-                                          disabled={currentPage === totalPages}
-                                          onClick={(e) => { e.stopPropagation(); setCurrentPage((p) => Math.min(totalPages, p + 1)); }}
-                                          className="p-2 border border-slate-200 bg-white hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
-                                        >
-                                          <ChevronRight size={14} />
-                                        </button>
-                                      </div>
-                                    </div>
-                                  )}
+            {totalPages > 0 && (
+              <div className="p-4 bg-slate-50/50 border-t border-slate-100 flex justify-between items-center text-[10px] sm:text-xs font-bold uppercase tracking-wider text-slate-500">
+                <span>
+                  Page {currentPage} / {totalPages}{" "}
+                  <span className="text-slate-300 mx-2">|</span> Total{" "}
+                  {totalRecordsCount} Books
+                </span>
+                <div className="flex gap-2">
+                  <button
+                    type="button"
+                    disabled={currentPage === 1}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.max(1, p - 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronLeft size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    disabled={currentPage === totalPages}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setCurrentPage((p) => Math.min(totalPages, p + 1));
+                    }}
+                    className="p-2 border border-border-main bg-card-bg hover:bg-slate-50 text-slate-600 rounded-lg disabled:opacity-30 cursor-pointer transition-colors shadow-xs"
+                  >
+                    <ChevronRight size={14} />
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
-
-          {/* NATURAL FLOW INLINE PAGINATION BAR */}
-          {/* <div className="px-5 py-3 border border-slate-light/10 rounded-2xl bg-white flex flex-col sm:flex-row items-center justify-between gap-4 shadow-2xs transition-all">
-            <div className="text-xs font-medium text-slate-500">
-              Showing page <span className="font-bold text-slate-900 font-mono">{safeCurrentPage}</span> of <span className="font-bold text-slate-900 font-mono">{totalPages}</span> (<span className="font-bold text-slate-900 font-mono">{totalRecordsCount}</span> archives logged)
-            </div>
-            
-            <div className="flex items-center gap-1">
-              <button
-                type="button"
-                disabled={safeCurrentPage === 1}
-                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                className="p-1.5 border border-slate-light/10 rounded-lg bg-white text-slate-500 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-canvas-dominant cursor-pointer transition-all"
-              >
-                <ChevronLeft size={14} />
-              </button>
-
-              {Array.from({ length: totalPages }, (_, idx) => idx + 1).map((pageNum) => (
-                <button
-                  key={pageNum}
-                  type="button"
-                  onClick={() => setCurrentPage(pageNum)}
-                  className={`px-3 py-1 text-xs font-bold rounded-lg transition-all cursor-pointer font-mono ${
-                    safeCurrentPage === pageNum
-                      ? "bg-slate-900 text-white shadow-xs"
-                      : "bg-white border border-slate-light/10 text-slate-600 hover:bg-canvas-dominant"
-                  }`}
-                >
-                  {pageNum}
-                </button>
-              ))}
-
-              <button
-                type="button"
-                disabled={safeCurrentPage === totalPages}
-                onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
-                className="p-1.5 border border-slate-light/10 rounded-lg bg-white text-slate-500 disabled:opacity-40 disabled:cursor-not-allowed hover:bg-canvas-dominant cursor-pointer transition-all"
-              >
-                <ChevronRight size={14} />
-              </button>
-            </div>
-          </div> */}
-
         </div>
       )}
 
@@ -384,4 +413,4 @@ export const ReturnedBooks = () => {
       />
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/client/src/index.css b/client/src/index.css
index 80d1d88..88f28d9 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,12 +1,10 @@
 /* 🔤 Google Fonts Integration: Inter & Roboto */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');
 
-
 @import "tailwindcss";
 
-
 @theme {
-  /* 🎨 Core Sage & Slate Configuration Matrix */
+  /* 🎨 1. Core Sage & Slate Functional Colors (Brand Tokens) */
   --color-sage-primary: #27AE60;      /* 10% Accent Call-to-Actions */
   --color-sage-hover: #219653;        /* Darker Sage for hover interactions */
   --color-slate-secondary: #2C3E50;   /* 30% Secondary Text / Structural Sidebars */
@@ -14,15 +12,42 @@
   --color-canvas-dominant: #F9FBFB;   /* 60% Dominant Background / Card spaces */
   --color-utility-crimson: #C0392B;   /* Critical validation / blocks / alerts */
   
-  /* 📐 Font Pair Configuration */
+  /* 📐 2. Font Pair Configurations */
   --font-sans: "Inter", system-ui, sans-serif;    /* Inter for Primary UI & Headings */
   --font-data: "Roboto", sans-serif;              /* Roboto for numbers, dates, lists */
+
+  /* 🌗 3. Dynamic Dark-Mode Semantic Mapping Tokens */
+  --color-page-bg: var(--page-bg);
+  --color-card-bg: var(--card-bg);
+  --color-border-main: var(--border-main);
+  --color-text-main: var(--text-main);
+}
+
+/* ☀️ Global Light Variable Assignments */
+:root {
+  --page-bg: #f8fafc;     /* slate-50 */
+  --card-bg: #ffffff;     /* Pure white for light mode cards */
+  --border-main: #e2e8f0; /* slate-200 */
+  --text-main: #334155;   /* slate-700 */
+}
+
+/* 🌙 Global Dark Variable Assignments */
+.dark {
+  --page-bg: #090d16;     /* Premium deep rich black background */
+  
+  /* 🌟 THE FIX: Instead of white, cards now turn into a clean dark-slate container */
+  --card-bg: #1e293b;     /* Tailwind slate-800: beautiful contrast over black */
+  
+  /* 🌟 THE FIX: Automatic light borders and readable white text inside the cards */
+  --border-main: #334155; /* slate-700 line breaks */
+  --text-main: #f8fafc;   /* slate-50: Crisp white text that reads perfectly on dark cards */
 }
 
-/* 🏢 Base Global Application Resets */
+/* 🏢 Base Global Application Setup & Overrides */
 body {
-  background-color: var(--color-canvas-dominant);
-  color: var(--color-slate-secondary);
+  /* FIXED: Pointed these directly to our dynamic switching tokens so background flips automatically */
+  background-color: var(--page-bg);
+  color: var(--text-main);
   font-family: var(--font-sans);
   margin: 0;
   -webkit-font-smoothing: antialiased;
diff --git a/client/src/layouts/DashboardLayout.tsx b/client/src/layouts/DashboardLayout.tsx
index 22b6c4c..32fe32e 100644
--- a/client/src/layouts/DashboardLayout.tsx
+++ b/client/src/layouts/DashboardLayout.tsx
@@ -14,13 +14,30 @@ import {
   Receipt, 
   LogOut, 
   Library,
-  User 
+  User,
 } from "lucide-react";
 
 export const DashboardLayout = () => {
   const { user, logout } = useAuthStore();
   const navigate = useNavigate();
 
+  // Initialize theme state safely by matching persistent localStorage cache indices
+  // const [darkMode, setDarkMode] = useState<boolean>(
+  //   () => localStorage.getItem("theme") === "dark"
+  // );
+
+  // Synchronize layout class strings on theme changes
+  // useEffect(() => {
+  //   const rootWindowElement = window.document.documentElement;
+  //   if (darkMode) {
+  //     rootWindowElement.classList.add("dark");
+  //     localStorage.setItem("theme", "dark");
+  //   } else {
+  //     rootWindowElement.classList.remove("dark");
+  //     localStorage.setItem("theme", "light");
+  //   }
+  // }, [darkMode]);
+
   const handleSignOut = () => {
     logout();
     navigate("/login");
@@ -38,25 +55,25 @@ export const DashboardLayout = () => {
   ];
 
   return (
-    <div className="flex h-screen w-screen overflow-hidden bg-amber-50/40 font-sans text-slate-800 antialiased selection:bg-amber-200">
+    <div className="flex h-screen w-screen overflow-hidden bg-page-bg font-sans text-text-main antialiased selection:bg-amber-200 transition-colors duration-200">
       
-      {/* Sidebar Navigation - Warm Archival Minimalist Layout (Expanded Accessibility width) */}
-      <aside className="w-72 bg-white border-r border-amber-100 flex flex-col justify-between relative z-20 shadow-xs shrink-0">
+      {/* Sidebar Navigation - Warm Archival Minimalist Layout */}
+      <aside className="w-72 bg-card-bg border-r border-border-main flex flex-col justify-between relative z-20 shadow-xs shrink-0 transition-colors duration-200">
         <div className="p-6">
-          <div className="flex items-center gap-3.5 py-3 border-b border-slate-100 mb-6">
+          <div className="flex items-center gap-3.5 py-3 border-b border-border-main mb-6">
             
             {/* Elegant Institutional Identity Icon */}
-            <div className="w-10 h-10 bg-slate-900 text-amber-100 rounded-lg flex items-center justify-center shadow-xs shrink-0">
+            <div className="w-10 h-10 bg-slate-900 dark:bg-slate-950 text-amber-100 rounded-lg flex items-center justify-center shadow-xs shrink-0">
               <Library size={20} className="stroke-[2.2]" />
             </div>
             
             <div className="flex flex-col">
-              <span className="font-bold text-base tracking-tight text-slate-900 leading-tight">LMS</span>
+              <span className="font-bold text-base tracking-tight text-text-main leading-tight">LMS</span>
               <span className="text-xs text-slate-400 font-bold uppercase tracking-wider mt-0.5">Librarian Portal</span>
             </div>
           </div>
 
-          {/* Navigation links optimized with comfortable text sizes and wide tapping targets */}
+          {/* Navigation links */}
           <nav className="space-y-1.5">
             {navItems.map((item) => {
               const IconComponent = item.icon;
@@ -67,12 +84,11 @@ export const DashboardLayout = () => {
                   className={({ isActive }) =>
                     `flex items-center gap-4 px-4 py-3.5 rounded-lg text-sm font-semibold tracking-wide transition-all duration-150 ${
                       isActive
-                        ? "bg-slate-100 text-slate-950 font-bold shadow-xs border-l-4 border-slate-900 rounded-l-none pl-3"
-                        : "text-slate-600 hover:bg-slate-50 hover:text-slate-950"
+                        ? "bg-page-bg text-text-main font-bold shadow-xs border-l-4 border-slate-900 rounded-l-none pl-3"
+                        : "text-slate-500 dark:text-slate-400 hover:bg-page-bg/50 hover:text-text-main"
                     }`
                   }
                 >
-                  {/* Distinct category icon colors remain crisp and highly visible */}
                   <IconComponent size={18} className={`stroke-[2.2] shrink-0 ${item.color}`} />
                   <span>{item.name}</span>
                 </NavLink>
@@ -82,10 +98,10 @@ export const DashboardLayout = () => {
         </div>
         
         {/* Sidebar Footer - Spacious Action Deck */}
-        <div className="p-5 border-t border-slate-100 bg-slate-50/60">
+        <div className="p-5 border-t border-border-main bg-page-bg/30 transition-colors duration-200">
           <button
             onClick={handleSignOut}
-            className="flex w-full items-center justify-center gap-2.5 px-4 py-3 rounded-lg text-sm font-bold text-orange-700 bg-orange-50 hover:bg-orange-100 border border-orange-200/60 transition-all cursor-pointer shadow-2xs"
+            className="flex w-full items-center justify-center gap-2.5 px-4 py-3 rounded-lg text-sm font-bold text-orange-700 bg-orange-50 hover:bg-orange-100 dark:bg-orange-950/20 dark:text-orange-400 dark:border-orange-900/40 border border-orange-200/60 transition-all cursor-pointer shadow-2xs"
           >
             <LogOut size={16} className="stroke-[2.5]" />
             <span>Logout</span>
@@ -97,26 +113,39 @@ export const DashboardLayout = () => {
       <div className="flex-1 flex flex-col overflow-hidden">
         
         {/* Header Frame - High Visibility Layout */}
-        <header className="h-22 bg-white border-b border-amber-100 flex items-center justify-between px-10 shadow-2xs shrink-0">
+        <header className="h-22 bg-card-bg border-b border-border-main flex items-center justify-between px-10 shadow-2xs shrink-0 transition-colors duration-200">
           <div>
-            <h1 className="text-lg font-bold text-slate-900 tracking-tight">Librarian Dashboard</h1>
+            <h1 className="text-lg font-bold text-text-main tracking-tight">Librarian Dashboard</h1>
             <p className="text-sm text-slate-400 font-medium mt-0.5">Real-time catalog and circulation auditing pipeline</p>
           </div>
           
           <div className="flex items-center gap-5">
             <div className="text-right hidden sm:block">
-              {/* <p className="font-semibold text-sm text-slate-700 bg-slate-50 border border-slate-200/60 px-3.5 py-1.5 rounded-md shadow-2xs inline-block">
-                {user?.email || "librarian@institution.org"}
-              </p> */}
               <p className="text-xs text-slate-400 font-medium tracking-wide uppercase mt-1">
-                ROLE: <span className="text-slate-600 font-bold">{user?.role || "LIBRARIAN"}</span>
+                ROLE: <span className="text-text-main font-bold">{user?.role || "LIBRARIAN"}</span>
               </p>
             </div>
-            
+
             {/* User Profile Avatar Frame */}
-            <div className="w-11 h-11 bg-slate-50 border border-slate-200/60 text-slate-700 rounded-lg flex items-center justify-center shadow-2xs">
+            <div className="w-11 h-11 bg-page-bg border border-border-main text-text-main rounded-lg flex items-center justify-center shadow-2xs">
               <User size={18} className="stroke-[2.2]" />
             </div>
+
+            {/* Dark/Light Theme Button Switcher */}
+            {/* <button
+              type="button"
+              onClick={() => setDarkMode(!darkMode)}
+              title={darkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
+              className="w-11 h-11 flex items-center justify-center bg-page-bg hover:bg-page-bg/80 text-text-main border border-border-main rounded-lg cursor-pointer transition-all shadow-2xs"
+            >
+              {darkMode ? (
+                <Sun size={18} className="stroke-[2.2] text-amber-500 animate-fade-in" />
+              ) : (
+                <Moon size={18} className="stroke-[2.2] text-slate-600 animate-fade-in" />
+              )}
+            </button> */}
+            
+            
           </div>
         </header>
 
diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 15e77dc..de7d61e 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -20,26 +20,31 @@ export const Dashboard = () => {
   const [amnestyDiscount, setAmnestyDiscount] = useState(20);
 
   // Background analytical payload cache sync
-  const { data: apiPayload, isLoading, isError } = useQuery({
+  const {
+    data: apiPayload,
+    isLoading,
+    isError,
+  } = useQuery({
     queryKey: ["advancedDashboardAnalytics", token],
     queryFn: async () => {
       const res = await axiosClient.get("/dashboard/summary");
       return res.data?.data || res.data;
     },
     enabled: !!token,
-    staleTime: 1000 * 60 * 5, // 5 minute guard
+    staleTime: 0,
+    refetchOnWindowFocus: true,
   });
 
   // High-Visibility Light State Loading Screen
   if (isLoading || !token) {
     return (
-      <div className="flex h-screen w-full items-center justify-center flex-col gap-6 bg-white font-sans text-slate-800">
+      <div className="flex h-screen w-full items-center justify-center flex-col gap-6 bg-card-bg font-sans text-slate-800">
         <div className="relative">
           {/* Crisp slate structural spinner */}
-          <div className="animate-spin rounded-full h-16 w-16 border-4 border-slate-200 border-t-slate-900 shadow-2xs" />
+          <div className="animate-spin rounded-full h-16 w-16 border-4 border-border-main border-t-slate-900 shadow-2xs" />
         </div>
 
-        <p className="text-sm text-slate-800 font-bold uppercase tracking-wider bg-slate-50 border border-slate-200 px-5 py-3 rounded-lg shadow-2xs">
+        <p className="text-sm text-slate-800 font-bold uppercase tracking-wider bg-slate-50 border border-border-main px-5 py-3 rounded-lg shadow-2xs">
           Booting Control Center Intelligence...
         </p>
       </div>
@@ -53,8 +58,9 @@ export const Dashboard = () => {
         <h3 className="text-base font-bold text-orange-800 uppercase tracking-wide">
           Operational Sync Failure
         </h3>
-        <p className="text-sm text-orange-700 font-medium mt-3 bg-white p-4 rounded-xl border border-orange-200/60 max-w-lg mx-auto">
-          Unable to pull central analytical datasets from backend database registers. Please reload the dashboard engine view.
+        <p className="text-sm text-orange-700 font-medium mt-3 bg-card-bg p-4 rounded-xl border border-orange-200/60 max-w-lg mx-auto">
+          Unable to pull central analytical datasets from backend database
+          registers. Please reload the dashboard engine view.
         </p>
       </div>
     );
@@ -77,40 +83,39 @@ export const Dashboard = () => {
   return (
     /* Comfortable, light-weight archival grid background wrapper */
     <div className="space-y-8 p-2 animate-fade-in bg-transparent min-h-screen pb-16 font-sans text-slate-800 selection:bg-amber-200">
-      
       {/* Level 1: Core System KPI Indicators */}
       <div className="relative transition-all duration-300">
         <MetricsGrid data={gridMetrics} />
       </div>
 
       {/* Level 2: Realtime Alerts (Critical Deficits, Dead Stocks, Analytics) */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 *:bg-white *:border *:border-amber-100 *:rounded-2xl *:p-6 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 *:bg-card-bg *:border *:border-amber-100 *:rounded-2xl *:p-6 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
         <CriticalDeficitWidget items={widgets.criticalDeficit || []} />
         <DeadStockWidget items={widgets.deadStock || []} />
         <RetentionAnalytics metrics={widgets.retentionMetrics} />
       </div>
 
       {/* Level 3: Financial Risks & Auditing Simulation Controls */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 *:bg-white *:border *:border-amber-100 *:rounded-2xl *:p-7 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
-        <FineVelocityGauge 
-          collected={widgets.fineVelocity?.collected || 0} 
-          outstanding={gridMetrics.totalOutstandingFines} 
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 *:bg-card-bg *:border *:border-amber-100 *:rounded-2xl *:p-7 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
+        <FineVelocityGauge
+          collected={widgets.fineVelocity?.collected || 0}
+          outstanding={gridMetrics.totalOutstandingFines}
         />
-        <AmnestySimulator 
-          totalOutstanding={gridMetrics.totalOutstandingFines} 
-          discount={amnestyDiscount} 
-          onChange={setAmnestyDiscount} 
+        <AmnestySimulator
+          totalOutstanding={gridMetrics.totalOutstandingFines}
+          discount={amnestyDiscount}
+          onChange={setAmnestyDiscount}
         />
       </div>
 
       {/* Level 4: Traffic Indexes & Distribution Return Timelines */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 *:bg-white *:border *:border-amber-100 *:rounded-2xl *:p-7 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 *:bg-card-bg *:border *:border-amber-100 *:rounded-2xl *:p-7 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
         <PeakHoursChart data={widgets.peakHours || []} />
         <ReturnForecaster forecast={widgets.returnForecast || []} />
       </div>
 
       {/* Level 5: Media Density Map & Reader Engagement Logs */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 *:bg-white *:border *:border-amber-100 *:rounded-2xl *:p-6 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 *:bg-card-bg *:border *:border-amber-100 *:rounded-2xl *:p-6 *:shadow-2xs *:transition-all *:duration-150 hover:*:border-slate-300">
         <div className="lg:col-span-2 p-0! overflow-hidden">
           <CategoryTreeMap categories={widgets.categoryPopularity || []} />
         </div>
@@ -118,4 +123,4 @@ export const Dashboard = () => {
       </div>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/server/src/modules/dashboard/dashboard.controller.ts b/server/src/modules/dashboard/dashboard.controller.ts
index 99b9e97..776df4e 100644
--- a/server/src/modules/dashboard/dashboard.controller.ts
+++ b/server/src/modules/dashboard/dashboard.controller.ts
@@ -3,7 +3,6 @@ import httpStatus from "http-status-codes";
 import { CompleteDashboardSummaryResponse } from "./dashboard.types.js";
 import asyncHandler from "../../utils/asyncHandler.js";
 import sendResponse from "../../utils/SendResponse.js";
-
 import dashboardService from "./dashboard.service.js";// Match your custom async wrapper utility
 
 /**
diff --git a/server/src/modules/dashboard/dashboard.repository.ts b/server/src/modules/dashboard/dashboard.repository.ts
index e95f71e..782e40d 100644
--- a/server/src/modules/dashboard/dashboard.repository.ts
+++ b/server/src/modules/dashboard/dashboard.repository.ts
@@ -2,6 +2,7 @@ import { Op, fn, col, literal } from "sequelize";
 import Book from "../../database/models/Book.js";
 import Fine from "../../database/models/Fine.js";
 import Issue from "../../database/models/Issue.js";
+import Category from "../../database/models/Category.js";
 import Member from "../../database/models/Member.js";
 import User from "../../database/models/User.js";
 import { OverdueRecord } from "./dashboard.types.js";
@@ -72,13 +73,15 @@ class DashboardRepository {
     // 1. CONCURRENT ROOT COUNT AGGREGATIONS
     // =========================================================================
     const [
-      totalBooksCount, 
+      totalBooksCount,
+      totalCopiesCount,
       activeMembersCount, 
       issuedBooksCount, 
       fineAggregationResult,
       recoveredFinesResult
     ] = await Promise.all([
       Book.count(),
+      Book.sum("available_copies").then(sum => sum || 0),
       Member.count({ where: { membership_status: "ACTIVE" } }),
       Issue.count({ where: { returned_date: null } }),
       Fine.findOne({
@@ -93,11 +96,11 @@ class DashboardRepository {
       })
     ]);
 
-    const totalCopiesCount = totalBooksCount; 
+    // The remainder of your calculations now receive a accurate inventory count anchor
     const availableBooksCount = Math.max(0, totalCopiesCount - issuedBooksCount);
     const totalFinesAgg = fineAggregationResult ? Number((fineAggregationResult as any).total_unpaid) : 0;
     const collectedFinesAgg = recoveredFinesResult ? Number((recoveredFinesResult as any).total_recovered) : 0;
-
+    
     // =========================================================================
     // 2. QUERY OVERDUE RECORDS JOIN TREE
     // =========================================================================
@@ -237,14 +240,53 @@ class DashboardRepository {
       };
     });
 
-    // Idea 7: Category Popularity Distribution Breakdown 
-    // Uses fallback mock data slices if categories are untagged in the current Book schema
-    const categoryPopularity = [
-      { name: "Engineering", value: Math.max(12, issuedBooksCount), color: "bg-teal-500" },
-      { name: "Mathematics", value: Math.max(8, activeMembersCount % 10), color: "bg-blue-500" },
-      { name: "Fiction", value: Math.max(15, totalBooksCount % 20), color: "bg-indigo-500" },
-      { name: "History", value: 6, color: "bg-amber-500" }
-    ];
+
+    // =========================================================================
+    // Idea 7: Category Popularity Distribution Breakdown (REAL-TIME DB QUERIES)
+    // =========================================================================
+    // 1. Predefined sequential dashboard brand colors for your top 4 slots
+    const brandColors = ["bg-teal-500", "bg-blue-500", "bg-indigo-500", "bg-amber-500"];
+
+    // 2. Query the category table to get the top 4 categories ordered by book volume
+    // Note: Assuming your Category model is imported/available in this scope.
+    // If it's named differently, adjust the model reference name accordingly.
+    const dbCategoryPopularity = await Category.findAll({
+      attributes: [
+        "category_id",
+        "category_name",
+        [fn("COUNT", fn("DISTINCT", col("books.book_id"))), "booksCount"]
+      ],
+      include: [
+        {
+          model: Book,
+          as: "books", // Matches your existing category-to-books association alias
+          attributes: [],
+          required: false // Keeps categories visible even if they have 0 volumes setup
+        }
+      ],
+      group: ["Category.category_id", "Category.category_name"],
+      order: [[fn("COUNT", fn("DISTINCT", col("books.book_id"))), "DESC"]],
+      limit: 4,
+      subQuery: false,
+      raw: true
+    });
+
+    // 3. Map database raw records directly into your existing frontend contract schema
+    const categoryPopularity = dbCategoryPopularity.map((cat: any, index: number) => ({
+      name: String(cat.category_name || "Uncategorized"),
+      value: Number(cat.booksCount) || 0,
+      color: brandColors[index] || brandColors[brandColors.length - 1]
+    }));
+
+    // 4. Fallback Guard: If your library database tables have 0 categories populated yet
+    if (categoryPopularity.length === 0) {
+      categoryPopularity.push(
+        { name: "Engineering", value: 0, color: "bg-teal-500" },
+        { name: "Mathematics", value: 0, color: "bg-blue-500" },
+        { name: "Fiction", value: 0, color: "bg-indigo-500" },
+        { name: "History", value: 0, color: "bg-amber-500" }
+      );
+    }
 
     // Idea 8: 7-Day Return Flow Forecaster
     const returnForecast = Array.from({ length: 7 }).map((_, i) => {
@@ -309,9 +351,7 @@ class DashboardRepository {
       widgets: {
         peakHours: peakHoursFormatted,
         criticalDeficit,
-        fineVelocity: {
-          collected: collectedFinesAgg
-        },
+        fineVelocity: { collected: collectedFinesAgg },
         deadStock,
         categoryPopularity,
         returnForecast,
diff --git a/server/src/modules/dashboard/dashboard.types.ts b/server/src/modules/dashboard/dashboard.types.ts
index 0f8c23b..c4ce043 100644
--- a/server/src/modules/dashboard/dashboard.types.ts
+++ b/server/src/modules/dashboard/dashboard.types.ts
@@ -52,7 +52,7 @@ export interface WidgetAnalyticsData {
   criticalDeficit: { id: string; name: string; requests: number }[];
   fineVelocity: { collected: number };
   deadStock: { id: string; title: string; shelf: string }[];
-  categoryPopularity: { name: string; value: number; color: string }[];
+  categoryPopularity: { name: string; value: number; color: string | undefined }[];
   returnForecast: { date: string; count: number }[];
   engagementLeaderboard: { id: string; name: string; loans: number; onTimeRate: number }[];
   retentionMetrics: { avgDays: number; threshold: number };