diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 874a384..26a9717 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -16,6 +16,7 @@ import {
 import { useState } from 'react'
 import { ConnectWallet } from '@/components/wallet/ConnectWallet'
 import { WalletInfo } from '@/components/wallet/WalletInfo'
+import { DarkModeToggle } from '@/components/common/DarkModeToggle'
 import { NetworkBadge } from '@/components/ui/Badge'
 import { useWallet } from '@/hooks/useWallet'
 import { cn } from '@/lib/utils'
@@ -58,8 +59,9 @@ export function Navbar() {
         {/* Spacer */}
         <div className="flex-1" />
 
-        {/* Right side: network + address only — the Sidebar owns navigation */}
+        {/* Right side: network + theme toggle + address — the Sidebar owns navigation */}
         <div className="hidden lg:flex items-center gap-3">
+          <DarkModeToggle />
           {isConnected && <NetworkBadge network={network} />}
           {isConnected && publicKey ? <WalletInfo /> : <ConnectWallet />}
         </div>
@@ -95,7 +97,11 @@ export function Navbar() {
               {label}
             </NavLink>
           ))}
-          <div className="pt-3 border-t border-navy-700/50">
+          <div className="pt-3 border-t border-navy-700/50 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-slate-400">Theme:</span>
+              <DarkModeToggle />
+            </div>
             {isConnected && publicKey ? <WalletInfo /> : <ConnectWallet fullWidth />}
           </div>
         </div>
diff --git a/src/pages/Settings.test.tsx b/src/pages/Settings.test.tsx
new file mode 100644
index 0000000..ed8ab26
--- /dev/null
+++ b/src/pages/Settings.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import Settings from '@/pages/Settings'
+
+// Mock WalletContext
+vi.mock('@/hooks/useWallet', () => ({
+  useWallet: () => ({
+    isConnected: false,
+    publicKey: null,
+    network: 'testnet',
+    account: null,
+    xlmBalance: null,
+    setNetwork: vi.fn(),
+    disconnect: vi.fn(),
+  }),
+}))
+
+describe('Settings page Appearance section', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.documentElement.className = ''
+  })
+
+  it('renders theme selector buttons (Light, Dark, System)', () => {
+    render(
+      <MemoryRouter>
+        <Settings />
+      </MemoryRouter>
+    )
+
+    expect(screen.getByText('Appearance & Display')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Light/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Dark/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /System/i })).toBeInTheDocument()
+  })
+
+  it('changes theme to dark when Dark button is clicked', () => {
+    render(
+      <MemoryRouter>
+        <Settings />
+      </MemoryRouter>
+    )
+
+    const darkBtn = screen.getByRole('button', { name: /Dark/i })
+    fireEvent.click(darkBtn)
+
+    expect(document.documentElement.classList.contains('dark')).toBe(true)
+    expect(localStorage.getItem('ss-theme')).toBe(JSON.stringify('dark'))
+  })
+
+  it('changes theme to light when Light button is clicked', () => {
+    document.documentElement.classList.add('dark')
+    render(
+      <MemoryRouter>
+        <Settings />
+      </MemoryRouter>
+    )
+
+    const lightBtn = screen.getByRole('button', { name: /Light/i })
+    fireEvent.click(lightBtn)
+
+    expect(document.documentElement.classList.contains('dark')).toBe(false)
+    expect(localStorage.getItem('ss-theme')).toBe(JSON.stringify('light'))
+  })
+})
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index ee3d817..9464540 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -10,6 +10,9 @@ import {
   Copy,
   Check,
   AlertTriangle,
+  Sun,
+  Moon,
+  Laptop,
 } from 'lucide-react'
 import { Card, CardHeader, CardTitle } from '@/components/ui/Card'
 import { Button } from '@/components/ui/Button'
@@ -17,6 +20,7 @@ import { Input, Select } from '@/components/ui/Input'
 import { NetworkBadge } from '@/components/ui/Badge'
 import { ConnectWallet } from '@/components/wallet/ConnectWallet'
 import { useWallet } from '@/hooks/useWallet'
