From 666d06af1b2a888cf4c45c4f163e6fe87d0a737b Mon Sep 17 00:00:00 2001
From: azcomputerguru <mike@azcomputerguru.com>
Date: Wed, 21 Jan 2026 06:23:59 -0700
Subject: [PATCH] feat(dashboard): Complete "Mission Control" UI redesign

Overhaul the GuruRMM dashboard with a dark cyberpunk aesthetic featuring
glassmorphism effects, cyan accent lighting, and smooth animations.

Visual Changes:
- Dark theme with CSS variables for consistent theming
- Glassmorphism card effects with colored glow variants
- Grid pattern backgrounds and floating geometric shapes
- JetBrains Mono + Inter font pairing for tech aesthetic
- Cyan, green, amber, and rose accent colors with glow effects

Component Updates:
- index.css: Complete CSS overhaul with utility classes, animations,
  and glassmorphism foundations (1300+ lines added)
- Login.tsx: Glassmorphism login card with gradient logo and
  floating background shapes
- Layout.tsx: Dark sidebar with cyan nav highlights, grid pattern
  main area, animated user profile section
- Dashboard.tsx: Animated stat cards with staggered entrances,
  live status indicator with pulse animation, relative timestamps
- Card.tsx: Added glow variants (cyan/green/amber/rose) with
  hover lift effects
- Button.tsx: Gradient backgrounds, glow-on-hover, scale animations
- Input.tsx: Dark styling with cyan focus glow, added Textarea component

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../dashboard/src/components/Button.tsx       |   60 +-
 .../dashboard/src/components/Card.tsx         |  111 +-
 .../dashboard/src/components/Input.tsx        |  118 +-
 .../dashboard/src/components/Layout.tsx       |  186 ++-
 .../guru-rmm/dashboard/src/index.css          | 1339 ++++++++++++++++-
 .../dashboard/src/pages/Dashboard.tsx         |  492 ++++--
 .../guru-rmm/dashboard/src/pages/Login.tsx    |  193 ++-
 7 files changed, 2258 insertions(+), 241 deletions(-)

diff --git a/projects/msp-tools/guru-rmm/dashboard/src/components/Button.tsx b/projects/msp-tools/guru-rmm/dashboard/src/components/Button.tsx
index 788f634..e12e305 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/components/Button.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/components/Button.tsx
@@ -1,8 +1,13 @@
 import { ButtonHTMLAttributes, forwardRef } from "react";
 import { cn } from "../lib/utils";
 
+/**
+ * Mission Control Button Component
+ * Monospace text with smooth transitions and glow effects
+ */
+
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+  variant?: "default" | "secondary" | "destructive" | "ghost" | "outline" | "link";
   size?: "default" | "sm" | "lg" | "icon";
 }
 
@@ -11,26 +16,55 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         className={cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          // Base styles
+          "inline-flex items-center justify-center whitespace-nowrap rounded-lg",
+          "font-mono font-bold text-sm",
+          // Smooth transitions
+          "transition-all duration-300 ease-out",
+          // Focus ring with glow
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/50 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900",
+          // Hover scale
+          "hover:scale-[1.02]",
+          // Active scale
+          "active:scale-[0.98]",
+          // Disabled state
+          "disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
+
+          // Variant styles
           {
-            "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow hover:bg-[hsl(var(--primary))]/90":
+            // Default (Primary): Cyan gradient with glow on hover
+            "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:shadow-xl":
               variant === "default",
-            "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:bg-[hsl(var(--destructive))]/90":
-              variant === "destructive",
-            "border border-[hsl(var(--input))] bg-transparent shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
-              variant === "outline",
-            "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:bg-[hsl(var(--secondary))]/80":
+
+            // Secondary: Dark glass with cyan text
+            "bg-slate-800/80 backdrop-blur-sm border border-slate-700/50 text-cyan-400 hover:border-cyan-500/50 hover:shadow-lg hover:shadow-cyan-500/20":
               variant === "secondary",
-            "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
+
+            // Destructive: Rose gradient with glow
+            "bg-gradient-to-r from-rose-500 to-pink-600 text-white shadow-lg shadow-rose-500/25 hover:shadow-rose-500/40 hover:shadow-xl":
+              variant === "destructive",
+
+            // Ghost: Transparent with cyan hover
+            "bg-transparent text-slate-300 hover:bg-cyan-500/10 hover:text-cyan-400":
               variant === "ghost",
-            "text-[hsl(var(--primary))] underline-offset-4 hover:underline": variant === "link",
+
+            // Outline: Cyan border, transparent bg, fill on hover
+            "border-2 border-cyan-500/50 bg-transparent text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400 hover:shadow-lg hover:shadow-cyan-500/20":
+              variant === "outline",
+
+            // Link: Underline style
+            "text-cyan-400 underline-offset-4 hover:underline hover:text-cyan-300 hover:scale-100":
+              variant === "link",
           },
+
+          // Size styles
           {
-            "h-9 px-4 py-2": size === "default",
+            "h-10 px-5 py-2": size === "default",
             "h-8 rounded-md px-3 text-xs": size === "sm",
-            "h-10 rounded-md px-8": size === "lg",
-            "h-9 w-9": size === "icon",
+            "h-12 rounded-lg px-8 text-base": size === "lg",
+            "h-10 w-10 p-0": size === "icon",
           },
+
           className
         )}
         ref={ref}
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx b/projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx
index bfaf035..dad1a57 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/components/Card.tsx
@@ -1,12 +1,52 @@
 import { HTMLAttributes, forwardRef } from "react";
 import { cn } from "../lib/utils";
 
-const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+/**
+ * Mission Control Card Component
+ * Glassmorphism design with optional glow variants
+ */
+
+export type CardVariant = "default" | "glow-cyan" | "glow-green" | "glow-amber" | "glow-rose";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: CardVariant;
+}
+
+const cardVariants: Record<CardVariant, string> = {
+  default: "border-slate-700/50",
+  "glow-cyan": "border-cyan-500/50 shadow-[0_0_15px_rgba(6,182,212,0.15)]",
+  "glow-green": "border-emerald-500/50 shadow-[0_0_15px_rgba(16,185,129,0.15)]",
+  "glow-amber": "border-amber-500/50 shadow-[0_0_15px_rgba(245,158,11,0.15)]",
+  "glow-rose": "border-rose-500/50 shadow-[0_0_15px_rgba(244,63,94,0.15)]",
+};
+
+const cardHoverVariants: Record<CardVariant, string> = {
+  default: "hover:border-slate-600/70 hover:shadow-lg hover:shadow-slate-900/50",
+  "glow-cyan": "hover:border-cyan-400/70 hover:shadow-[0_0_25px_rgba(6,182,212,0.25)]",
+  "glow-green": "hover:border-emerald-400/70 hover:shadow-[0_0_25px_rgba(16,185,129,0.25)]",
+  "glow-amber": "hover:border-amber-400/70 hover:shadow-[0_0_25px_rgba(245,158,11,0.25)]",
+  "glow-rose": "hover:border-rose-400/70 hover:shadow-[0_0_25px_rgba(244,63,94,0.25)]",
+};
+
+const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant = "default", ...props }, ref) => (
     <div
       ref={ref}
       className={cn(
-        "rounded-xl border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow",
+        // Base glassmorphism
+        "rounded-xl bg-slate-900/60 backdrop-blur-xl",
+        // Border
+        "border",
+        cardVariants[variant],
+        // Inner shadow for depth
+        "shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)]",
+        // Text color
+        "text-slate-100",
+        // Transition for hover effects
+        "transition-all duration-300 ease-out",
+        // Hover: subtle lift
+        "hover:-translate-y-0.5",
+        cardHoverVariants[variant],
         className
       )}
       {...props}
@@ -17,16 +57,42 @@ Card.displayName = "Card";
 
 const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col space-y-1.5 p-6",
+        // Bottom border separator
+        "border-b border-slate-700/50",
+        className
+      )}
+      {...props}
+    />
   )
 );
 CardHeader.displayName = "CardHeader";
 
