diff --git a/src/assets/font/Letter Gothic Std Bold.ttf b/src/assets/font/Letter Gothic Std Bold.ttf
new file mode 100644
index 0000000..a750711
Binary files /dev/null and b/src/assets/font/Letter Gothic Std Bold.ttf differ
diff --git a/src/assets/font/NotoSerifCJKtc-Black.otf b/src/assets/font/NotoSerifCJKtc-Black.otf
new file mode 100644
index 0000000..b332aa3
Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-Black.otf differ
diff --git a/src/assets/font/NotoSerifCJKtc-Bold.otf b/src/assets/font/NotoSerifCJKtc-Bold.otf
new file mode 100644
index 0000000..8691c89
Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-Bold.otf differ
diff --git a/src/assets/font/NotoSerifCJKtc-SemiBold.otf b/src/assets/font/NotoSerifCJKtc-SemiBold.otf
new file mode 100644
index 0000000..f6556fe
Binary files /dev/null and b/src/assets/font/NotoSerifCJKtc-SemiBold.otf differ
diff --git a/src/assets/scss/font.scss b/src/assets/scss/font.scss
index 4e178cf..0db96f1 100644
--- a/src/assets/scss/font.scss
+++ b/src/assets/scss/font.scss
@@ -1,4 +1,24 @@
 // import web font
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
 
+@font-face {
+  font-family: "Noto Serif CJK TC -Bold";
+  src: url("~@/assets/font/NotoSerifCJKtc-Bold.otf");
+}
+
+@font-face {
+  font-family: "Noto Serif CJK TC -Black";
+  src: url("~@/assets/font/NotoSerifCJKtc-Black.otf");
+}
+
+@font-face {
+  font-family: "Noto Serif CJK TC -SemiBold";
+  src: url("~@/assets/font/NotoSerifCJKtc-SemiBold.otf");
+}
+
+@font-face {
+  font-family: "Letter Gothic Std Bold";
+  src: url("~@/assets/font/Letter Gothic Std Bold.ttf");
+}
+
 $fontFamily: Noto Sans TC, monospace;
diff --git a/src/assets/scss/home/header.scss b/src/assets/scss/header.scss
similarity index 89%
rename from src/assets/scss/home/header.scss
rename to src/assets/scss/header.scss
index 530108f..e79a3de 100644
--- a/src/assets/scss/home/header.scss
+++ b/src/assets/scss/header.scss
@@ -1,4 +1,6 @@
-@import "../color.scss";
+@import "./color.scss";
+$font-header-link: "Noto Serif CJK TC -Bold";
+$font-header-apply: "Noto Serif CJK TC -Black";
 
 .header {
   position: relative;
@@ -35,6 +37,7 @@
   }
 
   &-links {
+    font-family: $font-header-link;
     float: right;
     width: 600px;
     margin-right: 92px;
@@ -75,6 +78,7 @@
   }
 
   &-apply {
+    font-family: $font-header-apply;
     width: 92px;
     height: 38px;
     border-radius: 38px;
diff --git a/src/assets/scss/home/home.scss b/src/assets/scss/home/home.scss
index 515c116..582119b 100644
--- a/src/assets/scss/home/home.scss
+++ b/src/assets/scss/home/home.scss
@@ -1,33 +1,40 @@
+$font-home: "Noto Serif CJK TC -SemiBold";
+$font-home-h1: "Noto Serif CJK TC -Bold";
+$font-home-h2: "Letter Gothic Std Bold";
+
 .section {
   &-title {
     margin-top: 150px;
     height: 500px;
     // background-color: chartreuse;
   }
+  &-content {
+    height: 1000px;
+    // background-color: cornsilk;
+  }
 }
 
 .home {
+  // font-family: "Courier New", Courier, monospace;
+  font-family: $font-home;
   position: relative;
   text-align: center;
   &__title {
-    width: 500px;
+    width: 600px;
     // background-color: cornflowerblue;
     margin: 0 auto;
+    padding-top: 10px;
     position: relative;
 
     &-box1 {
-      position: relative;
-
-      margin-top: 100px;
+      margin: 0 auto;
+      margin-top: 50px;
+      margin-bottom: 20px;
       // background-color: chocolate;
       height: 80px;
-      width: 500px;
-      span {
-        font-size: 16pt;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translateY(-50%) translateX(-50%);
+      width: 600px;
+      p {
+        font-size: 18pt;
       }
     }
 
@@ -37,9 +44,37 @@
     &-box2 {
       // background-color: chocolate;
       height: 80px;
-      width: 500px;
+      width: 600px;
+      margin: 0 auto;
+      margin-top: 80px;
       p {
-        font-size: 16pt;
+        font-size: 18pt;
+      }
+    }
+  }
+
+  &__info {
+    width: 60%;
+    // background-color: darkseagreen;
+    margin: 0 auto;
+
+    &-container {
+      width: 95%;
+      margin-left: 5%;
+    }
+
+    &-title {
+      // background-color: darkgray;
+      height: 100px;
+
+      h1 {
+        font-family: $font-home-h1;
+        font-size: 26pt;
+      }
+
+      h2 {
+        font-family: $font-home-h2;
+        font-size: 28pt;
       }
     }
   }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index d9b1b82..0bf96cd 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -117,5 +117,5 @@ export default class Header extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/home/header";
+@import "@/assets/scss/header";
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 3725926..62590e9 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -6,7 +6,7 @@
     <section class="section-title">
       <div class="home__title">
         <div class="home__title-box1">
-          <span>SITCON 學生計算機年會 2021</span>
+          <p>SITCON 學生計算機年會 2021</p>
         </div>
         <div class="home__title-topic">
           <img
@@ -22,6 +22,68 @@
         </div>
       </div>
     </section>
+    <section class="section-content">
+      <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
+            <h1>算盤的後裔</h1>
+            <h2>Descendants of the abacus</h2>
+          </div>
+          <div class="home__info-paragraph">
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
+            <h1 class="home__info-title--1">算盤的後裔</h1>
+            <h2 class="home__info-title--2">Descendants of the abacus</h2>
+          </div>
+          <div class="home__info-paragraph">
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
+            <h1 class="home__info-title--1">算盤的後裔</h1>
+            <h2 class="home__info-title--2">Descendants of the abacus</h2>
+          </div>
+          <div class="home__info-paragraph">
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+            </p>
+          </div>
+        </div>
+      </section>
+      <section class="home__info">
+        <div class="home__info-container">
+          <div class="home__info-title">
+            <h1 class="home__info-title--1">算盤的後裔</h1>
+            <h2 class="home__info-title--2">Descendants of the abacus</h2>
+          </div>
+          <div class="home__info-paragraph">
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步地發展為隨處可見的智慧型裝置。
+              俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海，奠基於科技的現有成果，才能持續貢獻於科技的未來。我們都是「算盤的後裔」。
+            </p>
+          </div>
+        </div>
+      </section>
+    </section>
   </div>
 </template>