diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index 34464ff..71ef695 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -367,8 +367,27 @@ function htmlPage(): string {
       }
 
       .theme-toggle {
-        min-width: 112px;
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        z-index: 900;
+        width: 40px;
+        height: 40px;
+        padding: 0;
         justify-content: center;
+        background: var(--timeline-surface-soft);
+        color: var(--timeline-text);
+        border: 1px solid var(--timeline-border);
+        box-shadow: var(--shadow-soft);
+      }
+
+      .theme-toggle:hover {
+        background: var(--timeline-surface-strong);
+      }
+
+      .theme-toggle .button-icon {
+        width: 18px;
+        height: 18px;
       }
 
       .panel-collapse {
@@ -924,6 +943,11 @@ function htmlPage(): string {
           overflow: visible;
         }
 
+        .theme-toggle {
+          top: 12px;
+          right: 12px;
+        }
+
         .list {
           max-height: min(52vh, 420px);
           --photo-thumb-size: 64px;
@@ -951,6 +975,14 @@ function htmlPage(): string {
     </style>
   </head>
   <body data-theme="light">
+    <button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch to dark mode">
+      <span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
+        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M8 1.8V3.1M8 12.9v1.3M3.1 3.1l.9.9M12 12l.9.9M1.8 8H3.1M12.9 8h1.3M3.1 12.9l.9-.9M12 4l.9-.9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
+          <circle cx="8" cy="8" r="3.2" stroke="currentColor" stroke-width="1.4"/>
+        </svg>
+      </span>
+    </button>
     <main>
       <section class="map-panel">
         <div id="map"></div>
@@ -967,14 +999,6 @@ function htmlPage(): string {
               </svg>
             </span>
           </button>
-          <button class="secondary theme-toggle" id="theme-toggle" type="button" aria-label="Switch color theme">
-            <span class="button-icon" id="theme-toggle-icon" aria-hidden="true">
-              <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>
-              </svg>
-            </span>
-            <span id="theme-toggle-label" class="theme-toggle-label">Light mode</span>
-          </button>
         </div>
         <label>
           Share URL
@@ -1153,7 +1177,6 @@ function htmlPage(): string {
       const timelineBrush = mustGet("timeline-brush");
       const themeToggle = mustGet("theme-toggle");
       const themeToggleIcon = mustGet("theme-toggle-icon");
-      const themeToggleLabel = mustGet("theme-toggle-label");
       const sidebarCollapseButton = mustGet("sidebar-collapse");
       const sidebarCollapseIcon = mustGet("sidebar-collapse-icon");
       const timelineCollapseButton = mustGet("timeline-collapse");
@@ -1277,14 +1300,12 @@ function htmlPage(): string {
         setMapTheme(resolvedTheme);
 
         if (resolvedTheme === "dark") {
-          themeToggleLabel.textContent = "Light mode";
           themeToggle.setAttribute("aria-label", "Switch to light mode");
           themeToggleIcon.innerHTML =
             '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
             '<path d="M10.7 12.2a5.7 5.7 0 1 1 0-8.4 4.9 4.9 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>' +
             "</svg>";
         } else {
-          themeToggleLabel.textContent = "Dark mode";
           themeToggle.setAttribute("aria-label", "Switch to dark mode");
           themeToggleIcon.innerHTML =
             '<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
