diff --git a/src/assets/scss/CFP/bg.scss b/src/assets/scss/CFP/bg.scss
index 0f4a7d7..08a5b47 100644
--- a/src/assets/scss/CFP/bg.scss
+++ b/src/assets/scss/CFP/bg.scss
@@ -1,47 +1,111 @@
-@import '../hyperpoint';
+@import "../hyperpoint";
+@import "../color";
 
 #cfp {
   position: relative;
 }
 
-// The Korea Fish
+// z-indecies
+$z-section: -1;
+$z-korea-fish: -10;
+$z-first-card: -8;
+$z-blue-bar: -9;
+$z-second-card: -8;
+// for mobile
+$zm-section: -1;
+$zm-korea-fish: -10;
+$zm-first-card: -9;
+$zm-blue-bar: -8;
+$zm-second-card: -7;
+$zm-third-card: -6;
 
+// general
+#cfp-bg {
+  .card {
+    transform: rotate(15deg);
+    box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
+    border-radius: 30px;
+    background: $white;
+  }
+}
+
+// lg
 #cfp-bg {
   width: 100vw;
-  z-index: -1;
+  z-index: $z-section;
   position: absolute;
-  // left: -12px; // offset
 
   .korea-fish {
-    top: 0;
-    left: 0;
-    width: 100%;
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    height: 960px;
+
     .sitcon-apple {
       position: absolute;
       margin-top: 360px;
       width: 250px;
+      z-index: -10;
     }
     .ellipse {
       position: absolute;
       margin-top: 200px;
       width: 640px;
+      z-index: -10;
     }
     .radial {
       width: 1920px;
       position: absolute;
+      z-index: -10;
     }
   }
-}
 
-@media screen and (min-width: 1921px) {
-  #cfp-bg {
-    .korea-fish {
-      .radial {
-        margin-top: calc(576px - 30vw);
-        width: 100vw;
+  .cards {
+    .first-card {
+      position: relative;
+      top: 72px;
+      right: 0px;
+      width: 1000px;
+      height: 950px;
+      z-index: $z-first-card;
+    }
+
+    .blue-bar {
+      z-index: $z-blue-bar;
+      width: 3600px; // this is enough
+      height: 300px;
+      background: rgba(34, 107, 180, 1);
+      position: relative;
+      right: 160px;
+      top: 300px;
+      transform: rotate(15deg);
+      opacity: 1;
+
+      p {
+        padding-top: 160px;
+        padding-left: 240px;
+        color: $white;
+        font-size: 48pt;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        z-index: $z-blue-bar;
+      }
+    }
+
+    .card2-wrapper {
+      height: 1600px;
+      overflow: hidden;
+      position: relative;
+      margin-top: -300px;
+      z-index: $z-second-card;
+
+      .second-card {
+        z-index: $z-second-card;
+        position: relative;
+        top: 240px;
+        right: 240px;
+        width: 1500px;
+        height: 1800px;
       }
     }
   }
@@ -63,9 +127,228 @@
         width: 1666px;
       }
     }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: 172px;
+        right: 108px;
+        width: 1400px; // enough
+        height: 1100px;
+        z-index: $zm-first-card;
+      }
+
+      .blue-bar {
+        z-index: $zm-blue-bar;
+        width: 3600px; // this is enough
+        height: 240px;
+        position: relative;
+        right: 160px;
+        top: 400px;
+
+        p {
+          padding-top: 20px;
+          padding-left: 180px;
+          z-index: $zm-blue-bar;
+        }
+      }
+
+      .card2-wrapper {
+        z-index: $zm-second-card;
+
+        .second-card {
+          z-index: $zm-second-card;
+          position: relative;
+          height: 900px;
+          top: 362px;
+          right: 90px;
+        }
+      }
+    }
   }
 }
 