-const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+  gradient?: boolean;
+  gradientFrom?: string;
+  gradientTo?: string;
+}
+
+const CardTitle = forwardRef<HTMLParagraphElement, CardTitleProps>(
+  ({ className, gradient = false, gradientFrom = "cyan-400", gradientTo = "blue-500", ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn("font-semibold leading-none tracking-tight", className)}
+      className={cn(
+        // Monospace/bold styling
+        "font-mono font-bold leading-none tracking-tight text-lg",
+        // Gradient text option
+        gradient && [
+          "bg-clip-text text-transparent",
+          `bg-gradient-to-r from-${gradientFrom} to-${gradientTo}`,
+        ],
+        // Default text color when not gradient
+        !gradient && "text-slate-100",
+        className
+      )}
       {...props}
     />
   )
@@ -35,16 +101,41 @@ CardTitle.displayName = "CardTitle";
 
 const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)} {...props} />
+    <p
+      ref={ref}
+      className={cn(
+        "text-sm text-slate-400",
+        className
+      )}
+      {...props}
+    />
   )
 );
 CardDescription.displayName = "CardDescription";
 
 const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <div
+      ref={ref}
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
   )
 );
 CardContent.displayName = "CardContent";
 
-export { Card, CardHeader, CardTitle, CardDescription, CardContent };
+const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center p-6 pt-0",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/components/Input.tsx b/projects/msp-tools/guru-rmm/dashboard/src/components/Input.tsx
index 041692d..a2497ad 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/components/Input.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/components/Input.tsx
@@ -1,21 +1,109 @@
 import { InputHTMLAttributes, forwardRef } from "react";
 import { cn } from "../lib/utils";
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+/**
+ * Mission Control Input Component
+ * Dark background with cyan focus glow
+ */
 
-const Input = forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[hsl(var(--muted-foreground))] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[hsl(var(--ring))] disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  error?: boolean;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, error = false, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          // Base styles
+          "flex h-10 w-full rounded-lg px-4 py-2",
+          "font-mono text-sm",
+          // Dark background
+          "bg-slate-900/50 backdrop-blur-sm",
+          // Border
+          "border border-slate-700",
+          // Text colors
+          "text-slate-100",
+          // Placeholder
+          "placeholder:text-slate-500",
+          // Transitions
+          "transition-all duration-200 ease-out",
+          // File input styles
+          "file:border-0 file:bg-slate-800 file:text-slate-300 file:text-sm file:font-medium file:mr-4 file:py-1 file:px-3 file:rounded-md",
+          // Focus state: cyan border + outer glow + subtle background lighten
+          "focus-visible:outline-none",
+          "focus-visible:border-cyan-500",
+          "focus-visible:ring-4 focus-visible:ring-cyan-500/30",
+          "focus-visible:bg-slate-900/70",
+          // Disabled state
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
+          // Error state: rose border + rose glow
+          error && [
+            "border-rose-500",
+            "ring-4 ring-rose-500/30",
+            "focus-visible:border-rose-500",
+            "focus-visible:ring-rose-500/30",
+          ],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
 Input.displayName = "Input";
 
-export { Input };
+/**
+ * Textarea variant with same Mission Control styling
+ */
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean;
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, error = false, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          // Base styles
+          "flex min-h-[120px] w-full rounded-lg px-4 py-3",
+          "font-mono text-sm",
+          // Dark background
+          "bg-slate-900/50 backdrop-blur-sm",
+          // Border
+          "border border-slate-700",
+          // Text colors
+          "text-slate-100",
+          // Placeholder
+          "placeholder:text-slate-500",
+          // Transitions
+          "transition-all duration-200 ease-out",
+          // Resize handle
+          "resize-y",
+          // Focus state
+          "focus-visible:outline-none",
+          "focus-visible:border-cyan-500",
+          "focus-visible:ring-4 focus-visible:ring-cyan-500/30",
+          "focus-visible:bg-slate-900/70",
+          // Disabled state
+          "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-slate-900/30",
+          // Error state
+          error && [
+            "border-rose-500",
+            "ring-4 ring-rose-500/30",
+            "focus-visible:border-rose-500",
+            "focus-visible:ring-rose-500/30",
+          ],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Input, Textarea };
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx b/projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx
index e981ed6..311e35d 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/components/Layout.tsx
@@ -1,6 +1,16 @@
 import { ReactNode } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-import { LayoutDashboard, Server, Terminal, Settings, LogOut, Menu, X, Building2, MapPin } from "lucide-react";
+import {
+  LayoutDashboard,
+  Server,
+  Terminal,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  Building2,
+  MapPin,
+} from "lucide-react";
 import { useState } from "react";
 import { useAuth } from "../hooks/useAuth";
 import { Button } from "./Button";
