diff --git a/app/portable.py b/app/portable.py
index b27509b..704bb00 100644
--- a/app/portable.py
+++ b/app/portable.py
@@ -162,35 +162,103 @@ html = """
             right: 10px;
         }
 
-        .dark-mode-toggle input { display: none; }
+        .dark-mode-toggle input {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
 
         .dark-mode-toggle label {
             cursor: pointer;
-            text-indent: -9999px;
-            width: 52px;
-            height: 27px;
-            background: grey;
+            width: 54px;
+            height: 28px;
+            background: #cbd5e1;
             display: block;
             border-radius: 100px;
             position: relative;
+            transition: background-color 0.3s, border-color 0.3s;
+            border: 1px solid #b8c2cc;
         }
 
-        .dark-mode-toggle label:after {
-            content: '';
+        .dark-mode-toggle label:hover {
+            background: #b8c2cc;
+            border-color: #a1b0be;
+        }
+
+        .dark-mode-toggle input:focus-visible + label {
+            outline: 2px solid #a327f0;
+            outline-offset: 3px;
+        }
+
+        body.dark-mode .dark-mode-toggle input:focus-visible + label {
+            outline-color: #7359f8;
+        }
+
+        .dark-mode-toggle .thumb {
             position: absolute;
             top: 2px;
             left: 2px;
-            width: 23px;
-            height: 23px;
+            width: 22px;
+            height: 22px;
             background: #fff;
-            border-radius: 90px;
-            transition: 0.3s;
+            border-radius: 50%;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s, box-shadow 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
         }
 
-        .dark-mode-toggle input:checked+label { background: #7359f8; }
-        .dark-mode-toggle input:checked+label:after {
-            left: calc(100% - 2px);
-            transform: translateX(-100%);
+        .dark-mode-toggle input:checked+label {
+            background: #312e81;
+            border-color: #4338ca;
+        }
+
+        .dark-mode-toggle input:checked+label:hover {
+            background: #2e2a78;
+            border-color: #3b379d;
+        }
+
+        .dark-mode-toggle input:checked+label .thumb {
+            transform: translateX(26px);
+            background: #1e1b4b;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 8px rgba(99, 102, 241, 0.4);
+        }
+
+        .dark-mode-toggle .icon {
+            position: absolute;
+            width: 14px;
+            height: 14px;
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+        }
+
+        .dark-mode-toggle .icon.sun {
+            color: #ea580c;
+            opacity: 1;
+            transform: scale(1) rotate(0deg);
+        }
+
+        .dark-mode-toggle .icon.moon {
+            color: #4f46e5;
+            opacity: 0;
+            transform: scale(0) rotate(-90deg);
+        }
+
+        .dark-mode-toggle input:checked+label .icon.sun {
+            opacity: 0;
+            transform: scale(0) rotate(90deg);
+        }
+
+        .dark-mode-toggle input:checked+label .icon.moon {
+            color: #c7d2fe;
+            opacity: 1;
+            transform: scale(1) rotate(0deg);
         }
 
         @media only screen and (max-width: 600px) {
@@ -324,7 +392,24 @@ html = """
 <body>
     <div class="dark-mode-toggle">
         <input type="checkbox" id="dark-mode-toggle">
-        <label for="dark-mode-toggle" title="{{ toggle_dark_mode }}"></label>
+        <label for="dark-mode-toggle" title="{{ toggle_dark_mode }}">
+            <span class="thumb">
+                <svg class="icon sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="5"></circle>
+                    <line x1="12" y1="1" x2="12" y2="3"></line>
+                    <line x1="12" y1="21" x2="12" y2="23"></line>
+                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                    <line x1="1" y1="12" x2="3" y2="12"></line>
+                    <line x1="21" y1="12" x2="23" y2="12"></line>
+                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                </svg>
+                <svg class="icon moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                </svg>
+            </span>
+        </label>
     </div>
 
     <div id="form-view">