diff --git a/package-lock.json b/package-lock.json
index 233448d..8c2a1de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1280,9 +1280,9 @@
       "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
-      "version": "0.3.20",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.20.tgz",
-      "integrity": "sha512-Q1eeEqcxHQ4oqty7C5Me8/hzWwdCRR643nR/6EHxv8BVxLVYHe4IoWAHg8MIGkE4VtSm3/JnNhkoLJhCkLx5aw=="
+      "version": "0.3.21",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.21.tgz",
+      "integrity": "sha512-Wcu3CFJV+iiqPEIoPVx3/CYnZBRgPeRABo6bLJByRH9ptJXyObn7WYPG7Rv0cg3+55bqcBbG0xEfovzwE2PNXg=="
     },
     "@sheerun/mutationobserver-shim": {
       "version": "0.3.2",
@@ -7661,11 +7661,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "keycode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
-      "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -10348,9 +10343,9 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.0.0-beta.16",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.16.tgz",
-      "integrity": "sha512-wjb+3CwviDWAaz4O3gQpd2XMDNqbOiqOOzpLm5aLPcp1wTsQsVRhyM+rTPmO3hYU8auA2eNpTYLz08/fAcMqDA==",
+      "version": "1.0.0-beta.17",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.17.tgz",
+      "integrity": "sha512-7VP9doezV4rX0EcajzMvyD6ywtrLfulF3ZAev+uTx8syWQybUkccOpecUO5kPomng/bJMgK/h+44PkZ15Dv44g==",
       "requires": {
         "@babel/runtime": "^7.4.2",
         "@restart/context": "^2.1.4",
@@ -10359,7 +10354,6 @@
         "classnames": "^2.2.6",
         "dom-helpers": "^5.1.2",
         "invariant": "^2.2.4",
-        "keycode": "^2.2.0",
         "popper.js": "^1.16.0",
         "prop-types": "^15.7.2",
         "prop-types-extra": "^1.1.0",
diff --git a/package.json b/package.json
index 61fdf31..f21d7a1 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "bootstrap": "^4.4.1",
     "react": "^16.12.0",
-    "react-bootstrap": "^1.0.0-beta.16",
+    "react-bootstrap": "^1.0.0-beta.17",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.3.1",
     "react-router-dom": "^5.1.2",
diff --git a/src/App.css b/src/App.css
index bdfa784..26449dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,29 +5,24 @@
 }
 
 /* navbar */
-.navbar-light{
+.navbar-light {
   background-color: #153b44;
 }
 #v-logo {
-  font-size: 30px;
-  color: black;
-}
-#sticky-nav {
-  position: sticky;
-  top: 0;
+  font-size: 40px;
+  font-weight: bold;
 }
 
 .navbar-nav a {
   cursor: pointer;
   margin-right: 10px;
-  font-size: 18px;
+  font-size: 19px;
 }
 
-
 /* Banner */
 
 .text-center {
-  margin-top: 4%;
+  margin-top: 8%;
 }
 
 #banner {
@@ -36,64 +31,65 @@
 }
 
 #banner-background {
-  background-image: linear-gradient(to top, #0fd850 0%, #daeeac 100%);
-  /* background-image: linear-gradient(to top, #0fd850 0%, #f6d51a 100%); */
+  background-image: linear-gradient(to top, #0fd850 0%, #01380a 100%);
   height: 35rem;
 }
 
 #header-banner {
-  font-family: "Fjalla One";
   font-size: 95px;
+  font-weight: bold;
 }
 
 #banner-text {
   font-size: 30px;
 }
 
-/* Image right*/
+/* Contents */
 
