diff --git a/packages/stage/src/layouts/default.vue b/packages/stage/src/layouts/default.vue
index f7b1d18ba..f2950048a 100644
--- a/packages/stage/src/layouts/default.vue
+++ b/packages/stage/src/layouts/default.vue
@@ -1,5 +1,19 @@
+<script setup lang="ts">
+import { useScreenSafeArea } from '@vueuse/core'
+
+const { top, right, bottom, left } = useScreenSafeArea()
+</script>
+
 <template>
-  <main text="gray-700 dark:gray-200" h-full font-sans>
+  <main
+    text="gray-700 dark:gray-200" h-full font-sans
+    :style="{
+      paddingTop: `${top.value}px`,
+      paddingRight: `${right.value}px`,
+      paddingBottom: `${bottom.value}px`,
+      paddingLeft: `${left.value}px`,
+    }"
+  >
     <RouterView />
   </main>
 </template>