diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_about.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_about.scss
new file mode 100644
index 0000000000..eb3240f838
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_about.scss
@@ -0,0 +1,18 @@
+@import "variables";
+
+.about-page {
+  padding-bottom: 20px;
+
+  .title {
+    display: block;
+    font-size:$text-size-36;
+    font-weight: 600;
+    line-height: 72px;
+  }
+  .text {
+    display: block;
+    font-size: $text-size-16;
+    font-weight: 500;
+    line-height: 32px;
+  }
+}
\ No newline at end of file
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_common.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_common.scss
index 57ad7024d3..3ee36d009f 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_common.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_common.scss
@@ -1,3 +1,75 @@
+@import "@sass/abstracts/mixins";
+@import "variables";
+
 * {
   font-family: Roboto;
 }
+
+main {
+  position: relative;
+  min-height: calc(100vh - 352px);
+  margin-bottom: 50px;
+  padding-top: 50px;
+
+  @include respond-to(all-mobile) {
+    padding-top: 0;
+    margin-bottom: 0;
+  }
+
+  #container {
+    margin-top: 60px;
+  }
+
+  .rich-text {
+    .main-header {
+      margin-bottom: 30px;
+
+      @include respond-to(all-mobile) {
+        margin-bottom: 0px;
+      }
+
+      .title {
+        font-size: $text-size-24;
+        font-weight: 500;
+        line-height: 50px;
+        margin-bottom: 30px;
+
+        @include respond-to(all-mobile) {
+          font-size: $text-size-16;
+          line-height: 32px;
+        }
+      }
+    }
+  }
+
+  .main-news {
+    padding-top: 50px;
+
+    @include respond-to(all-mobile) {
+      padding-top: 0;
+    }
+
+    .title {
+      display: block;
+      font-size: $text-size-36;
+      font-weight: 500;
+      line-height: 62px;
+
+      @include respond-to(all-mobile) {
+        font-size: $text-size-18;
+        line-height: 22px;
+      }
+    }
+
+    .text {
+      font-size: $text-size-16;
+      font-weight: 500;
+
+      @include respond-to(all-mobile) {
+        font-size: $text-size-14;
+        line-height: 24px;
+        font-weight: 400;
+      }
+    }
+  }
+}
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss
index fe83a475fa..3df5ae5d43 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_footer.scss
@@ -1,8 +1,13 @@
 @import "@sass/abstracts/mixins";
