diff --git a/index.html b/index.html
index b5b9bd9..8b378b8 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,35 @@
 <!doctype html>
 <html lang="en" class="mdui-theme-auto">
+  <head>
+    <title>Study Area CN</title>
+    <meta charset="utf-8" />
+    <meta
+      name="keywords"
+      content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook"
+    />
+    <meta
+      name="description"
+      content="Study Area CN  酷学园CN, 玩的开心，学的愉快！"
+    />
+    <meta name="generator" content="Vite, mdbook" />
+    <meta name="copyright" content="StudyAreaCN Team" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="author" content="StudyAreaCN Team,team@study-area.org.cn" />
+    <meta name="robots" content="index,follow" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
+    <link rel="icon" type="image/x-icon" href="/favicon.png" />
+  </head>
 
-<head>
-  <title>Study Area CN</title>
-  <meta charset="utf-8" />
-  <meta name="keywords"
-    content="Study-area, study-area, study-area-cn Study Area CN, study area cn, 酷学园, 酷学园 CN , 酷！学园, netman, linux, mdbook">
-  <meta name="description" content="Study Area CN  酷学园CN, 玩的开心，学的愉快！">
-  <meta name="generator" content="Vite, mdbook">
-  <meta name="copyright" content="StudyAreaCN Team">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="author" content="StudyAreaCN Team,team@study-area.org.cn">
-  <meta name="robots" content="index,follow">
-  <link rel="icon" type="image/x-icon" href="/favicon.png">
-</head>
-
-<body>
-  <div id="app">
-  </div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
-</html>
\ No newline at end of file
+  <body>
+    <style>
+      html,
+      body,
+      #app {
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
index eb988a8..67947d6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,72 +1,104 @@
-<script setup>
-</script>
+<script setup></script>
 
 <style>
 * {
-    font-family: Arial, Helvetica, sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
 }
 </style>
 
 <template>
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link
+    href="https://fonts.googleapis.com/icon?family=Material+Icons"
+    rel="stylesheet"
+  />
 
-    <mdui-top-app-bar style="position: relative;">
-        <mdui-button-icon id="openButton" icon="menu"></mdui-button-icon>
-        <mdui-top-app-bar-title>Study Area CN</mdui-top-app-bar-title>
-        <div style="flex-grow: 1"></div>
+  <mdui-layout style="height: 100%">
+    <mdui-top-app-bar>
+      <mdui-button-icon id="openButton" icon="menu"></mdui-button-icon>
+      <mdui-top-app-bar-title>Study Area CN</mdui-top-app-bar-title>
+      <div style="flex-grow: 1"></div>
     </mdui-top-app-bar>
 
     <mdui-navigation-drawer close-on-overlay-click class="navi-drawer">
-        <mdui-list>
-            <mdui-list-item end-icon="arrow_right" href="https://learn.study-area.org.cn">开始学习</mdui-list-item>
-            <mdui-list-item end-icon="arrow_right" href="https://forum.study-area.org.cn">讨论区</mdui-list-item>
-            <mdui-list-item end-icon="arrow_right"
-                href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/">查看本站源码</mdui-list-item>
-        </mdui-list>
+      <mdui-list>
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://learn.study-area.org.cn"
+          >开始学习</mdui-list-item
+        >
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://forum.study-area.org.cn"
+          >讨论区</mdui-list-item
+        >
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/"
+          >查看本站源码</mdui-list-item
+        >
+      </mdui-list>
     </mdui-navigation-drawer>
 
     <component :is="'script'">
-        const navigationDrawer = document.querySelector(".navi-drawer");
-        const openButton = document.getElementById("openButton");
-
-        openButton.addEventListener("click", () => navigationDrawer.open = true);
+      const navigationDrawer = document.querySelector(".navi-drawer"); const
+      openButton = document.getElementById("openButton");
+      openButton.addEventListener("click", () => navigationDrawer.open =
+      !navigationDrawer.open);
     </component>
 
-    <div id="content">
-        <mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
-            <h1>Study Area CN 讨论区</h1>
-        </mdui-card>
+    <mdui-layout-main>
+      <mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
+        <h1>Study Area CN 讨论区</h1>
+      </mdui-card>
 
-        <mdui-card href="https://learn.study-area.org.cn/"clickable class="card">
-            <h1>开始学习</h1>
-        </mdui-card>
-        
-        <mdui-card href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/" clickable class="card">
-            <h1>查看本站源码</h1>
-        </mdui-card>
-
-        <mdui-card href="https://git.hmtsai.cn/study-area-cn/" clickable class="card">
-            <h1>本站Gitea</h1>
-        </mdui-card>
-    </div>
+      <mdui-card href="https://learn.study-area.org.cn/" clickable class="card">
+        <h1>开始学习</h1>
+      </mdui-card>
 
+      <mdui-card
+        href="https://git.hmtsai.cn/study-area-cn/study-area-cn-homepage/"
+        clickable
+        class="card"
+      >
+        <h1>查看本站源码</h1>
+      </mdui-card>
 
+      <mdui-card
+        href="https://git.hmtsai.cn/study-area-cn/"
+        clickable
+        class="card"
+      >
+        <h1>本站Gitea</h1>
+      </mdui-card>
+    </mdui-layout-main>
+  </mdui-layout>
 </template>
 
 <style>
-
-h1{
-    padding-left: 15px;
-}
-#content {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
+h1 {
+  padding-left: 15px;
 }
 
-.card {
-    flex: 300px;
-    height: 200px;
-    margin:5px;
+mdui-layout-main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
-</style>
\ No newline at end of file
+
+mdui-card {
+  margin: 3px;
+  width: 24.5%;
+  height: 25%;
+}
+
+@media screen and (max-width: 640px) {
+  mdui-card {
+    margin: 0;
+    width: 100%;
+  }
+
+  mdui-layout-main{
+    flex-direction: column;
+  }
+}
+</style>
