diff --git a/apps/web/src/components/admin/AdminAuditLogsView.tsx b/apps/web/src/components/admin/AdminAuditLogsView.tsx
index 18f65d5b4..4a9ce5b7f 100644
--- a/apps/web/src/components/admin/AdminAuditLogsView.tsx
+++ b/apps/web/src/components/admin/AdminAuditLogsView.tsx
@@ -34,7 +34,7 @@ export const AdminAuditLogsView: React.FC = () => {
             <div className="flex justify-between items-center">
                 <div>
                     <h2 className="text-2xl font-display font-bold text-white mb-1">AUDIT PROTOCOL</h2>
-                    <p className="text-kodo-content-dim font-mono text-xs uppercase tracking-widest">Global Immutable Ledger</p>
+                    <p className="text-muted-foreground font-mono text-xs uppercase tracking-widest">Global Immutable Ledger</p>
                 </div>
                 <div className="flex gap-2">
                     <Button variant="ghost" size="sm" onClick={() => fetchLogs()} disabled={loading}>
@@ -45,7 +45,7 @@ export const AdminAuditLogsView: React.FC = () => {
 
             <div className="flex flex-col md:flex-row gap-4">
                 <div className="relative flex-1">
-                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-content-dim" />
+                    <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">
@@ -53,11 +53,11 @@ export const AdminAuditLogsView: React.FC = () => {
                 </Button>
             </div>
 
-            <Card variant="glass" className="flex-1 overflow-hidden border-white/5 bg-black/40 flex flex-col p-0">
+            <Card variant="elevated" className="flex-1 overflow-hidden flex flex-col p-0">
                 <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-[10px] font-mono text-kodo-content-dim uppercase tracking-wider">
+                            <tr className="border-b border-white/5 bg-white/5 text-[10px] 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>
@@ -75,14 +75,14 @@ export const AdminAuditLogsView: React.FC = () => {
                                 </tr>
                             ) : logs.length === 0 ? (
                                 <tr>
-                                    <td colSpan={6} className="p-12 text-center text-kodo-content-dim font-mono uppercase text-xs">
+                                    <td colSpan={6} className="p-12 text-center text-muted-foreground font-mono uppercase text-xs">
                                         No temporal data packets recovered.
                                     </td>
                                 </tr>
                             ) : (
                                 logs.map((log) => (
                                     <tr key={log.id} className="hover:bg-white/5 transition-colors group border-white/5">
-                                        <td className="p-4 font-mono text-[10px] text-kodo-content-dim">
+                                        <td className="p-4 font-mono text-[10px] text-muted-foreground">
                                             {format(new Date(log.timestamp), 'MMM dd, HH:mm:ss')}
                                         </td>
                                         <td className="p-4">
@@ -97,9 +97,9 @@ export const AdminAuditLogsView: React.FC = () => {
                                             </span>
                                         </td>
                                         <td className="p-4 font-mono text-xs text-white/80">
-                                            {log.resource} <span className="text-kodo-content-dim opacity-50">#{log.resource_id?.slice(0, 8)}</span>
+                                            {log.resource} <span className="text-muted-foreground opacity-50">#{log.resource_id?.slice(0, 8)}</span>
                                         </td>
-                                        <td className="p-4 text-[10px] text-kodo-content-dim max-w-[200px] truncate">
+                                        <td className="p-4 text-[10px] text-muted-foreground max-w-[200px] truncate">
                                             {JSON.stringify(log.context)}
                                         </td>
                                         <td className="p-4 text-right">
@@ -107,7 +107,7 @@ export const AdminAuditLogsView: React.FC = () => {
                                                 <span className="font-mono text-[10px] text-white/80 flex items-center gap-1">
                                                     <Globe className="w-2 h-2" /> {log.ip_address}
                                                 </span>
-                                                <span className="text-[9px] text-kodo-content-dim truncate max-w-[120px]" title={log.user_agent}>
+                                                <span className="text-[9px] text-muted-foreground truncate max-w-[120px]" title={log.user_agent}>
                                                     {log.user_agent}
                                                 </span>
                                             </div>
@@ -121,7 +121,7 @@ export const AdminAuditLogsView: React.FC = () => {
 
                 {/* Pagination placeholder */}
                 <div className="p-4 border-t border-white/5 bg-white/2 flex justify-between items-center mt-auto">
-                    <span className="text-[10px] text-kodo-content-dim font-mono uppercase">
+                    <span className="text-[10px] text-muted-foreground font-mono uppercase">
                         Packet: {logs.length} / Total: {total}
                     </span>
                     <div className="flex gap-2">