+@include sm {
+  #cfp-bg {
+    .korea-fish {
+      .sitcon-apple {
+        margin-top: 320px;
+        width: 216px;
+      }
+      .ellipse {
+        margin-top: 280px;
+        width: 420px;
+      }
+      .radial {
+        margin-top: 0;
+        width: 1666px;
+      }
+    }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: 0px;
+        right: 180px;
+        height: 1500px;
+      }
+
+      .blue-bar {
+        position: relative;
+        right: 160px;
+        top: 240px;
+
+        p {
+          padding-top: 20px;
+          padding-left: 180px;
+        }
+      }
+
+      .card2-wrapper {
+        .second-card {
+          position: relative;
+          height: 950px;
+          top: 198px;
+          right: 90px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 540px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1450px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 880px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #cfp-bg {
+    .cards {
+      .card2-wrapper {
+        .second-card {
+          height: 960px;
+        }
+      }
+    }
+  }
+}
+
+@include xs {
+  #cfp-bg {
+    .korea-fish {
+      .sitcon-apple {
+        margin-top: 216px;
+        width: 120px;
+      }
+      .ellipse {
+        margin-top: 180px;
+        width: 240px;
+      }
+      .radial {
+        margin-top: -180px;
+        width: 1666px;
+      }
+    }
+
+    .cards {
+      .first-card {
+        position: relative;
+        top: -180px;
+        right: 180px;
+        height: 1400px;
+      }
+
+      .blue-bar {
+        position: relative;
+        right: 160px;
+        top: 60px;
+      }
+
+      .card2-wrapper {
+        margin-top: -600px;
+
+        .second-card {
+          position: relative;
+          height: 940px;
+          top: 318px;
+          right: 90px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 380px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1400px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1050px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1400px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1000px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 320px) {
+  #cfp-bg {
+    .cards {
+      .first-card {
+        height: 1500px;
+      }
+      .card2-wrapper {
+        .second-card {
+          height: 1050px;
+        }
+      }
+    }
+  }
+}
+
+/*
+@media screen and (min-width: 1921px) {
+  #cfp-bg {
+    .korea-fish {
+      .radial {
+        margin-top: calc(576px - 30vw);
+        width: 100vw;
+      }
+    }
+  }
+}
+
+@include md {
+  
+}
+
 @include sm {
   #cfp-bg {
     .korea-fish {
@@ -103,3 +386,4 @@
     }
   }
 }
+*/
diff --git a/src/assets/scss/CFP/header.scss b/src/assets/scss/CFP/header.scss
index 4a0b6c5..ce9b4c2 100644
--- a/src/assets/scss/CFP/header.scss
+++ b/src/assets/scss/CFP/header.scss
@@ -16,7 +16,7 @@ $width-svg-news: 259px;
   img.svg {
     height: auto;
   }
-  z-index: 1;
+  // z-index: 1;
 
   .spot-box {
     padding-bottom: 260px;
diff --git a/src/assets/scss/CFP/intro.scss b/src/assets/scss/CFP/intro.scss
index 1b8d135..e5c6a02 100644
--- a/src/assets/scss/CFP/intro.scss
+++ b/src/assets/scss/CFP/intro.scss
@@ -1,13 +1,9 @@
-@import '../hyperpoint';
-@import '../color';
-$fontFamily: Noto Sans TC;
-$fontColor: $mid-blue;
+@import "../hyperpoint";
+@import "../color";
 
 // General settings:
 //    font-size and paragraph spacing for headers and paragraph text
 #cfp-intro {
-  margin-top: 90px;
-
   h1,
   h2,
   h3 {
@@ -23,6 +19,10 @@ $fontColor: $mid-blue;
   .h1 {
     font-size: 42pt;
     font-weight: 900;
+
+    @include sm {
+      font-size: 38pt;
+    }
   }
 
   h2,
@@ -35,24 +35,11 @@ $fontColor: $mid-blue;
   .h3 {
     font-size: 22pt;
     font-weight: 900;
+    @include sm {
+      font-size: 19pt;
+    }
   }
 }
-.introduction {
-  height: 2400px;
-  overflow: hidden;
-  padding-bottom: 0;
-}
-@media screen and (max-width: 1021px) {
-  .introduction {
-    height: 2230px;
-  }
-}
-@media screen and (max-width: 891px) {
-  .introduction {
-    height: 2400px;
-  }
-}
-
 
 // Utiliy
 #cfp-intro {
@@ -65,44 +52,28 @@ $fontColor: $mid-blue;
   .mt-1 {
     margin-top: 1em;
   }
+  .mb-1 {
+    margin-bottom: 1em;
+  }
 }
 
 #cfp-intro {
+  padding-top: 72px;
+  padding-bottom: 72px;
+  padding-left: 135px;
+  color: $mid-blue;
 
   .box-back {
-    // width: 880px;
-    margin-bottom: -40em;
-    font-family: $fontFamily;
-    color: $fontColor;
+    padding-top: 180px;
+    padding-bottom: 180px;
+    width: 800px;
 
-    width: 700px;
-    padding: 20px;
-
-    .first-box {
-      transform: rotate(15deg);
-      box-shadow: 0 3px 12px 0 rgba(89, 120, 206, 0.56);
-      border-radius: 30px;
-      position: relative;
-      bottom: 620px;
-      right: 50px;
-      z-index: 0;
-    }
-    .introd-text {
-      position: relative;
-      top: 200px;
-      left: 150px;
-      z-index: 2;
-    }
     .about-sitcon {
-      margin-bottom: 0 auto 2em;
+      // empty
     }
 
     .past-sitcon {
-      margin-bottom: 2em;
-      width: 60vw;
-      height: 13em;
-
-      .cfp-img{
+      .cfp-img {
         width: 180px; //225
         height: 121px; //152
       }
@@ -118,6 +89,7 @@ $fontColor: $mid-blue;
         display: flex;
         flex-direction: row;
         padding: 0.25em 0;
+        margin-bottom: 2em;
 
         .thumb-wrapper {
           .thumb-title,
@@ -134,62 +106,28 @@ $fontColor: $mid-blue;
           }
 
           &:not(:last-child) {
-            margin-right: 1em;
+            margin-right: 2em;
           }
         }
       }
     }
-    
+
     .join-discuss {
       // empty
     }
   }
 
-  .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;
-    font-family: $fontFamily;
-    color: $fontColor;
-
-    width: 900px;
-    padding: 20px 20px 168px 20px;
-    height: 2350px;
+    width: 1050px;
+    padding-top: 180px;
 
     .about-topic {
-      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, 0.56);
-      border-radius: 30px;
-      position: relative;
-      bottom: 1100px;
-      right: 120px;
-      z-index: 0;
+      // empty
     }
 
     .cfp-deadline {
-      margin-bottom: 2em;
-      margin-bottom: 2em;
-      position: relative;
-      z-index: 2;
-      left: 50px;
-      bottom: 75px;
+      margin-bottom: 2.5em;
+
       .cfp-deadline-content {
         margin-top: -1.5em;
         display: flex;
@@ -197,12 +135,8 @@ $fontColor: $mid-blue;
         align-items: flex-end;
       }
     }
