feat: command palette (Ctrl+K), dark mode, pinned clients

- Global Command Palette: Ctrl+K search across clients, pages, and actions - Arrow key navigation, grouped results (Pages/Clients/Actions) - Keyboard hints in footer - Dark mode: full theme toggle (light/dark/system) with localStorage - Theme toggle in header bar - Dark mode applied to Layout, Dashboard, Clients, ClientDetail, Login, Modal - Tailwind v4 @custom-variant for class-based dark mode - Pinned/Favorite clients: star clients for quick dashboard access - Pin button on client detail page and dashboard recent clients - Pinned clients grid on dashboard - Uses localStorage (no backend changes needed) - Search bar trigger in header with ⌘K shortcut hint
2026-01-29 13:36:39 +00:00
parent 4c7a8be5b8
commit 8c27b7b522
11 changed files with 585 additions and 105 deletions
--- a/src/components/CommandPalette.tsx
+++ b/src/components/CommandPalette.tsx
@@ -0,0 +1,286 @@
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '@/lib/api';
+import type { Client } from '@/types';
+import {
+  Search, LayoutDashboard, Users, Calendar, Mail, Settings,
+  Network, BarChart3, Shield, User, ArrowRight, Command,
+} from 'lucide-react';
+import { cn, getInitials } from '@/lib/utils';
+
+interface CommandItem {
+  id: string;
+  type: 'page' | 'client' | 'action';
+  icon: typeof Users;
+  title: string;
+  subtitle?: string;
+  path?: string;
+  action?: () => void;
+}
+
+const pages: CommandItem[] = [
+  { id: 'page-dashboard', type: 'page', icon: LayoutDashboard, title: 'Dashboard', path: '/' },
+  { id: 'page-clients', type: 'page', icon: Users, title: 'Clients', path: '/clients' },
+  { id: 'page-events', type: 'page', icon: Calendar, title: 'Events', path: '/events' },
+  { id: 'page-emails', type: 'page', icon: Mail, title: 'Emails', path: '/emails' },
+  { id: 'page-network', type: 'page', icon: Network, title: 'Network', path: '/network' },
+  { id: 'page-reports', type: 'page', icon: BarChart3, title: 'Reports', path: '/reports' },
+  { id: 'page-settings', type: 'page', icon: Settings, title: 'Settings', path: '/settings' },
+  { id: 'page-admin', type: 'page', icon: Shield, title: 'Admin', path: '/admin' },
+];
+
+export default function CommandPalette() {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [clients, setClients] = useState<Client[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  // Load clients when opened
+  useEffect(() => {
+    if (open && clients.length === 0) {
+      api.getClients().then(setClients).catch(() => {});
+    }
+  }, [open, clients.length]);
+
+  // Keyboard shortcut
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        setOpen((prev) => !prev);
+      }
+      if (e.key === 'Escape' && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (open) {
+      setQuery('');
+      setActiveIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  // Build filtered results
+  const results = useMemo(() => {
+    const items: CommandItem[] = [];
+    const q = query.toLowerCase().trim();
+
+    if (!q) {
+      // Show pages + recent clients
+      items.push(...pages);
+      const recentClients = clients.slice(0, 5).map((c): CommandItem => ({
+        id: `client-${c.id}`,
+        type: 'client',
+        icon: User,
+        title: `${c.firstName} ${c.lastName}`,
+        subtitle: [c.company, c.email].filter(Boolean).join(' · '),
+        path: `/clients/${c.id}`,
+      }));
+      items.push(...recentClients);
+    } else {
+      // Filter pages
+      const matchedPages = pages.filter(
+        (p) => p.title.toLowerCase().includes(q)
+      );
+      items.push(...matchedPages);
+
+      // Filter clients
+      const matchedClients = clients
+        .filter((c) =>
+          `${c.firstName} ${c.lastName}`.toLowerCase().includes(q) ||
+          c.email?.toLowerCase().includes(q) ||
+          c.company?.toLowerCase().includes(q) ||
+          c.industry?.toLowerCase().includes(q)
+        )
+        .slice(0, 8)
+        .map((c): CommandItem => ({
+          id: `client-${c.id}`,
+          type: 'client',
+          icon: User,
+          title: `${c.firstName} ${c.lastName}`,
+          subtitle: [c.company, c.email].filter(Boolean).join(' · '),
+          path: `/clients/${c.id}`,
+        }));
+      items.push(...matchedClients);
+
+      // Add "New Client" action if searching
+      items.push({
+        id: 'action-new-client',
+        type: 'action',
+        icon: Users,
+        title: 'Add New Client',
+        subtitle: 'Create a new client profile',
+        path: '/clients',
+        action: () => navigate('/clients', { state: { openCreate: true } }),
+      });
+    }
+
+    return items;
+  }, [query, clients, navigate]);
+
+  // Reset active index when results change
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [results.length]);
+
+  const handleSelect = useCallback((item: CommandItem) => {
+    setOpen(false);
+    if (item.action) {
+      item.action();
+    } else if (item.path) {
+      navigate(item.path);
+    }
+  }, [navigate]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setActiveIndex((prev) => Math.min(prev + 1, results.length - 1));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setActiveIndex((prev) => Math.max(prev - 1, 0));
+    } else if (e.key === 'Enter' && results[activeIndex]) {
+      e.preventDefault();
+      handleSelect(results[activeIndex]);
+    }
+  };
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (!listRef.current) return;
+    const activeEl = listRef.current.children[activeIndex] as HTMLElement;
+    activeEl?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+
+  if (!open) return null;
+
+  const pageItems = results.filter((r) => r.type === 'page');
+  const clientItems = results.filter((r) => r.type === 'client');
+  const actionItems = results.filter((r) => r.type === 'action');
+
+  let flatIndex = -1;
+
+  const renderItem = (item: CommandItem) => {
+    flatIndex++;
+    const idx = flatIndex;
+    const Icon = item.icon;
+    return (
+      <button
+        key={item.id}
+        onClick={() => handleSelect(item)}
+        onMouseEnter={() => setActiveIndex(idx)}
+        className={cn(
+          'w-full flex items-center gap-3 px-4 py-3 text-left transition-colors',
+          idx === activeIndex
+            ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+            : 'text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+        )}
+      >
+        {item.type === 'client' ? (
+          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-xs font-semibold flex-shrink-0">
+            {getInitials(item.title.split(' ')[0], item.title.split(' ')[1] || '')}
+          </div>
+        ) : (
+          <Icon className="w-5 h-5 flex-shrink-0 opacity-60" />
+        )}
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium truncate">{item.title}</p>
+          {item.subtitle && (
+            <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{item.subtitle}</p>
+          )}
+        </div>
+        <ArrowRight className="w-4 h-4 opacity-30 flex-shrink-0" />
+      </button>
+    );
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/40 dark:bg-black/60 z-[100] animate-fade-in"
+        onClick={() => setOpen(false)}
+      />
+
+      {/* Palette */}
+      <div className="fixed inset-x-0 top-[15%] z-[101] flex justify-center px-4">
+        <div className="w-full max-w-lg bg-white dark:bg-slate-800 rounded-2xl shadow-2xl border border-slate-200 dark:border-slate-700 overflow-hidden animate-slide-up">
+          {/* Search input */}
+          <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-200 dark:border-slate-700">
+            <Search className="w-5 h-5 text-slate-400" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Search clients, pages, actions..."
+              className="flex-1 text-sm bg-transparent outline-none text-slate-900 dark:text-slate-100 placeholder-slate-400"
+            />
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium text-slate-400 bg-slate-100 dark:bg-slate-700 rounded">
+              ESC
+            </kbd>
+          </div>
+
+          {/* Results */}
+          <div ref={listRef} className="max-h-[400px] overflow-y-auto">
+            {results.length === 0 ? (
+              <div className="px-4 py-8 text-center text-sm text-slate-400">
+                No results found
+              </div>
+            ) : (
+              <>
+                {pageItems.length > 0 && (
+                  <>
+                    <div className="px-4 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
+                      Pages
+                    </div>
+                    {pageItems.map(renderItem)}
+                  </>
+                )}
+                {clientItems.length > 0 && (
+                  <>
+                    <div className="px-4 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
+                      Clients
+                    </div>
+                    {clientItems.map(renderItem)}
+                  </>
+                )}
+                {actionItems.length > 0 && (
+                  <>
+                    <div className="px-4 pt-3 pb-1 text-[10px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500">
+                      Actions
+                    </div>
+                    {actionItems.map(renderItem)}
+                  </>
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="px-4 py-2 border-t border-slate-200 dark:border-slate-700 flex items-center gap-4 text-[10px] text-slate-400">
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">↑↓</kbd> navigate
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">↵</kbd> select
+            </span>
+            <span className="flex items-center gap-1">
+              <kbd className="px-1 py-0.5 bg-slate-100 dark:bg-slate-700 rounded">esc</kbd> close
+            </span>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -4,9 +4,11 @@ import { useAuthStore } from '@/stores/auth';
 import { cn } from '@/lib/utils';
 import {
  LayoutDashboard, Users, Calendar, Mail, Settings, Shield,
-  LogOut, Menu, X, ChevronLeft, Network, BarChart3,
+  LogOut, Menu, X, ChevronLeft, Network, BarChart3, Search, Command,
 } from 'lucide-react';
 import NotificationBell from './NotificationBell';
+import CommandPalette from './CommandPalette';
+import ThemeToggle from './ThemeToggle';

 const baseNavItems = [
  { path: '/', label: 'Dashboard', icon: LayoutDashboard },
@@ -32,7 +34,8 @@ export default function Layout() {
  };

  return (
-    <div className="flex h-screen bg-slate-50">
+    <div className="flex h-screen bg-slate-50 dark:bg-slate-900">
+      <CommandPalette />
      {/* Mobile overlay */}
      {mobileOpen && (
        <div
@@ -44,20 +47,20 @@ export default function Layout() {
      {/* Sidebar */}
      <aside
        className={cn(
-          'fixed lg:static inset-y-0 left-0 z-50 flex flex-col bg-white border-r border-slate-200 transition-all duration-300',
+          'fixed lg:static inset-y-0 left-0 z-50 flex flex-col bg-white dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700 transition-all duration-300',
          collapsed ? 'w-16' : 'w-64',
          mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
        )}
      >
        {/* Logo */}
        <div className={cn(
-          'flex items-center h-16 px-4 border-b border-slate-200',
+          'flex items-center h-16 px-4 border-b border-slate-200 dark:border-slate-700',
          collapsed ? 'justify-center' : 'gap-3'
        )}>
          <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
            <Network className="w-5 h-5 text-white" />
          </div>
-          {!collapsed && <span className="font-bold text-lg text-slate-900">NetworkCRM</span>}
+          {!collapsed && <span className="font-bold text-lg text-slate-900 dark:text-slate-100">NetworkCRM</span>}
        </div>

        {/* Navigation */}
@@ -72,8 +75,8 @@ export default function Layout() {
                className={cn(
                  'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
                  isActive
-                    ? 'bg-blue-50 text-blue-700'
-                    : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'
+                    ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300'
+                    : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-900 dark:hover:text-slate-200'
                )}
              >
                <Icon className="w-5 h-5 flex-shrink-0" />
@@ -86,28 +89,28 @@ export default function Layout() {
        {/* Collapse button (desktop) */}
        <button
          onClick={() => setCollapsed(!collapsed)}
-          className="hidden lg:flex items-center justify-center h-10 mx-2 mb-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
+          className="hidden lg:flex items-center justify-center h-10 mx-2 mb-2 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
        >
          <ChevronLeft className={cn('w-5 h-5 transition-transform', collapsed && 'rotate-180')} />
        </button>

        {/* User / Logout */}
        <div className={cn(
-          'border-t border-slate-200 p-3',
+          'border-t border-slate-200 dark:border-slate-700 p-3',
          collapsed ? 'flex flex-col items-center gap-2' : 'flex items-center gap-3'
        )}>
-          <div className="w-8 h-8 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
+          <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
            {user?.name?.[0]?.toUpperCase() || 'U'}
          </div>
          {!collapsed && (
            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-slate-900 truncate">{user?.name}</p>
-              <p className="text-xs text-slate-500 truncate">{user?.email}</p>
+              <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{user?.name}</p>
+              <p className="text-xs text-slate-500 dark:text-slate-400 truncate">{user?.email}</p>
            </div>
          )}
          <button
            onClick={handleLogout}
-            className="p-1.5 rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-600 transition-colors"
+            className="p-1.5 rounded-lg text-slate-400 hover:bg-red-50 dark:hover:bg-red-900/30 hover:text-red-600 dark:hover:text-red-400 transition-colors"
            title="Logout"
          >
            <LogOut className="w-4 h-4" />
@@ -118,15 +121,30 @@ export default function Layout() {
      {/* Main */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Top bar */}
-        <header className="h-16 bg-white border-b border-slate-200 flex items-center px-4 lg:px-6">
+        <header className="h-16 bg-white dark:bg-slate-800 border-b border-slate-200 dark:border-slate-700 flex items-center px-4 lg:px-6">
          <button
            onClick={() => setMobileOpen(true)}
            className="lg:hidden p-2 -ml-2 rounded-lg text-slate-500 hover:bg-slate-100"
          >
            {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
          </button>
-          <div className="flex-1" />
-          <NotificationBell />
+          {/* Search trigger */}
+          <button
+            onClick={() => {
+              window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
+            }}
+            className="flex items-center gap-2 px-3 py-1.5 text-sm text-slate-400 bg-slate-100 dark:bg-slate-700 rounded-lg hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors mr-2"
+          >
+            <Search className="w-4 h-4" />
+            <span className="hidden sm:inline">Search...</span>
+            <kbd className="hidden sm:inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium bg-white dark:bg-slate-600 text-slate-400 rounded shadow-sm">
+              ⌘K
+            </kbd>
+          </button>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <NotificationBell />
+          </div>
        </header>

        {/* Content */}
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -26,17 +26,17 @@ export default function Modal({ isOpen, onClose, title, children, size = 'md' }:
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
      <div className={cn(
-        'relative bg-white rounded-xl shadow-xl w-full max-h-[85vh] flex flex-col animate-fade-in mx-2 sm:mx-0',
+        'relative bg-white dark:bg-slate-800 rounded-xl shadow-xl w-full max-h-[85vh] flex flex-col animate-fade-in mx-2 sm:mx-0',
        size === 'sm' && 'max-w-md',
        size === 'md' && 'max-w-lg',
        size === 'lg' && 'max-w-2xl',
        size === 'xl' && 'max-w-4xl',
      )}>
-        <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-slate-200">
-          <h2 className="text-lg font-semibold text-slate-900">{title}</h2>
+        <div className="flex items-center justify-between px-4 sm:px-6 py-4 border-b border-slate-200 dark:border-slate-700">
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
          <button
            onClick={onClose}
-            className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors"
+            className="p-1.5 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
          >
            <X className="w-5 h-5" />
          </button>
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -0,0 +1,33 @@
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { useTheme } from '@/hooks/useTheme';
+import { cn } from '@/lib/utils';
+
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const options = [
+    { value: 'light' as const, icon: Sun, label: 'Light' },
+    { value: 'dark' as const, icon: Moon, label: 'Dark' },
+    { value: 'system' as const, icon: Monitor, label: 'System' },
+  ];
+
+  return (
+    <div className="flex items-center bg-slate-100 dark:bg-slate-700 rounded-lg p-0.5">
+      {options.map(({ value, icon: Icon, label }) => (
+        <button
+          key={value}
+          onClick={() => setTheme(value)}
+          title={label}
+          className={cn(
+            'p-1.5 rounded-md transition-all',
+            theme === value
+              ? 'bg-white dark:bg-slate-600 text-slate-900 dark:text-slate-100 shadow-sm'
+              : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'
+          )}
+        >
+          <Icon className="w-4 h-4" />
+        </button>
+      ))}
+    </div>
+  );
+}
--- a/src/hooks/usePinnedClients.ts
+++ b/src/hooks/usePinnedClients.ts
@@ -0,0 +1,31 @@
+import { useState, useCallback } from 'react';
+
+const STORAGE_KEY = 'network-pinned-clients';
+
+function getStored(): string[] {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+  } catch {
+    return [];
+  }
+}
+
+export function usePinnedClients() {
+  const [pinnedIds, setPinnedIds] = useState<string[]>(getStored);
+
+  const togglePin = useCallback((clientId: string) => {
+    setPinnedIds((prev) => {
+      const next = prev.includes(clientId)
+        ? prev.filter((id) => id !== clientId)
+        : [...prev, clientId];
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const isPinned = useCallback((clientId: string) => {
+    return pinnedIds.includes(clientId);
+  }, [pinnedIds]);
+
+  return { pinnedIds, togglePin, isPinned };
+}
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -0,0 +1,43 @@
+import { useEffect, useState, useCallback } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+const STORAGE_KEY = 'network-theme';
+
+function getSystemTheme(): 'light' | 'dark' {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function applyTheme(theme: Theme) {
+  const resolved = theme === 'system' ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle('dark', resolved === 'dark');
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem(STORAGE_KEY) as Theme | null;
+    return stored || 'system';
+  });
+
+  const setTheme = useCallback((newTheme: Theme) => {
+    setThemeState(newTheme);
+    localStorage.setItem(STORAGE_KEY, newTheme);
+    applyTheme(newTheme);
+  }, []);
+
+  // Apply on mount and watch system changes
+  useEffect(() => {
+    applyTheme(theme);
+
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      if (theme === 'system') applyTheme('system');
+    };
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [theme]);
+
+  const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+
+  return { theme, setTheme, resolvedTheme };
+}
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,7 @@
@import "tailwindcss";

+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
@@ -15,6 +17,12 @@ body {
  color: #0f172a;
 }

+.dark body,
+html.dark body {
+  background-color: #0f172a;
+  color: #e2e8f0;
+}
+
 * {
  box-sizing: border-box;
 }
@@ -51,3 +59,12 @@ body {
 .animate-spin {
  animation: spin 1s linear infinite;
 }
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(16px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.15s ease-out;
+}
--- a/src/pages/ClientDetailPage.tsx
+++ b/src/pages/ClientDetailPage.tsx
@@ -6,8 +6,9 @@ import type { Event, Email, ActivityItem } from '@/types';
 import {
  ArrowLeft, Edit3, Trash2, Phone, Mail, MapPin, Building2,
  Briefcase, Gift, Heart, Star, Users, Calendar, Send,
-  CheckCircle2, Sparkles, Clock, Activity, FileText, UserPlus, RefreshCw,
+  CheckCircle2, Sparkles, Clock, Activity, FileText, UserPlus, RefreshCw, Pin,
 } from 'lucide-react';
+import { usePinnedClients } from '@/hooks/usePinnedClients';
 import { cn, formatDate, getRelativeTime, getInitials } from '@/lib/utils';
 import Badge, { EventTypeBadge, EmailStatusBadge } from '@/components/Badge';
 import { PageLoader } from '@/components/LoadingSpinner';
@@ -26,6 +27,7 @@ export default function ClientDetailPage() {
  const [showEdit, setShowEdit] = useState(false);
  const [showCompose, setShowCompose] = useState(false);
  const [deleting, setDeleting] = useState(false);
+  const { togglePin, isPinned } = usePinnedClients();

  useEffect(() => {
    if (id) {
@@ -71,7 +73,7 @@ export default function ClientDetailPage() {
    <div className="max-w-4xl mx-auto space-y-6 animate-fade-in">
      {/* Header */}
      <div className="flex flex-col sm:flex-row items-start gap-4">
-        <button onClick={() => navigate('/clients')} className="mt-1 p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
+        <button onClick={() => navigate('/clients')} className="mt-1 p-2 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
          <ArrowLeft className="w-5 h-5" />
        </button>
        <div className="flex-1 min-w-0">
@@ -80,11 +82,11 @@ export default function ClientDetailPage() {
              {getInitials(client.firstName, client.lastName)}
            </div>
            <div className="flex-1 min-w-0">
-              <h1 className="text-2xl font-bold text-slate-900">
+              <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
                {client.firstName} {client.lastName}
              </h1>
              {client.company && (
-                <p className="text-slate-500">
+                <p className="text-slate-500 dark:text-slate-400">
                  {client.role ? `${client.role} at ` : ''}{client.company}
                </p>
              )}
@@ -105,7 +107,14 @@ export default function ClientDetailPage() {
            <Sparkles className="w-4 h-4" />
            <span className="hidden sm:inline">Generate Email</span>
          </button>
-          <button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
+          <button
+            onClick={() => togglePin(client.id)}
+            className={`p-2 rounded-lg transition-colors ${isPinned(client.id) ? 'text-amber-500 bg-amber-50 dark:bg-amber-900/30' : 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-amber-500'}`}
+            title={isPinned(client.id) ? 'Unpin from dashboard' : 'Pin to dashboard'}
+          >
+            <Star className={`w-4 h-4 ${isPinned(client.id) ? 'fill-amber-500' : ''}`} />
+          </button>
+          <button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
            <Edit3 className="w-4 h-4" />
          </button>
          <button onClick={handleDelete} disabled={deleting} className="p-2 rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-600 transition-colors">
@@ -115,7 +124,7 @@ export default function ClientDetailPage() {
      </div>

      {/* Tabs */}
-      <div className="border-b border-slate-200">
+      <div className="border-b border-slate-200 dark:border-slate-700">
        <div className="flex gap-6">
          {tabs.map(({ key, label, count, icon: Icon }) => (
            <button
@@ -124,14 +133,14 @@ export default function ClientDetailPage() {
              className={cn(
                'flex items-center gap-2 pb-3 border-b-2 text-sm font-medium transition-colors',
                activeTab === key
-                  ? 'border-blue-600 text-blue-600'
-                  : 'border-transparent text-slate-500 hover:text-slate-700'
+                  ? 'border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400'
+                  : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
              )}
            >
              <Icon className="w-4 h-4" />
              {label}
              {count !== undefined && count > 0 && (
-                <span className="px-1.5 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs">{count}</span>
+                <span className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-full text-xs">{count}</span>
              )}
            </button>
          ))}
@@ -142,8 +151,8 @@ export default function ClientDetailPage() {
      {activeTab === 'info' && (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Contact Info */}
-          <div className="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
-            <h3 className="font-semibold text-slate-900">Contact Information</h3>
+          <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 space-y-4">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100">Contact Information</h3>
            {client.email && (
              <div className="flex items-center gap-3 text-sm">
                <Mail className="w-4 h-4 text-slate-400" />
@@ -183,8 +192,8 @@ export default function ClientDetailPage() {
          </div>

          {/* Personal */}
-          <div className="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
-            <h3 className="font-semibold text-slate-900">Personal Details</h3>
+          <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 space-y-4">
+            <h3 className="font-semibold text-slate-900 dark:text-slate-100">Personal Details</h3>
            {client.birthday && (
              <div className="flex items-center gap-3 text-sm">
                <Gift className="w-4 h-4 text-pink-500" />
@@ -223,16 +232,16 @@ export default function ClientDetailPage() {

          {/* Notes */}
          {client.notes && (
-            <div className="bg-white border border-slate-200 rounded-xl p-5 md:col-span-2">
-              <h3 className="font-semibold text-slate-900 mb-2">Notes</h3>
-              <p className="text-sm text-slate-700 whitespace-pre-wrap">{client.notes}</p>
+            <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 md:col-span-2">
+              <h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-2">Notes</h3>
+              <p className="text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{client.notes}</p>
            </div>
          )}
        </div>
      )}

      {activeTab === 'activity' && (
-        <div className="bg-white border border-slate-200 rounded-xl">
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
          {activities.length === 0 ? (
            <p className="px-5 py-8 text-center text-sm text-slate-400">No activity recorded yet</p>
          ) : (
@@ -275,7 +284,7 @@ export default function ClientDetailPage() {
      )}

      {activeTab === 'events' && (
-        <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl divide-y divide-slate-100 dark:divide-slate-700">
          {events.length === 0 ? (
            <p className="px-5 py-8 text-center text-sm text-slate-400">No events for this client</p>
          ) : (
@@ -293,7 +302,7 @@ export default function ClientDetailPage() {
      )}

      {activeTab === 'emails' && (
-        <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl divide-y divide-slate-100 dark:divide-slate-700">
          {emails.length === 0 ? (
            <p className="px-5 py-8 text-center text-sm text-slate-400">No emails for this client</p>
          ) : (
--- a/src/pages/ClientsPage.tsx
+++ b/src/pages/ClientsPage.tsx
@@ -71,13 +71,13 @@ export default function ClientsPage() {
    <div className="max-w-6xl mx-auto space-y-5 animate-fade-in">
      <div className="flex items-center justify-between">
        <div>
-          <h1 className="text-2xl font-bold text-slate-900">Clients</h1>
-          <p className="text-slate-500 text-sm mt-1">{clients.length} contacts in your network</p>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Clients</h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">{clients.length} contacts in your network</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setShowImport(true)}
-            className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+            className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
          >
            <Upload className="w-4 h-4" />
            Import CSV
@@ -101,7 +101,7 @@ export default function ClientsPage() {
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Search clients..."
-            className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          {searchQuery && (
            <button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
@@ -145,18 +145,18 @@ export default function ClientsPage() {
            <Link
              key={client.id}
              to={`/clients/${client.id}`}
-              className="bg-white border border-slate-200 rounded-xl p-5 hover:shadow-md hover:border-slate-300 transition-all group"
+              className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:shadow-md dark:hover:shadow-slate-900/50 hover:border-slate-300 dark:hover:border-slate-600 transition-all group"
            >
              <div className="flex items-start gap-3">
-                <div className="w-11 h-11 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 group-hover:bg-blue-200 transition-colors">
+                <div className="w-11 h-11 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 group-hover:bg-blue-200 dark:group-hover:bg-blue-900 transition-colors">
                  {getInitials(client.firstName, client.lastName)}
                </div>
                <div className="flex-1 min-w-0">
-                  <h3 className="font-semibold text-slate-900 truncate">
+                  <h3 className="font-semibold text-slate-900 dark:text-slate-100 truncate">
                    {client.firstName} {client.lastName}
                  </h3>
                  {client.company && (
-                    <p className="text-sm text-slate-500 truncate">{client.role ? `${client.role} at ` : ''}{client.company}</p>
+                    <p className="text-sm text-slate-500 dark:text-slate-400 truncate">{client.role ? `${client.role} at ` : ''}{client.company}</p>
                  )}
                </div>
              </div>
@@ -164,7 +164,7 @@ export default function ClientsPage() {
              {client.tags && client.tags.length > 0 && (
                <div className="flex flex-wrap gap-1.5 mt-3">
                  {client.tags.slice(0, 3).map((tag) => (
-                    <span key={tag} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs">
+                    <span key={tag} className="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-full text-xs">
                      {tag}
                    </span>
                  ))}
@@ -174,7 +174,7 @@ export default function ClientsPage() {
                </div>
              )}

-              <div className="mt-3 pt-3 border-t border-slate-100 text-xs text-slate-400">
+              <div className="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700 text-xs text-slate-400">
                Last contacted: {getRelativeTime(client.lastContacted)}
              </div>
            </Link>
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { api } from '@/lib/api';
 import type { Client, Event, Email, InsightsData } from '@/types';
-import { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock, AlertTriangle, Sparkles, UserCheck, PhoneForwarded } from 'lucide-react';
-import { formatDate, getDaysUntil } from '@/lib/utils';
+import { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock, AlertTriangle, Sparkles, UserCheck, PhoneForwarded, Star } from 'lucide-react';
+import { formatDate, getDaysUntil, getInitials } from '@/lib/utils';
 import { EventTypeBadge } from '@/components/Badge';
 import { PageLoader } from '@/components/LoadingSpinner';
+import { usePinnedClients } from '@/hooks/usePinnedClients';

 export default function DashboardPage() {
  const [clients, setClients] = useState<Client[]>([]);
@@ -13,6 +14,7 @@ export default function DashboardPage() {
  const [emails, setEmails] = useState<Email[]>([]);
  const [insights, setInsights] = useState<InsightsData | null>(null);
  const [loading, setLoading] = useState(true);
+  const { pinnedIds, togglePin, isPinned } = usePinnedClients();

  useEffect(() => {
    Promise.all([
@@ -31,10 +33,12 @@ export default function DashboardPage() {

  if (loading) return <PageLoader />;

+  const pinnedClients = clients.filter((c) => pinnedIds.includes(c.id));
+
  const stats = [
-    { label: 'Total Clients', value: clients.length, icon: Users, color: 'bg-blue-50 text-blue-600', link: '/clients' },
-    { label: 'Upcoming Events', value: events.length, icon: Calendar, color: 'bg-emerald-50 text-emerald-600', link: '/events' },
-    { label: 'Pending Drafts', value: emails.length, icon: Mail, color: 'bg-amber-50 text-amber-600', link: '/emails' },
+    { label: 'Total Clients', value: clients.length, icon: Users, color: 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400', link: '/clients' },
+    { label: 'Upcoming Events', value: events.length, icon: Calendar, color: 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400', link: '/events' },
+    { label: 'Pending Drafts', value: emails.length, icon: Mail, color: 'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400', link: '/emails' },
  ];

  const eventIcon = (type: string) => {
@@ -47,8 +51,8 @@ export default function DashboardPage() {
    <div className="max-w-6xl mx-auto space-y-6 animate-fade-in">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
-          <h1 className="text-2xl font-bold text-slate-900">Dashboard</h1>
-          <p className="text-slate-500 text-sm mt-1">Welcome back. Here's your overview.</p>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Dashboard</h1>
+          <p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Welcome back. Here's your overview.</p>
        </div>
        <Link
          to="/clients"
@@ -66,49 +70,79 @@ export default function DashboardPage() {
          <Link
            key={stat.label}
            to={stat.link}
-            className="bg-white border border-slate-200 rounded-xl p-5 hover:shadow-md transition-shadow"
+            className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:shadow-md dark:hover:shadow-slate-900/50 transition-shadow"
          >
            <div className="flex items-center gap-3">
              <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${stat.color}`}>
                <stat.icon className="w-5 h-5" />
              </div>
              <div>
-                <p className="text-2xl font-bold text-slate-900">{stat.value}</p>
-                <p className="text-sm text-slate-500">{stat.label}</p>
+                <p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stat.value}</p>
+                <p className="text-sm text-slate-500 dark:text-slate-400">{stat.label}</p>
              </div>
            </div>
          </Link>
        ))}
      </div>

+      {/* Pinned Clients */}
+      {pinnedClients.length > 0 && (
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
+          <div className="flex items-center gap-2 px-5 py-4 border-b border-slate-100 dark:border-slate-700">
+            <Star className="w-4 h-4 text-amber-500 fill-amber-500" />
+            <h2 className="font-semibold text-slate-900 dark:text-slate-100">Pinned Clients</h2>
+          </div>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 p-4">
+            {pinnedClients.map((client) => (
+              <Link
+                key={client.id}
+                to={`/clients/${client.id}`}
+                className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group"
+              >
+                <div className="w-9 h-9 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
+                  {getInitials(client.firstName, client.lastName)}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                    {client.firstName} {client.lastName}
+                  </p>
+                  <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                    {client.company || 'No company'}
+                  </p>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+
      {/* AI Insights */}
      {insights && (insights.staleClients.length > 0 || insights.upcomingBirthdays.length > 0 || insights.suggestedFollowups.length > 0) && (
-        <div className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-5 space-y-4">
+        <div className="bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 rounded-xl p-5 space-y-4">
          <div className="flex items-center gap-2">
-            <Sparkles className="w-5 h-5 text-indigo-600" />
-            <h2 className="font-semibold text-indigo-900">AI Insights</h2>
+            <Sparkles className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+            <h2 className="font-semibold text-indigo-900 dark:text-indigo-200">AI Insights</h2>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-            {/* Needs Attention */}
            {insights.staleClients.length > 0 && (
-              <div className="bg-white/80 rounded-lg p-4 space-y-3">
-                <div className="flex items-center gap-2 text-sm font-medium text-red-700">
+              <div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-red-700 dark:text-red-400">
                  <AlertTriangle className="w-4 h-4" />
                  Needs Attention
                </div>
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-slate-500 dark:text-slate-400">
                  {insights.summary.staleCount} client{insights.summary.staleCount !== 1 ? 's' : ''} not contacted in 30+ days
                  {insights.summary.neverContacted > 0 && `, ${insights.summary.neverContacted} never contacted`}
                </p>
                <div className="space-y-2">
                  {insights.staleClients.slice(0, 3).map(c => (
                    <Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
-                      <div className="w-6 h-6 bg-red-100 text-red-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
+                      <div className="w-6 h-6 bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
                        {c.firstName[0]}{c.lastName[0]}
                      </div>
                      <div className="min-w-0">
-                        <p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
+                        <p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
                          {c.firstName} {c.lastName}
                        </p>
                        <p className="text-xs text-slate-400">
@@ -118,7 +152,7 @@ export default function DashboardPage() {
                    </Link>
                  ))}
                  {insights.staleClients.length > 3 && (
-                    <Link to="/clients" className="text-xs text-indigo-600 hover:text-indigo-700">
+                    <Link to="/clients" className="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-700">
                      +{insights.staleClients.length - 3} more
                    </Link>
                  )}
@@ -126,21 +160,20 @@ export default function DashboardPage() {
              </div>
            )}

-            {/* Upcoming Birthdays */}
            {insights.upcomingBirthdays.length > 0 && (
-              <div className="bg-white/80 rounded-lg p-4 space-y-3">
-                <div className="flex items-center gap-2 text-sm font-medium text-pink-700">
+              <div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-pink-700 dark:text-pink-400">
                  <Gift className="w-4 h-4" />
                  Birthdays This Week
                </div>
                <div className="space-y-2">
                  {insights.upcomingBirthdays.map(c => (
                    <Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
-                      <div className="w-6 h-6 bg-pink-100 text-pink-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
+                      <div className="w-6 h-6 bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
                        🎂
                      </div>
                      <div className="min-w-0">
-                        <p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
+                        <p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
                          {c.firstName} {c.lastName}
                        </p>
                        <p className="text-xs text-slate-400">
@@ -153,24 +186,23 @@ export default function DashboardPage() {
              </div>
            )}

-            {/* Suggested Follow-ups */}
            {insights.suggestedFollowups.length > 0 && (
-              <div className="bg-white/80 rounded-lg p-4 space-y-3">
-                <div className="flex items-center gap-2 text-sm font-medium text-amber-700">
+              <div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
+                <div className="flex items-center gap-2 text-sm font-medium text-amber-700 dark:text-amber-400">
                  <PhoneForwarded className="w-4 h-4" />
                  Suggested Follow-ups
                </div>
-                <p className="text-xs text-slate-500">
+                <p className="text-xs text-slate-500 dark:text-slate-400">
                  Contacted 14-30 days ago — good time to reach out
                </p>
                <div className="space-y-2">
                  {insights.suggestedFollowups.slice(0, 3).map(c => (
                    <Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
-                      <div className="w-6 h-6 bg-amber-100 text-amber-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
+                      <div className="w-6 h-6 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
                        {c.firstName[0]}{c.lastName[0]}
                      </div>
                      <div className="min-w-0">
-                        <p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
+                        <p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
                          {c.firstName} {c.lastName}
                        </p>
                        <p className="text-xs text-slate-400">
@@ -188,14 +220,14 @@ export default function DashboardPage() {

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Upcoming Events */}
-        <div className="bg-white border border-slate-200 rounded-xl">
-          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
-            <h2 className="font-semibold text-slate-900">Upcoming Events</h2>
-            <Link to="/events" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-slate-700">
+            <h2 className="font-semibold text-slate-900 dark:text-slate-100">Upcoming Events</h2>
+            <Link to="/events" className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 flex items-center gap-1">
              View all <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
-          <div className="divide-y divide-slate-100">
+          <div className="divide-y divide-slate-100 dark:divide-slate-700">
            {events.length === 0 ? (
              <p className="px-5 py-8 text-center text-sm text-slate-400">No upcoming events</p>
            ) : (
@@ -203,8 +235,8 @@ export default function DashboardPage() {
                <div key={event.id} className="flex items-center gap-3 px-5 py-3">
                  {eventIcon(event.type)}
                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-slate-900 truncate">{event.title}</p>
-                    <p className="text-xs text-slate-500">{formatDate(event.date)}</p>
+                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{event.title}</p>
+                    <p className="text-xs text-slate-500 dark:text-slate-400">{formatDate(event.date)}</p>
                  </div>
                  <EventTypeBadge type={event.type} />
                  <span className="text-xs text-slate-400 whitespace-nowrap">
@@ -217,14 +249,14 @@ export default function DashboardPage() {
        </div>

        {/* Recent Clients */}
-        <div className="bg-white border border-slate-200 rounded-xl">
-          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
-            <h2 className="font-semibold text-slate-900">Recent Clients</h2>
-            <Link to="/clients" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
+        <div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-slate-700">
+            <h2 className="font-semibold text-slate-900 dark:text-slate-100">Recent Clients</h2>
+            <Link to="/clients" className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 flex items-center gap-1">
              View all <ArrowRight className="w-3.5 h-3.5" />
            </Link>
          </div>
-          <div className="divide-y divide-slate-100">
+          <div className="divide-y divide-slate-100 dark:divide-slate-700">
            {clients.length === 0 ? (
              <p className="px-5 py-8 text-center text-sm text-slate-400">No clients yet</p>
            ) : (
@@ -235,19 +267,30 @@ export default function DashboardPage() {
                  <Link
                    key={client.id}
                    to={`/clients/${client.id}`}
-                    className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 transition-colors"
+                    className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
                  >
-                    <div className="w-9 h-9 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
+                    <div className="w-9 h-9 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
                      {client.firstName[0]}{client.lastName[0]}
                    </div>
                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-slate-900 truncate">
+                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
                        {client.firstName} {client.lastName}
                      </p>
-                      <p className="text-xs text-slate-500 truncate">
+                      <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
                        {client.company || client.email || 'No details'}
                      </p>
                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        togglePin(client.id);
+                      }}
+                      className="p-1 rounded text-slate-300 hover:text-amber-500 transition-colors"
+                      title={isPinned(client.id) ? 'Unpin' : 'Pin to dashboard'}
+                    >
+                      <Star className={`w-4 h-4 ${isPinned(client.id) ? 'text-amber-500 fill-amber-500' : ''}`} />
+                    </button>
                  </Link>
                ))
            )}
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -28,41 +28,41 @@ export default function LoginPage() {
  };

  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 flex items-center justify-center p-4">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        {/* Logo */}
        <div className="text-center mb-8">
          <div className="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-2xl mb-4">
            <Network className="w-8 h-8 text-white" />
          </div>
-          <h1 className="text-2xl font-bold text-slate-900">NetworkCRM</h1>
-          <p className="text-slate-500 mt-1">Sign in to manage your network</p>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">NetworkCRM</h1>
+          <p className="text-slate-500 dark:text-slate-400 mt-1">Sign in to manage your network</p>
        </div>

        {/* Card */}
-        <div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
+        <div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
          <form onSubmit={handleSubmit} className="space-y-5">
            {error && (
-              <div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
+              <div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm rounded-lg">
                {error}
              </div>
            )}

            <div>
-              <label className="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
-                className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
+                className="w-full px-3.5 py-2.5 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
                placeholder="you@example.com"
              />
            </div>

            <div>
              <div className="flex items-center justify-between mb-1.5">
-                <label className="block text-sm font-medium text-slate-700">Password</label>
+                <label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Password</label>
                <Link
                  to="/forgot-password"
                  className="text-xs text-blue-600 hover:text-blue-700"
@@ -76,7 +76,7 @@ export default function LoginPage() {
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
-                  className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
+                  className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
                  placeholder="••••••••"
                />
                <button