diff --git a/index.css b/index.css
index 7d1493d..2c3eb76 100644
--- a/index.css
+++ b/index.css
@@ -1,12 +1,95 @@
-*{
-    padding:0;
-    margin:0;
-    color:#fff;
+@import url("https://chinese-fonts-cdn.deno.dev/packages/jhlst/dist/京華老宋体v1_007/result.css");
+@import url("https://chinese-fonts-cdn.deno.dev/packages/syst/dist/SourceHanSerifCN/result.css");
+
+:root {
+    --font: "Source Han Serif CN VF";
+    --title-font: "KingHwa_OldSong";
+    --font-scale: 1em;
 }
 
-#naviBar{
-    height:55px;
-    width:100%;
-    background-color: #3f3f5f;
-    display: flex;
+@media (prefers-color-scheme: light) {
+    :root {
+        --background-color: #fff;
+        /* 背景颜色 */
+        --heading-color: #222;
+        --nav-color: #222;
+        --text-color: #333;
+        /* 主要字体颜色 */
+        --sub-color: #666;
+        --gray-color: #999;
+        --link-color: #444;
+        --code-color: #222;
+        --border-color: #ddd;
+        --line-color: #f1f1f1;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: #0f0f0f;
+        /* 背景颜色 */
+        --heading-color: #f2f2f2;
+        --nav-color: #f2f2f2;
+        --text-color: #f3f5fd;
+        /* 主要字体颜色 */
+        --sub-color: #999;
+        --gray-color: #bbb;
+        --link-color: #bbb;
+        --code-color: #999;
+        --border-color: #ddd;
+        --line-color: #f1f1f1;
+    }
+}
+
+* {
+    color: var(--heading-color);
+}
+
+html,
+body {
+    margin: auto;
+    height: 100%;
+    width: 500px;
+    background-color: var(--background-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--title-font);
+}
+
+.header {
+    margin-bottom: 0.5em;
+}
+
+.header h1 {
+    margin: 0.5em 0 0 0;
+}
+
+.header .desc {
+    font-family: var(--font);
+    font-style: italic;
+}
+
+.card .card-title {
+    font-family: var(--title-font);
+    font-size: 1.5em;
+}
+
+.card .desc {
+    font-family: var(--font);
+}
+
+.card .link-span {
+    float: right;
+}
+
+.card a {
+    font-family: var(--font);
+    font-size: 1em;
+    margin: 0.5em 0 0 0;
 }
diff --git a/index.html b/index.html
index 0cb1a53..db49b91 100644
--- a/index.html
+++ b/index.html
@@ -1,58 +1,53 @@
 <!doctype html>
-<html lang="zh-CN" class="mdui-theme-auto" style="height: 100%;">
+
+<html>
 
 <head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
-	<meta name="renderer" content="webkit" />
-
-	<link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
-	<script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
-	<!-- 如果使用了组件的 icon 属性，还需要引入图标的 CSS 文件 -->
-
-	<title>Hmtsai's Website</title>
-
-	<style>
-		.wcol {
-			height: 5px;
-		}
-	</style>
+    <link rel="stylesheet" href="./index.css" />
+    <title>Hmtsai的小站</title>
 </head>
 
-<body style="height: 100%;">
-	<mdui-top-app-bar style="position: relative;">
-		<mdui-top-app-bar-title>Hmtsai's Website</mdui-top-app-bar-title>
-		<div style="flex-grow: 1"></div>
-		<mdui-button variant="text" href="http://blog.hmtsai.cn">Blog</mdui-button>
-		<mdui-button variant="text" href="http://git.hmtsai.cn">Gitea</mdui-button>
-	</mdui-top-app-bar>
+<body>
+    <div class="header">
+        <h1>Hmtsai的小站</h1>
+        <span class="desc">Always think yourself.<span>
+    </div>
 
-	<h2>Websites</h2>
-	<div class="wcol"></div>
-	<mdui-divider> </mdui-divider>
-	<mdui-card clickable variant="elevated" style="width: 100%;height: 20%" href="http://blog.hmtsai.cn">
-		<h3 style="text-align:center;">Hmtsai's Blog</h3>
-		<mdui-divider></mdui-divider>
-		<p style="text-align: center;">Read more.</p>
-	</mdui-card>
-	<mdui-card clickable variant="elevated" style="width: 100%;height: 20%" href="http://git.hmtsai.cn">
-		<h3 style="text-align:center;">Hmtsai Gitea</h3>
-		<mdui-divider></mdui-divider>
-		<p style="text-align: center;">Read more</p>
-	</mdui-card>
+    <div class="context">
+        <h2>一些链接</h2>
 
-	<h2>Projects</h2>
-	<mdui-divider></mdui-divider>
-	<div class="wcol"></div>
-	<p style="text-align: center;">Nothing...</p>
+        <div class="card">
+            <span class="card-title">博客</span>
+            <span class="desc">让文思流于笔尖，写于纸上。</span>
+            <span class="link-span"><a href="https://blog.hmtsai.cn">前往 ></a></span>
+        </div>
 
-	<br />
-	<br />
-	<br />
-	<br />
-	<p style="text-align:auto;">This Page's Source Code in <a
-			href="http://git.hmtsai.cn/hmtsai/hmtsai-cn-index-page">Here</a>
-	</p>
+        <div class="card">
+            <span class="card-title">Github 主页</span>
+            <span class="desc">让代码表述你思维的逻辑。</span>
+            <span class="link-span"><a href="https://github.com/hemingtsai/">前往 ></a></span>
+        </div>
+
+        <h2>个人项目</h2>
+
+        <div class="card">
+            <span class="card-title">Study Area CN</span>
+            <span class="desc">知识应该被共享。</span>
+            <span class="link-span"><a href="https://study-area.org.cn">前往 ></a></span>
+        </div>
+
+        <div class="card">
+            <span class="card-title">Single Text</span>
+            <span class="desc">一个 Typecho 主题。</span>
+            <span class="link-span"><a href="https://github.com/hemingtsai/single-text/">前往 ></a></span>
+        </div>
+
+        <div class="card">
+            <span class="card-title">Hmtsai主页</span>
+            <span class="desc">我即我。</span>
+            <span class="link-span"><a href="https://git.hmtsai.com/hmtsai/hmtsai-cn-homepage">前往 ></a></span>
+        </div>
+    </div>
 </body>
 
 </html>