@@ -30,28 +40,87 @@ export function Layout({ children }: LayoutProps) {
   };
 
   return (
-    <div className="min-h-screen bg-[hsl(var(--background))]">
+    <div className="min-h-screen bg-slate-950">
+      {/* Subtle grid pattern background */}
+      <div
+        className="fixed inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `
+            linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
+          `,
+          backgroundSize: "50px 50px",
+        }}
+      />
+
       {/* Mobile header */}
-      <div className="lg:hidden flex items-center justify-between p-4 border-b border-[hsl(var(--border))]">
-        <span className="font-bold text-lg">GuruRMM</span>
-        <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
+      <div className="lg:hidden fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-4 py-3 bg-slate-900/80 backdrop-blur-xl border-b border-cyan-500/20">
+        <span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+          GURUR<span className="text-cyan-400">MM</span>
+        </span>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setSidebarOpen(!sidebarOpen)}
+          className="text-slate-400 hover:text-cyan-400 hover:bg-cyan-500/10 transition-all duration-300"
+        >
           {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
         </Button>
       </div>
 
-      <div className="flex">
-        {/* Sidebar */}
+      {/* Mobile menu overlay with blur */}
+      <div
+        className={`fixed inset-0 z-40 lg:hidden transition-all duration-300 ${
+          sidebarOpen
+            ? "opacity-100 pointer-events-auto"
+            : "opacity-0 pointer-events-none"
+        }`}
+      >
+        <div
+          className="absolute inset-0 bg-slate-950/80 backdrop-blur-md"
+          onClick={() => setSidebarOpen(false)}
+        />
+      </div>
+
+      <div className="flex relative">
+        {/* Sidebar - Mission Control Aesthetic */}
         <aside
-          className={`fixed inset-y-0 left-0 z-50 w-64 bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transform transition-transform duration-200 lg:translate-x-0 lg:static ${
+          className={`fixed inset-y-0 left-0 z-50 w-72 transform transition-all duration-300 ease-out lg:translate-x-0 lg:static ${
             sidebarOpen ? "translate-x-0" : "-translate-x-full"
           }`}
         >
-          <div className="flex flex-col h-full">
+          {/* Glassmorphism sidebar container */}
+          <div className="flex flex-col h-full bg-slate-900/60 backdrop-blur-xl border-r border-cyan-500/20 shadow-[inset_0_0_30px_rgba(6,182,212,0.05)]">
+            {/* Cyan left border glow */}
+            <div className="absolute left-0 top-0 bottom-0 w-[2px] bg-gradient-to-b from-transparent via-cyan-500/50 to-transparent" />
+
+            {/* Logo section */}
             <div className="p-6 hidden lg:block">
-              <h1 className="text-xl font-bold">GuruRMM</h1>
+              <div className="flex items-center gap-3">
+                {/* Logo icon with glow */}
+                <div className="relative">
+                  <div className="absolute inset-0 bg-cyan-500/30 blur-lg rounded-lg" />
+                  <div className="relative h-10 w-10 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20">
+                    <LayoutDashboard className="h-5 w-5 text-white" />
+                  </div>
+                </div>
+                {/* Logo text with gradient */}
+                <div>
+                  <h1 className="text-xl font-bold tracking-wider">
+                    <span className="bg-gradient-to-r from-cyan-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
+                      GURU
+                    </span>
+                    <span className="text-slate-300">RMM</span>
+                  </h1>
+                  <p className="text-[10px] uppercase tracking-[0.2em] text-slate-500">
+                    Mission Control
+                  </p>
+                </div>
+              </div>
             </div>
 
-            <nav className="flex-1 px-4 space-y-1 mt-4 lg:mt-0">
+            {/* Navigation */}
+            <nav className="flex-1 px-3 space-y-1 mt-4 lg:mt-2 pt-16 lg:pt-0">
               {navItems.map((item) => {
                 const isActive = location.pathname === item.path;
                 return (
@@ -59,53 +128,98 @@ export function Layout({ children }: LayoutProps) {
                     key={item.path}
                     to={item.path}
                     onClick={() => setSidebarOpen(false)}
-                    className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    className={`group relative flex items-center gap-3 px-4 py-3 rounded-lg text-xs font-semibold uppercase tracking-wider transition-all duration-300 ${
                       isActive
-                        ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
-                        : "text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
+                        ? "text-cyan-400"
+                        : "text-slate-400 hover:text-slate-200"
                     }`}
                   >
-                    <item.icon className="h-5 w-5" />
-                    {item.label}
+                    {/* Active/Hover background glow */}
+                    <div
+                      className={`absolute inset-0 rounded-lg transition-all duration-300 ${
+                        isActive
+                          ? "bg-cyan-500/10 shadow-[inset_0_0_20px_rgba(6,182,212,0.1)]"
+                          : "bg-transparent group-hover:bg-cyan-500/5"
+                      }`}
+                    />
+
+                    {/* Active left border indicator */}
+                    <div
+                      className={`absolute left-0 top-2 bottom-2 w-[3px] rounded-full transition-all duration-300 ${
+                        isActive
+                          ? "bg-cyan-400 shadow-[0_0_10px_rgba(6,182,212,0.8)]"
+                          : "bg-transparent"
+                      }`}
+                    />
+
+                    {/* Icon with conditional glow */}
+                    <div className="relative z-10">
+                      <item.icon
+                        className={`h-5 w-5 transition-all duration-300 ${
+                          isActive
+                            ? "text-cyan-400 drop-shadow-[0_0_8px_rgba(6,182,212,0.8)]"
+                            : "text-slate-500 group-hover:text-slate-300"
+                        }`}
+                      />
+                    </div>
+
+                    {/* Label */}
+                    <span className="relative z-10">{item.label}</span>
+
+                    {/* Active indicator dot */}
+                    {isActive && (
+                      <div className="absolute right-4 h-1.5 w-1.5 rounded-full bg-cyan-400 shadow-[0_0_6px_rgba(6,182,212,0.8)]" />
+                    )}
                   </Link>
                 );
               })}
             </nav>
 
-            <div className="p-4 border-t border-[hsl(var(--border))]">
-              <div className="flex items-center gap-3 mb-3">
-                <div className="h-8 w-8 rounded-full bg-[hsl(var(--primary))] flex items-center justify-center text-[hsl(var(--primary-foreground))] text-sm font-medium">
-                  {user?.name?.[0] || user?.email?.[0] || "U"}
+            {/* User profile section */}
+            <div className="p-4 border-t border-cyan-500/10">
+              <div className="flex items-center gap-3 mb-4 p-3 rounded-lg bg-slate-800/30">
+                {/* Avatar with cyan ring glow */}
+                <div className="relative">
+                  {/* Glow ring */}
+                  <div className="absolute -inset-1 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full opacity-50 blur-sm" />
+                  {/* Avatar */}
+                  <div className="relative h-10 w-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 ring-2 ring-cyan-500/50 flex items-center justify-center text-cyan-400 text-sm font-bold shadow-lg">
+                    {user?.name?.[0] || user?.email?.[0] || "U"}
+                  </div>
+                  {/* Online indicator */}
+                  <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full bg-emerald-500 ring-2 ring-slate-900 shadow-[0_0_8px_rgba(16,185,129,0.6)]" />
                 </div>
+
+                {/* User info */}
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{user?.name || user?.email}</p>
-                  <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">
-                    {user?.role}
+                  <p className="text-sm font-medium text-slate-200 truncate">
+                    {user?.name || user?.email}
+                  </p>
+                  <p className="text-xs text-cyan-500/70 uppercase tracking-wider truncate">
+                    {user?.role || "Operator"}
                   </p>
                 </div>
               </div>
+
+              {/* Sign out button */}
               <Button
                 variant="ghost"
-                className="w-full justify-start"
+                className="w-full justify-start gap-3 px-4 py-3 text-xs font-semibold uppercase tracking-wider text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg transition-all duration-300 group"
                 onClick={handleLogout}
               >
-                <LogOut className="h-4 w-4 mr-2" />
-                Sign out
+                <LogOut className="h-4 w-4 transition-all duration-300 group-hover:text-red-400 group-hover:drop-shadow-[0_0_6px_rgba(239,68,68,0.6)]" />
+                Sign Out
               </Button>
             </div>
           </div>
         </aside>
 
-        {/* Overlay for mobile */}
-        {sidebarOpen && (
-          <div
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
-            onClick={() => setSidebarOpen(false)}
-          />
-        )}
-
-        {/* Main content */}
-        <main className="flex-1 p-6 lg:p-8">{children}</main>
+        {/* Main content area */}
+        <main className="flex-1 min-h-screen pt-16 lg:pt-0">
+          <div className="p-6 lg:p-8 transition-all duration-300">
+            {children}
+          </div>
+        </main>
       </div>
     </div>
   );
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/index.css b/projects/msp-tools/guru-rmm/dashboard/src/index.css
index 6916485..9ece806 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/index.css
+++ b/projects/msp-tools/guru-rmm/dashboard/src/index.css
@@ -1,57 +1,1324 @@
+/* Google Fonts Import - Must be first */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
+
 @import "tailwindcss";
 
-/* Custom CSS variables for theming */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 221.2 83.2% 53.3%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 221.2 83.2% 53.3%;
-  --radius: 0.5rem;
-}
+/* ============================================================
+   GURU RMM - MISSION CONTROL DASHBOARD
+   A command center aesthetic with glassmorphism and glow effects
+   ============================================================ */
 
-.dark {
-  --background: 222.2 84% 4.9%;
+/* ============================================================
+   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
+   ============================================================ */
+:root {
+  /* Base Colors - Deep Navy/Slate Theme */
+  --bg-primary: #0a0e1a;
+  --bg-secondary: #111827;
+  --bg-tertiary: #1a2234;
+  --bg-elevated: #1e293b;
+
+  /* Card & Surface Colors - Glassmorphism */
+  --bg-card: rgba(15, 23, 42, 0.8);
+  --bg-card-hover: rgba(30, 41, 59, 0.9);
+  --bg-card-solid: #0f172a;
+
+  /* Accent Colors - Cyan/Teal Primary */
+  --accent-cyan: #06b6d4;
+  --accent-cyan-light: #22d3ee;
+  --accent-cyan-dark: #0891b2;
+  --accent-cyan-muted: rgba(6, 182, 212, 0.2);
+
+  /* Status Colors */
+  --accent-green: #10b981;
+  --accent-green-light: #34d399;
+  --accent-green-dark: #059669;
+  --accent-green-muted: rgba(16, 185, 129, 0.2);
+
+  --accent-amber: #f59e0b;
+  --accent-amber-light: #fbbf24;
+  --accent-amber-dark: #d97706;
+  --accent-amber-muted: rgba(245, 158, 11, 0.2);
+
+  --accent-rose: #f43f5e;
+  --accent-rose-light: #fb7185;
+  --accent-rose-dark: #e11d48;
+  --accent-rose-muted: rgba(244, 63, 94, 0.2);
+
+  /* Text Colors - Cool Gray Scale */
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-disabled: #475569;
+
+  /* Border Colors */
+  --border-primary: rgba(255, 255, 255, 0.1);
+  --border-secondary: rgba(255, 255, 255, 0.05);
+  --border-accent: rgba(6, 182, 212, 0.3);
+
+  /* Glow Effects */
+  --glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
+  --glow-cyan-intense: 0 0 30px rgba(6, 182, 212, 0.5), 0 0 60px rgba(6, 182, 212, 0.2);
+  --glow-green: 0 0 20px rgba(16, 185, 129, 0.3);
+  --glow-green-intense: 0 0 30px rgba(16, 185, 129, 0.5);
+  --glow-amber: 0 0 20px rgba(245, 158, 11, 0.3);
+  --glow-rose: 0 0 20px rgba(244, 63, 94, 0.3);
+
+  /* Glass Effect Properties */
+  --glass-bg: rgba(15, 23, 42, 0.8);
+  --glass-bg-light: rgba(30, 41, 59, 0.6);
+  --glass-border: rgba(255, 255, 255, 0.1);
+  --glass-blur: 12px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+
+  /* Spacing & Sizing */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+
+  /* Typography */
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+  /* Tailwind CSS Variable Overrides */
+  --background: 222.2 47% 5%;
   --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
+  --card: 222.2 47% 8%;
   --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
+  --popover: 222.2 47% 8%;
   --popover-foreground: 210 40% 98%;
-  --primary: 217.2 91.2% 59.8%;
-  --primary-foreground: 222.2 47.4% 11.2%;
+  --primary: 187 82% 43%;
+  --primary-foreground: 222.2 47% 5%;
   --secondary: 217.2 32.6% 17.5%;
   --secondary-foreground: 210 40% 98%;
   --muted: 217.2 32.6% 17.5%;
   --muted-foreground: 215 20.2% 65.1%;
   --accent: 217.2 32.6% 17.5%;
   --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
+  --destructive: 343 79% 60%;
   --destructive-foreground: 210 40% 98%;
   --border: 217.2 32.6% 17.5%;
   --input: 217.2 32.6% 17.5%;
-  --ring: 224.3 76.3% 48%;
+  --ring: 187 82% 43%;
+  --radius: 0.5rem;
 }
 
-* {
-  border-color: hsl(var(--border));
+/* ============================================================
+   KEYFRAME ANIMATIONS
+   ============================================================ */
+
+/* Fade In Up - Card entrance animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Fade In - Simple fade */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Pulse Glow - Status indicator pulse */
+@keyframes pulse-glow {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 8px currentColor;
+  }
+  50% {
+    opacity: 0.7;
+    box-shadow: 0 0 16px currentColor, 0 0 24px currentColor;
+  }
+}
+
+/* Shimmer - Loading state effect */
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Scan Line - Horizontal scan effect */
+@keyframes scan-line {
+  0% {
+    top: -5%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 0.5;
+  }
+  90% {
+    opacity: 0.5;
+  }
+  100% {
+    top: 105%;
+    opacity: 0;
+  }
+}
+
+/* Rotate - For spinners and loading indicators */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Blink - For cursor and status indicators */
+@keyframes blink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0;
+  }
+}
+
+/* Data Stream - Vertical scrolling effect */
+@keyframes data-stream {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+/* Glow Pulse - Subtle glow pulsing */
+@keyframes glow-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 4px var(--accent-cyan));
+  }
+  50% {
+    filter: drop-shadow(0 0 12px var(--accent-cyan)) drop-shadow(0 0 20px var(--accent-cyan-muted));
+  }
+}
+
+/* Border Glow - Animated border glow */
+@keyframes border-glow {
+  0%, 100% {
+    border-color: var(--border-accent);
+    box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.05);
+  }
+  50% {
+    border-color: var(--accent-cyan);
+    box-shadow: inset 0 0 30px rgba(6, 182, 212, 0.1);
+  }
+}
+
+/* Float animation for particles */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translateY(-20px) rotate(180deg);
+    opacity: 0.6;
+  }
+}
+
+/* Grid movement animation */
+@keyframes grid-move {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(24px);
+  }
+}
+
+/* ============================================================
+   BASE STYLES
+   ============================================================ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  border-color: var(--border-primary);
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 
 body {
-  background-color: hsl(var(--background));
-  color: hsl(var(--foreground));
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+
+  /* Background with subtle grid pattern */
+  background-image:
+    /* Radial gradient glow in corners */
+    radial-gradient(ellipse 80% 50% at 10% 10%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse 60% 40% at 90% 90%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse 50% 30% at 50% 0%, rgba(6, 182, 212, 0.04) 0%, transparent 50%),
+    /* Dot grid pattern */
+    radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
+  background-size:
+    100% 100%,
+    100% 100%,
+    100% 100%,
+    24px 24px;
+  background-position:
+    0 0,
+    0 0,
+    0 0,
+    0 0;
+  background-attachment: fixed;
+}
+
+/* Optional: Subtle scan line overlay */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.3;
+}
+
+/* ============================================================
+   TYPOGRAPHY
+   ============================================================ */
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+h1 { font-size: 2.5rem; line-height: 1.2; }
+h2 { font-size: 2rem; line-height: 1.25; }
+h3 { font-size: 1.5rem; line-height: 1.3; }
+h4 { font-size: 1.25rem; line-height: 1.35; }
+h5 { font-size: 1.125rem; line-height: 1.4; }
+h6 { font-size: 1rem; line-height: 1.5; }
+
+p {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+code, pre, .mono {
+  font-family: var(--font-mono);
+}
+
+/* Data displays use mono font */
+.data-value,
+.metric-value,
+.stat-number {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+/* ============================================================
+   GLASSMORPHISM COMPONENTS
+   ============================================================ */
+
+.glass {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+}
+
+.glass-light {
+  background: var(--glass-bg-light);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+}
+
+.glass-strong {
+  background: rgba(15, 23, 42, 0.9);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+}
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 1.5rem;
+  transition: all var(--transition-base);
+}
+
+.glass-card:hover {
+  background: var(--bg-card-hover);
+  border-color: var(--border-accent);
+  box-shadow: var(--shadow-xl), var(--glow-cyan);
+  transform: translateY(-2px);
+}
+
+/* ============================================================
+   GLOW EFFECTS
+   ============================================================ */
+
+.glow-cyan {
+  box-shadow: var(--glow-cyan);
+}
+
+.glow-cyan-intense {
+  box-shadow: var(--glow-cyan-intense);
+}
+
+.glow-green {
+  box-shadow: var(--glow-green);
+}
+
+.glow-green-intense {
+  box-shadow: var(--glow-green-intense);
+}
+
+.glow-amber {
+  box-shadow: var(--glow-amber);
+}
+
+.glow-rose {
+  box-shadow: var(--glow-rose);
+}
+
+/* Text with glow */
+.text-glow-cyan {
+  text-shadow: 0 0 10px var(--accent-cyan), 0 0 20px rgba(6, 182, 212, 0.5);
+}
+
+.text-glow-green {
+  text-shadow: 0 0 10px var(--accent-green), 0 0 20px rgba(16, 185, 129, 0.5);
+}
+
+/* ============================================================
+   GRADIENT TEXT
+   ============================================================ */
+
+.text-gradient {
+  background: linear-gradient(135deg, var(--accent-cyan-light), var(--accent-cyan), var(--accent-green));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-amber {
+  background: linear-gradient(135deg, var(--accent-amber-light), var(--accent-amber));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.text-gradient-rose {
+  background: linear-gradient(135deg, var(--accent-rose-light), var(--accent-rose));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.gradient-cyan-teal {
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
+}
+
+/* ============================================================
+   ANIMATION UTILITIES
+   ============================================================ */
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.4s ease-out forwards;
+}
+
+.animate-fade-in-up-delay-1 {
+  animation: fadeInUp 0.4s ease-out 0.1s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-up-delay-2 {
+  animation: fadeInUp 0.4s ease-out 0.2s forwards;
+  opacity: 0;
+}
+
+.animate-fade-in-up-delay-3 {
+  animation: fadeInUp 0.4s ease-out 0.3s forwards;
+  opacity: 0;
+}
+
+.animate-pulse-glow {
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 0%,
+    var(--bg-elevated) 50%,
+    var(--bg-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+.animate-scan-line {
+  position: relative;
+  overflow: hidden;
+}
+
+.animate-scan-line::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--accent-cyan) 50%,
+    transparent 100%
+  );
+  animation: scan-line 4s linear infinite;
+  pointer-events: none;
+}
+
+.animate-rotate {
+  animation: rotate 1s linear infinite;
+}
+
+.animate-glow-pulse {
+  animation: glow-pulse 3s ease-in-out infinite;
+}
+
+.animate-border-glow {
+  animation: border-glow 3s ease-in-out infinite;
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+.animate-grid {
+  animation: grid-move 20s linear infinite;
+}
+
+/* ============================================================
+   STATUS INDICATORS
+   ============================================================ */
+
+.status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* Online Status */
+.status-online .status-dot,
+.status-dot.online {
+  background-color: var(--accent-green);
+  box-shadow: 0 0 8px var(--accent-green);
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+.status-online {
+  color: var(--accent-green);
+}
+
+/* Offline Status */
+.status-offline .status-dot,
+.status-dot.offline {
+  background-color: var(--text-muted);
+  box-shadow: none;
+  animation: none;
+}
+
+.status-offline {
+  color: var(--text-muted);
+}
+
+/* Warning Status */
+.status-warning .status-dot,
+.status-dot.warning {
+  background-color: var(--accent-amber);
+  box-shadow: 0 0 8px var(--accent-amber);
+  animation: pulse-glow 1.5s ease-in-out infinite;
+}
+
+.status-warning {
+  color: var(--accent-amber);
+}
+
+/* Error Status */
+.status-error .status-dot,
+.status-dot.error {
+  background-color: var(--accent-rose);
+  box-shadow: 0 0 8px var(--accent-rose);
+  animation: pulse-glow 1s ease-in-out infinite;
+}
+
+.status-error {
+  color: var(--accent-rose);
+}
+
+/* Status badges */
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.status-badge-online {
+  background-color: var(--accent-green-muted);
+  color: var(--accent-green-light);
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.status-badge-offline {
+  background-color: rgba(100, 116, 139, 0.2);
+  color: var(--text-muted);
+  border: 1px solid rgba(100, 116, 139, 0.3);
+}
+
+.status-badge-warning {
+  background-color: var(--accent-amber-muted);
+  color: var(--accent-amber-light);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+.status-badge-error {
+  background-color: var(--accent-rose-muted);
+  color: var(--accent-rose-light);
+  border: 1px solid rgba(244, 63, 94, 0.3);
+}
+
+/* ============================================================
+   CARD COMPONENTS
+   ============================================================ */
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  transition: all var(--transition-base);
+}
+
+.card-hover:hover {
+  border-color: var(--border-accent);
+  box-shadow: var(--shadow-lg), var(--glow-cyan);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.card-title {
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* Metric Card */
+.metric-card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.metric-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 500;
+}
+
+.metric-value {
+  font-family: var(--font-mono);
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1;
+}
+
+.metric-value.cyan { color: var(--accent-cyan); }
+.metric-value.green { color: var(--accent-green); }
+.metric-value.amber { color: var(--accent-amber); }
+.metric-value.rose { color: var(--accent-rose); }
+
+.metric-trend {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.metric-trend.up { color: var(--accent-green); }
+.metric-trend.down { color: var(--accent-rose); }
+.metric-trend.neutral { color: var(--text-muted); }
+
+/* ============================================================
+   DATA GRID / TABLE STYLES
+   ============================================================ */
+
+.data-grid {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+}
+
+.data-grid th {
+  background: var(--bg-tertiary);
+  color: var(--text-muted);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.75rem;
+  padding: 0.75rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.data-grid td {
+  padding: 0.75rem 1rem;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-secondary);
+  transition: background var(--transition-fast);
+}
+
+.data-grid tr:hover td {
+  background: rgba(6, 182, 212, 0.05);
+}
+
+.data-grid tr:last-child td {
+  border-bottom: none;
+}
+
+/* ============================================================
+   BUTTONS
+   ============================================================ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: all var(--transition-base);
+}
+
+.btn-primary {
+  background: var(--accent-cyan);
+  color: var(--bg-primary);
+  border-color: var(--accent-cyan);
+}
+
+.btn-primary:hover {
+  background: var(--accent-cyan-light);
+  box-shadow: var(--glow-cyan);
+}
+
+.btn-secondary {
+  background: transparent;
+  color: var(--accent-cyan);
+  border-color: var(--accent-cyan);
+}
+
+.btn-secondary:hover {
+  background: var(--accent-cyan-muted);
+  box-shadow: var(--glow-cyan);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-secondary);
+  border-color: var(--border-primary);
+}
+
+.btn-ghost:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+  border-color: var(--border-accent);
+}
+
+.btn-danger {
+  background: var(--accent-rose);
+  color: white;
+  border-color: var(--accent-rose);
+}
+
+.btn-danger:hover {
+  background: var(--accent-rose-light);
+  box-shadow: var(--glow-rose);
+}
+
+.btn-mission-control {
+  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
+  color: var(--bg-primary);
+  font-weight: 600;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-mission-control:hover:not(:disabled) {
+  box-shadow: var(--glow-cyan-intense);
+  transform: translateY(-1px);
+}
+
+.btn-mission-control:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-mission-control:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+/* Loading shimmer overlay for button */
+.btn-mission-control.loading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.2) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+/* ============================================================
+   FORM INPUTS
+   ============================================================ */
+
+.input {
+  width: 100%;
+  padding: 0.625rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  transition: all var(--transition-base);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--accent-cyan);
+  box-shadow: 0 0 0 3px var(--accent-cyan-muted);
+}
+
+.input::placeholder {
+  color: var(--text-muted);
+}
+
+.input-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.5rem;
+}
+
+.input-mission-control {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  color: var(--text-primary);
+  transition: all 0.2s ease;
+}
+
+.input-mission-control::placeholder {
+  color: var(--text-muted);
+}
+
+.input-mission-control:focus {
+  outline: none;
+  border-color: var(--accent-cyan);
+  box-shadow:
+    0 0 0 3px var(--accent-cyan-muted),
+    0 0 15px rgba(6, 182, 212, 0.2);
+}
+
+/* ============================================================
+   NAVIGATION
+   ============================================================ */
+
+.nav {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-base);
+  text-decoration: none;
+}
+
+.nav-item:hover {
+  color: var(--text-primary);
+  background: var(--bg-tertiary);
+}
+
+.nav-item.active {
+  color: var(--accent-cyan);
+  background: var(--accent-cyan-muted);
+}
+
+/* ============================================================
+   SIDEBAR
+   ============================================================ */
+
+.sidebar {
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--glass-blur));
+  border-right: 1px solid var(--glass-border);
+  height: 100vh;
+  position: fixed;
+  width: 260px;
+  overflow-y: auto;
+  z-index: 100;
+}
+
+.sidebar-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.sidebar-logo {
+  font-family: var(--font-mono);
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--accent-cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+.sidebar-nav {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* ============================================================
+   TERMINAL / CONSOLE STYLES
+   ============================================================ */
+
+.terminal {
+  background: var(--bg-primary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-lg);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  overflow: hidden;
+}
+
+.terminal-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.terminal-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.terminal-dot.red { background: var(--accent-rose); }
+.terminal-dot.yellow { background: var(--accent-amber); }
+.terminal-dot.green { background: var(--accent-green); }
+
+.terminal-body {
+  padding: 1rem;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.terminal-line {
+  display: flex;
+  gap: 0.5rem;
+  line-height: 1.6;
+}
+
+.terminal-prompt {
+  color: var(--accent-cyan);
+  user-select: none;
+}
+
+.terminal-output {
+  color: var(--text-secondary);
+}
+
+.terminal-cursor {
+  display: inline-block;
+  width: 8px;
+  height: 1em;
+  background: var(--accent-cyan);
+  animation: blink 1s step-end infinite;
+  vertical-align: text-bottom;
+}
+
+/* ============================================================
+   LOADING STATES
+   ============================================================ */
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 0%,
+    var(--bg-elevated) 50%,
+    var(--bg-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+}
+
+.skeleton-text {
+  height: 1em;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-title {
+  height: 1.5em;
+  width: 60%;
+  border-radius: var(--radius-sm);
+}
+
+.skeleton-card {
+  height: 120px;
+  border-radius: var(--radius-lg);
+}
+
+.loading-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--border-primary);
+  border-top-color: var(--accent-cyan);
+  border-radius: 50%;
+  animation: rotate 0.8s linear infinite;
+}
+
+/* ============================================================
+   PROGRESS BARS
+   ============================================================ */
+
+.progress-bar {
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width var(--transition-slow);
+}
+
+.progress-fill.cyan {
+  background: linear-gradient(90deg, var(--accent-cyan-dark), var(--accent-cyan-light));
+  box-shadow: var(--glow-cyan);
+}
+
+.progress-fill.green {
+  background: linear-gradient(90deg, var(--accent-green-dark), var(--accent-green-light));
+  box-shadow: var(--glow-green);
+}
+
+.progress-fill.amber {
+  background: linear-gradient(90deg, var(--accent-amber-dark), var(--accent-amber-light));
+  box-shadow: var(--glow-amber);
+}
+
+.progress-fill.rose {
+  background: linear-gradient(90deg, var(--accent-rose-dark), var(--accent-rose-light));
+  box-shadow: var(--glow-rose);
+}
+
+/* ============================================================
+   TOOLTIPS
+   ============================================================ */
+
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: all var(--transition-fast);
+  z-index: 1000;
+}
+
+.tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+/* ============================================================
+   BACKGROUND PATTERNS
+   ============================================================ */
+
+.bg-grid-pattern {
+  background-image:
+    linear-gradient(var(--border-primary) 1px, transparent 1px),
+    linear-gradient(90deg, var(--border-primary) 1px, transparent 1px);
+  background-size: 50px 50px;
+}
+
+.bg-dot-pattern {
+  background-image: radial-gradient(var(--border-primary) 1px, transparent 1px);
+  background-size: 30px 30px;
+}
+
+/* ============================================================
+   UTILITY CLASSES
+   ============================================================ */
+
+/* Colors */
+.text-cyan { color: var(--accent-cyan); }
+.text-green { color: var(--accent-green); }
+.text-amber { color: var(--accent-amber); }
+.text-rose { color: var(--accent-rose); }
+.text-primary { color: var(--text-primary); }
+.text-secondary { color: var(--text-secondary); }
+.text-muted { color: var(--text-muted); }
+
+.bg-cyan { background-color: var(--accent-cyan); }
+.bg-green { background-color: var(--accent-green); }
+.bg-amber { background-color: var(--accent-amber); }
+.bg-rose { background-color: var(--accent-rose); }
+
+/* Borders */
+.border-cyan { border-color: var(--accent-cyan); }
+.border-green { border-color: var(--accent-green); }
+.border-amber { border-color: var(--accent-amber); }
+.border-rose { border-color: var(--accent-rose); }
+
+/* Font families */
+.font-mono { font-family: var(--font-mono); }
+.font-sans { font-family: var(--font-sans); }
+.font-mono-display {
+  font-family: 'JetBrains Mono', 'Space Mono', 'Fira Code', monospace;
+}
+
+/* Letter spacing */
+.tracking-widest-custom {
+  letter-spacing: 0.2em;
+}
+
+/* ============================================================
+   SCROLLBAR STYLING
+   ============================================================ */
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--bg-elevated);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-disabled);
+}
+
+/* Selection */
+::selection {
+  background: var(--accent-cyan-muted);
+  color: var(--text-primary);
+}
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 2px;
+}
+
+/* ============================================================
+   RESPONSIVE UTILITIES
+   ============================================================ */
+
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform var(--transition-base);
+  }
+
+  .sidebar.open {
+    transform: translateX(0);
+  }
+
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.25rem; }
+
+  .metric-value {
+    font-size: 1.5rem;
+  }
+}
+
+/* ============================================================
+   PRINT STYLES
+   ============================================================ */
+
+@media print {
+  body {
+    background: white;
+    color: black;
+  }
+
+  .glass,
+  .glass-card {
+    background: white;
+    backdrop-filter: none;
+    border: 1px solid #ccc;
+    box-shadow: none;
+  }
+
+  .animate-pulse-glow,
+  .animate-scan-line::after {
+    animation: none;
+  }
+
+  body::before {
+    display: none;
+  }
 }
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx b/projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx
index 315822b..82cbc9c 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/pages/Dashboard.tsx
@@ -1,35 +1,249 @@
 import { useQuery } from "@tanstack/react-query";
