diff --git a/artifacts/teaboy-os/src/components/clock-style-picker.tsx b/artifacts/teaboy-os/src/components/clock-style-picker.tsx
index c16514db..25bd4f3f 100644
--- a/artifacts/teaboy-os/src/components/clock-style-picker.tsx
+++ b/artifacts/teaboy-os/src/components/clock-style-picker.tsx
@@ -21,6 +21,7 @@ import {
   resolveClockHour12,
   useNow,
   useHomeClockVisibility,
+  useTopbarClockVisibility,
 } from "@/components/clock";
 
 type Props = {
@@ -40,6 +41,7 @@ export function ClockStylePicker({ currentStyle, currentHour12 }: Props) {
   const active = resolveClockStyle(currentStyle);
   const activeHour12 = resolveClockHour12(currentHour12);
   const [homeClockVisible, setHomeClockVisible] = useHomeClockVisibility();
+  const [topbarClockVisible, setTopbarClockVisible] = useTopbarClockVisibility();
 
   const choose = (style: ClockStyleType) => {
     const previous = queryClient.getQueryData<AuthUser>(getGetMeQueryKey());
@@ -135,6 +137,36 @@ export function ClockStylePicker({ currentStyle, currentHour12 }: Props) {
             />
           </span>
         </button>
+        <button
+          type="button"
+          onClick={() => setTopbarClockVisible(!topbarClockVisible)}
+          className="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-lg text-start hover:bg-foreground/5 transition-colors mb-1"
+        >
+          <div className="flex items-center gap-2 min-w-0">
+            {topbarClockVisible ? (
+              <Eye size={16} className="text-primary shrink-0" />
+            ) : (
+              <EyeOff size={16} className="text-muted-foreground shrink-0" />
+            )}
+            <span className="text-xs text-foreground font-medium truncate">
+              {t("home.clockStyle.showTopbar")}
+            </span>
+          </div>
+          <span
+            className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors ${
+              topbarClockVisible ? "bg-primary" : "bg-foreground/15"
+            }`}
+            aria-hidden="true"
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${
+                topbarClockVisible
+                  ? "translate-x-[18px] rtl:-translate-x-[18px]"
+                  : "translate-x-0.5 rtl:-translate-x-0.5"
+              }`}
+            />
+          </span>
+        </button>
         <div className="h-px bg-foreground/10 mx-1 mb-1" />
         <div className="px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           {t("home.clockStyle.hourFormat.label")}
diff --git a/artifacts/teaboy-os/src/locales/ar.json b/artifacts/teaboy-os/src/locales/ar.json
index 4918ed85..b88e5893 100644
--- a/artifacts/teaboy-os/src/locales/ar.json
+++ b/artifacts/teaboy-os/src/locales/ar.json
@@ -81,6 +81,7 @@
     "clockStyle": {
       "label": "نمط الساعة",
       "showWidget": "إظهار ساعة الحائط في الشاشة الرئيسية",
+      "showTopbar": "إظهار الساعة في الشريط العلوي",
       "hideWidget": "إخفاء الساعة",
       "hourFormat": {
         "label": "صيغة الساعة",
diff --git a/artifacts/teaboy-os/src/locales/en.json b/artifacts/teaboy-os/src/locales/en.json
index 24cd07a7..8129bd5c 100644
--- a/artifacts/teaboy-os/src/locales/en.json
+++ b/artifacts/teaboy-os/src/locales/en.json
@@ -81,6 +81,7 @@
     "clockStyle": {
       "label": "Clock style",
       "showWidget": "Show wall clock on home screen",
+      "showTopbar": "Show clock in top bar",
       "hideWidget": "Hide clock",
       "hourFormat": {
         "label": "Hour format",
diff --git a/artifacts/teaboy-os/src/pages/home.tsx b/artifacts/teaboy-os/src/pages/home.tsx
index 36fd1d91..a3a90257 100644
--- a/artifacts/teaboy-os/src/pages/home.tsx
+++ b/artifacts/teaboy-os/src/pages/home.tsx
@@ -21,8 +21,6 @@ import {
   Bell,
   LogOut,
   Globe,
-  Eye,
-  EyeOff,
   Grid2X2,
   Coffee,
   MessageSquare,
@@ -319,7 +317,7 @@ export default function HomePage() {
 
   const gridCols = useGridCols();
   const [homeClockVisible, setHomeClockVisible] = useHomeClockVisibility();
-  const [topbarClockVisible, setTopbarClockVisible] = useTopbarClockVisibility();
+  const [topbarClockVisible] = useTopbarClockVisibility();
   const [clockSize, setClockSize] = useHomeClockSize(user?.id);
   const [clockPos, setClockPos] = useHomeClockPosition(user?.id);
   const toggleClockSize = () => setClockSize(clockSize === "large" ? "compact" : "large");
@@ -468,16 +466,6 @@ export default function HomePage() {
             currentStyle={user?.clockStyle ?? null}
             currentHour12={user?.clockHour12 ?? null}
           />
-          <button
-            type="button"
-            onClick={() => setTopbarClockVisible(!topbarClockVisible)}
-            aria-label={t(topbarClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")}
-            title={t(topbarClockVisible ? "home.clockStyle.hideWidget" : "home.clockStyle.showWidget")}
-            aria-pressed={topbarClockVisible}
-            className="text-muted-foreground hover:text-foreground transition-colors p-1.5 rounded-lg hover:bg-foreground/5"
-          >
-            {topbarClockVisible ? <Eye size={18} /> : <EyeOff size={18} />}
-          </button>
           <button
             onClick={toggleLanguage}
             aria-label="Toggle language"