diff --git a/static/css/main.css b/static/css/main.css
index 9028d7c..323dc87 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2823,13 +2823,32 @@ html {
 }
 
 /* ========================================
-   Info Button (Bottom Left)
+   Fixed Buttons Container - Flexbox Layout
    ======================================== */
 
-.info-button {
+.fixed-buttons-container {
     position: fixed;
+    left: 2rem; /* LEFT SIDE - buttons grow bottom to top */
     bottom: 2rem;
-    left: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem; /* 16px gap between buttons */
+    align-items: center;
+    z-index: 99;
+}
+
+/* All buttons inside container - shared styles */
+.fixed-buttons-container > button,
+.fixed-buttons-container .info-button,
+.fixed-buttons-container .shortcuts-btn,
+.fixed-buttons-container .zoom-toggle-btn,
+.fixed-buttons-container .print-friendly-btn,
+.fixed-buttons-container .download-btn {
+    position: relative !important; /* Override fixed positioning */
+    top: auto !important;
+    bottom: auto !important;
+    left: auto !important;
+    right: auto !important;
     width: 50px;
     height: 50px;
     background: var(--black-bar);
@@ -2841,9 +2860,15 @@ html {
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    z-index: 99;
     transition: all 0.3s ease;
-    opacity: 0.6; /* Increased from 0.2 for better discoverability */
+    opacity: 0.6;
+    margin: 0; /* Remove any margins */
+}
+
+/* Legacy selector for backwards compatibility */
+.info-button {
+    background: var(--black-bar);
+    color: white;
 }
 
 .info-button:hover {
@@ -2863,71 +2888,102 @@ html {
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
 }
 
-/* Mobile adjustments - Flexbox button layout at bottom center */
+/* Hover states for all buttons in container */
+.fixed-buttons-container .info-button:hover,
+.fixed-buttons-container .info-button.at-bottom {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #27ae60;
+}
+
+.fixed-buttons-container .shortcuts-btn:hover,
+.fixed-buttons-container .shortcuts-btn.at-bottom {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #f39c12; /* Orange */
+}
+
+.fixed-buttons-container .zoom-toggle-btn:hover {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #3498db; /* Blue */
+}
+
+.fixed-buttons-container .print-friendly-btn:hover,
+.fixed-buttons-container .print-friendly-btn.print-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: white;
+    color: #27ae60;
+}
+
+.fixed-buttons-container .print-friendly-btn:hover iconify-icon,
+.fixed-buttons-container .print-friendly-btn.print-hover-sync iconify-icon {
+    color: #27ae60;
+}
+
+.fixed-buttons-container .download-btn:hover,
+.fixed-buttons-container .download-btn.pdf-hover-sync {
+    opacity: 1;
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+    background: #cd6060; /* PDF red */
+}
+
+.fixed-buttons-container .download-btn iconify-icon {
+    filter: brightness(0) invert(1); /* Always white */
+}
+
+/* Mobile adjustments - Horizontal flexbox layout at bottom center */
 @media (max-width: 900px) {
-    /* Hide only zoom control on mobile */
+    /* Hide only zoom button and control on mobile */
+    .fixed-buttons-container .zoom-toggle-btn,
     .zoom-toggle-btn,
     .zoom-control {
         display: none !important;
     }
 
-    /* Reset fixed positioning for all buttons on mobile */
-    .download-btn,
-    .print-friendly-btn,
-    .shortcuts-btn,
-    .info-button,
-    .back-to-top {
-        position: fixed !important;
-        bottom: 1.5rem !important;
-        left: auto !important;
-        right: auto !important;
+    /* Change container to horizontal layout at bottom center */
+    .fixed-buttons-container {
+        flex-direction: row; /* Horizontal on mobile */
+        right: auto;
+        left: 50%;
+        transform: translateX(-50%); /* Center the container */
+        bottom: 1.5rem;
+        gap: 10px; /* Smaller gap on mobile */
+    }
+
+    /* Buttons maintain same size and styles from desktop */
+    .fixed-buttons-container > button,
+    .fixed-buttons-container .info-button,
+    .fixed-buttons-container .shortcuts-btn,
+    .fixed-buttons-container .print-friendly-btn,
+    .fixed-buttons-container .download-btn {
         width: 50px !important;
         height: 50px !important;
         opacity: 0.7 !important;
-        transform: none !important;
     }
 
-    /* Flexbox container behavior - buttons arrange themselves */
-    /* Buttons will be positioned using JavaScript or individual positioning */
-    /* For now, use fixed spacing from center */
-
-    /* 4 buttons: Download, Print, Shortcuts, Info */
-    /* Spacing: 10px gap between buttons, centered horizontally */
-    /* Total width: 4 * 50px + 3 * 10px = 230px */
-    /* Start position: 50% - 115px */
-
-    .download-btn {
-        left: calc(50% - 115px) !important; /* First button: center - (230px/2) */
-    }
-
-    .print-friendly-btn {
-        left: calc(50% - 55px) !important; /* Second button: center - (230px/2) + 50px + 10px */
-    }
-
-    .shortcuts-btn {
-        left: calc(50% + 5px) !important; /* Third button: center - (230px/2) + 110px + 20px */
-    }
-
-    .info-button {
-        left: calc(50% + 65px) !important; /* Fourth button: center - (230px/2) + 170px + 30px */
-    }
-
-    /* Hover effects - only Y transform */
-    .download-btn:hover,
+    /* Hover effects */
+    .fixed-buttons-container > button:hover,
+    .fixed-buttons-container .info-button:hover,
+    .fixed-buttons-container .shortcuts-btn:hover,
+    .fixed-buttons-container .print-friendly-btn:hover,
+    .fixed-buttons-container .download-btn:hover,
     .download-btn.pdf-hover-sync,
-    .print-friendly-btn:hover,
-    .print-friendly-btn.print-hover-sync,
-    .shortcuts-btn:hover,
-    .info-button:hover {
-        transform: translateY(-3px) !important;
+    .print-friendly-btn.print-hover-sync {
         opacity: 1 !important;
+        transform: translateY(-3px) !important;
     }
 
-    /* Keep at-bottom state without transform */
+    /* At-bottom state */
     .info-button.at-bottom,
     .shortcuts-btn.at-bottom {
         opacity: 1 !important;
-        transform: none !important;
     }
 }
 
diff --git a/templates/index.html b/templates/index.html
index b79e41c..15bf90b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -136,12 +136,15 @@
     </div> <!-- End zoom-wrapper -->
 
     {{template "error-toast" .}}
+    <!-- Fixed buttons container - Flexbox layout (desktop: right side bottom-to-top, mobile: bottom center horizontal) -->
+    <div class="fixed-buttons-container">
+        {{template "info-button" .}}
+        {{template "shortcuts-button" .}}
+        {{template "zoom-toggle-button" .}}
+        {{template "print-friendly-button" .}}
+        {{template "download-button" .}}
+    </div>
     {{template "back-to-top" .}}
-    {{template "info-button" .}}
-    {{template "download-button" .}}
-    {{template "print-friendly-button" .}}
-    {{template "zoom-toggle-button" .}}
-    {{template "shortcuts-button" .}}
     {{template "info-modal" .}}
     {{template "shortcuts-modal" .}}
     {{template "pdf-modal" .}}