diff --git a/src/html/components/docs/browser-support/index.md b/src/html/components/docs/browser-support.mdx
similarity index 100%
rename from src/html/components/docs/browser-support/index.md
rename to src/html/components/docs/browser-support.mdx
diff --git a/src/html/components/docs/color-mode/navbar-html.md b/src/html/components/docs/color-mode.mdx
similarity index 57%
rename from src/html/components/docs/color-mode/navbar-html.md
rename to src/html/components/docs/color-mode.mdx
index 7c88e8205..e9e87f685 100644
--- a/src/html/components/docs/color-mode/navbar-html.md
+++ b/src/html/components/docs/color-mode.mdx
@@ -77,4 +77,53 @@
     </ul>
   </div>
 </nav>
-```
\ No newline at end of file
+```
+
+```js
+// Color Mode Toggler
+(() => {
+  'use strict'
+  const storedTheme = localStorage.getItem('theme')
+  const getPreferredTheme = () => {
+    if (storedTheme) {
+      return storedTheme
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+  const setTheme = function (theme) {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+  setTheme(getPreferredTheme())
+  const showActiveTheme = theme => {
+    const activeThemeIcon = document.querySelector('.theme-icon-active i')
+    const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
+    const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+    })
+    btnToActive.classList.add('active')
+    activeThemeIcon.setAttribute('class', svgOfActiveBtn)
+  }
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          localStorage.setItem('theme', theme)
+          setTheme(theme)
+          showActiveTheme(theme)
+        })
+      })
+  })
+})()
+```
diff --git a/src/html/components/docs/color-mode/toggle-script.md b/src/html/components/docs/color-mode/toggle-script.md
deleted file mode 100644
index 52892aae4..000000000
--- a/src/html/components/docs/color-mode/toggle-script.md
+++ /dev/null
@@ -1,48 +0,0 @@
-```js
-// Color Mode Toggler
-(() => {
-  'use strict'
-  const storedTheme = localStorage.getItem('theme')
-  const getPreferredTheme = () => {
-    if (storedTheme) {
-      return storedTheme
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  }
-  const setTheme = function (theme) {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
-    }
-  }
-  setTheme(getPreferredTheme())
-  const showActiveTheme = theme => {
-    const activeThemeIcon = document.querySelector('.theme-icon-active i')
-    const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
-    const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      element.classList.remove('active')
-    })
-    btnToActive.classList.add('active')
-    activeThemeIcon.setAttribute('class', svgOfActiveBtn)
-  }
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-    if (storedTheme !== 'light' || storedTheme !== 'dark') {
-      setTheme(getPreferredTheme())
-    }
-  })
-  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
-      })
-  })
-})()
-```
\ No newline at end of file
diff --git a/src/html/components/docs/components/main-header-1.md b/src/html/components/docs/components/main-header.mdx
similarity index 100%
rename from src/html/components/docs/components/main-header-1.md
rename to src/html/components/docs/components/main-header.mdx
diff --git a/src/html/components/docs/introduction/index.md b/src/html/components/docs/introduction.mdx
similarity index 100%
rename from src/html/components/docs/introduction/index.md
rename to src/html/components/docs/introduction.mdx
diff --git a/src/html/pages/docs/browser-support.astro b/src/html/pages/docs/browser-support.astro
index fe3629389..fda65ce9b 100644
--- a/src/html/pages/docs/browser-support.astro
+++ b/src/html/pages/docs/browser-support.astro
@@ -2,7 +2,7 @@
 import Head from "@components/_head.astro";
 import Footer from "@components/dashboard/_footer.astro";
 import Topbar from "@components/dashboard/_topbar.astro";
-import BrowserSupport from "@components/docs/browser-support/index.md";
+import BrowserSupport from "@components/docs/browser-support.mdx";
 import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 const title = "Browser Support | AdminLTE 4";
diff --git a/src/html/pages/docs/color-mode.astro b/src/html/pages/docs/color-mode.astro
index fa8d4cdc9..3565ff786 100644
--- a/src/html/pages/docs/color-mode.astro
+++ b/src/html/pages/docs/color-mode.astro
@@ -4,8 +4,7 @@ import Footer from "@components/dashboard/_footer.astro";
 import Topbar from "@components/dashboard/_topbar.astro";
 import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
-import NavbarHtml from "@components/docs/color-mode/navbar-html.md";
-import ToggleScript from "@components/docs/color-mode/toggle-script.md";
+import ColorMode from "@components/docs/color-mode.mdx";
 const title = "Color Mode | AdminLTE 4";
 const path = '../../../dist'
 const mainPage = "docs";
@@ -33,7 +32,7 @@ const page = "color-mode";
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Docs</a></li>
                   <li class="breadcrumb-item active" aria-current="page">
-                    General Form
+                    Color Mode
                   </li>
                 </ol>
               </div>
@@ -127,9 +126,8 @@ const page = "color-mode";
               </div>
               <!-- Start column -->
               <div class="col-12">
-                <NavbarHtml />
+                <ColorMode />
 
-                <ToggleScript />
               </div>
             </div>
             <!-- /.row -->
diff --git a/src/html/pages/docs/components/main-header.astro b/src/html/pages/docs/components/main-header.astro
index 4f6ac346c..dd7972122 100644
--- a/src/html/pages/docs/components/main-header.astro
+++ b/src/html/pages/docs/components/main-header.astro
@@ -2,7 +2,7 @@
 import Head from "@components/_head.astro";
 import Footer from "@components/dashboard/_footer.astro";
 import Topbar from "@components/dashboard/_topbar.astro";
-import MainHeader1 from "@components/docs/components/main-header-1.md";
+import MainHeader from "@components/docs/components/main-header.mdx";
 import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 const title = "Main Header Component | AdminLTE 4";
@@ -215,7 +215,7 @@ const distPath = path
             </nav>
             <!-- /.navbar -->
 
-            <MainHeader1 />
+            <MainHeader />
           </div>
           <!-- /.container-fluid -->
         </div>
diff --git a/src/html/pages/docs/index.astro b/src/html/pages/docs/index.astro
index 2bf6e9eba..c183958fa 100644
--- a/src/html/pages/docs/index.astro
+++ b/src/html/pages/docs/index.astro
@@ -4,7 +4,7 @@ import Footer from "@components/dashboard/_footer.astro";
 import Topbar from "@components/dashboard/_topbar.astro";
 import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
-import Introduction from "@components/docs/introduction/index.md";
+import Introduction from "@components/docs/introduction.mdx";
 const title = "Introduction | AdminLTE 4";
 const path = '../../../dist'
 const mainPage = "docs";
diff --git a/src/html/pages/docs/layout.astro b/src/html/pages/docs/layout.astro
index 66f33c601..13682096b 100644
--- a/src/html/pages/docs/layout.astro
+++ b/src/html/pages/docs/layout.astro
@@ -59,7 +59,7 @@ const page = "layout";
             <p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
             <ul>
               <li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
-              <li>Collapsed Sidebar: use the class <code>.sidebar-expand-lg .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
+              <li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
               </ul>
           </div>
           <!-- /.container-fluid -->