+@import "variables";
 
 footer {
+    position: absolute;
+    width: 100%;
+    height: 231px;
+
   .rich-text {
-    font-size: 14px;
+    font-size: $text-size-14;
     color: $text-white;
   }
 
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss
index 7e95b189ad..575a7da05d 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_header.scss
@@ -1,37 +1,41 @@
 @import "@sass/abstracts/vars/colors";
 @import "@sass/abstracts/mixins";
+@import "variables";
 
 header {
   .container {
     .row {
       display: flex;
       flex-direction: column;
-      padding-top: 10px;
 
+      .rich-text {
+        padding-left: 50px;
+
+        h1 {
+          font-size: $text-size-24;
+          font-weight: 500;
+          line-height: 18px;
+          padding-top: 40px;
+          margin: 0;
+        }
+      }
+      
       @include respond-to(all-mobile) {
         padding-top: 0;
         flex-direction: column-reverse;
-      }
-    }
-  }
 
-  .title {
-    padding-left: 50px;
-
-    @include respond-to(all-mobile) {
-      padding-left: 0;
-    }
-
-    .field-title {
-      @include respond-to(all-mobile) {
-        text-align: center;
-      }
-      a {
-        font-size: 30px;
-        font-weight: bold;
-        border: none;
-        margin-bottom: 0;
-        color: $bg-black;
+        .rich-text {
+          padding-left: 0;
+          text-align: center;
+  
+          h1 {
+            font-size: $text-size-24;
+            font-weight: 600;
+            line-height: 29px;
+            padding-top: 0;
+            margin: 0;
+          }
+        }
       }
     }
   }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss
index 445ef913e9..8fb992481d 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_navigation.scss
@@ -1,13 +1,19 @@
 @import "@sass/abstracts/vars";
+@import "variables";
 
 $hamburger-width: 30px;
 $hamburger-height: 18px;
 $border-size: 6px;
-$hamburger-margin: 1.5rem;
+$hamburger-margin: 18px;
 
 .navigation.navigation-horizontal {
   width: 100%;
-  padding-right: 50px;
+  padding-right: 70px;
+  margin-top: -15px;
+
+  .menu-mobile-navigate {
+    display: none;
+  }
   
   @include respond-to(all-mobile) {
     padding-right: 0;
@@ -19,47 +25,112 @@ $hamburger-margin: 1.5rem;
     @include respond-to(all-mobile) {
       display: none;
     }
+    
+    ul.clearfix {
+      list-style: none;
+    }
+    .level0 {
+      display: flex;
+    }
+  
+    .level0, .level1 {
+      >.navigation-title {
+        >a {
+          border-width: 0;
+          font-size: $text-size-14;
+        }
+      }
+    }
   }
 
   @include respond-to(all-mobile) {
-    &::before {
-      content: "";
-      width: $hamburger-width;
-      height: $hamburger-height;
-      margin-right: $hamburger-margin;
-      margin-top: $hamburger-margin;
-      display: block;
-      border-top: 6px solid $bg-black;
-      border-bottom: 6px solid $bg-black;
-      float: right;
-      cursor: pointer;
-    }
+    .component-content {
+      display: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      background-color: $bg-black-active;
+      z-index: 1;
 
-    &:active, &:hover {
-      &::before {
-        display: none;
+      * {
+        text-align: center !important;
       }
-      .component-content {
-        display: inline-block;
+
+      nav {
+        padding-top: 110px;
+        
+        .level0 {
+          display: block;
+        }
+      }
+      
+      ul {
+        margin: 0;
+        padding: 0;
       }
 
-      .level0 {
-        display: block;
+      .level0, .level1 {
+        >.navigation-title {
+          >a {
+            font-size: $text-size-30;
+            color: $text-white;
+            line-height: 90px;
+          }
+        }
       }
     }
-  }
 
-  ul.clearfix {
-    list-style: none;
-  }
-  .level0 {
-    display: flex;
-  }
+    .menu-mobile-navigate-wrapper {
+      width: 100%;
+  
+      .menu-mobile-navigate {
+        display: inline-block;
+        z-index: 2;
+        position: absolute;
+        right: $hamburger-margin;
+        top: $hamburger-margin;
+        height: 30px;
+        width: 30px;
+        opacity: 0;
+
+        &:checked ~ {
+          .menu-humburger {
+            &::before {
+              content: "\00d7";
+              color: $text-basic-active;
+              font-size: $text-size-48;
+              position: absolute;
+              top: 0;
+              right: 0;
+              margin-top: calc($hamburger-margin + ($hamburger-margin / 2));
+              margin-right: $hamburger-margin;
+              line-height: 0;
+              border: 0;
+            }
+          }
+
+          .component-content {
+            display: inline-block;
+          }
+        }
+      }
 
-  .level0, .level1 {
-    >.navigation-title {
-      >a {
-        border-width: 0;
+      .menu-humburger {
+        &::before {
+          content: "";
+          width: $hamburger-width;
+          height: $hamburger-height;
+          margin-right: $hamburger-margin;
+          margin-top: calc($hamburger-margin + ($hamburger-margin / 2)) + 8px;
+          display: block;
+          border-top: 6px solid $bg-black;
+          border-bottom: 6px solid $bg-black;
+          float: right;
+          z-index: 99;
+          cursor: pointer;
+        }
       }
     }
   }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss
index afd0ad1a08..4723a86d86 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_promo.scss
@@ -18,6 +18,14 @@
           padding: 15px 10px 10px 25px;
         }
       }
+
+      .promo-text {
+        .field-promotext {
+          p {
+            margin: 10px 0;
+          }
+        }
+      }
     }
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss
index c4587b3e4f..12d9fc47bc 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_rich-text.scss
@@ -1,19 +1,23 @@
+@import "@sass/abstracts/vars";
+@import "variables";
+
 .rich-text {
+  color: $text-gray;
   @include respond-to(all-mobile) {
     padding: 15px 10px 10px 25px;
 
     h2 {
-      font-size: 18px;
+      font-size: $text-size-18;
     }
 
     h4 {
-      font-size: 18px;
+      font-size: $text-size-18;
       line-height: 35px;
       font-weight: 600;
     }
   
     h6 {
-      font-size: 14px;
+      font-size: $text-size-14;
       strong {
         font-weight: normal;
         line-height: 24px;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss
new file mode 100644
index 0000000000..c4956ed556
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/_variables.scss
@@ -0,0 +1,7 @@
+$text-size-14: 14px;
+$text-size-16: 16px;
+$text-size-18: 18px;
+$text-size-24: 24px;
+$text-size-30: 30px;
+$text-size-36: 36px;
+$text-size-48: 48px;
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss
index b5d4dc0aab..ddc2cd558f 100644
--- a/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss
+++ b/packages/create-sitecore-jss/src/templates/nextjs-sxa/src/assets/basic/main.scss
@@ -5,3 +5,6 @@
 @import "component";
 @import "rich-text";
 @import "footer";
+
+/**pages**/
+@import "about";