diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ce7963c..24fd6fe 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -23,6 +23,8 @@ import type {
   HexagonPropertiesResponse,
 } from './types';
 
+type Theme = 'light' | 'dark';
+
 const DEBOUNCE_MS = 150;
 const URL_DEBOUNCE_MS = 300;
 
@@ -180,9 +182,13 @@ type Page = 'home' | 'dashboard' | 'data-sources';
 function Header({
   activePage,
   onPageChange,
+  theme,
+  onToggleTheme,
 }: {
   activePage: Page;
   onPageChange: (page: Page) => void;
+  theme: Theme;
+  onToggleTheme: () => void;
 }) {
   const [copied, setCopied] = useState(false);
 
@@ -240,7 +246,23 @@ function Header({
           </button>
         </nav>
       </div>
-      {activePage === 'dashboard' && (
+      <div className="flex items-center gap-2">
+        <button
+          onClick={onToggleTheme}
+          className="flex items-center justify-center w-8 h-8 rounded bg-navy-800 hover:bg-navy-700 transition-colors"
+          title={`Theme: ${theme}`}
+        >
+          {theme === 'light' ? (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+            </svg>
+          )}
+        </button>
+        {activePage === 'dashboard' && (
         <button
           onClick={handleShare}
           className="flex items-center gap-1.5 px-3 py-1.5 rounded bg-navy-800 hover:bg-navy-700 transition-colors text-sm"
@@ -271,7 +293,8 @@ function Header({
             </>
           )}
         </button>
-      )}
+        )}
+      </div>
     </header>
   );
 }
@@ -335,6 +358,28 @@ export default function App() {
   const [rightPaneTab, setRightPaneTab] = useState<'pois' | 'properties'>(urlState.tab || 'pois');
   const [activePage, setActivePage] = useState<Page>('home');
 
+  // Theme state — defaults to system preference on first visit
+  const [theme, setTheme] = useState<Theme>(() => {
+    const stored = localStorage.getItem('theme');
+    if (stored === 'light' || stored === 'dark') return stored;
+    return 'light';
+  });
+
+  // Sync dark class on <html> and persist to localStorage
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('theme', theme);
+  }, [theme]);
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
+  }, []);
+
   // Derive enabled features from filter keys
   const enabledFeatures = useMemo(() => new Set(Object.keys(filters)), [filters]);
 
