diff --git a/frontend/components/AdminOverlay.tsx b/frontend/components/AdminOverlay.tsx
index 6fb4e4bf..5842805f 100644
--- a/frontend/components/AdminOverlay.tsx
+++ b/frontend/components/AdminOverlay.tsx
@@ -113,11 +113,11 @@ export default function AdminOverlay({
         loading={confirmState.loading}
         dangerLevel={confirmState.affectedCount && confirmState.affectedCount > 10 ? 'high' : 'medium'}
       />
-      <div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-black/60 animate-in fade-in duration-300 font-sans">
-      <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-[#0A0A0A] border-l border-[#222222] shadow-none flex flex-col animate-in slide-in-from-right duration-500 rounded-none">
-        <div className="p-3 md:p-6 border-b border-[#222222] flex items-center justify-between">
+      <div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-black/80 animate-in fade-in duration-300">
+      <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md level-0 border-l border-border shadow-none flex flex-col animate-in slide-in-from-right duration-500">
+        <div className="p-3 md:p-6 border-b border-border flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-[#1A1A1A] rounded-none text-primary border border-[#222222]">
+            <div className="p-2 bg-black text-primary border border-border">
               <Shield size={20} />
             </div>
             <h2 className="text-xl font-normal text-white">System Admin</h2>
@@ -125,7 +125,7 @@ export default function AdminOverlay({
           <button
             data-testid="close-admin-overlay"
             onClick={onClose}
-            className="p-2 hover:bg-[#1A1A1A] rounded-none transition-colors text-[#888888] focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+            className="p-2 hover:bg-black border border-transparent hover:border-border transition-colors text-[#888888] focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
             aria-label="Close"
           >
             <X size={20} />
@@ -141,7 +141,7 @@ export default function AdminOverlay({
               </div>
               <button
                 onClick={() => setShowCreateUserModal(true)}
-                className="flex items-center gap-1 text-xs font-normal text-primary hover:text-[#F58618]/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded-none px-1"
+                className="flex items-center gap-1 text-xs font-normal text-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none px-1"
               >
                 <UserPlus size={12} /> Add User
               </button>
@@ -149,9 +149,9 @@ export default function AdminOverlay({
             
             <div className="grid gap-1.5 md:gap-2">
               {users.map(u => (
-                <div key={u.id} className="bg-transparent border border-[#222222] p-3 md:p-4 rounded-none flex items-center justify-between">
+                <div key={u.id} className="bg-transparent border border-border p-3 md:p-4 flex items-center justify-between transition-colors hover:border-muted">
                   <div className="flex items-center gap-2 md:gap-3">
-                    <div className={`p-2 rounded-none ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-[#1A1A1A] text-[#888888]"}`}>
+                    <div className={`p-2 ${u.role === 'admin' ? "bg-primary/20 text-primary border border-primary/30" : "bg-black text-[#888888] border border-border"}`}>
                       <User size={16} />
                     </div>
                     <div>
@@ -171,7 +171,7 @@ export default function AdminOverlay({
                           loading: false,
                         });
                       }}
-                      className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-none transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                      className="p-2 text-rose-500 hover:bg-rose-500/10 transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
                       aria-label={`Delete user ${u.username}`}
                     >
                       <Trash2 size={16} />
@@ -190,7 +190,7 @@ export default function AdminOverlay({
               </div>
               <button
                 onClick={() => setShowCreateCategoryModal(true)}
-                className="flex items-center gap-1 text-xs font-normal text-primary hover:text-[#F58618]/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded-none px-1"
+                className="flex items-center gap-1 text-xs font-normal text-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none px-1"
               >
                 <Plus size={12} /> Add Category
               </button>
@@ -198,9 +198,9 @@ export default function AdminOverlay({
 
             <div className="grid gap-1.5 md:gap-2">
               {categories.map(cat => (
-                <div key={cat.id} className="bg-transparent border border-[#222222] p-3 md:p-4 rounded-none flex items-center justify-between">
+                <div key={cat.id} className="bg-transparent border border-border p-3 md:p-4 flex items-center justify-between transition-colors hover:border-muted">
                   <div className="flex items-center gap-2 md:gap-3">
-                    <div className="p-2 bg-primary/10 rounded-none text-primary">
+                    <div className="p-2 bg-primary/10 text-primary border border-primary/20">
                       <Layers size={16} />
                     </div>
                     <div>
@@ -220,7 +220,7 @@ export default function AdminOverlay({
                          loading: false,
                        });
                      }}
-                     className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-none transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+                     className="p-2 text-rose-500 hover:bg-rose-500/10 transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
                      aria-label={`Delete category ${cat.name}`}
                   >
                      <Trash2 size={16} />
@@ -230,7 +230,7 @@ export default function AdminOverlay({
             </div>
           </section>
 
-          <section className="p-4 md:p-6 bg-[#1A1A1A] rounded-none border border-[#222222] space-y-2 md:space-y-3">
+          <section className="p-4 md:p-6 level-1 space-y-2 md:space-y-3">
             <div className="flex items-center gap-2 text-rose-500">
               <AlertTriangle size={16} />
               <p className="text-sm font-normal">Sign Out</p>
@@ -241,7 +241,7 @@ export default function AdminOverlay({
                 import('@/lib/auth').then(m => m.clearAuth());
                 window.location.href = '/login';
               }}
-              className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-normal py-3 rounded-none transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
+              className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-normal py-3 transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
             >
               <LogOut size={16} /> Sign Out
             </button>