diff --git a/public/bg-d.png b/public/bg-d.png
new file mode 100644
index 00000000..1edbed1e
Binary files /dev/null and b/public/bg-d.png differ
diff --git a/public/bg-l.png b/public/bg-l.png
new file mode 100644
index 00000000..9a1d3c56
Binary files /dev/null and b/public/bg-l.png differ
diff --git a/src/components/DrawerComponent.vue b/src/components/DrawerComponent.vue
index 2c01171e..e4b7c72d 100644
--- a/src/components/DrawerComponent.vue
+++ b/src/components/DrawerComponent.vue
@@ -121,6 +121,7 @@ function branchSetting() {}
     side="left"
     :breakpoint="599"
     class="column justify-between no-wrap"
+    :class="{ dark: $q.dark.isActive }"
     :width="mini ? 80 : 256"
     show-if-above
   >
@@ -254,7 +255,13 @@ function branchSetting() {}
 
 :deep(.q-drawer__content) {
   border-radius: var(--radius-2);
-  background: var(--surface-1);
+  background-color: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(11.2px);
+  -webkit-backdrop-filter: blur(11.2px);
+
+  &.dark {
+    background-color: hsla(var(--gray-10-hsl) / 0.5);
+  }
 }
 
 .dot {
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 602bf8c3..946cd9fb 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -178,7 +178,12 @@ onMounted(async () => {
 </script>
 
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout
+    view="lHh Lpr lFf"
+    class="bg"
+    :class="{ dark: $q.dark.isActive }"
+    :style="`background-size: ${$q.screen.gt.sm ? '100% 100%' : 'cover'}`"
+  >
     <drawer-component
       :mini="leftDrawerMini"
       v-model:left-drawer-open="leftDrawerOpen"
@@ -222,12 +227,12 @@ onMounted(async () => {
       </div>
 
       <div
-        class="surface-0 scroll column"
+        class="scroll column"
         style="height: 100vh; flex-wrap: nowrap; padding-bottom: var(--size-4)"
       >
         <!-- header -->
         <div
-          class="q-px-lg surface-0 row items-center justify-start q-pb-md q-pt-lg"
+          class="q-px-lg row items-center justify-start q-pb-md q-pt-lg"
           style="position: sticky; top: 0; z-index: 8"
         >
           <q-btn
@@ -486,6 +491,15 @@ onMounted(async () => {
 </template>
 
 <style scoped>
+.bg {
+  background-image: url('bg-l.png');
+  background-repeat: no-repeat;
+
+  &.dark {
+    background-image: url('bg-d.png');
+  }
+}
+
 .text-stone {
   --_color: var(--stone-5);
   color: var(--_color);