-import { Activity, Server, AlertTriangle, CheckCircle } from "lucide-react";
+import {
+  Activity,
+  Server,
+  AlertTriangle,
+  Wifi,
+  WifiOff,
+  Terminal,
+  RefreshCw,
+  Shield,
+  Zap,
+} from "lucide-react";
 import { agentsApi, Agent } from "../api/client";
-import { Card, CardHeader, CardTitle, CardContent } from "../components/Card";
 
+/**
+ * Formats a date to a relative time string (e.g., "2 minutes ago", "1 hour ago")
+ */
+function formatRelativeTime(dateString: string | null): string {
+  if (!dateString) return "Never seen";
+
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return "Just now";
+  } else if (diffInSeconds < 3600) {
+    const minutes = Math.floor(diffInSeconds / 60);
+    return `${minutes}m ago`;
+  } else if (diffInSeconds < 86400) {
+    const hours = Math.floor(diffInSeconds / 3600);
+    return `${hours}h ago`;
+  } else {
+    const days = Math.floor(diffInSeconds / 86400);
+    return `${days}d ago`;
+  }
+}
+
+/**
+ * Loading skeleton for stat cards with shimmer animation
+ */
+function StatCardSkeleton({ delay }: { delay: number }) {
+  return (
+    <div
+      className="glass-card relative overflow-hidden opacity-0"
+      style={{
+        animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
+      }}
+    >
+      <div className="flex items-start justify-between">
+        <div className="space-y-3">
+          <div className="skeleton skeleton-text w-24 h-4" />
+          <div className="skeleton skeleton-text w-16 h-10" />
+          <div className="skeleton skeleton-text w-32 h-3" />
+        </div>
+        <div className="skeleton w-12 h-12 rounded-lg" />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Stat card component with Mission Control styling
+ */
 function StatCard({
   title,
   value,
   icon: Icon,
   description,
+  accentColor,
+  delay,
 }: {
   title: string;
   value: string | number;
   icon: React.ComponentType<{ className?: string }>;
   description?: string;
+  accentColor: "cyan" | "green" | "amber" | "rose";
+  delay: number;
 }) {
+  const colorClasses = {
+    cyan: {
+      icon: "text-cyan",
+      glow: "glow-cyan",
+      bg: "bg-[var(--accent-cyan-muted)]",
+      border: "border-l-[var(--accent-cyan)]",
+      value: "text-cyan",
+    },
+    green: {
+      icon: "text-green",
+      glow: "glow-green",
+      bg: "bg-[var(--accent-green-muted)]",
+      border: "border-l-[var(--accent-green)]",
+      value: "text-green",
+    },
+    amber: {
+      icon: "text-amber",
+      glow: "glow-amber",
+      bg: "bg-[var(--accent-amber-muted)]",
+      border: "border-l-[var(--accent-amber)]",
+      value: "text-amber",
+    },
+    rose: {
+      icon: "text-rose",
+      glow: "glow-rose",
+      bg: "bg-[var(--accent-rose-muted)]",
+      border: "border-l-[var(--accent-rose)]",
+      value: "text-rose",
+    },
+  };
+
+  const colors = colorClasses[accentColor];
+
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
-        <Icon className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
-        {description && (
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">{description}</p>
-        )}
-      </CardContent>
-    </Card>
+    <div
+      className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-default"
+      style={{
+        animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
+        borderLeftColor: `var(--accent-${accentColor})`,
+      }}
+    >
+      {/* Subtle gradient overlay on hover */}
+      <div
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
+        style={{
+          background: `radial-gradient(circle at top right, var(--accent-${accentColor}-muted), transparent 70%)`,
+        }}
+      />
+
+      <div className="relative flex items-start justify-between">
+        <div className="space-y-1">
+          <p className="text-muted font-mono text-xs uppercase tracking-widest-custom">
+            {title}
+          </p>
+          <p className={`font-mono text-4xl font-bold ${colors.value}`}>
+            {value}
+          </p>
+          {description && (
+            <p className="text-muted text-sm">{description}</p>
+          )}
+        </div>
+
+        {/* Icon with glow effect */}
+        <div
+          className={`p-3 rounded-lg ${colors.bg} ${colors.glow} transition-all duration-300 group-hover:scale-110`}
+        >
+          <Icon className={`h-6 w-6 ${colors.icon}`} />
+        </div>
+      </div>
+    </div>
   );
 }
 
+/**
+ * Status indicator dot with pulse animation
+ */
+function StatusDot({ status }: { status: string }) {
+  const statusClasses = {
+    online: "status-dot online",
+    offline: "status-dot offline",
+    error: "status-dot error",
+  };
+
+  return (
+    <span
+      className={statusClasses[status as keyof typeof statusClasses] || "status-dot offline"}
+    />
+  );
+}
+
+/**
+ * Activity list item with hover effects
+ */
+function ActivityItem({ agent }: { agent: Agent }) {
+  return (
+    <div className="flex items-center justify-between p-3 rounded-lg transition-all duration-200 hover:bg-[rgba(6,182,212,0.05)] group cursor-default">
+      <div className="flex items-center gap-4">
+        <StatusDot status={agent.status} />
+        <div>
+          <p className="font-mono text-sm font-medium text-primary group-hover:text-cyan transition-colors">
+            {agent.hostname}
+          </p>
+          <p className="text-xs text-muted uppercase tracking-wide">
+            {agent.os_type}
+          </p>
+        </div>
+      </div>
+      <span className="font-mono text-xs text-muted tabular-nums">
+        {formatRelativeTime(agent.last_seen)}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * Quick action button with glow effect
+ */
+function QuickActionButton({
+  icon: Icon,
+  label,
+  description,
+  onClick,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  description: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className="flex items-center gap-4 p-4 w-full text-left rounded-lg border border-[var(--border-primary)] bg-[var(--bg-tertiary)] hover:border-[var(--accent-cyan)] hover:bg-[var(--accent-cyan-muted)] transition-all duration-200 group"
+    >
+      <div className="p-2 rounded-lg bg-[var(--bg-secondary)] group-hover:glow-cyan transition-all duration-200">
+        <Icon className="h-5 w-5 text-cyan" />
+      </div>
+      <div>
+        <p className="font-mono text-sm font-medium text-primary">{label}</p>
+        <p className="text-xs text-muted">{description}</p>
+      </div>
+    </button>
+  );
+}
+
+/**
+ * Loading skeleton for activity list
+ */
+function ActivityListSkeleton() {
+  return (
+    <div className="space-y-3">
+      {[0, 1, 2, 3, 4].map((i) => (
+        <div key={i} className="flex items-center gap-4 p-3">
+          <div className="skeleton w-2 h-2 rounded-full" />
+          <div className="flex-1 space-y-2">
+            <div className="skeleton skeleton-text w-32 h-4" />
+            <div className="skeleton skeleton-text w-20 h-3" />
+          </div>
+          <div className="skeleton skeleton-text w-16 h-3" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Main Dashboard component with Mission Control aesthetic
+ */
 export function Dashboard() {
   const { data: agents = [], isLoading } = useQuery({
     queryKey: ["agents"],
@@ -41,101 +255,175 @@ export function Dashboard() {
   const offlineAgents = agents.filter((a: Agent) => a.status === "offline");
   const errorAgents = agents.filter((a: Agent) => a.status === "error");
 
+  // Determine system status
+  const hasErrors = errorAgents.length > 0;
+  const allOffline = agents.length > 0 && onlineAgents.length === 0;
+  const systemStatus = hasErrors
+    ? "ATTENTION REQUIRED"
+    : allOffline
+    ? "ALL SYSTEMS OFFLINE"
+    : "SYSTEMS OPERATIONAL";
+  const statusClass = hasErrors
+    ? "status-error"
+    : allOffline
+    ? "status-warning"
+    : "status-online";
+
   return (
-    <div className="space-y-6">
-      <div>
-        <h1 className="text-3xl font-bold">Dashboard</h1>
-        <p className="text-[hsl(var(--muted-foreground))]">
-          Overview of your managed endpoints
-        </p>
-      </div>
+    <div className="space-y-8">
+      {/* Page Header */}
+      <header className="space-y-2 animate-fade-in">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-gradient font-mono text-4xl font-bold tracking-tight">
+              DASHBOARD
+            </h1>
+            <p className="text-muted text-sm uppercase tracking-widest-custom mt-1">
+              Mission Control Overview
+            </p>
+          </div>
 
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <StatCard
-          title="Total Agents"
-          value={isLoading ? "..." : agents.length}
-          icon={Server}
-          description="Registered endpoints"
-        />
-        <StatCard
-          title="Online"
-          value={isLoading ? "..." : onlineAgents.length}
-          icon={CheckCircle}
-          description="Currently connected"
-        />
-        <StatCard
-          title="Offline"
-          value={isLoading ? "..." : offlineAgents.length}
-          icon={Activity}
-          description="Not responding"
-        />
-        <StatCard
-          title="Errors"
-          value={isLoading ? "..." : errorAgents.length}
-          icon={AlertTriangle}
-          description="Requires attention"
-        />
-      </div>
+          {/* System Status Indicator */}
+          <div className={`status-indicator ${statusClass}`}>
+            <span className="status-dot" />
+            <span className="font-mono text-xs uppercase tracking-wide">
+              {systemStatus}
+            </span>
+          </div>
+        </div>
+      </header>
 
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {isLoading ? (
-              <p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
-            ) : agents.length === 0 ? (
-              <p className="text-[hsl(var(--muted-foreground))]">
-                No agents registered yet. Deploy an agent to get started.
-              </p>
-            ) : (
-              <div className="space-y-4">
-                {agents.slice(0, 5).map((agent: Agent) => (
-                  <div key={agent.id} className="flex items-center justify-between">
-                    <div className="flex items-center gap-3">
-                      <div
-                        className={`h-2 w-2 rounded-full ${
-                          agent.status === "online"
-                            ? "bg-green-500"
-                            : agent.status === "error"
-                            ? "bg-red-500"
-                            : "bg-gray-400"
-                        }`}
-                      />
-                      <div>
-                        <p className="font-medium">{agent.hostname}</p>
-                        <p className="text-xs text-[hsl(var(--muted-foreground))]">
-                          {agent.os_type}
-                        </p>
-                      </div>
-                    </div>
-                    <span className="text-xs text-[hsl(var(--muted-foreground))]">
-                      {agent.last_seen
-                        ? new Date(agent.last_seen).toLocaleString()
-                        : "Never seen"}
-                    </span>
-                  </div>
-                ))}
-              </div>
+      {/* Stat Cards Grid */}
+      <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {isLoading ? (
+          <>
+            <StatCardSkeleton delay={0.1} />
+            <StatCardSkeleton delay={0.2} />
+            <StatCardSkeleton delay={0.3} />
+            <StatCardSkeleton delay={0.4} />
+          </>
+        ) : (
+          <>
+            <StatCard
+              title="Total Agents"
+              value={agents.length}
+              icon={Server}
+              description="Registered endpoints"
+              accentColor="cyan"
+              delay={0.1}
+            />
+            <StatCard
+              title="Online"
+              value={onlineAgents.length}
+              icon={Wifi}
+              description="Currently connected"
+              accentColor="green"
+              delay={0.2}
+            />
+            <StatCard
+              title="Offline"
+              value={offlineAgents.length}
+              icon={WifiOff}
+              description="Not responding"
+              accentColor="amber"
+              delay={0.3}
+            />
+            <StatCard
+              title="Errors"
+              value={errorAgents.length}
+              icon={AlertTriangle}
+              description="Requires attention"
+              accentColor="rose"
+              delay={0.4}
+            />
+          </>
+        )}
+      </section>
+
+      {/* Bottom Grid: Activity + Quick Actions */}
+      <section className="grid gap-6 md:grid-cols-2">
+        {/* Recent Activity Card */}
+        <div
+          className="glass-card opacity-0"
+          style={{
+            animation: "fadeInUp 0.4s ease-out 0.5s forwards",
+          }}
+        >
+          <div className="flex items-center justify-between mb-4 pb-4 border-b border-[var(--border-secondary)]">
+            <h2 className="card-title flex items-center gap-2">
+              <Activity className="h-4 w-4 text-cyan" />
+              Recent Activity
+            </h2>
+            {!isLoading && agents.length > 0 && (
+              <span className="font-mono text-xs text-muted">
+                {agents.length} agent{agents.length !== 1 ? "s" : ""}
+              </span>
             )}
-          </CardContent>
-        </Card>
+          </div>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>Quick Actions</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2 text-sm text-[hsl(var(--muted-foreground))]">
-              <p>Deploy a new agent to start monitoring endpoints.</p>
-              <p className="mt-4">
-                Use the Agents page to view details and send commands to your endpoints.
+          {isLoading ? (
+            <ActivityListSkeleton />
+          ) : agents.length === 0 ? (
+            <div className="text-center py-8">
+              <Server className="h-12 w-12 text-muted mx-auto mb-4 opacity-50" />
+              <p className="text-secondary font-medium mb-2">
+                No agents registered
+              </p>
+              <p className="text-muted text-sm">
+                Deploy an agent to start monitoring endpoints.
               </p>
             </div>
-          </CardContent>
-        </Card>
-      </div>
+          ) : (
+            <div className="space-y-1 -mx-3">
+              {agents.slice(0, 5).map((agent: Agent) => (
+                <ActivityItem key={agent.id} agent={agent} />
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Quick Actions Card */}
+        <div
+          className="glass-card opacity-0"
+          style={{
+            animation: "fadeInUp 0.4s ease-out 0.6s forwards",
+          }}
+        >
+          <div className="flex items-center gap-2 mb-4 pb-4 border-b border-[var(--border-secondary)]">
+            <Zap className="h-4 w-4 text-cyan" />
+            <h2 className="card-title">Quick Actions</h2>
+          </div>
+
+          <div className="space-y-3">
+            <QuickActionButton
+              icon={Terminal}
+              label="Deploy Agent"
+              description="Install agent on a new endpoint"
+            />
+            <QuickActionButton
+              icon={RefreshCw}
+              label="Refresh All"
+              description="Force update all agent statuses"
+            />
+            <QuickActionButton
+              icon={Shield}
+              label="Security Scan"
+              description="Run security audit on all endpoints"
+            />
+          </div>
+
+          {/* Terminal-style hint */}
+          <div className="mt-6 p-3 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-secondary)]">
+            <div className="flex items-center gap-2">
+              <span className="font-mono text-xs text-cyan">$</span>
+              <span className="font-mono text-xs text-muted">
+                guru-rmm --help
+              </span>
+              <span className="inline-block w-2 h-4 bg-cyan animate-pulse ml-1" />
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/projects/msp-tools/guru-rmm/dashboard/src/pages/Login.tsx b/projects/msp-tools/guru-rmm/dashboard/src/pages/Login.tsx
index 889a7a9..337edd6 100644
--- a/projects/msp-tools/guru-rmm/dashboard/src/pages/Login.tsx
+++ b/projects/msp-tools/guru-rmm/dashboard/src/pages/Login.tsx
@@ -2,15 +2,41 @@ import { useState, FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { AxiosError } from "axios";
 import { useAuth } from "../hooks/useAuth";
-import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/Card";
-import { Input } from "../components/Input";
-import { Button } from "../components/Button";
 
 interface ApiErrorResponse {
   error?: string;
   message?: string;
 }
 
+/**
+ * Floating geometric shape component for background decoration
+ */
+function FloatingShape({
+  className,
+  delay = 0,
+  size = 40
+}: {
+  className?: string;
+  delay?: number;
+  size?: number;
+}) {
+  return (
+    <div
+      className={`absolute opacity-20 ${className}`}
+      style={{
+        width: size,
+        height: size,
+        animationDelay: `${delay}s`,
+      }}
+    >
+      <div
+        className="w-full h-full border border-cyan-500/30 rotate-45 animate-float"
+        style={{ animationDelay: `${delay}s` }}
+      />
+    </div>
+  );
+}
+
 export function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -42,56 +68,165 @@ export function Login() {
   };
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[hsl(var(--background))] px-4">
-      <Card className="w-full max-w-md">
-        <CardHeader className="text-center">
-          <CardTitle className="text-2xl">GuruRMM</CardTitle>
-          <CardDescription>Sign in to your account</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className="space-y-4">
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[hsl(var(--bg-primary))]">
+      {/* Gradient background overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--bg-primary))] via-[hsl(var(--bg-secondary))] to-[hsl(222_47%_8%)]" />
+
+      {/* Animated grid pattern */}
+      <div className="absolute inset-0 bg-grid-pattern opacity-30 animate-grid" />
+
+      {/* Radial gradient spotlight */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_hsl(var(--accent-cyan)/0.08)_0%,_transparent_70%)]" />
+
+      {/* Floating geometric shapes */}
+      <FloatingShape className="top-[10%] left-[10%]" delay={0} size={60} />
+      <FloatingShape className="top-[20%] right-[15%]" delay={1.5} size={40} />
+      <FloatingShape className="bottom-[30%] left-[8%]" delay={3} size={50} />
+      <FloatingShape className="bottom-[15%] right-[12%]" delay={2} size={35} />
+      <FloatingShape className="top-[50%] left-[5%]" delay={4} size={25} />
+      <FloatingShape className="top-[40%] right-[8%]" delay={2.5} size={45} />
+
+      {/* Login Card */}
+      <div className="relative z-10 w-full max-w-md mx-4 animate-fade-in-up">
+        <div className="glass rounded-2xl p-8 shadow-2xl">
+          {/* Logo and Branding */}
+          <div className="text-center mb-8">
+            {/* Logo Icon */}
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-500/20 to-teal-500/20 border border-cyan-500/30 mb-4 glow-cyan">
+              <svg
+                className="w-8 h-8 text-cyan-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
+                />
+              </svg>
+            </div>
+
+            {/* Title with gradient */}
+            <h1 className="text-3xl font-bold font-mono-display gradient-text-cyan-teal tracking-tight">
+              GuruRMM
+            </h1>
+
+            {/* Subtitle */}
+            <p className="mt-2 text-sm text-[hsl(var(--text-muted))] uppercase tracking-widest-custom font-mono-display">
+              Mission Control
+            </p>
+          </div>
+
+          {/* Login Form */}
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Error Message */}
             {error && (
-              <div className="p-3 text-sm text-[hsl(var(--destructive))] bg-[hsl(var(--destructive))]/10 rounded-md">
-                {error}
+              <div className="p-4 rounded-lg bg-rose-950/50 border border-rose-500/30 animate-pulse-subtle">
+                <p className="text-sm text-rose-300 flex items-center gap-2">
+                  <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                  {error}
+                </p>
               </div>
             )}
+
+            {/* Email Field */}
             <div className="space-y-2">
-              <label htmlFor="email" className="text-sm font-medium">
-                Email
+              <label
+                htmlFor="email"
+                className="block text-xs font-medium text-[hsl(var(--text-secondary))] uppercase tracking-wider"
+              >
+                Email Address
               </label>
-              <Input
+              <input
                 id="email"
                 type="email"
-                placeholder="admin@example.com"
+                placeholder="operator@example.com"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
+                autoComplete="email"
+                className="w-full px-4 py-3 rounded-lg input-mission-control text-sm"
               />
             </div>
+
+            {/* Password Field */}
             <div className="space-y-2">
-              <label htmlFor="password" className="text-sm font-medium">
+              <label
+                htmlFor="password"
+                className="block text-xs font-medium text-[hsl(var(--text-secondary))] uppercase tracking-wider"
+              >
                 Password
               </label>
-              <Input
+              <input
                 id="password"
                 type="password"
+                placeholder="Enter your password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 required
+                autoComplete="current-password"
+                className="w-full px-4 py-3 rounded-lg input-mission-control text-sm"
               />
             </div>
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Signing in..." : "Sign in"}
-            </Button>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className={`w-full py-3 px-4 rounded-lg btn-mission-control text-sm uppercase tracking-wider ${isLoading ? 'loading' : ''}`}
+            >
+              {isLoading ? (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                  Authenticating...
+                </span>
+              ) : (
+                <span className="flex items-center justify-center gap-2">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+                  </svg>
+                  Access System
+                </span>
+              )}
+            </button>
           </form>
-          <div className="mt-4 text-center text-sm">
-            Don't have an account?{" "}
-            <Link to="/register" className="text-[hsl(var(--primary))] hover:underline">
-              Register
-            </Link>
+
+          {/* Divider */}
+          <div className="relative my-6">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-[hsl(var(--glass-border))]" />
+            </div>
+            <div className="relative flex justify-center text-xs">
+              <span className="px-3 bg-[hsl(var(--glass-bg))] text-[hsl(var(--text-muted))]">
+                OR
+              </span>
+            </div>
           </div>
-        </CardContent>
-      </Card>
+
+          {/* Register Link */}
+          <p className="text-center text-sm text-[hsl(var(--text-secondary))]">
+            New operator?{" "}
+            <Link
+              to="/register"
+              className="text-cyan-400 hover:text-cyan-300 transition-colors font-medium hover:underline underline-offset-4"
+            >
+              Request Access
+            </Link>
+          </p>
+        </div>
+
+        {/* Footer tagline */}
+        <p className="text-center mt-6 text-xs text-[hsl(var(--text-muted))] font-mono-display">
+          Secure Remote Management Infrastructure
+        </p>
+      </div>
     </div>
   );
 }