diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index ee6e1716..d47c3e2b 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -11,7 +11,7 @@ defineProps<{
   <div relative>
     <div
       sticky top-0 z10
-      border="b base" bg-base
+      border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]" backdrop-blur
     >
       <div flex justify-between px5 py4>
         <div flex gap-3 items-center overflow-hidden>
diff --git a/styles/vars.css b/styles/vars.css
index 5a12d767..eff52597 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -6,6 +6,7 @@
   --c-border-dark: #dccfcf;
 
   --c-bg-base: #fafafa;
+  --c-bg-base-rgb: 250, 250, 250;
   --c-bg-active: #f2f2f2;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
@@ -34,6 +35,7 @@
   --c-border-dark: #545251;
 
   --c-bg-base: #111;
+  --c-bg-base-rgb: 17, 17, 17;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;
   --c-bg-fade: #EA9E4411;