diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4f7b6aa08d..c9dbf4e775 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -402,8 +402,9 @@ <h6>RESOURCES</h6>
               <!-- navbar items end -->
               {{ $currentPageType := index (split .Page.Permalink "/") 3 }}
               <div class="buttons">
-                <a id="ac-sign-in-button" href="https://accounts.appscode.com/user/login"
-                class="button ac-button is-loading {{ if eq $currentPageType "docs" }} is-hidden {{ end }}"><span>SIGN IN</span></a>
+                <iframe src="https://appscode.com/embed/?color=5e2dea" frameborder="0" scrolling="no" style="height: 40px; margin-bottom: 8px; width: 185px; overflow: hidden;"></iframe>
+                <!-- <a id="ac-sign-in-button" href="https://accounts.appscode.com/user/login"
+                class="button ac-button is-loading {{ if eq $currentPageType "docs" }} is-hidden {{ end }}"><span>SIGN IN</span></a> -->
                 <a href="{{ $.Site.Params.domain_appscode }}/contact/"
                   class="button ac-button is-primary {{ if eq $currentPageType "docs" }} is-outlined {{ end }}">CONTACT
                   SALES</a>
@@ -1005,81 +1006,6 @@ <h4>Legal</h4>
    {{ block "footer-script" . }}
    {{ end }}
    
-
-    <!-- console beta tag start  -->
-  <script>
-    const acSignInButton = document.getElementById('ac-sign-in-button')
-
-    // define Beta tag
-    const betaSpan = document.createElement("span")
-    betaSpan.innerText = "BETA"
-    betaSpan.classList.add('tag')
-
-    // function to get cookie
-    function getCookie(cname) {
-      let name = cname + "=";
-      let ca = document.cookie.split(';');
-      for(let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-          c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-          return c.substring(name.length, c.length);
-        }
-      }
-      return "";
-    }
-
-    // function to fetch user
-    async function fetchUser() {
-      try {
-        const hostname = window.location.hostname;
-        const protocol = window.location.protocol;
-        const port = window.location.port;
-
-        const apiDomain = protocol + "//api." + hostname +  (port? ":3003" : "");
-        const consoleDomain = protocol + "//console." + hostname +  (port? ":5990" : "");
-
-        acSignInButton.classList.add('is-loading');
-
-        const response = await fetch(apiDomain + "/api/v1/user", {
-          method: "GET",
-          credentials: "include",
-          headers: {
-            "X-Csrf-Token": getCookie("_csrf"),
-            "X-Requested-With": "xmlhttprequest"
-          }
-        })
-
-        if(response.status === 200) {
-          // user is logged in
-          // show console link
-          acSignInButton.firstElementChild.innerHTML =  "CONSOLE"
-          acSignInButton.href = consoleDomain
-        }
-      } catch(error) {
-        console.log("Failed to fetch user", error)
-      }
-      // remove the loader
-      acSignInButton.classList.remove('is-loading');
-      // append beta tag
-      acSignInButton.appendChild(betaSpan);
-    }
-
-    window.addEventListener('load', function() {
-      jQuery('a:contains("Stash")').click(function() {
-        gtag('event', 'conversion', {
-          'send_to': 'AW-10933819571/j5J-CL2sweQDELOx090o'
-        });
-      })
-
-
-      // fetch if user is logged in or not
-      fetchUser();
-    });
-  </script>
-  <!-- console beta tag end  -->
 </body>
 
 </html>
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index 2bc36db3eb..f6b6bbb8e5 100644
--- a/layouts/docs/single.html
+++ b/layouts/docs/single.html
@@ -111,8 +111,8 @@ <h6>{{ .Name }}</h6>
       {{ end }}
     </ul>
     <!-- =============searchbar area start  ===========================-->
-    <div class="ac-searchbar">
-      <label for="acSearch">
+    <div class="ac-searchbar is-flex is-align-items-center">
+      <label for="acSearch" class="is-flex">
         <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" target="#acSearch" trigger="hover"
           style="width:22px;height:22px">
         </lord-icon>
