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>

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",
+            // Secondary: Dark glass with cyan text
-            "border border-[hsl(var(--input))] bg-transparent shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]":
+            "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 === "outline",
-            "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:bg-[hsl(var(--secondary))]/80":
               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-12 rounded-lg px-8 text-base": size === "lg",
-            "h-9 w-9": size === "icon",
+            "h-10 w-10 p-0": size === "icon",
           },
+
           className
         )}
         ref={ref}

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>>(
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  ({ className, ...props }, ref) => (
+  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 };

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> {
-  return (
+  error?: boolean;
-    <input
+}
-      type={type}
+
-      className={cn(
+const Input = forwardRef<HTMLInputElement, InputProps>(
-        "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, type, error = false, ...props }, ref) => {
-        className
+    return (
-      )}
+      <input
-      ref={ref}
+        type={type}
-      {...props}
+        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 };

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))]">
+      <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">GuruRMM</span>
+        <span className="font-bold text-lg tracking-wider bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
-        <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
+          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">
+      {/* Mobile menu overlay with blur */}
-        {/* Sidebar */}
+      <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-cyan-400"
-                        : "text-[hsl(var(--foreground))] hover:bg-[hsl(var(--muted))]"
+                        : "text-slate-400 hover:text-slate-200"
                     }`}
                   >
-                    <item.icon className="h-5 w-5" />
+                    {/* Active/Hover background glow */}
-                    {item.label}
+                    <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))]">
+            {/* User profile section */}
-              <div className="flex items-center gap-3 mb-3">
+            <div className="p-4 border-t border-cyan-500/10">
-                <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">
+              <div className="flex items-center gap-3 mb-4 p-3 rounded-lg bg-slate-800/30">
-                  {user?.name?.[0] || user?.email?.[0] || "U"}
+                {/* 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-sm font-medium text-slate-200 truncate">
-                  <p className="text-xs text-[hsl(var(--muted-foreground))] truncate">
+                    {user?.name || user?.email}
-                    {user?.role}
+                  </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" />
+                <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
+                Sign Out
               </Button>
             </div>
           </div>
         </aside>
 
-        {/* Overlay for mobile */}
+        {/* Main content area */}
-        {sidebarOpen && (
+        <main className="flex-1 min-h-screen pt-16 lg:pt-0">
-          <div
+          <div className="p-6 lg:p-8 transition-all duration-300">
-            className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+            {children}
-            onClick={() => setSidebarOpen(false)}
+          </div>
-          />
+        </main>
-        )}
-
-        {/* Main content */}
-        <main className="flex-1 p-6 lg:p-8">{children}</main>
       </div>
     </div>
   );

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>
+    <div
-      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+      className="glass-card relative overflow-hidden opacity-0 border-l-4 group cursor-default"
-        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+      style={{
-        <Icon className="h-4 w-4 text-[hsl(var(--muted-foreground))]" />
+        animation: `fadeInUp 0.4s ease-out ${delay}s forwards`,
-      </CardHeader>
+        borderLeftColor: `var(--accent-${accentColor})`,
-      <CardContent>
+      }}
-        <div className="text-2xl font-bold">{value}</div>
+    >
-        {description && (
+      {/* Subtle gradient overlay on hover */}
-          <p className="text-xs text-[hsl(var(--muted-foreground))]">{description}</p>
+      <div
-        )}
+        className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"
-      </CardContent>
+        style={{
-    </Card>
+          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 className="space-y-8">
-      <div>
+      {/* Page Header */}
-        <h1 className="text-3xl font-bold">Dashboard</h1>
+      <header className="space-y-2 animate-fade-in">
-        <p className="text-[hsl(var(--muted-foreground))]">
+        <div className="flex items-center justify-between">
-          Overview of your managed endpoints
+          <div>
-        </p>
+            <h1 className="text-gradient font-mono text-4xl font-bold tracking-tight">
-      </div>
+              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 */}
-        <StatCard
+          <div className={`status-indicator ${statusClass}`}>
-          title="Total Agents"
+            <span className="status-dot" />
-          value={isLoading ? "..." : agents.length}
+            <span className="font-mono text-xs uppercase tracking-wide">
-          icon={Server}
+              {systemStatus}
-          description="Registered endpoints"
+            </span>
-        />
+          </div>
-        <StatCard
+        </div>
-          title="Online"
+      </header>
-          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>
 
-      <div className="grid gap-4 md:grid-cols-2">
+      {/* Stat Cards Grid */}
-        <Card>
+      <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <CardHeader>
+        {isLoading ? (
-            <CardTitle>Recent Activity</CardTitle>
+          <>
-          </CardHeader>
+            <StatCardSkeleton delay={0.1} />
-          <CardContent>
+            <StatCardSkeleton delay={0.2} />
-            {isLoading ? (
+            <StatCardSkeleton delay={0.3} />
-              <p className="text-[hsl(var(--muted-foreground))]">Loading...</p>
+            <StatCardSkeleton delay={0.4} />
-            ) : agents.length === 0 ? (
+          </>
-              <p className="text-[hsl(var(--muted-foreground))]">
+        ) : (
-                No agents registered yet. Deploy an agent to get started.
+          <>
-              </p>
+            <StatCard
-            ) : (
+              title="Total Agents"
-              <div className="space-y-4">
+              value={agents.length}
-                {agents.slice(0, 5).map((agent: Agent) => (
+              icon={Server}
-                  <div key={agent.id} className="flex items-center justify-between">
+              description="Registered endpoints"
-                    <div className="flex items-center gap-3">
+              accentColor="cyan"
-                      <div
+              delay={0.1}
-                        className={`h-2 w-2 rounded-full ${
+            />
-                          agent.status === "online"
+            <StatCard
-                            ? "bg-green-500"
+              title="Online"
-                            : agent.status === "error"
+              value={onlineAgents.length}
-                            ? "bg-red-500"
+              icon={Wifi}
-                            : "bg-gray-400"
+              description="Currently connected"
-                        }`}
+              accentColor="green"
-                      />
+              delay={0.2}
-                      <div>
+            />
-                        <p className="font-medium">{agent.hostname}</p>
+            <StatCard
-                        <p className="text-xs text-[hsl(var(--muted-foreground))]">
+              title="Offline"
-                          {agent.os_type}
+              value={offlineAgents.length}
-                        </p>
+              icon={WifiOff}
-                      </div>
+              description="Not responding"
-                    </div>
+              accentColor="amber"
-                    <span className="text-xs text-[hsl(var(--muted-foreground))]">
+              delay={0.3}
-                      {agent.last_seen
+            />
-                        ? new Date(agent.last_seen).toLocaleString()
+            <StatCard
-                        : "Never seen"}
+              title="Errors"
-                    </span>
+              value={errorAgents.length}
-                  </div>
+              icon={AlertTriangle}
-                ))}
+              description="Requires attention"
-              </div>
+              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>
+          </div>
-        </Card>
 
-        <Card>
+          {isLoading ? (
-          <CardHeader>
+            <ActivityListSkeleton />
-            <CardTitle>Quick Actions</CardTitle>
+          ) : agents.length === 0 ? (
-          </CardHeader>
+            <div className="text-center py-8">
-          <CardContent>
+              <Server className="h-12 w-12 text-muted mx-auto mb-4 opacity-50" />
-            <div className="space-y-2 text-sm text-[hsl(var(--muted-foreground))]">
+              <p className="text-secondary font-medium mb-2">
-              <p>Deploy a new agent to start monitoring endpoints.</p>
+                No agents registered
-              <p className="mt-4">
+              </p>
-                Use the Agents page to view details and send commands to your endpoints.
+              <p className="text-muted text-sm">
+                Deploy an agent to start monitoring endpoints.
               </p>
             </div>
-          </CardContent>
+          ) : (
-        </Card>
+            <div className="space-y-1 -mx-3">
-      </div>
+              {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>
   );
 }

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">
+    <div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[hsl(var(--bg-primary))]">
-      <Card className="w-full max-w-md">
+      {/* Gradient background overlay */}
-        <CardHeader className="text-center">
+      <div className="absolute inset-0 bg-gradient-to-br from-[hsl(var(--bg-primary))] via-[hsl(var(--bg-secondary))] to-[hsl(222_47%_8%)]" />
-          <CardTitle className="text-2xl">GuruRMM</CardTitle>
+
-          <CardDescription>Sign in to your account</CardDescription>
+      {/* Animated grid pattern */}
-        </CardHeader>
+      <div className="absolute inset-0 bg-grid-pattern opacity-30 animate-grid" />
-        <CardContent>
+
-          <form onSubmit={handleSubmit} className="space-y-4">
+      {/* 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">
-                {error}
+                <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">
+              <label
-                Email
+                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"}
+            {/* Submit Button */}
-            </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?{" "}
+          {/* Divider */}
-            <Link to="/register" className="text-[hsl(var(--primary))] hover:underline">
+          <div className="relative my-6">
-              Register
+            <div className="absolute inset-0 flex items-center">
-            </Link>
+              <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>
   );
 }