diff --git a/index.html b/index.html
index d9a025e..d8ac954 100644
--- a/index.html
+++ b/index.html
@@ -1,18 +1,42 @@
-<html>
-     <head>
-          <title>小明劍魔精華</title>
-          <link rel="stylesheet" href="css/style.css">
-     </head>
- 
-     <body>
-          <h1>小明劍魔精華</h1>
-          <h3><a href="./page/find_your_problem.html">怎麼不找找自己問題</a></h3>
-          <h3><a href="./page/before_undergraduate.html">本科之前怎麼辦</a></h3>
-         <!--
-         <h3>Tsoding (@tsoding)  <a href="https://twitter.com/tsoding/status/1765823410284720600">March 7, 2024</a></h3>
-         <h3><a href="https://www.adaic.org/resources/add_content/standards/05rat/html/Rat-8-4.html">『Fucking Website』</a></h3>
-         <h3><a href="https://www.adaic.org/resources/add_content/standards/05rat/html/Rat-8-4.html#:~:text=Part_Type)%C2%A0return%C2%A0Hash_Type%C2%A0is-,M31%3A%C2%A0constant%C2%A0%3A%3D%C2%A02**31%E2%80%931%3B%C2%A0%C2%A0%C2%A0%C2%A0%2D%2D%C2%A0a%C2%A0nice%C2%A0Mersenne%C2%A0prime,-begin%0A%C2%A0%C2%A0%C2%A0return%C2%A0Hash_Type(P">Line of Code</a></h3>
-         <h3><a href="https://github.com/tsoding/eepers/blob/4411c4fc37dc890095f5afc2e835889270100084/eepers.adb#L219">The line of source code</a></h3>
-          -->
-     </body>
- </html>
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>小明劍魔精華</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<video autoplay muted loop id="bg-video">
+    <source src="video/your-background-video.mp4" type="video/mp4">
+    您的瀏覽器不支援影片。
+</video>
+
+<div class="container">
+    <h1>小明劍魔精華</h1>
+
+    <div class="card">
+        <img src="images/find_your_problem_thumb.jpg" alt="怎麼不找找自己問題" class="card-image">
+        <div class="card-body">
+            <h2>怎麼不找找自己問題</h2>
+            
+            <a href="./page/find_your_problem.html" class="btn">Check this out</a>
+        </div>
+        <div class="card-footer">Last updated recently</div>
+    </div>
+
+    <div class="card">
+        <img src="images/before_undergraduate_thumb.jpg" alt="本科之前怎麼辦" class="card-image">
+        <div class="card-body">
+            <h2>本科之前怎麼辦</h2>
+            
+            <a href="./page/before_undergraduate.html" class="btn">Check this out</a>
+        </div>
+        <div class="card-footer">Last updated recently</div>
+    </div>
+
+</div>
+
+</body>
+</html>
