diff --git a/static/css/main.css b/static/css/main.css
index 81bbd34..b646d7f 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3518,11 +3518,18 @@ html {
     background: rgba(200, 200, 200, 0.5);
     outline: none;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
 }
 
+/* Colorful gradient on hover */
+.zoom-control:hover .zoom-slider,
 .zoom-slider:hover {
-    background: rgba(220, 220, 220, 0.6);
+    background: linear-gradient(to right,
+        #ef4444 0%,    /* red */
+        #f97316 25%,   /* orange */
+        #3b82f6 50%,   /* blue */
+        #22c55e 100%   /* green */
+    );
 }
 
 .zoom-slider:focus {
@@ -3581,25 +3588,46 @@ html {
     height: 5px;
     border-radius: 3px;
     background: rgba(200, 200, 200, 0.5);
+    transition: all 0.3s ease;
 }
 
-/* Reset Button */
+/* Firefox Range Track - Colorful on hover */
+.zoom-control:hover .zoom-slider::-moz-range-track,
+.zoom-slider:hover::-moz-range-track {
+    background: linear-gradient(to right,
+        #ef4444 0%,    /* red */
+        #f97316 25%,   /* orange */
+        #3b82f6 50%,   /* blue */
+        #22c55e 100%   /* green */
+    );
+}
+
+/* Reset Button - Circular with dynamic value inside */
 .zoom-reset-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.3rem 0.6rem;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
     background: rgba(200, 200, 200, 0.3);
-    border: 1px solid rgba(220, 220, 220, 0.4);
-    border-radius: 5px;
+    border: 2px solid rgba(220, 220, 220, 0.4);
+    border-radius: 50%;
     color: rgba(255, 255, 255, 0.9);
-    font-size: 0.8rem;
-    font-weight: 600;
+    font-size: 0.75rem;
+    font-weight: 700;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
     flex-shrink: 0;
 }
 
+.zoom-reset-btn #zoom-value-current {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    min-width: auto;
+}
+
 .zoom-reset-btn:hover {
     background: rgba(220, 220, 220, 0.4);
     border-color: rgba(240, 240, 240, 0.6);
@@ -3638,8 +3666,10 @@ html {
     }
 
     .zoom-reset-btn {
+        min-width: 38px;
+        min-height: 38px;
         font-size: 0.7rem;
-        padding: 0.2rem 0.4rem;
+        padding: 0.4rem;
     }
 }
 
diff --git a/templates/index.html b/templates/index.html
index 1d16b2b..7f0c543 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -472,16 +472,15 @@
             aria-valuenow="100"
             aria-valuetext="100%">
 
-        <span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100</span>
-
         <span class="zoom-value zoom-value-max" aria-hidden="true">200</span>
 
         <button
             id="zoom-reset"
             class="zoom-reset-btn"
             aria-label="{{if eq .Lang "es"}}Restablecer zoom al 100%{{else}}Reset zoom to 100%{{end}}"
-            title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}">
-            100
+            title="{{if eq .Lang "es"}}Restablecer{{else}}Reset{{end}}"
+            aria-live="polite">
+            <span id="zoom-value-current">100</span>
         </button>
     </div>