diff --git a/index.html b/satellite-data-monitor-platform.html
similarity index 79%
rename from index.html
rename to satellite-data-monitor-platform.html
index f6e5ac7..fe41137 100644
--- a/index.html
+++ b/satellite-data-monitor-platform.html
@@ -4,12 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>卫星数据监控平台</title>
   </head>
   <body class="w-h-full">
     <div id="app" class="w-h-full text-white"></div>
     <!-- <script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=2kUpEHlAoBchlLZh5zpVncLF"></script> -->
     <script src="https://bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
-    <script type="module" src="/src/render/main.ts"></script>
+    <script type="module" src="/src/render/satellite-data-monitor-platform.ts"></script>
   </body>
 </html>
diff --git a/planisphere.html b/satellite-info-monitor-platform.html
similarity index 69%
rename from planisphere.html
rename to satellite-info-monitor-platform.html
index ca7d038..79d8ec3 100644
--- a/planisphere.html
+++ b/satellite-info-monitor-platform.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>卫星信息监控平台</title>
   </head>
   <body class="w-h-full">
     <div id="app" class="w-h-full text-white"></div>
-    <script type="module" src="/src/render/planisphere.ts"></script>
+    <script type="module" src="/src/render/satellite-info-monitor-platform.ts"></script>
   </body>
 </html>
diff --git a/satellite-signal-monitor-platform.html b/satellite-signal-monitor-platform.html
new file mode 100644
index 0000000..a9c5da2
--- /dev/null
+++ b/satellite-signal-monitor-platform.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html class="w-h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>卫星信号监控平台</title>
+  </head>
+  <body class="w-h-full">
+    <div id="app" class="w-h-full text-white"></div>
+    <script type="module" src="/src/render/satellite-signal-monitor-platform.ts"></script>
+  </body>
+</html>
diff --git a/snr.html b/satellite-state-monitor-platform.html
similarity index 69%
rename from snr.html
rename to satellite-state-monitor-platform.html
index 7b81810..3908ece 100644
--- a/snr.html
+++ b/satellite-state-monitor-platform.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>卫星状态监控平台</title>
   </head>
   <body class="w-h-full">
     <div id="app" class="w-h-full text-white"></div>
-    <script type="module" src="/src/render/snr.ts"></script>
+    <script type="module" src="/src/render/satellite-state-monitor-platform.ts"></script>
   </body>
 </html>
diff --git a/src/render/page/DataMonitorPage.vue b/src/render/page/DataMonitorPage.vue
new file mode 100644
index 0000000..48b33a2
--- /dev/null
+++ b/src/render/page/DataMonitorPage.vue
@@ -0,0 +1,42 @@
+<template>
+  <full-screen-container>
+    <TheHeader title="卫星数据监控平台" />
+
+    <div class="main-content flex flex-1 flex-col">
+      <DigitalFlopContainer />
+
+      <div class="block-left-right-content flex flex-1 mt-5">
+        <div class="block-left-content w-1/5 flex flex-col">
+          <div class="clock-content mb-2 flex-1">
+            <Clock />
+          </div>
+          <div class="compass-content mb-2 flex-1">
+            <Compass />
+          </div>
+          <div class="water-level-content flex-1">
+            <WaterLevel />
+          </div>
+        </div>
+        <div class="block-right-content ml-2 flex flex-1">
+          <Map />
+        </div>
+      </div>
+    </div>
+  </full-screen-container>
+</template>
+
+<script lang="ts" setup>
+import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
+import TheHeader from '../components/Layout/TheHeader.vue'
+import DigitalFlopContainer from '../components/DigitalFlopContainer.vue'
+import Clock from '../components/Clock.vue'
+import Compass from '../components/Compass.vue'
+import WaterLevel from '../components/WaterLevel.vue'
+import Map from '../components/Map.vue'
+</script>
+
+<style scoped>
+.clock-content, .compass-content, .water-level-content, .block-right-content {
+  background-color: rgba(6,30,93,.5);
+}
+</style>
\ No newline at end of file
diff --git a/src/render/page/InfoMonitorPage.vue b/src/render/page/InfoMonitorPage.vue
new file mode 100644
index 0000000..46888b8
--- /dev/null
+++ b/src/render/page/InfoMonitorPage.vue
@@ -0,0 +1,18 @@
+<template>
+  <full-screen-container>
+    <TheHeader title="卫星信息监控平台" />
+
+    <div class="main-content flex-1 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
+      <div>1</div>
+      <div>2</div>
+      <div class="row-span-2">3</div>
+      <div>4</div>
+      <div>5</div>
+    </div>
+  </full-screen-container>
+</template>
+
+<script lang="ts" setup>
+import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
+import TheHeader from '../components/Layout/TheHeader.vue'
+</script>
diff --git a/src/render/page/SNRPage.vue b/src/render/page/SignalMonitorPage.vue
similarity index 100%
rename from src/render/page/SNRPage.vue
rename to src/render/page/SignalMonitorPage.vue
diff --git a/src/render/page/PlanispherePage.vue b/src/render/page/StateMonitorPage.vue
similarity index 100%
rename from src/render/page/PlanispherePage.vue
rename to src/render/page/StateMonitorPage.vue
diff --git a/src/render/planisphere.ts b/src/render/satellite-data-monitor-platform.ts
similarity index 67%
rename from src/render/planisphere.ts
rename to src/render/satellite-data-monitor-platform.ts
index 1b0b613..22f2b63 100644
--- a/src/render/planisphere.ts
+++ b/src/render/satellite-data-monitor-platform.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './page/PlanispherePage.vue'
+import App from './page/DataMonitorPage.vue'
 
 import './assets/css/main.css'
 
diff --git a/src/render/snr.ts b/src/render/satellite-info-monitor-platform.ts
similarity index 67%
rename from src/render/snr.ts
rename to src/render/satellite-info-monitor-platform.ts
index 58f4d20..5e6558a 100644
--- a/src/render/snr.ts
+++ b/src/render/satellite-info-monitor-platform.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './page/SNRPage.vue'
+import App from './page/InfoMonitorPage.vue'
 
 import './assets/css/main.css'
 
diff --git a/src/render/satellite-signal-monitor-platform.ts b/src/render/satellite-signal-monitor-platform.ts
new file mode 100644
index 0000000..7aeed74
--- /dev/null
+++ b/src/render/satellite-signal-monitor-platform.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './page/SignalMonitorPage.vue'
+
+import './assets/css/main.css'
+
+createApp(App).mount('#app')
diff --git a/src/render/main.ts b/src/render/satellite-state-monitor-platform.ts
similarity index 67%
rename from src/render/main.ts
rename to src/render/satellite-state-monitor-platform.ts
index c69b1e3..5b149a9 100644
--- a/src/render/main.ts
+++ b/src/render/satellite-state-monitor-platform.ts
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './page/StateMonitorPage.vue'
 
 import './assets/css/main.css'