diff --git a/_includes/api/en/3x/menu.md b/_includes/api/en/3x/menu.md
index 34acd41b14..f34eb4af6b 100644
--- a/_includes/api/en/3x/menu.md
+++ b/_includes/api/en/3x/menu.md
@@ -1,3 +1,4 @@
+<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
 <ul id="menu">
     <li><a href="#express">express()</a></li>
     <li id="app-api"> <a href="#application">Application</a>
@@ -159,3 +160,4 @@
         </ul>
     </li>
 </ul>
+
diff --git a/_includes/api/en/4x/menu.md b/_includes/api/en/4x/menu.md
index ff585b2905..a737e7256f 100644
--- a/_includes/api/en/4x/menu.md
+++ b/_includes/api/en/4x/menu.md
@@ -1,5 +1,5 @@
+<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
 <ul id="menu">
-
     <li id="express-api"><a href="#express">express()</a>
     <ul id="express-menu">
         <li><em>Methods</em></li>
@@ -136,7 +136,7 @@
         <ul id="res-menu">
             <li><em>Properties</em>
             </li>
-            <li><a href="#res.app">res.app      </a>
+            <li><a href="#res.app">res.app</a>
             </li>
             <li><a href="#res.headersSent">res.headersSent</a>
             </li>
@@ -205,3 +205,4 @@
         </ul>
     </li>
 </ul>
+
diff --git a/_includes/api/en/5x/menu.md b/_includes/api/en/5x/menu.md
index 27a73cc779..b7751a06cb 100644
--- a/_includes/api/en/5x/menu.md
+++ b/_includes/api/en/5x/menu.md
@@ -1,5 +1,5 @@
+<button id="menu-toggle" title="show table of content">On this page <span>&#x25BA;</span></button>
 <ul id="menu">
-
     <li id="express-api"><a href="#express">express()</a>
     <ul id="express-menu">
         <li><em>Methods</em></li>
diff --git a/_includes/blog/posts-menu.md b/_includes/blog/posts-menu.md
index 5afe3f32c7..2d909953e4 100644
--- a/_includes/blog/posts-menu.md
+++ b/_includes/blog/posts-menu.md
@@ -1,12 +1,12 @@
-<div id="blog-side-menu-container">
-  <h3>
-    <a href="/{{ page.lang }}/blog/posts">Posts</a>
-  </h3>
-  <ul id="blog-side-menu">
+<button id="menu-toggle" title="show blogs list">All Blogs <span>&#x25BA;</span></button>
+<ul id="menu" class="blog-side-menu">
+  <li>
+    <ul id="side-menu" class="active">
       {% for post in site.posts %}
     <li>
       <a href="{{post.url}}">{{ post.title }}</a>
     </li>
       {% endfor %}
   </ul>
