diff --git a/d2/components/d2/admin/layout/dashboard/container/index.vue b/d2/components/d2/admin/layout/dashboard/container/index.vue
index b218e37e..8dddd873 100644
--- a/d2/components/d2/admin/layout/dashboard/container/index.vue
+++ b/d2/components/d2/admin/layout/dashboard/container/index.vue
@@ -3,7 +3,7 @@
 </route>
 
 <template>
-  <d2-scroll class="body__scroll">
+  <d2-scroll ref="scrollbar" class="body__scroll">
     <div class="scroll__inner">
       <slot/>
     </div>
diff --git a/d2/components/d2/scroll/index.jsx b/d2/components/d2/scroll/index.jsx
index 1e32aada..baa6c88d 100644
--- a/d2/components/d2/scroll/index.jsx
+++ b/d2/components/d2/scroll/index.jsx
@@ -134,7 +134,8 @@ export default defineComponent({
 
     return {
       target,
-      classnames
+      classnames,
+      instance
     }
   },
   render () {
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 1cda2e18..7adaeeff 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/style.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/style.scss
@@ -25,14 +25,14 @@ html, body, #app {
   }
 
   .layout__body {
-    @apply absolute top-0 bottom-0 right-0;
+    @apply absolute top-0 bottom-0 right-0 overflow-hidden;
     left: --var('side-width');
     >.body__header {
-      @apply absolute;
+      @apply absolute inset-x-0 p-4 border-b;
       top: calc(#{--var('header-height')} + #{--var('header-border-width')});
     }
     >.body__footer {
-      @apply absolute bottom-0;
+      @apply absolute inset-x-0 bottom-0 p-4 border-t;
     }
     >.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 18392848..8e8908d4 100644
--- a/d2/style/themes/default/src/layout/dashboard/src/var.scss
+++ b/d2/style/themes/default/src/layout/dashboard/src/var.scss
@@ -21,12 +21,12 @@ $color-bg-container: #FFFFFF;
   // 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-moz')}: rgba($color-bg-app, 0.96);
+  #{--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-moz')}: rgba($color-bg-container, 0.96);
-  
+  #{--key('color-bg-container-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
+
   #{--key('color-bg-popup')}: #FFFFFF;
   #{--key('color-bg-item-hover')}: #F6F8FB;
   #{--key('color-bg-item-selected')}: #FFFFFF;