diff --git a/web/monit_web/src/components/Header.vue b/web/monit_web/src/components/Header.vue
new file mode 100644
index 0000000..df44373
--- /dev/null
+++ b/web/monit_web/src/components/Header.vue
@@ -0,0 +1,16 @@
+<template>
+  <el-header>Header</el-header>
+</template>
+
+<script>
+export default {
+  name: "Header"
+}
+</script>
+
+<style scoped>
+.el-header{
+  background-color: #282C34;
+}
+
+</style>
\ No newline at end of file
diff --git a/web/monit_web/src/components/Sidebar.vue b/web/monit_web/src/components/Sidebar.vue
new file mode 100644
index 0000000..ed55ab9
--- /dev/null
+++ b/web/monit_web/src/components/Sidebar.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Sidebar.vue"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/web/monit_web/src/view/home/Home.vue b/web/monit_web/src/view/home/Home.vue
index db38cb7..e32b570 100644
--- a/web/monit_web/src/view/home/Home.vue
+++ b/web/monit_web/src/view/home/Home.vue
@@ -1,7 +1,20 @@
 <template>
-<div>
-    我是home组件
-</div>
+   <div class="common-layout">
+    <el-container>
+      <el-header>
+        <div class="icon">
+          图标
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside width="200px">Aside</el-aside>
+        <el-container>
+          <el-main>Main</el-main>
+          <el-footer>Footer</el-footer>
+        </el-container>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 
 <script>
@@ -14,5 +27,25 @@ export default {
 </script>
 
 <style scoped>
+.el-header{
+  background-color: #67C23A;
+  height: 75px;
+}
+.el-aside{
+  width: 10%;
+  height: 1000px;
+  background-color: #324157;
+}
+.icon{
+  margin-top: 5px;
+  margin-left: 0px;
+  background-color: #dddddd;
+  height: 50px;
+  width: 50px;
+  line-height: 45px;
+  text-align: center;
+  border-radius: 5px;
+  border:1px solid #42b983;
+}
 
 </style>
\ No newline at end of file