diff --git a/public/index.html b/public/index.html
index ff755dc9..44547d80 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,35 +76,29 @@
         toggleEl('#xhsDialog', true)
       }
     </script>
-    <!--    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@3.4.0/dist/tailwind.min.css" rel="stylesheet">-->
-    <script src="https://cdn.tailwindcss.com"></script>
     <style>
         body {
             background: rgb(231, 232, 235);
         }
 
         h1 {
-            font-size: 6rem !important;
+            font-size: 4.8rem !important;
             background: linear-gradient(120deg, #bd34fe 30%, #41d1ff);
             -webkit-text-fill-color: transparent;
             -webkit-background-clip: text;
             background-clip: text;
             color: transparent;
+            margin: 0;
+            font-weight: bold !important;
         }
 
         h2 {
-            font-size: 1.6rem !important;
+            font-size: 1.4rem !important;
             font-weight: bold !important;
             color: rgb(91, 91, 91);
             margin: 0;
         }
 
-        .center {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
         .card {
             position: relative;
             border-radius: 1rem;
@@ -113,7 +107,7 @@
             display: flex;
             flex-direction: column;
             align-items: flex-start;
-            gap: 1rem;
+            gap: 0.8rem;
             margin-bottom: 0;
             width: 25%;
             background: rgb(247, 247, 247);
@@ -136,24 +130,10 @@
             }
         }
 
-        .bottom {
-            width: 100%;
-            padding-top: 2rem;
-            border-top: 1px solid #c4c4c4;
-        }
-
         a {
             color: dodgerblue !important;
         }
 
-        .w-60vw {
-            width: 60%;
-        }
-
-        .gap-space {
-            gap: 1rem;
-        }
-
         .base-button {
             cursor: pointer;
             box-sizing: border-box;
@@ -238,30 +218,101 @@
         .dialog-body {
             padding: 0 1.2rem 1.2rem 1.2rem;
         }
+
+        .wrapper {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            min-height: 100vh;
+        }
+
+        .content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .text-center {
+            text-align: center;
+        }
+
+        .sky {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: 1rem;
+            width: 100%;
+            margin-bottom: 1rem;
+        }
+
+        .w {
+            width: 60vw;
+        }
+
+        .sky-img {
+            width: 100%;
+            border-radius: 0.5rem;
+        }
+
+        .card-wrap {
+            display: flex;
+            margin-bottom: 1.2rem;
+            gap: 1rem;
+        }
+
+        .bottom {
+            display: flex;
+            gap: 1rem;
+            margin: 2rem 0;
+            width: 100%;
+            padding-top: 2rem;
+            border-top: 1px solid #c4c4c4;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .gap-1 {
+            gap: 1rem;
+        }
+
+        .center {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .img {
+            width: 16rem;
+            border-radius: 1rem;
+            margin-top: 1.2rem;
+        }
     </style>
 </head>
 <body>
-<div class="flex flex-col justify-between min-h-screen">
-    <div class="center flex-col gap-8 mt-8">
+<div class="wrapper">
+    <div class="content">
         <h1>Type Words</h1>
         <div class="text-center">
             <h2>学习英语，一次敲击，一点进步</h2>
             <h2>记忆不再盲目，学习更高效，开源单词与文章练习工具</h2>
         </div>
-        <div class="flex">
+        <div class="">
             <div class="base-button" onclick="nav('/words')">单词练习</div>
             <div class="base-button" onclick="nav('/articles')">文章练习</div>
         </div>
 
-        <div class="center justify-center flex-col gap-2 w-full mb-4">
-            <a href="https://skywork.ai/p/GrXQb4" class="w-60vw" target="_blank">
+        <div class="sky">
+            <a href="https://skywork.ai/p/GrXQb4" class="w" target="_blank">
                 <img src="/skywork-ai.png"
                      alt="Skywork.AI"
-                     class="w-full rounded-lg"></a>
+                     class="sky-img"></a>
             <span>Skywork.AI:<a href="https://skywork.ai/p/GrXQb4" class="color-blue!" target="_blank">10 tasks in 1 hour, not 10 hours →Limited free spots: 127 left</a></span>
         </div>
-        <div class="w-60vw">
-            <div class="flex mb-5 gap-space">
+        <div class="w">
+            <div class="card-wrap">
                 <div class="card">
                     <div class="emoji">📚</div>
                     <div class="title">单词练习</div>
@@ -302,9 +353,8 @@
                         内置小学、初中、高中、四六级、考研、雅思、托福、GRE、GMAT、SAT、BEC、专四、专八等词库
                     </div>
                 </div>
-
             </div>
-            <div class="flex gap-space">
+            <div class="card-wrap">
                 <div class="card">
                     <div class="emoji">🆓</div>
                     <div class="title">免费开源</div>
@@ -338,7 +388,6 @@
                         </ul>
                     </div>
                 </div>
-
                 <div class="card">
                     <div class="emoji">🎯</div>
                     <div class="title">个性学习</div>
@@ -353,8 +402,9 @@
             </div>
         </div>
     </div>
-    <div class="center gap-space my-10 bottom">
-        <div class="center gap-2">
+
+    <div class="bottom">
+        <div class="center gap-1">
             <a
                     href="https://github.com/zyronon/TypeWords"
                     target="_blank"
@@ -425,8 +475,8 @@
             <span>
                 加入我们的用户社群后，您可以与我们的开发团队进行沟通，分享您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。
             </span>
-            <div class="center mt-4">
-                <img src="/wechat.png" alt="微信群二维码" class="w-60 rounded-lg">
+            <div class="center">
+                <img src="/wechat.png" alt="微信群二维码" class="img">
             </div>
         </div>
     </div>
@@ -443,8 +493,8 @@
         </header>
         <div class="dialog-body">
             <span>关注小红书后，您可以获得开发团队的最新动态和更新内容，反馈您的使用体验和建议，帮助我们改进产品，同时也能够及时了解我们的最新动态和更新内容。</span>
-            <div class="center mt-4">
-                <img src="/xhs.png" alt="小红书二维码" class="w-60 rounded-lg">
+            <div class="center">
+                <img src="/xhs.png" alt="小红书二维码" class="img">
             </div>
         </div>
     </div>