@@ -704,9 +749,9 @@ export default function App() {
 
   return (
     <div className="h-screen flex flex-col">
-      <Header activePage={activePage} onPageChange={setActivePage} />
+      <Header activePage={activePage} onPageChange={setActivePage} theme={theme} onToggleTheme={toggleTheme} />
       {activePage === 'home' ? (
-        <HomePage onOpenDashboard={() => setActivePage('dashboard')} />
+        <HomePage onOpenDashboard={() => setActivePage('dashboard')} theme={theme} />
       ) : activePage === 'data-sources' ? (
         <DataSourcesPage />
       ) : (
@@ -742,22 +787,23 @@ export default function App() {
               selectedHexagonId={selectedHexagon?.h3 || null}
               onHexagonClick={handleHexagonClick}
               initialViewState={initialViewState}
+              theme={theme}
             />
             {loading && (
-              <div className="absolute top-4 right-4 bg-white px-3 py-1 rounded shadow">
+              <div className="absolute top-4 right-4 bg-white dark:bg-warm-800 dark:text-warm-200 px-3 py-1 rounded shadow">
                 Loading...
               </div>
             )}
             <DataSources onNavigate={() => setActivePage('data-sources')} />
           </div>
-          <div className="w-72 bg-white shadow-lg z-10 flex flex-col">
+          <div className="w-72 bg-white dark:bg-warm-900 shadow-lg z-10 flex flex-col">
             {/* Tab headers */}
-            <div className="flex border-b border-warm-200">
+            <div className="flex border-b border-warm-200 dark:border-warm-700">
               <button
                 className={`flex-1 p-3 ${
                   rightPaneTab === 'pois'
-                    ? 'border-b-2 border-teal-500 font-semibold'
-                    : 'text-warm-600'
+                    ? 'border-b-2 border-teal-500 font-semibold dark:text-warm-100'
+                    : 'text-warm-600 dark:text-warm-400'
                 }`}
                 onClick={() => setRightPaneTab('pois')}
               >
@@ -766,8 +812,8 @@ export default function App() {
               <button
                 className={`flex-1 p-3 ${
                   rightPaneTab === 'properties'
-                    ? 'border-b-2 border-teal-500 font-semibold'
-                    : 'text-warm-600'
+                    ? 'border-b-2 border-teal-500 font-semibold dark:text-warm-100'
+                    : 'text-warm-600 dark:text-warm-400'
                 }`}
                 onClick={() => setRightPaneTab('properties')}
               >
diff --git a/frontend/src/components/DataSources.tsx b/frontend/src/components/DataSources.tsx
index bd7c074..80cd48d 100644
--- a/frontend/src/components/DataSources.tsx
+++ b/frontend/src/components/DataSources.tsx
@@ -2,7 +2,7 @@ export default function DataSources({ onNavigate }: { onNavigate: () => void })
   return (
     <button
       onClick={onNavigate}
-      className="absolute bottom-2 right-2 bg-white/90 backdrop-blur-sm px-3 py-2 rounded shadow-lg text-xs text-teal-600 hover:text-teal-800 hover:underline font-semibold transition-colors"
+      className="absolute bottom-2 right-2 bg-white/90 dark:bg-warm-800/90 backdrop-blur-sm px-3 py-2 rounded shadow-lg text-xs text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 hover:underline font-semibold transition-colors"
     >
       Data Sources
     </button>
diff --git a/frontend/src/components/DataSourcesPage.tsx b/frontend/src/components/DataSourcesPage.tsx
index 67a533a..f86b18a 100644
--- a/frontend/src/components/DataSourcesPage.tsx
+++ b/frontend/src/components/DataSourcesPage.tsx
@@ -87,30 +87,30 @@ const DATA_SOURCES = [
 
 export default function DataSourcesPage() {
   return (
-    <div className="flex-1 overflow-y-auto bg-warm-50 flex flex-col">
+    <div className="flex-1 overflow-y-auto bg-warm-50 dark:bg-warm-900 flex flex-col">
       <div className="flex-1">
         <div className="max-w-5xl mx-auto px-6 py-8">
-          <h1 className="text-2xl font-bold text-warm-900 mb-2">Data Sources</h1>
-          <p className="text-warm-600 mb-6">
+          <h1 className="text-2xl font-bold text-warm-900 dark:text-warm-100 mb-2">Data Sources</h1>
+          <p className="text-warm-600 dark:text-warm-400 mb-6">
             This application combines {DATA_SOURCES.length} open datasets covering property prices,
             energy performance, transport, demographics, crime, environment, and more.
           </p>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
             {DATA_SOURCES.map((source) => (
-              <div key={source.name} className="bg-white rounded-lg border border-warm-200 p-5">
+              <div key={source.name} className="bg-white dark:bg-warm-800 rounded-lg border border-warm-200 dark:border-warm-700 p-5">
                 <div className="flex items-start justify-between gap-4 mb-2">
-                  <h2 className="text-lg font-semibold text-warm-900">{source.name}</h2>
-                  <span className="shrink-0 text-xs bg-warm-100 text-warm-600 px-2 py-1 rounded">
+                  <h2 className="text-lg font-semibold text-warm-900 dark:text-warm-100">{source.name}</h2>
+                  <span className="shrink-0 text-xs bg-warm-100 dark:bg-warm-700 text-warm-600 dark:text-warm-300 px-2 py-1 rounded">
                     {source.license}
                   </span>
                 </div>
-                <p className="text-sm text-warm-500 mb-2">Source: {source.origin}</p>
-                <p className="text-sm text-warm-700 mb-3">{source.use}</p>
+                <p className="text-sm text-warm-500 dark:text-warm-400 mb-2">Source: {source.origin}</p>
+                <p className="text-sm text-warm-700 dark:text-warm-300 mb-3">{source.use}</p>
                 <a
                   href={source.url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-sm text-teal-600 hover:text-teal-800 hover:underline break-all"
+                  className="text-sm text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300 hover:underline break-all"
                 >
                   {source.url}
                 </a>
diff --git a/frontend/src/components/Filters.tsx b/frontend/src/components/Filters.tsx
index 544f64c..203657d 100644
--- a/frontend/src/components/Filters.tsx
+++ b/frontend/src/components/Filters.tsx
@@ -66,22 +66,22 @@ function FilterDropdown({
   return (
     <div ref={ref} className="relative">
       <button
-        className="w-full p-2 border rounded text-sm bg-white text-left text-warm-500 hover:border-warm-400"
+        className="w-full p-2 border rounded text-sm bg-white dark:bg-warm-800 dark:border-warm-700 text-left text-warm-500 dark:text-warm-400 hover:border-warm-400"
         onClick={() => setOpen(!open)}
       >
         + Add filter...
       </button>
       {open && (
-        <div className="absolute z-50 mt-1 w-full bg-white border rounded shadow-lg max-h-80 overflow-y-auto">
+        <div className="absolute z-50 mt-1 w-full bg-white dark:bg-warm-800 border dark:border-warm-700 rounded shadow-lg max-h-80 overflow-y-auto">
           {grouped.map((group) => (
             <div key={group.name}>
-              <div className="px-3 py-1.5 text-xs font-bold text-warm-500 bg-warm-50 sticky top-0">
+              <div className="px-3 py-1.5 text-xs font-bold text-warm-500 bg-warm-50 dark:bg-warm-900 dark:text-warm-400 sticky top-0">
                 {group.name}
               </div>
               {group.features.map((f) => (
                 <button
                   key={f.name}
-                  className="w-full text-left px-3 py-1.5 text-sm hover:bg-teal-50 hover:text-teal-700"
+                  className="w-full text-left px-3 py-1.5 text-sm hover:bg-teal-50 dark:hover:bg-teal-900/30 hover:text-teal-700 dark:hover:text-teal-400 dark:text-warm-300"
                   onClick={() => {
                     onAddFilter(f.name);
                     setOpen(false);
@@ -126,8 +126,8 @@ export default memo(function Filters({
   const enabledFeatureList = features.filter((f) => enabledFeatures.has(f.name));
 
   return (
-    <div className="w-72 p-4 bg-white shadow-lg space-y-4 overflow-y-auto">
-      <div className="text-sm text-warm-500">Zoom: {zoom.toFixed(1)}</div>
+    <div className="w-72 p-4 bg-white dark:bg-warm-900 shadow-lg space-y-4 overflow-y-auto">
+      <div className="text-sm text-warm-500 dark:text-warm-400">Zoom: {zoom.toFixed(1)}</div>
 
       {/* Add filter dropdown */}
       {availableFeatures.length > 0 && (
@@ -145,7 +145,7 @@ export default memo(function Filters({
                 <Label className="text-xs">{feature.name}</Label>
                 <button
                   onClick={() => onRemoveFilter(feature.name)}
-                  className="text-warm-400 hover:text-warm-700 text-sm px-1"
+                  className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 text-sm px-1"
                   title="Remove filter"
                 >
                   x
@@ -153,13 +153,13 @@ export default memo(function Filters({
               </div>
               <div className="flex gap-2 text-xs mb-1">
                 <button
-                  className="text-teal-600 hover:underline"
+                  className="text-teal-600 dark:text-teal-400 hover:underline"
                   onClick={() => onFilterChange(feature.name, [...allValues])}
                 >
                   All
                 </button>
                 <button
-                  className="text-teal-600 hover:underline"
+                  className="text-teal-600 dark:text-teal-400 hover:underline"
                   onClick={() => onFilterChange(feature.name, [])}
                 >
                   None
@@ -167,7 +167,7 @@ export default memo(function Filters({
               </div>
               <div className="space-y-0.5 max-h-40 overflow-y-auto">
                 {allValues.map((val) => (
-                  <label key={val} className="flex items-center gap-1.5 text-xs cursor-pointer">
+                  <label key={val} className="flex items-center gap-1.5 text-xs cursor-pointer dark:text-warm-300">
                     <input
                       type="checkbox"
                       checked={selectedValues.includes(val)}
@@ -177,7 +177,7 @@ export default memo(function Filters({
                           : [...selectedValues, val];
                         onFilterChange(feature.name, next);
                       }}
-                      className="rounded"
+                      className="rounded accent-teal-600"
                     />
                     {val}
                   </label>
@@ -199,7 +199,7 @@ export default memo(function Filters({
         return (
           <div
             key={feature.name}
-            className={`space-y-1 p-2 rounded ${isActive ? 'ring-2 ring-teal-400 bg-teal-50' : isPinned ? 'ring-2 ring-teal-400 bg-teal-50/50' : ''}`}
+            className={`space-y-1 p-2 rounded ${isActive ? 'ring-2 ring-teal-400 bg-teal-50 dark:bg-teal-900/30' : isPinned ? 'ring-2 ring-teal-400 bg-teal-50/50 dark:bg-teal-900/20' : ''}`}
           >
             <div className="flex items-center justify-between">
               <Label className="text-xs">
@@ -208,7 +208,7 @@ export default memo(function Filters({
               <div className="flex items-center gap-0.5">
                 <button
                   onClick={() => onTogglePin(feature.name)}
-                  className={`p-0.5 rounded ${isPinned ? 'text-teal-600' : 'text-warm-400 hover:text-warm-700'}`}
+                  className={`p-0.5 rounded ${isPinned ? 'text-teal-600 dark:text-teal-400' : 'text-warm-400 hover:text-warm-700 dark:hover:text-warm-300'}`}
                   title={isPinned ? 'Unpin color view' : 'Color map by this feature'}
                 >
                   <svg
@@ -224,7 +224,7 @@ export default memo(function Filters({
                 </button>
                 <button
                   onClick={() => onRemoveFilter(feature.name)}
-                  className="text-warm-400 hover:text-warm-700 text-sm px-1"
+                  className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 text-sm px-1"
                   title="Remove filter"
                 >
                   x
diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
index 05f0289..0dc9907 100644
--- a/frontend/src/components/HomePage.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -44,12 +44,14 @@ function drawHex(ctx: CanvasRenderingContext2D, cx: number, cy: number, r: numbe
   ctx.closePath();
 }
 
-function HexCanvas({ scrollProgress }: { scrollProgress: number }) {
+function HexCanvas({ scrollProgress, isDark = false }: { scrollProgress: number; isDark?: boolean }) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const hexesRef = useRef<Hex[]>([]);
   const animRef = useRef(0);
   const scrollRef = useRef(scrollProgress);
   scrollRef.current = scrollProgress;
+  const isDarkRef = useRef(isDark);
+  isDarkRef.current = isDark;
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -100,13 +102,14 @@ function HexCanvas({ scrollProgress }: { scrollProgress: number }) {
         if (hex.y < -hex.size * 2) hex.y += h + hex.size * 4;
         if (hex.y > h + hex.size * 2) hex.y -= h + hex.size * 4;
 
-        ctx!.globalAlpha = hex.opacity * globalAlpha;
-        ctx!.fillStyle = '#00a28c';
+        const dark = isDarkRef.current;
+        ctx!.globalAlpha = hex.opacity * globalAlpha * (dark ? 0.6 : 1);
+        ctx!.fillStyle = dark ? '#058172' : '#00a28c';
         drawHex(ctx!, hex.x, hex.y, hex.size);
         ctx!.fill();
 
-        ctx!.globalAlpha = hex.opacity * 0.5 * globalAlpha;
-        ctx!.strokeStyle = '#05c9aa';
+        ctx!.globalAlpha = hex.opacity * 0.5 * globalAlpha * (dark ? 0.6 : 1);
+        ctx!.strokeStyle = dark ? '#0a665b' : '#05c9aa';
         ctx!.lineWidth = 1;
         drawHex(ctx!, hex.x, hex.y, hex.size);
         ctx!.stroke();
@@ -155,7 +158,7 @@ function useFadeInRef() {
 
 // --- Page ---
 
-export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => void }) {
+export default function HomePage({ onOpenDashboard, theme = 'light' }: { onOpenDashboard: () => void; theme?: 'light' | 'dark' }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const [scrollProgress, setScrollProgress] = useState(0);
 
@@ -182,27 +185,27 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
   const ctaRef = useFadeInRef();
 
   return (
-    <div ref={scrollRef} className="flex-1 overflow-y-auto bg-warm-50 relative">
-      <HexCanvas scrollProgress={scrollProgress} />
+    <div ref={scrollRef} className="flex-1 overflow-y-auto bg-warm-50 dark:bg-warm-900 relative">
+      <HexCanvas scrollProgress={scrollProgress} isDark={theme === 'dark'} />
 
       <div className="relative" style={{ zIndex: 1 }}>
         {/* Hero */}
         <div className="max-w-3xl mx-auto px-6 pt-20 pb-24">
           <div
             ref={heroRef}
-            className="fade-in-section backdrop-blur-sm bg-warm-50/60 rounded-2xl p-8 -mx-2"
+            className="fade-in-section backdrop-blur-sm bg-warm-50/60 dark:bg-warm-900/60 rounded-2xl p-8 -mx-2"
           >
             <p className="text-teal-600 font-semibold tracking-wide uppercase text-sm mb-4">
               Find where to live, not just what&apos;s for sale
             </p>
-            <h1 className="text-5xl font-extrabold text-navy-950 mb-6 leading-[1.1] tracking-tight">
+            <h1 className="text-5xl font-extrabold text-navy-950 dark:text-warm-100 mb-6 leading-[1.1] tracking-tight">
               Every neighbourhood
               <br />
               in England &amp; Wales.
               <br />
               <span className="text-teal-600">One map. Your&nbsp;rules.</span>
             </h1>
-            <p className="text-xl text-warm-600 mb-8 leading-relaxed max-w-xl">
+            <p className="text-xl text-warm-600 dark:text-warm-400 mb-8 leading-relaxed max-w-xl">
               Set the commute, budget, school rating, noise level, and crime threshold you&apos;ll
               accept. Narrowit shows you every area that qualifies &mdash; instantly.
             </p>
@@ -223,13 +226,13 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
         {/* The flip */}
         <div className="max-w-3xl mx-auto px-6 pb-20">
           <div ref={problemRef} className="fade-in-section">
-            <div className="rounded-2xl backdrop-blur-sm bg-warm-50/40 border border-warm-200/50 p-8">
+            <div className="rounded-2xl backdrop-blur-sm bg-warm-50/40 dark:bg-warm-800/40 border border-warm-200/50 dark:border-warm-700/50 p-8">
               <div className="grid md:grid-cols-2 gap-8">
                 <div>
                   <h3 className="text-sm font-semibold text-warm-400 uppercase tracking-wide mb-2">
                     The old way
                   </h3>
-                  <p className="text-warm-700 leading-relaxed">
+                  <p className="text-warm-700 dark:text-warm-300 leading-relaxed">
                     Pick a postcode. Google the schools. Check crime stats on another site. Look up
                     commute times. Realise it&apos;s too expensive. Start over. Repeat 40 times.
                   </p>
@@ -238,7 +241,7 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
                   <h3 className="text-sm font-semibold text-teal-600 uppercase tracking-wide mb-2">
                     With Narrowit
                   </h3>
-                  <p className="text-warm-700 leading-relaxed">
+                  <p className="text-warm-700 dark:text-warm-300 leading-relaxed">
                     Tell the map what you need. Every hexagon that lights up is a place worth
                     looking at. Drill into any one to see individual properties, prices, and energy
                     ratings.
@@ -252,21 +255,21 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
         {/* Filter showcase */}
         <div className="max-w-4xl mx-auto px-6 pb-20">
           <div ref={filtersRef} className="fade-in-section">
-            <h2 className="text-3xl font-bold text-navy-950 mb-2 text-center">
+            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-2 text-center">
               12 datasets. One slider&nbsp;each.
             </h2>
-            <p className="text-warm-500 text-center mb-10 max-w-lg mx-auto">
+            <p className="text-warm-500 dark:text-warm-400 text-center mb-10 max-w-lg mx-auto">
               Every filter narrows the map in real time. Combine as many as you like.
             </p>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
               {FILTERS.map((f) => (
                 <div
                   key={f.label}
-                  className="rounded-xl bg-white border border-warm-200 p-4 shadow-sm hover:shadow-md hover:border-teal-300 transition-all"
+                  className="rounded-xl bg-white dark:bg-warm-800 border border-warm-200 dark:border-warm-700 p-4 shadow-sm hover:shadow-md hover:border-teal-300 dark:hover:border-teal-600 transition-all"
                 >
                   <div className="text-2xl mb-2">{f.icon}</div>
-                  <div className="font-semibold text-navy-950 text-sm">{f.label}</div>
-                  <div className="text-xs text-warm-500 mt-0.5">{f.example}</div>
+                  <div className="font-semibold text-navy-950 dark:text-warm-100 text-sm">{f.label}</div>
+                  <div className="text-xs text-warm-500 dark:text-warm-400 mt-0.5">{f.example}</div>
                 </div>
               ))}
             </div>
@@ -276,7 +279,7 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
         {/* How it works */}
         <div className="max-w-3xl mx-auto px-6 pb-20">
           <div ref={howRef} className="fade-in-section">
-            <h2 className="text-3xl font-bold text-navy-950 mb-10 text-center">
+            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-10 text-center">
               Three clicks to clarity
             </h2>
             <div className="space-y-6">
@@ -286,8 +289,8 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
                     {i + 1}
                   </span>
                   <div>
-                    <h3 className="font-semibold text-navy-950 text-lg">{step.title}</h3>
-                    <p className="text-warm-600 mt-0.5">{step.body}</p>
+                    <h3 className="font-semibold text-navy-950 dark:text-warm-100 text-lg">{step.title}</h3>
+                    <p className="text-warm-600 dark:text-warm-400 mt-0.5">{step.body}</p>
                   </div>
                 </div>
               ))}
@@ -302,7 +305,7 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
               {STATS.map((s) => (
                 <div key={s.label}>
                   <div className="text-3xl font-extrabold text-teal-600">{s.value}</div>
-                  <div className="text-sm text-warm-500 mt-1">{s.label}</div>
+                  <div className="text-sm text-warm-500 dark:text-warm-400 mt-1">{s.label}</div>
                 </div>
               ))}
             </div>
@@ -312,8 +315,8 @@ export default function HomePage({ onOpenDashboard }: { onOpenDashboard: () => v
         {/* Final CTA */}
         <div className="max-w-3xl mx-auto px-6 pb-24">
           <div ref={ctaRef} className="fade-in-section text-center">
-            <h2 className="text-3xl font-bold text-navy-950 mb-3">Ready to narrow it down?</h2>
-            <p className="text-warm-500 mb-8 max-w-md mx-auto">
+            <h2 className="text-3xl font-bold text-navy-950 dark:text-warm-100 mb-3">Ready to narrow it down?</h2>
+            <p className="text-warm-500 dark:text-warm-400 mb-8 max-w-md mx-auto">
               100% open data. No account required. Just set your filters and go.
             </p>
             <button
diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx
index 898ce38..a464e8c 100644
--- a/frontend/src/components/Map.tsx
+++ b/frontend/src/components/Map.tsx
@@ -21,6 +21,7 @@ interface MapProps {
   selectedHexagonId: string | null;
   onHexagonClick: (h3: string) => void;
   initialViewState?: ViewState;
+  theme?: 'light' | 'dark';
 }
 
 // Twemoji CDN base URL
@@ -42,7 +43,8 @@ const INITIAL_VIEW: ViewState = {
   pitch: 0,
 };
 
-const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+const MAP_STYLE_LIGHT = 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json';
+const MAP_STYLE_DARK = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json';
 
 // Gradient stops for normalized [0,1] values
 const GRADIENT: { t: number; color: [number, number, number] }[] = [
@@ -204,7 +206,7 @@ function PostcodeSearch({
             setError(null);
           }}
           placeholder="Search postcode..."
-          className="px-3 py-2 text-sm w-40 border-none outline-none bg-white"
+          className="px-3 py-2 text-sm w-40 border-none outline-none bg-white dark:bg-warm-800 dark:text-warm-100 dark:placeholder-warm-500"
         />
         <button
           type="submit"
@@ -215,7 +217,7 @@ function PostcodeSearch({
         </button>
       </div>
       {error && (
-        <span className="text-xs text-red-600 bg-white/90 rounded px-2 py-0.5 shadow">{error}</span>
+        <span className="text-xs text-red-600 dark:text-red-400 bg-white/90 dark:bg-warm-800/90 rounded px-2 py-0.5 shadow">{error}</span>
       )}
     </form>
   );
@@ -240,7 +242,7 @@ function MapLegend({
   };
 
   return (
-    <div className="absolute top-3 right-3 z-10 bg-white rounded shadow-lg p-3 text-xs min-w-[160px]">
+    <div className="absolute top-3 right-3 z-10 bg-white dark:bg-warm-800 dark:text-warm-200 rounded shadow-lg p-3 text-xs min-w-[160px]">
       <div className="flex items-center justify-between mb-2">
         <span className="font-semibold text-sm">{featureLabel}</span>
         {showCancel && (
@@ -268,7 +270,7 @@ function MapLegend({
             'linear-gradient(to right, rgb(46, 204, 113), rgb(241, 196, 15), rgb(231, 76, 60), rgb(142, 68, 173))',
         }}
       />
-      <div className="flex justify-between mt-1 text-warm-600">
+      <div className="flex justify-between mt-1 text-warm-600 dark:text-warm-400">
         <span>{formatVal(range[0])}</span>
         <span>{formatVal(range[1])}</span>
       </div>
@@ -289,6 +291,7 @@ export default memo(function Map({
   selectedHexagonId,
   onHexagonClick,
   initialViewState,
+  theme = 'light',
 }: MapProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [viewState, setViewState] = useState<ViewState>(initialViewState || INITIAL_VIEW);
@@ -343,28 +346,39 @@ export default memo(function Map({
     setViewState((prev) => ({ ...prev, latitude: lat, longitude: lng, zoom }));
   }, []);
 
+  const themeRef = useRef(theme);
+  themeRef.current = theme;
+
   // Make place labels more legible over the colored hexagons
   const handleMapLoad = useCallback(
     (evt: { target: MapRef['getMap'] extends () => infer M ? M : never }) => {
       const map = evt.target;
-      for (const layer of map.getStyle().layers || []) {
-        if (layer.type !== 'symbol') continue;
-        map.setPaintProperty(layer.id, 'text-halo-color', 'rgba(255,255,255,1)');
-        map.setPaintProperty(layer.id, 'text-halo-width', 2);
-        map.setPaintProperty(layer.id, 'text-color', '#222');
-      }
-      // Make water more prominent
-      for (const layer of map.getStyle().layers || []) {
-        if (layer.id === 'water' || layer.id.startsWith('water')) {
-          map.setPaintProperty(layer.id, 'fill-color', '#6baed6');
+      if (themeRef.current === 'light') {
+        for (const layer of map.getStyle().layers || []) {
+          if (layer.type !== 'symbol') continue;
+          map.setPaintProperty(layer.id, 'text-halo-color', 'rgba(255,255,255,1)');
+          map.setPaintProperty(layer.id, 'text-halo-width', 2);
+          map.setPaintProperty(layer.id, 'text-color', '#222');
+        }
+        // Make water more prominent
+        for (const layer of map.getStyle().layers || []) {
+          if (layer.id === 'water' || layer.id.startsWith('water')) {
+            map.setPaintProperty(layer.id, 'fill-color', '#6baed6');
+          }
         }
       }
-      map.setLayoutProperty('building', 'visibility', 'none');
-      map.setLayoutProperty('building-top', 'visibility', 'none');
+      try {
+        map.setLayoutProperty('building', 'visibility', 'none');
+        map.setLayoutProperty('building-top', 'visibility', 'none');
+      } catch {
+        // layers may not exist in dark style
+      }
     },
     []
   );
 
+  const mapStyle = theme === 'dark' ? MAP_STYLE_DARK : MAP_STYLE_LIGHT;
+
   // Popup state for POI hover
   const [popupInfo, setPopupInfo] = useState<{
     x: number;
@@ -541,20 +555,20 @@ export default memo(function Map({
             getPosition: (d) => [d.lon as number, d.lat as number],
             getText: (d) => d.postcode as string,
             getSize: 11,
-            getColor: [30, 30, 30, 220],
+            getColor: theme === 'dark' ? [220, 220, 220, 220] : [30, 30, 30, 220],
             getTextAnchor: 'middle',
             getAlignmentBaseline: 'center',
             fontFamily: 'Inter, system-ui, sans-serif',
             fontWeight: 600,
             outlineWidth: 2,
-            outlineColor: [255, 255, 255, 200],
+            outlineColor: theme === 'dark' ? [30, 30, 30, 200] : [255, 255, 255, 200],
             billboard: false,
             sizeUnits: 'pixels',
             sizeMinPixels: 10,
             sizeMaxPixels: 14,
           })
         : null,
-    [postcodeData, showPostcodes]
+    [postcodeData, showPostcodes, theme]
   );
 
   const layers = useMemo(
@@ -593,12 +607,14 @@ export default memo(function Map({
         }
       }
 
+      const isDark = themeRef.current === 'dark';
       return {
         html: `<div style="padding: 8px; font-size: 12px;">${lines.join('')}</div>`,
         style: {
-          backgroundColor: 'white',
+          backgroundColor: isDark ? '#292524' : 'white',
+          color: isDark ? '#e7e5e4' : 'inherit',
           borderRadius: '4px',
-          boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+          boxShadow: isDark ? '0 2px 4px rgba(0,0,0,0.5)' : '0 2px 4px rgba(0,0,0,0.2)',
         },
       };
     },
@@ -611,9 +627,14 @@ export default memo(function Map({
         {...viewState}
         onMove={handleMove}
         onLoad={handleMapLoad as never}
-        mapStyle={MAP_STYLE}
+        mapStyle={mapStyle}
         style={{ width: '100%', height: '100%' }}
         attributionControl={false}
+        dragRotate={false}
+        touchZoomRotate={true}
+        touchPitch={false}
+        keyboard={true}
+        pitchWithRotate={false}
       >
         <DeckOverlay layers={layers} getTooltip={getTooltip as never} />
       </MapGL>
@@ -628,7 +649,7 @@ export default memo(function Map({
       )}
       {popupInfo && (
         <div
-          className="absolute pointer-events-none bg-white rounded shadow-lg p-2 text-sm"
+          className="absolute pointer-events-none bg-white dark:bg-warm-800 rounded shadow-lg p-2 text-sm dark:text-warm-200"
           style={{
             left: popupInfo.x,
             top: popupInfo.y - 40,
@@ -637,7 +658,7 @@ export default memo(function Map({
           }}
         >
           <strong>{popupInfo.name}</strong>
-          <div className="text-gray-500 text-xs">{popupInfo.category}</div>
+          <div className="text-gray-500 dark:text-warm-400 text-xs">{popupInfo.category}</div>
         </div>
       )}
     </div>
diff --git a/frontend/src/components/POIPane.tsx b/frontend/src/components/POIPane.tsx
index 2e41a6b..4e68748 100644
--- a/frontend/src/components/POIPane.tsx
+++ b/frontend/src/components/POIPane.tsx
@@ -95,13 +95,13 @@ export default function POIPane({
   const selectedCount = selectedCategories.size;
 
   return (
-    <div className="w-72 p-4 bg-white shadow-lg space-y-4 overflow-y-auto max-h-screen">
-      <h2 className="text-xl font-bold">Points of Interest</h2>
+    <div className="w-72 p-4 bg-white dark:bg-warm-900 shadow-lg space-y-4 overflow-y-auto max-h-screen">
+      <h2 className="text-xl font-bold dark:text-warm-100">Points of Interest</h2>
 
       <div className="space-y-2" ref={dropdownRef}>
         <button
           onClick={() => setDropdownOpen(!dropdownOpen)}
-          className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 rounded hover:border-warm-400 bg-white"
+          className="w-full flex items-center justify-between px-3 py-2 text-sm border border-warm-300 dark:border-warm-700 rounded hover:border-warm-400 bg-white dark:bg-warm-800 dark:text-warm-200"
         >
           <span className="truncate text-left">
             {selectedCount === 0
@@ -121,23 +121,23 @@ export default function POIPane({
         </button>
 
         {dropdownOpen && (
-          <div className="border border-warm-300 rounded shadow-lg bg-white">
-            <div className="flex gap-2 px-3 py-2 border-b border-warm-200">
-              <button onClick={selectAll} className="text-xs text-teal-600 hover:text-teal-800">
+          <div className="border border-warm-300 dark:border-warm-700 rounded shadow-lg bg-white dark:bg-warm-800">
+            <div className="flex gap-2 px-3 py-2 border-b border-warm-200 dark:border-warm-700">
+              <button onClick={selectAll} className="text-xs text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300">
                 All
               </button>
-              <span className="text-xs text-warm-300">|</span>
-              <button onClick={selectNone} className="text-xs text-teal-600 hover:text-teal-800">
+              <span className="text-xs text-warm-300 dark:text-warm-600">|</span>
+              <button onClick={selectNone} className="text-xs text-teal-600 dark:text-teal-400 hover:text-teal-800 dark:hover:text-teal-300">
                 None
               </button>
             </div>
-            <div className="px-3 py-2 border-b border-warm-200">
+            <div className="px-3 py-2 border-b border-warm-200 dark:border-warm-700">
               <input
                 type="text"
                 placeholder="Search categories..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full px-2 py-1 text-sm border border-warm-300 rounded"
+                className="w-full px-2 py-1 text-sm border border-warm-300 dark:border-warm-700 rounded bg-white dark:bg-warm-900 dark:text-warm-200 dark:placeholder-warm-500"
               />
             </div>
             <div className="max-h-96 overflow-y-auto py-1">
@@ -151,7 +151,7 @@ export default function POIPane({
 
                 return (
                   <div key={group.name}>
-                    <div className="flex items-center gap-1 px-3 py-1.5 bg-warm-50 border-y border-warm-100">
+                    <div className="flex items-center gap-1 px-3 py-1.5 bg-warm-50 dark:bg-warm-900 border-y border-warm-100 dark:border-warm-700">
                       <button
                         onClick={() => toggleCollapse(group.name)}
                         className="p-0.5 text-warm-400 hover:text-warm-600"
@@ -178,9 +178,9 @@ export default function POIPane({
                             if (el) el.indeterminate = someInGroupSelected;
                           }}
                           onChange={() => toggleGroup(group.name)}
-                          className="rounded"
+                          className="rounded accent-teal-600"
                         />
-                        <span className="text-xs font-semibold text-warm-700">{group.name}</span>
+                        <span className="text-xs font-semibold text-warm-700 dark:text-warm-300">{group.name}</span>
                       </label>
                       <span className="text-xs text-warm-400">
                         {groupSelected}/{group.categories.length}
@@ -190,13 +190,13 @@ export default function POIPane({
                       group.categories.map((category) => (
                         <label
                           key={category}
-                          className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 cursor-pointer"
+                          className="flex items-center gap-2 px-3 pl-8 py-1.5 hover:bg-warm-50 dark:hover:bg-warm-700 cursor-pointer dark:text-warm-300"
                         >
                           <input
                             type="checkbox"
                             checked={selectedCategories.has(category)}
                             onChange={() => toggleCategory(category)}
-                            className="rounded"
+                            className="rounded accent-teal-600"
                           />
                           <span className="text-sm flex-1">{category}</span>
                         </label>
@@ -210,17 +210,17 @@ export default function POIPane({
       </div>
 
       {selectedCount > 0 && (
-        <div className="p-3 bg-teal-50 rounded text-sm">
-          <div className="font-medium text-teal-900">
+        <div className="p-3 bg-teal-50 dark:bg-teal-900/30 rounded text-sm">
+          <div className="font-medium text-teal-900 dark:text-teal-300">
             {poiCount.toLocaleString()} POI{poiCount !== 1 ? 's' : ''} visible
           </div>
-          <div className="text-xs text-teal-700 mt-1">
+          <div className="text-xs text-teal-700 dark:text-teal-400 mt-1">
             {selectedCount} categor{selectedCount !== 1 ? 'ies' : 'y'} selected
           </div>
         </div>
       )}
 
-      <div className="p-3 bg-warm-100 rounded text-xs text-warm-600">
+      <div className="p-3 bg-warm-100 dark:bg-warm-800 rounded text-xs text-warm-600 dark:text-warm-400">
         <p>Select categories to display POIs on the map.</p>
         <p className="mt-2">Zoom in for better visibility of individual locations.</p>
       </div>
diff --git a/frontend/src/components/PropertiesPane.tsx b/frontend/src/components/PropertiesPane.tsx
index e2f3da7..5414501 100644
--- a/frontend/src/components/PropertiesPane.tsx
+++ b/frontend/src/components/PropertiesPane.tsx
@@ -21,10 +21,19 @@ export function PropertiesPane({
   onClose,
 }: PropertiesPaneProps) {
   const [sortBy, setSortBy] = useState<SortBy>('price');
+  const [search, setSearch] = useState('');
 
-  // Sort properties
-  const sortedProperties = useMemo(() => {
-    return [...properties].sort((a, b) => {
+  // Filter and sort properties
+  const filteredAndSorted = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    const filtered = query
+      ? properties.filter((p) => {
+          const addr = (p.address || '').toLowerCase();
+          const pc = (p.postcode || '').toLowerCase();
+          return addr.includes(query) || pc.includes(query);
+        })
+      : properties;
+    return [...filtered].sort((a, b) => {
       switch (sortBy) {
         case 'price':
           return ((b.latest_price as number) || 0) - ((a.latest_price as number) || 0);
@@ -34,11 +43,11 @@ export function PropertiesPane({
           return (a.current_energy_rating || 'Z').localeCompare(b.current_energy_rating || 'Z');
       }
     });
-  }, [properties, sortBy]);
+  }, [properties, sortBy, search]);
 
   if (!hexagonId) {
     return (
-      <div className="flex items-center justify-center h-full text-warm-500">
+      <div className="flex items-center justify-center h-full text-warm-500 dark:text-warm-400">
         Click a hexagon to view properties
       </div>
     );
@@ -47,27 +56,36 @@ export function PropertiesPane({
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <div className="p-4 border-b border-warm-200">
+      <div className="p-4 border-b border-warm-200 dark:border-warm-700">
         <div className="flex justify-between items-center">
-          <h2 className="text-lg font-semibold">Properties in Hexagon</h2>
+          <h2 className="text-lg font-semibold dark:text-warm-100">Properties in Hexagon</h2>
           <button
             onClick={onClose}
-            className="text-warm-500 hover:text-warm-700 text-2xl leading-none"
+            className="text-warm-500 hover:text-warm-700 dark:text-warm-400 dark:hover:text-warm-200 text-2xl leading-none"
           >
             ×
           </button>
         </div>
-        <p className="text-sm text-warm-600">
-          Showing {properties.length} of {total} properties
+        <p className="text-sm text-warm-600 dark:text-warm-400">
+          {search.trim()
+            ? `${filteredAndSorted.length} match${filteredAndSorted.length !== 1 ? 'es' : ''} in ${properties.length} loaded`
+            : `Showing ${properties.length} of ${total} properties`}
         </p>
       </div>
 
-      {/* Sort controls */}
-      <div className="p-2 border-b border-warm-200">
+      {/* Search and sort controls */}
+      <div className="p-2 border-b border-warm-200 dark:border-warm-700 space-y-2">
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search by address or postcode..."
+          className="w-full p-2 border border-warm-300 dark:border-warm-700 rounded text-sm bg-white dark:bg-warm-800 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500"
+        />
         <select
           value={sortBy}
           onChange={(e) => setSortBy(e.target.value as SortBy)}
-          className="w-full p-2 border border-warm-300 rounded text-sm"
+          className="w-full p-2 border border-warm-300 dark:border-warm-700 rounded text-sm bg-white dark:bg-warm-800 dark:text-warm-200"
         >
           <option value="price">Price (High to Low)</option>
           <option value="size">Size (Large to Small)</option>
@@ -78,17 +96,17 @@ export function PropertiesPane({
       {/* Properties list */}
       <div className="flex-1 overflow-y-auto">
         {loading && properties.length === 0 ? (
-          <div className="p-4">Loading...</div>
+          <div className="p-4 dark:text-warm-400">Loading...</div>
         ) : (
           <>
-            {sortedProperties.map((property, idx) => (
+            {filteredAndSorted.map((property, idx) => (
               <PropertyCard key={idx} property={property} />
             ))}
             {properties.length < total && (
               <button
                 onClick={onLoadMore}
                 disabled={loading}
-                className="w-full p-4 text-teal-600 hover:bg-teal-50 disabled:opacity-50"
+                className="w-full p-4 text-teal-600 dark:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 disabled:opacity-50"
               >
                 {loading ? 'Loading...' : `Load More (${total - properties.length} remaining)`}
               </button>
@@ -138,61 +156,61 @@ function PropertyCard({ property }: { property: Property }) {
   const age = getNum(property, 'Approximate construction age', 'construction_age_band');
 
   return (
-    <div className="p-4 border-b border-warm-100 hover:bg-warm-50">
+    <div className="p-4 border-b border-warm-100 dark:border-warm-800 hover:bg-warm-50 dark:hover:bg-warm-800">
       {/* Address & postcode */}
-      <div className="font-semibold">{property.address || 'Unknown Address'}</div>
-      <div className="text-sm text-warm-600">{property.postcode}</div>
+      <div className="font-semibold dark:text-warm-100">{property.address || 'Unknown Address'}</div>
+      <div className="text-sm text-warm-600 dark:text-warm-400">{property.postcode}</div>
 
       {/* Price */}
       {price !== undefined && (
-        <div className="mt-2 text-lg font-bold text-teal-700">
+        <div className="mt-2 text-lg font-bold text-teal-700 dark:text-teal-400">
           £{fmt(price)}
           {pricePerSqm !== undefined && (
-            <span className="text-sm font-normal text-warm-600"> (£{fmt(pricePerSqm)}/m²)</span>
+            <span className="text-sm font-normal text-warm-600 dark:text-warm-400"> (£{fmt(pricePerSqm)}/m²)</span>
           )}
         </div>
       )}
 
       {/* Property details grid */}
-      <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm">
+      <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-sm dark:text-warm-300">
         {property.property_type && (
           <div>
-            <span className="text-warm-500">Type:</span> {property.property_type}
+            <span className="text-warm-500 dark:text-warm-400">Type:</span> {property.property_type}
           </div>
         )}
         {property.built_form && (
           <div>
-            <span className="text-warm-500">Built form:</span> {property.built_form}
+            <span className="text-warm-500 dark:text-warm-400">Built form:</span> {property.built_form}
           </div>
         )}
         {property.duration && (
           <div>
-            <span className="text-warm-500">Tenure:</span> {formatDuration(property.duration)}
+            <span className="text-warm-500 dark:text-warm-400">Tenure:</span> {formatDuration(property.duration)}
           </div>
         )}
         {floorArea !== undefined && (
           <div>
-            <span className="text-warm-500">Floor area:</span> {fmt(floorArea)}m²
+            <span className="text-warm-500 dark:text-warm-400">Floor area:</span> {fmt(floorArea)}m²
           </div>
         )}
         {rooms !== undefined && (
           <div>
-            <span className="text-warm-500">Rooms:</span> {fmt(rooms)}
+            <span className="text-warm-500 dark:text-warm-400">Rooms:</span> {fmt(rooms)}
           </div>
         )}
         {age !== undefined && (
           <div>
-            <span className="text-warm-500">Built:</span> {formatAge(age, property.is_construction_date_approximate ?? true)}
+            <span className="text-warm-500 dark:text-warm-400">Built:</span> {formatAge(age, property.is_construction_date_approximate ?? true)}
           </div>
         )}
         {property.current_energy_rating && (
           <div>
-            <span className="text-warm-500">EPC rating:</span> {property.current_energy_rating}
+            <span className="text-warm-500 dark:text-warm-400">EPC rating:</span> {property.current_energy_rating}
           </div>
         )}
         {property.potential_energy_rating && (
           <div>
-            <span className="text-warm-500">EPC potential:</span> {property.potential_energy_rating}
+            <span className="text-warm-500 dark:text-warm-400">EPC potential:</span> {property.potential_energy_rating}
           </div>
         )}
       </div>
diff --git a/frontend/src/components/ui/label.tsx b/frontend/src/components/ui/label.tsx
index 8012ded..200bdfa 100644
--- a/frontend/src/components/ui/label.tsx
+++ b/frontend/src/components/ui/label.tsx
@@ -7,6 +7,6 @@ interface LabelProps {
 
 export function Label({ children, className }: LabelProps) {
   return (
-    <label className={`text-sm font-medium text-warm-700 ${className || ''}`}>{children}</label>
+    <label className={`text-sm font-medium text-warm-700 dark:text-warm-300 ${className || ''}`}>{children}</label>
   );
 }
diff --git a/frontend/src/components/ui/slider.tsx b/frontend/src/components/ui/slider.tsx
index e5e45ac..67a41b6 100644
--- a/frontend/src/components/ui/slider.tsx
+++ b/frontend/src/components/ui/slider.tsx
@@ -11,13 +11,13 @@ export function Slider({ className, ...props }: SliderProps) {
       className={cn('relative flex w-full touch-none select-none items-center', className)}
       {...props}
     >
-      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200">
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200 dark:bg-warm-700">
         <SliderPrimitive.Range className="absolute h-full bg-teal-600" />
       </SliderPrimitive.Track>
       {props.value?.map((_, i) => (
         <SliderPrimitive.Thumb
           key={i}
-          className="block h-5 w-5 rounded-full border-2 border-teal-600 bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+          className="block h-5 w-5 rounded-full border-2 border-teal-600 dark:border-teal-500 bg-white dark:bg-warm-800 ring-offset-white dark:ring-offset-warm-900 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2e41d70..b031b96 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -10,6 +10,30 @@ body,
   padding: 0;
 }
 
+html.dark {
+  background-color: #1c1917;
+  color-scheme: dark;
+}
+
+/* Smooth theme transitions (scoped to avoid map performance issues) */
+body,
+div,
+aside,
+section,
+header,
+nav,
+button,
+input,
+select,
+label,
+span,
+p,
+h1,
+h2,
+h3 {
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
 /* Fade-in animation for homepage sections */
 .fade-in-section {
   opacity: 0;
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 514767e..01a7132 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -4,6 +4,13 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Narrowit</title>
+    <script>
+      (function() {
+        if (localStorage.getItem('theme') === 'dark') {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/lib/constants.ts b/frontend/src/lib/constants.ts
deleted file mode 100644
index 890093b..0000000
--- a/frontend/src/lib/constants.ts
+++ /dev/null
@@ -1 +0,0 @@
-// No hardcoded filter constants - features are discovered dynamically from the API.
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 375ce45..9cd8e47 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,7 +1,54 @@
 module.exports = {
+  darkMode: 'class',
   content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        navy: {
+          50: '#eef1f8',
+          100: '#d9dff0',
+          200: '#b3bfe1',
+          300: '#8d9fd2',
+          400: '#677fc3',
+          500: '#4a63a8',
+          600: '#2a3f6b',
+          700: '#1e2d50',
+          800: '#141e38',
+          900: '#0f1528',
+          950: '#0a0e1a',
+        },
+        teal: {
+          50: '#effefb',
+          100: '#c7fff4',
+          200: '#90ffe9',
+          300: '#51f7d9',
+          400: '#1de4c3',
+          500: '#05c9aa',
+          600: '#00a28c',
+          700: '#058172',
+          800: '#0a665b',
+          900: '#0d544c',
+          950: '#003330',
+        },
+        coral: {
+          400: '#fb923c',
+          500: '#f97316',
+          600: '#ea580c',
+        },
+        warm: {
+          50: '#fafaf9',
+          100: '#f5f5f4',
+          200: '#e7e5e4',
+          300: '#d6d3d1',
+          400: '#a8a29e',
+          500: '#78716c',
+          600: '#57534e',
+          700: '#44403c',
+          800: '#292524',
+          900: '#1c1917',
+        },
+      },
+    },
   },
   plugins: [require('tailwindcss-animate')],
 };
