diff --git a/apps/web/src/components/admin/AdminAuditLogsView.tsx b/apps/web/src/components/admin/AdminAuditLogsView.tsx
index ad763bcf2..095e20b1e 100644
--- a/apps/web/src/components/admin/AdminAuditLogsView.tsx
+++ b/apps/web/src/components/admin/AdminAuditLogsView.tsx
@@ -48,7 +48,7 @@ export const AdminAuditLogsView: React.FC = () => {
                     <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                     <Input placeholder="Search action, user, or IP..." className="pl-10 h-10" />
                 </div>
-                <Button variant="outline" className="h-10 border-white/10 hover:border-primary/50">
+                <Button variant="outline" className="h-10 border-border hover:border-primary/50">
                     <Filter className="w-4 h-4 mr-2" /> All Resources
                 </Button>
             </div>
@@ -57,7 +57,7 @@ export const AdminAuditLogsView: React.FC = () => {
                 <div className="overflow-x-auto">
                     <table className="w-full text-left border-collapse">
                         <thead>
-                            <tr className="border-b border-white/5 bg-white/5 text-xs font-mono text-muted-foreground uppercase tracking-wider">
+                            <tr className="border-b border-border bg-muted/30 text-xs font-mono text-muted-foreground uppercase tracking-wider">
                                 <th className="p-4">Timestamp</th>
                                 <th className="p-4">User</th>
                                 <th className="p-4">Action</th>
@@ -66,7 +66,7 @@ export const AdminAuditLogsView: React.FC = () => {
                                 <th className="p-4 text-right">Origin</th>
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-white/5 text-sm">
+                        <tbody className="divide-y divide-border text-sm">
                             {loading ? (
                                 <tr>
                                     <td colSpan={6} className="p-12 text-center">
@@ -120,7 +120,7 @@ export const AdminAuditLogsView: React.FC = () => {
                 </div>
 
                 {/* Pagination placeholder */}
-                <div className="p-4 border-t border-white/5 bg-white/2 flex justify-between items-center mt-auto">
+                <div className="p-4 border-t border-border bg-muted/20 flex justify-between items-center mt-auto">
                     <span className="text-xs text-muted-foreground font-mono uppercase">
                         Packet: {logs.length} / Total: {total}
                     </span>
diff --git a/apps/web/src/components/admin/AdminSettingsView.tsx b/apps/web/src/components/admin/AdminSettingsView.tsx
index a483797d7..f6e578304 100644
--- a/apps/web/src/components/admin/AdminSettingsView.tsx
+++ b/apps/web/src/components/admin/AdminSettingsView.tsx
@@ -86,7 +86,7 @@ export const AdminSettingsView: React.FC = () => {
             >
               <span className="font-bold text-foreground">{feature}</span>
               <div className="w-10 h-5 bg-success rounded-full relative cursor-pointer">
-                <div className="absolute top-0.5 right-0.5 w-4 h-4 bg-white rounded-full shadow-md"></div>
+                <div className="absolute top-0.5 right-0.5 w-4 h-4 bg-background rounded-full shadow-md"></div>
               </div>
             </div>
           ))}
@@ -113,7 +113,7 @@ export const AdminSettingsView: React.FC = () => {
               className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${maintenance ? 'bg-destructive' : 'bg-muted'}`}
             >
               <div
-                className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${maintenance ? 'left-7' : 'left-1'}`}
+                className={`absolute top-1 w-4 h-4 bg-background rounded-full transition-all ${maintenance ? 'left-7' : 'left-1'}`}
               ></div>
             </div>
           </div>
diff --git a/apps/web/src/components/admin/AdminUsersView.tsx b/apps/web/src/components/admin/AdminUsersView.tsx
index 027ea6bd6..cd926c24f 100644
--- a/apps/web/src/components/admin/AdminUsersView.tsx
+++ b/apps/web/src/components/admin/AdminUsersView.tsx
@@ -63,7 +63,7 @@ export const AdminUsersView: React.FC = () => {
           <p className="text-muted-foreground font-mono text-xs tracking-[0.2em]">USER DIRECTORY • ACCESS PERMISSIONS</p>
         </div>
         <div className="flex gap-3">
-          <Button variant="outline" onClick={() => addToast('Generating CSV matrix...', 'info')} className="border-white/10 hover:bg-white/5 font-mono text-xs tracking-widest uppercase">
+          <Button variant="outline" onClick={() => addToast('Generating CSV matrix...', 'info')} className="border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase">
             <Download className="w-4 h-4 mr-2" /> Export
           </Button>
           <Button variant="primary" onClick={() => addToast('Opening Registration Terminal...', 'info')} className="shadow-glow-cyan font-mono text-xs tracking-widest uppercase">
@@ -72,22 +72,22 @@ export const AdminUsersView: React.FC = () => {
         </div>
       </div>
 
-      <Card variant="glass" className="p-0 overflow-hidden bg-black/40 border-white/5">
-        <div className="p-6 border-b border-white/5 bg-white/2 flex flex-col md:flex-row gap-6 justify-between items-center">
+      <Card variant="glass" className="p-0 overflow-hidden bg-card/80 border-border">
+        <div className="p-6 border-b border-border bg-muted/20 flex flex-col md:flex-row gap-6 justify-between items-center">
           <div className="w-full md:w-96 relative group">
             <Input
               icon={<Search className="w-4 h-4" />}
               placeholder="Search by ID or frequency..."
               value={search}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}
-              className="bg-black/40 border-white/10"
+              className="bg-muted/30 border-border"
             />
           </div>
           <div className="flex gap-3">
-            <Button variant="outline" size="sm" className="bg-white/2 border-white/5 hover:bg-white/10 font-mono text-xs tracking-widest uppercase h-10">
+            <Button variant="outline" size="sm" className="bg-muted/20 border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase h-10">
               <Shield className="w-3 h-3 mr-2 text-primary" /> Filter Role
             </Button>
-            <Button variant="outline" size="sm" className="bg-white/2 border-white/5 hover:bg-white/10 font-mono text-xs tracking-widest uppercase h-10">
+            <Button variant="outline" size="sm" className="bg-muted/20 border-border hover:bg-muted/50 font-mono text-xs tracking-widest uppercase h-10">
               <Activity className="w-3 h-3 mr-2 text-primary" /> Filter Status
             </Button>
           </div>
@@ -101,7 +101,7 @@ export const AdminUsersView: React.FC = () => {
           <div className="overflow-x-auto">
             <table className="w-full text-left">
               <thead>
-                <tr className="text-xs text-muted-foreground uppercase tracking-[0.2em] border-b border-white/5 bg-black/20">
+                <tr className="text-xs text-muted-foreground uppercase tracking-[0.2em] border-b border-border bg-muted/30">
                   <th className="py-4 pl-8">Identity</th>
                   <th className="py-4">Access Origin</th>
                   <th className="py-4">Assigned Roles</th>
@@ -111,7 +111,7 @@ export const AdminUsersView: React.FC = () => {
                   <th className="py-4 text-right pr-8">Management</th>
                 </tr>
               </thead>
-              <tbody className="text-sm divide-y divide-white/5 font-sans">
+              <tbody className="text-sm divide-y divide-border font-sans">
                 {filteredUsers.map((user) => (
                   <UserTableRow
                     key={user.id}
@@ -133,15 +133,15 @@ export const AdminUsersView: React.FC = () => {
           </div>
         )}
 
-        <div className="p-6 border-t border-white/5 bg-black/20 flex justify-between items-center">
+        <div className="p-6 border-t border-border bg-muted/20 flex justify-between items-center">
           <span className="text-xs font-mono text-muted-foreground uppercase tracking-widest">
             Displaying {filteredUsers.length} / {users.length} active nodes
           </span>
           <div className="flex gap-3">
-            <Button variant="outline" size="sm" disabled className="border-white/5 opacity-50 font-mono text-xs h-9">
+            <Button variant="outline" size="sm" disabled className="border-border opacity-50 font-mono text-xs h-9">
               PREV
             </Button>
-            <Button variant="outline" size="sm" className="border-white/5 hover:bg-white/5 font-mono text-xs h-9">
+            <Button variant="outline" size="sm" className="border-border hover:bg-muted/50 font-mono text-xs h-9">
               NEXT
             </Button>
           </div>
diff --git a/apps/web/src/components/admin/UserTableRow.tsx b/apps/web/src/components/admin/UserTableRow.tsx
index 15c83aaa5..c034274c3 100644
--- a/apps/web/src/components/admin/UserTableRow.tsx
+++ b/apps/web/src/components/admin/UserTableRow.tsx
@@ -42,7 +42,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
             ></div>
           </div>
           <div>
-            <div className="font-bold text-white text-sm">{user.username}</div>
+            <div className="font-bold text-foreground text-sm">{user.username}</div>
             <div className="text-xs text-muted-foreground font-mono">{user.id}</div>
           </div>
         </div>
@@ -72,7 +72,7 @@ export const UserTableRow: React.FC<UserTableRowProps> = ({
       <td className="p-4 text-right">
         <div className="relative">
           <button
-            className="p-1.5 hover:bg-white/10 rounded text-muted-foreground hover:text-white"
+            className="p-1.5 hover:bg-muted/50 rounded text-muted-foreground hover:text-foreground"
             onClick={(e) => {
               e.stopPropagation();
               setShowMenu(!showMenu);
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx
index 84308f146..4ace541a9 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardHeader.tsx
@@ -17,7 +17,7 @@ export function AdminDashboardHeader({
   return (
     <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
       <div>
-        <h2 className="text-4xl font-display font-bold text-white mb-2 flex items-center gap-3">
+        <h2 className="text-4xl font-display font-bold text-foreground mb-2 flex items-center gap-3">
           <ShieldCheck className="text-primary w-10 h-10" /> COMMAND CENTER
         </h2>
         <div className="flex items-center gap-4">
@@ -27,7 +27,7 @@ export function AdminDashboardHeader({
               Nodes Online
             </span>
           </div>
-          <div className="h-3 w-px bg-white/10" />
+          <div className="h-3 w-px bg-border" aria-hidden />
           <span className="text-muted-foreground text-xs font-mono tracking-widest uppercase">
             Sector: 00-ALPHA
           </span>
@@ -36,7 +36,7 @@ export function AdminDashboardHeader({
       <div className="flex gap-3">
         <Button
           variant="outline"
-          className="border-white/10 hover:bg-white/5 font-mono text-xs h-10 tracking-widest"
+          className="border-border hover:bg-muted/50 font-mono text-xs h-10 tracking-widest"
           onClick={onRescan}
         >
           <RefreshCw
diff --git a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx
index cf8806f18..1592589ff 100644
--- a/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx
+++ b/apps/web/src/components/admin/admin-dashboard-view/AdminDashboardTabs.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
@@ -21,7 +20,7 @@ export function AdminDashboardTabs({
 }: AdminDashboardTabsProps) {
   return (
     <Tabs defaultValue="reports" className="w-full">
-      <TabsList className="bg-black/20 border-b border-white/5 w-full justify-start h-auto p-0 rounded-none gap-10 mb-8 backdrop-blur-md">
+      <TabsList className="bg-muted/30 border-b border-border w-full justify-start h-auto p-0 rounded-none gap-10 mb-8 backdrop-blur-md">
         <TabsTrigger
           value="reports"
           className="relative group rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent data-[state=active]:border-destructive data-[state=active]:text-destructive py-5 px-0 text-lg font-display bg-transparent transition-all"
@@ -56,7 +55,7 @@ export function AdminDashboardTabs({
       </TabsList>
 
       <TabsContent value="reports" className="animate-fadeIn">
-        <Card variant="glass" className="bg-black/40 border-white/5 overflow-hidden">
+        <Card variant="glass" className="bg-card/80 border-border overflow-hidden">
           <div className="divide-y divide-white/5">
             {reports.length === 0 ? (
               <div className="text-center py-20 text-muted-foreground font-mono uppercase tracking-widest opacity-40">
@@ -66,14 +65,14 @@ export function AdminDashboardTabs({
               reports.map((r) => (
                 <div
                   key={r.id}
-                  className="flex items-center justify-between p-6 hover:bg-white/5 transition-colors group"
+                  className="flex items-center justify-between p-6 hover:bg-muted/50 transition-colors group"
                 >
                   <div className="flex items-center gap-5">
                     <div className="p-3 bg-destructive/10 rounded-xl text-destructive group-hover:scale-110 transition-transform">
                       <AlertTriangle className="w-5 h-5" />
                     </div>
                     <div>
-                      <div className="font-bold text-lg text-white group-hover:text-destructive transition-colors uppercase tracking-tight">
+                      <div className="font-bold text-lg text-foreground group-hover:text-destructive transition-colors uppercase tracking-tight">
                         {r.targetName}
                       </div>
                       <div className="text-xs text-muted-foreground font-mono uppercase flex items-center gap-2">
@@ -109,19 +108,19 @@ export function AdminDashboardTabs({
       </TabsContent>
 
       <TabsContent value="uploads" className="animate-fadeIn">
-        <Card variant="glass" className="bg-black/40 border-white/5 overflow-hidden">
+        <Card variant="glass" className="bg-card/80 border-border overflow-hidden">
           <div className="divide-y divide-white/5">
             {uploads.map((u) => (
               <div
                 key={u.id}
-                className="flex items-center justify-between p-6 hover:bg-white/5 transition-colors group"
+                className="flex items-center justify-between p-6 hover:bg-muted/50 transition-colors group"
               >
                 <div className="flex items-center gap-5">
                   <div className="p-3 bg-primary/10 rounded-xl text-primary">
                     <HardDrive className="w-5 h-5" />
                   </div>
                   <div>
-                    <div className="font-bold text-lg text-white">{u.name}</div>
+                    <div className="font-bold text-lg text-foreground">{u.name}</div>
                     <div className="text-xs text-muted-foreground font-mono uppercase">
                       User: {u.user} • Payload: {u.size} • Handshake: {u.date}
                     </div>
@@ -143,9 +142,9 @@ export function AdminDashboardTabs({
       <TabsContent value="logs" className="animate-fadeIn">
         <Card
           variant="glass"
-          className="bg-black/40 border-white/5 font-mono overflow-hidden"
+          className="bg-card/80 border-border font-mono overflow-hidden"
         >
-          <div className="bg-black/40 p-4 border-b border-white/5 flex gap-4 text-xs font-bold text-muted-foreground uppercase tracking-widest">
+          <div className="bg-muted/30 p-4 border-b border-border flex gap-4 text-xs font-bold text-muted-foreground uppercase tracking-widest">
             <span className="w-32">Timestamp</span>
             <span className="w-24">Action</span>
             <span className="w-24">Node</span>
@@ -155,7 +154,7 @@ export function AdminDashboardTabs({
             {auditLogs.map((log, i) => (
               <div
                 key={i}
-                className="flex gap-4 p-4 hover:bg-white/5 transition-colors"
+                className="flex gap-4 p-4 hover:bg-muted/50 transition-colors"
               >
                 <span className="w-32 text-muted-foreground">
                   {log.timestamp
@@ -168,7 +167,7 @@ export function AdminDashboardTabs({
                 <span className="w-24 text-magenta-500">
                   USER_{log.user_id != null ? String(log.user_id).slice(0, 4) : '???'}
                 </span>
-                <span className="text-white opacity-80 truncate">
+                <span className="text-foreground opacity-80 truncate">
                   {JSON.stringify(log.details ?? log.metadata ?? {})}
                 </span>
               </div>