diff --git a/app/globals.css b/app/globals.css
index f8aafbe..442415b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -109,7 +109,7 @@
   }
 }
 
-:root {
+:root, .dark {
   /* CORPORATE DARK THEME (The Standard) */
   --background: #0a0a0f;
   --foreground: #ffffff;
diff --git a/app/layout.tsx b/app/layout.tsx
index b70eeee..3b3d5e8 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -51,10 +51,32 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className="dark" suppressHydrationWarning>
       <head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="preconnect" href="https://kit.pivoine.art" />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var theme = localStorage.getItem('theme');
+                  var isLanding = window.location.pathname === '/';
+                  if (isLanding) {
+                    document.documentElement.classList.add('dark');
+                    document.documentElement.classList.remove('light');
+                  } else if (theme === 'light' || (!theme && window.matchMedia('(prefers-color-scheme: light)').matches)) {
+                    document.documentElement.classList.add('light');
+                    document.documentElement.classList.remove('dark');
+                  } else {
+                    document.documentElement.classList.add('dark');
+                    document.documentElement.classList.remove('light');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
       </head>
       <body className="antialiased">
         {children}
diff --git a/app/page.tsx b/app/page.tsx
index 69b9927..dde5ab2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useEffect } from 'react';
 import AnimatedBackground from '@/components/AnimatedBackground';
 import Hero from '@/components/Hero';
 import Stats from '@/components/Stats';
@@ -6,8 +9,14 @@ import Footer from '@/components/Footer';
 import BackToTop from '@/components/BackToTop';
 
 export default function Home() {
+  useEffect(() => {
+    // Force dark mode on html element for the landing page
+    document.documentElement.classList.remove('light');
+    document.documentElement.classList.add('dark');
+  }, []);
+
   return (
-    <main className="relative min-h-screen">
+    <main className="relative min-h-screen dark text-foreground">
       <AnimatedBackground />
       <BackToTop />
       <Hero />
diff --git a/components/layout/AppShell.tsx b/components/layout/AppShell.tsx
index ce62646..35df75d 100644
--- a/components/layout/AppShell.tsx
+++ b/components/layout/AppShell.tsx
@@ -13,7 +13,7 @@ interface AppShellProps {
 export function AppShell({ children }: AppShellProps) {
   return (
     <SidebarProvider>
-      <div className="flex min-h-screen bg-background text-foreground relative">
+      <div className="flex h-screen overflow-hidden bg-background text-foreground relative">
         <AnimatedBackground />
         <AppSidebar />
         <div className="flex-1 flex flex-col min-w-0 relative z-10">
diff --git a/components/layout/AppSidebar.tsx b/components/layout/AppSidebar.tsx
index 011ab51..8a87dd9 100644
--- a/components/layout/AppSidebar.tsx
+++ b/components/layout/AppSidebar.tsx
@@ -103,7 +103,7 @@ export function AppSidebar() {
       )}
 
       <aside className={cn(
-        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative",
+        "fixed inset-y-0 left-0 z-50 flex flex-col border-r border-white/5 bg-background/40 backdrop-blur-2xl transition-all duration-300 ease-in-out lg:relative lg:h-full",
         isOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0",
         isCollapsed ? "lg:w-20" : "w-64"
       )}>
diff --git a/components/providers/ThemeProvider.tsx b/components/providers/ThemeProvider.tsx
index b51a361..7909c43 100644
--- a/components/providers/ThemeProvider.tsx
+++ b/components/providers/ThemeProvider.tsx
@@ -15,16 +15,21 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   const [theme, setTheme] = useState<Theme>('dark');
   const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
+  const [mounted, setMounted] = useState(false);
 
+  // Load theme from localStorage on mount
   useEffect(() => {
-    // Load theme from localStorage
     const stored = localStorage.getItem('theme') as Theme | null;
     if (stored) {
       setTheme(stored);
     }
+    setMounted(true);
   }, []);
 
+  // Apply theme to document element and save to localStorage
   useEffect(() => {
+    if (!mounted) return;
+
     const root = window.document.documentElement;
 
     // Remove previous theme classes
@@ -43,10 +48,12 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     // Save to localStorage
     localStorage.setItem('theme', theme);
-  }, [theme]);
+  }, [theme, mounted]);
 
   // Listen for system theme changes
   useEffect(() => {
+    if (!mounted) return;
+
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 
     const handleChange = () => {
@@ -60,7 +67,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
 
     mediaQuery.addEventListener('change', handleChange);
     return () => mediaQuery.removeEventListener('change', handleChange);
-  }, [theme]);
+  }, [theme, mounted]);
 
   return (
     <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
diff --git a/components/ui/KeyboardShortcutsHelp.tsx b/components/ui/KeyboardShortcutsHelp.tsx
deleted file mode 100644
index ed724df..0000000
--- a/components/ui/KeyboardShortcutsHelp.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Card } from './Card';
-import { Button } from './Button';
-import { X, Keyboard } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
-
-export interface Shortcut {
-  key: string;
-  description: string;
-  modifier?: 'ctrl' | 'shift';
-}
-
-const shortcuts: Shortcut[] = [
-  { key: '/', description: 'Focus font search' },
-  { key: 'Esc', description: 'Clear search / Close dialog' },
-  { key: 'D', description: 'Toggle dark/light mode', modifier: 'ctrl' },
-  { key: '?', description: 'Show this help dialog', modifier: 'shift' },
-];
-
-export function KeyboardShortcutsHelp() {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === '?' && e.shiftKey) {
-        e.preventDefault();
-        setIsOpen(true);
-      }
-      if (e.key === 'Escape' && isOpen) {
-        setIsOpen(false);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen]);
-
-  if (!isOpen) {
-    return (
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={() => setIsOpen(true)}
-        title="Keyboard shortcuts (Shift + ?)"
-        className="fixed bottom-4 right-4"
-      >
-        <Keyboard className="h-4 w-4" />
-      </Button>
-    );
-  }
-
-  return (
-    <div className="fixed inset-0 bg-background/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
-      <Card className="max-w-md w-full">
-        <div className="p-6">
-          <div className="flex items-center justify-between mb-4">
-            <h2 className="text-lg font-semibold flex items-center gap-2">
-              <Keyboard className="h-5 w-5" />
-              Keyboard Shortcuts
-            </h2>
-            <Button variant="ghost" size="icon" onClick={() => setIsOpen(false)}>
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-
-          <div className="space-y-3">
-            <div>
-              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Navigation</h3>
-              {shortcuts.map((shortcut, i) => (
-                <div key={i} className="flex items-center justify-between py-2 border-b last:border-0">
-                  <span className="text-sm text-muted-foreground">{shortcut.description}</span>
-                  <div className="flex gap-1">
-                    {shortcut.modifier && (
-                      <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
-                        {shortcut.modifier === 'ctrl' ? '⌘/Ctrl' : 'Shift'}
-                      </kbd>
-                    )}
-                    <kbd className="px-2 py-1 text-xs font-semibold bg-muted rounded">
-                      {shortcut.key}
-                    </kbd>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div>
-              <h3 className="text-xs font-semibold text-muted-foreground uppercase mb-2">Tips</h3>
-              <ul className="text-xs text-muted-foreground space-y-1">
-                <li>• Click the Shuffle button for random fonts</li>
-                <li>• Use the heart icon to favorite fonts</li>
-                <li>• Filter by All, Favorites, or Recent</li>
-                <li>• Text alignment and size controls in Preview</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </Card>
-    </div>
-  );
-}
diff --git a/components/ui/Separator.tsx b/components/ui/Separator.tsx
deleted file mode 100644
index 643a6dc..0000000
--- a/components/ui/Separator.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { cn } from '@/lib/utils/cn';
-
-const Separator = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    orientation?: 'horizontal' | 'vertical';
-    decorative?: boolean;
-  }
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <div
-      ref={ref}
-      role={decorative ? undefined : 'separator'}
-      aria-orientation={decorative ? undefined : orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-Separator.displayName = 'Separator';
-
-export { Separator };
diff --git a/components/units/converter/ConversionHistory.tsx b/components/units/converter/ConversionHistory.tsx
index d636ba9..0f61f43 100644
--- a/components/units/converter/ConversionHistory.tsx
+++ b/components/units/converter/ConversionHistory.tsx
@@ -9,7 +9,7 @@ import {
   clearHistory,
   type ConversionRecord,
 } from '@/lib/units/storage';
-import { getRelativeTime, formatNumber } from '@/lib/units/utils';
+import { getRelativeTime, formatNumber } from '@/lib/utils';
 import { formatMeasureName } from '@/lib/units/units';
 
 interface ConversionHistoryProps {
diff --git a/components/units/converter/MainConverter.tsx b/components/units/converter/MainConverter.tsx
index 9ac3fd2..419d25b 100644
--- a/components/units/converter/MainConverter.tsx
+++ b/components/units/converter/MainConverter.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/Button';
 import SearchUnits from './SearchUnits';
 import ConversionHistory from './ConversionHistory';
 import VisualComparison from './VisualComparison';
-import CommandPalette from '@/components/ui/CommandPalette';
+import CommandPalette from '@/components/units/ui/CommandPalette';
 import {
   getAllMeasures,
   getUnitsForMeasure,
@@ -20,7 +20,7 @@ import {
   type Measure,
   type ConversionResult,
 } from '@/lib/units/units';
-import { parseNumberInput, formatNumber, cn } from '@/lib/units/utils';
+import { parseNumberInput, formatNumber, cn } from '@/lib/utils';
 import { saveToHistory, getFavorites, toggleFavorite } from '@/lib/units/storage';
 
 export default function MainConverter() {
diff --git a/components/units/converter/SearchUnits.tsx b/components/units/converter/SearchUnits.tsx
index f730d7d..1f19efe 100644
--- a/components/units/converter/SearchUnits.tsx
+++ b/components/units/converter/SearchUnits.tsx
@@ -15,7 +15,7 @@ import {
   type Measure,
   type UnitInfo,
 } from '@/lib/units/units';
-import { cn } from '@/lib/units/utils';
+import { cn } from '@/lib/utils';
 
 interface SearchResult {
   unitInfo: UnitInfo;
diff --git a/components/units/converter/VisualComparison.tsx b/components/units/converter/VisualComparison.tsx
index 79483c4..b887b0e 100644
--- a/components/units/converter/VisualComparison.tsx
+++ b/components/units/converter/VisualComparison.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState, useRef, useCallback, useEffect } from 'react';
 import { type ConversionResult } from '@/lib/units/units';
-import { formatNumber, cn } from '@/lib/units/utils';
+import { formatNumber, cn } from '@/lib/utils';
 
 interface VisualComparisonProps {
   conversions: ConversionResult[];
diff --git a/components/ui/CommandPalette.tsx b/components/units/ui/CommandPalette.tsx
similarity index 99%
rename from components/ui/CommandPalette.tsx
rename to components/units/ui/CommandPalette.tsx
index ab2515b..e05f3c7 100644
--- a/components/ui/CommandPalette.tsx
+++ b/components/units/ui/CommandPalette.tsx
@@ -11,7 +11,7 @@ import {
   type Measure,
 } from '@/lib/units/units';
 import { getHistory, getFavorites } from '@/lib/units/storage';
-import { cn } from '@/lib/units/utils';
+import { cn } from '@/lib/utils';
 
 interface CommandPaletteProps {
   onSelectMeasure: (measure: Measure) => void;
diff --git a/lib/pastel/utils/cn.ts b/lib/pastel/utils/cn.ts
deleted file mode 100644
index 2819a83..0000000
--- a/lib/pastel/utils/cn.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
diff --git a/lib/units/utils.ts b/lib/utils/format.ts
similarity index 53%
rename from lib/units/utils.ts
rename to lib/utils/format.ts
index 7b0a1ad..ec3141d 100644
--- a/lib/units/utils.ts
+++ b/lib/utils/format.ts
@@ -1,17 +1,3 @@
-/**
- * Utility functions for the application
- */
-
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-/**
- * Merge Tailwind CSS classes with clsx
- */
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
 /**
  * Format a number for display with proper precision
  */
@@ -53,26 +39,6 @@ export function formatNumber(
   return formatted;
 }
 
-/**
- * Debounce function for input handling
- */
-export function debounce<T extends (...args: any[]) => any>(
-  func: T,
-  wait: number
-): (...args: Parameters<T>) => void {
-  let timeout: NodeJS.Timeout | null = null;
-
-  return function executedFunction(...args: Parameters<T>) {
-    const later = () => {
-      timeout = null;
-      func(...args);
-    };
-
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
 /**
  * Parse a number input string
  */
@@ -86,21 +52,3 @@ export function parseNumberInput(input: string): number | null {
 
   return isNaN(parsed) ? null : parsed;
 }
-
-/**
- * Get relative time from timestamp
- */
-export function getRelativeTime(timestamp: number): string {
-  const now = Date.now();
-  const diff = now - timestamp;
-
-  const seconds = Math.floor(diff / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-
-  if (days > 0) return `${days}d ago`;
-  if (hours > 0) return `${hours}h ago`;
-  if (minutes > 0) return `${minutes}m ago`;
-  return 'just now';
-}
diff --git a/lib/utils/index.ts b/lib/utils/index.ts
index c1313f7..3eae037 100644
--- a/lib/utils/index.ts
+++ b/lib/utils/index.ts
@@ -2,3 +2,5 @@ export * from './cn';
 export * from './debounce';
 export * from './urlSharing';
 export * from './animations';
+export * from './format';
+export * from './time';
diff --git a/lib/utils/time.ts b/lib/utils/time.ts
new file mode 100644
index 0000000..ee423c1
--- /dev/null
+++ b/lib/utils/time.ts
@@ -0,0 +1,17 @@
+/**
+ * Get relative time from timestamp
+ */
+export function getRelativeTime(timestamp: number): string {
+  const now = Date.now();
+  const diff = now - timestamp;
+
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ago`;
+  if (hours > 0) return `${hours}h ago`;
+  if (minutes > 0) return `${minutes}m ago`;
+  return 'just now';
+}