diff --git a/static/assets/images/bg-image/cta-bg-transparent.png b/static/assets/images/bg-image/cta-bg-transparent.png
new file mode 100644
index 0000000000..0deca5a753
Binary files /dev/null and b/static/assets/images/bg-image/cta-bg-transparent.png differ
diff --git a/static/assets/sass/base/_global.scss b/static/assets/sass/base/_global.scss
index 4bf6edd008..ec25afc0ff 100644
--- a/static/assets/sass/base/_global.scss
+++ b/static/assets/sass/base/_global.scss
@@ -10,12 +10,14 @@
   z-index: 1;
   border-radius: 4px;
   overflow: hidden;
+
   img {
     display: flex;
     object-fit: cover;
     height: 250px;
     width: 400px;
   }
+
   &:hover {
     .play-icon {
       svg {
@@ -53,6 +55,10 @@
   }
 }
 
+.section-padding {
+  padding: 80px 0;
+}
+
 .section-title {
   margin-bottom: 2rem;
   position: relative;
@@ -272,14 +278,18 @@
   color: $ac-white;
   background: $ac-primary;
 }
+
 .message {
   display: flex;
   align-items: center;
+
   lord-icon {
     margin-right: 1rem;
   }
+
   &.is-warning {
     background-color: transparent;
+
     .message-body {
       border-color: transparent;
       border-width: 0;
@@ -292,6 +302,7 @@
 
   &.is-danger {
     background-color: transparent;
+
     .message-body {
       border-color: transparent;
       border-width: 0;
@@ -303,6 +314,30 @@
   }
 }
 
+.text-underline {
+  font-weight: 500;
+  position: relative;
+  text-decoration: underline;
+
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background: $ac-primary;
+    border-radius: 50px;
+    transition: 0.3s ease-in-out;
+  }
+
+  &:hover {
+    &:after {
+      width: 100%;
+    }
+  }
+}
+
 /****************************************
 Responsive Classes
 *****************************************/
@@ -317,6 +352,10 @@ Responsive Classes
     padding: 0 15px;
   }
 
+  .section-padding {
+    padding: 40px 0;
+  }
+
   .section-title {
     font-size: 28px;
     margin-bottom: 1rem;
@@ -350,6 +389,10 @@ Responsive Classes
     padding: 0 30px;
   }
 
+  .section-padding {
+    padding: 50px 0;
+  }
+
   .section-title {
     h1 {
       &.is-outlined-text {
@@ -369,6 +412,10 @@ Responsive Classes
     padding: 0 30px;
   }
 
+  .section-padding {
+    padding: 60px 0;
+  }
+
   .section-title {
     h1 {
       &.is-outlined-text {
@@ -383,6 +430,10 @@ Responsive Classes
 }
 
 @media (min-width: 1216px) and (max-width: 1407px) {
+  .section-padding {
+    padding: 60px 0;
+  }
+
   .section-title {
     h1 {
       &.is-outlined-text {
@@ -400,6 +451,7 @@ Responsive Classes
       }
     }
   }
+
   .container {
     max-width: 1100px !important;
   }
@@ -414,216 +466,3 @@ Responsive Classes
     }
   }
 }
-
-// pre {
-//   margin-bottom: 15px;
-//   padding: 20px 15px;
-// }
-
-// .kubedb-primary-bg {
-//   background-color: $ac-primary;
-// }
-
-// .tooltip.is-tooltip-primary::before {
-//   background-color: #32325d;
-//   color: $ac-white;
-//   min-width: 200px;
-//   padding: 15px;
-//   font-weight: 400;
-//   font-style: normal;
-// }
-
-// .tooltip.is-tooltip-primary:not(.is-loading)::after {
-//   border-color: #32325d transparent transparent transparent;
-// }
-
-// .ac-custom-select {
-//   .ss-single-selected,
-//   .ss-multi-selected {
-//     min-height: 45px !important;
-//     border: 1px solid #a6abbd;
-//     color: $ac-color-text;
-//     padding: 0 15px;
-
-//     .ss-arrow {
-//       margin: 0;
-//     }
-//     .placeholder {
-//       font-size: 15px;
-//       color: $ac-color-text;
-//       font-weight: 500;
-//     }
-//     .ss-values {
-//       margin-top: 3px;
-
-//       .ss-disabled {
-//         margin: 0;
-//         padding: 0;
-//         font-family: $ac-font-paragraph;
-//         font-style: normal;
-//         font-weight: normal;
-//         font-size: 14px;
-//         line-height: 16px;
-//         color: #a6abbd;
-//       }
-
-//       .ss-value {
-//         height: 30px;
-//         margin-bottom: 6px;
-//         padding: 0 10px;
-//         background-color: #35a651;
-//       }
-//     }
-
-//     .ss-add {
-//       margin: 4px;
-//       align-items: center;
-//     }
-//   }
-
-//   .ss-content {
-//     border: 1px solid #a6abbd;
-
-//     .ss-list {
-//       .ss-option {
-//         font-size: 14px;
-//         color: $ac-color-text;
-//         transition: 0.3s ease-in-out;
-
-//         &:hover {
-//           opacity: 0.8;
-//           color: $ac-primary;
-//         }
-
-//         &.ss-disabled {
-//           opacity: 0.5;
-//         }
-//       }
-//     }
-
-//     .ss-search {
-//       input {
-//         border: 1px solid #a6abbd;
-
-//         &:focus {
-//           outline: none;
-//           box-shadow: none;
-//         }
-//       }
-//     }
-//   }
-// }
-
-// .img {
-//   max-width: 100%;
-//   height: auto;
-// }
-
-// .d-table {
-//   display: table;
-//   height: 100%;
-//   width: 100%;
-// }
-
-// .d-table-cell {
-//   width: 100%;
-//   display: table-cell;
-//   vertical-align: middle;
-// }
-
-// .section-padding {
-//   padding: 120px 0;
-// }
-
-// .container.section {
-//   padding-top: 0;
-//   padding-bottom: 0;
-// }
-
-// .subscription-form .input.is-hovered,
-// .subscription-form .input:hover {
-//   border-color: $ac-primary;
-// }
-
-// .input.is-active,
-// .input.is-focused,
-// .input:active,
-// .input:focus,
-// .textarea.is-active,
-// .textarea.is-focused,
-// .textarea:active,
-// .textarea:focus {
-//   border-color: $ac-primary;
-//   box-shadow: none;
-// }
-
-// video:focus {
-//   outline: none;
-// }
-
-// .is-dark {
-//   background-color: #32325d;
-// }
-
-// .is-success {
-//   background-color: #00a651 !important;
-// }
-
-// .is-info {
-//   background-color: #1da1f2 !important;
-// }
-
-// .is-blue {
-//   background-color: #3f19ad !important;
-//   color: $ac-white;
-// }
-
-// .is-gold {
-//   background-color: #f99a00 !important;
-//   color: $ac-white !important;
-// }
-
-// .is-marked {
-//   background-color: $ac-white-lighter !important;
-// }
-
-// .is-danger {
-//   background-color: #e01563;
-// }
-
-// .is-red {
-//   background-color: #e03056 !important;
-//   color: $ac-white !important;
-// }
-
-// .is-dark-red {
-//   background-color: #8e2c4a !important;
-//   color: $ac-white !important;
-// }
-
-// .is-light-blue {
-//   background-color: #d1ecfd !important;
-//   color: #1da1f2;
-// }
-
-// .is-white {
-//   background-color: $ac-white !important;
-//   color: #4d4f5c !important;
-//   border: 1px solid #e9e9f0;
-// }
-
-// .is-tranparent {
-//   background: transparent !important;
-//   border: none;
-//   cursor: pointer;
-// }
-
-// .is-gray {
-//   background-color: #e9e9f0 !important;
-//   color: #4d4f5c !important;
-// }
-
-// .is-white-gray {
-//   background-color: #e9e9f0;
-//   border: none;
-// }
diff --git a/static/assets/sass/components/_cta.scss b/static/assets/sass/components/_cta.scss
index 7124d0df17..13e0ad1f2c 100644
--- a/static/assets/sass/components/_cta.scss
+++ b/static/assets/sass/components/_cta.scss
@@ -3,13 +3,14 @@
 
   .cta-area-inner {
     padding: 20px 50px;
-    background-image: url(/assets/images/bg-image/cta-area-bg.png);
+    background-image: url(/assets/images/bg-image/cta-bg-transparent.png);
     background-size: cover;
     background-position: center;
     border-radius: 8px;
     min-height: 250px;
     display: flex;
     align-items: center;
+    background-color: $ac-primary;
 
     h3 {
       color: $ac-white;
diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss
index e507c4acdd..85801ed6d9 100644
--- a/static/assets/sass/components/_navbar.scss
+++ b/static/assets/sass/components/_navbar.scss
@@ -129,6 +129,13 @@
       align-items: center;
       gap: 32px;
       .buttons{
+        iframe {
+          transition: 0.3s ease-in-out;
+          &:hover {
+            box-shadow: 2px 4px 24px rgba(0,0,0,.3)!important;
+            transform: translateY(-2px);
+          }
+        }
         .button {
           &:has(.tag){
             gap: 4px;
@@ -208,8 +215,8 @@
         .whats-new {
           position: absolute;
           z-index: 1;
-          top: -0.5rem;
-          right: -2.5rem;
+          top: -10px;
+          right: -30px;
           font-size: 0.8rem;
           color: $ac-white;
           padding: 0.2rem 0.3rem;
@@ -816,7 +823,7 @@
     background-color: transparent;
     color: $ac-color-text;
     font-size: 0.875rem;
-    width: calc(100% - 30px);
+    width: 270px;
     padding: 0.2rem 0.875rem;
 
     &:focus {
@@ -1017,8 +1024,8 @@ Responsive Classes
           margin: 6px 0;
 
           .link .whats-new {
-            top: -0.2rem;
-            right: 0.5rem;
+            top: -10px;
+            right: -30px;
           }
         }
       }
@@ -1112,7 +1119,7 @@ Responsive Classes
     .dropdown {
       .dropdown-trigger {
         .button {
-          width: 200px;
+          width: 190px;
         }
       }
     }
@@ -1152,18 +1159,27 @@ Responsive Classes
       margin-left: 0;
       border-left: none;
     }
-
+    .navbar-left {
+      .navbar-brand {
+        margin-right: 1rem;
+      }
+    }
     .navbar-right {
       width: calc(100% - 180px);
 
       .community-items.ml-70 {
         margin-left: 10px !important;
       }
+      .button.ac-button {
+        padding: .5rem 1rem;
+      }
+    }
+    .navbar-right-group {
+      gap: 8px !important;
     }
-
     ul {
       .nav-item {
-        margin-right: 1.5rem;
+        margin-right: 0.5rem;
       }
     }
   }
@@ -1193,7 +1209,7 @@ Responsive Classes
     .dropdown {
       .dropdown-trigger {
         .button {
-          width: 200px;
+          width: 180px;
           padding: 2px 5px;
         }
       }
@@ -1216,9 +1232,6 @@ Responsive Classes
       .community-items.ml-70 {
         margin-left: 10px !important;
       }
-      .ac-searchbar {
-        width: 34%;
-      }
     }
 
     ul {
@@ -1247,23 +1260,11 @@ Responsive Classes
 
 @media (min-width: 1408px) and (max-width: 1600px) {
   .navbar-appscode {
-    &.documentation-menu {
-      .navbar-right {
-        .ac-searchbar {
-          width: 34%;
-        }
-      }
-    }
     .navbar-left {
       .navbar-brand {
         margin-right: 3rem;
       }
     }
-    ul {
-      .nav-item {
-        margin-right: 1.5rem;
-      }
-    }
   }
 }
 
diff --git a/static/assets/sass/components/_product-hero-area.scss b/static/assets/sass/components/_product-hero-area.scss
index 02ea08c345..b84d3b61bc 100644
--- a/static/assets/sass/components/_product-hero-area.scss
+++ b/static/assets/sass/components/_product-hero-area.scss
@@ -127,14 +127,6 @@
       );
     }
 
-    // h1 {
-    //   font-size: 4rem;
-    // }
-
-    // .tag {
-    //   border: 1px solid $ac-white-light;
-    // }
-
     .cube,
     .circle {
       border-color: #333333;
@@ -149,7 +141,7 @@
       top: 0;
       width: 100%;
       height: 100%;
-      background-color: #5e2dea;
+      background-color: $ac-primary;
       z-index: -1;
       opacity: 0.5;
       background-size: 50%;
diff --git a/static/assets/sass/pages/_documentation.scss b/static/assets/sass/pages/_documentation.scss
index 99c4f65bfc..c441aedd93 100644
--- a/static/assets/sass/pages/_documentation.scss
+++ b/static/assets/sass/pages/_documentation.scss
@@ -85,36 +85,6 @@
   .documentation-body {
     padding: 0 60px;
     width: calc(100% - 674px);
-
-    // .highlight {
-    //   .hljs-variable {
-    //     color: #35a651;
-    //   }
-
-    //   .hljs-string {
-    //     color: #f15855;
-    //   }
-
-    //   .hljs-keyword,
-    //   .hljs-literal,
-    //   .nginx .hljs-title {
-    //     color: #ff08d8;
-    //   }
-
-    //   .hljs-class .hljs-title,
-    //   .smalltalk .hljs-class,
-    //   .hljs-type,
-    //   .hljs-typename,
-    //   .hljs-tag .hljs-attribute,
-    //   .hljs-doctype,
-    //   .hljs-class .hljs-id,
-    //   .hljs-built_in,
-    //   .setting,
-    //   .hljs-params,
-    //   .clojure .hljs-attribute {
-    //     color: #ad6ff3;
-    //   }
-    // }
   }
 
   .right-sidebar {
@@ -172,89 +142,31 @@
     font-size: 2rem;
     padding-bottom: 10px;
     line-height: 1.3;
-    a {
-      font-size: 2rem;
-    }
   }
 
   h2 {
     font-size: 24px;
-    a {
-      font-size: 24px;
-    }
   }
 
   h3 {
     font-size: 18px;
-    a {
-      font-size: 18px;
-    }
   }
 
   h4 {
     font-size: 16px;
-    a {
-      font-size: 16px;
-    }
   }
 
   h5 {
     font-size: 15px;
-    a {
-      font-size: 15px;
-    }
   }
 
   h6 {
     font-size: 13px;
-    a {
-      font-size: 13px;
-    }
   }
 
-  // .highlight {
-  //   pre {
-  //     border: 1px solid $ac-white-light;
-  //     border-radius: 2px;
-
-  //     .hljs {
-  //       background-color: transparent;
-  //       color: #d2d5e1;
-  //     }
-
-  //     // code {
-  //     //   color: $ac-white;
-  //     // }
-  //   }
-
-  //   .hljs-variable {
-  //     color: #35a651;
-  //   }
-
-  //   .hljs-string {
-  //     color: #f15855;
-  //   }
-
-  //   .hljs-keyword,
-  //   .hljs-literal,
-  //   .nginx .hljs-title {
-  //     color: #ff08d8;
-  //   }
-
-  //   .hljs-class .hljs-title,
-  //   .smalltalk .hljs-class,
-  //   .hljs-type,
-  //   .hljs-typename,
-  //   .hljs-tag .hljs-attribute,
-  //   .hljs-doctype,
-  //   .hljs-class .hljs-id,
-  //   .hljs-built_in,
-  //   .setting,
-  //   .hljs-params,
-  //   .clojure .hljs-attribute {
-  //     color: #ad6ff3;
-  //   }
-  // }
+  a{
+    @extend .text-underline;
+  }
 }
 
 .full-info h2 span.share-icon {
@@ -306,7 +218,7 @@ blockquote {
 .full-info ul li pre,
 .full-info ol li pre {
   text-indent: 0px;
-  margin-left: -30px;
+  margin-left: 0px;
 }
 
 .full-info ul li:before {
@@ -422,6 +334,16 @@ ul li b {
   }
 }
 
+// .highlight {
+//   pre {
+//     background-color: #1e242e !important;
+//     font-size: 14px;
+//     margin-bottom: 20px;
+//   }
+
+//   margin-bottom: 40px;
+// }
+
 .full-info ol {
   list-style: none;
   counter-reset: order-list-counter;
@@ -471,6 +393,7 @@ ul li b {
 .tbl-of-contents {
   #TableOfContents {
     max-height: 70vh;
+    padding-bottom: 32px;
 
     &::-webkit-scrollbar {
       width: 4px;