diff --git a/src/App.vue b/src/App.vue
index 2728c77..99b9adf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,4 +1,24 @@
-<script setup></script>
+<script lang="ts" setup>
+import SubProjectCard from "./components/SubProjectCard.vue";
+
+const sub_projects = [
+  {
+    desc: "知识从不是少数人的专利，让知识自由的在世界上流淌，为每个人创造价值。",
+    name: "Learning",
+    href: "https://learn.study-area.org.cn/",
+  },
+  {
+    desc: "让知识与感想突破地域的界限，即时在网络上流通。",
+    name: "Discussing",
+    href: "https://forum.study-area.org.cn/",
+  },
+  {
+    desc: "用爱发电，很难长久。为我们的项目贡献一份力量，我们才能走得更远。",
+    name: "Contributing",
+    href: "https://git.hmtsai.cn/",
+  },
+];
+</script>
 
 <style>
 * {
@@ -34,88 +54,27 @@
 
     <mdui-layout-main>
       <div class="header">
-        <h1>Study Area CN</h1>
-        <p class="desc">在这里，您将看不见八卦，看不见争吵，没有新闻，也没娱乐。</p>
-        <p class="desc">本站仅能为阁下提供的就是您要学习的技术文件与心得经验的交流。本站的角色是一个网上的学习园地（Study Area）。</p>
+        <div class="header-mover">
+          <h1>Study Area CN</h1>
+          <p class="desc">在这里，您将看不见八卦，看不见争吵，没有新闻，也没娱乐。</p>
+          <p class="desc">本站仅能为阁下提供的就是您要学习的技术文件与心得经验的交流。本站的角色是一个网上的学习园地（Study Area）。</p>
+        </div>
       </div>
 
-      <div class="links">
-        <mdui-card href="https://forum.study-area.org.cn/" clickable class="card">
-          <h1>Study Area CN 讨论区</h1>
-        </mdui-card>
+      <div>
+        <SubProjectCard v-for="item in sub_projects" :name="item.name" :desc="item.desc" :href="item.href">
+        </SubProjectCard>
+      </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>
+      <div class="footer">
+        <h3>Study Area CN Team  2024 - Forever</h3>
       </div>
     </mdui-layout-main>
   </mdui-layout>
 </template>
 
-<style>
+<style scoped>
 *{
-  padding: 0;
-  margin: 0;
-}
-
-mdui-card h1 {
-  padding: 0.2em 0.2em;
-}
-
-.header {
-  margin-top: 4em;
-  margin-bottom: 8em;
-}
-
-.header h1 {
-  width: 100%;
-  text-align: center;
-}
-
-.header .desc {
-  margin: auto;
-  width: 75%;
-  text-align: center;
-}
-
-.links {
-  height: 10em;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-
-mdui-card {
-  margin: 3px;
-  width: calc(25% - 6px);
-  height: 8em;
-}
-
-@media screen and (max-width: 640px) {
-  mdui-card {
-    width: calc(100% - 6px);
-  }
-
-  .links {
-    height:auto;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-
-  .header {
-    margin-bottom:2em;
-  }
-
-  .header .desc {
-    width: 90%;
-  }
+    font-family: "Source Han Serif CN VF";
 }
 </style>
diff --git a/src/components/SubProjectCard.vue b/src/components/SubProjectCard.vue
new file mode 100644
index 0000000..fca6584
--- /dev/null
+++ b/src/components/SubProjectCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps({
+    name: { type: String, required: true },
+    desc: { type: String, required: true },
+    href: { type: String, required: true },
+})
+</script>
+
+<template>
+    <div style="width:95%">
+        <h2>{{ props.name }}</h2>
+        <p>{{ props.desc }}</p>
+        <mdui-button :href="props.href" end-icon="arrow_forward" style="font-family: sans-serif;">Go</mdui-button>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/main.css b/src/main.css
new file mode 100644
index 0000000..203c086
--- /dev/null
+++ b/src/main.css
@@ -0,0 +1,100 @@
+@import url("https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css");
+
+* {
+
+}
+
+body {
+  overflow: scroll;
+}
+
+mdui-layout-main {
+  margin-left: 2em;
+  margin-right: 2em;
+}
+
+p {
+  font-size: 2vh;
+}
+
+h1 {
+  font-size: 10vh;
+  font-weight: bold;
+  width: 100%;
+  text-align: left;
+}
+
+.header h1 {
+  background: -webkit-linear-gradient(
+    135deg,
+    #08dfb4,
+    #ff6ac6 25%,
+    #661496 50%,
+    #e6d205 55%,
+    #2cc4e0 60%,
+    #8b2ce0 80%,
+    #ff6384 95%,
+    #08dfb4
+  );
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  background-size: 200% 100%;
+  animation: header_title_animation 12s infinite linear;
+}
+
+@keyframes header_title_animation {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: -400% 0;
+  }
+}
+
+h1:hover {
+  animation: header_title_animation 8s infinite linear;
+}
+
+h2 {
+  font-size: 6vh;
+}
+
+.footer {
+  width: auto;
+  height:2vh
+}
+
+.footer h3{
+  text-align: center;
+  width: 100%;
+}
+
+.header {
+  margin: auto;
+}
+
+.header .desc {
+  width: 75%;
+  text-align: left;
+}
+
+@media screen and (max-width: 640px) {
+  h1 {
+    font-size: 2.5em;
+    font-weight: bold;
+    width: 100%;
+    text-align: left;
+  }
+
+  .header-mover {
+    margin-top: 1em;
+    margin-bottom: 2em;
+    margin-left: 1em;
+  }
+
+  .header .desc {
+    width: 75%;
+    text-align: left;
+  }
+}
diff --git a/src/main.ts b/src/main.ts
index e1335df..708da59 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,7 @@ import App from './App.vue'
 import 'mdui/mdui.css';
 import 'mdui';
 import '@mdui/icons/search.js';
+import './main.css'
 
 
 createApp(App).mount('#app')