diff --git a/frontend/templates/components/history_section.html b/frontend/templates/components/history_section.html
index 80fda827..77a99447 100644
--- a/frontend/templates/components/history_section.html
+++ b/frontend/templates/components/history_section.html
@@ -755,6 +755,8 @@
         width: 100%;
         box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
         border-top: 1px solid rgba(90, 109, 137, 0.3);
+        z-index: 1010;
+        background: rgba(22, 26, 34, 0.95); /* Slightly more opaque background */
     }
     
     /* Desktop styling (default) */
@@ -834,7 +836,8 @@
             justify-content: center;
             width: 100%;
             padding: 10px 30px; /* Add horizontal padding to move buttons inward */
-            z-index: 1000;
+            z-index: 1010; /* Increased z-index to ensure buttons appear above other elements */
+            position: relative; /* Ensure proper stacking context */
         }
         
         .pagination-button {
@@ -851,7 +854,7 @@
         /* Ensure the table wrapper doesn't overflow in mobile */
         .modern-table-wrapper {
             max-height: calc(100vh - 300px);
-            padding-bottom: 60px; /* Add padding to ensure content isn't hidden under pagination */
+            padding-bottom: 100px; /* Increased padding to ensure pagination buttons aren't cut off */
         }
         
         /* Fix for small screen height */
@@ -861,6 +864,13 @@
                 bottom: 0 !important;
                 left: 0 !important;
                 width: 100% !important;
+                z-index: 1010 !important; /* Ensure high z-index */
+                background: rgba(22, 26, 34, 0.95) !important; /* Consistent background */
+            }
+            
+            /* Additional padding for smaller screens */
+            .modern-table-wrapper {
+                padding-bottom: 120px !important; /* Even more padding for very small screens */
             }
         }
     }