diff --git a/hugo_stats.json b/hugo_stats.json
index 718e37821d..d07fcc51f7 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -76,7 +76,6 @@
       "arrow",
       "arrow-right",
       "arrows",
-      "back-button",
       "bb-1",
       "benefit-item",
       "benefits-section",
@@ -108,7 +107,6 @@
       "card-offset-10",
       "card-offset-11",
       "card-offset-12",
-      "card-offset-13",
       "card-offset-2",
       "card-offset-3",
       "card-offset-4",
@@ -357,7 +355,6 @@
       "illustration-area",
       "image",
       "img",
-      "inline-button",
       "input",
       "is-1-mobile",
       "is-10",
@@ -429,7 +426,6 @@
       "is-one-thirds-fullhd",
       "is-paddingless",
       "is-primary",
-      "is-prod-ace-platform",
       "is-prod-kubedb",
       "is-prod-kubestash",
       "is-prod-kubevault",
@@ -442,7 +438,6 @@
       "is-services",
       "is-shadowless",
       "is-show",
-      "is-size-6",
       "is-size-7",
       "is-small",
       "is-sticky",
@@ -464,7 +459,6 @@
       "left-sidebar",
       "left-sidebar-inner",
       "link",
-      "list-items",
       "location",
       "location-area",
       "logo-name",
@@ -582,7 +576,7 @@
       "resource-card",
       "resource-content",
       "resource-thumbnail",
-      "resources-list",
+      "resources-menu",
       "reverse-column-mobile",
       "reverse-row-order",
       "right-content",
@@ -722,7 +716,6 @@
       "webinar-title",
       "webinar-video",
       "whats-new",
-      "width-12",
       "width-20",
       "working-scenarios-section",
       "z-1"
@@ -820,7 +813,6 @@
       "personal-data",
       "phone",
       "plaid",
-      "prod-ace-platform",
       "prod-kubedb",
       "prod-kubestash",
       "prod-kubevault",
