diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 1b3de65e..fe2d2771 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -9,7 +9,8 @@ defineProps<{
     <div
       sticky top-0 z10
       border="b base"
-      backdrop="blur-10px brightness-120 dark:brightness-80"
+      class="bg-base dark:bg-transparent"
+      backdrop="dark:blur-10px dark:brightness-30"
       :class="isZenMode ? 'op0 hover:op100 transition duration-300' : ''"
     >
       <div flex justify-between px5 py4>
diff --git a/components/nav/NavBottom.vue b/components/nav/NavBottom.vue
index 08222ede..ac81989a 100644
--- a/components/nav/NavBottom.vue
+++ b/components/nav/NavBottom.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <nav h-14 fixed bottom-0 left-0 right-0 z-50 border="t base" backdrop="blur-10px brightness-120 dark:brightness-80" flex flex-row>
+  <nav h-14 fixed bottom-0 left-0 right-0 z-50 border="t base" bg-base flex flex-row>
     <template v-if="currentUser">
       <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
         <div i-ri:home-5-line />