diff --git a/static/css/main.css b/static/css/main.css
index d79fcdd..7230dc3 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -551,8 +551,8 @@ iconify-icon {
     min-height: auto; /* Changed from 100vh */
 
     /* Zoom transform properties */
-    transform-origin: top center; /* Scale from top-center to maintain header alignment */
-    transition: transform 0.08s linear; /* Immediate, smooth analog response */
+    transform-origin: center center; /* Default origin, dynamically updated by JS to viewport center */
+    transition: transform 0.08s linear, transform-origin 0s; /* Smooth zoom, instant origin change */
     will-change: transform; /* Hint browser to optimize for transforms */
 }
 
@@ -3524,7 +3524,7 @@ html {
 /* Solid blue color on hover - no gradient */
 .zoom-control:hover .zoom-slider,
 .zoom-slider:hover {
-    background: #3b82f6; /* solid blue */
+    background: rgba(145, 190, 236, 1); /* solid blue */
 }
 
 .zoom-slider:focus {
diff --git a/static/js/main.js b/static/js/main.js
index b663b88..4a33cbc 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -330,20 +330,30 @@
         // Convert percentage to scale factor (100 = 1.0, 150 = 1.5, etc.)
         const newScale = zoomValue / 100;
 
-        // Calculate scale ratio for scroll adjustment
-        const scaleRatio = newScale / currentScale;
-
-        // Preserve visual position by adjusting scroll proportionally
+        // Zoom from the center of the viewport (user's current viewing position)
         requestAnimationFrame(() => {
             const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+            const viewportHeight = window.innerHeight;
+
+            // Calculate the point in the page that's at the center of the viewport
+            const viewportCenter = scrollTop + (viewportHeight / 2);
+
+            // Calculate the percentage of the page height where the viewport center is
+            const pageHeight = cvPaper.scrollHeight;
+            const centerPercent = (viewportCenter / pageHeight) * 100;
+
+            // Set transform-origin to the viewport center so zoom happens from where you're looking
+            cvPaper.style.transformOrigin = `center ${centerPercent}%`;
 
             // Apply transform
             cvPaper.style.transform = `scale(${newScale})`;
 
-            // Adjust scroll position to maintain visual stability
-            // When zooming in (scaleRatio > 1), scroll more to keep same content visible
-            // When zooming out (scaleRatio < 1), scroll less
-            const newScrollTop = scrollTop * scaleRatio;
+            // Adjust scroll to keep the same content at viewport center
+            // The content position scales with the zoom, so adjust accordingly
+            const scaleRatio = newScale / currentScale;
+            const newViewportCenter = viewportCenter * scaleRatio;
+            const newScrollTop = newViewportCenter - (viewportHeight / 2);
+
             window.scrollTo(0, newScrollTop);
 
             // Update display