diff --git a/layouts/_default/embed_console.html b/layouts/_default/embed_console.html
index 1e120d9f53..26a14c903c 100644
--- a/layouts/_default/embed_console.html
+++ b/layouts/_default/embed_console.html
@@ -15,7 +15,7 @@
     .button.ac-button {
       border:1px solid var(--ac-primary, #1c1c1c);
       height: 38px;
-      border-radius: 0.125rem;
+      border-radius: 8px;
       padding-inline: 24px;
       font-size: .875rem;
       font-family: roboto,sans-serif;
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
index 32af660810..329f932c01 100644
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@@ -54,19 +54,43 @@
             <div class="is-flex is-justify-content-space-between is-fullwidth">
               <!-- navbar items start -->
               <ul class="navbar-left-group">
-                <li class="nav-item">
+               
+              </ul>
+              <!-- navbar items end -->
+              <!-- if webinar exist script  -->
+              <script type="text/javascript">
+                (function () {
+                  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
+                  xhr.onreadystatechange = function () {
+                    if (xhr.readyState === 4) {
+                      if (xhr.status === 200) {
+                        var result = JSON.parse(xhr.responseText);
+                        if (result.schedules) {
+                          let endDate = new Date(result.schedules[0]).getTime();
+                          let startDate = new Date().getTime();
+                          let timeRemaining = parseInt((endDate - startDate) / 1000);
+                          if (timeRemaining >= 0) {
+                            document.querySelector('.whats-new').classList.add('is-block')
+                          }
+                        }
+                      }
+                    }
+                  } //
+                  // console.log('GET', 'https://x.appscode.com/_/webinars/');
+                  xhr.open('GET', 'https://x.appscode.com/_/webinars/');
+                  xhr.send();
+                }());
+              </script>
+              <!-- navbar items start -->
+            <div class="navbar-right-group">
+              <ul>
+                 <li class="nav-item">
                   
                   <button class="link">Products <i class="fa fa-angle-down" aria-hidden="true"></i></button>
                   <div class="mega-menu-wrapper">
 
                     <!-- ac-grid-container -->
                     <div class="mega-menu-inner container">
-                      <button class="button ac-button inline-button back-button">
-                        <span class="icon p-0">
-                          <iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
-                        </span>
-                        <span>Back</span>
-                      </button>
                       <!-- product start  -->
                       <div class="product-menu">
                         {{ range $item := $.Site.Data.config.productMenu.c0 }}
@@ -78,7 +102,7 @@
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
                           </div>
                           <div class="product-info">
-                            <h2 class="is-size-6 is-flex">{{ $p.name }}
+                            <h2 class="is-flex">{{ $p.name }}
                               {{ if eq ($p.name) "KubeStash" }}
                               <span class="whats-new is-relative is-block" style="right: -2px; top: -12px;">New</span>
                               {{ end }}
@@ -103,7 +127,7 @@ <h2 class="is-size-6 is-flex">{{ $p.name }}
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
                           </div>
                           <div class="product-info">
-                            <h2 class="is-size-6">{{ $p.name }}</h2>
+                            <h2>{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -124,7 +148,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
                           </div>
                           <div class="product-info">
-                            <h2 class="is-size-6">{{ $p.name }}</h2>
+                            <h2>{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -145,7 +169,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
                             <img src="{{ $p.icon.src }}" alt="{{ $p.icon.alt }}" loading="lazy">
                           </div>
                           <div class="product-info">
-                            <h2 class="is-size-6">{{ $p.name }}</h2>
+                            <h2>{{ $p.name }}</h2>
                             <p>{{ $p.tagline | plainify }}</p>
                           </div>
                           <div class="navigate-icon">
@@ -316,12 +340,6 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
                     <div class="mega-menu-inner container">
 
                       <!-- Back Button -->
-                      <button class="button ac-button inline-button back-button" type="button">
-                        <span class="icon p-0">
-                          <iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
-                        </span>
-                        <span>Back</span>
-                      </button>
 
                       <!-- Services Grid -->
                       <div class="product-menu services-grid" id="servicesGrid">
@@ -331,7 +349,7 @@ <h2 class="is-size-6">{{ $p.name }}</h2>
                               <iconify-icon {{ printf "icon=%s" $service.lucide_icon | safeHTMLAttr }} width="24" height="24"></iconify-icon>
                             </div>
                             <div class="product-info">
-                              <h2 class="is-size-6 is-flex">{{ $service.title }}</h2>
+                              <h2>{{ $service.title }}</h2>
                               <p>{{ $service.description }}</p>
                             </div>
                             <!-- <div class="navigate-icon">
@@ -355,7 +373,7 @@ <h2 class="is-size-6 is-flex">{{ $service.title }}</h2>
                                   {{ end }}
                                 </div> -->
                                 <div class="product-info">
-                                  <h2 class="is-size-6 is-flex is-align-items-center gap-8">{{ $offering.title }} <span class="arrow-right icon">
+                                  <h2 class="is-flex is-align-items-center gap-8">{{ $offering.title }} <span class="arrow-right icon">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M18.5 12H5m8 6s6-4.419 6-6s-6-6-6-6"/></svg>
                                   </span></h2>
                                   <p>{{ $offering.description }}</p>
@@ -371,130 +389,36 @@ <h2 class="is-size-6 is-flex is-align-items-center gap-8">{{ $offering.title }}
                 </li>
 
                <script>
-                  document.querySelectorAll('.product-menu .single-product').forEach(item => {
+                  document.querySelectorAll('#servicesGrid .single-product').forEach(item => {
                     item.addEventListener('mouseenter', function(e) {
-                      e.preventDefault();
                       const serviceId = this.getAttribute('data-service-id');
-                      showOfferings(serviceId);
+                      if (!serviceId) return;
 
-                      // Update is-active class
-                      document.querySelectorAll('.product-menu .single-product').forEach(el => {
+                      document.querySelectorAll('#servicesGrid .single-product').forEach(el => {
                         el.classList.remove('is-active');
                       });
                       this.classList.add('is-active');
-                    });
-                  });
 
-                  function showOfferings(serviceId) {
-                    document.querySelectorAll('.product-description.offering-content').forEach(el => {
-                      el.classList.remove('is-block');
+                      document.querySelectorAll('.offering-content').forEach(el => {
+                        el.classList.remove('is-block');
+                      });
+                      const panel = document.getElementById('offerings-' + serviceId);
+                      if (panel) panel.classList.add('is-block');
                     });
-
-                    const el = document.getElementById('offerings-' + serviceId);
-                    if (el) {
-                      el.classList.add('is-block');
-                    }
-                  }
+                  });
                 </script>
                 <!-- services end -->
                  
-                <li class="nav-item">
+                <li class="nav-item resources-menu">
                   <button class="link">Resources <i class="fa fa-angle-down" aria-hidden="true"></i></button>
                   <div class="mega-menu-wrapper">
-                    <!-- ac-grid-container -->
                     <div class="mega-menu-inner container">
-                      <button class="button is-small ac-button inline-button back-button"><span
-                          class="icon p-0">
-                            <iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
-                          </span>
-                          <span>Back to Resources</span>
-                        </button>
-                      <!-- list menu items start  -->
-                      <div class="resources-list">
-                        <!-- single resources list  -->
-                        <div class="list-items">
-                          <h2>RESOURCES</h2>
-                          <ul>
-                            <!-- <li><a href="#" target="_blank">Forum</a></li> -->
-                            <li><a href="{{.Site.Params.blog_url}}" class="is-flex is-gap-4">
-                              <span>Blog</span>
-                              <span class="is-flex width-12">
-                                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
-                              </span>
-                            </a>
-                          </li>
-                            <li><a href="{{.Site.Params.docs_url}}" class="is-flex is-gap-4">
-                              <span>Docs</span>
-                              <span class="is-flex width-12">
-                                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
-                              </span>
-                            </a></li>
-                            <li><a
-                                href="https://www.youtube.com/watch?v=4lkBt5UUEAQ&list=PLoiT1Gv2KR1hAtDDW7fHEi-s2y2H3DOgx"
-                                target="_blank" class="is-flex is-gap-4">
-                                <span>Webinars</span>
-                              <span class="is-flex width-12">
-                                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
-                              </span>
-                            </a>
-                          </li>
-                            <li><a href="{{.Site.Params.learn_url}}" class="is-flex is-gap-4">
-                              <span>Learn</span>
-                              <span class="is-flex width-12">
-                                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
-                              </span>
-                            </a></li>
-                            <li><a href="{{.Site.Params.youtube_url}}" target="_blank" class="is-flex is-gap-4">
-                              <span>Demos</span>
-                              <span class="is-flex width-12">
-                                <iconify-icon icon="heroicons:arrow-up-right" width="14" height="14"></iconify-icon>
-                              </span>
-                            </a></li>
-                            <!-- <li><a
-                                href="https://www.youtube.com/watch?v=xSq0OdlVLRI&list=PLoiT1Gv2KR1gE-WK7dIQ5bsJ_RAVZnzP8"
-                                target="_blank">Tutorials</a></li> -->
-                            <!-- <li><a href="#" target="_blank">Community</a></li> -->
-                          </ul>
-                        </div>
-                        <!-- single resources list  -->
 
-                      </div>
-                      <!-- list menu items end -->
+                      {{ partial "menu/resources-nav.html" (dict "page" . "site" .Site) }}
+
                     </div>
                   </div>
                 </li>
-                <li class="nav-item">
-                  <a href="/webinar" class="link">Webinar <span class="whats-new">New</span></a>
-                </li>
-              </ul>
-              <!-- navbar items end -->
-              <!-- if webinar exist script  -->
-              <script type="text/javascript">
-                (function () {
-                  var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
-                  xhr.onreadystatechange = function () {
-                    if (xhr.readyState === 4) {
-                      if (xhr.status === 200) {
-                        var result = JSON.parse(xhr.responseText);
-                        if (result.schedules) {
-                          let endDate = new Date(result.schedules[0]).getTime();
-                          let startDate = new Date().getTime();
-                          let timeRemaining = parseInt((endDate - startDate) / 1000);
-                          if (timeRemaining >= 0) {
-                            document.querySelector('.whats-new').classList.add('is-block')
-                          }
-                        }
-                      }
-                    }
-                  } //
-                  // console.log('GET', 'https://x.appscode.com/_/webinars/');
-                  xhr.open('GET', 'https://x.appscode.com/_/webinars/');
-                  xhr.send();
-                }());
-              </script>
-              <!-- navbar items start -->
-            <div class="navbar-right-group">
-              <ul>
                 <li class="nav-item">
                   <a href="/partner/" class="link">Partner</a>
                 </li>
@@ -648,13 +572,6 @@ <h2>RESOURCES</h2>
 
               <!-- ac-grid-container -->
               <div class="mega-menu-inner container">
-                <button class="button ac-button inline-button back-button">
-                  <span
-                    class="icon p-0">
-                      <iconify-icon icon="heroicons:arrow-uturn-left"></iconify-icon>
-                    </span>
-                    <span>Back</span>
-                </button>
                 <!-- product start  -->
                 <div class="product-menu database-list">
                   {{ range .Children }}
diff --git a/layouts/partials/menu/resources-nav.html b/layouts/partials/menu/resources-nav.html
new file mode 100644
index 0000000000..bb6c2debbd
--- /dev/null
+++ b/layouts/partials/menu/resources-nav.html
@@ -0,0 +1,80 @@
+{{ $site := .site }}
+
+<div class="product-menu">
+
+  <a href="{{ $site.Params.blog_url }}" class="single-product">
+    <div class="product-logo">
+      <iconify-icon icon="heroicons:pencil-square" width="18" height="18"></iconify-icon>
+    </div>
+    <div class="product-info">
+      <h2>Blog</h2>
+      <p>Articles, tutorials &amp; insights</p>
+    </div>
+    <div class="navigate-icon">
+      <span class="icon">
+        <iconify-icon icon="heroicons:arrow-up-right" width="1.2rem" height="1.2rem"></iconify-icon>
+      </span>
+    </div>
+  </a>
+
+  <a href="{{ $site.Params.docs_url }}" class="single-product">
+    <div class="product-logo">
+      <iconify-icon icon="heroicons:book-open" width="18" height="18"></iconify-icon>
+    </div>
+    <div class="product-info">
+      <h2>Docs</h2>
+      <p>Guides, references &amp; API docs</p>
+    </div>
+    <div class="navigate-icon">
+      <span class="icon">
+        <iconify-icon icon="heroicons:arrow-up-right" width="1.2rem" height="1.2rem"></iconify-icon>
+      </span>
+    </div>
+  </a>
+
+  <a href="/webinar/" class="single-product">
+    <div class="product-logo">
+      <iconify-icon icon="heroicons:video-camera" width="18" height="18"></iconify-icon>
+    </div>
+    <div class="product-info">
+      <h2>Webinars</h2>
+      <p>Live &amp; on-demand sessions</p>
+    </div>
+    <div class="navigate-icon">
+      <span class="icon">
+        <iconify-icon icon="heroicons:arrow-up-right" width="1.2rem" height="1.2rem"></iconify-icon>
+      </span>
+    </div>
+  </a>
+
+  <a href="{{ $site.Params.learn_url }}" class="single-product">
+    <div class="product-logo">
+      <iconify-icon icon="heroicons:academic-cap" width="18" height="18"></iconify-icon>
+    </div>
+    <div class="product-info">
+      <h2>Learn</h2>
+      <p>Hands-on learning paths</p>
+    </div>
+    <div class="navigate-icon">
+      <span class="icon">
+        <iconify-icon icon="heroicons:arrow-up-right" width="1.2rem" height="1.2rem"></iconify-icon>
+      </span>
+    </div>
+  </a>
+
+  <a href="{{ $site.Params.youtube_url }}" target="_blank" rel="noopener" class="single-product">
+    <div class="product-logo">
+      <iconify-icon icon="heroicons:play-circle" width="18" height="18"></iconify-icon>
+    </div>
+    <div class="product-info">
+      <h2>Videos</h2>
+      <p>Tutorials, demos &amp; walkthroughs</p>
+    </div>
+    <div class="navigate-icon">
+      <span class="icon">
+        <iconify-icon icon="heroicons:arrow-up-right" width="1.2rem" height="1.2rem"></iconify-icon>
+      </span>
+    </div>
+  </a>
+
+</div>
diff --git a/package-lock.json b/package-lock.json
index 19a836952d..c3817e5d96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,8 @@
       "devDependencies": {
         "@fullhuman/postcss-purgecss": "^6.0.0",
         "autoprefixer": "^10.4.27",
-        "postcss-cli": "^9.1.0"
+        "postcss-cli": "^9.1.0",
+        "sass": "^1.100.0"
       }
     },
     "node_modules/@fullhuman/postcss-purgecss": {
@@ -87,6 +88,330 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -492,6 +817,17 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -733,6 +1069,13 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.6.tgz",
+      "integrity": "sha512-q1swsS8K7L8usSHuOqF2TAoCCkonYz0SG38wLAggaa4Wml70zixIvt2ql4coQ2C2B3hTjltJry4r6bULwgAXLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -910,6 +1253,14 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/node-releases": {
       "version": "2.0.36",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.36.tgz",
@@ -1251,6 +1602,57 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.100.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.100.0.tgz",
+      "integrity": "sha512-B5j0rYMlinhhOo9tjQebMVVn0TfyXAF+wB3b2ggZUuJ/is/Y+7+JGjirAMxHZ9Z3hIP98NPfamlAkBHa1lAaXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^5.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20.19.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/package.json b/package.json
index 8e9150bbb4..70cbdb8184 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "0.2.0",
   "description": "appscode.com",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "sass:watch": "sass --no-source-map --watch ./static/assets/sass/main.scss:./static/assets/sass/main.css"
   },
   "repository": {
     "type": "git",
@@ -18,7 +19,8 @@
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "^6.0.0",
     "autoprefixer": "^10.4.27",
-    "postcss-cli": "^9.1.0"
+    "postcss-cli": "^9.1.0",
+    "sass": "^1.100.0"
   },
   "private": true,
   "dependencies": {
diff --git a/static/assets/js/main.js b/static/assets/js/main.js
index 5907108137..7928addc84 100644
--- a/static/assets/js/main.js
+++ b/static/assets/js/main.js
@@ -1,37 +1,40 @@
 // navbar area JS v.2022 start
 const navItems = document.querySelectorAll(".navbar-appscode .nav-item");
 
+const isTouchDevice = () => window.matchMedia("(max-width: 1023px)").matches;
+
 navItems.forEach(navItem => {
   const item = navItem.querySelector('.link');
-  item.addEventListener('click', function (el) {
 
-    // to remove active class from previously selected navItem
+  function openNav() {
     const selectedNav = document.querySelector(".nav-item.is-active");
-    if (selectedNav && selectedNav !== item.parentElement) {
-      selectedNav.classList.toggle('is-active')
+    if (selectedNav && selectedNav !== navItem) {
+      selectedNav.classList.remove('is-active');
     }
+    navItem.classList.add('is-active');
+  }
 
-    // handle selected navItem class
-    const hasActiveClass = navItem.classList.contains("is-active");
-    navItem.classList.toggle('is-active')
-
-    // handle background dark-shadow of navItem
-    const darkBodyEl = document.querySelector(".modal-backdrop");
+  function closeNav() {
+    navItem.classList.remove('is-active');
+  }
 
-    function handleDarkBodyClickEvent(el) {
-      el.target.classList.remove('is-show')
-      const selectedNavItem = document.querySelector(".nav-item.is-active");
-      selectedNavItem ? selectedNavItem.classList.toggle('is-active') : null;
-    }
+  // Desktop: hover to open/close
+  navItem.addEventListener('mouseenter', function () {
+    if (!isTouchDevice()) openNav();
+  });
+  navItem.addEventListener('mouseleave', function () {
+    if (!isTouchDevice()) closeNav();
+  });
 
-    if (hasActiveClass && darkBodyEl.classList.contains("is-show")) {
-      darkBodyEl.classList.toggle("is-show");
-      darkBodyEl.removeEventListener('click', handleDarkBodyClickEvent);
-    } else if (!hasActiveClass && !darkBodyEl.classList.contains("is-show") && !!navItem.querySelector('.mega-menu-wrapper')) {
-      darkBodyEl.classList.toggle("is-show");
-      darkBodyEl.addEventListener('click', handleDarkBodyClickEvent);
+  // Mobile/touch: keep click behaviour
+  item.addEventListener('click', function () {
+    if (!isTouchDevice()) return;
+    if (navItem.classList.contains("is-active")) {
+      closeNav();
+    } else {
+      openNav();
     }
-  })
+  });
 })
 
 // mega menu active class
@@ -51,16 +54,6 @@ navbarItems.forEach((navbarItem) => {
   });
 });
 
-// Responsive menu back button
-const backButtonAll = document.querySelectorAll(".back-button");
-// create click event for all back button	
-Array.from(backButtonAll).forEach((el) => {
-  el.addEventListener("click", () => {
-    // closeset nav item ancestor	
-    const activeNavElement = el.closest(".nav-item.is-active");
-    if (activeNavElement) activeNavElement.classList.remove("is-active");
-  })
-});
 // navbar area JS v.2022 end
 
 // responsive navbar area
@@ -84,24 +77,10 @@ Array.from(responsiveMenus).forEach((menu, idx) => {
       // toggle active menu class
       toggleElement.classList.toggle(toggleClassesForResponsiveMenu[idx]);
       if (toggleElement.classList.contains(toggleClassesForResponsiveMenu[idx])) {
-        const backButtonElement = toggleElement.querySelector(".back-button");
-
-        function handleClick() {
-          toggleElement.classList.remove(toggleClassesForResponsiveMenu[idx]);
-          // remove event listener on back button click
-          backButtonElement.removeEventListener("click", handleClick);
-        }
-
-        backButtonElement.addEventListener("click", handleClick);
-
       }
     }
 
-    const modalBackdropElement = document.querySelector(".modal-backdrop.is-show");
-    // if modal backdrop element is visible then hide it
-    if (modalBackdropElement) {
-      modalBackdropElement.classList.remove("is-show")
-    }
+
 
     const navItem = document.querySelector(".nav-item.is-active");
     // if modal backdrop element is visible then hide it
diff --git a/static/assets/sass/components/_button.scss b/static/assets/sass/components/_button.scss
index 82c28a997e..78051664b8 100644
--- a/static/assets/sass/components/_button.scss
+++ b/static/assets/sass/components/_button.scss
@@ -3,7 +3,7 @@
 
   &.ac-button {
     border-color: $ac-primary;
-    border-radius: 0.125rem;
+    border-radius: 8px;
     font-size: 0.875rem;
     font-family: $ac-font-paragraph;
     letter-spacing: 0;
@@ -41,7 +41,7 @@
       background-color: $ac-white;
       color: $ac-primary;
       padding: 2px 6px;
-      border-radius: 4px;
+      border-radius: 8px;
       width: 28px;
       height: 28px;
     }
diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss
index 90413e8172..75f495b244 100644
--- a/static/assets/sass/components/_navbar.scss
+++ b/static/assets/sass/components/_navbar.scss
@@ -1,4 +1,24 @@
-// new navbar area start
+// Menu item interaction
+$menu-hover-bg:       #f0faf4;  // row hover background
+$menu-icon-bg:        #edf7f1;  // icon container resting fill
+$menu-icon-bg-active: #c8ecd6;  // icon container active/selected fill
+$menu-sidebar-bg:     #f5faf7;  // services left-panel background
+
+// Shared transitions
+$t-fast:    0.13s ease;   // micro-interactions (hover, opacity)
+$t-medium:  0.2s ease;    // chevron rotate, menu reveal
+
+// Shared geometry
+$menu-icon-size:   40px;   // product-logo box
+$menu-icon-radius: 8px;    // product-logo corner
+$menu-row-radius:  6px;    // single-product row corner
+$menu-letter-sp:  -0.01em; // heading letter-spacing
+
+
+// =============================================================================
+// 1. Layout shell
+// =============================================================================
+
 .navbar-area {
   position: relative;
   z-index: 99;
@@ -14,23 +34,9 @@
     will-change: transform;
     transition: transform 200ms linear;
 
-    .mega-menu-wrapper {
-      top: 57px;
-    }
-
-    .navbar-left {
-      .navbar-brand {
-        a img {
-          height: 1.58rem;
-        }
-      }
-    }
-
-    .buttons.has-addons {
-      .button {
-        font-size: 14px;
-      }
-    }
+    .mega-menu-wrapper { top: 57px; }
+    .navbar-left .navbar-brand a img { height: 1.58rem; }
+    .buttons.has-addons .button { font-size: $font-size-normal; }
   }
 }
 
@@ -38,23 +44,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1.25rem;
+  padding: 0 1.25rem;
+  height: 60px;
+  position: relative;
 
   &.container {
-    padding: 0.5rem 0;
+    padding: 0;
 
     .mega-menu-wrapper {
-      width: calc(100% + 100%);
-      left: -50%;
-      min-height: 525px;
-      @include touch {
-        min-height: auto;
-      }
-    }
-  }
-  .navbar-right {
-    .button.ac-button {
-      height: 40px;
+      width: auto;
+      left: 0;
+      transform: translateY(6px);
+      min-height: auto;
     }
   }
 
@@ -63,43 +64,34 @@
     background-color: $ac-white;
     border-left: 1px solid $ac-white-light;
 
-    .mega-menu-wrapper {
-      top: 104px;
-    }
+    .mega-menu-wrapper { top: 104px; }
 
     .navbar-right {
       width: 100%;
       justify-content: space-between;
 
-      .ac-searchbar {
-        width: 49%;
-      }
+      .ac-searchbar { width: 49%; }
     }
 
-    ul {
-      .nav-item {
-        .link {
+    ul .nav-item .link.is-active {
+      position: relative;
+      z-index: 1;
 
-          &.is-active {
-            position: relative;
-            z-index: 1;
-
-            &:after {
-              position: absolute;
-              content: "";
-              left: 0;
-              bottom: -8px;
-              width: 100%;
-              height: 4px;
-              background: $ac-primary;
-              border-radius: 3px 3px 0 0;
-            }
-          }
-        }
+      &:after {
+        position: absolute;
+        content: "";
+        left: 0;
+        bottom: -8px;
+        width: 100%;
+        height: 4px;
+        background: $ac-primary;
+        border-radius: 3px 3px 0 0;
       }
     }
   }
 
+  .navbar-right .button.ac-button { height: 40px; }
+
   .navbar-left {
     display: flex;
     align-items: center;
@@ -113,9 +105,7 @@
         display: flex;
         align-items: center;
 
-        img {
-          height: 1.875rem;
-        }
+        img { height: 1.875rem; }
       }
     }
   }
@@ -129,6 +119,7 @@
     .navbar-left-group {
       display: flex;
       align-items: center;
+
       @media (min-width: 0px) and (max-width: 1023px) {
         align-items: flex-start;
       }
@@ -138,29 +129,27 @@
       display: flex;
       align-items: center;
       gap: 32px;
+
       ul {
         display: flex;
         margin-left: 16px;
-        @include touch {
-          margin-left: 0;
-        }
+
+        @include touch { margin-left: 0; }
       }
-      .buttons{
+
+      .buttons {
         iframe {
           transition: 0.3s ease-in-out;
+
           &:hover {
-            box-shadow: 2px 4px 24px rgba(0,166,81,.3)!important;
+            box-shadow: 2px 4px 24px rgba(0, 166, 81, 0.3) !important;
             transform: translateY(-2px);
           }
         }
+
         .button {
-          &:has(.tag){
-            gap: 4px;
-          }
-          .tag {
-            background-color: $ac-primary;
-            color: $ac-white;
-          }
+          &:has(.tag) { gap: 4px; }
+          .tag { background-color: $ac-primary; color: $ac-white; }
         }
       }
 
@@ -169,72 +158,79 @@
         align-items: flex-start;
         gap: 16px;
         width: 100%;
-        .buttons{
+
+        .buttons {
           width: 100%;
-          .button {
-            width: 100%;
-            margin-right: 0;
-          }
+          .button { width: 100%; margin-right: 0; }
         }
       }
     }
   }
+}
 
-  ul {
-    .nav-item {
-      margin-right: 2.5rem;
 
-      &.is-active {
-        .link {
-          color: $ac-primary;
+// =============================================================================
+// 2. Nav items & trigger
+// =============================================================================
 
-          i.fa {
-            transform: rotate(-180deg);
-          }
-        }
+.navbar-appscode ul .nav-item {
+  position: relative;
+  margin-right: 2rem;
 
-        .mega-menu-wrapper {
-          display: block !important;
-        }
-      }
+  &:last-child { margin-right: 0; }
 
-      &:last-child {
-        margin-right: 0;
-      }
+  &.is-active {
+    .link {
+      color: $ac-primary;
+      i.fa { transform: rotate(-180deg); }
+    }
 
-      .link {
-        font-size: 0.875rem;
-        line-height: 1;
-        color: $ac-color-heading;
-        font-weight: 500;
-        font-family: $ac-font-heading;
-        border: none;
-        background-color: transparent;
-        cursor: pointer;
-        margin: 0;
-        padding: 0.5rem 0;
-        transition: 0.3s ease-in-out;
-        position: relative;
-        z-index: 1;
-        display: flex;
+    .mega-menu-wrapper {
+      display: block !important;
+      opacity: 1 !important;
+      pointer-events: auto !important;
+      transform: translateX(-30%) translateY(0px) !important;
 
-        &.is-active {
-          color: $ac-primary;
-        }
+      @media (max-width: 1023px) {
+        transform: translateX(0) !important;
+      }
+    }
+  }
 
-        &:hover {
-          color: $ac-primary;
-        }
+  .link {
+    font-size: $font-size-normal;
+    font-weight: 500;
+    font-family: $ac-font-heading;
+    color: $ac-color-heading;
+    line-height: 1;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    margin: 0;
+    padding: 0.75rem 0.25rem;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    transition: color 0.15s ease;
+    position: relative;
+    letter-spacing: $menu-letter-sp;
+    z-index: 1;
 
-        .fa {
-          transition: 0.3s ease-in-out;
-          margin-left: 0.625rem;
-        }
-      }
+    &.is-active,
+    &:hover { color: $ac-primary; }
+
+    .fa {
+      font-size: $font-size-extra-small;
+      transition: transform $t-medium;
     }
   }
 }
 
+
+// =============================================================================
+// 3. Utility components
+// =============================================================================
+
 .whats-new {
   position: absolute;
   z-index: 1;
@@ -246,7 +242,8 @@
   line-height: 1.2;
   display: none;
 
-  &:before {
+  &:before,
+  &:after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -257,447 +254,439 @@
     width: 2rem;
     height: 1rem;
     background: $ac-primary;
+  }
+
+  &:before {
     border-radius: 2px;
     animation: pulse-border 1500ms ease-out infinite;
   }
 
   &:after {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    display: block;
-    width: 2rem;
-    height: 1rem;
-    background: $ac-primary;
     transition: all 200ms;
   }
 
   @keyframes pulse-border {
-    0% {
-      transform: translateX(-50%) translateY(-50%) translateZ(0)
-        scale(1);
-      opacity: 1;
-    }
-
-    100% {
-      transform: translateX(-50%) translateY(-50%) translateZ(0)
-        scale(1.5);
-      opacity: 0;
-    }
+    0%   { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);   opacity: 1; }
+    100% { transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; }
   }
 }
+
 .ac-grid-container {
   max-width: 1344px;
   margin: 0 auto;
   padding: 0 0.5rem;
 }
 
-// new navbar area end
+.navbar-burger {
+  height: 30px;
+  width: 30px;
+  border-radius: 4px;
+
+  &.is-active i.fa {
+    transform: rotate(-180deg);
+    transform-origin: 10px;
+  }
+
+  span { height: 1.5px; }
+}
+
+
+// =============================================================================
+// 4. Auxiliary components
+// =============================================================================
+
+.header--fixed {
+  position: fixed;
+  z-index: 9999;
+  right: 0;
+  left: 0;
+  top: 0;
+
+  &::after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: $ac-white;
+    z-index: -1;
+    transition: 0.5s ease-in-out;
+  }
+}
+
+.ac-searchbar {
+  position: relative;
+  z-index: 1;
+  padding: 0 20px;
+  border-left: 1px solid $ac-white-light;
+
+  label .fa { color: $ac-color-heading; }
+
+  input[type="search"] {
+    border: none;
+    background-color: transparent;
+    color: $ac-color-text;
+    font-size: 0.875rem;
+    width: 270px;
+    padding: 0.2rem 0.875rem;
+
+    &:focus { border: none; outline: none; }
+    &::placeholder { color: $ac-gray-dark; }
+  }
+}
+
+.embeded-console-button {
+  height: 42px;
+  margin-bottom: 4px;
+  width: 185px;
+  overflow: hidden;
+
+  @include mobile { width: 100%; }
+}
+
+
+// =============================================================================
+// 5. Mega menu base
+// =============================================================================
 
 .mega-menu-wrapper {
   display: none;
-  background: $ac-white;
-  position: absolute;
-  z-index: 9;
-  min-width: 300px;
-  padding: 1rem 0;
   position: absolute;
-  width: 100%;
+  z-index: 999;
   left: 0;
-  top: 61px;
+  top: 100%;
+  transform: translateX(-30%) translateY(6px);
+  background: $ac-white;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 8px 24px -4px rgba(0,0,0,0.10), 0 24px 48px -8px rgba(0,0,0,0.08);
+  padding: 0.75rem;
+  width: auto;
+  min-width: 380px;
+  max-width: 420px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 
   .mega-menu-inner {
-    overflow: hidden;
+    overflow: visible;
+
+    .product-description:not(.offering-content) { display: none !important; }
+
+    .video-content { display: none; }
 
-    // product menu start
     .product-menu {
-      display: grid;
-      grid-template-columns: auto auto;
-      width: 60%;
-      float: left;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
 
       &.database-list {
+        display: grid;
         grid-template-columns: auto auto auto;
+        gap: 4px;
 
         .single-product {
-          grid-template-columns: 40px auto 1.5rem;
-          width: 100%;
-          padding: 0.7rem;
+          grid-template-columns: 40px auto 1.2rem;
+          padding: 0.6rem;
 
           .product-logo {
-            height: 40px;
-            width: 40px;
+            height: 36px;
+            width: 36px;
 
-            img {
-              height: 1.5rem;
-            }
+            img { height: 1.2rem; }
           }
 
-          .navigate-icon {
-            .icon {
-              width: 1rem;
-            }
-          }
+          .navigate-icon .icon { width: 1rem; }
         }
       }
 
       .single-product {
         display: grid;
-        grid-template-columns: 3.75rem auto 1.5rem;
-        padding: 1rem;
+        grid-template-columns: 40px 1fr 14px;
         align-items: center;
-        width: 100%;
-        grid-gap: 1rem;
-        border-radius: 0.25rem;
-        transition: 0.3s ease-in-out;
+        padding: 8px 10px;
+        gap: 10px;
+        border-radius: 6px;
+        transition: background-color $t-fast;
         cursor: pointer;
+        text-decoration: none;
 
-        &:hover,
-        &.is-active {
-          background-color: #4d4dcb0d;
+        &:hover {
+          background-color: $menu-hover-bg;
 
-          .navigate-icon {
-            .icon {
-              opacity: 1;
-              visibility: visible;
-            }
+          .product-logo {
+            background: $ac-white;
+            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+          }
+
+          .navigate-icon .icon {
+            opacity: 1;
+            visibility: visible;
+            transform: translate(1px, -1px);
           }
         }
 
         .product-logo {
-          height: 60px;
-          width: 60px;
+          height: $menu-icon-size;
+          width: $menu-icon-size;
           display: flex;
           align-items: center;
           justify-content: center;
-          background: #e9e9fc;
-          border-radius: 0.25rem;
+          background: $menu-icon-bg;
+          border-radius: $menu-icon-radius;
+          flex-shrink: 0;
+          color: $ac-primary;
+          transition: background-color $t-fast, box-shadow $t-fast;
 
-          img {
-            height: 2.5rem;
-          }
+          img { height: 20px; width: 20px; object-fit: contain; }
+          iconify-icon { display: flex; }
         }
 
         .product-info {
+          min-width: 0;
+
           h2 {
-            font-size: 1rem;
-            letter-spacing: 0.009rem;
+            font-size: $font-size-semi-normal;
+            font-weight: 600;
             color: $ac-color-heading;
-            font-weight: 500;
+            line-height: 1.25;
+            letter-spacing: $menu-letter-sp;
           }
 
           p {
-            font-size: 0.813rem;
-            color: #636363;
-            line-height: 140%;
-            letter-spacing: 0.025rem;
+            font-size: $font-size-extra-small;
+            color: $color-text-muted;
+            line-height: 1.4;
+            margin-top: 2px;
           }
         }
 
         .navigate-icon {
-          text-align: right;
           display: flex;
-          justify-content: center;
+          justify-content: flex-end;
           align-items: center;
 
           .icon {
-            width: 1.2rem;
+            width: 14px;
             color: $ac-primary;
             opacity: 0;
             visibility: hidden;
-            transition: 0.3s ease-in-out;
+            transition: opacity $t-fast, transform $t-fast;
           }
         }
       }
     }
+  }
+}
 
-    // product menu end
 
-    // description start
-    .product-description {
-      margin-left: 1rem;
-      float: left;
-      border-left: 1px solid $ac-white-light;
-      padding-left: 4rem;
-      max-width: 36%;
-      opacity: 0;
-      display: none;
-      visibility: hidden;
-      transition: 0.3s ease-in-out;
-      animation: fadeIn 0.2s ease-in-out;
-      
-
-      &.is-block {
-        opacity: 1;
-        visibility: visible;
-      }
+// =============================================================================
+// 6. Dropdown variants
+// =============================================================================
 
-      .brand {
-        margin-bottom: 1rem;
+.resources-menu .mega-menu-wrapper {
+  min-width: 260px;
+  max-width: 320px;
+  padding: 0.75rem;
+}
 
-        img {
-          height: 1.5rem;
-        }
-      }
+.services-menu .mega-menu-wrapper {
+  min-width: 860px;
+  max-width: 960px;
+  padding: 0.75rem;
 
-      p {
-        font-size: 0.875rem;
-        color: $ac-color-text;
-        line-height: 160%;
-        margin-bottom: 1rem;
-      }
+  .mega-menu-inner {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+    overflow: visible;
+
+    // Left: service category list
+    .product-menu.services-grid {
+      flex: 0 0 300px;
+      width: 300px;
+      min-width: 300px;
+      max-width: 300px;
+      display: flex !important;
+      flex-direction: column;
+      gap: 2px;
+      background: $menu-sidebar-bg;
+      border-radius: $menu-icon-radius;
+      padding: 0.375rem;
+      overflow: hidden;
+
+      .single-product {
+        display: flex !important;
+        flex-direction: row !important;
+        grid-template-columns: unset !important;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 10px;
+        border-radius: $menu-row-radius;
+        transition: background-color $t-fast, border-color $t-fast;
+        cursor: pointer;
+        width: 100%;
+        text-decoration: none;
+        box-sizing: border-box;
 
-      .features {
-        li {
-          font-size: 0.813rem;
-          color: $ac-color-heading;
+        .product-logo {
+          height: $menu-icon-size;
+          width: $menu-icon-size;
+          min-width: $menu-icon-size;
+          max-width: $menu-icon-size;
+          flex-shrink: 0;
+          background: $menu-icon-bg;
+          border-radius: $menu-icon-radius;
           display: flex;
           align-items: center;
-          margin-bottom: 15px;
+          justify-content: center;
+          color: $ac-primary;
 
-          .material-icons {
-            font-size: 1rem;
-            margin-right: 0.6rem;
-            color: $ac-primary;
-          }
+          img { height: 20px; width: 20px; object-fit: contain; }
         }
-      }
-    }
 
-    // description end
-  }
-}
+        .product-info {
+          flex: 1;
+          min-width: 0;
+          overflow: hidden;
 
-.back-button {
-  display: none !important;
-  color: $ac-color-text;
-  margin-bottom: 10px !important;
-  background-color: transparent;
-}
+          h2 {
+            font-size: $font-size-semi-normal;
+            font-weight: 600;
+            color: $ac-color-heading;
+            line-height: 1.3;
+            letter-spacing: $menu-letter-sp;
+          }
 
-// inline button start
-.button {
-  &.ac-button {
-    &.inline-button {
-      border: none;
-      height: auto;
-      margin: 0;
-      padding: 0.5rem 0;
+          p { display: none !important; }
+        }
 
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-start;
+        .navigate-icon { display: none !important; }
 
-      &:hover {
-        background-color: transparent;
-        border: none;
-        color: $ac-primary;
+        &:hover {
+          background-color: $menu-hover-bg;
+          .product-info h2 { color: $ac-color-heading; }
+        }
 
-        .material-icons {
-          margin-left: 1rem;
+        &.is-active {
+          .product-logo { background: $menu-icon-bg-active; }
+          .product-info h2 { font-weight: 600; color: $ac-color-heading; }
         }
       }
 
-      .material-icons {
-        font-size: 1rem;
-        margin-left: 0.5rem;
-        transition: 0.3s ease-in-out;
+      @include touch {
+        flex: unset;
+        width: 100%;
+        min-width: unset;
+        max-width: unset;
+        background: transparent;
       }
     }
-  }
-}
 
-// open source menu start
-.linkable-nav-items {
-  width: 500px;
-  float: left;
-
-  ul {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: 0.5rem;
+    // Right: offerings panel
+    .offering-description-container {
+      flex: 1;
+      min-width: 0;
+      border-left: 1px solid $color-border-light;
+      margin-left: 0.625rem;
+      padding-left: 0.625rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
 
-    li {
-      width: 250px;
+      .product-description.offering-content {
+        display: none;
+        flex-direction: column;
+        gap: 2px;
 
-      a {
-        display: inline-flex;
-        align-items: center;
-        font-size: 0.875rem;
-        letter-spacing: 0.009rem;
-        color: $ac-color-heading;
-        font-weight: 500;
-        transition: 0.3s;
-        padding-left: 0;
+        &.is-block { display: flex !important; }
 
-        &:hover {
-          color: $ac-primary;
+        a.single-product {
+          display: flex !important;
+          flex-direction: row !important;
+          grid-template-columns: unset !important;
+          align-items: center;
+          padding: 8px 10px;
+          border-radius: $menu-row-radius;
+          border-left: 3px solid transparent;
+          transition: background-color $t-fast;
+          cursor: pointer;
+          width: 100%;
+          text-decoration: none;
+          gap: 10px;
+
+          .product-info {
+            flex: 1;
+            min-width: 0;
+
+            h2 {
+              font-size: $font-size-semi-normal;
+              font-weight: 600;
+              color: $ac-color-heading;
+              line-height: 1.3;
+              letter-spacing: $menu-letter-sp;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+
+              .arrow-right {
+                opacity: 0;
+                transition: opacity $t-fast, transform $t-fast;
+                color: $ac-primary;
+                display: inline-flex;
+                flex-shrink: 0;
+                margin-left: 0.25rem;
+
+                svg { width: 13px; height: 13px; }
+              }
+            }
 
-          span {
-            &:last-child {
-              padding-left: 1rem;
+            p {
+              font-size: $font-size-extra-small;
+              color: $color-text-muted;
+              margin-top: 3px;
+              line-height: 1.4;
             }
           }
-        }
 
-        span {
-          display: flex;
-          align-items: center;
-          font-size: 1rem;
+          .navigate-icon { display: none !important; }
 
-          &:last-child {
-            padding-left: 0.5rem;
-          }
+          &:hover {
+            background-color: $menu-hover-bg;
 
-          img {
-            height: 1rem;
-            margin-right: 1rem;
+            .product-info h2 {
+              color: $ac-primary;
+              font-weight: 600;
+
+              .arrow-right { opacity: 1; transform: translateX(3px); }
+            }
           }
         }
       }
     }
+
+    @include touch {
+      flex-direction: column;
+
+      .offering-description-container {
+        border-left: none;
+        border-top: 1px solid $color-border-light;
+        margin-left: 0;
+        padding-left: 0;
+        margin-top: 0.5rem;
+        padding-top: 0.5rem;
+        width: 100%;
+      }
+    }
   }
 }
 
-.resources-list {
-  display: grid;
-  grid-template-columns: auto auto auto auto;
-  grid-gap: 2rem;
 
-  .list-items {
-    h2 {
-      font-weight: 500;
-      position: relative;
-      font-size: 0.875rem;
-      z-index: 1;
-      display: inline-block;
-      letter-spacing: 1.2px;
-    }
-
-    ul {
-      margin: 0;
-      padding: 0;
-      list-style: none;
-
-      li {
-        a {
-          font-size: 0.875rem;
-          padding: 0.6rem 0;
-          color: $ac-color-heading;
-          display: inline-block;
-          line-height: 1;
-          transition: 0.3s ease-in-out;
-          font-weight: 500;
-          span {
-            font-size: 14px;
-          }
-
-          &:hover {
-            color: $ac-primary;
-            text-decoration: underline;
-          }
-        }
-      }
-    }
-  }
-}
-
-.press-wrapper {
-  .single-press {
-    margin: 0;
-    padding: 0;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    transition: 0.3s;
-
-    &:hover {
-      h6 {
-        color: $ac-primary;
-      }
-    }
-
-    .calender {
-      text-align: center;
-      height: 90px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-start;
-      flex-direction: column;
-      margin-right: 1rem;
-      border-radius: 4px;
-
-      .date {
-        width: 84px;
-        height: 45px;
-        background-color: #9dffcd;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 28px;
-        line-height: 140%;
-        letter-spacing: 0.4px;
-        color: $ac-primary;
-        align-items: center;
-        display: flex;
-        justify-content: center;
-      }
-
-      .month {
-        width: 84px;
-        height: 45px;
-        background: #ccffe5;
-        font-family: Roboto;
-        font-style: normal;
-        font-weight: 300;
-        font-size: 18px;
-        line-height: 140%;
-        letter-spacing: 0.4px;
-        color: $ac-primary;
-        align-items: center;
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    .description {
-      max-width: 327px;
-
-      h6 {
-        font-size: 1rem;
-        margin-bottom: 0px;
-        letter-spacing: 0;
-        font-weight: 500;
-        display: block;
-
-        &:after {
-          position: inherit;
-        }
-      }
-
-      .author {
-        font-weight: 400;
-        font-size: 0.875rem;
-        letter-spacing: 0.4px;
-        margin-bottom: 0.5rem;
-        display: block;
-        color: #1c1c1c;
-      }
-
-      p {
-        font-size: 0.875rem;
-        color: #636363;
-        line-height: 150%;
-      }
-    }
-  }
-
-  .button.inline-button {
-    margin-left: 100px !important;
-  }
-}
+// =============================================================================
+// 7. Standalone widgets
+// =============================================================================
 
 .community-items {
   display: flex;
@@ -714,22 +703,16 @@
     margin-right: 0.5rem;
     transition: 0.3s;
 
+    &:last-child { margin-right: 0; }
+
     &:hover {
       background-color: $ac-primary;
       border-color: $ac-primary;
-
-      img {
-        filter: brightness(10);
-      }
-    }
-
-    &:last-child {
-      margin-right: 0;
+      img { filter: brightness(10); }
     }
   }
 }
 
-// responsive menu start
 .responsive-menu {
   background-color: $ac-primary;
 
@@ -737,56 +720,37 @@
     border: none;
     padding-left: 0;
     padding-right: 0;
-    font-size: 14px;
+    font-size: $font-size-normal;
     font-weight: 500;
     background-color: transparent;
     color: $ac-white;
 
-    &.is-active {
-      color: #d2d2d2;
-    }
+    &.is-active { color: #d2d2d2; }
   }
 }
 
-// responsive menu end
-
-// product version style start
 .product-version {
   .dropdown {
-    .dropdown-trigger {
-      .button {
-        font-size: 0.813rem;
-        width: 210px;
-        height: 2rem;
-        border-radius: 2px;
-        padding: 2px 15px;
-        color: $ac-color-heading;
-        border: 1px solid $ac-white-light;
-
-        .arrow {
-          color: #999999;
-          font-size: 0.9rem;
-        }
-      }
+    .dropdown-trigger .button {
+      font-size: 0.813rem;
+      width: 210px;
+      height: 2rem;
+      border-radius: 2px;
+      padding: 2px 15px;
+      color: $ac-color-heading;
+      border: 1px solid $ac-white-light;
+
+      .arrow { color: #999999; font-size: 0.9rem; }
     }
 
     .dropdown-menu {
-      /* ===== Scrollbar CSS ===== */
-      /* Firefox */
       * {
         scrollbar-width: auto;
         scrollbar-color: #ebebeb #fafafd;
       }
 
-      /* Chrome, Edge, and Safari */
-      *::-webkit-scrollbar {
-        width: 12px;
-      }
-
-      *::-webkit-scrollbar-track {
-        background: #fafafd;
-      }
-
+      *::-webkit-scrollbar { width: 12px; }
+      *::-webkit-scrollbar-track { background: #fafafd; }
       *::-webkit-scrollbar-thumb {
         background-color: #ebebeb;
         border-radius: 10px;
@@ -797,10 +761,7 @@
         max-height: 420px;
         overflow-y: auto;
 
-        .dropdown-item {
-          font-size: 0.813rem;
-          color: $ac-color-heading;
-        }
+        .dropdown-item { font-size: 0.813rem; color: $ac-color-heading; }
       }
     }
   }
@@ -816,501 +777,482 @@
   }
 }
 
-// product version style end
-// navbar search start
-.ac-searchbar {
-  position: relative;
-  z-index: 1;
-  padding: 0 20px;
-  border-left: 1px solid $ac-white-light;
-
-  label {
-    .fa {
-      color: $ac-color-heading;
-    }
-  }
+.button.ac-button.inline-button {
+  border: none;
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
 
-  input[type="search"] {
-    border: none;
+  &:hover {
     background-color: transparent;
-    color: $ac-color-text;
-    font-size: 0.875rem;
-    width: 270px;
-    padding: 0.2rem 0.875rem;
-
-    &:focus {
-      border: none;
-      outline: none;
-    }
-
-    &::placeholder {
-      color: #636363;
-    }
-  }
-}
-
-// navbar search end
-
-// modal-backdrop start
-.modal-backdrop {
-  &.is-show {
-    width: 100%;
-    height: 100%;
-    background: #333;
-    position: fixed;
-    top: 0;
-    opacity: 0.8;
-    z-index: 9;
-  }
-}
-
-// modal-backdrop end
-.header--fixed {
-  position: fixed;
-  z-index: 10;
-  right: 0;
-  left: 0;
-  top: 0;
-  &::after {
-    position: absolute;
-    content: "";
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: #ffffff;
-    z-index: -1;
-    transition: 0.5s ease-in-out;
-  }
-  &.headroom--unpinned {
-    &::after {
-      transition: transform 500ms linear;
-    }
-  }
-}
-
-.headroom {
-  will-change: transform;
-  transition: transform 200ms linear;
-}
-
-.headroom--pinned {
-  transform: translateY(0px);
-  transition: transform 500ms linear;
-}
-
-.headroom--unpinned {
-  transform: translateY(-165px);
-
-  .navbar-area {
-    &.navbar-fixed {
-      transform: translateY(135px);
-    }
+    border: none;
+    color: $ac-primary;
+    .material-icons { margin-left: 1rem; }
   }
 
-  .navbar-appscode-wrapper {
-    &.navbar-product {
-      transform: translateY(104px);
-    }
+  .material-icons {
+    font-size: 1rem;
+    margin-left: 0.5rem;
+    transition: 0.3s ease-in-out;
   }
 }
 
-.navbar-burger {
-  height: 30px;
-  width: 30px;
-  border-radius: 4px;
-  &.is-active {
-    i.fa {
-      transform: rotate(-180deg);
-      transform-origin: 10px;
-    }
-  }
 
-  span {
-    height: 1.5px;
-  }
-}
+// =============================================================================
+// 8. Responsive — touch / mobile
+// =============================================================================
 
-/****************************************
-Responsive Classes
-*****************************************/
 @include touch {
-  .headroom--unpinned {
-    .navbar-appscode-wrapper {
-      &.navbar-product {
-        padding: 0 0;
-        transform: translateY(104px);
-
-        .navbar-appscode {
-          .navbar-right {
-            top: 47px;
-          }
-        }
-      }
+  .navbar-burger {
+    display: flex !important;
+    height: 36px;
+    width: 36px;
+    border-radius: 6px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
 
-      // .documentation-menu {
-      //   .navbar-right {
-      //     top: 85px !important;
-      //   }
-      // }
-    }
+    span { background-color: $ac-color-heading; }
   }
 
   .navbar-appscode {
-    &.container {
-      padding: 0.5rem 15px;
+    &.container,
+    & {
+      height: 60px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: $ac-white;
     }
 
+    &.container { padding: 0.5rem 15px; }
+
     &.documentation-menu {
       margin-left: 0;
       padding: 0;
-      ul .nav-item {
-        .link.is-active:after {
-          display: none;
-        }
-      }
-      .navbar-right {
-        position: fixed;
-        // top: -60px !important;
-        width: 80%;
-        border-right: 1px solid $ac-white-light;
-      }
+
+      ul .nav-item .link.is-active:after { display: none; }
+      .navbar-right { position: fixed; width: 80%; border-right: 1px solid $ac-white-light; }
     }
 
     .navbar-left {
-      width: 100%;
+      width: auto;
+      flex: 1;
 
       .navbar-brand {
         margin: 0;
         width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
 
-        a {
-          img {
-            height: 1.5rem !important;
-          }
-        }
+        a img { height: 1.5rem !important; }
       }
 
-      ul {
-        position: absolute;
-        right: 20%;
-        opacity: 0;
-        visibility: hidden;
-      }
+      ul { position: absolute; right: 20%; opacity: 0; visibility: hidden; }
     }
 
     .navbar-right {
-      position: absolute;
-      z-index: 99;
-      right: 20%;
-      opacity: 0;
-      visibility: hidden;
-      background: #fafafd;
-      width: 100%;
+      display: none;
+      position: fixed;
+      z-index: 998;
+      top: 60px;
       left: 0;
-      min-height: calc(100vh + 110px);
+      right: 0;
+      width: 100%;
+      height: calc(100vh - 60px);
       overflow-y: auto;
-      transition: 0.3s ease-in-out;
-      top: 61px;
-      padding: 15px;
-      justify-content: flex-start;
+      background: $ac-white;
+      padding: 20px 20px 48px;
       flex-direction: column;
       align-items: flex-start;
+      justify-content: flex-start;
+      border-top: 1px solid $ac-white-light;
+      gap: 0;
+      @include touch {
+        top: 100px;
+      }
+
+      &.is-visible { display: flex; }
 
       .is-flex.is-justify-content-space-between {
         flex-direction: column;
         align-items: flex-start;
+        width: 100%;
+        gap: 0;
       }
 
-      .is-primary.ml-8 {
-        margin-left: 0 !important;
-        margin-top: 15px;
+      .is-primary.ml-8 { margin-left: 0 !important; margin-top: 12px; }
+
+      .button.ac-button.is-primary {
+        margin-left: 0;
+        width: 100%;
+        height: 48px;
+        font-size: $font-size-semi-normal;
       }
 
-      .button.ac-button {
-        &.is-primary {
-          margin-left: 0;
+      > .is-flex > ul,
+      ul.navbar-left-group {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        gap: 0;
+        margin: 0;
+        padding: 0;
+
+        li.nav-item {
           width: 100%;
+          margin: 0;
+          border-bottom: 1px solid $ac-white-lighter;
+
+          &:last-child { border-bottom: none; }
+
+          .link {
+            display: flex;
+            width: 100%;
+            padding: 15px 4px;
+            font-size: $font-size-semi-normal;
+            font-weight: 500;
+            line-height: 1.3;
+            justify-content: space-between;
+            align-items: center;
+            border-radius: 0;
+            color: $ac-color-heading;
+            transition: color $t-fast;
+
+            &:hover { color: $ac-primary; background: transparent; }
+
+            .fa {
+              font-size: $font-size-extra-small;
+              color: $color-text-muted;
+              transition: transform $t-medium;
+            }
+          }
+
+          .mega-menu-wrapper {
+            display: none;
+            position: static !important;
+            width: calc(100% + 40px) !important;
+            min-width: 0 !important;
+            max-width: calc(100% + 40px) !important;
+            margin-left: -20px !important;
+            margin-right: -20px !important;
+            transform: none !important;
+            left: auto !important;
+            top: auto !important;
+            padding: 8px 20px 12px !important;
+            background: $color-surface-subtle;
+            box-shadow: none;
+            border: none;
+            border-top: 1px solid $color-border-light;
+            border-bottom: 1px solid $color-border-light;
+            border-radius: 0;
+          }
+
+          &.is-active {
+            .link {
+              color: $ac-primary;
+              background: transparent;
+              .fa { transform: rotate(-180deg); color: $ac-primary; }
+            }
+            .mega-menu-wrapper { display: block !important; }
+          }
         }
       }
 
-      ul {
-        display: flex;
+      .navbar-right-group {
+        width: 100%;
         flex-direction: column;
+        align-items: flex-start;
+        gap: 0;
+        padding-top: 16px;
+        margin-top: 8px;
+        border-top: 1px solid $color-border-light;
 
-        li.nav-item {
-          margin: 6px 0;
+        ul {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          gap: 0;
+          margin: 0;
+
+          li.nav-item {
+            width: 100%;
+            margin: 0;
+            border-bottom: 1px solid $ac-white-lighter;
+
+            &:last-child { border-bottom: none; }
+
+            .link {
+              display: flex;
+              width: 100%;
+              padding: 15px 4px;
+              font-size: $font-size-semi-normal;
+              font-weight: 500;
+              line-height: 1.3;
+              justify-content: space-between;
+              align-items: center;
+              border-radius: 0;
+              color: $ac-color-heading;
+              transition: color $t-fast;
+
+              &:hover { color: $ac-primary; background: transparent; }
+
+              .fa {
+                font-size: $font-size-extra-small;
+                color: $color-text-muted;
+                transition: transform $t-medium;
+              }
+            }
+
+            .mega-menu-wrapper {
+              display: none;
+              position: static !important;
+              width: 100% !important;
+              min-width: 0 !important;
+              max-width: 100% !important;
+              margin-left: 0 !important;
+              margin-right: 0 !important;
+              transform: none !important;
+              left: auto !important;
+              top: auto !important;
+              padding: 8px 0 12px !important;
+              background: $color-surface-subtle;
+              box-shadow: none;
+              border: none;
+              border-top: 1px solid $color-border-light;
+              border-bottom: 1px solid $color-border-light;
+              border-radius: 0;
+            }
+
+            &.is-active {
+              .link {
+                color: $ac-primary;
+                background: transparent;
+                .fa { transform: rotate(-180deg); color: $ac-primary; }
+              }
+              .mega-menu-wrapper { display: block !important; }
+            }
+          }
+        }
+
+        .buttons {
+          width: 100%;
+          flex-direction: column;
+          gap: 10px;
+          padding-top: 16px;
+          margin-top: 8px;
+          border-top: 1px solid $color-border-light;
 
-          .link .whats-new {
-            top: -10px;
-            right: -30px;
+          iframe { width: 100%; height: 44px; }
+
+          .button.ac-button {
+            width: 100%;
+            height: 44px;
+            font-size: $font-size-normal;
           }
         }
       }
 
       .community-items.ml-70 {
         margin-left: 0 !important;
-        margin-top: 30px;
-      }
-
-      &.is-visible {
-        opacity: 1;
-        visibility: visible;
+        margin-top: 20px;
+        gap: 8px;
       }
     }
   }
 
-  .resources-list {
-    grid-template-columns: auto;
-  }
-
+  // Mega menu: full-width inline on mobile
   .mega-menu-wrapper {
-    width: 100% !important;
-    left: 0 !important;
-    top: 0 !important;
-    padding-top: 20px !important;
-    background-color: #fafafd;
-    max-height: 75vh;
-    min-height: 70vh;
-    overflow-y: auto;
-    box-shadow: 2px 2px 2px rgba(0,0,0,.16);
+    width: calc(100% + 40px) !important;
+    min-width: 0 !important;
+    max-width: calc(100% + 40px) !important;
+    margin-left: -20px !important;
+    margin-right: -20px !important;
+    position: static !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+    padding: 8px 20px 8px !important;
+    background-color: $ac-white;
+    box-shadow: none;
+    border: none;
+    border-top: 1px solid $ac-white-light;
+    border-bottom: 1px solid $ac-white-light;
+    border-radius: 0;
+    opacity: 1 !important;
+    pointer-events: auto !important;
 
     .mega-menu-inner {
+      overflow: visible;
+
       .product-menu {
-        grid-template-columns: auto;
+        display: flex !important;
+        flex-direction: column;
+        gap: 2px;
         width: 100%;
 
         .single-product {
+          display: grid !important;
+          grid-template-columns: 40px 1fr 16px !important;
           width: 100%;
+          padding: 10px 8px;
+          gap: 12px;
+          border-radius: 8px;
 
           .product-logo {
-            height: 50px;
-            width: 50px;
+            height: $menu-icon-size;
+            width: $menu-icon-size;
+            border-radius: 10px;
+            background: $menu-icon-bg !important;
 
-            img {
-              height: 1.8rem;
-            }
+            img { height: 24px; width: 24px; }
           }
 
-          .navigate-icon {
-            .icon {
-              width: 16px;
-            }
+          .product-info {
+            h2 { font-size: $font-size-semi-normal; font-weight: 600; color: $ac-color-heading; }
+            p  { font-size: $font-size-extra-small; margin-top: 2px; color: $color-text-muted; }
+          }
+
+          .navigate-icon .icon {
+            opacity: 0;
+            visibility: hidden;
+            width: 14px;
+            color: $ac-primary;
           }
-        }
 
-        &.database-list {
-          grid-template-columns: auto;
+          &:hover,
+          &.is-active {
+            background-color: $menu-hover-bg;
+            .product-logo { background: $ac-white !important; }
+            .navigate-icon .icon { opacity: 1; visibility: visible; }
+          }
         }
+
+        &.database-list  { grid-template-columns: 1fr !important; }
+        &.services-grid  { grid-template-columns: 1fr !important; width: 100%; background: transparent; }
+      }
+
+      .services-menu .mega-menu-inner,
+      .offering-description-container {
+        flex-direction: column !important;
+        width: 100% !important;
+        border-left: none !important;
+        border-top: 1px solid $ac-white-light;
+        margin-left: 0 !important;
+        padding-left: 0 !important;
+        margin-top: 8px;
+        padding-top: 8px;
       }
 
       .product-description {
         border-left: none;
         padding-left: 0;
-        margin-top: 35px;
-        margin-left: 0;
+        margin: 0;
         max-width: 100%;
       }
     }
   }
-  .press-wrapper {
-    .button.inline-button {
-      margin-left: 0 !important;
-      background-color: transparent;
-    }
-  }
-  .navbar-appscode-wrapper.navbar-product {
-    .navbar-appscode .navbar-right {
-      top: 47px;
-    }
-  }
 
-  .product-version {
-    &.pl-20 {
-      padding-left: 10px;
-    }
+  // Services two-panel: stacked on mobile
+  .services-menu .mega-menu-wrapper .mega-menu-inner {
+    flex-direction: column !important;
 
-    .dropdown {
-      .dropdown-trigger {
-        .button {
-          width: 190px;
-        }
-      }
+    .product-menu.services-grid {
+      width: 100% !important;
+      max-width: 100% !important;
+      flex: unset !important;
+      background: $menu-sidebar-bg;
+      margin-bottom: 8px;
     }
 
-    .dropdown-menu {
-      z-index: 9999;
+    .offering-description-container {
+      border-left: none !important;
+      border-top: 1px solid $color-border-light;
+      margin: 8px 0 0 !important;
+      padding: 8px 0 0 !important;
+      width: 100%;
     }
   }
 
-  .back-button {
-    display: flex !important;
-
-    span {
-      color: $ac-primary;
-      padding-right: 15px;
-      font-size: 18px;
-    }
+  .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right {
+    top: 47px;
   }
-}
-.embeded-console-button {
-  height: 42px; 
-  margin-bottom: 4px; 
-  width: 185px;  
-  overflow: hidden;
-  @include mobile {
-    width: 100%;
+
+  .product-version {
+    &.pl-20 { padding-left: 10px; }
+    .dropdown .dropdown-trigger .button { width: 190px; }
+    .dropdown-menu { z-index: 9999; }
   }
 }
+
+
+// =============================================================================
+// 9. Responsive — desktop / widescreen / fullhd
+// =============================================================================
+
 @include desktop-only {
-  .navbar-burger {
-    display: none !important;
-  }
+  .navbar-burger { display: none !important; }
 
   .navbar-appscode {
-    &.documentation-menu {
-      margin-left: 0;
-      border-left: none;
-    }
-    .navbar-left {
-      .navbar-brand {
-        margin-right: 1rem;
-      }
-    }
+    &.documentation-menu { 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;
-      }
-      .buttons {
-        min-width: 354px !important;
-      }
-      .button.ac-button {
-        padding: .5rem 1rem;
-      }
+      .community-items.ml-70 { margin-left: 10px !important; }
+      .buttons { min-width: 354px !important; }
+      .button.ac-button { padding: 0.5rem 1rem; }
     }
-    .navbar-right-group {
-      gap: 8px !important;
-    }
-    ul {
-      .nav-item {
-        margin-right: 12px;
-      }
-    }
-  }
-
-  .mega-menu-wrapper {
-    .mega-menu-inner {
-      .product-menu {
-        grid-template-columns: auto;
-        width: calc(50% - 5rem);
-      }
 
-      .product-description {
-        border-left: none;
-      }
-    }
+    .navbar-right-group { gap: 8px !important; }
+    ul .nav-item { margin-right: 12px; }
+  }
 
-    .video-content {
-      display: none;
+  .mega-menu-wrapper .mega-menu-inner {
+    .product-menu:not(.services-grid):not(.database-list) {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
     }
   }
 
   .product-version {
-    &.ml-20 {
-      margin-left: 4px !important;
-    }
-
-    .dropdown {
-      .dropdown-trigger {
-        .button {
-          width: 180px;
-          padding: 2px 5px;
-        }
-      }
-    }
+    &.ml-20 { margin-left: 4px !important; }
+    .dropdown .dropdown-trigger .button { width: 180px; padding: 2px 5px; }
   }
 }
 
 @include widescreen-only {
-  .navbar-burger {
-    display: none !important;
-  }
+  .navbar-burger { display: none !important; }
+
   .navbar-appscode {
-    &.documentation-menu {
-      margin-left: 0;
-      border-left: none;
-    }
+    &.documentation-menu { margin-left: 0; border-left: none; }
+
     .navbar-right {
       width: calc(100% - 180px);
-
-      .community-items.ml-70 {
-        margin-left: 10px !important;
-      }
+      .community-items.ml-70 { margin-left: 10px !important; }
     }
 
-    ul {
-      .nav-item {
-        margin-right: 1.5rem;
-      }
-    }
+    ul .nav-item { margin-right: 1.5rem; }
   }
-  .mega-menu-wrapper {
-    .mega-menu-inner {
-      .product-menu {
-        grid-template-columns: auto;
-        width: calc(50% - 5rem);
-      }
 
-      .product-description {
-        border-left: none;
-      }
-    }
-
-    .video-content {
-      display: none;
+  .mega-menu-wrapper .mega-menu-inner {
+    .product-menu:not(.services-grid):not(.database-list) {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
     }
   }
 }
 
 @include fullhd {
-  .navbar-appscode {
-    .navbar-left {
-      .navbar-brand {
-        margin-right: 3rem;
-      }
-    }
-  }
-}
-.mega-menu-wrapper {
-  .mega-menu-inner {
-    .product-menu{
-      &.services-grid {
-        grid-template-columns: 500px; 
-        width: 500px; 
-        background-color: #fbfbfb;
-        border-radius: 8px;
-        @include touch {
-          grid-template-columns: auto; 
-          width: 100%; 
-           .single-product {
-            &::after {
-              display: none;
-            }
-           }
-        }
-        .single-product {
-          padding: 0.8rem 1rem;
-          .product-logo {
-            height: 48px;
-            width: 48px;
-            img {
-              height: 1.5rem !important;
-            }
-          }
-        }
-      }
-    }
-  }
+  .navbar-appscode .navbar-left .navbar-brand { margin-right: 3rem; }
+
+  .mega-menu-wrapper .mega-menu-inner .video-content { display: block; }
 }
diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css
index 6153c53687..d7486be279 100644
--- a/static/assets/sass/main.css
+++ b/static/assets/sass/main.css
@@ -20878,23 +20878,18 @@ Responsive Classes
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.5rem 1.25rem;
+  padding: 0 1.25rem;
+  height: 60px;
+  position: relative;
 }
 .navbar-appscode.container {
-  padding: 0.5rem 0;
+  padding: 0;
 }
 .navbar-appscode.container .mega-menu-wrapper {
-  width: 200%;
-  left: -50%;
-  min-height: 525px;
-}
-@media screen and (max-width: 1023px) {
-  .navbar-appscode.container .mega-menu-wrapper {
-    min-height: auto;
-  }
-}
-.navbar-appscode .navbar-right .button.ac-button {
-  height: 40px;
+  width: auto;
+  left: 0;
+  transform: translateY(6px);
+  min-height: auto;
 }
 .navbar-appscode.documentation-menu {
   margin-left: 349px;
@@ -20925,6 +20920,9 @@ Responsive Classes
   background: var(--ac-primary);
   border-radius: 3px 3px 0 0;
 }
+.navbar-appscode .navbar-right .button.ac-button {
+  height: 40px;
+}
 .navbar-appscode .navbar-left {
   display: flex;
   align-items: center;
@@ -20999,8 +20997,13 @@ Responsive Classes
     margin-right: 0;
   }
 }
+
 .navbar-appscode ul .nav-item {
-  margin-right: 2.5rem;
+  position: relative;
+  margin-right: 2rem;
+}
+.navbar-appscode ul .nav-item:last-child {
+  margin-right: 0;
 }
 .navbar-appscode ul .nav-item.is-active .link {
   color: var(--ac-primary);
@@ -21010,35 +21013,40 @@ Responsive Classes
 }
 .navbar-appscode ul .nav-item.is-active .mega-menu-wrapper {
   display: block !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+  transform: translateX(-30%) translateY(0px) !important;
 }
-.navbar-appscode ul .nav-item:last-child {
-  margin-right: 0;
+@media (max-width: 1023px) {
+  .navbar-appscode ul .nav-item.is-active .mega-menu-wrapper {
+    transform: translateX(0) !important;
+  }
 }
 .navbar-appscode ul .nav-item .link {
-  font-size: 0.875rem;
-  line-height: 1;
-  color: #171B1C;
+  font-size: 14px;
   font-weight: 500;
   font-family: "Roboto", sans-serif;
+  color: #171B1C;
+  line-height: 1;
   border: none;
   background-color: transparent;
   cursor: pointer;
   margin: 0;
-  padding: 0.5rem 0;
-  transition: 0.3s ease-in-out;
+  padding: 0.75rem 0.25rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: color 0.15s ease;
   position: relative;
+  letter-spacing: -0.01em;
   z-index: 1;
-  display: flex;
-}
-.navbar-appscode ul .nav-item .link.is-active {
-  color: var(--ac-primary);
 }
-.navbar-appscode ul .nav-item .link:hover {
+.navbar-appscode ul .nav-item .link.is-active, .navbar-appscode ul .nav-item .link:hover {
   color: var(--ac-primary);
 }
 .navbar-appscode ul .nav-item .link .fa {
-  transition: 0.3s ease-in-out;
-  margin-left: 0.625rem;
+  font-size: 12px;
+  transition: transform 0.2s ease;
 }
 
 .whats-new {
@@ -21052,7 +21060,7 @@ Responsive Classes
   line-height: 1.2;
   display: none;
 }
-.whats-new:before {
+.whats-new:before, .whats-new:after {
   content: "";
   position: absolute;
   z-index: -1;
@@ -21063,20 +21071,12 @@ Responsive Classes
   width: 2rem;
   height: 1rem;
   background: var(--ac-primary);
+}
+.whats-new:before {
   border-radius: 2px;
   animation: pulse-border 1500ms ease-out infinite;
 }
 .whats-new:after {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  left: 50%;
-  top: 50%;
-  transform: translateX(-50%) translateY(-50%);
-  display: block;
-  width: 2rem;
-  height: 1rem;
-  background: var(--ac-primary);
   transition: all 200ms;
 }
 @keyframes pulse-border {
@@ -21096,325 +21096,393 @@ Responsive Classes
   padding: 0 0.5rem;
 }
 
+.navbar-burger {
+  height: 30px;
+  width: 30px;
+  border-radius: 4px;
+}
+.navbar-burger.is-active i.fa {
+  transform: rotate(-180deg);
+  transform-origin: 10px;
+}
+.navbar-burger span {
+  height: 1.5px;
+}
+
+.header--fixed {
+  position: fixed;
+  z-index: 9999;
+  right: 0;
+  left: 0;
+  top: 0;
+}
+.header--fixed::after {
+  position: absolute;
+  content: "";
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  z-index: -1;
+  transition: 0.5s ease-in-out;
+}
+
+.ac-searchbar {
+  position: relative;
+  z-index: 1;
+  padding: 0 20px;
+  border-left: 1px solid #e7e7e7;
+}
+.ac-searchbar label .fa {
+  color: #171B1C;
+}
+.ac-searchbar input[type=search] {
+  border: none;
+  background-color: transparent;
+  color: #515D63;
+  font-size: 0.875rem;
+  width: 270px;
+  padding: 0.2rem 0.875rem;
+}
+.ac-searchbar input[type=search]:focus {
+  border: none;
+  outline: none;
+}
+.ac-searchbar input[type=search]::placeholder {
+  color: #5f5f5f;
+}
+
+.embeded-console-button {
+  height: 42px;
+  margin-bottom: 4px;
+  width: 185px;
+  overflow: hidden;
+}
+@media screen and (max-width: 768px) {
+  .embeded-console-button {
+    width: 100%;
+  }
+}
+
 .mega-menu-wrapper {
   display: none;
-  background: #ffffff;
-  position: absolute;
-  z-index: 9;
-  min-width: 300px;
-  padding: 1rem 0;
   position: absolute;
-  width: 100%;
+  z-index: 999;
   left: 0;
-  top: 61px;
+  top: 100%;
+  transform: translateX(-30%) translateY(6px);
+  background: #ffffff;
+  border-radius: 14px;
+  border: 1px solid rgba(0, 0, 0, 0.07);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.1), 0 24px 48px -8px rgba(0, 0, 0, 0.08);
+  padding: 0.75rem;
+  width: auto;
+  min-width: 380px;
+  max-width: 420px;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
 }
 .mega-menu-wrapper .mega-menu-inner {
-  overflow: hidden;
+  overflow: visible;
+}
+.mega-menu-wrapper .mega-menu-inner .product-description:not(.offering-content) {
+  display: none !important;
+}
+.mega-menu-wrapper .mega-menu-inner .video-content {
+  display: none;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu {
-  display: grid;
-  grid-template-columns: auto auto;
-  width: 60%;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu.database-list {
+  display: grid;
   grid-template-columns: auto auto auto;
+  gap: 4px;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product {
-  grid-template-columns: 40px auto 1.5rem;
-  width: 100%;
-  padding: 0.7rem;
+  grid-template-columns: 40px auto 1.2rem;
+  padding: 0.6rem;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo {
-  height: 40px;
-  width: 40px;
+  height: 36px;
+  width: 36px;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .product-logo img {
-  height: 1.5rem;
+  height: 1.2rem;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu.database-list .single-product .navigate-icon .icon {
   width: 1rem;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product {
   display: grid;
-  grid-template-columns: 3.75rem auto 1.5rem;
-  padding: 1rem;
+  grid-template-columns: 40px 1fr 14px;
   align-items: center;
-  width: 100%;
-  grid-gap: 1rem;
-  border-radius: 0.25rem;
-  transition: 0.3s ease-in-out;
+  padding: 8px 10px;
+  gap: 10px;
+  border-radius: 6px;
+  transition: background-color 0.13s ease;
   cursor: pointer;
+  text-decoration: none;
+}
+.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover {
+  background-color: #f0faf4;
 }
-.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active {
-  background-color: rgba(77, 77, 203, 0.0509803922);
+.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo {
+  background: #ffffff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
-.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon {
+.mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon {
   opacity: 1;
   visibility: visible;
+  transform: translate(1px, -1px);
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo {
-  height: 60px;
-  width: 60px;
+  height: 40px;
+  width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #e9e9fc;
-  border-radius: 0.25rem;
+  background: #edf7f1;
+  border-radius: 8px;
+  flex-shrink: 0;
+  color: var(--ac-primary);
+  transition: background-color 0.13s ease, box-shadow 0.13s ease;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img {
-  height: 2.5rem;
+  height: 20px;
+  width: 20px;
+  object-fit: contain;
+}
+.mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo iconify-icon {
+  display: flex;
+}
+.mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info {
+  min-width: 0;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 {
-  font-size: 1rem;
-  letter-spacing: 0.009rem;
+  font-size: 15px;
+  font-weight: 600;
   color: #171B1C;
-  font-weight: 500;
+  line-height: 1.25;
+  letter-spacing: -0.01em;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p {
-  font-size: 0.813rem;
-  color: #636363;
-  line-height: 140%;
-  letter-spacing: 0.025rem;
+  font-size: 12px;
+  color: #6a7282;
+  line-height: 1.4;
+  margin-top: 2px;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon {
-  text-align: right;
   display: flex;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
 }
 .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon {
-  width: 1.2rem;
+  width: 14px;
   color: var(--ac-primary);
   opacity: 0;
   visibility: hidden;
-  transition: 0.3s ease-in-out;
+  transition: opacity 0.13s ease, transform 0.13s ease;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description {
-  margin-left: 1rem;
-  float: left;
-  border-left: 1px solid #e7e7e7;
-  padding-left: 4rem;
-  max-width: 36%;
-  opacity: 0;
-  display: none;
-  visibility: hidden;
-  transition: 0.3s ease-in-out;
-  animation: fadeIn 0.2s ease-in-out;
+
+.resources-menu .mega-menu-wrapper {
+  min-width: 260px;
+  max-width: 320px;
+  padding: 0.75rem;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description.is-block {
-  opacity: 1;
-  visibility: visible;
+
+.services-menu .mega-menu-wrapper {
+  min-width: 860px;
+  max-width: 960px;
+  padding: 0.75rem;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description .brand {
-  margin-bottom: 1rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+  overflow: visible;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description .brand img {
-  height: 1.5rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
+  flex: 0 0 300px;
+  width: 300px;
+  min-width: 300px;
+  max-width: 300px;
+  display: flex !important;
+  flex-direction: column;
+  gap: 2px;
+  background: #f5faf7;
+  border-radius: 8px;
+  padding: 0.375rem;
+  overflow: hidden;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description p {
-  font-size: 0.875rem;
-  color: #515D63;
-  line-height: 160%;
-  margin-bottom: 1rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product {
+  display: flex !important;
+  flex-direction: row !important;
+  grid-template-columns: unset !important;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 6px;
+  transition: background-color 0.13s ease, border-color 0.13s ease;
+  cursor: pointer;
+  width: 100%;
+  text-decoration: none;
+  box-sizing: border-box;
 }
-.mega-menu-wrapper .mega-menu-inner .product-description .features li {
-  font-size: 0.813rem;
-  color: #171B1C;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo {
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  flex-shrink: 0;
+  background: #edf7f1;
+  border-radius: 8px;
   display: flex;
   align-items: center;
-  margin-bottom: 15px;
-}
-.mega-menu-wrapper .mega-menu-inner .product-description .features li .material-icons {
-  font-size: 1rem;
-  margin-right: 0.6rem;
+  justify-content: center;
   color: var(--ac-primary);
 }
-
-.back-button {
-  display: none !important;
-  color: #515D63;
-  margin-bottom: 10px !important;
-  background-color: transparent;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo img {
+  height: 20px;
+  width: 20px;
+  object-fit: contain;
 }
-
-.button.ac-button.inline-button {
-  border: none;
-  height: auto;
-  margin: 0;
-  padding: 0.5rem 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
-.button.ac-button.inline-button:hover {
-  background-color: transparent;
-  border: none;
-  color: var(--ac-primary);
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info h2 {
+  font-size: 15px;
+  font-weight: 600;
+  color: #171B1C;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
 }
-.button.ac-button.inline-button:hover .material-icons {
-  margin-left: 1rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-info p {
+  display: none !important;
 }
-.button.ac-button.inline-button .material-icons {
-  font-size: 1rem;
-  margin-left: 0.5rem;
-  transition: 0.3s ease-in-out;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .navigate-icon {
+  display: none !important;
 }
-
-.linkable-nav-items {
-  width: 500px;
-  float: left;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover {
+  background-color: #f0faf4;
 }
-.linkable-nav-items ul {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 0.5rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product:hover .product-info h2 {
+  color: #171B1C;
 }
-.linkable-nav-items ul li {
-  width: 250px;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-logo {
+  background: #c8ecd6;
 }
-.linkable-nav-items ul li a {
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.875rem;
-  letter-spacing: 0.009rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product.is-active .product-info h2 {
+  font-weight: 600;
   color: #171B1C;
-  font-weight: 500;
-  transition: 0.3s;
-  padding-left: 0;
-}
-.linkable-nav-items ul li a:hover {
-  color: var(--ac-primary);
 }
-.linkable-nav-items ul li a:hover span:last-child {
-  padding-left: 1rem;
+@media screen and (max-width: 1023px) {
+  .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
+    flex: unset;
+    width: 100%;
+    min-width: unset;
+    max-width: unset;
+    background: transparent;
+  }
 }
-.linkable-nav-items ul li a span {
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container {
+  flex: 1;
+  min-width: 0;
+  border-left: 1px solid #e5e7eb;
+  margin-left: 0.625rem;
+  padding-left: 0.625rem;
   display: flex;
-  align-items: center;
-  font-size: 1rem;
-}
-.linkable-nav-items ul li a span:last-child {
-  padding-left: 0.5rem;
+  flex-direction: column;
+  justify-content: flex-start;
 }
-.linkable-nav-items ul li a span img {
-  height: 1rem;
-  margin-right: 1rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content {
+  display: none;
+  flex-direction: column;
+  gap: 2px;
 }
-
-.resources-list {
-  display: grid;
-  grid-template-columns: auto auto auto auto;
-  grid-gap: 2rem;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content.is-block {
+  display: flex !important;
 }
-.resources-list .list-items h2 {
-  font-weight: 500;
-  position: relative;
-  font-size: 0.875rem;
-  z-index: 1;
-  display: inline-block;
-  letter-spacing: 1.2px;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product {
+  display: flex !important;
+  flex-direction: row !important;
+  grid-template-columns: unset !important;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 6px;
+  border-left: 3px solid transparent;
+  transition: background-color 0.13s ease;
+  cursor: pointer;
+  width: 100%;
+  text-decoration: none;
+  gap: 10px;
 }
-.resources-list .list-items ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info {
+  flex: 1;
+  min-width: 0;
 }
-.resources-list .list-items ul li a {
-  font-size: 0.875rem;
-  padding: 0.6rem 0;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 {
+  font-size: 15px;
+  font-weight: 600;
   color: #171B1C;
-  display: inline-block;
-  line-height: 1;
-  transition: 0.3s ease-in-out;
-  font-weight: 500;
-}
-.resources-list .list-items ul li a span {
-  font-size: 14px;
-}
-.resources-list .list-items ul li a:hover {
-  color: var(--ac-primary);
-  text-decoration: underline;
-}
-
-.press-wrapper .single-press {
-  margin: 0;
-  padding: 0;
-  margin-bottom: 1.5rem;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
   display: flex;
   align-items: center;
-  transition: 0.3s;
+  justify-content: space-between;
 }
-.press-wrapper .single-press:hover h6 {
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 .arrow-right {
+  opacity: 0;
+  transition: opacity 0.13s ease, transform 0.13s ease;
   color: var(--ac-primary);
-}
-.press-wrapper .single-press .calender {
-  text-align: center;
-  height: 90px;
   display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  flex-direction: column;
-  margin-right: 1rem;
-  border-radius: 4px;
-}
-.press-wrapper .single-press .calender .date {
-  width: 84px;
-  height: 45px;
-  background-color: #9dffcd;
-  font-style: normal;
-  font-weight: 500;
-  font-size: 28px;
-  line-height: 140%;
-  letter-spacing: 0.4px;
-  color: var(--ac-primary);
-  align-items: center;
-  display: flex;
-  justify-content: center;
+  flex-shrink: 0;
+  margin-left: 0.25rem;
 }
-.press-wrapper .single-press .calender .month {
-  width: 84px;
-  height: 45px;
-  background: #ccffe5;
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: 300;
-  font-size: 18px;
-  line-height: 140%;
-  letter-spacing: 0.4px;
-  color: var(--ac-primary);
-  align-items: center;
-  display: flex;
-  justify-content: center;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info h2 .arrow-right svg {
+  width: 13px;
+  height: 13px;
 }
-.press-wrapper .single-press .description {
-  max-width: 327px;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .product-info p {
+  font-size: 12px;
+  color: #6a7282;
+  margin-top: 3px;
+  line-height: 1.4;
 }
-.press-wrapper .single-press .description h6 {
-  font-size: 1rem;
-  margin-bottom: 0px;
-  letter-spacing: 0;
-  font-weight: 500;
-  display: block;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product .navigate-icon {
+  display: none !important;
 }
-.press-wrapper .single-press .description h6:after {
-  position: inherit;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover {
+  background-color: #f0faf4;
 }
-.press-wrapper .single-press .description .author {
-  font-weight: 400;
-  font-size: 0.875rem;
-  letter-spacing: 0.4px;
-  margin-bottom: 0.5rem;
-  display: block;
-  color: #1c1c1c;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 {
+  color: var(--ac-primary);
+  font-weight: 600;
 }
-.press-wrapper .single-press .description p {
-  font-size: 0.875rem;
-  color: #636363;
-  line-height: 150%;
+.services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container .product-description.offering-content a.single-product:hover .product-info h2 .arrow-right {
+  opacity: 1;
+  transform: translateX(3px);
 }
-.press-wrapper .button.inline-button {
-  margin-left: 100px !important;
+@media screen and (max-width: 1023px) {
+  .services-menu .mega-menu-wrapper .mega-menu-inner {
+    flex-direction: column;
+  }
+  .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container {
+    border-left: none;
+    border-top: 1px solid #e5e7eb;
+    margin-left: 0;
+    padding-left: 0;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    width: 100%;
+  }
 }
 
 .community-items {
@@ -21432,6 +21500,9 @@ Responsive Classes
   margin-right: 0.5rem;
   transition: 0.3s;
 }
+.community-items .community-item:last-child {
+  margin-right: 0;
+}
 .community-items .community-item:hover {
   background-color: var(--ac-primary);
   border-color: var(--ac-primary);
@@ -21439,9 +21510,6 @@ Responsive Classes
 .community-items .community-item:hover img {
   filter: brightness(10);
 }
-.community-items .community-item:last-child {
-  margin-right: 0;
-}
 
 .responsive-menu {
   background-color: var(--ac-primary);
@@ -21472,17 +21540,10 @@ Responsive Classes
   color: #999999;
   font-size: 0.9rem;
 }
-.product-version .dropdown .dropdown-menu {
-  /* ===== Scrollbar CSS ===== */
-  /* Firefox */
-}
 .product-version .dropdown .dropdown-menu * {
   scrollbar-width: auto;
   scrollbar-color: #ebebeb #fafafd;
 }
-.product-version .dropdown .dropdown-menu {
-  /* Chrome, Edge, and Safari */
-}
 .product-version .dropdown .dropdown-menu *::-webkit-scrollbar {
   width: 12px;
 }
@@ -21512,106 +21573,49 @@ Responsive Classes
   line-height: 1.2;
 }
 
-.ac-searchbar {
-  position: relative;
-  z-index: 1;
-  padding: 0 20px;
-  border-left: 1px solid #e7e7e7;
-}
-.ac-searchbar label .fa {
-  color: #171B1C;
-}
-.ac-searchbar input[type=search] {
-  border: none;
-  background-color: transparent;
-  color: #515D63;
-  font-size: 0.875rem;
-  width: 270px;
-  padding: 0.2rem 0.875rem;
-}
-.ac-searchbar input[type=search]:focus {
+.button.ac-button.inline-button {
   border: none;
-  outline: none;
-}
-.ac-searchbar input[type=search]::placeholder {
-  color: #636363;
-}
-
-.modal-backdrop.is-show {
-  width: 100%;
-  height: 100%;
-  background: #333;
-  position: fixed;
-  top: 0;
-  opacity: 0.8;
-  z-index: 9;
-}
-
-.header--fixed {
-  position: fixed;
-  z-index: 10;
-  right: 0;
-  left: 0;
-  top: 0;
-}
-.header--fixed::after {
-  position: absolute;
-  content: "";
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: #ffffff;
-  z-index: -1;
-  transition: 0.5s ease-in-out;
-}
-.header--fixed.headroom--unpinned::after {
-  transition: transform 500ms linear;
-}
-
-.headroom {
-  will-change: transform;
-  transition: transform 200ms linear;
-}
-
-.headroom--pinned {
-  transform: translateY(0px);
-  transition: transform 500ms linear;
-}
-
-.headroom--unpinned {
-  transform: translateY(-165px);
-}
-.headroom--unpinned .navbar-area.navbar-fixed {
-  transform: translateY(135px);
-}
-.headroom--unpinned .navbar-appscode-wrapper.navbar-product {
-  transform: translateY(104px);
+  height: auto;
+  margin: 0;
+  padding: 0.5rem 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
 }
-
-.navbar-burger {
-  height: 30px;
-  width: 30px;
-  border-radius: 4px;
+.button.ac-button.inline-button:hover {
+  background-color: transparent;
+  border: none;
+  color: var(--ac-primary);
 }
-.navbar-burger.is-active i.fa {
-  transform: rotate(-180deg);
-  transform-origin: 10px;
+.button.ac-button.inline-button:hover .material-icons {
+  margin-left: 1rem;
 }
-.navbar-burger span {
-  height: 1.5px;
+.button.ac-button.inline-button .material-icons {
+  font-size: 1rem;
+  margin-left: 0.5rem;
+  transition: 0.3s ease-in-out;
 }
 
-/****************************************
-Responsive Classes
-*****************************************/
 @media screen and (max-width: 1023px) {
-  .headroom--unpinned .navbar-appscode-wrapper.navbar-product {
-    padding: 0 0;
-    transform: translateY(104px);
+  .navbar-burger {
+    display: flex !important;
+    height: 36px;
+    width: 36px;
+    border-radius: 6px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
   }
-  .headroom--unpinned .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right {
-    top: 47px;
+  .navbar-burger span {
+    background-color: #171B1C;
+  }
+  .navbar-appscode.container, .navbar-appscode {
+    height: 60px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #ffffff;
   }
   .navbar-appscode.container {
     padding: 0.5rem 15px;
@@ -21629,11 +21633,15 @@ Responsive Classes
     border-right: 1px solid #e7e7e7;
   }
   .navbar-appscode .navbar-left {
-    width: 100%;
+    width: auto;
+    flex: 1;
   }
   .navbar-appscode .navbar-left .navbar-brand {
     margin: 0;
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
   .navbar-appscode .navbar-left .navbar-brand a img {
     height: 1.5rem !important;
@@ -21645,98 +21653,339 @@ Responsive Classes
     visibility: hidden;
   }
   .navbar-appscode .navbar-right {
-    position: absolute;
-    z-index: 99;
-    right: 20%;
-    opacity: 0;
-    visibility: hidden;
-    background: #fafafd;
-    width: 100%;
+    display: none;
+    position: fixed;
+    z-index: 998;
+    top: 60px;
     left: 0;
-    min-height: calc(100vh + 110px);
+    right: 0;
+    width: 100%;
+    height: calc(100vh - 60px);
     overflow-y: auto;
-    transition: 0.3s ease-in-out;
-    top: 61px;
-    padding: 15px;
-    justify-content: flex-start;
+    background: #ffffff;
+    padding: 20px 20px 48px;
     flex-direction: column;
     align-items: flex-start;
+    justify-content: flex-start;
+    border-top: 1px solid #e7e7e7;
+    gap: 0;
+  }
+}
+@media screen and (max-width: 1023px) and (max-width: 1023px) {
+  .navbar-appscode .navbar-right {
+    top: 100px;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .navbar-appscode .navbar-right.is-visible {
+    display: flex;
   }
   .navbar-appscode .navbar-right .is-flex.is-justify-content-space-between {
     flex-direction: column;
     align-items: flex-start;
+    width: 100%;
+    gap: 0;
   }
   .navbar-appscode .navbar-right .is-primary.ml-8 {
     margin-left: 0 !important;
-    margin-top: 15px;
+    margin-top: 12px;
   }
   .navbar-appscode .navbar-right .button.ac-button.is-primary {
     margin-left: 0;
     width: 100%;
+    height: 48px;
+    font-size: 15px;
   }
-  .navbar-appscode .navbar-right ul {
+  .navbar-appscode .navbar-right > .is-flex > ul,
+  .navbar-appscode .navbar-right ul.navbar-left-group {
     display: flex;
     flex-direction: column;
+    width: 100%;
+    gap: 0;
+    margin: 0;
+    padding: 0;
   }
-  .navbar-appscode .navbar-right ul li.nav-item {
-    margin: 6px 0;
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item {
+    width: 100%;
+    margin: 0;
+    border-bottom: 1px solid #f1f1f1;
   }
-  .navbar-appscode .navbar-right ul li.nav-item .link .whats-new {
-    top: -10px;
-    right: -30px;
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item:last-child,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item:last-child {
+    border-bottom: none;
   }
-  .navbar-appscode .navbar-right .community-items.ml-70 {
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link {
+    display: flex;
+    width: 100%;
+    padding: 15px 4px;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.3;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 0;
+    color: #171B1C;
+    transition: color 0.13s ease;
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link:hover,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link:hover {
+    color: var(--ac-primary);
+    background: transparent;
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .link .fa,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .link .fa {
+    font-size: 12px;
+    color: #6a7282;
+    transition: transform 0.2s ease;
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item .mega-menu-wrapper,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item .mega-menu-wrapper {
+    display: none;
+    position: static !important;
+    width: calc(100% + 40px) !important;
+    min-width: 0 !important;
+    max-width: calc(100% + 40px) !important;
+    margin-left: -20px !important;
+    margin-right: -20px !important;
+    transform: none !important;
+    left: auto !important;
+    top: auto !important;
+    padding: 8px 20px 12px !important;
+    background: #fafafa;
+    box-shadow: none;
+    border: none;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .link,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .link {
+    color: var(--ac-primary);
+    background: transparent;
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .link .fa,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .link .fa {
+    transform: rotate(-180deg);
+    color: var(--ac-primary);
+  }
+  .navbar-appscode .navbar-right > .is-flex > ul li.nav-item.is-active .mega-menu-wrapper,
+  .navbar-appscode .navbar-right ul.navbar-left-group li.nav-item.is-active .mega-menu-wrapper {
+    display: block !important;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0;
+    padding-top: 16px;
+    margin-top: 8px;
+    border-top: 1px solid #e5e7eb;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 0;
+    margin: 0;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item {
+    width: 100%;
+    margin: 0;
+    border-bottom: 1px solid #f1f1f1;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item:last-child {
+    border-bottom: none;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link {
+    display: flex;
+    width: 100%;
+    padding: 15px 4px;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.3;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 0;
+    color: #171B1C;
+    transition: color 0.13s ease;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link:hover {
+    color: var(--ac-primary);
+    background: transparent;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .link .fa {
+    font-size: 12px;
+    color: #6a7282;
+    transition: transform 0.2s ease;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item .mega-menu-wrapper {
+    display: none;
+    position: static !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
     margin-left: 0 !important;
-    margin-top: 30px;
+    margin-right: 0 !important;
+    transform: none !important;
+    left: auto !important;
+    top: auto !important;
+    padding: 8px 0 12px !important;
+    background: #fafafa;
+    box-shadow: none;
+    border: none;
+    border-top: 1px solid #e5e7eb;
+    border-bottom: 1px solid #e5e7eb;
+    border-radius: 0;
   }
-  .navbar-appscode .navbar-right.is-visible {
-    opacity: 1;
-    visibility: visible;
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .link {
+    color: var(--ac-primary);
+    background: transparent;
   }
-  .resources-list {
-    grid-template-columns: auto;
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .link .fa {
+    transform: rotate(-180deg);
+    color: var(--ac-primary);
+  }
+  .navbar-appscode .navbar-right .navbar-right-group ul li.nav-item.is-active .mega-menu-wrapper {
+    display: block !important;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group .buttons {
+    width: 100%;
+    flex-direction: column;
+    gap: 10px;
+    padding-top: 16px;
+    margin-top: 8px;
+    border-top: 1px solid #e5e7eb;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group .buttons iframe {
+    width: 100%;
+    height: 44px;
+  }
+  .navbar-appscode .navbar-right .navbar-right-group .buttons .button.ac-button {
+    width: 100%;
+    height: 44px;
+    font-size: 14px;
+  }
+  .navbar-appscode .navbar-right .community-items.ml-70 {
+    margin-left: 0 !important;
+    margin-top: 20px;
+    gap: 8px;
   }
   .mega-menu-wrapper {
-    width: 100% !important;
-    left: 0 !important;
-    top: 0 !important;
-    padding-top: 20px !important;
-    background-color: #fafafd;
-    max-height: 75vh;
-    min-height: 70vh;
-    overflow-y: auto;
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.16);
+    width: calc(100% + 40px) !important;
+    min-width: 0 !important;
+    max-width: calc(100% + 40px) !important;
+    margin-left: -20px !important;
+    margin-right: -20px !important;
+    position: static !important;
+    left: auto !important;
+    top: auto !important;
+    transform: none !important;
+    padding: 8px 20px 8px !important;
+    background-color: #ffffff;
+    box-shadow: none;
+    border: none;
+    border-top: 1px solid #e7e7e7;
+    border-bottom: 1px solid #e7e7e7;
+    border-radius: 0;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+  }
+  .mega-menu-wrapper .mega-menu-inner {
+    overflow: visible;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu {
-    grid-template-columns: auto;
+    display: flex !important;
+    flex-direction: column;
+    gap: 2px;
     width: 100%;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu .single-product {
+    display: grid !important;
+    grid-template-columns: 40px 1fr 16px !important;
     width: 100%;
+    padding: 10px 8px;
+    gap: 12px;
+    border-radius: 8px;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo {
-    height: 50px;
-    width: 50px;
+    height: 40px;
+    width: 40px;
+    border-radius: 10px;
+    background: #edf7f1 !important;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-logo img {
-    height: 1.8rem;
+    height: 24px;
+    width: 24px;
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info h2 {
+    font-size: 15px;
+    font-weight: 600;
+    color: #171B1C;
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .product-info p {
+    font-size: 12px;
+    margin-top: 2px;
+    color: #6a7282;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu .single-product .navigate-icon .icon {
-    width: 16px;
+    opacity: 0;
+    visibility: hidden;
+    width: 14px;
+    color: var(--ac-primary);
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active {
+    background-color: #f0faf4;
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .product-logo, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .product-logo {
+    background: #ffffff !important;
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu .single-product:hover .navigate-icon .icon, .mega-menu-wrapper .mega-menu-inner .product-menu .single-product.is-active .navigate-icon .icon {
+    opacity: 1;
+    visibility: visible;
   }
   .mega-menu-wrapper .mega-menu-inner .product-menu.database-list {
-    grid-template-columns: auto;
+    grid-template-columns: 1fr !important;
+  }
+  .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
+    grid-template-columns: 1fr !important;
+    width: 100%;
+    background: transparent;
+  }
+  .mega-menu-wrapper .mega-menu-inner .services-menu .mega-menu-inner,
+  .mega-menu-wrapper .mega-menu-inner .offering-description-container {
+    flex-direction: column !important;
+    width: 100% !important;
+    border-left: none !important;
+    border-top: 1px solid #e7e7e7;
+    margin-left: 0 !important;
+    padding-left: 0 !important;
+    margin-top: 8px;
+    padding-top: 8px;
   }
   .mega-menu-wrapper .mega-menu-inner .product-description {
     border-left: none;
     padding-left: 0;
-    margin-top: 35px;
-    margin-left: 0;
+    margin: 0;
     max-width: 100%;
   }
-  .press-wrapper .button.inline-button {
-    margin-left: 0 !important;
-    background-color: transparent;
+  .services-menu .mega-menu-wrapper .mega-menu-inner {
+    flex-direction: column !important;
+  }
+  .services-menu .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex: unset !important;
+    background: #f5faf7;
+    margin-bottom: 8px;
+  }
+  .services-menu .mega-menu-wrapper .mega-menu-inner .offering-description-container {
+    border-left: none !important;
+    border-top: 1px solid #e5e7eb;
+    margin: 8px 0 0 !important;
+    padding: 8px 0 0 !important;
+    width: 100%;
   }
   .navbar-appscode-wrapper.navbar-product .navbar-appscode .navbar-right {
     top: 47px;
@@ -21750,27 +21999,7 @@ Responsive Classes
   .product-version .dropdown-menu {
     z-index: 9999;
   }
-  .back-button {
-    display: flex !important;
-  }
-  .back-button span {
-    color: var(--ac-primary);
-    padding-right: 15px;
-    font-size: 18px;
-  }
-}
-.embeded-console-button {
-  height: 42px;
-  margin-bottom: 4px;
-  width: 185px;
-  overflow: hidden;
-}
-@media screen and (max-width: 768px) {
-  .embeded-console-button {
-    width: 100%;
-  }
 }
-
 @media screen and (min-width: 1024px) and (max-width: 1215px) {
   .navbar-burger {
     display: none !important;
@@ -21800,15 +22029,10 @@ Responsive Classes
   .navbar-appscode ul .nav-item {
     margin-right: 12px;
   }
-  .mega-menu-wrapper .mega-menu-inner .product-menu {
-    grid-template-columns: auto;
-    width: calc(50% - 5rem);
-  }
-  .mega-menu-wrapper .mega-menu-inner .product-description {
-    border-left: none;
-  }
-  .mega-menu-wrapper .video-content {
-    display: none;
+  .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
   }
   .product-version.ml-20 {
     margin-left: 4px !important;
@@ -21835,48 +22059,20 @@ Responsive Classes
   .navbar-appscode ul .nav-item {
     margin-right: 1.5rem;
   }
-  .mega-menu-wrapper .mega-menu-inner .product-menu {
-    grid-template-columns: auto;
-    width: calc(50% - 5rem);
-  }
-  .mega-menu-wrapper .mega-menu-inner .product-description {
-    border-left: none;
-  }
-  .mega-menu-wrapper .video-content {
-    display: none;
+  .mega-menu-wrapper .mega-menu-inner .product-menu:not(.services-grid):not(.database-list) {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
   }
 }
 @media screen and (min-width: 1408px) {
   .navbar-appscode .navbar-left .navbar-brand {
     margin-right: 3rem;
   }
-}
-.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
-  grid-template-columns: 500px;
-  width: 500px;
-  background-color: #fbfbfb;
-  border-radius: 8px;
-}
-@media screen and (max-width: 1023px) {
-  .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid {
-    grid-template-columns: auto;
-    width: 100%;
-  }
-  .mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product::after {
-    display: none;
+  .mega-menu-wrapper .mega-menu-inner .video-content {
+    display: block;
   }
 }
-.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product {
-  padding: 0.8rem 1rem;
-}
-.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo {
-  height: 48px;
-  width: 48px;
-}
-.mega-menu-wrapper .mega-menu-inner .product-menu.services-grid .single-product .product-logo img {
-  height: 1.5rem !important;
-}
-
 .ac-preloader {
   position: fixed;
   height: 100vh;
@@ -22098,7 +22294,7 @@ a.nav-link.active:after {
 }
 .button.ac-button {
   border-color: var(--ac-primary);
-  border-radius: 0.125rem;
+  border-radius: 8px;
   font-size: 0.875rem;
   font-family: "Roboto", sans-serif;
   letter-spacing: 0;
@@ -22134,7 +22330,7 @@ a.nav-link.active:after {
   background-color: #ffffff;
   color: var(--ac-primary);
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: 8px;
   width: 28px;
   height: 28px;
 }
@@ -25847,7 +26043,7 @@ Responsive Classes
 ***********************************************************************************************/
 button.ac-button,
 .button.ac-button {
-  border-radius: 4px !important;
+  border-radius: 8px !important;
   font-weight: 700 !important;
   font-size: 14px !important;
   letter-spacing: 0 !important;
@@ -28512,10 +28708,6 @@ body.partner .fserv-button-submit:hover {
 .services-menu .single-product.is-active {
   background-color: #ebf4f0 !important;
 }
-.services-menu .single-product.is-active::after {
-  opacity: 1;
-  visibility: visible;
-}
 
 .offering-description-container .product-info .arrow-right.icon {
   opacity: 0;
@@ -28816,5 +29008,3 @@ body.partner .fserv-button-submit:hover {
     letter-spacing: -0.3px;
   }
 }
-
-/*# sourceMappingURL=main.css.map */
diff --git a/static/assets/sass/pages/_homepage-2026.scss b/static/assets/sass/pages/_homepage-2026.scss
index 9f6276b91c..aa755a1e35 100644
--- a/static/assets/sass/pages/_homepage-2026.scss
+++ b/static/assets/sass/pages/_homepage-2026.scss
@@ -74,7 +74,7 @@ $color-accent-blue-soft: #f8faff; // product header background
 
 button.ac-button,
 .button.ac-button {
-  border-radius: 4px !important;
+  border-radius: 8px !important;
   font-weight: 700 !important;
   font-size: $font-size-normal !important; // 14px
   letter-spacing: 0 !important;
diff --git a/static/assets/sass/pages/_services.scss b/static/assets/sass/pages/_services.scss
index 793c692ae5..4b18eeab32 100644
--- a/static/assets/sass/pages/_services.scss
+++ b/static/assets/sass/pages/_services.scss
@@ -239,10 +239,10 @@
       // .product-logo {
       //   background-color: #f4f8f6 !important;
       // }
-      &::after {
-        opacity: 1;
-        visibility: visible;
-      }
+      // &::after {
+      //   opacity: 1;
+      //   visibility: visible;
+      // }
     }
   }
 }