-</div> 
+  </li>
+</ul> 
diff --git a/_includes/changelog/menu.md b/_includes/changelog/menu.md
index ae4ca191c2..b3bdb5d17b 100644
--- a/_includes/changelog/menu.md
+++ b/_includes/changelog/menu.md
@@ -1,4 +1,3 @@
-### Versions
-
 - [5.x](#5.x)
-- [4.x](#4.x)  
\ No newline at end of file
+- [4.x](#4.x)
+{: #side-menu .active}
\ No newline at end of file
diff --git a/_includes/mw-list.md b/_includes/mw-list.md
index dc30ac643b..7eae8705cc 100644
--- a/_includes/mw-list.md
+++ b/_includes/mw-list.md
@@ -15,3 +15,4 @@
 - [session](/resources/middleware/session.html)
 - [timeout](/resources/middleware/timeout.html)
 - [vhost](/resources/middleware/vhost.html)
+{: #side-menu .active}
\ No newline at end of file
diff --git a/_layouts/3x-api.html b/_layouts/3x-api.html
index cad18e63ac..df07358683 100644
--- a/_layouts/3x-api.html
+++ b/_layouts/3x-api.html
@@ -4,22 +4,23 @@
   {% include head.html %}
 
   <body>
-
-    <section class="content">
-
-      {% include header.html %}
-
-      {% include api/en/3x/menu.md %}
-
-      <div id="overlay"></div>
-
-      {{ content }}
-
-    </section>
+    {% include header.html %}
+    <div id="overlay"></div>
+
+    <div class="content">
+      <nav aria-labelledby="sidebar-heading">
+        <div class="toc-container">
+          <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
+          {% include api/en/3x/menu.md %}
+        </div>
+      </nav>
+      <main>
+        {{ content }}
+      </main>
+    </div>
 
     {% include footer.html %}
 
-
   </body>
 
 </html>
diff --git a/_layouts/4x-api.html b/_layouts/4x-api.html
index b988a717f2..c8c97619e6 100644
--- a/_layouts/4x-api.html
+++ b/_layouts/4x-api.html
@@ -4,18 +4,20 @@
   {% include head.html %}
 
   <body>
-
-    <section class="content">
-
-      {% include header.html %}
-
-      {% include api/en/4x/menu.md %}
-
-      <div id="overlay"></div>
-
-      {{ content }}
-
-    </section>
+    {% include header.html %}
+    <div id="overlay"></div>
+
+    <div class="content">
+      <nav aria-labelledby="sidebar-heading">
+        <div class="toc-container">
+          <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
+          {% include api/en/4x/menu.md %}
+        </div>
+      </nav>
+      <main>
+        {{ content }}
+      </main>
+    </div>
 
     {% include footer.html %}
 
diff --git a/_layouts/5x-api.html b/_layouts/5x-api.html
index 5a679b7340..aeb1349413 100644
--- a/_layouts/5x-api.html
+++ b/_layouts/5x-api.html
@@ -4,18 +4,20 @@
   {% include head.html %}
 
   <body>
-
-    <section class="content">
-
-      {% include header.html %}
-
-      {% include api/en/5x/menu.md %}
-
-      <div id="overlay"></div>
-
-      {{ content }}
-
-    </section>
+    {% include header.html %}
+    <div id="overlay"></div>
+
+    <div class="content">
+      <nav aria-labelledby="sidebar-heading">
+        <div class="toc-container">
+          <h3 id="sidebar-heading" class="toc-heading"><em>On this page</em></h3>
+          {% include api/en/5x/menu.md %}
+        </div>
+      </nav>
+      <main>
+        {{ content }}
+      </main>
+    </div>
 
     {% include footer.html %}
 
diff --git a/_layouts/middleware.html b/_layouts/middleware.html
index efcf8e8d63..07c9a7e66c 100644
--- a/_layouts/middleware.html
+++ b/_layouts/middleware.html
@@ -1,16 +1,23 @@
 ---
 layout: page
 ---
-<div id="mw-container">
-  <div id="mw-list">
-    {% if page.title contains 'middleware' %}
-      {% capture readme %}{% include mw-list.md %}{% endcapture %}
-    {% else %}
-      {% capture readme %}{% include util-list.md %}{% endcapture %}
-    {% endif %}
-    {{ readme | markdownify }}
+
+<nav aria-labelledby="sidebar-heading">
+  <div class="toc-container">
+    <h3 id="sidebar-heading" class="toc-heading"><em>Middlewares</em></h3>
+    <button id="menu-toggle" title="show express middlewares">Middlewares <span>&#x25BA;</span></button>
+    <ul id="menu">
+        {% if page.title contains 'middleware' %}
+          {% capture readme %}{% include mw-list.md %}{% endcapture %}
+        {% else %}
+          {% capture readme %}{% include util-list.md %}{% endcapture %}
+        {% endif %}
+        {{ readme | markdownify }}
+    </ul>
   </div>
-  <div id="middleware-content">
+</nav>
+
+<main id="page-doc">
     {% if page.module == 'mw-home' %}    
       {{content}} 
       
@@ -29,5 +36,4 @@
       <h3>ERROR: No source specified for README {{page.module}}</h3>
     {% endif %}
 
-  </div>
-</div>
+</main>
diff --git a/_layouts/page.html b/_layouts/page.html
index da0145834b..a85eb30a11 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -10,23 +10,29 @@
   <body class="non-en-doc">
   {% endif %}
 
-    <section class="page content">
+  {% include header.html %}
 
-      {% include header.html %}
+  <div id="overlay"></div>
 
-      <div id="overlay"></div>
-
-      {% if page.lang != 'en' %}
-        <div id="i18n-notice-box" class="doc-box doc-notice">
+  {% if page.lang != 'en' %}
+       <div id="i18n-notice-box" class="doc-box doc-notice">
           {% include i18n-notice.html %}
-        </div>
-      {% endif %}
-      <div id="page-doc" markdown="1">
-{{ content }}
       </div>
-    </section>
+  {% endif %}
+
+  {% if page.layout == 'middleware' %}
+    <div class="content flex-row-content">
+      {{ content }}
+    </div>
+  {% else %}
+    <div class="content">
+      <main>
+        {{ content }}
+      </main>
+    </div>
+  {% endif %}
 
-    {% include footer.html %}
+  {% include footer.html %}
 
   </body>
 
diff --git a/_layouts/post.html b/_layouts/post.html
index 06f2324fd7..0f91347120 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -3,15 +3,17 @@
   {% include head.html %}
   
   <body>
+    {% include header.html %}
+    <div id="overlay"></div>
     
-    <section class="content">
-
-      {% include header.html %}
-
-      {% include blog/posts-menu.md %}
-
-      <div id="overlay"></div>
-      <div id="blog-doc" markdown="1">
+    <div class="content flex-row-content">
+      <nav aria-labelledby="sidebar-heading">
+        <div class="toc-container">
+          <h3 id="sidebar-heading" class="toc-heading"><em>Blog posts</em></h3>
+          {% include blog/posts-menu.md %}
+        </div>
+      </nav>
+      <main id="blog-doc" markdown="1">
           {% if page.title %}
           <h1>{{page.title}}</h1>
           {% endif %} 
@@ -25,8 +27,8 @@ <h2>{{page.sub_title}}</h2>
             <div class="blog-date">{{page.date| date: "%d %b %Y" }}</div>
           </div>
         {{ content }}
-      </div>
-    </section>
+      </main>
+    </div>
 
     {% include footer.html %}
 
diff --git a/css/style.css b/css/style.css
index 7784593d47..ca3b484815 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,6 @@
 * {
   box-sizing: border-box;
-  -webkit-tap-highlight-color: var(--box-fg);
+  -webkit-tap-highlight-color: transparent;
 }
 
 body {
@@ -144,9 +144,19 @@ main.home {
 }
 
 .content {
-  margin: 153px 3% 7%;
-  max-width: 1090px;
-  padding-left: 225px;
+  margin: 153px 0 7%;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.content main {
+  padding-inline: 16px;
+  max-width: 900px;
+  margin-inline: auto;
+}
+
+.flex-row-content {
+  flex-direction: row;
 }
 
 span.block-section {
@@ -426,21 +436,21 @@ html[xmlns] .clearfix {
 
 /* doc specific */
 
-.doctable, section table {
+.doctable, table {
   margin: 1em 1em 1em 0;
   border: 1px solid var(--border);
   border-collapse: collapse;
   width: 100%;
 }
 
-.doctable td, .doctable th, section table td, section table th {
+.doctable td, .doctable th, table td, table th {
   padding: 7px;
   line-height: 120%;
   vertical-align: top;
   border: 1px solid var(--border);
 }
 
-.doctable tr th, section table tr th {
+.doctable tr th, table tr th {
   background: var(--card-bg);
   font-size: 110%;
 }
@@ -463,7 +473,7 @@ html[xmlns] .clearfix {
   padding: 16px;
   color: var(--box-fg);
   border-radius: 0 6px 6px 0;
-  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .doc-box p {
@@ -627,6 +637,12 @@ footer {
   gap: 20px;
 }
 
+/* content doc */
+
+#blog-doc {
+  padding: 0.5rem;
+  width: fit-content;
+}
 
 /* dropdown menu */
 
@@ -686,73 +702,82 @@ footer {
   display: none;
 }
 
-/* secondary menu */
+/* TOC side menu */
 
-#menu,
-#blog-side-menu-container {
-  position: fixed;
-  margin: 0;
-  padding: 0 10px 0 0;
-  top: 153px;
-  left: 30px;
-  height: 500px;
-  text-align: left;
-  font-size: 13px;
-  overflow-y: auto;
+.toc-container {
+  position: sticky;
+  top: 100px;
+  width: 270px
 }
 
-#blog-side-menu-container {
-  max-width: 210px;
+#menu {
+  min-width: 13rem;
+  padding-inline: 0.5rem;
+  font-size: 1rem;
+  overflow-y: auto;
+  max-height: 65vh;
+  padding-block-end: 0.5rem;
+  margin-block: 0;
 }
 
-#blog-side-menu-container li {
-  max-width: 100%;
-  margin-bottom: 5px;
+#menu.blog-side-menu {
+  max-width: 20rem;
+  max-height: fit-content;
 }
 
-#blog-side-menu-container > h3 > a  {
-  color: var(--fg)
-}
+#menu ul a,
+#menu > li > a {
+  display: block;
+  color: var(--menu-grey);
+  padding-inline: 0.5rem;
+  text-decoration: none;
 
-#blog-side-menu {
-  list-style: none;
-  padding: 0;
+  &:is(:hover,:active,:focus) {
+    border-radius: 0.3rem;
+    color: var(--fg);
+    outline: 1px solid var(--card-fg);
+  }
 }
 
 #menu ul a.active {
-color: var(--fg)  
+  border-radius: 0.3rem;    
+  color: var(--fg);
+  outline: 1px solid var(--card-fg); 
 }
 
 #menu em {
   font-weight: bold;
-  color: var(--card-fg);
+  color: var(--menu-em);
+  font-size: 1rem;
 }
 
 #menu li {
+  cursor: pointer;
   list-style: none;
+  margin-block-start: 0.3rem;
 }
 
-#menu ul {
+#menu ul,
+ul#side-menu  {
+  display: none;
+  opacity: 0;
   height: 0;
   overflow: hidden;
 }
 
-#menu ul.active {
+#menu ul.active,
+ul#side-menu.active {
   height: auto;
-  padding: 0;
+  padding-inline: 0.5rem;
+  display: block;
+  opacity: 1;
+  padding-block: 0.5rem;
 }
-#menu a {
-  color: var(--menu-grey);}
 
-#menu > li > a,
-#blog-side-menu > li > a {
-  color: var(--menu-grey);
+#menu > li > a {
   font-weight: bold;
-  font-size: 13px;
-}
-
-#menu ul a {
-  padding-right: 7px;
+  font-size: 1rem;
+  padding-inline-start: 1rem;
 }
 
 /* can't find this in proj*/
@@ -862,8 +887,46 @@ h2 a {
   }
 }
 
