diff --git a/docs/guide/overview/what-is-nightwatch.md b/docs/guide/overview/what-is-nightwatch.md
index 4bb18f8..6a2c6a0 100644
--- a/docs/guide/overview/what-is-nightwatch.md
+++ b/docs/guide/overview/what-is-nightwatch.md
@@ -46,8 +46,8 @@ Nightwatch also can be integrated with cloud-based testing platforms like [Brows
 ### Supported browsers
 
 WebDriver is implemented by all major browser vendors as a W3C compliant HTTP service.
-
-<table class="table table-bordered table-striped">
+<div style="overflow-x:auto">
+<table class="table table-bordered table-striped w-100">
 <thead>
  <tr>
    <th style="width: 200px;">Browser Driver</th>
@@ -84,6 +84,7 @@ WebDriver is implemented by all major browser vendors as a W3C compliant HTTP se
 
  </tbody>
 </table>
+</div>
 
 [1]:    https://nodejs.org/
 [2]:    https://www.w3.org/TR/webdriver/
diff --git a/public/css/mobile.css b/public/css/mobile.css
index ce5a925..688d6a8 100644
--- a/public/css/mobile.css
+++ b/public/css/mobile.css
@@ -290,4 +290,4 @@
     width: auto;
   }
 
-}
+}
\ No newline at end of file
diff --git a/public/css/sidebar.css b/public/css/sidebar.css
index 9dbf8c7..0d3240e 100644
--- a/public/css/sidebar.css
+++ b/public/css/sidebar.css
@@ -74,7 +74,7 @@
 }
 
 .bs-sidebar .nav {
-  display: block;
+  display: block !important;
 }
 
 .doc-sidebar {
@@ -87,7 +87,7 @@
   display: none;
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 992px) {
   .doc-sidebar {
     border: none;
     background: #f5f5f5;
diff --git a/public/css/style.css b/public/css/style.css
index 52c33b5..490006f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1272,16 +1272,16 @@ html {
 
 #doc-sidebar-nav {
   max-height: 100vh;
-  /* overflow-y: scroll; */
+  overflow-y: scroll;
 }
 
-@media only screen and (min-width: 768px) {
+@media only screen and (min-width: 992px) {
   #doc-sidebar-nav {
-    display: block !important;
+    display: block !important; /* Show sidebar as block */
   }
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 991px) {
   #doc-sidebar-nav {
     position: fixed;
     top: 79px;
@@ -1291,7 +1291,9 @@ html {
     width: 280px;
     border-left: 1px solid #E1E6EE;
     padding: 30px 15px 10px;
+    height: 100%;
     max-height: calc(100vh - 79px);
+    overflow-y: auto;
   }
 
   #doc-sidebar-nav .nav.bs-sidenav li .btn {
@@ -3370,3 +3372,8 @@ p.bottom-text {
 }
 
 /* Footer section end */
+
+/* added word break for links below full changelog heading*/
+.list-group-item p:nth-last-of-type(2) {
+  word-break: break-word !important;
+}
diff --git a/src/includes/footer.ejs b/src/includes/footer.ejs
index 5535d02..b8572f6 100644
--- a/src/includes/footer.ejs
+++ b/src/includes/footer.ejs
@@ -1,8 +1,8 @@
 <!-- Footer section start -->
 <footer class="footer-landing" aria-label="Footer">
-  <div class="footer__wrapper">
-    <div class="footer__wrapper-inner">
-      <nav class="footer__wrapper-inner-menu" aria-label="Footer menu">
+  <div class="footer__wrapper container">
+    <div class="row justify-content-lg-between">
+      <nav class="footer__wrapper-inner-menu col-xl-8 pb-4 mb-lg-auto" aria-label="Footer menu">
         <ul>
           <li>
             <span class="footer__wrapper-inner-menu-separator">Features</span>
@@ -46,8 +46,8 @@
           </li>
         </ul>
       </nav>
-      <div class="footer__wrapper-inner-social">
-        <div class="footer__wrapper-inner-social-logo">
+      <div class="footer__wrapper-inner-social d-flex flex-column justify-content-center align-items-center col-xl-4">
+        <div class="footer__wrapper-inner-social-logo d-flex justify-content-center align-items-center">
           <svg role="img" viewBox="0 0 279 63" fill="none" xmlns="http://www.w3.org/2000/svg">
             <title>Nightwatch.js logo</title>
             <path
@@ -149,16 +149,15 @@
               fill="black" />
           </svg>
         </div>
-        <div class="footer__wrapper-inner-social-subscribe">
-          <h3 class="footer__wrapper-inner-social-subscribe-title">Subscribe to our newsletter</h3>
+        <div class="footer__wrapper-inner-social-subscribe d-flex flex-column justify-content-center align-items-center">
+          <h3 class="footer__wrapper-inner-social-subscribe-title mb-0 pb-1">Subscribe to our newsletter</h3>
           <iframe
                   frameborder="0"
                   scrolling="no"
                   title="nightwatch-substack"
                   src="https://nightwatch.substack.com/embed"
                   loading="lazy"
-                  height="160px"
-                  style="position: relative;left: -11px;top: -20px;"></iframe>
+                  ></iframe>
         </div>
         <div class="footer__wrapper-inner-social-links">
           <a href="https://github.com/nightwatchjs/nightwatch" target="_blank">
diff --git a/src/includes/guide-sidebar.ejs b/src/includes/guide-sidebar.ejs
index 60b151b..211aad5 100644
--- a/src/includes/guide-sidebar.ejs
+++ b/src/includes/guide-sidebar.ejs
@@ -262,7 +262,7 @@ const navItems = [
 %>
 
 <div class="clearfix">
-    <button class="btn btn-link d-md-none collapsed" type="button" data-bs-toggle="collapse"
+    <button class="btn btn-link d-lg-none collapsed" type="button" data-bs-toggle="collapse"
             data-bs-target="#doc-sidebar-nav" aria-controls="doc-sidebar-nav" aria-expanded="false"
             aria-label="Toggle docs navigation">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-border-width"
@@ -315,38 +315,65 @@ const navItems = [
 </nav>
 
 <script type="module">
-  import {onRender, onLeave} from 'postdoc/page';
+    import {onRender, onLeave} from 'postdoc/page';
+
+    onRender((url) => {
+    // Log the URL and activeLink for debugging
+    console.log('Current URL:', url.pathname);
 
-  onRender((url) => {
     const activeLink = document.querySelector(`.nav .btn-toggle-nav a[href$="${url.pathname}"]`);
+    console.log('Active link:', activeLink); // Log the active link to see if it's found
 
+    // Log all collapses
     document.querySelectorAll('.nav .collapse.show').forEach(function(collapse) {
-      collapse.classList.remove('show');
+        console.log('Collapsing:', collapse); // Log each collapse being closed
+
+        collapse.classList.remove('show');
 
-      const button = collapse.previousElementSibling;
-      if (button) {
+        const button = collapse.previousElementSibling;
+        if (button) {
         button.classList.add('collapsed');
         button.setAttribute('aria-expanded', 'false');
-      }
+        console.log('Button collapsed:', button); // Log the button being collapsed
+        }
     });
 
-
     if (activeLink) {
-      activeLink.classList.add('active');
+        activeLink.classList.add('active');
+        console.log('Active link marked as active:', activeLink); // Log when active link is marked
+
+        let parentElement = activeLink.parentElement;
+        while (parentElement) {
+        console.log('Parent element:', parentElement); // Log each parent element
 
-      let parentElement = activeLink.parentElement;
-      while (parentElement) {
         if (parentElement.matches('.collapse')) {
-          parentElement.classList.add('show');
-          const parentButton = parentElement.previousElementSibling;
-          if (parentButton && parentButton.matches('button')) {
+            parentElement.classList.add('show');
+            const parentButton = parentElement.previousElementSibling;
+            if (parentButton && parentButton.matches('button')) {
             parentButton.classList.remove('collapsed');
             parentButton.setAttribute('aria-expanded', 'true');
-          }
+            console.log('Parent button expanded:', parentButton); // Log the parent button being expanded
+            }
         }
         parentElement = parentElement.parentElement; // Move up to the next parent element
-      }
+        }
     }
-  }, {forPage: /(\/guide\/)/});
+    }, {forPage: /(\/guide\/)/});
+
+
+</script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+  console.log('DOM content loaded');  // This ensures the DOM is fully loaded
 
+  const sidebar = document.querySelector('#doc-sidebar-nav');
+  console.log('Sidebar found:', sidebar);  // Logs if sidebar is found
+  
+  if (sidebar) {
+    sidebar.classList.remove('show');
+    console.log('Sidebar hidden');  // Confirm sidebar is hidden
+  } else {
+    console.log('Sidebar element not found');  // This will log if the sidebar is not in the DOM
+  }
+});
 </script>
\ No newline at end of file
diff --git a/src/includes/navbar.ejs b/src/includes/navbar.ejs
index 0d92589..bd8955d 100644
--- a/src/includes/navbar.ejs
+++ b/src/includes/navbar.ejs
@@ -190,3 +190,34 @@
       </ul>
     </div>
   </nav>
+
+  <script>
+    document.getElementById("mobileMenuToggle").addEventListener("click", function() {
+        var mobileNav = document.querySelector(".mobile-navbar-content");
+        if (mobileNav.style.display === "none" || mobileNav.style.display === "") {
+            mobileNav.style.display = "block";  // Show the nav
+        } else {
+            mobileNav.style.display = "none";  // Hide the nav
+        }
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      // Check if the screen width is 991px or less
+      if (window.innerWidth <= 991) {
+        // Select the navbar and doc-sidebar elements
+        var navbar = document.querySelector('.navigation');
+        var doc_sidebar = document.querySelector('.doc-sidebar');
+        var doc_sidebar_nav = document.querySelector('#doc-sidebar-nav');
+
+        // Check if both elements exist before accessing their properties
+        if (navbar && doc_sidebar) {
+          // Adjust the top position of the doc-sidebar based on the navbar's height
+          doc_sidebar.style.top = navbar.clientHeight + 'px';
+          doc_sidebar_nav.style.top = navbar.clientHeight + 'px';
+          doc_sidebar_nav.style.maxHeight=(window.innerHeight -navbar.clientHeight) + 'px';
+          doc_sidebar_nav.style.height=(window.innerHeight -navbar.clientHeight) + 'px';
+        }
+      }
+    });
+
+</script>
diff --git a/src/pages/guide/index.ejs b/src/pages/guide/index.ejs
index f5e204f..2019d2c 100644
--- a/src/pages/guide/index.ejs
+++ b/src/pages/guide/index.ejs
@@ -60,13 +60,13 @@ const data = {
     <div class="doc-container full-width top-border background">
         <div class="clearfix">
             <div class="row flex-xl-nowrap no-gutters">
-                <div class="col-md-3 col-xl-2 doc-sidebar bs-sidebar hidden-print" role="complementary">
+                <div class="col-lg-3 col-xl-2 doc-sidebar bs-sidebar hidden-print" role="complementary">
                     <%- guideSidebar() %>
                 </div>
 
-                <div class="col-md-9 col-xl-8 doc-main-body" role="main">
-                    <div class="docs-section" data-page-uri="<%- page.url %>">
-                        <div class="page-content"><%- pageContent %></div>
+                <div class="col-lg-9 col-xl-8 doc-main-body" role="main">
+                    <div class="docs-section w-100" data-page-uri="<%- page.url %>">
+                        <div class="page-content w-100"><%- pageContent %></div>
                     </div>
                 </div>
 
@@ -89,4 +89,4 @@ const data = {
 <%- include("footer", data) %>
 <%- include("scripts") %>
 </body>
-</html>
+</html>
\ No newline at end of file