diff --git a/core/scripts/webpanel/assets/css/custom.css b/core/scripts/webpanel/assets/css/custom.css
index e654c66..d3eee8d 100644
--- a/core/scripts/webpanel/assets/css/custom.css
+++ b/core/scripts/webpanel/assets/css/custom.css
@@ -136,6 +136,13 @@ body:not(.dark-mode) .card-header {
   border-bottom: 1px solid var(--border-color-light);
   padding: 0.75rem 1.25rem;
   color: var(--text-dark); /* Ensure header text is dark */
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.75); /* semi-transparent for bokeh */
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px); /* Safari support */
+  transition: background 0.3s;
 }
 body:not(.dark-mode) .card-title {
   font-weight: 600;
@@ -305,6 +312,12 @@ body.dark-mode .card-header {
   border-bottom: 1px solid var(--dark-navy-border) !important;
   color: var(--dark-text-primary);
   padding: 0.75rem 1.25rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px); /* Safari support */
+  transition: background 0.3s;
 }
 body.dark-mode .card-body { padding: 1.25rem; }