+/* toc title */
+.toc-heading {
+  display: block;
+  cursor: default;
+  padding-inline-start: 1rem;
+  & > em {
+    font-weight: bold;
+    color: var(--menu-em);
+    font-size: 1rem;
+  }
+}
+
+
+/* TOC btn */
+
+#menu-toggle {
+  cursor: pointer;
+  display: none;
+  font-size: 1rem;
+  padding: 0.5rem;
+  opacity: 0;
+  width: fit-content;
+  border: 1px solid #000;
+  border-radius: 0.3rem;
+  color: #000;
+  background-color: #fff;
+
+  &:is(:hover, :active, :focus) {
+    background-color: #ebf2f5;
+  }
+}
+
 /* responsive */
 
+@media all and (max-width: 1440px) {
+  #menu{
+    top: 75px;
+  }
+}
+
 @media all and (max-width: 1110px) {
   #boxes {
     grid-template-columns: 1fr 1fr;
@@ -896,10 +959,6 @@ h2 a {
     overflow: scroll;
   }
 
-  #api-doc section {
-    padding-left: 0;
-  }
-
   code {
     word-break: break-all;
   }
@@ -930,15 +989,6 @@ h2 a {
     font-weight: normal;
   }
 
-  #menu,
-  #blog-side-menu-container {
-    display: none;
-  }
-
-  .content {
-    padding-left: 0;
-  }
-
   #home-content {
     margin: 60px 0 0 5%;
     padding-right: 5%;