-    
+
     .give-me-money {
-      position: relative;
-      z-index: 2;
-      left: 50px;
-      bottom: 75px;
       .whisper {
         font-weight: 900;
         font-size: 1.25em;
@@ -212,91 +146,224 @@ $fontColor: $mid-blue;
   }
 }
 
-@include md{ //for width 786px
-  #cfp-intro{
-    h1,
-    h2,
-    h3 {
-      margin-bottom: 12pt;
-    }
-
-    p {
-      font-size: 14pt;
-      line-height: 1.75;
-      width:85vw;
-    }
-
-    p:not(:last-child) {
-      margin-bottom: 2em;
+@include lg {
+  #cfp-intro {
+    padding-left: 135px;
+    padding-right: 135px;
+    .box-back2 {
+      width: initial;
     }
   }
-  #cfp-intro{
-    .box-back {
-      margin-bottom: -42em;
-      margin-left:-6em;
-  
-      .first-box {
-        transform: rotate(12deg) scale(1.2);
-        bottom: 590px;
-        left: 100px;
-      }
+}
+
+@include md {
+  #cfp-intro {
+    padding-top: 72px;
+    padding-bottom: 144px;
+    padding-left: 0px;
+    padding-right: 0px;
+
+    .box {
+      width: 632px;
+      margin: 0 auto;
+    }
+
+    .box-back {
+      padding-top: 120px;
+      padding-bottom: 90px;
 
-      .introd-text {
-        top: 120px;
-      }
       .past-sitcon {
+        .cfp-img {
+          width: 180px; //225
+          height: 121px; //152
+        }
+
         .thumbnails {
           .thumb-wrapper {
-            width:200.5px;//25vw;
-            .thumb-title,
-            .thumb-subtitle {
-              width:185.5px; //25vw;
+            &:not(:last-child) {
+              margin-right: 1em;
             }
           }
         }
       }
     }
-  }
 
-  #cfp-intro{
-    .box-bluearea {
-      height: 200px;
-      z-index: 0;
-      transform: rotate(12deg);
-    }
-  }
-  
-  #cfp-intro{
     .box-back2 {
-      margin-top: 1em;
-      margin-left: -2em;
-  
-      .second-box {
-          transform: rotate(12deg);
-          bottom: 1030px;
-          left:-5em;
-      }
-    }
-    
-  }
+      padding-top: 320px;
 
-  #cfp-intro {
-    //button util
-    .mr-2 {
-      margin-right: 0.5em;
-    }
-    .ml-2 {
-      margin-left: 0.5em;
-    }
-    .mt-1 {
-      margin-top: 1em;
+      .topic-intro {
+        .about-topic {
+          h1,
+          h2 {
+            text-align: right;
+          }
+        }
+        .cfp-deadline {
+          .cfp-deadline-content {
+            display: initial;
+          }
+        }
+      }
+
+      .give-me-money {
+        margin-top: 240px;
+      }
     }
   }
 }
 
