diff --git a/src/components/custom/ShadowCard/index.vue b/src/components/custom/ShadowCard/index.vue
new file mode 100644
index 00000000..4be52e07
--- /dev/null
+++ b/src/components/custom/ShadowCard/index.vue
@@ -0,0 +1,8 @@
+<template>
+  <div class="bg-light dark:bg-dark rounded-16px">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+<style scoped></style>
diff --git a/src/components/custom/index.ts b/src/components/custom/index.ts
index 52d517bf..7cd335f7 100644
--- a/src/components/custom/index.ts
+++ b/src/components/custom/index.ts
@@ -2,5 +2,6 @@ import CountTo from './CountTo/index.vue';
 import IconClose from './IconClose/index.vue';
 import ButtonTab from './ButtonTab/index.vue';
 import ChromeTab from './ChromeTab/index.vue';
+import ShadowCard from './ShadowCard/index.vue';
 
-export { CountTo, IconClose, ButtonTab, ChromeTab };
+export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard };
diff --git a/src/components/index.ts b/src/components/index.ts
index 94a251f2..e8293fd4 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,2 @@
 export { AppProviderContent, SystemLogo, ExceptionSvg, LoginBg, BannerSvg, HoverContainer } from './common';
-export { CountTo, IconClose, ButtonTab, ChromeTab } from './custom';
+export { CountTo, IconClose, ButtonTab, ChromeTab, ShadowCard } from './custom';
diff --git a/src/layouts/BasicLayout/components/GlobalContent/index.vue b/src/layouts/BasicLayout/components/GlobalContent/index.vue
index 5e11bd45..dc156f98 100644
--- a/src/layouts/BasicLayout/components/GlobalContent/index.vue
+++ b/src/layouts/BasicLayout/components/GlobalContent/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex-1 flex-col-stretch p-10px bg-[#F6F9F8] dark:bg-black"
+    class="flex-1 flex-col-stretch p-16px bg-[#F6F9F8] dark:bg-black"
     :class="{ 'overflow-hidden': routeProps.fullPage }"
   >
     <router-view v-slot="{ Component, route }">
diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue
index a87e4afc..6a2f7a14 100644
--- a/src/views/dashboard/workbench/index.vue
+++ b/src/views/dashboard/workbench/index.vue
@@ -1,15 +1,32 @@
 <template>
-  <div class="p-6px">
-    <div class="flex justify-between h-360px">
-      <div class="flex-1 min-w-360px h-full bg-white dark:bg-dark rounded-16px"></div>
-      <div class="w-16px"></div>
-      <div class="w-360px h-full bg-white dark:bg-dark rounded-16px"></div>
-    </div>
-  </div>
+  <n-space :vertical="true" :size="16">
+    <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
+      <n-grid-item span="s:24 m:16">
+        <shadow-card class="h-360px"></shadow-card>
+      </n-grid-item>
+      <n-grid-item span="s:24 m:8">
+        <shadow-card class="h-360px"></shadow-card>
+      </n-grid-item>
+    </n-grid>
+    <n-grid cols="s:2 m:4" responsive="screen" :x-gap="16" :y-gap="16">
+      <n-grid-item v-for="i in 4" :key="i">
+        <shadow-card class="h-100px"></shadow-card>
+      </n-grid-item>
+    </n-grid>
+    <n-grid :x-gap="16" :y-gap="16" :item-responsive="true" responsive="screen">
+      <n-grid-item span="s:24 m:8">
+        <shadow-card class="h-360px"></shadow-card>
+      </n-grid-item>
+      <n-grid-item span="s:24 m:16">
+        <shadow-card class="h-360px"></shadow-card>
+      </n-grid-item>
+    </n-grid>
+  </n-space>
 </template>
 
 <script lang="ts" setup>
-// import { ref } from 'vue';
+import { NSpace, NGrid, NGridItem } from 'naive-ui';
+import { ShadowCard } from '@/components';
 // import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
 </script>
 <style scoped></style>