@@ -1037,6 +1087,77 @@ h2 a {
   }
 }
 
+/* TOC responsive */
+@media all and (max-width: 800px) {
+  .content {
+    margin-inline: 0.5rem;
+    margin-block-start: 100px;
+    flex-direction: column;
+  }
+  
+  #api-doc,
+  #blog-doc,
+  #page-doc {
+    padding-inline: 1rem;
+    width: 100%;
+  }
+
+  .toc-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    padding: 1rem;
+  }
+
+  #menu {
+    display: none;
+    opacity: 0;
+    max-height: 0;
+    background-color: var(--card-bg);
+    min-width: 100%;
+  }
+
+  #menu.open {
+    display: block;
+    opacity: 1;
+    max-height: 35vh;
+    padding-inline: 1rem;
+    border-left: 2px solid var(--border);
+    margin-top: 0.3rem;
+    border-bottom-right-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  .toc-container {
+    width: 100%;
+  }
+
+  #menu-toggle.show {
+    display: block;
+    opacity: 1;
+  }
+
+  #menu > li > a,
+  #menu ul a {
+    padding: 0.5rem;
+    &:is(:hover,:active,:focus) {
+      background: var(--hover-bg);
+    }
+  }
+
+  #menu li ul li > em {
+    font-size: 0.8rem;
+    padding-inline: 1rem;
+    padding-block: 0.3rem;
+    background-color: var(--hover-bg);
+    border-radius: 0.3rem;
+   }
+
+   .toc-heading{
+    display: none;
+  }
+}
+
 
 @media all and (max-width: 540px) {
   #boxes {
@@ -1054,12 +1175,6 @@ h2 a {
   }
 }
 
-@media all and (max-width: 320px) {
-
-  #install-command {
-    font-size: 12px;
-  }
-}
 
 @media print {
 
@@ -1102,33 +1217,12 @@ h2 a {
   width: 550px;
 }
 
-/* For middleware pages */
-
-#mw-container {
-  display: flex;
-  display: -webkit-flex; /* Safari */
-  width: 100%;
-}
-
-#mw-list {
-  min-width: 180px;
-  margin: 0;
-  padding: 0 10px 0 10px;
-  font-size: 13px;
-  overflow-y: auto;
- }
-
-#middleware-content {
-  margin-left: 10px;
-}
-
-#mw-list ul li {
- margin-left: -20px;
-}
-
 /* Blog page styles*/
 #blog-doc {
-  margin: 0 10px;
+  margin: 0 1rem;
+  @media all and (max-width: 800px) {
+    margin: 0;
+  }
 }
 #blog-doc:has(> h1#express-blog),
 #blog-doc:has(> h1#write-a-blog-post) {
@@ -1137,6 +1231,7 @@ h2 a {
 #blog-doc .blog-details ~ p > img {
   width: 200px;
   float: right;
+  margin: 0.5rem;
 }
 #blog-doc p {
   font-size: 1.1em;
diff --git a/css/variables.css b/css/variables.css
index 35d3565516..4763271d96 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -36,6 +36,7 @@
   /* text (api side menus h3...) */
   --menu-grey: silver;
   --link: #259dff;