-.certain {
-  display: flex;
-  flex-direction: row;
+/* Image right*/
+.container {
+  display: grid;
 }
-
-.cover-description {
-  margin: 0;
-  margin-top: 18%;
+.cover-description-right {
+  margin-top: 40%;
   padding: 0;
-  display: block;
-  width: 35rem;
 }
 
 .img-right {
-  margin-left: 10%;
-  margin-top: 25%;
-  width: 80%;
+  margin-left: 15%;
+  margin-top: 80%;
+  width: 95%;
 }
 
 .cover1 {
   height: 45rem;
-  /* background-color: #f0f0f0; */
 }
 
 .header {
   font-size: 55px;
+  font-weight: bold;
+  color: #153b44;
 }
 
 .description {
-  font-size: 20px;
+  font-size: 25px;
 }
 
 .readmore {
-  width: 10rem;
+  width: 8rem;
 }
 
 /* Image left */
 
 .img-left {
-  margin-right: 10%;
-  margin-top: 25%;
-  width: 80%;
+  margin-top: 80%;
+  width: 95%;
+}
+.cover-description-left {
+  margin-left: 10%;
+  margin-top: 40%;
+  width: 100%;
+  padding: 0;
 }
 
 .cover2 {
@@ -106,19 +102,17 @@
   /* background-color: #3a3d44; */
   background-color: #153b44;
   height: 20rem;
+  margin-top: 10%;
 }
 
 .logo {
   font-size: 65px;
-  margin-top: 10%;
-}
-
-.col-md-4 {
-  margin-top: 2%;
+  margin-top: 15%;
 }
 
 .sw-logo {
   width: 22rem;
+  margin-top: 5%;
 }
 
 .copy-right {
@@ -128,543 +122,808 @@
   text-align: end;
 }
 
-
 /* responsive */
 
-/* Extra small devices (phones, 600px and down) */
-@media only screen and (max-width:600px) {
+/* Small devices (portrait and landscape phones, 300px and up) */
+
+/* ======iPhone5======= */
+
+/* Portrait */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
   /* navbar */
+
   .navbar {
     padding: 0;
     height: 40px;
   }
+
   #v-logo {
     display: none;
-    padding: 0;
-    margin: 0;
   }
+
   .navbar-nav a {
-    cursor: pointer;
-    margin-right: 10px;
     font-size: 9px;
     padding: 0;
     overflow: hidden;
   }
+
   .div.container {
     text-align: center;
     justify-content: center;
   }
 
-  /* banner */
+  .navbar-expand .navbar-nav .nav-link {
+    padding: 0;
+  }
 
+  /* banner */
   #header-banner {
+    margin-top: 15%;
     font-size: 40px;
+    font-weight: bolder;
   }
   #banner-text {
-    font-size: 18px;
+    font-size: 20px;
   }
+
   #banner-background {
     height: 22rem;
   }
+
   #banner {
     height: 20rem;
   }
-
   /* contents-right pic */
