diff --git a/index.html b/index.html
index 659a4a2..6886d5b 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,95 @@
 <!DOCTYPE html>
 <html>
-    <meta charset="UTF-8">
 <head>
-    <title>服务器状态监控</title>
+<meta charset="UTF-8">
+<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" name="viewport">
+<title>服务器状态监控</title>
+<style>
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f2f6fc;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    background-color: #b6a0ff;
+    color: #fff;
+    padding: 10px;
+    margin-top: 30px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.2);
+}
+
+/* 容器样式 */
+.container {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 30px;
+	max-width: 1200px;
+    margin: 0 auto;
+	box-shadow: 3px 11px 9px 3px rgba(0, 0, 0, 0.1);
+}
+
+iframe {
+    border: none;
+    width: 100%;
+    height: 500px;
+}
+
+/* 导航栏样式 */
+.navbar {
+    background-color: rgb(229 240 255);
+    color: #4d4d4d;
+    padding: 15px;
+	border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+.navbar-logo {
+    text-decoration: none;
+    color: #494949;
+    font-size: 30px;
+    font-weight: bold;
+}
+
+
+/* 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
+@media (max-width: 800px) {
+    .container {
+        display: block;
+    }
+}
+
+/* 屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
+@media (max-width: 400px) {
+    .navbar {
+        display: block;
+    }
+}
+</style>
 </head>
 <body>
+<nav class="navbar" id="navbar">
+    <a class="navbar-logo">服务器状态</a>
+</nav>
+<div class="container">
     <h1>CPU 占用</h1>
-    <iframe src="https://chart-embed.service.newrelic.com/herald/eebfb59f-13d8-48d0-a19b-d09548e004bf?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    <div class="container">
+        <iframe src="https://chart-embed.service.newrelic.com/herald/eebfb59f-13d8-48d0-a19b-d09548e004bf?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    </div>
     <h1>内存占用</h1>
-    <iframe src="https://chart-embed.service.newrelic.com/herald/393255a7-7e08-450a-9bc9-4bd49236c867?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    <div class="container">
+        <iframe src="https://chart-embed.service.newrelic.com/herald/393255a7-7e08-450a-9bc9-4bd49236c867?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    </div>
     <h1>磁盘占用</h1>
-    <iframe src="https://chart-embed.service.newrelic.com/herald/c81da827-03a5-4b54-b688-227d35e62293?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    <div class="container">
+        <iframe src="https://chart-embed.service.newrelic.com/herald/c81da827-03a5-4b54-b688-227d35e62293?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    </div>
     <h1>网络流量</h1>
-    <iframe src="https://chart-embed.service.newrelic.com/herald/2ac7997b-5614-4f14-8088-fb8541c21088?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    <div class="container">
+        <iframe src="https://chart-embed.service.newrelic.com/herald/2ac7997b-5614-4f14-8088-fb8541c21088?height=450px&timepicker=true" style="width: 100%; height: 500px;"></iframe>
+    </div>
+</div>
 </body>
 </html>
