diff --git a/src/components/LiquidHandle.vue b/src/components/LiquidHandle.vue
new file mode 100644
index 0000000..52ddf84
--- /dev/null
+++ b/src/components/LiquidHandle.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="liquid_contaienr"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.liquid_contaienr {
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 16px;
+}
+</style>
diff --git a/src/components/Progress.vue b/src/components/Progress.vue
new file mode 100644
index 0000000..e708a75
--- /dev/null
+++ b/src/components/Progress.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="progress_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.progress_container {
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 16px;
+}
+</style>
diff --git a/src/components/Setting.vue b/src/components/Setting.vue
new file mode 100644
index 0000000..c892ab2
--- /dev/null
+++ b/src/components/Setting.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="setting_contaienr">
+    <div class="left_container"></div>
+    <div class="right_container"></div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.setting_contaienr {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  .left_container {
+    height: 580px;
+    width: 424px;
+    margin-right: 30px;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+  }
+  .right_container {
+    height: 580px;
+    flex: 1;
+    box-sizing: border-box;
+    border-radius: 16px;
+    background: #ffffff;
+  }
+}
+</style>
diff --git a/src/components/Test.vue b/src/components/Test.vue
new file mode 100644
index 0000000..7330a56
--- /dev/null
+++ b/src/components/Test.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="test_container"></div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.test_container {
+  margin-bottom: 30px;
+  height: 580px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 16px;
+}
+</style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 51e2d3b..31946ff 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -119,6 +119,10 @@
       </div>
     </div>
     <Operator v-if="activeTab == 1" />
+    <!-- <Progress v-if="activeTab == 1" /> -->
+    <LiquidHandle v-if="[2, 3].includes(activeTab)" />
+    <Test v-if="activeTab == 4" />
+    <Setting v-if="activeTab == 5" />
     <div class="other_info">
       <p>IP192.0.0.0.0</p>
       <p>2023-8-23 11:40:20</p>
@@ -129,6 +133,10 @@
 <script setup>
 import { ref } from 'vue'
 import Operator from 'cpns/Operator'
+import Progress from 'cpns/Progress'
+import LiquidHandle from 'cpns/LiquidHandle'
+import Setting from 'cpns/Setting'
+import Test from 'cpns/Test'
 const activeTab = ref(1)
 
 const changeTab = index => {