diff --git a/frontend/src/views/Overview/Overview.vue b/frontend/src/views/Overview/Overview.vue
index 1ddf323f37332821492a494ea6f31bf4535cf377..ad830b888516cd896beff3ecce12772fda97471a 100644
--- a/frontend/src/views/Overview/Overview.vue
+++ b/frontend/src/views/Overview/Overview.vue
@@ -1,10 +1,54 @@
 <template>
-    <div>
-        <p>overview page</p>
+    <div class="content">
+        <div class="total">
+            <p>total</p>
+        </div>
+        <div class="recent">
+            <p>recent message</p>
+        </div>
+        <div class="depart">
+            <p>department chart</p>
+        </div>
     </div>
 </template>
   
 <script setup lang="ts">
 </script>
   
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    .total {
+        width: 48%;
+        height: 45%;
+
+    }
+
+    .recent {
+        width: 48%;
+        height: 45%;
+
+        .message {
+            position: relative;
+            z-index: 2;
+            justify-content: start;
+            background-color: #fff;
+            color: rgb(11, 35, 117);
+            font-size: 16px;
+            width: 100%;
+            height: 13%;
+            // padding: 2.6%;
+            box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    .depart {
+        width: 100%;
+        height: 55%;
+    }
+}
+</style>
\ No newline at end of file