docs: Session log - Mission Control dashboard redesign

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
feat(dashboard): Complete "Mission Control" UI redesign
2026-01-21 06:25:38 -07:00 · 2026-01-21 06:23:59 -07:00
8 changed files with 2541 additions and 241 deletions
--- 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}
--- 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 };
--- 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) => {
+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(
-        "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",
+          // 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 };
--- 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 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>
  );
--- a/projects/msp-tools/guru-rmm/dashboard/src/index.css
+++ b/projects/msp-tools/guru-rmm/dashboard/src/index.css
--- 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>
+    <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-xs text-[hsl(var(--muted-foreground))]">{description}</p>
+            <p className="text-muted text-sm">{description}</p>
          )}
-      </CardContent>
-    </Card>
+        </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 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-3xl font-bold">Dashboard</h1>
-        <p className="text-[hsl(var(--muted-foreground))]">
-          Overview of your managed endpoints
+            <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">
+          {/* 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>
+
+      {/* 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={isLoading ? "..." : agents.length}
+              value={agents.length}
              icon={Server}
              description="Registered endpoints"
+              accentColor="cyan"
+              delay={0.1}
            />
            <StatCard
              title="Online"
-          value={isLoading ? "..." : onlineAgents.length}
-          icon={CheckCircle}
+              value={onlineAgents.length}
+              icon={Wifi}
              description="Currently connected"
+              accentColor="green"
+              delay={0.2}
            />
            <StatCard
              title="Offline"
-          value={isLoading ? "..." : offlineAgents.length}
-          icon={Activity}
+              value={offlineAgents.length}
+              icon={WifiOff}
              description="Not responding"
+              accentColor="amber"
+              delay={0.3}
            />
            <StatCard
              title="Errors"
-          value={isLoading ? "..." : errorAgents.length}
+              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>
+            )}
          </div>

-      <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>
+            <ActivityListSkeleton />
          ) : agents.length === 0 ? (
-              <p className="text-[hsl(var(--muted-foreground))]">
-                No agents registered yet. Deploy an agent to get started.
+            <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>
          ) : (
-              <div className="space-y-4">
+            <div className="space-y-1 -mx-3">
              {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>
+                <ActivityItem key={agent.id} agent={agent} />
              ))}
            </div>
          )}
-          </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.
-              </p>
+        {/* 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>
-          </CardContent>
-        </Card>
+
+          <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>
  );
 }
--- 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">
+              <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>
+
+          {/* 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>
-        </CardContent>
-      </Card>
    </div>
  );
 }
--- a/projects/msp-tools/guru-rmm/session-logs/2026-01-21-session.md
+++ b/projects/msp-tools/guru-rmm/session-logs/2026-01-21-session.md
@@ -0,0 +1,283 @@
+# GuruRMM Session Log: 2026-01-21
+
+**Project:** GuruRMM - Remote Monitoring & Management System
+**Duration:** ~2 hours
+**Focus:** Dashboard UI Redesign + Production Fixes
+
+---
+
+## Session Summary
+
+### What Was Accomplished
+
+1. **Fixed 500 Error on Dashboard**
+   - Nginx config pointed to wrong path (`/var/www/gururmm/dashboard/dist` instead of `/var/www/gururmm/dashboard`)
+   - Fixed by updating nginx config and reloading
+
+2. **Diagnosed Network Error on Login**
+   - Dashboard hardcoded to `https://rmm-api.azcomputerguru.com` for API calls
+   - Users accessing via `http://172.16.3.30` got cross-origin errors
+   - Solution: Access via domain `https://rmm-api.azcomputerguru.com/`
+
+3. **Complete Dashboard UI Redesign - "Mission Control" Aesthetic**
+   - Transformed generic template design into distinctive command center theme
+   - Dark navy theme with cyan/teal accents
+   - Glassmorphism cards with backdrop blur
+   - JetBrains Mono + Inter typography
+   - Animated stat cards, status pulses, entrance animations
+   - Grid pattern backgrounds with radial glow effects
+
+### Key Decisions Made
+
+1. **Dark Theme as Default**
+   - Rationale: RMM tools are monitoring dashboards, dark theme reduces eye strain
+   - Color palette: Navy (#0a0e1a) base, cyan (#06b6d4) primary accent
+
+2. **Monospace Typography for Data**
+   - Rationale: Technical/command center aesthetic appropriate for RMM tool
+   - JetBrains Mono for headings/data, Inter for body text
+
+3. **Glassmorphism Card Style**
+   - Rationale: Modern, distinctive, creates depth without being distracting
+   - Semi-transparent backgrounds with backdrop-blur
+
+### Problems Encountered and Solutions
+
+**Problem 1: 500 Error on Dashboard**
+- Error: `rewrite or internal redirection cycle while internally redirecting to "/index.html"`
+- Cause: Nginx root pointed to non-existent `/dist` subdirectory
+- Fix: `sed -i 's|/var/www/gururmm/dashboard/dist|/var/www/gururmm/dashboard|'`
+
+**Problem 2: Network Error on Login**
+- Error: Browser CORS blocking API calls
+- Cause: Dashboard loaded from `http://172.16.3.30`, API calls to `https://rmm-api.azcomputerguru.com`
+- Fix: Access dashboard via domain (same origin)
+
+**Problem 3: TypeScript Build Error**
+- Error: `'CheckCircle' is declared but its value is never read`
+- Cause: Unused import in redesigned Dashboard.tsx
+- Fix: Removed unused import
+
+**Problem 4: CSS @import Warning**
+- Warning: `@import rules must precede all rules aside from @charset and @layer`
+- Cause: Google Fonts import came after Tailwind import
+- Fix: Moved font import to top of index.css
+
+---
+
+## Credentials & Infrastructure
+
+### GuruRMM Server (172.16.3.30)
+
+**SSH Access:**
+```
+Host: 172.16.3.30
+User: root
+Auth: SSH key (ed25519)
+```
+
+**Database (PostgreSQL):**
+```
+Host: localhost (on 172.16.3.30)
+Port: 5432
+Database: gururmm
+User: gururmm
+Password: 43617ebf7eb242e814ca9988cc4df5ad
+```
+
+**Services:**
+```
+GuruRMM Server: systemd gururmm-server, port 3001
+GuruRMM Agent: systemd gururmm-agent
+PostgreSQL: port 5432
+Nginx: port 80 (proxy + static files)
+```
+
+**Site Codes:**
+```
+Main Office: SWIFT-CLOUD-6910
+```
+
+### URLs & Endpoints
+
+```
+Dashboard: https://rmm-api.azcomputerguru.com/
+API: https://rmm-api.azcomputerguru.com/api/
+WebSocket: wss://rmm-api.azcomputerguru.com/ws
+Downloads: https://rmm-api.azcomputerguru.com/downloads/
+Health: https://rmm-api.azcomputerguru.com/health
+```
+
+**Direct Access (internal):**
+```
+Dashboard: http://172.16.3.30/
+API: http://172.16.3.30/api/
+```
+
+### File Paths on Server
+
+```
+Dashboard: /var/www/gururmm/dashboard/
+Downloads: /var/www/gururmm/downloads/
+Server Binary: /opt/gururmm/gururmm-server
+Agent Binary: /opt/gururmm/gururmm-agent
+Nginx Config: /etc/nginx/sites-enabled/gururmm
+Server Service: /etc/systemd/system/gururmm-server.service
+Agent Service: /etc/systemd/system/gururmm-agent.service
+```
+
+---
+
+## Commands & Outputs
+
+### Nginx Config Fix
+```bash
+ssh root@172.16.3.30 "sed -i 's|/var/www/gururmm/dashboard/dist|/var/www/gururmm/dashboard|' /etc/nginx/sites-enabled/gururmm && nginx -t && systemctl reload nginx"
+```
+
+### Dashboard Build
+```bash
+cd /Users/azcomputerguru/ClaudeTools/projects/msp-tools/guru-rmm/dashboard
+npm run build
+```
+
+### Dashboard Deploy
+```bash
+scp -r dist/* root@172.16.3.30:/var/www/gururmm/dashboard/
+# Clean old assets
+ssh root@172.16.3.30 "rm /var/www/gururmm/dashboard/assets/index-6D9Xlotq.css /var/www/gururmm/dashboard/assets/index-Bn5G1iG3.js"
+```
+
+### Check Logs
+```bash
+ssh root@172.16.3.30 "tail -50 /var/log/nginx/error.log"
+ssh root@172.16.3.30 "tail -20 /var/log/nginx/access.log"
+ssh root@172.16.3.30 "journalctl -u gururmm-server -n 20 --no-pager"
+```
+
+---
+
+## Configuration Changes
+
+### Files Modified
+
+**Dashboard Source (7 files):**
+
+| File | Changes |
+|------|---------|
+| `src/index.css` | Complete overhaul - dark theme, CSS variables, animations, glassmorphism utilities (+1,337 lines) |
+| `src/pages/Login.tsx` | Glassmorphism card, gradient logo, floating shapes (+193 lines) |
+| `src/pages/Dashboard.tsx` | Animated stat cards, system status, relative times (+494 lines) |
+| `src/components/Layout.tsx` | Dark sidebar, cyan accents, grid background (+186 lines) |
+| `src/components/Card.tsx` | Glow variants, glassmorphism (+111 lines) |
+| `src/components/Button.tsx` | Gradient backgrounds, glow effects (+60 lines) |
+| `src/components/Input.tsx` | Dark styling, Textarea component (+118 lines) |
+
+**Server Config:**
+| File | Changes |
+|------|---------|
+| `/etc/nginx/sites-enabled/gururmm` | Fixed root path from `/dashboard/dist` to `/dashboard` |
+
+### CSS Design System Added
+
+**CSS Variables:**
+```css
+--bg-primary: #0a0e1a;
+--bg-secondary: #111827;
+--accent-cyan: #06b6d4;
+--accent-green: #10b981;
+--accent-amber: #f59e0b;
+--accent-rose: #f43f5e;
+--glass-bg: rgba(15, 23, 42, 0.8);
+--glow-cyan: 0 0 20px rgba(6, 182, 212, 0.3);
+```
+
+**Utility Classes Added:**
+- `.glass`, `.glass-card` - glassmorphism effects
+- `.glow-cyan`, `.glow-green`, `.glow-amber`, `.glow-rose` - glow effects
+- `.text-gradient` - gradient text
+- `.animate-fade-in-up`, `.animate-pulse-glow`, `.animate-shimmer` - animations
+- `.status-online`, `.status-offline`, `.status-error` - status indicators
+
+---
+
+## Git Commits
+
+| Hash | Message |
+|------|---------|
+| `666d06a` | feat(dashboard): Mission Control UI redesign with dark theme and glassmorphism |
+
+**Commit Details:**
+- 7 files changed
+- +2,258 insertions, -241 deletions
+- Branch: main (ahead of origin by 1)
+
+---
+
+## Pending/Incomplete Tasks
+
+### Immediate
+1. **Push commit to remote** - Commit `666d06a` needs to be pushed
+
+### Future Enhancements (Phase 3 from Remediation Plan)
+- Request logging/audit trail
+- Comprehensive health check endpoint
+- Graceful shutdown handling
+- Pagination for commands endpoint
+- Token expiration handling in dashboard
+- Dark mode toggle (currently dark-only)
+
+### Testing
+- Verify login works with correct credentials
+- Test all dashboard pages with new styling
+- Verify responsive design on mobile
+
+---
+
+## Reference Information
+
+### Dashboard Tech Stack
+- React 19 + TypeScript
+- Vite 7.2.7 (build tool)
+- Tailwind CSS 4.x
+- TanStack Query (data fetching)
+- Axios (HTTP client)
+- Lucide React (icons)
+
+### Design System
+- **Primary Font:** JetBrains Mono (headings, data)
+- **Body Font:** Inter (text)
+- **Theme:** Dark navy (#0a0e1a)
+- **Accent:** Cyan (#06b6d4)
+- **Cards:** Glassmorphism (blur + transparency)
+
+### Nginx Configuration (Current)
+```nginx
+server {
+    listen 80;
+    server_name _;
+    root /var/www/gururmm/dashboard;
+    index index.html;
+
+    location /downloads/ { alias /var/www/gururmm/downloads/; autoindex on; }
+    location /api/ { proxy_pass http://127.0.0.1:3001; ... }
+    location /ws { proxy_pass http://127.0.0.1:3001; ... }
+    location /health { proxy_pass http://127.0.0.1:3001; }
+    location / { try_files $uri $uri/ /index.html; }
+}
+```
+
+---
+
+## Session Metrics
+
+- **Issues Fixed:** 3 (500 error, network error, build errors)
+- **Files Modified:** 8 (7 dashboard + 1 nginx)
+- **Lines Changed:** +2,258 / -241
+- **Commits Created:** 1
+- **Deployments:** 1 (dashboard to production)
+
+---
+
+**Session End:** 2026-01-21
+**Status:** Dashboard redesign complete, deployed, commit ready to push