diff --git a/assets/js/app.ts b/assets/js/app.ts
index 2f462efb..63a883ab 100644
--- a/assets/js/app.ts
+++ b/assets/js/app.ts
@@ -1375,10 +1375,30 @@ const StatusTitle = {
   }
 }
 
+const ThemeSelector = {
+  mounted() {
+    this.updateActive()
+    window.addEventListener("phx:set-theme", () => this.updateActive())
+  },
+  updateActive() {
+    const current = localStorage.getItem("phx:theme") || "system"
+    this.el.querySelectorAll<HTMLElement>("[data-phx-theme]").forEach((btn) => {
+      const isActive = btn.dataset.phxTheme === current
+      btn.setAttribute("aria-pressed", isActive ? "true" : "false")
+      btn.classList.toggle("ring-2", isActive)
+      btn.classList.toggle("ring-indigo-500", isActive)
+      btn.classList.toggle("bg-indigo-50", isActive)
+      btn.classList.toggle("dark:bg-indigo-900/20", isActive)
+      btn.classList.toggle("text-indigo-700", isActive)
+      btn.classList.toggle("dark:text-indigo-300", isActive)
+    })
+  },
+}
+
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 5000,
   params: { _csrf_token: csrfToken, timezone: userTimezone },
-  hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, SitesMap, LeafletMap, DeviceListReorder, MikrotikPortSync, GlobalSearch, GlobalSearchTrigger, DynamicFavicon, StatusTitle },
+  hooks: { ...colocatedHooks, SensorChart, CopyToClipboard, ScrollToTop, AutoDismissFlash, BetaBannerDismiss, NetworkMap, SitesMap, LeafletMap, DeviceListReorder, MikrotikPortSync, GlobalSearch, GlobalSearchTrigger, DynamicFavicon, StatusTitle, ThemeSelector },
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/lib/towerops_web/components/layouts.ex b/lib/towerops_web/components/layouts.ex
index 29f90c6e..0eeb605b 100644
--- a/lib/towerops_web/components/layouts.ex
+++ b/lib/towerops_web/components/layouts.ex
@@ -443,8 +443,6 @@ defmodule ToweropsWeb.Layouts do
               >
                 <.icon name="hero-question-mark-circle" class="h-5 w-5" />
               </.link>
-
-              <.theme_toggle />
               
     <!-- User menu -->
               <button
@@ -977,7 +975,6 @@ defmodule ToweropsWeb.Layouts do
               </div>
             </div>
             <div class="flex items-center gap-1 sm:gap-2">
-              <.theme_toggle />
               <.link
                 navigate={~p"/orgs"}
                 class="text-xs sm:text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
diff --git a/lib/towerops_web/live/user_settings_live.html.heex b/lib/towerops_web/live/user_settings_live.html.heex
index 167d9ee3..d820732e 100644
--- a/lib/towerops_web/live/user_settings_live.html.heex
+++ b/lib/towerops_web/live/user_settings_live.html.heex
@@ -394,6 +394,68 @@
         </.form>
       </div>
     <% end %>
+    <!-- Appearance Section -->
+    <%= if @active_tab == "personal" do %>
+      <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 sm:px-6 md:grid-cols-3 lg:px-8">
+        <div>
+          <h2 class="text-base/7 font-semibold text-gray-900 dark:text-white">
+            {t("Appearance")}
+          </h2>
+          <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">
+            {t("Choose your preferred interface theme.")}
+          </p>
+        </div>
+
+        <div class="md:col-span-2">
+          <div
+            id="theme-selector"
+            phx-hook="ThemeSelector"
+            phx-update="ignore"
+            class="flex gap-3"
+          >
+            <button
+              type="button"
+              aria-pressed="false"
+              data-phx-theme="system"
+              phx-click={JS.dispatch("phx:set-theme")}
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
+            >
+              <.icon name="hero-computer-desktop" class="h-6 w-6" />
+              {t("Auto")}
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
+                {t("System default")}
+              </span>
+            </button>
+            <button
+              type="button"
+              aria-pressed="false"
+              data-phx-theme="light"
+              phx-click={JS.dispatch("phx:set-theme")}
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
+            >
+              <.icon name="hero-sun" class="h-6 w-6" />
+              {t("Light")}
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
+                {t("Always light")}
+              </span>
+            </button>
+            <button
+              type="button"
+              aria-pressed="false"
+              data-phx-theme="dark"
+              phx-click={JS.dispatch("phx:set-theme")}
+              class="flex flex-1 flex-col items-center gap-2 rounded-lg border border-gray-200 px-4 py-5 text-sm font-medium text-gray-700 transition-colors hover:border-indigo-300 hover:bg-indigo-50 dark:border-white/10 dark:text-gray-300 dark:hover:border-indigo-500 dark:hover:bg-indigo-900/20"
+            >
+              <.icon name="hero-moon" class="h-6 w-6" />
+              {t("Dark")}
+              <span class="text-xs font-normal text-gray-400 dark:text-gray-500">
+                {t("Always dark")}
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    <% end %>
     
 <!-- Account Tab -->
     <%= if @active_tab == "account" do %>