diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 9421b90..5fc672b 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -38,6 +38,7 @@ import { FAB } from '@/components/FAB';
 import { useActiveSection } from '@/hooks/useActiveSection';
 import { NAV_TREE_VERSION } from '@/nav/tree';
 import { __ } from '@/lib/i18n';
+import { ThemeToggle } from '@/components/ThemeToggle';
 
 function useFullscreen() {
   const [on, setOn] = useState<boolean>(() => {
@@ -362,6 +363,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
             </button>
           </>
         )}
+        <ThemeToggle />
         {showToggle && (
           <button
             onClick={onFullscreen}
diff --git a/admin-spa/src/components/ThemeProvider.tsx b/admin-spa/src/components/ThemeProvider.tsx
new file mode 100644
index 0000000..d73aeeb
--- /dev/null
+++ b/admin-spa/src/components/ThemeProvider.tsx
@@ -0,0 +1,78 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  actualTheme: 'light' | 'dark';
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const stored = localStorage.getItem('woonoow_theme');
+    return (stored as Theme) || 'system';
+  });
+
+  const [actualTheme, setActualTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    // Remove previous theme classes
+    root.classList.remove('light', 'dark');
+
+    let effectiveTheme: 'light' | 'dark';
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+      effectiveTheme = systemTheme;
+    } else {
+      effectiveTheme = theme;
+    }
+
+    root.classList.add(effectiveTheme);
+    setActualTheme(effectiveTheme);
+  }, [theme]);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    if (theme !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    
+    const handleChange = () => {
+      const root = window.document.documentElement;
+      root.classList.remove('light', 'dark');
+      const systemTheme = mediaQuery.matches ? 'dark' : 'light';
+      root.classList.add(systemTheme);
+      setActualTheme(systemTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [theme]);
+
+  const setTheme = (newTheme: Theme) => {
+    localStorage.setItem('woonoow_theme', newTheme);
+    setThemeState(newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, actualTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}
diff --git a/admin-spa/src/components/ThemeToggle.tsx b/admin-spa/src/components/ThemeToggle.tsx
new file mode 100644
index 0000000..e5d868a
--- /dev/null
+++ b/admin-spa/src/components/ThemeToggle.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Moon, Sun, Monitor } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useTheme } from './ThemeProvider';
+
+export function ThemeToggle() {
+  const { theme, setTheme, actualTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9">
+          {actualTheme === 'dark' ? (
+            <Moon className="h-4 w-4" />
+          ) : (
+            <Sun className="h-4 w-4" />
+          )}
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          <Sun className="mr-2 h-4 w-4" />
+          <span>Light</span>
+          {theme === 'light' && <span className="ml-auto">✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          <Moon className="mr-2 h-4 w-4" />
+          <span>Dark</span>
+          {theme === 'dark' && <span className="ml-auto">✓</span>}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          <Monitor className="mr-2 h-4 w-4" />
+          <span>System</span>
+          {theme === 'system' && <span className="ml-auto">✓</span>}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/admin-spa/src/components/ui/image-upload.tsx b/admin-spa/src/components/ui/image-upload.tsx
index 48caa12..c5271a2 100644
--- a/admin-spa/src/components/ui/image-upload.tsx
+++ b/admin-spa/src/components/ui/image-upload.tsx
@@ -74,24 +74,31 @@ export function ImageUpload({
       const formData = new FormData();
       formData.append('file', file);
 
+      // Get nonce from REST API settings
+      const nonce = (window as any).wpApiSettings?.nonce || 
+                    (window as any).WooNooW?.nonce ||
+                    document.querySelector('meta[name="wp-rest-nonce"]')?.getAttribute('content') || '';
+
       // Upload to WordPress media library
       const response = await fetch('/wp-json/wp/v2/media', {
         method: 'POST',
         headers: {
-          'X-WP-Nonce': (window as any).wpApiSettings?.nonce || '',
+          'X-WP-Nonce': nonce,
         },
+        credentials: 'same-origin',
         body: formData,
       });
 
       if (!response.ok) {
-        throw new Error('Upload failed');
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.message || 'Upload failed');
       }
 
       const data = await response.json();
       onChange(data.source_url);
     } catch (error) {
       console.error('Upload error:', error);
-      alert('Failed to upload image');
+      alert(error instanceof Error ? error.message : 'Failed to upload image');
     } finally {
       setIsUploading(false);
     }
diff --git a/admin-spa/src/main.tsx b/admin-spa/src/main.tsx
index aa8fa55..4701a33 100644
--- a/admin-spa/src/main.tsx
+++ b/admin-spa/src/main.tsx
@@ -2,10 +2,15 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { ThemeProvider } from './components/ThemeProvider';
 
 const el = document.getElementById('woonoow-admin-app');
 if (el) {
-  createRoot(el).render(<App />);
+  createRoot(el).render(
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  );
 } else {
   console.warn('[WooNooW] Root element #woonoow-admin-app not found.');
 }
\ No newline at end of file
diff --git a/admin-spa/src/routes/Settings/Store.tsx b/admin-spa/src/routes/Settings/Store.tsx
index fdca450..0363fef 100644
--- a/admin-spa/src/routes/Settings/Store.tsx
+++ b/admin-spa/src/routes/Settings/Store.tsx
@@ -325,7 +325,7 @@ export default function StoreDetailsPage() {
         title="Brand"
         description="Logo, icon, and colors for your store"
       >
-        <SettingsSection label="Store logo" description="Recommended: 200x60px PNG with transparent background">
+        <SettingsSection label="Store logo" description="Recommended size: 200x60px (or similar ratio). PNG with transparent background works best.">
           <ImageUpload
             value={settings.storeLogo}
             onChange={(url) => updateSetting('storeLogo', url)}
@@ -334,7 +334,7 @@ export default function StoreDetailsPage() {
           />
         </SettingsSection>
 
-        <SettingsSection label="Store icon" description="Favicon for browser tabs (32x32px)">
+        <SettingsSection label="Store icon" description="Favicon for browser tabs. Recommended: 32x32px or larger square image.">
           <ImageUpload
             value={settings.storeIcon}
             onChange={(url) => updateSetting('storeIcon', url)}
diff --git a/includes/Branding.php b/includes/Branding.php
index d280f93..b1ece54 100644
--- a/includes/Branding.php
+++ b/includes/Branding.php
@@ -21,12 +21,8 @@ class Branding {
         // Apply favicon
         add_action('wp_head', [__CLASS__, 'inject_favicon']);
         add_action('admin_head', [__CLASS__, 'inject_favicon']);
-        add_action('login_head', [__CLASS__, 'inject_favicon']);
         
-        // Customize login page
-        add_action('login_enqueue_scripts', [__CLASS__, 'customize_login_page']);
-        add_filter('login_headerurl', [__CLASS__, 'login_logo_url']);
-        add_filter('login_headertext', [__CLASS__, 'login_logo_title']);
+        // Note: Login page branding removed - WooNooW uses standalone SPA login
     }
     
     /**
@@ -62,113 +58,6 @@ class Branding {
         }
     }
     
-    /**
-     * Customize login page
-     */
-    public static function customize_login_page() {
-        $logo = get_option('woonoow_store_logo', '');
-        $store_name = get_option('blogname', 'WooNooW');
-        $tagline = get_option('blogdescription', '');
-        $primary = get_option('woonoow_primary_color', '#3b82f6');
-        
-        ?>
-        <style type="text/css">
-            /* Brand colors */
-            :root {
-                --woonoow-primary: <?php echo esc_attr($primary); ?>;
-            }
-            
-            /* Logo */
-            #login h1 a {
-                <?php if (!empty($logo)): ?>
-                background-image: url(<?php echo esc_url($logo); ?>);
-                background-size: contain;
-                background-position: center;
-                width: 100%;
-                height: 80px;
-                <?php else: ?>
-                /* Text logo fallback */
-                background: none !important;
-                width: auto !important;
-                height: auto !important;
-                font-size: 32px;
-                font-weight: 700;
-                color: var(--woonoow-primary);
-                text-indent: 0 !important;
-                <?php endif; ?>
-            }
-            
-            <?php if (empty($logo)): ?>
-            #login h1 a::after {
-                content: '<?php echo esc_js($store_name); ?>';
-                display: block;
-            }
-            <?php endif; ?>
-            
-            /* Tagline */
-            <?php if (!empty($tagline)): ?>
-            #login h1::after {
-                content: '<?php echo esc_js($tagline); ?>';
-                display: block;
-                text-align: center;
-                margin-top: 10px;
-                font-size: 14px;
-                color: #666;
-                font-weight: normal;
-            }
-            <?php endif; ?>
-            
-            /* Primary button color */
-            .wp-core-ui .button-primary {
-                background: var(--woonoow-primary);
-                border-color: var(--woonoow-primary);
-                box-shadow: none;
-                text-shadow: none;
-            }
-            
-            .wp-core-ui .button-primary:hover,
-            .wp-core-ui .button-primary:focus {
-                background: var(--woonoow-primary);
-                border-color: var(--woonoow-primary);
-                opacity: 0.9;
-            }
-            
-            /* Link color */
-            #login a {
-                color: var(--woonoow-primary);
-            }
-            
-            #login a:hover,
-            #login a:focus {
-                color: var(--woonoow-primary);
-                opacity: 0.8;
-            }
-            
-            /* Input focus */
-            input[type="text"]:focus,
-            input[type="password"]:focus,
-            input[type="email"]:focus {
-                border-color: var(--woonoow-primary);
-                box-shadow: 0 0 0 1px var(--woonoow-primary);
-            }
-        </style>
-        <?php
-    }
-    
-    /**
-     * Change login logo URL
-     */
-    public static function login_logo_url() {
-        return home_url();
-    }
-    
-    /**
-     * Change login logo title
-     */
-    public static function login_logo_title() {
-        return get_option('blogname', 'WooNooW');
-    }
-    
     /**
      * Get logo URL or fallback to text
      *