diff --git a/d2/style/themes/default/src/layout/dashboard/src/style.scss b/d2/style/themes/default/src/layout/dashboard/src/style.scss
index 4811c612..2f615629 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/style.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/style.scss
@@ -30,9 +30,11 @@ html, body, #app {
     >.body__header {
       @apply absolute inset-x-0 overflow-hidden break-words border-b;
       top: calc(#{--var('header-height')} + #{--var('header-border-width')});
+      padding: --var('body-padding');
     }
     >.body__footer {
       @apply absolute inset-x-0 bottom-0 overflow-hidden break-words border-t;
+      padding: --var('body-padding');
     }
     >.body__scroll {
       @apply absolute inset-0;
diff --git a/d2/style/themes/default/src/layout/dashboard/src/var.scss b/d2/style/themes/default/src/layout/dashboard/src/var.scss
index 3bef7f8c..35442d3a 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/var.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/var.scss
@@ -20,11 +20,11 @@ $color-bg-container: #FFFFFF;
 :root {
   // color
   #{--key('color-bg-app')}: $color-bg-app;
-  #{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.6);
+  #{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.5);
   #{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98);
 
   #{--key('color-bg-container')}: $color-bg-container;
-  #{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.6);
+  #{--key('color-bg-container-rgba-blur')}: rgba($color-bg-container, 0.5);
   #{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
 
   #{--key('color-bg-popup')}: #FFFFFF;
diff --git a/d2/views/dashboard/demo/layout/dashboard/custom.vue b/d2/views/dashboard/demo/layout/dashboard/custom.vue
index 715562a2..16ad858d 100644
--- a/d2/views/dashboard/demo/layout/dashboard/custom.vue
+++ b/d2/views/dashboard/demo/layout/dashboard/custom.vue
@@ -9,10 +9,10 @@
 <template>
   <d2-admin-layout-dashboard-container>
     <template #header>
-      <template v-for="n in 30" :key="n">----------</template>
+      <a-button>Button</a-button>
     </template>
     <template #footer>
-      <template v-for="n in 30" :key="n">----------</template>
+      <a-button>Button</a-button>
     </template>
     <ul>
       <li v-for="n in 100" :key="n">{{ n }}</li>