diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss
index 6d7f3c2..2af9217 100644
--- a/src/assets/scss/CFP/intro.scss
+++ b/src/assets/scss/CFP/intro.scss
@@ -1,722 +1,24 @@
-// font
-$fontFamily: 'Noto Sans TC', sans-serif;
-$fontStyle: normal;
-$light-blue: #3d93e9;
-$fontColor: #226bb4;
-$buttonHoverColor: #ffffff;
-@mixin Font() {
-  font-family: $fontFamily;
-}
-@mixin hyperlinkFont() {
-  text-decoration: underline;
-}
+$fontFamily: Noto Sans TC;
+$fontColor:  #226BB4;
 
-// font size
-$h1FontSize: 42pt;
-$h2FontSize: 27pt;
-$h3FontSize: 20pt;
-// $contextFontSize: 13px;
-$buttonFontSize: 24px;
+// General settings: 
+//    font-size and paragraph spacing for headers and paragraph text
+#cfp-intro {
+  margin-top: 90px;
+  padding: 96px 0 0 0;
 
-$mh1FontSize: 26px;
-$mh2FontSize: 20px;
-$mh3FontSize: 14px;
-$mcontextFontSize: 14px;
-$mbuttonFontSize: 18px;
-$hyperlinkFontSize: 14px;
-
-$enlargeFontSize: 55px;
-$subFontSize: 30px;
-// letter spacing
-$titleLetterSpace: 0;
-$contextLetterSpace: 0.2px;
-$buttonLetterSpace: 0;
-$hyperlinkLetterSpace: 0;
-
-// background
-$buttonHoverBg: #226bb4;
-
-#cfp {
   h1,
   h2,
   h3 {
-    margin-bottom: 2em;
+    margin-bottom: 24pt;
   }
 
   p {
-    line-height: 2;
-  }
-
-  .introduction-container {
-    overflow-x: hidden;
-    overflow-y: hidden;
-    margin: -8px;
-    position: relative;
-  }
-
-  .introduction {
-    // flex
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    // font
-    @include Font;
-    color: $fontColor;
-    // size
-    margin-left: 15%;
-    margin-top: 75px;
-
-    @media screen and(max-width: 414px) {
-      width: 100%;
-    }
-  }
-
-  .about-section {
-    // font
-    // font-size: $contextFontSize;
-    letter-spacing: $contextLetterSpace;
-    //line-height: 42px;
-    width: 90%;
-
-    @media screen and(max-width: 414px) {
-      // font-size: $mcontextFontSize;
-      width: 160%;
-    }
-  }
-
-  .discuss-section {
-    // font-size: $contextFontSize;
-    letter-spacing: $contextLetterSpace;
-    // line-height: 42px;
-
-    @media screen and(max-width: 414px) {
-      // font-size: $mcontextFontSize;
-      width: 80%;
-    }
-  }
-
-  .topic-intro {
-    // size
-    margin-top: 130px;
-    // font
-    // font-size: $contextFontSize;
-    letter-spacing: $contextLetterSpace;
-    // line-height: 42px;
-
-    // width: 1100px;
-
-    @media screen and(max-width: 414px) {
-      margin-top: 50%;
-      width: 110%;
-    }
-  }
-
-  .last-part {
-    // size
-    margin-top: 70px;
-    height: 325px;
-    // font
-    // font-size: $contextFontSize;
-    letter-spacing: $contextLetterSpace;
-    // line-height: 42px;
-
-    @media screen and(max-width: 414px) {
-      margin-top: 40%;
-      width: 70%;
-      margin-bottom: 30%;
-    }
-  }
-
-  .buttons {
-    // font
-    color: $fontColor;
-    font-size: $buttonFontSize;
-    font-weight: 900;
-    letter-spacing: $buttonLetterSpace;
-    // line-height: 30px;
-    // size
-    margin-right: 37px;
-    padding: 12px 15px 12px 15px;
-    // box
-    background-color: #ffffff;
-    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-    transition-duration: 0.2s;
-    border: none;
-    border-radius: 8px;
-    // display
-    display: inline-block;
-
-    position: relative;
-    z-index: 5;
-
-    @media screen and (max-width: 414px) {
-      font-size: $mbuttonFontSize;
-      font-weight: 900;
-      letter-spacing: 0px;
-      color: $fontColor;
-      text-align: center;
-      opacity: 1;
-      border-radius: 6px;
-      padding: 10px 8px 10px 8px;
-      margin-right: 15px;
-      margin-top: 20px;
-    }
-  }
-
-  .button-post {
-    // display
-    display: inline;
-    // size
-    margin-left: 40px;
-    margin-top: -20px;
-
-    z-index: 2;
-
-    @media screen and (max-width: 414px) {
-      width: 414px;
-      margin-left: 0px;
-    }
-  }
-
-  .buttons:hover {
-    // box
-    background-color: $buttonHoverBg;
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
-    // font
-    h3 {
-      color: $buttonHoverColor;
-    }
-  }
-
-  .date {
-    // display
-    display: inline;
-    // size
-    margin-right: 35px;
-    // align
-    vertical-align: bottom;
-    // line-height: 16pt;
-
-    @media screen and(max-width:414px) {
-      font-size: 16pt;
-      margin-right: 10px;
-      //line-height: 1.5;
-      vertical-align: middle;
-    }
-  }
-}
-
-#cfp-intro {
-  h1,
-  h2,
-  h3,
-  p,
-  span {
-    font-family: $fontFamily;
-    color: $fontColor;
-  }
-
-  h1 {
-    // font
-    font-size: $h1FontSize;
-    //@function: 70px;
-    font-weight: 900;
-    letter-spacing: $titleLetterSpace;
-
-    .enlarge {
-      font-size: $enlargeFontSize;
-
-      @media screen and (max-width: 414px) {
-        // line-height: 50px;
-        margin-bottom: 50px;
-      }
-    }
-
-    .sub {
-      font-size: $subFontSize;
-    }
-
-    @media screen and (max-width: 414px) {
-      // line-height: 60px;
-    }
-  }
-
-  .right {
-    text-align: left;
-
-    @media screen and (max-width: 414px) {
-      text-align: right;
-      margin-right: 30%;
-      margin-bottom: 30px;
-    }
-  }
-
-  h2 {
-    // font
-    // font-size: $h2FontSize;
-    letter-spacing: $titleLetterSpace;
-    font-weight: 900;
-    //line-height: 70px;
-    // margin: 0px;
-  }
-
-  h3 {
-    // Font
-    // font-size: $h3FontSize;
-    letter-spacing: $titleLetterSpace;
-    font-weight: 900;
-    //line-height: 15px;
-    // margin: 0px;
-  }
-
-  .about-section > .context {
-    margin-right: 50%;
-  }
-
-  .topic-intro > .context {
-    margin-right: 30%;
-  }
-
-  /*
-  .context {
-    // font
-    // font-size: $contextFontSize;
-    line-height: 30px;
-    letter-spacing: $contextLetterSpace;
-    font-weight: normal;
-  }
-  */
-
-  .detail {
-    // display
-    display: inline;
-    // font
-    // font-size: $contextFontSize;
-    // line-height: 20px;
-    letter-spacing: $contextLetterSpace;
-    font-weight: normal;
-    // align
-    vertical-align: bottom;
-    // size
-
-    @media screen and (max-width: 414px) {
-      margin-right: 25%;
-      //line-height: 35px;
-      // font-size: $mcontextFontSize;
-    }
-  }
-
-  .context-span {
-    // font
-    // font-size: $contextFontSize;
-    font-weight: 900;
-    letter-spacing: $contextLetterSpace;
-    //line-height: 42px;
-  }
-
-  .context-hyperlink {
-    // font
-    font-size: $hyperlinkFontSize;
-    letter-spacing: $hyperlinkLetterSpace;
-    color: $light-blue;
-    font-weight: normal;
-    //line-height: 42px;
-  }
-
-  p.tag {
-    // font
-    font-size: 14px;
-    // line-height: 15px;
-    letter-spacing: 0;
-    font-weight: 900;
-    // align
-    text-align: center;
-    margin-top: 0px;
-    margin-bottom: 5px;
-
-    @media screen and (max-width: 414px) {
-      font-size: 16px;
-    }
-  }
-
-  p.tag.sub {
-    font-size: 12px;
-    // line-height: 10px;
-
-    @media screen and (max-width: 414px) {
-      font-size: 12px;
-      margin-top: 8px;
-    }
-  }
-
-  p.small-tag {
-    margin-block-start: 0em;
-    margin-block-end: 0.5em;
-    font-size: 12px;
-    text-align: center;
-
-    @media screen and (max-width: 414px) {
-      //  line-height: 12px;
-      font-size: 10px;
-    }
-  }
-
-  //NOTE: the size should be smaller, this temporary size is provided to support min font size of browser
-  .cfp-img {
-    // box
-    border-radius: 4px;
-    margin-bottom: 12px;
-    // size
-    width: 175px;
-    height: 118px;
-    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-
-    @media screen and (max-width: 414px) {
-      border-radius: 2px;
-      margin-bottom: 12px;
-      width: 111px;
-      height: 75px;
-      box-shadow: 0px 1px 6px rgba(89, 120, 206, 0.56);
-    }
-  }
-
-  .thumbnails {
-    // box
-    // margin-left: -20.5px;
-
-    @media screen and (max-width: 414px) {
-      margin-left: -9px;
-    }
-  }
-
-  .img-table {
-    // box
-    border-style: none;
-    border-spacing: 25.5px 0px; //25.5
-    text-align: center;
-    width: 640px;
-
-    @media screen and (max-width: 414px) {
-      width: 87%;
-      align-content: center;
-      border-spacing: 0px 0px;
-    }
-  }
-
-  .td-width {
-    vertical-align: top;
-
-    @media screen and (max-width: 414px) {
-      text-align: center;
-      width: 123px;
-    }
-  }
-
-  .tag-table {
-    // box
-    border-style: none;
-    border-spacing: 0px 0px; //25.5
-    // size
-    width: 500px;
-  }
-
-  .first-box {
-    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-    border-radius: 60px;
-    transform: rotate(15deg);
-    margin-bottom: -800px;
-    margin-left: -200px;
-    margin-top: -300px;
-    z-index: 1;
-
-    @media screen and(max-width: 960px) {
-      border-radius: 40px;
-      margin-bottom: -800px;
-      transform: rotate(13deg);
-    }
-
-    @media screen and(max-width: 414px) {
-      border-radius: 27px;
-      margin-top: 200px;
-      margin-bottom: -870px;
-      margin-left: -150px;
-      transform: scale(1);
-      transform: rotate(12deg);
-    }
-  }
-
-  .second-box {
-    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-    border-radius: 32px;
-    transform: rotate(15deg);
-    margin-top: 270px;
-    margin-bottom: -1900px;
-    margin-left: -700px;
-    z-index: 1;
-
-    @media screen and(max-width: 414px) {
-      box-shadow: -10px 30px 30px 0 rgba(135, 152, 199, 0.56);
-      margin-top: 5px;
-      margin-left: -415px;
-      margin-bottom: -1560px;
-      transform: rotate(12deg) scale(0.6);
-      z-index: 2;
-    }
-  }
-
-  .hiden-box {
-    position: absolute;
-    margin-top: 1200px;
-    margin-left: -300px;
-    margin-bottom: 0px;
-    z-index: -1;
-    @media screen and(max-width: 414px) {
-      margin-top: 1400px;
-      transform: rotate(12deg);
-      z-index: -1;
-    }
-  }
-
-  .box-back {
-    z-index: 2;
-
-    @media screen and(max-width: 960px) {
-      margin-top: -10%;
-      margin-left: -10%;
-    }
-
-    @media screen and(max-width: 414px) {
-      margin-top: 0%;
-      margin-left: -10%;
-    }
-  }
-
-  .box-back2 {
-    z-index: 2;
-
-    @media screen and(max-width: 960px) {
-      margin-top: -10%;
-      margin-left: -10%;
-    }
-
-    @media screen and(max-width: 414px) {
-      margin-top: -10%;
-      margin-left: -10%;
-    }
-  }
-
-  .SITCON-text-path {
-    transform: scale(0.7);
-    padding-left: 300px;
-    margin-right: -550px;
-    margin-bottom: -600px;
-    padding-top: 300px;
-    z-index: 2;
-    @media screen and(max-width: 414px) {
-      z-index: -2;
-    }
-  }
-
-  .des-text-path {
-    //background: url(../../assets/images/cfp/Path_762.svg) no-repeat;
-    transform: scale(0.7);
-    margin-bottom: -565px;
-    padding-top: 65px;
-    margin-left: -350px;
-    z-index: 2;
-
-    @media screen and(max-width: 960px) {
-      margin-left: -150px;
-      margin-bottom: -545px;
-    }
-
-    @media screen and(max-width: 414px) {
-      //background-image: url(../../assets/images/cfp/Mobile/Path_763.svg);
-      margin-top: 40px;
-      margin-left: -80px;
-      transform: scale(0.9);
-      background: url(~@/assets/images/cfp/Mobile/Path_763.svg) no-repeat;
-      padding-top: -565px;
-      margin-bottom: -665px;
-    }
-  }
-
-  .des-blue-bar {
-    transform: rotate(15deg);
-    margin-left: -400px;
-    margin-top: 360px;
-    margin-bottom: -1360px;
-
-    @media screen and(max-width: 414px) {
-      margin-left: -600px;
-      margin-top: 160px;
-      transform: rotate(12deg) scale(0.6);
-    }
-  }
-
-  .paper-image {
-    transform: scale(0.75);
-    margin-top: -240px;
-    margin-left: 270px;
-    margin-bottom: -710px;
-    z-index: 1;
-
-    @media screen and(max-width: 414px) {
-      z-index: 3;
-      margin-top: -840px;
-      margin-left: -140px;
-      margin-bottom: -1060px;
-      transform: rotate(-7deg) scale(0.35);
-    }
-  }
-
-  .background {
-    //background: url(../../assets/images/cfp/Background.svg) no-repeat;
-    //content: url("../../assets/images/cfp/Background.svg") no-repeat;
-    position: absolute;
-    top: 0;
-    width: 200%;
-    //max-height: 2000px;
-    margin-left: -69%;
-    margin-top: -30%;
-    text-align: center;
-    z-index: -2;
-
-    @media screen and(max-width: 414px) {
-      //content: url() no-repeat;//../../assets/images/cfp/Mobile/Mobile-background.svg
-      //visibility: hidden;
-      background: url(~@/assets/images/cfp/Mobile/Mobile-background.svg) !important;
-      object-position: -99999px 99999px;
-      overflow: hidden;
-      margin-left: -20%;
-      margin-top: -20%;
-      z-index: -1;
-      transform: scale(1);
-    }
-  }
-
-  .ellipse {
-    position: absolute;
-    width: 100%;
-    margin-top: -75%;
-    margin-left: -14%;
-    align-content: center;
-    transform: scale(0.31);
-
-    @media screen and(max-width: 414px) {
-      margin-top: -20%;
-      transform: scale(0.6);
-    }
-  }
-
-  .sitcon-icon {
-    position: absolute;
-    width: 100%;
-    margin-top: -98%;
-    margin-left: -14%;
-    align-content: center;
-    transform: scale(0.14);
-
-    @media screen and(max-width: 414px) {
-      margin-top: -42%;
-      transform: scale(0.3);
-    }
-  }
-
-  .sitcon-pic-2021 {
-    position: absolute;
-    width: 100%;
-    margin-top: -49%;
-    margin-left: -14%;
-    align-content: center;
-    transform: scale(0.18);
-
-    @media screen and(max-width: 414px) {
-      margin-top: -40%;
-      transform: scale(0.5);
-    }
-  }
-
-  .sitcon-title-zh {
-    position: absolute;
-    width: 100%;
-    margin-top: -46%;
-    margin-left: -14%;
-    align-content: center;
-    transform: scale(0.11);
-
-    @media screen and(max-width: 414px) {
-      margin-top: -30%;
-      transform: scale(0.4);
-    }
-  }
-
-  .sitcon-topic {
-    position: absolute;
-    width: 100%;
-    margin-top: -45%;
-    margin-left: -14%;
-    align-content: center;
-    transform: scale(0.23);
-
-    @media screen and(max-width: 414px) {
-      margin-top: -20%;
-      transform: scale(0.65);
-    }
-  }
-
-  .sitcon-date {
-    position: absolute;
-    width: 100%;
-    margin-top: -31%;
-    margin-left: -44%;
-    transform: scale(0.13);
-
-    @media screen and(max-width: 414px) {
-      margin-top: 65%;
-      transform: scale(0.35);
-    }
-  }
-
-  .sitcon-place {
-    position: absolute;
-    width: 100%;
-    margin-top: -36.5%;
-    margin-left: -44%;
-    transform: scale(0.13);
-
-    @media screen and(max-width: 414px) {
-      margin-top: 73%;
-      margin-left: -40%;
-      transform: scale(0.45);
-    }
-  }
-
-  .sitcon-qeury {
-    position: absolute;
-    width: 100%;
-    margin-top: -18.5%;
-    margin-left: -13%;
-    transform: scale(0.2);
-
-    @media screen and(max-width: 414px) {
-      margin-top: 50%;
-      transform: scale(0.6);
-    }
-  }
-}
-
-// General settings: font-size and paragraph spacing
-#cfp-intro {
-  h1,
-  h2,
-  h3 {
-    margin-bottom: 1em;
+    line-height: 1.75;
   }
 
   p:not(:last-child) {
-    margin-bottom: 1em;
-    line-height: 1.75;
+    margin-bottom: 2em;
   }
 
   h1,