+import { useTheme } from '@/hooks/useTheme'
 import { truncateAddress, formatXLM } from '@/lib/stellar'
 import { copyToClipboard } from '@/lib/utils'
 import type { Network, AppSettings } from '@/types'
@@ -72,6 +76,7 @@ function SettingsSection({
 export default function Settings() {
   const { isConnected, publicKey, network, account, xlmBalance, setNetwork, disconnect } =
     useWallet()
+  const { theme, setTheme } = useTheme()
   const { settings, save, reset } = useSettings()
   const [localSettings, setLocalSettings] = useState(settings)
   const [saved, setSaved] = useState(false)
@@ -289,26 +294,57 @@ export default function Settings() {
         />
       </SettingsSection>
 
-      {/* Notifications (UI only) */}
-      <SettingsSection title="Display" icon={<Bell size={17} />}>
-        <label className="flex items-center justify-between cursor-pointer">
+      {/* Display / Appearance */}
+      <SettingsSection title="Appearance & Display" icon={<Bell size={17} />}>
+        <div className="space-y-4">
           <div>
-            <p className="text-sm font-medium text-slate-200">Show testnet banner</p>
-            <p className="text-xs text-slate-500">
-              Display a warning banner when using testnet
-            </p>
+            <label className="text-xs font-semibold uppercase tracking-wider text-slate-400 block mb-2">
+              Theme
+            </label>
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                { id: 'light', label: 'Light', icon: Sun },
+                { id: 'dark', label: 'Dark', icon: Moon },
+                { id: 'system', label: 'System', icon: Laptop },
+              ].map(({ id, label, icon: Icon }) => (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => setTheme(id as 'light' | 'dark' | 'system')}
+                  className={`flex items-center justify-center gap-2 py-2.5 px-3 rounded-xl border text-sm font-medium transition-all ${
+                    theme === id
+                      ? 'border-stellar-500 bg-stellar-500/15 text-white shadow-inner-glow'
+                      : 'border-navy-600/50 bg-navy-900/40 text-slate-400 hover:text-slate-200 hover:border-navy-500'
+                  }`}
+                >
+                  <Icon size={15} />
+                  <span>{label}</span>
+                </button>
+              ))}
+            </div>
           </div>
-          <div className="relative">
-            <input
-              type="checkbox"
-              checked={localSettings.showTestnetWarning}
-              onChange={(e) => update('showTestnetWarning', e.target.checked)}
-              className="sr-only peer"
-            />
-            <div className="w-9 h-5 bg-navy-700 border border-navy-600 rounded-full peer-checked:bg-stellar-600 peer-checked:border-stellar-500 transition-all" />
-            <div className="absolute top-0.5 left-0.5 w-4 h-4 bg-slate-400 rounded-full peer-checked:translate-x-4 peer-checked:bg-white transition-all" />
+
+          <div className="pt-2 border-t border-navy-700/40">
+            <label className="flex items-center justify-between cursor-pointer">
+              <div>
+                <p className="text-sm font-medium text-slate-200">Show testnet banner</p>
+                <p className="text-xs text-slate-500">
+                  Display a warning banner when using testnet
+                </p>
+              </div>
+              <div className="relative">
+                <input
+                  type="checkbox"
+                  checked={localSettings.showTestnetWarning}
+                  onChange={(e) => update('showTestnetWarning', e.target.checked)}
+                  className="sr-only peer"
+                />
+                <div className="w-9 h-5 bg-navy-700 border border-navy-600 rounded-full peer-checked:bg-stellar-600 peer-checked:border-stellar-500 transition-all" />
+                <div className="absolute top-0.5 left-0.5 w-4 h-4 bg-slate-400 rounded-full peer-checked:translate-x-4 peer-checked:bg-white transition-all" />
+              </div>
+            </label>
           </div>
-        </label>
+        </div>
       </SettingsSection>
 
       {/* Save button (bottom) */}