-  .header {
-    font-size: 30px;
+  .container {
+    display: grid;
   }
-  .subtitle {
-    font-size: 20px;
+
+  .header {
+    font-size: 34px;
+    font-weight: bold;
   }
+
   .description {
-    font-size: 18px;
-  }
-  .img-right {
-    display: none;
+    justify-content: center;
+    font-size: 20px;
+    width: 100%;
+    overflow: hidden;
   }
-  .rounded.float-right {
-    padding: 0;
+
+  .cover-description-right {
     margin: 0;
+    margin-top: 15%;
+    padding: 5%;
   }
+
   .cover1 {
     padding: 0;
     margin: 0%;
-    height: 23rem;
+    height: 50rem;
   }
+
   .readmore {
-    max-width: 35%;
+    max-width: 50%;
     height: 30px;
     font-size: 12px;
-    margin-left: 30%;
+    margin-left: 25%;
   }
 
-  /* contents-left contents */
-  .img-left {
-    display: none;
+  .img-right {
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 10%;
   }
+
+  /* contents-left contents */
   .cover2 {
     padding: 0;
     margin: 0;
-    height: 23rem;
+    height: 50rem;
   }
 
-  /* footer */
+  .img-left {
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 10%;
+  }
+  .cover-description-left {
+    margin: 0;
+    margin-top: 15%;
+    padding: 5%;
+  }
 
+  #column-reverse {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  /* footer */
   .sw-logo {
-    width: 50%;
-    margin-left: 25%;
-    margin-top: 30px;
+    width: 60%;
+    margin-left: 20%;
+    margin-top: 60px;
   }
+
   .logo {
     display: none;
   }
+
+  #cover-logo {
+    margin-top: 0;
+    padding: 0;
+  }
+
+  #cover-copyright {
+    padding: 0;
+    margin: 0;
+  }
+
   .copy-right {
     font-size: 15px;
     text-align: center;
-    justify-self: center;
+    justify-content: center;
   }
   .footer {
-    margin-top: 45px;
+    margin-top: 50px;
   }
 }
 
-/* Small devices (portrait tablets and large phones, 600px and up) */
-@media only screen and (min-width: 600px) {
+/* Landscape */
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
   /* navbar */
-  .navbar {
-    padding: 0;
-    height: 40px;
+
+  .navbar-nav a {
+    padding: 0 !important;
+    overflow: hidden;
+    font-size: 12px;
   }
-  #v-logo.nav-link {
-    font-size: 20px;
-    margin-left: 15px;
-    padding: 0;
-    margin-right: 20px;
+  #v-logo {
+    display: none;
+  }
+
+  /* contents-right pic */
+
+  .cover-description-right {
+    margin-top: 8% !important;
+    padding: 5% !important;
+  }
+  .cover1 {
+    height: 40rem !important;
+  }
+  .readmore {
+    margin-left: 35% !important;
+  }
+
+  .img-right {
+    width: 50% !important;
+    margin-left: 25% !important;
+    margin-top: 5% !important;
   }
+
+  /* contents-left contents */
+  .cover2 {
+    height: 40rem !important;
+  }
+  .img-left {
+    width: 50% !important;
+    margin-left: 25% !important;
+    margin-top: 5% !important;
+  }
+  .cover-description-left {
+    margin-top: 8% !important;
+    padding: 5% !important;
+  }
+  #column-reverse {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}
+
+/* ======iPhone6 to 8 and Galaxy s ======= */
+
+/* portrait */
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
+  /* navbar */
   .navbar-nav a {
-    cursor: pointer;
-    margin-right: 12px;
-    font-size: 12px;
+    font-size: 11px !important;
     padding: 0;
     overflow: hidden;
   }
-  .div.container {
-    text-align: center;
-    justify-content: center;
+
+  /* banner */
+
+  #header-banner {
+    margin-top: 5%;
+    font-size: 40px;
+    font-weight: bolder;
   }
-  .navbar-expand .navbar-nav .nav-link {
+
+  .readmore {
+    max-width: 50%;
+    height: 30px;
+    font-size: 12px;
+    margin-left: 30%;
+  }
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
+  /* navbar */
+  .navbar-nav a {
+    font-size: 13px !important;
     padding: 0;
+    overflow: hidden;
   }
 
+  #v-logo {
+    font-size: 15px !important;
+    margin-right: 3%;
+    /* display: none; */
+  }
   /* banner */
-
   #header-banner {
-    font-size: 50px;
+    margin-top: 5%;
+    font-size: 40px;
+    font-weight: bolder;
   }
   #banner-text {
-    font-size: 25px;
+    font-size: 24px;
   }
   #banner-background {
-    height: 22rem;
+    height: 25rem;
   }
   #banner {
-    height: 20rem;
+    height: 22rem;
   }
 
   /* contents-right pic */
+
   .header {
-    font-size: 35px;
-  }
-  .subtitle {
-    font-size: 25px;
+    font-size: 34px;
+    font-weight: bold;
   }
+
   .description {
+    justify-content: center;
     font-size: 20px;
+    width: 100%;
+    overflow: hidden;
   }
-  .img-right {
-    margin-top: 90%;
-    margin-left: 20%;
-    padding: 0;
-  }
-  .rounded.float-right {
-    padding: 0;
+
+  .cover-description-right {
     margin: 0;
+    margin-top: 20%;
+    padding: 5%;
   }
+
   .cover1 {
     padding: 0;
     margin: 0%;
-    height: 33rem;
+    height: 30rem;
   }
+
   .readmore {
-    max-width: 40%;
+    max-width: 50%;
     height: 30px;
     font-size: 12px;
-    margin-left: 30%;
+    margin-left: 25%;
   }
 
-  /* contents-left contents */
-  .img-left {
-    margin-top: 90%;
+  .img-right {
+    width: 120%;
+    margin-left: 10%;
+    margin-top: 100%;
   }
+
+  /* contents-left contents */
   .cover2 {
     padding: 0;
     margin: 0;
-    height: 33rem;
+    height: 30rem;
   }
 
+  .img-left {
+    width: 120%;
+    margin-left: -20%;
+    margin-top: 100%;
+  }
+  .cover-description-left {
+    margin: 0;
+    margin-top: 20%;
+    padding: 5%;
+    width: 100%;
+  }
   /* footer */
-
   .sw-logo {
-    width: 40%;
-    margin-left: 30%;
+    width: 50% !important;
+    margin-left: 25% !important;
     margin-top: 60px;
   }
+
   .logo {
     display: none;
-    font-size: 40px;
-    margin-top: 50px;
   }
+
   #cover-logo {
     margin-top: 0;
     padding: 0;
   }
+
   #cover-copyright {
     padding: 0;
     margin: 0;
   }
