diff --git a/index.html b/index.html
index 56a7160..4d02ce6 100644
--- a/index.html
+++ b/index.html
@@ -163,6 +163,65 @@
   .locate-fab:active { transform: scale(0.9); background: var(--ivory); }
   .locate-fab.locating { color: var(--terracotta); }
 
+  .layer-fab {
+    position: absolute;
+    bottom: 64px;
+    right: 16px;
+    z-index: 1000;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    background: white;
+    border: 1.5px solid var(--border-warm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+    transition: background 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
+    color: var(--muted);
+  }
+  .layer-fab:active { transform: scale(0.9); background: var(--ivory); }
+  .layer-fab.active { color: var(--terracotta); border-color: var(--terracotta); }
+
+  .layer-panel {
+    position: absolute;
+    bottom: 64px;
+    right: 64px;
+    z-index: 1001;
+    background: white;
+    border: 1.5px solid var(--border-warm);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    overflow: hidden;
+    display: none;
+    min-width: 152px;
+  }
+  .layer-panel.open { display: block; }
+  .layer-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    cursor: pointer;
+    font-size: 13px;
+    font-family: var(--sans);
+    color: var(--ink);
+    border-bottom: 1px solid var(--border);
+    transition: background 0.1s;
+    white-space: nowrap;
+  }
+  .layer-option:last-child { border-bottom: none; }
+  .layer-option:hover { background: var(--ivory); }
+  .layer-option.active { color: var(--terracotta); font-weight: 500; }
+  .layer-swatch {
+    width: 22px;
+    height: 22px;
+    border-radius: 5px;
+    border: 1.5px solid rgba(0,0,0,0.1);
+    flex-shrink: 0;
+  }
+
   /* Bottom sheet list */
   .sheet {
     background: var(--card);
@@ -1189,6 +1248,27 @@ <h1>Hidden Gems</h1>
       </svg>
     </div>
   </div>
+  <div class="layer-panel" id="layerPanel">
+    <div class="layer-option active" data-layer="voyager" onclick="setMapLayer('voyager')">
+      <div class="layer-swatch" style="background: #e8e3d5;"></div>Voyager
+    </div>
+    <div class="layer-option" data-layer="positron" onclick="setMapLayer('positron')">
+      <div class="layer-swatch" style="background: #f2f2f0;"></div>Positron
+    </div>
+    <div class="layer-option" data-layer="dark" onclick="setMapLayer('dark')">
+      <div class="layer-swatch" style="background: #2c2c2e;"></div>Dark Matter
+    </div>
+    <div class="layer-option" data-layer="osm" onclick="setMapLayer('osm')">
+      <div class="layer-swatch" style="background: #d4e8c2;"></div>Street Map
+    </div>
+  </div>
+  <button class="layer-fab" id="layerFab" onclick="toggleLayerPanel()" title="Switch map style">
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <polygon points="12 2 2 7 12 12 22 7 12 2"/>
+      <polyline points="2 17 12 22 22 17"/>
+      <polyline points="2 12 12 17 22 12"/>
+    </svg>
+  </button>
   <button class="locate-fab" id="locateFab" onclick="locateMe()" title="Zoom to my location">
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <circle cx="12" cy="12" r="3"/>
@@ -1429,6 +1509,8 @@ <h1>Hidden Gems</h1>
 let selectedFiles = [];
 let selectedEmoji = '🌿';
 let map;
+let activeLayer = null;
+let activeLayerName = 'voyager';
 let currentUser = null;
 let editingGemId = null;
 let existingPhotos = [];
@@ -1489,15 +1571,69 @@ <h1>Hidden Gems</h1>
 
 // ── Map ───────────────────────────────────────────────────────────────────────
 
+const LAYERS = {
+  voyager: {
+    url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
+    maxZoom: 20
+  },
+  positron: {
+    url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
+    maxZoom: 20
+  },
+  dark: {
+    url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
+    maxZoom: 20
+  },
+  osm: {
+    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+    maxZoom: 19
+  }
+};
+
 function initMap() {
   map = L.map('map', { zoomControl: false }).setView([55.676, 12.568], 13);
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '© OpenStreetMap',
-    maxZoom: 19
-  }).addTo(map);
+  const cfg = LAYERS.voyager;
+  activeLayer = L.tileLayer(cfg.url, { attribution: cfg.attribution, maxZoom: cfg.maxZoom }).addTo(map);
   L.control.zoom({ position: 'topright' }).addTo(map);
 }
 
+function setMapLayer(name) {
+  if (name === activeLayerName) { toggleLayerPanel(); return; }
+  const cfg = LAYERS[name];
+  if (!cfg || !map) return;
+  if (activeLayer) map.removeLayer(activeLayer);
+  activeLayer = L.tileLayer(cfg.url, { attribution: cfg.attribution, maxZoom: cfg.maxZoom }).addTo(map);
+  activeLayerName = name;
+  document.querySelectorAll('.layer-option').forEach(el => {
+    el.classList.toggle('active', el.dataset.layer === name);
+  });
+  toggleLayerPanel();
+}
+
+function toggleLayerPanel() {
+  const panel = document.getElementById('layerPanel');
+  const fab = document.getElementById('layerFab');
+  const isOpen = panel.classList.toggle('open');
+  fab.classList.toggle('active', isOpen);
+  if (isOpen) {
+    setTimeout(() => document.addEventListener('click', closePanelOutside, true), 0);
+  }
+}
+
+function closePanelOutside(e) {
+  const panel = document.getElementById('layerPanel');
+  const fab = document.getElementById('layerFab');
+  if (!panel.contains(e.target) && !fab.contains(e.target)) {
+    panel.classList.remove('open');
+    fab.classList.remove('active');
+    document.removeEventListener('click', closePanelOutside, true);
+  }
+}
+
 function createMarkerIcon(emoji) {
   return L.divIcon({
     className: '',