diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx
index b8e7c19..5ce209b 100644
--- a/src/components/AdminSidebar.tsx
+++ b/src/components/AdminSidebar.tsx
@@ -11,30 +11,30 @@ type LinkItem = {
 const links: LinkItem[] = [
   { href: '/admin', label: 'Dashboard', icon: 'dashboard.svg', group: '__top__' },
 
-  { href: '/admin/roles',                        label: 'Internal Role Management',   icon: 'role.svg',       group: 'Management' },
-  { href: '/admin/runtime-roles',                label: 'External Role Management',   icon: 'role.svg',       group: 'Management' },
-  { href: '/admin/onboarding-schemas',           label: 'External Onboarding',        icon: 'reviews.svg',    group: 'Management' },
-  { href: '/admin/internal-dashboard-management',label: 'Internal Dashboard Mgmt.',   icon: 'dashboard.svg',  group: 'Management' },
-  { href: '/admin/external-dashboard-management',label: 'External Dashboard Mgmt.',   icon: 'dashboard.svg',  aliasPrefix: '/admin/role-ui-configs', group: 'Management' },
-  { href: '/admin/approval',                     label: 'Approval Management',        icon: 'approval.svg',   group: 'Management' },
-  { href: '/admin/department',                   label: 'Department Management',      icon: 'department.svg', group: 'Management' },
-  { href: '/admin/designation',                  label: 'Designation Management',     icon: 'designation.svg',group: 'Management' },
-  { href: '/admin/employees',                    label: 'Employee Management',        icon: 'users.svg',      group: 'Management' },
-  { href: '/admin/users',                        label: 'Users Management',           icon: 'users.svg',      group: 'Management' },
-  { href: '/admin/company',                      label: 'Company Management',         icon: 'company.svg',    group: 'Management' },
-  { href: '/admin/candidate',                    label: 'Candidate Management',       icon: 'candidate.svg',  group: 'Management' },
-  { href: '/admin/customer',                     label: 'Customer Management',        icon: 'users.svg',      group: 'Management' },
-  { href: '/admin/photographer',                 label: 'Photographer Management',    icon: 'photographer.svg',group: 'Management' },
-  { href: '/admin/makeup-artist',                label: 'Makeup Artist Management',   icon: 'makeup-artist.svg',group: 'Management'},
-  { href: '/admin/tutors',                       label: 'Tutors Management',          icon: 'tutor.svg',      group: 'Management' },
-  { href: '/admin/developers',                   label: 'Developers Management',      icon: 'developers.svg', group: 'Management' },
-  { href: '/admin/video-editors',                label: 'Video Editor Management',    icon: 'developers.svg', group: 'Management' },
-  { href: '/admin/fitness-trainers',             label: 'Fitness Trainer Management', icon: 'tutor.svg',      group: 'Management' },
-  { href: '/admin/catering-services',            label: 'Catering Services Mgmt.',    icon: 'company.svg',    group: 'Management' },
-  { href: '/admin/graphic-designers',            label: 'Graphics Designer Mgmt.',    icon: 'developers.svg', group: 'Management' },
-  { href: '/admin/social-media-managers',        label: 'Social Media Mgr. Mgmt.',    icon: 'developers.svg', group: 'Management' },
-  { href: '/admin/jobs',                         label: 'Jobs Management',            icon: 'jobs.svg',       group: 'Management' },
-  { href: '/admin/leads',                        label: 'Leads Management',           icon: 'leads.svg',      group: 'Management' },
+  { href: '/admin/roles',                         label: 'Internal Role Management',    icon: 'role.svg',         group: 'Management' },
+  { href: '/admin/runtime-roles',                 label: 'External Role Management',    icon: 'role.svg',         group: 'Management' },
+  { href: '/admin/onboarding-schemas',            label: 'External Onboarding',         icon: 'reviews.svg',      group: 'Management' },
+  { href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Mgmt.',    icon: 'dashboard.svg',    group: 'Management' },
+  { href: '/admin/external-dashboard-management', label: 'External Dashboard Mgmt.',    icon: 'dashboard.svg',    aliasPrefix: '/admin/role-ui-configs', group: 'Management' },
+  { href: '/admin/approval',                      label: 'Approval Management',         icon: 'approval.svg',     group: 'Management' },
+  { href: '/admin/department',                    label: 'Department Management',       icon: 'department.svg',   group: 'Management' },
+  { href: '/admin/designation',                   label: 'Designation Management',      icon: 'designation.svg',  group: 'Management' },
+  { href: '/admin/employees',                     label: 'Employee Management',         icon: 'users.svg',        group: 'Management' },
+  { href: '/admin/users',                         label: 'Users Management',            icon: 'users.svg',        group: 'Management' },
+  { href: '/admin/company',                       label: 'Company Management',          icon: 'company.svg',      group: 'Management' },
+  { href: '/admin/candidate',                     label: 'Candidate Management',        icon: 'candidate.svg',    group: 'Management' },
+  { href: '/admin/customer',                      label: 'Customer Management',         icon: 'users.svg',        group: 'Management' },
+  { href: '/admin/photographer',                  label: 'Photographer Management',     icon: 'photographer.svg', group: 'Management' },
+  { href: '/admin/makeup-artist',                 label: 'Makeup Artist Management',    icon: 'makeup-artist.svg',group: 'Management' },
+  { href: '/admin/tutors',                        label: 'Tutors Management',           icon: 'tutor.svg',        group: 'Management' },
+  { href: '/admin/developers',                    label: 'Developers Management',       icon: 'developers.svg',   group: 'Management' },
+  { href: '/admin/video-editors',                 label: 'Video Editor Management',     icon: 'developers.svg',   group: 'Management' },
+  { href: '/admin/fitness-trainers',              label: 'Fitness Trainer Management',  icon: 'tutor.svg',        group: 'Management' },
+  { href: '/admin/catering-services',             label: 'Catering Services',           icon: 'company.svg',      group: 'Management' },
+  { href: '/admin/graphic-designers',             label: 'Graphics Designer Mgmt.',     icon: 'developers.svg',   group: 'Management' },
+  { href: '/admin/social-media-managers',         label: 'Social Media Mgr.',           icon: 'developers.svg',   group: 'Management' },
+  { href: '/admin/jobs',                          label: 'Jobs Management',             icon: 'jobs.svg',         group: 'Management' },
+  { href: '/admin/leads',                         label: 'Leads Management',            icon: 'leads.svg',        group: 'Management' },
 
   { href: '/admin/pricing',   label: 'Pricing Management',  icon: 'pricing.svg',  group: 'Finance' },
   { href: '/admin/credit',    label: 'Credit Management',   icon: 'credits.svg',  group: 'Finance' },
@@ -45,11 +45,11 @@ const links: LinkItem[] = [
   { href: '/admin/invoice',   label: 'Invoice Management',  icon: 'invoice.svg',  group: 'Finance' },
   { href: '/admin/ledger',    label: 'Ledger Management',   icon: 'ledger.svg',   group: 'Finance' },
 
-  { href: '/admin/review',        label: 'Review Management',         icon: 'reviews.svg', group: 'Platform' },
-  { href: '/admin/support',       label: 'Support Management',        icon: 'support.svg', group: 'Platform' },
-  { href: '/admin/kb',            label: 'Knowledge Base Mgmt.',      icon: 'reviews.svg', group: 'Platform' },
-  { href: '/admin/notifications', label: 'Notifications',             icon: 'reviews.svg', group: 'Platform' },
-  { href: '/admin/report',        label: 'Report Management',         icon: 'report.svg',  group: 'Platform' },
+  { href: '/admin/review',        label: 'Review Management',    icon: 'reviews.svg', group: 'Platform' },
+  { href: '/admin/support',       label: 'Support Management',   icon: 'support.svg', group: 'Platform' },
+  { href: '/admin/kb',            label: 'Knowledge Base',       icon: 'reviews.svg', group: 'Platform' },
+  { href: '/admin/notifications', label: 'Notifications',        icon: 'reviews.svg', group: 'Platform' },
+  { href: '/admin/report',        label: 'Report Management',    icon: 'report.svg',  group: 'Platform' },
 ];
 
 export default function AdminSidebar() {
@@ -61,11 +61,6 @@ export default function AdminSidebar() {
     return location.pathname === href || location.pathname.startsWith(`${href}/`);
   };
 
-  const topLinks  = links.filter(l => l.group === '__top__');
-  const mgmtLinks = links.filter(l => l.group === 'Management');
-  const finLinks  = links.filter(l => l.group === 'Finance');
-  const platLinks = links.filter(l => l.group === 'Platform');
-
   const NavItem = (item: LinkItem) => {
     const active = isActive(item.href, item.aliasPrefix);
     return (
@@ -74,57 +69,74 @@ export default function AdminSidebar() {
         activeClass=""
         inactiveClass=""
         title={item.label}
-        class={`relative flex items-center gap-3 rounded-xl py-2.5 pl-4 pr-3 text-sm font-semibold tracking-wide transition-all duration-150 ${
+        class={`relative flex min-w-0 items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-semibold transition-colors duration-150 ${
           active
-            ? 'bg-slate-50 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-6 before:-translate-y-1/2 before:w-1 before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']'
-            : 'text-[#0a1d37]/60 hover:bg-slate-50 hover:text-[#0a1d37]'
+            ? 'bg-slate-100 text-[#0a1d37] before:absolute before:left-0 before:top-1/2 before:h-5 before:-translate-y-1/2 before:w-[3px] before:rounded-r-full before:bg-[#fd6216] before:content-[\'\']'
+            : 'text-[#0a1d37]/55 hover:bg-slate-50 hover:text-[#0a1d37]'
         }`}
       >
         <img
           src={`/sidebar-icons/${item.icon}`}
           alt=""
-          class="h-[18px] w-[18px] shrink-0"
-          style={active ? 'opacity:0.9' : 'opacity:0.4'}
+          class="h-4 w-4 shrink-0"
+          style={active ? 'opacity:0.85' : 'opacity:0.35'}
         />
         <span class="truncate">{item.label}</span>
       </A>
     );
   };
 
-  const GroupLabel = (label: string) => (
-    <div class="px-4 pb-2 pt-4">
-      <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</p>
-    </div>
-  );
+  const topLinks  = links.filter(l => l.group === '__top__');
+  const mgmtLinks = links.filter(l => l.group === 'Management');
+  const finLinks  = links.filter(l => l.group === 'Finance');
+  const platLinks = links.filter(l => l.group === 'Platform');
 
   return (
-    <aside class="flex h-full w-64 flex-col border-r border-slate-100 bg-white py-5">
-      {/* Top (Dashboard) */}
-      <nav class="px-3">
+    <aside class="flex h-full w-60 flex-col border-r border-slate-100 bg-white">
+
+      {/* Top: Dashboard link */}
+      <div class="px-3 pt-4 pb-2">
         {topLinks.map(NavItem)}
-      </nav>
-
-      {/* Scrollable nav groups */}
-      <div class="scrollbar mt-1 min-h-0 flex-1 overflow-y-auto px-3">
-        {GroupLabel('Management')}
-        {mgmtLinks.map(NavItem)}
-
-        {GroupLabel('Finance')}
-        {finLinks.map(NavItem)}
-
-        {GroupLabel('Platform')}
-        {platLinks.map(NavItem)}
       </div>
 
-      {/* User card at bottom */}
-      <div class="mt-2 border-t border-slate-100 px-4 pt-4">
-        <div class="flex items-center gap-3 rounded-xl bg-slate-50 p-3">
-          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#fd6216] text-sm font-black text-white">
+      {/* Scrollable groups */}
+      <div class="scrollbar flex-1 overflow-y-auto px-3 pb-3" style="min-height:0">
+
+        {/* Management */}
+        <p class="mt-3 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
+          Management
+        </p>
+        <div class="space-y-0.5">
+          {mgmtLinks.map(NavItem)}
+        </div>
+
+        {/* Finance */}
+        <p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
+          Finance
+        </p>
+        <div class="space-y-0.5">
+          {finLinks.map(NavItem)}
+        </div>
+
+        {/* Platform */}
+        <p class="mt-4 mb-1.5 px-2 text-[10px] font-bold uppercase tracking-widest text-slate-400">
+          Platform
+        </p>
+        <div class="space-y-0.5">
+          {platLinks.map(NavItem)}
+        </div>
+
+      </div>
+
+      {/* User card */}
+      <div class="border-t border-slate-100 px-3 py-3">
+        <div class="flex items-center gap-2.5 rounded-lg bg-slate-50 px-3 py-2.5">
+          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#0a1d37] text-xs font-black text-white">
             A
           </div>
-          <div class="min-w-0 flex-1 overflow-hidden">
-            <p class="truncate text-xs font-bold text-[#0a1d37]">Admin User</p>
-            <p class="truncate text-[10px] text-slate-500">master_admin@nxtgauge.io</p>
+          <div class="min-w-0 flex-1">
+            <p class="truncate text-[12px] font-bold text-[#0a1d37]">Admin User</p>
+            <p class="truncate text-[10px] text-slate-400">master_admin@nxtgauge.io</p>
           </div>
         </div>
       </div>
diff --git a/src/routes/admin/index.tsx b/src/routes/admin/index.tsx
index d2cd757..37c08a2 100644
--- a/src/routes/admin/index.tsx
+++ b/src/routes/admin/index.tsx
@@ -11,123 +11,105 @@ type KpiCard = {
   label: string;
   value: string;
   badge?: string;
-  badgeColor?: string;
+  badgeColor: string;
   href: string;
   icon: Component<any>;
-  accentColor: string; // full tailwind class for the left bar bg
-  chipBg: string;
-  chipFg: string;
 };
 
 const KPI: KpiCard[] = [
-  {
-    label: 'Total Users', value: '—', badge: '+0%', badgeColor: 'text-emerald-600 bg-emerald-50',
-    href: '/admin/users', icon: Users,
-    accentColor: 'bg-[#fd6216]', chipBg: 'bg-[#fd6216]/5', chipFg: 'text-[#fd6216]',
-  },
-  {
-    label: 'Total Revenue', value: '—', badge: 'Weekly', badgeColor: 'text-[#0a1d37] bg-slate-100',
-    href: '/admin/invoice', icon: Receipt,
-    accentColor: 'bg-[#0a1d37]', chipBg: 'bg-[#0a1d37]/5', chipFg: 'text-[#0a1d37]',
-  },
-  {
-    label: 'Active Roles', value: '—', badge: 'Live', badgeColor: 'text-amber-600 bg-amber-50',
-    href: '/admin/runtime-roles', icon: Briefcase,
-    accentColor: 'bg-[#fd6216]', chipBg: 'bg-amber-50', chipFg: 'text-amber-600',
-  },
-  {
-    label: 'Pending Approvals', value: '—', badge: 'Action Required', badgeColor: 'text-white bg-red-500',
-    href: '/admin/approval', icon: Clock,
-    accentColor: 'bg-[#fd6216]', chipBg: 'bg-red-50', chipFg: 'text-red-600',
-  },
+  { label: 'Total Users',       value: '—', badge: '+0%',             badgeColor: 'text-emerald-600 bg-emerald-50', href: '/admin/users',         icon: Users    },
+  { label: 'Total Revenue',     value: '—', badge: 'Weekly',          badgeColor: 'text-[#0a1d37] bg-slate-100',   href: '/admin/invoice',       icon: Receipt  },
+  { label: 'Active Roles',      value: '—', badge: 'Live',            badgeColor: 'text-amber-600 bg-amber-50',    href: '/admin/runtime-roles', icon: Briefcase},
+  { label: 'Pending Approvals', value: '—', badge: 'Action Required', badgeColor: 'text-white bg-red-500',         href: '/admin/approval',      icon: Clock    },
 ];
 
-// Activity chart data (placeholder heights)
 const ACTIVITY = [
   { day: 'MON', h: 40 }, { day: 'TUE', h: 65 }, { day: 'WED', h: 95 },
   { day: 'THU', h: 70 }, { day: 'FRI', h: 55 }, { day: 'SAT', h: 30 }, { day: 'SUN', h: 45 },
 ];
 
 const QUICK_ACTIONS = [
-  { label: 'Create New Role',      href: '/admin/roles/create',            icon: Shield },
-  { label: 'Configure Dashboard',  href: '/admin/external-dashboard-management', icon: LayoutDashboard },
-  { label: 'Add Employee',         href: '/admin/employees',               icon: Users },
+  { label: 'Create New Role',     href: '/admin/roles/create',                  icon: Shield        },
+  { label: 'Configure Dashboard', href: '/admin/external-dashboard-management', icon: LayoutDashboard },
+  { label: 'Add Employee',        href: '/admin/employees',                     icon: Users         },
 ];
 
 const PIPELINE = [
-  { name: 'Candidate Roles',   type: 'External Role',     status: 'Active',   statusBg: 'bg-emerald-50 text-emerald-600',  progress: 85,  color: 'bg-[#fd6216]' },
-  { name: 'Onboarding Flows',  type: 'Schema Builder',    status: 'Pending',  statusBg: 'bg-amber-50 text-amber-600',      progress: 42,  color: 'bg-amber-400' },
-  { name: 'Dashboard Config',  type: 'UI Config',         status: 'Draft',    statusBg: 'bg-slate-100 text-slate-500',     progress: 12,  color: 'bg-slate-400' },
+  { name: 'Candidate Roles',  type: 'External Role',  status: 'Active',  statusColor: 'text-emerald-600 bg-emerald-50', progress: 85, barColor: 'bg-[#fd6216]'  },
+  { name: 'Onboarding Flows', type: 'Schema Builder', status: 'Pending', statusColor: 'text-amber-600 bg-amber-50',     progress: 42, barColor: 'bg-amber-400'   },
+  { name: 'Dashboard Config', type: 'UI Config',      status: 'Draft',   statusColor: 'text-slate-500 bg-slate-100',    progress: 12, barColor: 'bg-slate-300'   },
 ];
 
 const CONTROL: Array<{ label: string; href: string; desc: string; icon: Component<any>; iconBg: string; iconFg: string }> = [
-  { label: 'Internal Roles',      href: '/admin/roles',                          desc: 'Permissions & access levels for internal staff.',     icon: Shield,          iconBg: 'bg-blue-50',   iconFg: 'text-blue-600'   },
-  { label: 'External Roles',      href: '/admin/runtime-roles',                  desc: 'Modules, credits & capabilities per external role.',  icon: UserCog,         iconBg: 'bg-violet-50', iconFg: 'text-violet-600' },
-  { label: 'Onboarding Flows',    href: '/admin/onboarding-schemas',             desc: 'Schema-driven onboarding forms per external role.',   icon: FormInput,       iconBg: 'bg-amber-50',  iconFg: 'text-amber-600'  },
-  { label: 'External Dashboards', href: '/admin/external-dashboard-management',  desc: 'Sidebar, widgets & runtimeConfig per role.',          icon: LayoutDashboard, iconBg: 'bg-teal-50',   iconFg: 'text-teal-600'   },
-  { label: 'Internal Dashboards', href: '/admin/internal-dashboard-management',  desc: 'Home widgets & KPI panels for internal staff.',       icon: LayoutDashboard, iconBg: 'bg-orange-50', iconFg: 'text-orange-600' },
-  { label: 'Approval Queue',      href: '/admin/approval',                       desc: 'Review, approve or reject pending action requests.',  icon: BadgeCheck,      iconBg: 'bg-rose-50',   iconFg: 'text-rose-600'   },
+  { label: 'Internal Roles',      href: '/admin/roles',                         desc: 'Permissions & access levels for internal staff.',    icon: Shield,          iconBg: 'bg-blue-50',   iconFg: 'text-blue-600'   },
+  { label: 'External Roles',      href: '/admin/runtime-roles',                 desc: 'Modules, credits & capabilities per external role.', icon: UserCog,         iconBg: 'bg-violet-50', iconFg: 'text-violet-600' },
+  { label: 'Onboarding Flows',    href: '/admin/onboarding-schemas',            desc: 'Schema-driven onboarding forms per external role.',  icon: FormInput,       iconBg: 'bg-amber-50',  iconFg: 'text-amber-600'  },
+  { label: 'External Dashboards', href: '/admin/external-dashboard-management', desc: 'Sidebar, widgets & runtimeConfig per role.',         icon: LayoutDashboard, iconBg: 'bg-teal-50',   iconFg: 'text-teal-600'   },
+  { label: 'Internal Dashboards', href: '/admin/internal-dashboard-management', desc: 'Home widgets & KPI panels for internal staff.',      icon: LayoutDashboard, iconBg: 'bg-orange-50', iconFg: 'text-orange-600' },
+  { label: 'Approval Queue',      href: '/admin/approval',                      desc: 'Review, approve or reject pending action requests.', icon: BadgeCheck,      iconBg: 'bg-rose-50',   iconFg: 'text-rose-600'   },
 ];
 
 export default function AdminDashboard() {
   return (
     <AdminShell>
-      <div class="space-y-8">
+      <div class="space-y-6">
 
         {/* ── KPI Cards ── */}
-        <div class="grid grid-cols-2 gap-6 lg:grid-cols-4">
+        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
           {KPI.map((kpi) => {
             const Icon = kpi.icon;
             return (
               <A
                 href={kpi.href}
-                class="relative overflow-hidden rounded-2xl bg-white p-6 shadow-[0_8px_32px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_40px_rgba(10,29,55,0.08)]"
+                class="relative overflow-hidden rounded-xl bg-white p-5 shadow-[0_4px_20px_rgba(10,29,55,0.06)] transition-all duration-200 hover:-translate-y-px hover:shadow-[0_8px_28px_rgba(10,29,55,0.10)]"
               >
-                {/* Left accent bar */}
-                <div class={`absolute left-0 top-0 h-full w-1.5 ${kpi.accentColor}`} />
+                {/* Left navy accent bar */}
+                <div class="absolute left-0 top-0 h-full w-1.5 rounded-l-xl bg-[#0a1d37]" />
 
-                <div class="flex items-start justify-between">
-                  <div class={`flex h-12 w-12 items-center justify-center rounded-xl ${kpi.chipBg}`}>
-                    <Icon class={`h-6 w-6 ${kpi.chipFg}`} />
+                <div class="flex items-start justify-between pl-1">
+                  <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-[#0a1d37]/6">
+                    <Icon class="h-5 w-5 text-[#0a1d37]" />
                   </div>
                   {kpi.badge && (
-                    <span class={`rounded-full px-2 py-1 text-[11px] font-bold ${kpi.badgeColor}`}>
+                    <span class={`rounded-md px-2 py-0.5 text-[10px] font-bold ${kpi.badgeColor}`}>
                       {kpi.badge}
                     </span>
                   )}
                 </div>
 
-                <h3 class="mt-4 text-[10px] font-bold uppercase tracking-widest text-slate-400">
-                  {kpi.label}
-                </h3>
-                <p class="mt-1 text-3xl font-black tracking-tight text-[#0a1d37]">
-                  {kpi.value}
-                </p>
+                <div class="mt-4 pl-1">
+                  <h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400">
+                    {kpi.label}
+                  </h3>
+                  <p class="mt-1 text-3xl font-black tracking-tight text-[#0a1d37]">
+                    {kpi.value}
+                  </p>
+                </div>
               </A>
             );
           })}
         </div>
 
-        {/* ── Activity Chart + Intelligence Hub ── */}
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+        {/* ── Activity + Intelligence Hub ── */}
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
 
           {/* Activity Chart */}
-          <div class="lg:col-span-2 rounded-3xl bg-white p-8 shadow-[0_8px_32px_rgba(10,29,55,0.04)]">
-            <div class="mb-8 flex items-end justify-between">
+          <div class="lg:col-span-2 rounded-xl bg-white p-6 shadow-[0_4px_20px_rgba(10,29,55,0.06)]">
+            <div class="mb-6 flex items-end justify-between">
               <div>
-                <h2 class="text-xl font-black tracking-tight text-[#0a1d37]">System Activity</h2>
-                <p class="mt-0.5 text-sm text-slate-500">Platform traffic & Tracecoin velocity</p>
+                <h2 class="text-lg font-black tracking-tight text-[#0a1d37]">System Activity</h2>
+                <p class="mt-0.5 text-sm text-slate-400">Platform traffic & Tracecoin velocity</p>
               </div>
-              <select class="rounded-lg border-0 bg-slate-50 py-2 pl-3 pr-8 text-xs font-bold text-[#0a1d37] focus:ring-0">
+              <select class="rounded-lg border border-slate-200 bg-white py-1.5 pl-3 pr-8 text-xs font-semibold text-[#0a1d37] focus:outline-none focus:ring-2 focus:ring-[#0a1d37]/10">
                 <option>Last 7 Days</option>
                 <option>Last 30 Days</option>
               </select>
             </div>
-            <div class="flex h-52 items-end justify-between gap-3">
+            <div class="flex h-44 items-end justify-between gap-2">
               {ACTIVITY.map((d) => (
-                <div class="group flex flex-1 flex-col items-center gap-2">
+                <div class="group flex flex-1 flex-col items-center gap-1.5">
                   <div
-                    class={`w-full rounded-t-xl transition-all duration-200 ${d.day === 'WED' ? 'bg-[#fd6216] shadow-lg shadow-[#fd6216]/20' : 'bg-slate-100 group-hover:bg-[#0a1d37]'}`}
+                    class={`w-full rounded-t-md transition-all duration-200 ${d.day === 'WED' ? 'bg-[#0a1d37] shadow-lg shadow-[#0a1d37]/20' : 'bg-slate-100 group-hover:bg-slate-300'}`}
                     style={`height: ${d.h}%`}
                   />
                   <span class={`text-[10px] font-bold ${d.day === 'WED' ? 'text-[#0a1d37]' : 'text-slate-400'}`}>
@@ -138,21 +120,21 @@ export default function AdminDashboard() {
             </div>
           </div>
 
-          {/* Intelligence Hub + System Health */}
+          {/* Intelligence Hub + Pipeline */}
           <div class="space-y-4">
             {/* Intelligence Hub */}
-            <div class="relative overflow-hidden rounded-3xl bg-[#0a1d37] p-6 text-white">
-              <div class="absolute -right-4 -top-4 h-24 w-24 rounded-full bg-white/5 blur-2xl" />
-              <h2 class="mb-4 text-lg font-black">Intelligence Hub</h2>
-              <div class="space-y-2.5">
+            <div class="relative overflow-hidden rounded-xl bg-[#0a1d37] p-5 text-white">
+              <div class="absolute -right-4 -top-4 h-20 w-20 rounded-full bg-white/5 blur-2xl" />
+              <h2 class="mb-3 text-base font-black">Intelligence Hub</h2>
+              <div class="space-y-2">
                 {QUICK_ACTIONS.map((a) => {
                   const Icon = a.icon;
                   return (
                     <A
                       href={a.href}
-                      class="group flex w-full items-center justify-between rounded-2xl bg-white/10 p-3.5 transition-all hover:bg-white/15"
+                      class="group flex w-full items-center justify-between rounded-lg bg-white/10 px-3.5 py-3 transition-all hover:bg-white/15"
                     >
-                      <span class="text-sm font-semibold">{a.label}</span>
+                      <span class="text-[13px] font-semibold">{a.label}</span>
                       <Icon class="h-4 w-4 text-[#fd6216] transition-transform group-hover:translate-x-0.5" />
                     </A>
                   );
@@ -161,26 +143,25 @@ export default function AdminDashboard() {
             </div>
 
             {/* Pipeline Status */}
-            <div class="rounded-3xl bg-white p-6 shadow-[0_8px_32px_rgba(10,29,55,0.04)]">
-              <h2 class="mb-4 text-[11px] font-black uppercase tracking-widest text-[#0a1d37]">
+            <div class="rounded-xl bg-white p-5 shadow-[0_4px_20px_rgba(10,29,55,0.06)]">
+              <h2 class="mb-4 text-[10px] font-bold uppercase tracking-widest text-[#0a1d37]">
                 Pipeline Status
               </h2>
               <div class="space-y-4">
                 {PIPELINE.map((p) => (
-                  <div class="space-y-1.5">
-                    <div class="flex items-center justify-between">
-                      <div>
-                        <p class="text-sm font-bold text-[#0a1d37]">{p.name}</p>
+                  <div>
+                    <div class="mb-1.5 flex items-center justify-between gap-2">
+                      <div class="min-w-0">
+                        <p class="truncate text-[13px] font-bold text-[#0a1d37]">{p.name}</p>
                         <p class="text-[10px] text-slate-400">{p.type}</p>
                       </div>
-                      <span class={`rounded-full px-2 py-0.5 text-[10px] font-black uppercase ${p.statusBg}`}>
+                      <span class={`shrink-0 rounded-md px-2 py-0.5 text-[10px] font-bold uppercase ${p.statusColor}`}>
                         {p.status}
                       </span>
                     </div>
                     <div class="h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
-                      <div class={`h-full rounded-full ${p.color}`} style={`width: ${p.progress}%`} />
+                      <div class={`h-full rounded-full ${p.barColor}`} style={`width: ${p.progress}%`} />
                     </div>
-                    <p class="text-right text-[10px] font-bold text-slate-400">{p.progress}%</p>
                   </div>
                 ))}
               </div>
@@ -190,28 +171,28 @@ export default function AdminDashboard() {
 
         {/* ── Control Plane ── */}
         <div>
-          <div class="mb-5 flex items-center justify-between">
-            <h2 class="text-xl font-black tracking-tight text-[#0a1d37]">Control Plane</h2>
-            <span class="rounded-full border border-slate-200 bg-white px-3 py-1 text-[11px] font-bold uppercase tracking-widest text-slate-400 shadow-sm">
+          <div class="mb-4 flex items-center justify-between">
+            <h2 class="text-lg font-black tracking-tight text-[#0a1d37]">Control Plane</h2>
+            <span class="rounded-md border border-slate-200 bg-white px-2.5 py-1 text-[10px] font-bold uppercase tracking-widest text-slate-400">
               {CONTROL.length} modules
             </span>
           </div>
-          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
             {CONTROL.map((item) => {
               const Icon = item.icon;
               return (
                 <A
                   href={item.href}
-                  class="group flex items-start gap-4 rounded-2xl border border-slate-100 bg-white p-5 shadow-[0_8px_32px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-[#fd6216]/20 hover:shadow-[0_12px_40px_rgba(10,29,55,0.08)]"
+                  class="group flex items-start gap-3.5 rounded-xl border border-slate-100 bg-white p-4 shadow-[0_4px_20px_rgba(10,29,55,0.04)] transition-all duration-200 hover:-translate-y-px hover:border-[#0a1d37]/10 hover:shadow-[0_8px_28px_rgba(10,29,55,0.08)]"
                 >
-                  <div class={`mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl ${item.iconBg}`}>
+                  <div class={`mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${item.iconBg}`}>
                     <Icon class={`h-4 w-4 ${item.iconFg}`} />
                   </div>
                   <div class="min-w-0 flex-1">
-                    <p class="text-sm font-bold text-[#0a1d37] transition-colors group-hover:text-[#fd6216]">{item.label}</p>
+                    <p class="truncate text-[13px] font-bold text-[#0a1d37] transition-colors group-hover:text-[#fd6216]">{item.label}</p>
                     <p class="mt-0.5 text-[11px] leading-relaxed text-slate-400">{item.desc}</p>
                   </div>
-                  <ArrowRight class="mt-0.5 h-4 w-4 shrink-0 text-slate-200 transition-all group-hover:translate-x-0.5 group-hover:text-[#fd6216]" />
+                  <ArrowRight class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-200 transition-all group-hover:translate-x-0.5 group-hover:text-[#0a1d37]" />
                 </A>
               );
             })}