diff --git a/src/html/components/docs/components/main-sidebar.mdx b/src/html/components/docs/components/main-sidebar.mdx
new file mode 100644
index 000000000..80d52df3f
--- /dev/null
+++ b/src/html/components/docs/components/main-sidebar.mdx
@@ -0,0 +1,105 @@
+The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
+
+```html
+<!--begin::Sidebar-->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <!--begin::Sidebar Brand-->
+  <div class="sidebar-brand">
+    <!--begin::Brand Link-->
+    <a href="./index.html" class="brand-link">
+      <!--begin::Brand Image-->
+      <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+      <!--end::Brand Image-->
+      <!--begin::Brand Text-->
+      <span class="brand-text fw-light">AdminLTE 4</span>
+      <!--end::Brand Text-->
+    </a>
+    <!--end::Brand Link-->
+  </div>
+  <!--end::Sidebar Brand-->
+  <!--begin::Sidebar Wrapper-->
+  <div class="sidebar-wrapper">
+    <nav class="mt-2">
+      <!--begin::Sidebar Menu-->
+      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+        <li class="nav-header">Nav Header</li>
+        <li class="nav-item">
+          <a href="./index.html" class="nav-link">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="javascript:;" class="nav-link">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>
+              Treeview
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2 (Badge) <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span></p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a href="./index.html" class="nav-link active">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>Level 1 Active</p>
+          </a>
+        </li>
+
+        <li class="nav-item menu-open">
+          <a href="javascript:;" class="nav-link active">
+            <i class="nav-icon fa-solid fa-circle"></i>
+            <p>
+              Treeview Menu Open
+              <i class="nav-arrow fa-solid fa-angle-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link active">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2 Active</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon fa-regular fa-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <!--end::Sidebar Menu-->
+    </nav>
+  </div>
+  <!--end::Sidebar Wrapper-->
+</aside>
+<!--end::Sidebar-->
+```
+
+## Alternate Logo
+
+You can use two logo images instead of logo with text, you only need to change the markup to this:
+
+```html
+<div class="sidebar-brand">
+  <a href="./index.html" class="brand-link logo-switch">
+    <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
+    <img src="./assets/img/AdminLTEFullLogo.png" alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
+  </a>
+</div>
+```
diff --git a/src/html/pages/docs/components/main-sidebar.astro b/src/html/pages/docs/components/main-sidebar.astro
new file mode 100644
index 000000000..a40e29d6e
--- /dev/null
+++ b/src/html/pages/docs/components/main-sidebar.astro
@@ -0,0 +1,59 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import MainSidebar from "@components/docs/components/main-sidebar.mdx";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
+const title = "Main Sidebar Component | AdminLTE 4";
+const path = '../../../../dist'
+const mainPage = "components";
+const page = "main-sidebar";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!-- Main content -->
+      <main class="app-main">
+        <div class="app-content-header">
+          <div class="container-fluid">
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Main Sidebar Component</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Docs</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Main Sidebar Component
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Main content -->
+        <div class="app-content">
+          <div class="container-fluid">
+            <MainSidebar />
+          </div>
+          <!-- /.container-fluid -->
+        </div>
+        <!-- /.content -->
+      </main>
+      <!-- /.app-content -->
+
+      <Footer />
+    </div>
+    <!--  ./app-wrapper -->
+
+    <Scripts path={path} />
+  </body>
+</html>