diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
index 9550650..afa877a 100644
--- a/src/hooks/use-theme.ts
+++ b/src/hooks/use-theme.ts
@@ -1,6 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import type {
   Palette,
   ThemeMode,
@@ -67,6 +68,7 @@ export function useTheme(
   const [dashLayout, setDashLayoutState] = useState<DashLayout>(initial.dashLayout ?? "classic");
   const [calView, setCalViewState] = useState<CalView>(initial.calView ?? "month");
   const [navStyle, setNavStyleState] = useState<NavStyle>(initial.navStyle ?? "rail-desktop");
+  const router = useRouter();
 
   // Re-apply data-nav whenever the viewport crosses the mobile breakpoint.
   useEffect(() => {
@@ -158,9 +160,11 @@ export function useTheme(
     (next: NavStyle) => {
       setNavStyleState(next);
       applyTheme({ palette, mode, fontPair, density, navStyle: next });
-      persist({ navStyle: next });
+      if (signedIn) {
+        void setUserTheme({ navStyle: next }).then(() => router.refresh());
+      }
     },
-    [palette, mode, fontPair, density, persist],
+    [palette, mode, fontPair, density, signedIn, router],
   );
 
   return {