@@ -737,7 +39,11 @@ $buttonHoverBg: #226bb4;
     font-weight: 900;
   }
 }
-
+.introduction{
+    height: 2250px;
+    overflow: hidden;
+    padding-bottom: 0;
+}
 // Utiliy
 #cfp-intro {
   .mr-2 {
@@ -753,11 +59,32 @@ $buttonHoverBg: #226bb4;
 
 #cfp-intro {
   .box-back {
-    margin-top: -120px;
-    width: 880px;
+    // margin-top: -120px;
+    // width: 880px;
+    margin-bottom: -40em;
+    font-family: $fontFamily;
+    color: $fontColor;
 
+    width: 700px;
+    padding: 20px;
+
+    .first-box {
+      transform: rotate(15deg);
+      box-shadow: 0 3px 12px 0 rgba(89,120,206,.56);
+      border-radius: 30px;
+      position: relative;
+      bottom: 550px;
+      right: 50px;
+      z-index: 0;
+    }
+    .introd-text {
+      position: relative;
+      top: 200px;
+      left: 150px;
+      z-index: 2;
+    }
     .about-sitcon {
-      margin-bottom: 2em;
+      margin-bottom: 0 auto 2em;
     }
 
     .past-sitcon {
@@ -793,15 +120,51 @@ $buttonHoverBg: #226bb4;
     }
   }
 
+  .box-bluearea {
+    width: 150vw;
+    height: 450px;
+    background: rgba(34, 107, 180,1);
+    right: 25%;
+    position:relative;
+    z-index: -1;
+    transform: rotate(15deg);
+    opacity: 1;
+  }
+
   .box-back2 {
-    width: 760px;
+    // width: 760px;
+    font-family: $fontFamily;
+    color: $fontColor;
+
+    width: 900px;
+    padding: 20px;
+    height: 2200px;
 
     .about-topic {
-      margin-bottom: 1em;
+      margin-bottom: 2em;
+      position:relative;
+      bottom: 75px;
+      z-index: 2;
+      left: 50px;
+    }
+
+    .second-box {
+        transform: rotate(15deg);
+        box-shadow: 0 3px 12px 0 rgba(89,120,206,.56);
+        border-radius: 30px;
+        position: relative;
+        bottom: 1100px;
+        right: 120px;
+        z-index: 0;
     }
 
     .cfp-deadline {
-      margin-bottom: 7em;
+      margin-bottom: 2em;
+      margin-bottom: 2em;
+      position:relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 75px;
       .cfp-deadline-content {
         margin-top: -1.5em;
         display: flex;
@@ -811,10 +174,15 @@ $buttonHoverBg: #226bb4;
     }
 
     .give-me-money {
+      position:relative;
+      z-index: 2;
+      left: 50px;
+      bottom: 75px;
       .whisper {
         font-weight: 900;
         font-size: 1.25em;
         margin-bottom: 0.5em;
+        
       }
     }
   }
diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer.scss
index 805fbd3..4dc9c00 100644
--- a/src/assets/scss/footer.scss
+++ b/src/assets/scss/footer.scss
@@ -92,6 +92,9 @@ $fontFamily: Noto Sans CJK TC, monospace;
   padding-top: 45px;
   padding-bottom: 45px;
 
+  position: relative;
+  z-index: 2;
+
   .footer-left {
     display: inline-flex;
     flex-direction: column;
diff --git a/src/components/CFP/Intro.vue b/src/components/CFP/Intro.vue
new file mode 100644
index 0000000..9d646d6
--- /dev/null
+++ b/src/components/CFP/Intro.vue
@@ -0,0 +1,151 @@
+<template>
+  <main class="introduction-container">
+    <div class="introduction">
+      <div class="box-back box">
+        <div class="introd-text">
+        <div class="about-sitcon">
+          <h2>關於 SITCON</h2>
+          <p>
+            學生計算機年會（SITCON）自 2013
+            年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+          </p>
+        </div>
+        <!-- TODO fix thumbnails style -->
+        <div class="past-sitcon">
+          <h3>歷屆年會網站</h3>
+          <div class="thumbnails">
+            <div class="thumb-wrapper">
+              <!-- TODO add thumb -->
+              <img class="cfp-img" src="" />
+              <p class="thumb-title text-center">SITCON 2020<br /></p>
+              <p class="thumb-subtitle text-center">#define</p>
+            </div>
+            <div class="thumb-wrapper">
+              <!-- TODO add thumb -->
+              <img class="cfp-img" src="" />
+              <p class="thumb-title text-center">SITCON 2019<br /></p>
+              <p class="thumb-subtitle text-center">開箱演算法</p>
+            </div>
+            <div class="thumb-wrapper">
+              <!-- TODO add thumb -->
+              <img class="cfp-img" src="" />
+              <p class="thumb-title text-center">SITCON 2018<br /></p>
+              <!-- TODO alignment is not good -->
+              <p class="thumb-subtitle text-center small">
+                POPULAR COMPUTER SCIENCE
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="join-discuss">
+          <h3>參與討論！</h3>
+          <div class="discuss-section">
+            <p>
+              SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
+              上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
+              並貢獻你的想法！
+            </p>
+            <p>
+              若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
+              的會議記錄。
+            </p>
+          </div>
+          <div class="link-group mt-1">
+            <a
+              rel="noopener"
+              target="_blank"
+              class="btn btn-primary mr-2"
+              href="https://groups.google.com/g/sitcon-general"
+              >SITCON 論壇</a
+            >
+            <a
+              rel="noopener"
+              target="_blank"
+              class="btn btn-primary"
+              href="https://hackmd.io/@SITCON/SITCON2021"
+              >會議記錄</a
+            >
+          </div>
+        </div>
+        </div>
+        <svg width="1000" height="950" class="first-box"><rect width="1500" height="1200" style="fill: rgb(255, 255, 255);"></rect></svg>
+      </div>
+<!-- ==================================================================================================== -->
+      <div class="box-bluearea">
+      </div>
+      <div class="box-back2 box">
+      <div class="introd-text">
+        <div class="topic-intro">
+          <div class="about-topic">
+            <h2>2021 年會主題</h2>
+            <h1>算盤的後裔</h1>
+            <p>
+              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+            </p>
+            <p>
+              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
+            </p>
+          </div>
+
+          <div class="cfp-deadline">
+            <h3>徵稿時間</h3>
+            <div class="cfp-deadline-content">
+              <span class="h3">01/15 ～ 02/22</span
+              ><span class="ml-2 mr-2">詳細時程請見</span
+              ><a class="btn btn-primary mr-2" rel="noopener" href="/news"
+                >投稿資訊</a
+              ><a
+                class="btn btn-primary"
+                rel="noopener"
+                target="_blank"
+                href="https://forms.gle/XoXJSD2P8dL8X8s2A"
+                >我知道了，快讓我投稿！</a
+              >
+            </div>
+          </div>
+          </div>
+        </div>
+        <div class="give-me-money">
+          <p class="whisper">最後...</p>
+          <h2>SITCON 贊助徵求</h2>
+          <p>
+            SITCON 的舉辦，除了有賴眾多志工的努力，也需要金錢的支持。<br />
+            如果您認同 SITCON 的理念，歡迎以行動支持 SITCON
+            的運作，讓更多交流產生！
+          </p>
+          <p>
+            企業合作歡迎聯繫
+            <a
+              class="context-hyperlink"
+              href="mailto:contact@sitcon.org"
+              rel="noopener"
+              target="_blank"
+              >contact@sitcon.org</a
+            >
+          </p>
+          <div>
+            <a
+              class="btn btn-primary"
+              rel="noopener"
+              target="_blank"
+              href="http://bit.ly/donatesitcon2021"
+              >個人贊助方案</a
+            >
+          </div>
+          
+        </div>
+        <svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+@Component
+export default class IntrodContainer extends Vue {}
+</script>
+
+<style lang="scss">
+@import "@/assets/scss/CFP/intro";
+</style>
diff --git a/src/pages/CFP.vue b/src/pages/CFP.vue
index 8b04083..40cf031 100644
--- a/src/pages/CFP.vue
+++ b/src/pages/CFP.vue
@@ -9,20 +9,19 @@
     </div>
     <!-- WTF = = -->
     <CfpHeader id="cfp-header" />
-    <!--<Intro id="cfp-intro"></Intro>-->
+    <Intro id="cfp-intro"></Intro>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-// components
 import CfpHeader from '@/components/CFP/Header.vue';
-// import Intro from '@/components/CFP/Intro.vue';
+import Intro from '@/components/CFP/Intro.vue';
 
 @Component({
   components: {
-    CfpHeader
-    // Intro
+    CfpHeader,
+    Intro
   }
 })
 export default class CFP extends Vue {