+
   .copy-right {
     font-size: 15px;
     text-align: center;
     justify-content: center;
   }
   .footer {
-    margin-top: 120px;
+    margin-top: 50px;
   }
 }
 
-/* Medium devices (landscape tablets, 768px and up) */
-@media only screen and (min-width: 768px) {
+/* ----------- iPhone 6+, 7+ and 8+ ----------- */
+
+/* Portrait */
+@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
   /* navbar */
-  .navbar {
-    padding: 0;
-    height: 60px;
-  }
-  #v-logo.nav-link {
-    font-size: 25px;
-    padding: 0;
-    margin-right: 45px;
-  }
   .navbar-nav a {
-    cursor: pointer;
-    margin-right: 12px;
-    font-size: 12px;
-    padding: 0;
+    font-size: 12px !important;
     overflow: hidden;
   }
-  .div.container {
-    text-align: center;
-    justify-content: center;
-  }
-  .navbar-expand .navbar-nav .nav-link {
-    padding: 0;
+}
+
+/* Landscape */
+@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
+  /* navbar */
+  .navbar-nav a {
+    font-size: 15px !important;
+    overflow: hidden;
   }
 
+  #v-logo {
+    font-size: 23px;
+    margin-right: 7%;
+    margin-left: -8% !important;
+  }
   /* banner */
-
   #header-banner {
-    font-size: 55px;
+    margin-top: 7%;
+    font-size: 50px;
   }
   #banner-text {
     font-size: 25px;
   }
   #banner-background {
-    height: 28rem;
+    height: 25rem;
   }
   #banner {
-    height: 24rem;
+    height: 22rem;
   }
 
   /* contents-right pic */
+
   .header {
-    font-size: 40px;
-  }
-  .subtitle {
-    font-size: 27px;
+    font-size: 34px;
   }
+
   .description {
-    font-size: 21px;
-  }
-  .img-right {
-    margin-top: 60%;
-    margin-left: 30%;
-    padding: 0;
+    font-size: 20px;
+    width: 100%;
   }
-  .rounded.float-right {
-    padding: 0;
-    margin: 0;
+
+  .cover-description-right {
+    margin-top: 20%;
+    padding: 5%;
   }
+
   .cover1 {
-    padding: 0;
-    margin: 0%;
-    height: 33rem;
+    height: 30rem;
   }
+
   .readmore {
-    max-width: 30%;
-    height: 30px;
     font-size: 12px;
-    margin-left: 30%;
+    margin-left: 25%;
   }
 
+  .img-right {
+    width: 120% !important;
+    margin-left: 10%;
+    margin-top: 100% !important;
+  }
   /* contents-left contents */
+  .cover2 {
+    height: 30rem;
+  }
+
   .img-left {
-    margin-top: 60%;
+    width: 120% !important;
+    margin-left: 20%;
+    margin-top: 100% !important;
   }
-  .cover2 {
-    padding: 0;
-    margin: 0;
-    height: 33rem;
+  .cover-description-left {
+    margin-top: 20%;
+    padding: 5%;
+    width: 100%;
   }
 
   /* footer */
-
   .sw-logo {
-    width: 90%;
-    margin-left: 20px;
-    margin-top: 50px;
-  }
-  .logo{
-    display: inline;
-   }
-  #cover-copyright {
+    width: 60%;
     margin-left: 20%;
+    margin-top: 60px;
   }
+
+  .logo {
+    display: none;
+  }
+
   #cover-logo {
-    font-size: 60px;
-    margin-left: 30px;
-    margin-top: 55px;
+    margin-top: 0;
+    padding: 0;
+  }
+
+  #cover-copyright {
+    padding: 0;
+    margin: 0;
   }
+
   .copy-right {
     font-size: 15px;
-    margin-right: 15px;
+    text-align: center;
+    justify-content: center;
   }
   .footer {
-    margin-top: 15%;
+    margin-top: 50px;
   }
 }
 