+  --menu-em: #a2a0a0eb;
     /* docs related */
   --box-fg: #ffffff;
   --info-bg: #171d4f;
diff --git a/en/advanced/best-practice-performance.md b/en/advanced/best-practice-performance.md
index 123c3f7d0a..c0dfe10775 100644
--- a/en/advanced/best-practice-performance.md
+++ b/en/advanced/best-practice-performance.md
@@ -6,11 +6,8 @@ menu: advanced
 lang: en
 redirect_from: "/advanced/best-practice-performance.html"
 ---
-
 # Production best practices: performance and reliability
 
-## Overview
-
 This article discusses performance and reliability best practices for Express applications deployed to production.
 
 This topic clearly falls into the "devops" world, spanning both traditional development and operations. Accordingly, the information is divided into two parts:
@@ -312,3 +309,5 @@ With load balancing, you might have to ensure that requests that are associated
 A reverse proxy sits in front of a web app and performs supporting operations on the requests, apart from directing requests to the app. It can handle error pages, compression, caching, serving files, and load balancing among other things.
 
 Handing over tasks that do not require knowledge of application state to a reverse proxy frees up Express to perform specialized application tasks. For this reason, it is recommended to run Express behind a reverse proxy like [Nginx](https://www.nginx.org/) or [HAProxy](https://www.haproxy.org/) in production.
+
+Handing over tasks that do not require knowledge of application state to a reverse proxy frees up Express to perform specialized application tasks. For this reason, it is recommended to run Express behind a reverse proxy like [Nginx](https://www.nginx.com/) or [HAProxy](http://www.haproxy.org/) in production.
diff --git a/en/advanced/best-practice-security.md b/en/advanced/best-practice-security.md
index 03635895b7..cdd1e907e5 100644
--- a/en/advanced/best-practice-security.md
+++ b/en/advanced/best-practice-security.md
@@ -21,19 +21,21 @@ Development and production environments are usually set up differently and have
 
 Security best practices for Express applications in production include:
 
-- [Don’t use deprecated or vulnerable versions of Express](#dont-use-deprecated-or-vulnerable-versions-of-express)
-- [Use TLS](#use-tls)
-- [Do not trust user input](#do-not-trust-user-input)
-  - [Prevent open redirects](#prevent-open-redirects)
-- [Use Helmet](#use-helmet)
-- [Reduce fingerprinting](#reduce-fingerprinting)
-- [Use cookies securely](#use-cookies-securely)
-  - [Don't use the default session cookie name](#dont-use-the-default-session-cookie-name)
-  - [Set cookie security options](#set-cookie-security-options)
-- [Prevent brute-force attacks against authorization](#prevent-brute-force-attacks-against-authorization)
-- [Ensure your dependencies are secure](#ensure-your-dependencies-are-secure)
-  - [Avoid other known vulnerabilities](#avoid-other-known-vulnerabilities)
-- [Additional considerations](#additional-considerations)
+- [Production Best Practices: Security](#production-best-practices-security)
+  - [Overview](#overview)
+  - [Don't use deprecated or vulnerable versions of Express](#dont-use-deprecated-or-vulnerable-versions-of-express)
+  - [Use TLS](#use-tls)
+  - [Do not trust user input](#do-not-trust-user-input)
+    - [Prevent open redirects](#prevent-open-redirects)
+  - [Use Helmet](#use-helmet)
+  - [Reduce fingerprinting](#reduce-fingerprinting)
+  - [Use cookies securely](#use-cookies-securely)
+    - [Don't use the default session cookie name](#dont-use-the-default-session-cookie-name)
+    - [Set cookie security options](#set-cookie-security-options)
+  - [Prevent brute-force attacks against authorization](#prevent-brute-force-attacks-against-authorization)
+  - [Ensure your dependencies are secure](#ensure-your-dependencies-are-secure)
+    - [Avoid other known vulnerabilities](#avoid-other-known-vulnerabilities)
+  - [Additional considerations](#additional-considerations)
 
 ## Don't use deprecated or vulnerable versions of Express
 
@@ -266,4 +268,4 @@ Here are some further recommendations from the excellent [Node.js Security Check
 * Use the [nmap](https://nmap.org/) and [sslyze](https://github.com/nabla-c0d3/sslyze) tools to test the configuration of your SSL ciphers, keys, and renegotiation as well as the validity of your certificate.
 * Use [safe-regex](https://www.npmjs.com/package/safe-regex) to ensure your regular expressions are not susceptible to [regular expression denial of service](https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS) attacks.
 
-[helmet]: https://helmetjs.github.io/
+[helmet]: https://helmetjs.github.io/
\ No newline at end of file
diff --git a/en/advanced/developing-template-engines.md b/en/advanced/developing-template-engines.md
index 1ce4abee5b..0f45396586 100755
--- a/en/advanced/developing-template-engines.md
+++ b/en/advanced/developing-template-engines.md
@@ -42,4 +42,4 @@ app.get('/', (req, res) => {
   res.render('index', { title: 'Hey', message: 'Hello there!' })
 })
 ```
-When you make a request to the home page, `index.ntl` will be rendered as HTML.
+When you make a request to the home page, `index.ntl` will be rendered as HTML.
\ No newline at end of file
diff --git a/en/advanced/healthcheck-graceful-shutdown.md b/en/advanced/healthcheck-graceful-shutdown.md
index f84ee9b8c0..ddecc4c5fe 100644
--- a/en/advanced/healthcheck-graceful-shutdown.md
+++ b/en/advanced/healthcheck-graceful-shutdown.md
@@ -31,4 +31,4 @@ process.on('SIGTERM', () => {
 A load balancer uses health checks to determine if an application instance is healthy and can accept requests. For example, [Kubernetes has two health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-probes/):
 
 * `liveness`, that determines when to restart a container.
-* `readiness`, that determines when a container is ready to start accepting traffic. When a pod is not ready, it is removed from the service load balancers.
+* `readiness`, that determines when a container is ready to start accepting traffic. When a pod is not ready, it is removed from the service load balancers.
\ No newline at end of file
diff --git a/en/advanced/security-updates.md b/en/advanced/security-updates.md
index 396b7e7055..7f30ae36af 100755
--- a/en/advanced/security-updates.md
+++ b/en/advanced/security-updates.md
@@ -6,6 +6,7 @@ menu: advanced
 lang: en
 redirect_from: "/advanced/security-updates.html"
 ---
+
 # Security updates
 
 <div class="doc-box doc-notice" markdown="1">
@@ -64,4 +65,4 @@ The list below enumerates the Express vulnerabilities that were fixed in the spe
     * Sparse arrays that have extremely high indexes in query string could cause the process to run out of memory and crash the server.
     * Extremely nested query string objects could cause the process to block and make the server unresponsive temporarily.
   * 3.3.0
-    * The 404 response of an unsupported method override attempt was susceptible to cross-site scripting attacks.
+    * The 404 response of an unsupported method override attempt was susceptible to cross-site scripting attacks.
\ No newline at end of file
diff --git a/en/changelog/index.md b/en/changelog/index.md
index 8256e0adc6..5481176b82 100644
--- a/en/changelog/index.md
+++ b/en/changelog/index.md
@@ -8,15 +8,20 @@ redirect_from:
   - "en/changelog/4x.html"
 ---
 
-<div id="mw-container">
-
-<div markdown="1" id="mw-list">
-
-{% include changelog/menu.md %}
-
-</div>
-
-<div markdown="1" id="mw-content">
+<nav aria-label="sidebar-heading">
+  <div class="toc-container">
+    <h3 id="sidebar-heading" class="toc-heading"><em>Versions</em></h3>
+    <button id="menu-toggle" title="show express versions">Versions <span>&#x25BA;</span></button>
+    <ul id="menu">
+      {% capture readme %}{% include changelog/menu.md %}{% endcapture %}
+      <li>
+        {{ readme | markdownify }}
+      </li>
+    </ul>
+  </div>
+</nav>
+
+<div markdown="1" id="page-doc">
 
 # Release changelog
 
@@ -562,5 +567,3 @@ The 4.14.0 minor release includes bug fixes, security update, performance improv
 For a complete list of changes in this release, see [History.md](https://github.com/expressjs/express/blob/master/History.md#4140--2016-06-16).
 
 </div>
-
-</div>
\ No newline at end of file
diff --git a/en/guide/behind-proxies.md b/en/guide/behind-proxies.md
index 8e0a13f3e0..40229a9a1d 100755
--- a/en/guide/behind-proxies.md
+++ b/en/guide/behind-proxies.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/behind-proxies.html"
 ---
+
 # Express behind proxies
 
 When running an Express app behind a reverse proxy, some of the Express APIs may return different values than expected. In order to adjust for this, the `trust proxy` application setting may be used to expose information provided by the reverse proxy in the Express APIs. The most common issue is express APIs that expose the client's IP address may instead show an internal IP address of the reverse proxy.
diff --git a/en/guide/database-integration.md b/en/guide/database-integration.md
index 1eb7c1c63f..5247fc67c2 100644
--- a/en/guide/database-integration.md
+++ b/en/guide/database-integration.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/database-integration.html"
 ---
+
 # Database integration
 
 Adding the capability to connect databases to Express apps is just a matter of loading an appropriate Node.js driver for the database in your app. This document briefly explains how to add and use some of the most popular Node.js modules for database systems in your Express app:
diff --git a/en/guide/debugging.md b/en/guide/debugging.md
index b858d82d19..16aa1dc35b 100755
--- a/en/guide/debugging.md
+++ b/en/guide/debugging.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/debugging.html"
 ---
+
 # Debugging Express
 
 To see all the internal logs used in Express, set the `DEBUG` environment variable to
@@ -122,4 +123,3 @@ converted into an Options object that gets used with `%o`/`%O` formatters.
 See the Node.js documentation for
 [`util.inspect()`](https://nodejs.org/api/util.html#util_util_inspect_object_options)
 for the complete list." %}
-
diff --git a/en/guide/error-handling.md b/en/guide/error-handling.md
index dd8bc9f888..fdec652fa9 100755
--- a/en/guide/error-handling.md
+++ b/en/guide/error-handling.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/error-handling.html"
 ---
+
 # Error Handling
 
 _Error Handling_ refers to how Express catches and processes errors that
diff --git a/en/guide/migrating-4.md b/en/guide/migrating-4.md
index 69f2af792c..510805c491 100755
--- a/en/guide/migrating-4.md
+++ b/en/guide/migrating-4.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/migrating-4.html"
 ---
+
 # Moving to Express 4
 
 <h2 id="overview">Overview</h2>
diff --git a/en/guide/migrating-5.md b/en/guide/migrating-5.md
index 58ecf89a63..7b2d5ee2ca 100755
--- a/en/guide/migrating-5.md
+++ b/en/guide/migrating-5.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/migrating-5.html"
 ---
+
 # Moving to Express 5
 
 <h2 id="overview">Overview</h2>
diff --git a/en/guide/overriding-express-api.md b/en/guide/overriding-express-api.md
index b2e164c5f4..0ff0e90f4f 100644
--- a/en/guide/overriding-express-api.md
+++ b/en/guide/overriding-express-api.md
@@ -5,7 +5,6 @@ description: Discover how to customize and extend the Express.js API by overridi
 menu: guide
 lang: en
 ---
-<div id="page-doc" markdown="1">
 
 # Overriding the Express API
 
@@ -72,4 +71,3 @@ Unless necessary, it is recommended that this be done only at the application le
 Object.setPrototypeOf(Object.getPrototypeOf(app.request), FakeRequest.prototype)
 Object.setPrototypeOf(Object.getPrototypeOf(app.response), FakeResponse.prototype)
 ```
-</div>
diff --git a/en/guide/using-middleware.md b/en/guide/using-middleware.md
index c5ed5a221d..fdf8ecc1e0 100644
--- a/en/guide/using-middleware.md
+++ b/en/guide/using-middleware.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/using-middleware.html"
 ---
+
 # Using middleware
 
 Express is a routing and middleware web framework that has minimal functionality of its own: An Express application is essentially a series of middleware function calls.
diff --git a/en/guide/using-template-engines.md b/en/guide/using-template-engines.md
index e92cd0bca6..ba9c17e807 100755
--- a/en/guide/using-template-engines.md
+++ b/en/guide/using-template-engines.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/using-template-engines.html"
 ---
+
 # Using template engines with Express
 
 A _template engine_ enables you to use static template files in your application. At runtime, the template engine replaces
@@ -63,4 +64,3 @@ app.get('/', (req, res) => {
 When you make a request to the home page, the `index.pug` file will be rendered as HTML.
 
 The view engine cache does not cache the contents of the template's output, only the underlying template itself. The view is still re-rendered with every request even when the cache is on.
-
diff --git a/en/guide/writing-middleware.md b/en/guide/writing-middleware.md
index 09bd4f0a76..61df8c660b 100755
--- a/en/guide/writing-middleware.md
+++ b/en/guide/writing-middleware.md
@@ -6,6 +6,7 @@ menu: guide
 lang: en
 redirect_from: "/guide/writing-middleware.html"
 ---
+
 # Writing middleware for use in Express apps
 
 <h2>Overview</h2>
diff --git a/en/resources/community.md b/en/resources/community.md
index 072ea91ee7..3e6eceb3ab 100755
--- a/en/resources/community.md
+++ b/en/resources/community.md
@@ -91,4 +91,5 @@ Express is a project of the OpenJS Foundation. Please review the [trademark poli
             <img src="/images/brand/logo-dark.svg"  alt="Express.js mark" width="96.5" height="56"/>
         </a>
     </div>
-<div>
\ No newline at end of file
+<div>
+</div>
\ No newline at end of file
diff --git a/en/starter/basic-routing.md b/en/starter/basic-routing.md
index e0256c8f4e..aa17aba7fc 100755
--- a/en/starter/basic-routing.md
+++ b/en/starter/basic-routing.md
@@ -66,4 +66,4 @@ app.delete('/user', (req, res) => {
 
 For more details about routing, see the [routing guide](/{{ page.lang }}/guide/routing.html).
 
-###  [Previous: Express application generator ](/{{ page.lang }}/starter/generator.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Serving static files in Express ](/{{ page.lang }}/starter/static-files.html)
+###  [Previous: Express application generator ](/{{ page.lang }}/starter/generator.html)&nbsp;&nbsp;&nbsp;&nbsp;[Next: Serving static files in Express ](/{{ page.lang }}/starter/static-files.html)
\ No newline at end of file
diff --git a/en/starter/installing.md b/en/starter/installing.md
index d93d3d64cf..32be3cd236 100755
--- a/en/starter/installing.md
+++ b/en/starter/installing.md
@@ -51,4 +51,4 @@ $ npm install express --no-save
 By default with version npm 5.0+, `npm install` adds the module to the `dependencies` list in the `package.json` file; with earlier versions of npm, you must specify the `--save` option explicitly. Then, afterwards, running `npm install` in the app directory will automatically install modules in the dependencies list.
 </div>
 
-###  [Next: Hello World ](/{{ page.lang }}/starter/hello-world.html)
+###  [Next: Hello World ](/{{ page.lang }}/starter/hello-world.html)
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index 204b93e076..c2558c42f5 100644
--- a/js/app.js
+++ b/js/app.js
@@ -56,12 +56,6 @@ $(function(){
     }  
   }
 
-  $(window).bind('load resize', function() {
-
-    $('#menu').css('height', ($(this).height() - 150) + 'px');
-
-  });
-
   $(document).scroll(function() {
     var h = closest();
     if (!h) return;
diff --git a/js/menu.js b/js/menu.js
index 4156a2c263..a2d7f9b969 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -1,6 +1,8 @@
 // It uses `window.matchMedia` instead of `window.addEventListener('resize')` because `matchMedia` performs better by not changing its value with every screen resize.
 const mobileScreen = window.matchMedia("(max-width: 1110px)");
 let isSmallScreen = mobileScreen?.matches;
+const tocScreen = window.matchMedia("(max-width: 800px)");
+let isTocScreen = tocScreen.matches;
 
 mobileScreen?.addEventListener("change", (event) => {
 	isSmallScreen = event.matches
@@ -69,6 +71,7 @@ const overlay = document.querySelector("#overlay");
 const navButton = document.querySelector("#nav-button");
 const languagePickerButton = document.querySelector("#language-picker-button");
 
+
 for (const el of linkItemsMenu) {
 	el.addEventListener("click", (e) => {
 		if (el.classList.contains("open")) {
@@ -98,7 +101,6 @@ for (const el of languageItems) {
 
 navButton?.addEventListener("click", () => {
 	const isLanguageMenuOpen = languagePickerMenu?.classList.contains("opens");
-
 	if (isLanguageMenuOpen) {
 		languagePickerMenu?.classList.remove("opens");
 		menu?.classList.toggle("opens");
@@ -111,7 +113,6 @@ navButton?.addEventListener("click", () => {
 
 languagePickerButton?.addEventListener("click", () => {
 	const isMenuOpen = menu?.classList.contains("opens");
-
 	if (isMenuOpen) {
 		menu?.classList.remove("opens");
 		languagePickerMenu?.classList.toggle("opens");
@@ -147,3 +148,59 @@ function removeActiveFromDrawers(navDrawers) {
 function addActiveToDrawer(drawer) {
 	drawer.querySelector('a').classList.add('active')
 }
+
+// TOC 
+const toggleBtn = document.getElementById("menu-toggle");
+const tocList = document.getElementById("menu");
+
+function updateTocVisibility() {
+	if (isTocScreen) {
+	  toggleBtn?.classList.add("show");
+	} else {
+	  toggleBtn?.classList.remove("show");
+	}
+  }
+
+// toc button on page load
+updateTocVisibility();
+
+// Listen for changes in screen size
+tocScreen.addEventListener("change", (event) => {
+  isTocScreen = event.matches;
+  updateTocVisibility();
+});
+
+// Toggle toc menu on button click
+toggleBtn?.addEventListener("click", (e) => {
+  if(tocList?.classList.contains("open")) {
+	toggleBtn.children[0].innerHTML = "&#x25BA;";
+	tocList.classList.remove("open");
+  } else {
+	toggleBtn.children[0].innerHTML = "&#x25BC;";
+	tocList.classList.add("open");
+  }
+});
+  
+// Open/Close sub TOC content on click
+document.querySelectorAll("#menu > li > a").forEach((link) => {
+	link.addEventListener("click", function (event) {
+	  event.preventDefault(); // stop navigation to submenu
+  
+	  // Find the closest parent <li>
+	  const closestLiParent = link.closest("li");
+	  const childUlSubMenu = closestLiParent.children[1];
+  
+	  // If submenu is already active, remove "active" class (toggle behavior)
+	  if (childUlSubMenu?.classList.contains("active")) {
+		childUlSubMenu.classList.remove("active");
+	  } else {
+		// Remove "active" from all other submenus
+		document.querySelectorAll("#menu > li > ul").forEach((subMenu) => {
+		  subMenu.classList.remove("active");
+		});
+  
+		// Add "active" to the clicked submenu
+		childUlSubMenu?.classList.add("active");
+	  }
+	});
+  });
