diff --git a/static/css/main.css b/static/css/main.css
index 05a7a2c..2395ecf 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -3468,106 +3468,65 @@ html {
 
 .zoom-control {
     position: fixed;
-    bottom: 20px;
+    bottom: 70px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 900;
     display: flex;
     align-items: center;
-    gap: 1rem;
-    padding: 0.75rem 1.5rem;
-    background: rgba(43, 43, 43, 0.95);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: rgba(200, 200, 200, 0.15);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
     border-radius: 50px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    opacity: 0.3;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
 }
 
 .zoom-control:hover {
-    background: rgba(43, 43, 43, 0.98);
-    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
-}
-
-/* Zoom Label with Icon */
-.zoom-label {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: white;
-    font-size: 0.9rem;
-    font-weight: 500;
-    cursor: pointer;
-    margin: 0;
-}
-
-.zoom-label iconify-icon {
-    color: var(--accent-blue);
-    flex-shrink: 0;
-}
-
-/* Screen Reader Only Text */
-.sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
-/* Slider Container */
-.zoom-slider-container {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
+    opacity: 1;
+    background: rgba(200, 200, 200, 0.25);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 /* Zoom Values (Labels) */
 .zoom-value {
-    color: rgba(255, 255, 255, 0.7);
-    font-size: 0.85rem;
-    font-weight: 500;
-    min-width: 40px;
+    color: rgba(100, 100, 100, 0.8);
+    font-size: 0.75rem;
+    font-weight: 400;
+    min-width: 30px;
     text-align: center;
 }
 
 .zoom-value-current {
-    color: white;
+    color: rgba(60, 60, 60, 0.9);
     font-weight: 600;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
+    min-width: 35px;
 }
 
 /* Range Slider Styling */
 .zoom-slider {
     -webkit-appearance: none;
     appearance: none;
-    width: 200px;
-    height: 6px;
-    border-radius: 3px;
-    background: linear-gradient(
-        to right,
-        #e74c3c 0%,
-        #f39c12 25%,
-        var(--accent-blue) 50%,
-        #3498db 75%,
-        #27ae60 100%
-    );
+    width: 180px;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(120, 120, 120, 0.3);
     outline: none;
     cursor: pointer;
-    transition: opacity 0.2s;
+    transition: all 0.2s ease;
 }
 
 .zoom-slider:hover {
-    opacity: 0.9;
+    background: rgba(120, 120, 120, 0.5);
 }
 
 .zoom-slider:focus {
-    outline: 2px solid var(--accent-blue);
+    outline: 2px solid rgba(100, 100, 100, 0.5);
     outline-offset: 2px;
 }
 
@@ -3575,60 +3534,55 @@ html {
 .zoom-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    background: white;
-    border: 2px solid var(--accent-blue);
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid rgba(100, 100, 100, 0.6);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
 }
 
 .zoom-slider::-webkit-slider-thumb:hover {
-    transform: scale(1.15);
-    box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5);
+    transform: scale(1.1);
+    background: white;
+    border-color: rgba(80, 80, 80, 0.8);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .zoom-slider::-webkit-slider-thumb:active {
     transform: scale(1.05);
-    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
 }
 
 /* Firefox Slider Thumb */
 .zoom-slider::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
     border-radius: 50%;
-    background: white;
-    border: 2px solid var(--accent-blue);
+    background: rgba(255, 255, 255, 0.95);
+    border: 2px solid rgba(100, 100, 100, 0.6);
     cursor: pointer;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    transition: all 0.2s ease;
 }
 
 .zoom-slider::-moz-range-thumb:hover {
-    transform: scale(1.15);
-    box-shadow: 0 3px 12px rgba(0, 102, 204, 0.5);
+    transform: scale(1.1);
+    background: white;
+    border-color: rgba(80, 80, 80, 0.8);
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
 
 .zoom-slider::-moz-range-thumb:active {
     transform: scale(1.05);
-    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.6);
 }
 
 /* Firefox Range Track */
 .zoom-slider::-moz-range-track {
-    height: 6px;
-    border-radius: 3px;
-    background: linear-gradient(
-        to right,
-        #e74c3c 0%,
-        #f39c12 25%,
-        var(--accent-blue) 50%,
-        #3498db 75%,
-        #27ae60 100%
-    );
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(120, 120, 120, 0.3);
 }
 
 /* Reset Button */
@@ -3636,102 +3590,71 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
-    padding: 0;
-    background: rgba(255, 255, 255, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    color: white;
+    padding: 0.25rem 0.5rem;
+    background: rgba(120, 120, 120, 0.15);
+    border: 1px solid rgba(100, 100, 100, 0.3);
+    border-radius: 4px;
+    color: rgba(80, 80, 80, 0.9);
+    font-size: 0.75rem;
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s ease;
     flex-shrink: 0;
 }
 
 .zoom-reset-btn:hover {
-    background: var(--accent-blue);
-    border-color: var(--accent-blue);
-    transform: rotate(180deg);
+    background: rgba(120, 120, 120, 0.25);
+    border-color: rgba(80, 80, 80, 0.5);
+    color: rgba(60, 60, 60, 1);
 }
 
 .zoom-reset-btn:active {
-    transform: rotate(180deg) scale(0.95);
+    transform: scale(0.95);
 }
 
 .zoom-reset-btn:focus {
-    outline: 2px solid var(--accent-blue);
+    outline: 2px solid rgba(100, 100, 100, 0.5);
     outline-offset: 2px;
 }
 
-.zoom-reset-btn svg {
-    width: 16px;
-    height: 16px;
-    stroke: currentColor;
-}
-
 /* Mobile Responsive - Smaller on mobile */
 @media (max-width: 768px) {
     .zoom-control {
-        bottom: 15px;
-        padding: 0.6rem 1.2rem;
-        gap: 0.75rem;
-        border-radius: 40px;
-    }
-
-    .zoom-label {
-        font-size: 0.85rem;
-    }
-
-    .zoom-label iconify-icon {
-        width: 18px;
-        height: 18px;
+        bottom: 50px;
+        padding: 0.4rem 0.8rem;
+        gap: 0.4rem;
     }
 
     .zoom-slider {
-        width: 150px;
-        height: 5px;
-    }
-
-    .zoom-slider::-webkit-slider-thumb {
-        width: 18px;
-        height: 18px;
-    }
-
-    .zoom-slider::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
+        width: 140px;
     }
 
     .zoom-value {
-        font-size: 0.8rem;
-        min-width: 35px;
+        font-size: 0.7rem;
+        min-width: 25px;
     }
 
     .zoom-value-current {
-        font-size: 0.9rem;
+        font-size: 0.8rem;
+        min-width: 30px;
     }
 
     .zoom-reset-btn {
-        width: 32px;
-        height: 32px;
-    }
-
-    .zoom-reset-btn svg {
-        width: 14px;
-        height: 14px;
+        font-size: 0.7rem;
+        padding: 0.2rem 0.4rem;
     }
 }
 
 /* Very Small Screens - Ultra Compact */
 @media (max-width: 480px) {
     .zoom-control {
-        bottom: 10px;
-        padding: 0.5rem 1rem;
-        gap: 0.5rem;
+        bottom: 40px;
+        padding: 0.35rem 0.7rem;
+        gap: 0.35rem;
     }
 
     .zoom-slider {
-        width: 120px;
+        width: 100px;
     }
 
     /* Hide min/max labels on very small screens */
diff --git a/static/js/main.js b/static/js/main.js
index 187f5d9..1a4a72d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -357,10 +357,10 @@
      */
     function updateZoomDisplay(zoomValue) {
         const slider = document.getElementById('zoom-slider');
-        const display = document.getElementById('zoom-display');
+        const display = document.getElementById('zoom-value-current');
 
         if (display) {
-            display.textContent = `${zoomValue}%`;
+            display.textContent = zoomValue;
         }
 
         if (slider) {
diff --git a/templates/index.html b/templates/index.html
index 5b03c05..1d16b2b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -456,44 +456,32 @@
 
     <!-- Zoom Control (Fixed Bottom Center) -->
     <div id="zoom-control" class="zoom-control no-print" role="group" aria-label="{{if eq .Lang "es"}}Control de zoom{{else}}Zoom control{{end}}">
-        <label for="zoom-slider" class="zoom-label">
-            <iconify-icon icon="mdi:magnify" width="20" height="20" aria-hidden="true"></iconify-icon>
-            <span class="sr-only">{{if eq .Lang "es"}}Nivel de zoom{{else}}Zoom level{{end}}</span>
-        </label>
+        <span class="zoom-value zoom-value-min" aria-hidden="true">50</span>
 
-        <div class="zoom-slider-container">
-            <span class="zoom-value zoom-value-min" aria-hidden="true">50%</span>
+        <input
+            type="range"
+            id="zoom-slider"
+            class="zoom-slider"
+            min="50"
+            max="200"
+            step="5"
+            value="100"
+            aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
+            aria-valuemin="50"
+            aria-valuemax="200"
+            aria-valuenow="100"
+            aria-valuetext="100%">
 
-            <input
-                type="range"
-                id="zoom-slider"
-                class="zoom-slider"
-                min="50"
-                max="200"
-                step="5"
-                value="100"
-                aria-label="{{if eq .Lang "es"}}Ajustar nivel de zoom del CV{{else}}Adjust CV zoom level{{end}}"
-                aria-valuemin="50"
-                aria-valuemax="200"
-                aria-valuenow="100"
-                aria-valuetext="100%">
+        <span id="zoom-value-current" class="zoom-value zoom-value-current" aria-live="polite">100</span>
 
-            <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>
-        </div>
+        <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}}">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
-                <path d="M21 3v5h-5"/>
-                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
-                <path d="M3 21v-5h5"/>
-            </svg>
+            100
         </button>
     </div>