-/* Large devices (laptops/desktops, 992px and up) */
-@media only screen and (min-width: 992px) {
+/* ----------- iPhone X ----------- */
+/* Landscape */
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
   /* navbar */
-  .navbar {
-    padding: 0;
-    height: 60px;
-  }
-  #v-logo.nav-link {
-    font-size: 30px;
-    padding: 0;
-    margin-right: 20px;
-  }
   .navbar-nav a {
-    cursor: pointer;
-    margin-right: 12px;
-    font-size: 19px;
-    padding: 0;
+    font-size: 15px !important;
     overflow: hidden;
   }
-  .div.container {
-    text-align: center;
-    justify-content: center;
-  }
-  .navbar-expand .navbar-nav .nav-link {
-    padding: 0;
+
+  #v-logo {
+    font-size: 23px;
+    margin-right: 7%;
+    margin-left: -2%;
   }
 
   /* banner */
-
   #header-banner {
-    font-size: 65px;
+    margin-top: 7%;
+    font-size: 50px;
   }
   #banner-text {
-    font-size: 27px;
+    font-size: 25px;
   }
   #banner-background {
-    height: 28rem;
+    height: 25rem;
   }
   #banner {
-    height: 24rem;
+    height: 22rem;
   }
 
   /* contents-right pic */
+
   .header {
-    font-size: 50px;
-  }
-  .subtitle {
-    font-size: 30px;
+    font-size: 34px;
   }
+
   .description {
-    font-size: 25px;
-  }
-  .img-right {
-    margin-top: 45%;
-    margin-left: 15%;
-    padding: 0;
+    font-size: 20px;
+    width: 100%;
   }
-  .rounded.float-right {
-    padding: 0;
-    margin: 0;
+
+  .cover-description-right {
+    margin-top: 20%;
+    padding: 5%;
   }
+
   .cover1 {
-    padding: 0;
-    margin: 0%;
-    height: 33rem;
+    height: 30rem;
   }
+
   .readmore {
-    max-width: 30%;
-    height: 37px;
-    font-size: 16px;
-    margin-left: 30%;
+    font-size: 12px;
+    margin-left: 25%;
+  }
+
+  .img-right {
+    width: 110%;
+    margin-left: 1%;
+    margin-top: 70% !important;
   }
 
   /* contents-left contents */
+  .cover2 {
+    height: 30rem;
+  }
+
   .img-left {
-    margin-top: 45%;
+    width: 110%;
+    margin-left: 10%;
+    margin-top: 70% !important;
   }
-  .cover2 {
-    padding: 0;
-    margin: 0;
-    height: 33rem;
+  .cover-description-left {
+    margin-top: 20%;
+    margin-left: 13%;
+    padding: 5%;
+    width: 100%;
   }
 
   /* footer */
-
   .sw-logo {
-    width: 95%;
-    margin-left: 20px;
-    margin-top: 50px;
+    width: 80%;
+    margin-left: 10%;
+    margin-top: 60px;
   }
-  #cover-copyright {
-    margin-left: 20%;
+
+  .logo {
+    margin-top: 35%;
+    font-size: 40px !important;
   }
+
   #cover-logo {
-    margin-left: 70px;
+    margin-top: 0;
+    padding: 0;
   }
-  .logo {
-    margin-left: 40px;
-    font-size: 65px;
+
+  #cover-copyright {
+    padding: 0;
+    margin: 0;
   }
+
   .copy-right {
-    font-size: 19px;
+    font-size: 15px;
   }
   .footer {
-    margin-top: 15%;
+    margin-top: 50px;
   }
 }
 
-/* Extra large devices (large laptops and desktops, 1200px and up) */
-@media only screen and (min-width: 1200px) {
+/* =================Tablet portrait======================= */
+
+@media (min-width: 481px) and (max-width: 767px) {
   /* navbar */
-  .navbar {
-    padding: 0;
-    height: 70px;
-  }
-  #v-logo.nav-link {
-    font-size: 40px;
-    padding: 0;
-    margin-right: 20px;
-  }
   .navbar-nav a {
-    cursor: pointer;
-    margin-right: 12px;
-    font-size: 22px;
-    padding: 0;
+    font-size: 15px !important;
     overflow: hidden;
   }
-  .div.container {
-    text-align: center;
-    justify-content: center;
-  }
-  .navbar-expand .navbar-nav .nav-link {
-    padding: 0;
+
+  #v-logo {
+    font-size: 23px;
+    margin-right: 7%;
+    margin-left: -10% !important;
   }
 
   /* banner */
-
   #header-banner {
-    font-size: 75px;
+    margin-top: 6%;
+    font-size: 50px;
   }
   #banner-text {
