--- a/mrjunejune/test/snapshots/tools_file_converter.snapshot	Tue Aug 04 15:12:18 2026 -0700
+++ b/mrjunejune/test/snapshots/tools_file_converter.snapshot	Tue Aug 04 16:49:01 2026 -0700
@@ -6,7 +6,10 @@
     <title>File Format Converter</title>
     <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="theme-color" content="#f7f3e8">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
+<link rel="manifest" href="/public/manifest.json">
+<link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
 
 <link rel="preload" href="/public/fonts/Roboto-Regular.ttf" as="font"  crossorigin>
 <link rel="preload" href="/public/fonts/Roboto-Thin.ttf"as="font" crossorigin>
@@ -19,9 +22,17 @@
 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
 
+<link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
+<link rel="stylesheet" href="/public/design-system/styles/themes.css" />
 <link rel="preload" href="/base.css" as="style" />
 <link rel="stylesheet" href="/base.css" />
+<link rel="stylesheet" href="/public/design-system/styles/components.css" />
+<script
+  type="module"
+  src="/public/design-system/components/index.js"
+></script>
 
+<script src="/public/pwa-register.js" defer></script>
 
     <style>
         .container {
@@ -157,35 +168,41 @@
     <style>
   :root {
     --header-background: var(--white);
-    --header-color: rgb(var(--black));
+    --header-color: var(--black);
     --link-hover-accent: var(--awesome);
   }
 
-  /* Fixed icon in top left corner */
-  #themeToggle {
+  #themeControl {
     position: fixed;
     top: 20px;
     left: 20px;
-    background: var(--header-background);
-    display: flex;
-    align-items: center;
-    border-radius: 50%;
-    cursor: pointer;
     z-index: 1000;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease;
   }
 
-  #themeToggle:hover {
+  #themeControl:hover {
     transform: scale(1.05);
   }
 
+  #themeToggle {
+    flex-direction: column;
+    min-width: 4.5rem;
+    padding: 0.35rem;
+    border-radius: 1.5rem;
+  }
+
+  #themeName {
+    font-family: "More", sans-serif;
+    font-size: 0.65rem;
+    line-height: 1;
+  }
+
   /* Professional header */
   header {
     margin: auto;
     padding: 1.5em 1em;
     font-family: "More", sans-serif;
-    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    box-shadow: var(--zen-shadow-sm);
     width: 720px;
     max-width: calc(100% - 2em);
     text-align: center;
@@ -209,7 +226,7 @@
 
   /* Mobile responsiveness */
   @media (max-width: 720px) {
-    #themeToggle {
+    #themeControl {
       top: 15px;
       left: 15px;
     }
@@ -224,7 +241,7 @@
   }
 
   @media (max-width: 480px) {
-    #themeToggle {
+    #themeControl {
       top: 10px;
       left: 10px;
     }
@@ -250,20 +267,25 @@
   }
   
   /* 2. MANUAL DARK OVERRIDE */
-  html.dark {
+  html[data-zen-theme="ink"] {
     --logo-invert: invert(1);
     --epi-grayscale: grayscale(1);
   }
   
   /* 3. MANUAL LIGHT OVERRIDE */
-  html.light-mode {
+  html[data-zen-theme="paper"] {
     --logo-invert: invert(0);
     --epi-grayscale: brightness(2.9) grayscale(1);
   }
+
+  html[data-zen-theme="playful"] {
+    --logo-invert: invert(0);
+    --epi-grayscale: saturate(1.25);
+  }
   
   /* 4. SYSTEM PREFERENCE */
   @media (prefers-color-scheme: dark) {
-    :root:not(.light-mode) {
+    :root:not([data-zen-theme]) {
       --logo-invert: invert(1);
     }
   }
@@ -282,9 +304,23 @@
   }
 </style>
 
-<div id="themeToggle">
-  <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
-</div>
+<zen-button id="themeControl" variant="quiet">
+  <button
+    id="themeToggle"
+    type="button"
+    aria-label="Change site theme"
+  >
+    <img
+      id="epiChan"
+      class="epi-logo"
+      alt=""
+      src="/public/epi_all_colors.svg"
+      height="50"
+      width="50"
+    >
+    <span id="themeName" aria-live="polite">Auto</span>
+  </button>
+</zen-button>
 
 <header>
   <h1><a href="/">MrJuneJune</a></h1>
@@ -292,7 +328,6 @@
 <script src="/index.js"></script>
 
 
-
     <div class="container">
         <h1>File Format Converter</h1>
         <p>Convert your images and videos to different formats using FFmpeg</p>