-@include sm { //for width 600px
+@media screen and (max-width: 768px)  {
+  #cfp-intro {
+    .box-back2 {
 
-  #cfp-intro{
+      .topic-intro {
+        .cfp-deadline {
+          .cfp-deadline-content {
+          }
+        }
+      }
+
+      .give-me-money {
+        margin-top: 200px;
+      }
+    }
+  }
+}
+
+@include sm {
+  #cfp-intro {
+    padding-top: 96px;
+    padding-bottom: 60px;
+    padding-left: 36px;
+    padding-right: 36px;
+    font-size: 0.9em;
+
+    .box {
+      width: initial;
+      margin: 0;
+    }
+
+    .box-back {
+      padding-top: 0px;
+      padding-bottom: 90px;
+      // height: 1240px;
+
+      .past-sitcon {
+        .cfp-img {
+          width: 180px; //225
+          height: 121px; //152
+        }
+
+        .thumbnails {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .thumb-wrapper {
+            &:not(:last-child) {
+              margin-right: 0;
+              margin-bottom: 1em;
+            }
+          }
+        }
+      }
+    }
+
+    .box-back2 {
+      padding-top: 380px;
+
+      .give-me-money {
+        margin-top: 140px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 540px)  {
+  #cfp-intro {
+    .box-back2 {
+      padding-top: 360px;
+
+      .give-me-money {
+        margin-top: 180px;
+      }
+    }
+  }
+}
+
+@include xs {
+  #cfp-intro {
+    padding-top: 126px;
+    padding-bottom: 60px;
+    padding-left: 24px;
+    padding-right: 24px;
+
+    .box {
+      width: initial;
+      margin: 0;
+    }
+
+    .box-back {
+      padding-top: 0px;
+      padding-bottom: 90px;
+      // height: 1240px;
+
+      .past-sitcon {
+        .cfp-img {
+          width: 180px; //225
+          height: 121px; //152
+        }
+
+        .thumbnails {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+
+          .thumb-wrapper {
+            &:not(:last-child) {
+              margin-right: 0;
+              margin-bottom: 1em;
+            }
+          }
+        }
+      }
+    }
+
+    .box-back2 {
+      padding-top: 300px;
+
+      .topic-intro {
+        .cfp-deadline {
+          .cfp-deadline-content {
+            display: initial;
+          }
+        }
+      }
+
+      .give-me-money {
+        margin-top: 180px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 360px) {
+  #cfp-intro {
+    .box-back2 {
+      padding-top: 240px;
+
+      .give-me-money {
+        margin-top: 180px;
+      }
+    }
+  }
+}
+
+/*
+@include sm {
+  //for width 600px
+
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -306,7 +373,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 13pt;
       line-height: 1.5;
-      width:70vw;
+      width: 70vw;
     }
 
     p:not(:last-child) {
@@ -314,11 +381,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left:-5em;
-  
+      margin-left: -5em;
+
       .first-box {
         transform: rotate(12deg) scale(1.1);
         bottom: 610px;
@@ -329,18 +396,18 @@ $fontColor: $mid-blue;
       }
 
       .past-sitcon {
-        margin-bottom:-1em;
+        margin-bottom: -1em;
         .thumbnails {
           .thumb-wrapper {
-            width:122.5px;//25vw;
+            width: 122.5px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:132.5px; //25vw;
+              width: 132.5px; //25vw;
             }
           }
         }
 
-        .cfp-img{
+        .cfp-img {
           width: 128.5px; //225
           height: 80px; //152
           margin-left: 0em;
@@ -349,24 +416,24 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 300px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
-      margin-top:-6em;
+      margin-top: -6em;
       .second-box {
-          transform: rotate(12deg);
-          bottom: 1060px;
+        transform: rotate(12deg);
+        bottom: 1060px;
       }
     }
   }
-  
+
   #cfp-intro {
     //button util
     .mr-2 {
@@ -381,8 +448,8 @@ $fontColor: $mid-blue;
   }
 }
 
-@include ss { //
-  #cfp-intro{
+@include ss {
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -410,7 +477,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 12pt;
       line-height: 1.65;
-      width:80vw;
+      width: 80vw;
     }
 
     p:not(:last-child) {
@@ -418,11 +485,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left:-7em;
-  
+      margin-left: -7em;
+
       .first-box {
         transform: rotate(12deg);
         bottom: 640px;
@@ -432,20 +499,20 @@ $fontColor: $mid-blue;
         top: 100px;
       }
       .past-sitcon {
-        margin-top:1em;
+        margin-top: 1em;
       }
       .past-sitcon {
         .thumbnails {
           .thumb-wrapper {
-            width:122.5px;//25vw;
+            width: 122.5px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:132.5px; //25vw;
+              width: 132.5px; //25vw;
             }
           }
         }
 
-        .cfp-img{
+        .cfp-img {
           width: 128.5px; //225
           height: 80px; //152
           margin-left: 0em;
@@ -454,26 +521,26 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 280px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
+
+  #cfp-intro {
     .box-back2 {
       margin-top: -5em;
       margin-left: -1em;
-  
+
       .second-box {
-          transform: rotate(12deg) scale(0.65);
-          bottom: 1270px;
-          left:-14em;
+        transform: rotate(12deg) scale(0.65);
+        bottom: 1270px;
+        left: -14em;
       }
     }
-    
+
     .give-me-money {
       top: 2em;
       .whisper {
@@ -484,7 +551,7 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .past-sitcon {
       margin-bottom: 2em;
       width: 40vw;
@@ -496,10 +563,10 @@ $fontColor: $mid-blue;
         padding: 0.25em 0;
 
         .thumb-wrapper {
-          width:225px;//25vw;
+          width: 225px; //25vw;
           .thumb-title,
           .thumb-subtitle {
-            width:190px; //25vw;
+            width: 190px; //25vw;
             text-align: center;
             margin: 0;
             font-size: 0.8em;
@@ -521,7 +588,7 @@ $fontColor: $mid-blue;
 }
 
 @include xs {
-  #cfp-intro{
+  #cfp-intro {
     h1,
     h2,
     h3 {
@@ -549,6 +616,7 @@ $fontColor: $mid-blue;
     p {
       font-size: 11pt;
       line-height: 1.65;
+      width: 80vw;
     }
 
     p:not(:last-child) {
@@ -556,11 +624,11 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-back {
       margin-bottom: -45em;
-      margin-left: -8em; //40
-  
+      margin-left: -8em;
+
       .first-box {
         transform: rotate(12deg);
         bottom: 600px; //625
@@ -570,31 +638,25 @@ $fontColor: $mid-blue;
         top: 100px;
       }
       .past-sitcon {
-        margin-top:1em;
-        margin-bottom:-3em;
+        margin-top: 1em;
+
         .thumbnails {
           margin-left: -0.5em;
           padding: 0.25em 0;
-  
+
           .thumb-wrapper {
-            width:90px;//25vw;
+            width: 110px; //25vw;
             .thumb-title,
             .thumb-subtitle {
-              width:115px; //25vw;
+              width: 130px; //25vw;
               text-align: center;
               margin: 0;
               font-size: 0.1em;
               line-height: 15em;
               font-weight: 900;
             }
-            .thumb-subtitle{
-              display: none;
-            }
-            .small {
-              font-size: 0.1em;
-            }
-            .cfp-img{
-              width: 95.5px; //225
+            .cfp-img {
+              width: 110.5px; //225
               height: 63px; //152
               margin-left: 0.6em;
             }
@@ -604,37 +666,27 @@ $fontColor: $mid-blue;
     }
   }
 
-  #cfp-intro{
+  #cfp-intro {
     .box-bluearea {
       height: 220px;
       z-index: 0;
       transform: rotate(12deg);
     }
   }
-  
-  #cfp-intro{
-    .box-back2 {
-      margin-top: 0em;
-      margin-left: -2em;
-  
-      .second-box {
-          transform: rotate(12deg) scale(0.63);
-          bottom: 1270px;
-          left:-15em;
-      }
-    }
-    
-    .give-me-money {
-      top: 2em;
-      .whisper {
-        font-weight: 900;
-        font-size: 1.25em;
-        margin-bottom: 0.5em;
-      }
-    }
-  }
-}
 
+  #cfp-intro {
+    .box-back2 {
+      margin-top: 3em;
+      margin-left: -1em;
+
+      .second-box {
+        transform: rotate(12deg) scale(0.63);
+        bottom: 1250px;
+        left: -15em;
+      }
+    }
+
+<<<<<<< HEAD
 @media screen and (max-width: 800px) {
   .cfp-deadline-content {
     display: flex;
@@ -691,11 +743,10 @@ $fontColor: $mid-blue;
       }
     }
     
+=======
+>>>>>>> dev2
     .give-me-money {
-      position: relative;
-      z-index: 2;
-      left: 50px;
-      bottom: 55px;
+      top: 2em;
       .whisper {
         font-weight: 900;
         font-size: 1.25em;
@@ -704,4 +755,4 @@ $fontColor: $mid-blue;
     }
   }
 }
-}
\ No newline at end of file
+*/
diff --git a/src/assets/scss/footer.scss b/src/assets/scss/footer.scss
index e0e2077..769b053 100644
--- a/src/assets/scss/footer.scss
+++ b/src/assets/scss/footer.scss
@@ -3,7 +3,7 @@
 // varible declare
 $fontColor: white;
 $backgroundColor: #1f4163;
-$fontFamily: Noto Sans TC, monospace;
+$fontFamily: 'Noto Sans CJK TC', monospace;
 
 @mixin fontSize() {
   font-size: 14pt;
diff --git a/src/assets/scss/hyperpoint.scss b/src/assets/scss/hyperpoint.scss
index c150ec1..c957512 100644
--- a/src/assets/scss/hyperpoint.scss
+++ b/src/assets/scss/hyperpoint.scss
@@ -23,6 +23,7 @@ $w414: 414px;
   }
 }
 
+// WTF is this
 @mixin ss {
   @media screen and (max-width: $w523 - 1px) {
     @content;
@@ -34,3 +35,15 @@ $w414: 414px;
     @content;
   }
 }
+
+.desktop-only {
+  @media screen and (max-width: $w1024 - 1px) {
+    display: none;
+  }
+}
+
+.mobile-only {
+  @media screen and (min-width: $w1024) {
+    display: none;
+  }
+}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 36b5127..5d1877b 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -30,7 +30,9 @@ body {
   
   display: flex;
   flex-direction: column;
+  
   font-size: 13pt;
+  font-family: 'Noto Sans CJK TC', sans-serif;
 }
 
 #app {
diff --git a/src/assets/scss/news/agenda.scss b/src/assets/scss/news/agenda.scss
index 5c9f9fb..4a504f4 100644
--- a/src/assets/scss/news/agenda.scss
+++ b/src/assets/scss/news/agenda.scss
@@ -1,6 +1,23 @@
-@import "../breakpoint.scss";
-@import "../color.scss";
-@import "../font.scss";
+// import google font
+// no need to import font; such font has been imported in App.vue
+// @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&display=swap");
+$fontFamily-NotoSansTC: 'Noto Sans TC', sans-serif;
+$fontFamily: 'Noto Sans TC', sans-serif;
+// Color
+// dont define private color if these are common ones 
+@import '../color';
+// $white: #ffffff;
+// $mid-blue: #226bb4;
+
+//Screen breakpoint
+$max-width-big-0: 1800px;
+$max-width-big: 1500px;
+$max-width-medium-0: 1100px;
+$max-width-medium-1: 900px;
+$max-width-small-0: 750px;
+$max-width-small-1: 500px;
+$max-width-small-2: 410px;
+$max-width-small-3: 360px;
 
 // .info-container
 @mixin infoContainer() {
diff --git a/src/assets/scss/news/schedule.scss b/src/assets/scss/news/schedule.scss
index ca400b4..f7f52b5 100644
--- a/src/assets/scss/news/schedule.scss
+++ b/src/assets/scss/news/schedule.scss
@@ -4,6 +4,8 @@
 // No need to import font; the fonts have been imported in App.vue
 // @import '@/assets/scss/font';
 
+$fontFamily: 'Noto Sans CJK TC', monospace;
+
 #news-schedule {
   max-width: 80vw;
   margin: 0 auto;
diff --git a/src/assets/scss/util.scss b/src/assets/scss/util.scss
index 74040c3..9c7a396 100644
--- a/src/assets/scss/util.scss
+++ b/src/assets/scss/util.scss
@@ -1,4 +1,5 @@
 @import 'color';
+@import 'hyperpoint';
 
 .text-center {
   text-align: center;
@@ -40,6 +41,10 @@
   display: inline-block;
   padding: 0.85em 1.25em;
 
+  @include sm {
+    padding: 0.5em 0.85em;
+  }
+
   font-size: 1.1em;
   font-weight: 900;
   border: none;
diff --git a/src/components/CFP/Intro.vue b/src/components/CFP/Intro.vue
index 2b3a22c..3282e1f 100644
--- a/src/components/CFP/Intro.vue
+++ b/src/components/CFP/Intro.vue
@@ -1,91 +1,116 @@
 <template>
   <main class="introduction-container">
-    <div class="introduction">
-      <div class="box-back box">
-        <div class="introd-text">
-        <div class="about-sitcon">
-          <h2>關於 SITCON</h2>
+    <!--<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="@/assets/images/CFP/2020.png" />
+            <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="@/assets/images/CFP/2019.png" />
+            <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="@/assets/images/CFP/2018.png" />
+            <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）自 2013
-            年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，希望引領更多學子踏入資訊的殿堂，更冀望所有對資訊有興趣的學生，能夠在年會裏齊聚一堂，彼此激盪、傳承、啟發，達到「學以致用、教學相長」的實際展現。
+            SITCON 是個開放的社群，許多籌備的相關事項都會在公開的 Mailing list
+            上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的 Mailing list
+            並貢獻你的想法！
+          </p>
+          <p>
+            若你想進一步了解過往討論的內容，也歡迎在 HackMD 上查看 SITCON 2021
+            的會議記錄。
           </p>
         </div>
-        <!-- TODO fix thumbnails style -->
-        <div class="past-sitcon">
-          <h3>歷屆年會網站</h3>
-          <div class="thumbnails">
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <a class="thumb-link" href="/2020">
-              <img class="cfp-img" src="@/assets/images/CFP/2020.png" />
-              <p class="thumb-title text-center">SITCON 2020<br /></p>
-              <p class="thumb-subtitle text-center">#define</p></a>
-            </div>
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <a class="thumb-link" href="/2019">
-              <img class="cfp-img" src="@/assets/images/CFP/2019.png" />
-              <p class="thumb-title text-center">SITCON 2019<br /></p>
-              <p class="thumb-subtitle text-center">開箱演算法</p></a>
-            </div>
-            <div class="thumb-wrapper">
-              <!-- TODO add thumb -->
-              <a class="thumb-link" href="/2018">
-              <img class="cfp-img" src="@/assets/images/CFP/2018.png" />
-              <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></a>
-            </div>
-          </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 class="join-discuss">
-          <h3>參與討論！</h3>
-          <div class="discuss-section">
-            <p>
-              SITCON 是個開放的社群，許多籌備的相關事項都會在公開的郵件論壇上進行討論，如果有興趣參與，歡迎訂閱 SITCON 的郵件論壇並貢獻你的想法！
-            </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>
-              千年以前的人類，發明了各式各樣輔助算術的工具，在世界各地的文明中，皆能找到廣義上的「算盤」。隨著時代演進，那些原始的工具，逐步進化成為現代的計算機與電腦，更進一步發展為隨處可見的智慧型裝置。俗話說「站在巨人的肩膀上」，前人的智慧成果成為墊腳石，讓站在其之上的後人可以看得更高、更遠。科技層層疊疊、承先啟後，文明才能跨越時空持續成長。
+      <!--</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 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">
+            <p class="desktop-only">
+              <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="/2021/cfp/news"
+                >投稿資訊</a
+              ><a
+                class="btn btn-primary"
+                rel="noopener"
+                target="_blank"
+                href="https://forms.gle/XoXJSD2P8dL8X8s2A"
+                >我知道了，快讓我投稿！</a
+              >
             </p>
-            <p>
-              人們不再需要重新發明輪子，只要善用前人的成果，就能造出更有效率的工具，並擁有更好的生活。生於現代的我們，每天寫著電腦程式、把玩著智慧型手機、徜徉在網際網路上沒有邊際的資訊大海。奠基於科技的現有成果，對科技的未來持續做出貢獻的我們，都是「算盤的後裔」。
+            <p class="mobile-only mb-1">
+              <span class="h3">01/15 ～ 02/22</span
+              ><span class="ml-2">詳細時程請見</span>
             </p>
+<<<<<<< HEAD
           </div>
 
           <div class="cfp-deadline">
@@ -97,50 +122,57 @@
             </div>
               <div class="cfp-introd-btn-outter">
               <a class="btn btn-primary mr-2" rel="noopener" href="/2021/cfp/news">投稿資訊</a>
+=======
+            <p class="mobile-only">
+>>>>>>> dev2
               <a
+                class="btn btn-primary mr-2"
+                rel="noopener"
+                href="/2021/cfp/news"
+                >投稿資訊</a
+              ><a
                 class="btn btn-primary"
                 rel="noopener"
                 target="_blank"
                 href="https://forms.gle/XoXJSD2P8dL8X8s2A"
-                >我知道了，快讓我投稿！</a
+                >快讓我投稿！</a
               >
-              </div>
-            </div>
-          </div>
+            </p>
           </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>
+      <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>
-        <svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>
+        <!--</div>-->
+        <!--<svg width="1100" height="1200" class="second-box"><rect width="1500" height="1500" style="fill: rgb(255, 255, 255);"></rect></svg>-->
       </div>
     </div>
+    <!--</div>-->
   </main>
 </template>
 
diff --git a/src/pages/CFP.vue b/src/pages/CFP.vue
index 40cf031..b391bbc 100644
--- a/src/pages/CFP.vue
+++ b/src/pages/CFP.vue
@@ -6,10 +6,23 @@
         <img class="ellipse" src="~@/assets/images/CFP/ellipse.svg" />
         <img class="sitcon-apple" src="~@/assets/images/CFP/sitcon-apple.svg" />
       </div>
+      <div class="cards">
+        <div class="first-card card" />
+        <div class="box-bluearea blue-bar">
+          <p class="desktop-only">Descendents of The Abacus</p>
+          <p class="mobile-only">Descendents of<br />The Abacus</p>
+        </div>
+        <div class="card2-wrapper">
+          <div class="second-card card" />
+          <div class="third-card card mobile-only" />
+        </div>
+      </div>
+    </div>
+    <div class="cfp-fg">
+      <!-- WTF = = -->
+      <CfpHeader id="cfp-header" />
+      <Intro id="cfp-intro" />
     </div>
-    <!-- WTF = = -->
-    <CfpHeader id="cfp-header" />
-    <Intro id="cfp-intro"></Intro>
   </div>
 </template>