-    font-size: 33px;
+    font-size: 25px;
   }
   #banner-background {
-    height: 28rem;
+    height: 25rem;
   }
   #banner {
-    height: 24rem;
+    height: 22rem;
   }
 
   /* contents-right pic */
+
   .header {
-    font-size: 60px;
-  }
-  .subtitle {
-    font-size: 35px;
+    font-size: 34px;
   }
+
   .description {
-    font-size: 28px;
+    font-size: 20px;
+    width: 100%;
+  }
+
+  .cover-description-right {
+    margin-top: 20%;
+    padding: 5%;
   }
+
+  .cover1 {
+    height: 30rem;
+  }
+
+  .readmore {
+    font-size: 12px;
+    margin-left: 25%;
+  }
+
   .img-right {
-    margin-top: 45%;
-    margin-left: 15%;
+    width: 120%;
+    margin-left: 10%;
+    margin-top: 100%;
+  }
+  /* contents-left contents */
+  .cover2 {
+    height: 30rem;
+  }
+
+  .img-left {
+    width: 120%;
+    margin-left: 20%;
+    margin-top: 100%;
+  }
+  .cover-description-left {
+    margin-top: 20%;
+    padding: 5%;
+    width: 100%;
+  }
+
+  /* footer */
+  .sw-logo {
+    width: 60% !important;
+    margin-left: 20%;
+    margin-top: 60px;
+  }
+
+  .logo {
+    display: none;
+  }
+
+  #cover-logo {
+    margin-top: 0;
     padding: 0;
   }
-  .rounded.float-right {
+
+  #cover-copyright {
     padding: 0;
     margin: 0;
   }
+
+  .copy-right {
+    font-size: 15px;
+    text-align: center;
+    justify-content: center;
+  }
+  .footer {
+    margin-top: 50px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+  /* navbar */
+
+  #v-logo {
+    font-size: 22px;
+    margin-right: 4%;
+    margin-left: -2%;
+  }
+
+  /* banner */
+  #header-banner {
+    margin-top: 6%;
+    font-size: 50px;
+  }
+  #banner-text {
+    font-size: 25px;
+  }
+  #banner-background {
+    height: 25rem;
+  }
+  #banner {
+    height: 22rem;
+  }
+
+  /* contents-right pic */
+
+  .header {
+    font-size: 34px;
+  }
+
+  .description {
+    font-size: 20px;
+    width: 100%;
+  }
+
+  .cover-description-right {
+    margin-top: 20%;
+    padding: 5%;
+  }
+
   .cover1 {
-    padding: 0;
-    margin: 0%;
-    height: 40rem;
+    height: 30rem;
   }
+
   .readmore {
-    max-width: 30%;
-    height: 37px;
-    font-size: 16px;
-    margin-left: 30%;
+    font-size: 12px;
+    margin-left: 25%;
+  }
+
+  .img-right {
+    width: 90%;
+    margin-left: 1%;
+    margin-top: 80% !important;
   }
 
   /* contents-left contents */
+  .cover2 {
+    height: 30rem;
+  }
+
   .img-left {
-    margin-top: 45%;
+    width: 90%;
+    margin-left: 20%;
+    margin-top: 80% !important;
   }
-  .cover2 {
-    padding: 0;
-    margin: 0;
-    height: 40rem;
+  .cover-description-left {
+    margin-top: 20%;
+    margin-left: 5%;
+    padding: 5%;
+    width: 100%;
   }
 
   /* footer */
-
   .sw-logo {
-    width: 95%;
-    margin-left: 20px;
-    margin-top: 50px;
+    width: 60%;
+    margin-left: 40%;
   }
-  #cover-copyright {
-    margin-left: 20%;
+
+  .logo {
+    font-size: 40px;
   }
+
   #cover-logo {
-    margin-left: 70px;
+    margin-top: 30px;
+    padding: 0;
+    margin-left: 10%;
   }
