dark mode

frontend/src/pages/LandingPage.css

@@ -6,6 +6,13 @@
   background: hsl(var(--background));
 }
 
+.landing-theme-toggle {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 20;
+}
+
 /* ========================================
    Hero Section
    ======================================== */
@@ -50,6 +57,12 @@
   margin-bottom: 1.5rem;
 }
 
+.hero-logo-icon {
+  width: 28px;
+  height: 28px;
+  image-rendering: pixelated;
+}
+
 .hero-brand {
   font-size: 0.95rem;
   font-weight: 700;

frontend/src/pages/LandingPage.tsx

@@ -1,5 +1,7 @@
 import FloatingGem from '../components/PixelSprites/FloatingGem';
 import PixelIcon from '../components/PixelIcon/PixelIcon';
+import DocNestLogo from '../assets/docnest/docnest-icon-128.png';
+import ThemeToggle from '../components/ThemeToggle';
 import { API_BASE_URL } from '../config';
 import './LandingPage.css';
 
@@ -14,6 +16,9 @@ function LandingPage() {
 
   return (
     <div className="landing-page">
+      <div className="landing-theme-toggle">
+        <ThemeToggle />
+      </div>
       {/* Hero Section */}
       <section className="landing-hero">
         <div className="hero-gem hero-gem-one">
@@ -26,7 +31,11 @@ function LandingPage() {
         <div className="hero-grid">
           <div className="hero-content">
             <div className="hero-logo">
-              <PixelIcon name="gem" size={28} color="hsl(var(--brand-teal))" />
+              <img
+                src={DocNestLogo}
+                alt="DocNest"
+                className="hero-logo-icon"
+              />
               <span className="hero-brand">DocNest</span>
             </div>
 

frontend/src/pages/LoginPage.css

@@ -5,6 +5,7 @@
   justify-content: center;
   background: var(--gradient-hero);
   padding: 24px;
+  position: relative;
 }
 
 .login-container {
@@ -18,11 +19,32 @@
   text-align: center;
 }
 
+.login-theme-toggle {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  z-index: 20;
+}
+
+.login-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.login-logo {
+  width: 32px;
+  height: 32px;
+  image-rendering: pixelated;
+}
+
 .login-title {
   font-size: 32px;
   font-weight: 700;
   color: hsl(var(--text-primary));
-  margin: 0 0 8px 0;
+  margin: 0;
 }
 
 .login-subtitle {

frontend/src/pages/LoginPage.tsx

@@ -2,6 +2,8 @@ import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../contexts/AuthContext';
 import { API_BASE_URL } from '../config';
+import DocNestLogo from '../assets/docnest/docnest-icon-128.png';
+import ThemeToggle from '../components/ThemeToggle';
 import './LoginPage.css';
 
 function LoginPage() {
@@ -34,8 +36,14 @@ function LoginPage() {
 
   return (
     <div className="login-page">
+      <div className="login-theme-toggle">
+        <ThemeToggle />
+      </div>
       <div className="login-container">
-        <h1 className="login-title">DocNest</h1>
+        <div className="login-brand">
+          <img src={DocNestLogo} alt="DocNest" className="login-logo" />
+          <h1 className="login-title">DocNest</h1>
+        </div>
         <p className="login-subtitle">Collaborate in real time with your team</p>
 
         <div className="login-buttons">