diff --git a/app/components/OgImage/BlogPost.vue b/app/components/OgImage/BlogPost.vue
index 01965a1abf..293979b1f2 100644
--- a/app/components/OgImage/BlogPost.vue
+++ b/app/components/OgImage/BlogPost.vue
@@ -110,6 +110,8 @@ const formattedAuthorNames = computed(() => {
               v-if="author.avatar"
               :src="author.avatar"
               :alt="author.name"
+              width="48"
+              height="48"
               class="w-full h-full object-cover"
             />
             <span v-else style="font-size: 20px; color: #666; font-weight: 500">
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
index 5fbbbc438a..d2667c2151 100644
--- a/app/components/Settings/Toggle.client.vue
+++ b/app/components/Settings/Toggle.client.vue
@@ -27,7 +27,7 @@ const id = useId()
 <template>
   <label
     :for="id"
-    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto] cursor-pointer"
     :class="[justify === 'start' ? 'justify-start' : '']"
     :style="
       props.reverseOrder
@@ -39,9 +39,9 @@ const id = useId()
       <input
         role="switch"
         type="checkbox"
-        :id
+        :id="id"
         v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg hover:bg-fg/60 checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
         style="grid-area: toggle"
       />
       <TooltipApp
@@ -85,9 +85,9 @@ const id = useId()
       <input
         role="switch"
         type="checkbox"
-        :id
+        :id="id"
         v-model="checked"
-        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg-subtle checked:bg-fg checked:border-fg focus-visible:(outline-2 outline-fg outline-offset-2) before:content-[''] before:absolute before:h-5 before:w-5 before:top-1px before:rounded-full before:bg-bg"
+        class="toggle appearance-none h-6 w-11 rounded-full border border-fg relative shrink-0 bg-fg/50 transition-colors duration-200 ease-in-out checked:bg-fg hover:bg-fg/60 checked:hover:(bg-fg/80 after:opacity-50) focus-visible:(outline-2 outline-accent outline-offset-2) before:(content-[''] absolute h-5 w-5 top-px start-px rounded-full bg-bg transition-transform duration-200 ease-in-out) checked:before:translate-x-[20px] rtl:checked:before:-translate-x-[20px] after:(content-[''] absolute h-3.5 w-3.5 top-[4px] start-[4px] i-lucide:check bg-fg opacity-0 transition-all duration-200 ease-in-out) checked:after:opacity-100 checked:after:translate-x-[20px] rtl:checked:after:-translate-x-[20px]"
         style="grid-area: toggle; justify-self: end"
       />
     </template>
@@ -98,82 +98,37 @@ const id = useId()
 </template>
 
 <style scoped>
-/* Thumb position: logical property for RTL support */
-.toggle::before {
-  inset-inline-start: 1px;
-}
-
-/* Track transition */
-.toggle {
-  transition:
-    background-color 200ms ease-in-out,
-    border-color 100ms ease-in-out;
-}
-
-.toggle::before {
-  transition:
-    background-color 200ms ease-in-out,
-    translate 200ms ease-in-out;
-}
-
-/* Hover states */
-.toggle:hover:not(:checked) {
-  background: var(--fg-muted);
-}
-
-.toggle:checked:hover {
-  background: var(--fg-muted);
-  border-color: var(--fg-muted);
-}
-
-/* RTL-aware checked thumb position */
-:dir(ltr) .toggle:checked::before {
-  translate: 20px;
-}
-
-:dir(rtl) .toggle:checked::before {
-  translate: -20px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle,
-  .toggle::before {
-    transition: none;
-  }
-}
-
 /* Support forced colors */
 @media (forced-colors: active) {
-  label > span {
+  .toggle {
     background: Canvas;
-    color: Highlight;
-    forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
-  label:has(.toggle:checked) > span {
+  .toggle:checked {
     background: Highlight;
-    color: Canvas;
+    border-color: CanvasText;
   }
 
   .toggle::before {
-    forced-color-adjust: none;
-    background-color: Highlight;
+    background-color: CanvasText;
   }
 
-  .toggle,
-  .toggle:hover {
-    background: Canvas;
-    border-color: CanvasText;
+  .toggle:checked::before {
+    background-color: Canvas;
   }
 
-  .toggle:checked,
-  .toggle:checked:hover {
-    background: Highlight;
-    border-color: CanvasText;
+  .toggle::after {
+    background-color: Highlight;
   }
+}
 
-  .toggle:checked::before {
-    background: Canvas;
+@media (prefers-reduced-motion: reduce) {
+  .toggle,
+  .toggle::before,
+  .toggle::after {
+    transition: none !important;
+    animation: none !important;
   }
 }
 </style>
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
index b5f2105a17..7b6bcd8217 100644
--- a/app/components/Settings/Toggle.server.vue
+++ b/app/components/Settings/Toggle.server.vue
@@ -4,6 +4,10 @@ const props = withDefaults(
     label: string
     description?: string
     justify?: 'between' | 'start'
+    tooltip?: string
+    tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'
+    tooltipTo?: string
+    tooltipOffset?: number
     reverseOrder?: boolean
   }>(),
   {
@@ -15,7 +19,7 @@ const props = withDefaults(
 
 <template>
   <div
-    class="grid items-center gap-4 py-1 -my-1 grid-cols-[auto_1fr_auto]"
+    class="grid items-center gap-1.5 py-1 -my-1 grid-cols-[auto_1fr_auto]"
     :class="[justify === 'start' ? 'justify-start' : '']"
     :style="
       props.reverseOrder
@@ -51,84 +55,3 @@ const props = withDefaults(
     {{ description }}
   </p>
 </template>
-
-<style scoped>
-/* Thumb position: logical property for RTL support */
-.toggle::before {
-  inset-inline-start: 1px;
-}
-
-/* Track transition */
-.toggle {
-  transition:
-    background-color 200ms ease-in-out,
-    border-color 100ms ease-in-out;
-}
-
-.toggle::before {
-  transition:
-    background-color 200ms ease-in-out,
-    translate 200ms ease-in-out;
-}
-
-/* Hover states */
-.toggle:hover:not(:checked) {
-  background: var(--fg-muted);
-}
-
-.toggle:checked:hover {
-  background: var(--fg-muted);
-  border-color: var(--fg-muted);
-}
-
-/* RTL-aware checked thumb position */
-:dir(ltr) .toggle:checked::before {
-  translate: 20px;
-}
-
-:dir(rtl) .toggle:checked::before {
-  translate: -20px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle,
-  .toggle::before {
-    transition: none;
-  }
-}
-
-/* Support forced colors */
-@media (forced-colors: active) {
-  label > span {
-    background: Canvas;
-    color: Highlight;
-    forced-color-adjust: none;
-  }
-
-  label:has(.toggle:checked) > span {
-    background: Highlight;
-    color: Canvas;
-  }
-
-  .toggle::before {
-    forced-color-adjust: none;
-    background-color: Highlight;
-  }
-
-  .toggle,
-  .toggle:hover {
-    background: Canvas;
-    border-color: CanvasText;
-  }
-
-  .toggle:checked,
-  .toggle:checked:hover {
-    background: Highlight;
-    border-color: CanvasText;
-  }
-
-  .toggle:checked::before {
-    background: Canvas;
-  }
-}
-</style>
diff --git a/modules/blog.ts b/modules/blog.ts
index cbfa5424ec..ee2fd3cd91 100644
--- a/modules/blog.ts
+++ b/modules/blog.ts
@@ -51,14 +51,18 @@ async function fetchBlueskyAvatars(
     for (const profile of data.profiles) {
       if (profile.avatar) {
         const hash = crypto.createHash('sha256').update(profile.avatar).digest('hex')
-        const dest = join(imagesDir, `${hash}.jpg`)
+        const dest = join(imagesDir, `${hash}.png`)
 
         if (!existsSync(dest)) {
-          const res = await fetch(profile.avatar)
-          await writeFile(join(imagesDir, `${hash}.jpg`), res.body!)
+          const res = await fetch(`${profile.avatar}@png`)
+          if (!res.ok || !res.body) {
+            console.warn(`[blog] Failed to fetch Bluesky avatar: ${profile.avatar}@png`)
+            continue
+          }
+          await writeFile(join(imagesDir, `${hash}.png`), res.body)
         }
 
-        avatarMap.set(profile.handle, `/blog/avatar/${hash}.jpg`)
+        avatarMap.set(profile.handle, `/blog/avatar/${hash}.png`)
       }
     }
   } catch (error) {
@@ -85,7 +89,7 @@ function resolveAuthors(authors: Author[], avatarMap: Map<string, string>): Reso
  * Resolves Bluesky avatars at build time.
  */
 async function loadBlogPosts(blogDir: string, imagesDir: string): Promise<BlogPostFrontmatter[]> {
-  const files: string[] = globSync(join(blogDir, '*.md'))
+  const files: string[] = globSync(join(blogDir, '*.md').replace(/\\/g, '/'))
 
   // First pass: extract raw frontmatter and collect all Bluesky handles
   const rawPosts: Array<{ frontmatter: Record<string, unknown> }> = []
diff --git a/package.json b/package.json
index 5624d4173e..323cec602d 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "vite-plugin-pwa": "1.2.0",
     "vite-plus": "0.0.0-g52709db6.20260226-1136",
     "vue": "3.5.29",
-    "vue-data-ui": "3.15.9"
+    "vue-data-ui": "3.15.10"
   },
   "devDependencies": {
     "@e18e/eslint-plugin": "0.2.0",
@@ -146,7 +146,7 @@
     "h3": "1.15.5",
     "h3-next": "npm:h3@2.0.1-rc.14",
     "knip": "5.85.0",
-    "lint-staged": "16.3.1",
+    "lint-staged": "16.3.2",
     "markdown-it-anchor": "9.2.0",
     "oxfmt": "0.36.0",
     "oxlint": "1.51.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47ed71c8d5..d6da9eb16b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,8 +236,8 @@ importers:
         specifier: 3.5.29
         version: 3.5.29(typescript@5.9.3)
       vue-data-ui:
-        specifier: 3.15.9
-        version: 3.15.9(vue@3.5.29(typescript@5.9.3))
+        specifier: 3.15.10
+        version: 3.15.10(vue@3.5.29(typescript@5.9.3))
     devDependencies:
       '@e18e/eslint-plugin':
         specifier: 0.2.0
@@ -309,8 +309,8 @@ importers:
         specifier: 5.85.0
         version: 5.85.0(@types/node@24.11.0)(typescript@5.9.3)
       lint-staged:
-        specifier: 16.3.1
-        version: 16.3.1
+        specifier: 16.3.2
+        version: 16.3.2
       markdown-it-anchor:
         specifier: 9.2.0
         version: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.1.1)
@@ -7941,8 +7941,8 @@ packages:
   linkifyjs@4.3.2:
     resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
 
-  lint-staged@16.3.1:
-    resolution: {integrity: sha512-bqvvquXzFBAlSbluugR4KXAe4XnO/QZcKVszpkBtqLWa2KEiVy8n6Xp38OeUbv/gOJOX4Vo9u5pFt/ADvbm42Q==}
+  lint-staged@16.3.2:
+    resolution: {integrity: sha512-xKqhC2AeXLwiAHXguxBjuChoTTWFC6Pees0SHPwOpwlvI3BH7ZADFPddAdN3pgo3aiKgPUx/bxE78JfUnxQnlg==}
     engines: {node: '>=20.17'}
     hasBin: true
 
@@ -10664,8 +10664,8 @@ packages:
   vue-component-type-helpers@3.2.5:
     resolution: {integrity: sha512-tkvNr+bU8+xD/onAThIe7CHFvOJ/BO6XCOrxMzeytJq40nTfpGDJuVjyCM8ccGZKfAbGk2YfuZyDMXM56qheZQ==}
 
-  vue-data-ui@3.15.9:
-    resolution: {integrity: sha512-xNv8u//zPkKQT+WNtPsxWLdRBgyZPpDn5X0z6klB/8CouHXYrC8FO5eul28bTE3cbmm/vZZDC2LRupfeeu7zNA==}
+  vue-data-ui@3.15.10:
+    resolution: {integrity: sha512-ssrh4imaeYF/0EzBsXi20APAHIy5+FJwazXLXwZ4KqHkYvzGqRmkM+aByBFAxHFKEYkrlvX39U3iEfKe5fVBSQ==}
     peerDependencies:
       jspdf: '>=3.0.1'
       vue: '>=3.3.0'
@@ -19507,7 +19507,7 @@ snapshots:
 
   linkifyjs@4.3.2: {}
 
-  lint-staged@16.3.1:
+  lint-staged@16.3.2:
     dependencies:
       commander: 14.0.3
       listr2: 9.0.5
@@ -23502,7 +23502,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.5: {}
 
-  vue-data-ui@3.15.9(vue@3.5.29(typescript@5.9.3)):
+  vue-data-ui@3.15.10(vue@3.5.29(typescript@5.9.3)):
     dependencies:
       vue: 3.5.29(typescript@5.9.3)