-  .logo {
-    margin-left: 40px;
-    font-size: 65px;
+
+  #cover-copyright {
+    padding: 0;
+    margin-left: 10%;
+    margin-top: 30px;
   }
+
   .copy-right {
-    font-size: 19px;
+    font-size: 15px;
+    text-align: end;
+    justify-content: center;
   }
   .footer {
-    margin-top: 15%;
+    margin-top: 50px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
+  /* navbar */
+  #v-logo {
+    font-size: 25px;
+  }
+
+  /* banner */
+  #header-banner {
+    margin-top: 4%;
+    font-size: 50px;
+  }
+
+  /* contents-right pic */
+
+  .img-right {
+    width: 90%;
+    margin-left: 1%;
+    margin-top: 50%;
+  }
+
+  /* contents-left contents */
+
+  .img-left {
+    width: 90%;
+    margin-left: 20%;
+    margin-top: 50%;
   }
 }
diff --git a/src/components/Banner.js b/src/components/Banner.js
index 5e5fd68..5987b32 100644
--- a/src/components/Banner.js
+++ b/src/components/Banner.js
@@ -1,4 +1,5 @@
 import React from "react";
+import BannerData from "./data/banner.json";
 import Jumbotron from "react-bootstrap/Jumbotron";
 import Container from "react-bootstrap/Container";
 
@@ -10,12 +11,9 @@ function Banner() {
             <Container className="text-center">
                 <h1 id="header-banner">VitaminAir</h1> 
                 <div id="banner-text">
-                    <p>
-                        This is the project that rebuild the forest & keep it for the next generation.
-                    </p>
-                    <p>
-                        Longer life of the nature is the way we do for the next generation of humans beings.
-                    </p>
+                    {BannerData.map((detail, index) => {
+                        return <p>{detail.p1}<tr>{detail.p2}</tr></p>
+                    })}
                 </div>
             </Container>
         </Jumbotron>
diff --git a/src/components/Home.js b/src/components/Home.js
index 1aa92c0..2462759 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,25 +1,26 @@
 import React from "react";
-import Navbar from "./Navbar";
+import Navbar from   "./Navbar";
 import Banner from "./Banner";
 import Footer from "./Footer";
 import data from "./data/index.json";
 import Button from "react-bootstrap/Button";
 import { Link } from "react-router-dom";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
 
 export default function home() {
   const DisplayData = () => {
     return data.map((res, index) => {
       console.log(res);
-      
+
       if (index % 2 === 0) {
         return (
-          <div className="cover1">
-            <div className={res.className}>
-              <div className="container">
-                <div className="certain">
-                  <div className="cover-description">
+          <div className={`cover1 ${res.className}`}>
+            <div className="container">
+              <Row className="row">
+                <Col sm={8}>
+                  <div className="cover-description-right">
                     <h1 className="header">{res.title}</h1>
-                    <h4 className="subtitle">{res.subTitle}</h4>
                     <p className="description">
                       {res.desc.substring(0, 325)}...
                     </p>
@@ -29,35 +30,33 @@ export default function home() {
                       </Button>
                     </Link>
                   </div>
-                  <div className="rounded float-right">
-                    <img
-                      className="img-right"
-                      alt={res.title}
-                      src={`http://localhost:3000${res.logo}`}
-                    />
-                  </div>
-                </div>
-              </div>
+                </Col>
+                <Col sm={4}>
+                  <img
+                    className="img-right"
+                    alt={res.title}
+                    src={`http://localhost:3000${res.logo}`}
+                  />
+                </Col>
+              </Row>
             </div>
           </div>
         );
       } else {
-
         return (
           <div className={`cover2 ${res.className}`}>
-            <div className="">
-              <div className="container">
-                <div className="certain">
-                  <div className="rounded float-left">
-                    <img
-                      className="img-left"
-                      alt={res.title}
-                      src={`http://localhost:3000${res.logo}`}
-                    />
-                  </div>
-                  <div className="cover-description">
+            <div className="container">
+              <Row id="column-reverse" className="row">
+                <Col sm={4}>  
+                  <img
+                    className="img-left"
+                    alt={res.title}
+                    src={`http://localhost:3000${res.logo}`}
+                  />
+                </Col>
+                <Col sm={8}>
+                  <div className="cover-description-left">
                     <h1 className="header">{res.title}</h1>
-                    <h4 className="subtitle">{res.subTitle}</h4>
                     <p className="description">
                       {res.desc.substring(0, 325)}...
                     </p>
@@ -67,8 +66,8 @@ export default function home() {
                       </Button>
                     </Link>
                   </div>
-                </div>
-              </div>
+                </Col>
+              </Row>
             </div>
           </div>
         );
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index df4fcf6..f77e844 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,79 +1,74 @@
 import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
-
-import {
-  Link,
-} from "react-scroll";
+import {Link} from "react-scroll";
 
 function NavBar () {
     return (
       <React.Fragment>
-        <div id="sticky-nav">
-          <Navbar className="navbar navbar-light text-white">
-            <div className="container">
-              <Nav.Link id="v-logo">
-                <Link className="text-white">VitaminAir</Link>
-              </Nav.Link>
-              <Nav className="ml-auto">
-                  <Link className="nav"                   
-                    to="reforestation"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Reforestation
-                  </Link>
-                  <Link                    
-                    to="naturalfarming"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >                   
-                    NaturalFarming
-                  </Link>
-                  <Link                    
-                    to="ecotourism"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Ecotourism
-                  </Link>
-                  <Link                    
-                    to="seedsbomb"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    SeedsBomb
-                  </Link>
-                  <Link                    
-                    to="airwater"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    AirWater
-                  </Link>
-                  <Link                   
-                    to="about"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    About
-                  </Link>
-              </Nav>
-            </div>
-          </Navbar>
-        </div>
+        <Navbar className="navbar text-white" fixed="top" >
+          <div className="container">
+            <Nav.Link id="v-logo">
+              <Link className="text-white" to="/">VitaminAir</Link>
+            </Nav.Link>
+            <Nav className="ml-auto">
+                <Link className="nav"                   
+                  to="reforestation"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >
+                  Reforestation
+                </Link>
+                <Link                    
+                  to="naturalfarming"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >                   
+                  NaturalFarming
+                </Link>
+                <Link                    
+                  to="ecotourism"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >
+                  Ecotourism
+                </Link>
+                <Link                    
+                  to="seedsbomb"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >
+                  SeedsBomb
+                </Link>
+                <Link                    
+                  to="airwater"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >
+                  AirWater
+                </Link>
+                <Link                   
+                  to="about"
+                  spy={true}
+                  smooth={true}
+                  offset={0}
+                  duration={500}
+                >
+                  About
+                </Link>
+            </Nav>
+          </div>
+        </Navbar>
       </React.Fragment>
     );
   }
diff --git a/src/components/data/banner.json b/src/components/data/banner.json
new file mode 100644
index 0000000..c073390
--- /dev/null
+++ b/src/components/data/banner.json
@@ -0,0 +1,6 @@
+[
+    {   
+        "p1": "This is the project that rebuild the forest & keep it for the next generation.",
+        "p2": "Longer life of the nature is the way we do for the next generation of humans beings."
+    }
+]
\ No newline at end of file
diff --git a/src/components/data/index.json b/src/components/data/index.json
index e89223a..c84271b 100644
--- a/src/components/data/index.json
+++ b/src/components/data/index.json
@@ -1,7 +1,6 @@
 [
   {
     "title": "Reforestation",
-    "subTitle": "Rebuild the planet",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you. ",
     "logo": "/img/tree.png",
     "link": "/test1",
@@ -9,7 +8,6 @@
   },
   {
     "title": "Natural Farming",
-    "subTitle": "Green Framing",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.",
     "logo": "/img/farm.png",
     "link": "/test2",
@@ -17,7 +15,6 @@
   },
   {
     "title": "Ecotourism",
-    "subTitle": "Travel",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.",
     "logo": "/img/cyclist.png",
     "link": "/test3",
@@ -25,7 +22,6 @@
   },
   {
     "title": "Seeds Bomb",
-    "subTitle": "Throw out the seeds",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.",
     "logo": "/img/seeds.png",
     "link": "/test4",
@@ -33,7 +29,6 @@
   },
   {
     "title": "Air Water",
-    "subTitle": "Air from the water",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.",
     "logo": "/img/humidity.png",
     "link": "/test5",
@@ -41,7 +36,6 @@
   },
   {
     "title": "About",
-    "subTitle": "Our missions",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you.",
     "logo": "/img/natural.png",
     "link": "/test6",