RELEASE adminlte-4.0.0-beta2

BREAKING CHANGES removed .layout-fixed-complete class and component
chore(deps-dev): bump terser from 5.31.5 to 5.31.6 (#5673 )
2024-09-01 20:52:46 +05:30 · 2024-09-01 20:41:11 +05:30 · 2024-09-01 20:40:47 +05:30 · 2024-09-01 20:37:44 +05:30 · 2024-09-01 19:28:10 +05:30 · 2024-09-01 16:11:06 +05:30
55 changed files with 7110 additions and 14068 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: danny007in
+custom: ["https://www.paypal.me/daniel007in"]
--- a/.github/workflows/bundlewatch.yml
+++ b/.github/workflows/bundlewatch.yml
@@ -20,7 +20,7 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

--- a/.github/workflows/codeql.yml
+++ b/.github/workflows/codeql.yml
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -20,7 +20,7 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@@ -20,7 +20,7 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

--- a/.github/workflows/node-sass.yml
+++ b/.github/workflows/node-sass.yml
@@ -20,7 +20,7 @@ jobs:

    steps:
      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

@@ -43,10 +43,12 @@ jobs:
      - name: Check built CSS files
        shell: bash
        run: |
-          if [[ $(find dist-sass/css/ -name "*.css" | xargs grep -F "\$" | wc -l | bc) -eq 0 ]]; then
-            echo "All good, no Sass variables found"
+          SASS_VARS_FOUND=$(find "dist-sass/css/" -type f -name "*.css" -print0 | xargs -0 --no-run-if-empty grep -F "\$" || true)
+          if [[ -z "$SASS_VARS_FOUND" ]]; then
+            echo "All good, no Sass variables found!"
            exit 0
          else
-            echo "Found Sass variables!"
+            echo "Found $(echo "$SASS_VARS_FOUND" | wc -l | bc) Sass variables:"
+            echo "$SASS_VARS_FOUND"
            exit 1
          fi
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Clone repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
        with:
          persist-credentials: false

--- a/.npmignore
+++ b/.npmignore
@@ -5,3 +5,21 @@
 /.github/
 /.temp/
 /.lgtm.yml
+/.cache/
+/.idea/
+/.browserlistrc
+/.bundlewatch.config.json
+/.editorconfig
+/.eslintignore
+/.eslintrc.json
+/.gitattributes
+/.gitignore
+/.gitpod.yml
+/.stylelintignore
+/.stylelintrc.json
+/composer.json
+/tsconfig.json
+/src/assets/
+/src/config/
+/src/html/
+/src/utils/
--- a/README.md
+++ b/README.md
@@ -40,9 +40,14 @@ To compile the dist files you need Node.js/npm, clone/download the repo then:
 - Clone this Repository to your machine and change to `master` branch.
 - Go to Cloned Folder.
 - In cli/bash run `npm install` it will install dependency from `package.json`.
- After installation complets, run `npm run dev`
+- After installation completes, run `npm run dev`
 - Cool, Send urs changes in PR to `master` branch.

+## Sponsorship
+
+Support AdminLTE development by becoming a sponsor.
+[Github Sponsors](https://github.com/sponsors/danny007in) or
+[PayPal](https://www.paypal.me/daniel007in)

 ## License

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "admin-lte",
  "description": "Responsive open source admin dashboard and control panel.",
-  "version": "4.0.0-alpha3",
+  "version": "4.0.0-beta2",
  "license": "MIT",
  "author": "Colorlib <https://colorlib.com>",
  "main": "dist/js/adminlte.min.js",
@@ -57,39 +57,40 @@
    "url": "https://github.com/ColorlibHQ/AdminLTE/issues"
  },
  "devDependencies": {
-    "@astrojs/mdx": "^1.1.0",
-    "@rollup/plugin-typescript": "^11.1.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.2",
-    "@typescript-eslint/parser": "^6.7.2",
-    "astro": "^3.0.8",
-    "autoprefixer": "^10.4.15",
+    "@astrojs/check": "^0.9.3",
+    "@astrojs/mdx": "^3.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.5.0",
+    "@typescript-eslint/parser": "^7.5.0",
+    "astro": "^4.15.1",
+    "autoprefixer": "^10.4.20",
    "bootstrap": "^5.3.2",
-    "bundlewatch": "^0.3.3",
-    "clean-css-cli": "^5.6.2",
-    "concurrently": "^8.2.1",
+    "bundlewatch": "^0.4.0",
+    "clean-css-cli": "^5.6.3",
+    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
-    "eslint": "^8.49.0",
-    "eslint-config-xo": "^0.43.1",
-    "eslint-config-xo-typescript": "^1.0.1",
-    "eslint-plugin-astro": "^0.29.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint": "^8.55.0",
+    "eslint-config-xo": "^0.44.0",
+    "eslint-config-xo-typescript": "^4.0.0",
+    "eslint-plugin-astro": "^0.34.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-unicorn": "^52.0.0",
    "fs-extra": "^11.1.1",
-    "js-beautify": "^1.14.9",
-    "lockfile-lint": "^4.12.1",
-    "nodemon": "^3.0.1",
+    "js-beautify": "^1.15.1",
+    "lockfile-lint": "^4.14.0",
+    "nodemon": "^3.1.2",
    "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.29",
-    "postcss-cli": "^10.1.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-astro": "^0.12.0",
-    "rollup": "^3.29.2",
-    "rtlcss": "^4.1.0",
-    "sass": "^1.67.0",
-    "stylelint": "^15.10.3",
-    "stylelint-config-twbs-bootstrap": "^11.0.1",
-    "terser": "^5.19.4",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "postcss": "^8.4.41",
+    "postcss-cli": "^11.0.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "rollup": "^4.21.0",
+    "rtlcss": "^4.2.0",
+    "sass": "^1.77.4",
+    "stylelint": "^16.8.2",
+    "stylelint-config-twbs-bootstrap": "^14.2.0",
+    "terser": "^5.31.6",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4"
  }
 }
--- a/src/config/astro.config.mjs
+++ b/src/config/astro.config.mjs
@@ -15,5 +15,12 @@ export default defineConfig({
  integrations: [mdx()],
  srcDir: './src/html',
  cacheDir: './dist/pages',
-  outDir: './dist/pages'
+  outDir: './dist/pages',
+  vite: {
+    server: {
+      watch: {
+        ignored: ['!**/dist/**'],
+      }
+    }
+  }
 })
--- a/src/html/components/_head.astro
+++ b/src/html/components/_head.astro
@@ -27,20 +27,10 @@ const cssPath = isRtl ? ".rtl" : "";
 />
 <!--end::Fonts-->
 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
-  integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
-  crossorigin="anonymous"
-/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/styles/overlayscrollbars.min.css" integrity="sha256-dSokZseQNT08wYEWiz5iLI8QPlKxG+TswNRD8k35cpg=" crossorigin="anonymous">
 <!--end::Third Party Plugin(OverlayScrollbars)-->
 <!--begin::Third Party Plugin(Bootstrap Icons)-->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
-  integrity="sha256-BicZsQAhkGHIoR//IB2amPN5SrRb3fHB8tFsnqRAwnk="
-  crossorigin="anonymous"
->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.min.css" integrity="sha256-Qsx5lrStHZyR9REqhUF8iQt73X06c8LGIUPzpOhwRrI=" crossorigin="anonymous">
 <!--end::Third Party Plugin(Bootstrap Icons)-->
 <!--begin::Required Plugin(AdminLTE)-->
 <link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
--- a/src/html/components/_scripts.astro
+++ b/src/html/components/_scripts.astro
@@ -4,27 +4,12 @@ const adminlteJsUrl = path + "/js/adminlte.js";
 ---

 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js"
-  integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
-  crossorigin="anonymous"
-></script>
-<!--end::Third Party Plugin(OverlayScrollbars)-->
-<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
-  integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
-  crossorigin="anonymous"
-></script>
-<!--end::Required Plugin(popperjs for Bootstrap 5)-->
-<!--begin::Required Plugin(Bootstrap 5)-->
-<script
-  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
-  integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
-  crossorigin="anonymous"
-></script>
-<!--end::Required Plugin(Bootstrap 5)-->
-<!--begin::Required Plugin(AdminLTE)-->
+<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.3.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-H2VM7BKda+v2Z4+DRy69uknwxjyDRhszjXFhsL4gD3w=" crossorigin="anonymous"></script>
+<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha256-whL0tQWoY1Ku1iskqPFvmZ+CHsvmRWx/PIoEvIeWh4I=" crossorigin="anonymous"></script>
+<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha256-YMa+wAM6QkVyz999odX7lPRxkoYAan8suedu4k2Zur8=" crossorigin="anonymous"></script>
+<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
 <script src={adminlteJsUrl} is:inline></script>
 <!--end::Required Plugin(AdminLTE)-->
 <!--begin::OverlayScrollbars Configure-->
--- a/src/html/components/dashboard/_footer.astro
+++ b/src/html/components/dashboard/_footer.astro
@@ -9,8 +9,8 @@ const year = new Date().getFullYear();
  <!--end::To the end-->
  <!--begin::Copyright-->
  <strong>
-    Copyright &copy; 2014-{year}
-    <a href="https://adminlte.io">AdminLTE.io</a>.
+    Copyright &copy; 2014-{year}&nbsp;
+    <a href="https://adminlte.io" class="text-decoration-none">AdminLTE.io</a>.
  </strong>
  All rights reserved.
  <!--end::Copyright-->
--- a/src/html/components/dashboard/_sidenav.astro
+++ b/src/html/components/dashboard/_sidenav.astro
@@ -75,6 +75,15 @@ const htmlPath = convertPathToHtml(path);
            </li>
          </ul>
        </li>
+        <li class="nav-item">
+          <a
+            href={htmlPath + "/generate/theme.html"}
+            class:list={["nav-link", page === "theme-generate" && "active"]}
+          >
+            <i class="nav-icon bi bi-palette"></i>
+            <p>Theme Generate</p>
+          </a>
+        </li>
        <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
          <a
            href="#"
@@ -154,11 +163,11 @@ const htmlPath = convertPathToHtml(path);
            </li>
            <li class="nav-item">
              <a
-                href={htmlPath + "/layout/fixed-complete.html"}
-                class:list={["nav-link", page === "fixed-complete" && "active"]}
+                href={htmlPath + "/layout/layout-custom-area.html"}
+                class:list={["nav-link", page === "layout-custom-area" && "active"]}
              >
                <i class="nav-icon bi bi-circle"></i>
-                <p>Fixed Complete</p>
+                <p>Layout <small>+ Custom Area </small></p>
              </a>
            </li>
            <li class="nav-item">
@@ -225,6 +234,15 @@ const htmlPath = convertPathToHtml(path);
                <p>General</p>
              </a>
            </li>
+            <li class="nav-item">
+              <a
+                href={htmlPath + "/UI/icons.html"}
+                class:list={["nav-link", page === "icons" && "active"]}
+              >
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Icons</p>
+              </a>
+            </li>
            <li class="nav-item">
              <a
                href={htmlPath + "/UI/timeline.html"}
--- a/src/html/components/docs/introduction.mdx
+++ b/src/html/components/docs/introduction.mdx
@@ -16,7 +16,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your

 ```html
 <script
-  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js"
+  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/js/adminlte.min.js"
  integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
  crossorigin="anonymous"
 ></script>
@@ -25,7 +25,7 @@ _**Important Note**: You needed to add separately cdn links for plugins in your
 ```html
 <link
  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css"
+  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-beta2/dist/css/adminlte.min.css"
  integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
  crossorigin="anonymous"
 />
@@ -38,19 +38,19 @@ _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or
 #### Via npm

 ```bash
-npm install admin-lte@4.0.0-alpha2 --save
+npm install admin-lte@4.0.0-beta2 --save
 ```

 #### Via Yarn

 ```bash
-yarn add admin-lte@4.0.0-alpha2
+yarn add admin-lte@4.0.0-beta2
 ```

 #### Via Composer

 ```bash
-composer require "almasaeed2010/adminlte=4.0.0-alpha2"
+composer require "almasaeed2010/adminlte=4.0.0-beta2"
 ```

 #### Via Git
--- a/src/html/pages/UI/general.astro
+++ b/src/html/pages/UI/general.astro
@@ -63,7 +63,7 @@ const pageTitle = "General UI Elements";
                    href="https://getbootstrap.com/docs/5.3/components/"
                    target="_blank"
                    rel="noopener noreferrer"
-                    class="fw-bold"
+                    class="callout-link"
                  >
                    Bootstrap Components
                  </a>
--- a/src/html/pages/UI/icons.astro
+++ b/src/html/pages/UI/icons.astro
@@ -0,0 +1,93 @@
+---
+import Head from "@components/_head.astro";
+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";
+
+const title = "AdminLTE 4 | Icons";
+const path = "../../../dist";
+const mainPage = "ui-elements";
+const page = "icons";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <Sidenav path={path} mainPage={mainPage} page={page} />
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <div class="col-sm-6">
+                <h3 class="mb-0">Icons</h3>
+              </div>
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Icons
+                  </li>
+                </ol>
+              </div>
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!-- Timelime example  -->
+            <div class="row">
+              <div class="col-12">
+                <!-- The icons -->
+                <div class="col-12">
+                    <div class="card card-primary card-outline">
+                      <div class="card-header">
+                        <h3 class="card-title">Icons</h3>
+                      </div>
+                      <div class="card-body">
+                        <p>You can use any font library you like with AdminLTE 4.</p>
+                        <strong>Recommendations</strong>
+                        <ul class="mt-1">
+                          <li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a></li>
+                          <li><a href="https://useiconic.com/open/" target="_blank">Iconic Icons</a></li>
+                          <li><a href="https://ionicons.com/" target="_blank">Ion Icons</a></li>
+                        </ul>
+                      </div>
+                    </div>
+                </div>
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
--- a/src/html/pages/docs/color-mode.astro
+++ b/src/html/pages/docs/color-mode.astro
@@ -60,8 +60,10 @@ const page = "color-mode";
                <div class="callout callout-info">
                  <h5 class="fw-bold">Tips</h5>
                  <p>
-                    First Visit
-                    https://getbootstrap.com/docs/5.3/customize/color-modes/
+                    <a href="https://getbootstrap.com/docs/5.3/customize/color-modes/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                      Color modes in Bootstrap
+                    </a> allow you to switch between light and dark modes. You can do this using the data-bs-theme attribute. You can also create your own custom color modes.
+
                  </p>
                </div>
              </div>
--- a/src/html/pages/docs/components/main-header.astro
+++ b/src/html/pages/docs/components/main-header.astro
@@ -59,8 +59,9 @@ const distPath = path;
              <h5 class="fw-bold">Reminder!</h5>
              <p>
                AdminLTE uses all of Bootstrap 5 components. It's a good start
-                to review the [Bootstrap
-                documentation](https://getbootstrap.com/) to get an idea of the
+                to review the <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer" class="callout-link">
+                  Bootstrap documentation
+                </a> to get an idea of the
                various components that this documentation <b>does not</b> cover.
              </p>
            </div>
--- a/src/html/pages/docs/layout.astro
+++ b/src/html/pages/docs/layout.astro
@@ -55,7 +55,7 @@ const page = "layout";
            <div class="callout callout-info mb-4">
              <h5 class="fw-bold">Tips</h5>
              <p>
-                The <a href="/starter.html" class="link-primary">
+                The <a href="/starter.html" target="_blank" rel="noopener noreferrer"  class="callout-link">
                  starter page
                </a> is a good place to start building your app if you’d like to
                start from scratch.
--- a/src/html/pages/examples/lockscreen.astro
+++ b/src/html/pages/examples/lockscreen.astro
@@ -49,11 +49,11 @@ const year = new Date().getFullYear();
        Enter your password to retrieve your session
      </div>
      <div class="text-center">
-        <a href="login.html">Or sign in as a different user</a>
+        <a href="login.html" class="text-decoration-none">Or sign in as a different user</a>
      </div>
      <div class="lockscreen-footer text-center">
-        Copyright © 2014-{year}
-        <b><a href="https://adminlte.io">AdminLTE.io</a></b><br />
+        Copyright © 2014-{year} &nbsp;
+        <b><a href="https://adminlte.io" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">AdminLTE.io</a></b> <br />
        All rights reserved
      </div>
    </div>
--- a/src/html/pages/forms/general.astro
+++ b/src/html/pages/forms/general.astro
@@ -62,7 +62,7 @@ const page = "general";
                    href="https://getbootstrap.com/docs/5.3/forms/overview/"
                    target="_blank"
                    rel="noopener noreferrer"
-                    class="fw-bold"
+                    class="callout-link"
                  >
                    Bootstrap Form
                  </a>
--- a/src/html/pages/generate/theme.astro
+++ b/src/html/pages/generate/theme.astro
@@ -0,0 +1,479 @@
+---
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Scripts from "@components/_scripts.astro";
+import { convertPathToHtml } from "../../../utils/index.js";
+
+const title = "AdminLTE 4 | Theme Customize";
+const path = "../../../dist";
+const htmlPath = convertPathToHtml(path);
+---
+
+<!doctype html>
+<html lang="en">
+  <!--begin::Head-->
+  <head>
+    <Head title={title} path={path} />
+  </head>
+  <!--end::Head-->
+  <!--begin::Body-->
+  <body class="sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
+    <div class="app-wrapper">
+      <Topbar path={path} />
+      <!--begin::Sidebar-->
+      <aside class="app-sidebar bg-primary shadow" data-bs-theme="dark">
+        <!--begin::Sidebar Brand-->
+        <div class="sidebar-brand">
+          <!--begin::Brand Link-->
+          <a href={htmlPath + "/index.html"} class="brand-link">
+            <!--begin::Brand Image-->
+            <img
+              src={path + "/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">MULTI LEVEL EXAMPLE</li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="nav-icon bi bi-circle-fill"></i>
+                  <p>Level 1</p>
+                </a>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="nav-icon bi bi-circle-fill"></i>
+                  <p>
+                    Level 1
+                    <i class="nav-arrow bi bi-chevron-right"></i>
+                  </p>
+                </a>
+                <ul class="nav nav-treeview">
+                  <li class="nav-item">
+                    <a href="#" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Level 2</p>
+                    </a>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>
+                        Level 2
+                        <i class="nav-arrow bi bi-chevron-right"></i>
+                      </p>
+                    </a>
+                    <ul class="nav nav-treeview">
+                      <li class="nav-item">
+                        <a href="#" class="nav-link">
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
+                          <p>Level 3</p>
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="#" class="nav-link">
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
+                          <p>Level 3</p>
+                        </a>
+                      </li>
+                      <li class="nav-item">
+                        <a href="#" class="nav-link">
+                          <i class="nav-icon bi bi-record-circle-fill"></i>
+                          <p>Level 3</p>
+                        </a>
+                      </li>
+                    </ul>
+                  </li>
+                  <li class="nav-item">
+                    <a href="#" class="nav-link">
+                      <i class="nav-icon bi bi-circle"></i>
+                      <p>Level 2</p>
+                    </a>
+                  </li>
+                </ul>
+              </li>
+              <li class="nav-item">
+                <a href="#" class="nav-link">
+                  <i class="nav-icon bi bi-circle-fill"></i>
+                  <p>Level 1</p>
+                </a>
+              </li>
+            </ul>
+            <!--end::Sidebar Menu-->
+          </nav>
+        </div>
+        <!--end::Sidebar Wrapper-->
+      </aside>
+      <!--end::Sidebar-->
+      <!--begin::App Main-->
+      <main class="app-main">
+        <!--begin::App Content Header-->
+        <div class="app-content-header">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <!--begin::Col-->
+              <div class="col-sm-6">
+                <h3 class="mb-0">Theme Customize</h3>
+              </div>
+              <!--end::Col-->
+              <!--begin::Col-->
+              <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-end">
+                  <li class="breadcrumb-item"><a href="#">Home</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Theme Customize
+                  </li>
+                </ol>
+              </div>
+              <!--end::Col-->
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
+        <div class="app-content">
+          <!--begin::Container-->
+          <div class="container-fluid">
+            <!--begin::Row-->
+            <div class="row">
+              <!--begin::Col-->
+              <div class="col-12">
+                <!--begin::Card-->
+                <div class="card">
+                  <!--begin::Card Header-->
+                  <div class="card-header">
+                    <!--begin::Card Title-->
+                    <h3 class="card-title">Sidebar Theme</h3>
+                    <!--end::Card Title-->
+
+                    <!--begin::Card Toolbar-->
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                    <!--end::Card Toolbar-->
+                  </div>
+                  <!--end::Card Header-->
+                  <!--begin::Card Body-->
+                  <div class="card-body">
+                    <!--begin::Row-->
+                    <div class="row">
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="sidebar-color-modes"
+                          class="form-select form-select-lg"
+                          aria-label="Sidebar Color Mode Select"
+                        >
+                          <option value="">---Select---</option>
+                          <option value="dark">Dark</option>
+                          <option value="light">Light</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="sidebar-color"
+                          class="form-select form-select-lg"
+                          aria-label="Sidebar Color Select"
+                        >
+                          <option value="">---Select---</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-6">
+                        <div id="sidebar-color-code" class="w-100"></div>
+                      </div>
+                      <!--end::Col-->
+                    </div>
+                    <!--end::Row-->
+                  </div>
+                  <!--end::Card Body-->
+                  <!--begin::Card Footer-->
+                  <div class="card-footer">
+                    Check more color in
+                    <a
+                      href="https://getbootstrap.com/docs/5.3/utilities/background/"
+                      target="_blank"
+                      class="link-primary">Bootstrap Background Colors</a
+                    >
+                  </div>
+                  <!--end::Card Footer-->
+                </div>
+                <!--end::Card-->
+
+                <!--begin::Card-->
+                <div class="card mt-4">
+                  <!--begin::Card Header-->
+                  <div class="card-header">
+                    <!--begin::Card Title-->
+                    <h3 class="card-title">Navbar Theme</h3>
+                    <!--end::Card Title-->
+
+                    <!--begin::Card Toolbar-->
+                    <div class="card-tools">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-remove"
+                        title="Remove"
+                      >
+                        <i class="bi bi-x-lg"></i>
+                      </button>
+                    </div>
+                    <!--end::Card Toolbar-->
+                  </div>
+                  <!--end::Card Header-->
+                  <!--begin::Card Body-->
+                  <div class="card-body">
+                    <!--begin::Row-->
+                    <div class="row">
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="navbar-color-modes"
+                          class="form-select form-select-lg"
+                          aria-label="Navbar Color Mode Select"
+                        >
+                          <option value="">---Select---</option>
+                          <option value="dark">Dark</option>
+                          <option value="light">Light</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-3">
+                        <select
+                          id="navbar-color"
+                          class="form-select form-select-lg"
+                          aria-label="Navbar Color Select"
+                        >
+                          <option value="">---Select---</option>
+                        </select>
+                      </div>
+                      <!--end::Col-->
+                      <!--begin::Col-->
+                      <div class="col-md-6">
+                        <div id="navbar-color-code" class="w-100"></div>
+                      </div>
+                      <!--end::Col-->
+                    </div>
+                    <!--end::Row-->
+                  </div>
+                  <!--end::Card Body-->
+                  <!--begin::Card Footer-->
+                  <div class="card-footer">
+                    Check more color in
+                    <a
+                      href="https://getbootstrap.com/docs/5.3/utilities/background/"
+                      target="_blank"
+                      class="link-primary">Bootstrap Background Colors</a
+                    >
+                  </div>
+                  <!--end::Card Footer-->
+                </div>
+                <!--end::Card-->
+              </div>
+              <!--end::Col-->
+            </div>
+            <!--end::Row-->
+          </div>
+          <!--end::Container-->
+        </div>
+        <!--end::App Content-->
+      </main>
+      <!--end::App Main-->
+      <Footer />
+    </div>
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
+    <Scripts path={path} />
+    <script is:inline>
+      document.addEventListener("DOMContentLoaded", () => {
+        const appSidebar = document.querySelector(".app-sidebar");
+        const sidebarColorModes = document.querySelector(
+          "#sidebar-color-modes",
+        );
+        const sidebarColor = document.querySelector("#sidebar-color");
+        const sidebarColorCode = document.querySelector("#sidebar-color-code");
+
+        const themeBg = [
+          "bg-primary",
+          "bg-primary-subtle",
+          "bg-secondary",
+          "bg-secondary-subtle",
+          "bg-success",
+          "bg-success-subtle",
+          "bg-danger",
+          "bg-danger-subtle",
+          "bg-warning",
+          "bg-warning-subtle",
+          "bg-info",
+          "bg-info-subtle",
+          "bg-light",
+          "bg-light-subtle",
+          "bg-dark",
+          "bg-dark-subtle",
+          "bg-body-secondary",
+          "bg-body-tertiary",
+          "bg-body",
+          "bg-black",
+          "bg-white",
+          "bg-transparent",
+        ];
+
+        // loop through each option themeBg array
+        document.querySelector("#sidebar-color").innerHTML = themeBg.map(
+          (bg) => {
+            // return option element with value and text
+            return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
+          },
+        );
+
+        let sidebarColorMode = "";
+        let sidebarBg = "";
+
+        function updateSidebar() {
+          appSidebar.setAttribute("data-bs-theme", sidebarColorMode);
+
+          sidebarColorCode.innerHTML = `<pre><code class="language-html">&lt;aside class="app-sidebar ${sidebarBg}" data-bs-theme="${sidebarColorMode}"&gt;...&lt;/aside&gt;</code></pre>`;
+        }
+
+        sidebarColorModes.addEventListener("input", (event) => {
+          sidebarColorMode = event.target.value;
+          updateSidebar();
+        });
+
+        sidebarColor.addEventListener("input", (event) => {
+          sidebarBg = event.target.value;
+
+          themeBg.forEach((className) => {
+            appSidebar.classList.remove(className);
+          });
+
+          if (themeBg.includes(sidebarBg)) {
+            appSidebar.classList.add(sidebarBg);
+          }
+
+          updateSidebar();
+        });
+      });
+
+      document.addEventListener("DOMContentLoaded", () => {
+        const appNavbar = document.querySelector(".app-header");
+        const navbarColorModes = document.querySelector("#navbar-color-modes");
+        const navbarColor = document.querySelector("#navbar-color");
+        const navbarColorCode = document.querySelector("#navbar-color-code");
+
+        const themeBg = [
+          "bg-primary",
+          "bg-primary-subtle",
+          "bg-secondary",
+          "bg-secondary-subtle",
+          "bg-success",
+          "bg-success-subtle",
+          "bg-danger",
+          "bg-danger-subtle",
+          "bg-warning",
+          "bg-warning-subtle",
+          "bg-info",
+          "bg-info-subtle",
+          "bg-light",
+          "bg-light-subtle",
+          "bg-dark",
+          "bg-dark-subtle",
+          "bg-body-secondary",
+          "bg-body-tertiary",
+          "bg-body",
+          "bg-black",
+          "bg-white",
+          "bg-transparent",
+        ];
+
+        // loop through each option themeBg array
+        document.querySelector("#navbar-color").innerHTML = themeBg.map(
+          (bg) => {
+            // return option element with value and text
+            return `<option value="${bg}" class="text-${bg}">${bg}</option>`;
+          },
+        );
+
+        let navbarColorMode = "";
+        let navbarBg = "";
+
+        function updateNavbar() {
+          appNavbar.setAttribute("data-bs-theme", navbarColorMode);
+          navbarColorCode.innerHTML = `<pre><code class="language-html">&lt;nav class="app-header navbar navbar-expand ${navbarBg}" data-bs-theme="${navbarColorMode}"&gt;...&lt;/nav&gt;</code></pre>`;
+        }
+
+        navbarColorModes.addEventListener("input", (event) => {
+          navbarColorMode = event.target.value;
+          updateNavbar();
+        });
+
+        navbarColor.addEventListener("input", (event) => {
+          navbarBg = event.target.value;
+
+          themeBg.forEach((className) => {
+            appNavbar.classList.remove(className);
+          });
+
+          if (themeBg.includes(navbarBg)) {
+            appNavbar.classList.add(navbarBg);
+          }
+
+          updateNavbar();
+        });
+      });
+    </script>
+    <!--end::Script-->
+  </body><!--end::Body-->
+</html>
--- a/src/html/pages/index.astro
+++ b/src/html/pages/index.astro
@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index";
 ---

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <!--begin::Head-->
  <head>
@@ -91,7 +91,10 @@ const page = "index";
                      d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
                    ></path>
                  </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                    More info <i class="bi bi-link-45deg"></i>
                  </a>
                </div>
@@ -117,7 +120,10 @@ const page = "index";
                      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
                    ></path>
                  </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                    More info <i class="bi bi-link-45deg"></i>
                  </a>
                </div>
@@ -143,7 +149,10 @@ const page = "index";
                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                    ></path>
                  </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                    More info <i class="bi bi-link-45deg"></i>
                  </a>
                </div>
@@ -176,7 +185,10 @@ const page = "index";
                      d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
                    ></path>
                  </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a
+                    href="#"
+                    class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover"
+                  >
                    More info <i class="bi bi-link-45deg"></i>
                  </a>
                </div>
@@ -201,7 +213,7 @@ const page = "index";
                <!-- /.card -->

                <!-- DIRECT CHAT -->
-                <div class="card direct-chat direct-chat-primary">
+                <div class="card direct-chat direct-chat-primary mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Direct Chat</h3>

@@ -510,7 +522,7 @@ const page = "index";
              <!-- Start col -->
              <div class="col-lg-5 connectedSortable">
                <div
-                  class="card mb-4 text-white bg-primary bg-gradient border-primary"
+                  class="card text-white bg-primary bg-gradient border-primary mb-4"
                >
                  <div class="card-header border-0">
                    <h3 class="card-title">Sales Value</h3>
@@ -532,15 +544,15 @@ const page = "index";
                    <!--begin::Row-->
                    <div class="row">
                      <div class="col-4 text-center">
-                        <div id="sparkline-1"></div>
+                        <div id="sparkline-1" class="text-dark"></div>
                        <div class="text-white">Visitors</div>
                      </div>
                      <div class="col-4 text-center">
-                        <div id="sparkline-2"></div>
+                        <div id="sparkline-2" class="text-dark"></div>
                        <div class="text-white">Online</div>
                      </div>
                      <div class="col-4 text-center">
-                        <div id="sparkline-3"></div>
+                        <div id="sparkline-3" class="text-dark"></div>
                        <div class="text-white">Sales</div>
                      </div>
                    </div>
@@ -569,8 +581,7 @@ const page = "index";
    <script
      src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
      integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>

    <!-- sortablejs -->
    <script is:inline>
@@ -579,11 +590,12 @@ const page = "index";
      connectedSortables.forEach((connectedSortable) => {
        let sortable = new Sortable(connectedSortable, {
          group: "shared",
+          handle: ".card-header",
        });
      });

      const cardHeaders = document.querySelectorAll(
-        ".connectedSortable .card-header"
+        ".connectedSortable .card-header",
      );
      cardHeaders.forEach((cardHeader) => {
        cardHeader.style.cursor = "move";
@@ -594,8 +606,7 @@ const page = "index";
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>

    <!-- ChartJS -->
    <script is:inline>
@@ -652,7 +663,7 @@ const page = "index";

      const sales_chart = new ApexCharts(
        document.querySelector("#revenue-chart"),
-        sales_chart_options
+        sales_chart_options,
      );
      sales_chart.render();
    </script>
@@ -661,13 +672,11 @@ const page = "index";
    <script
      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
      integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
      integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>

    <!-- jsvectormap -->
    <script is:inline>
@@ -719,7 +728,7 @@ const page = "index";

      const sparkline1 = new ApexCharts(
        document.querySelector("#sparkline-1"),
-        option_sparkline1
+        option_sparkline1,
      );
      sparkline1.render();

@@ -750,7 +759,7 @@ const page = "index";

      const sparkline2 = new ApexCharts(
        document.querySelector("#sparkline-2"),
-        option_sparkline2
+        option_sparkline2,
      );
      sparkline2.render();

@@ -781,7 +790,7 @@ const page = "index";

      const sparkline3 = new ApexCharts(
        document.querySelector("#sparkline-3"),
-        option_sparkline3
+        option_sparkline3,
      );
      sparkline3.render();
    </script>
--- a/src/html/pages/index2.astro
+++ b/src/html/pages/index2.astro
@@ -11,7 +11,7 @@ const mainPage = "dashboard";
 const page = "index2";
 ---

-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <!--begin::Head-->
  <head>
@@ -309,7 +309,7 @@ const page = "index2";
              <!-- Start col -->
              <div class="col-md-8">
                <!--begin::Row-->
-                <div class="row">
+                <div class="row g-4 mb-4">
                  <div class="col-md-6">
                    <!-- DIRECT CHAT -->
                    <div class="card direct-chat direct-chat-warning">
@@ -329,7 +329,8 @@ const page = "index2";
                            data-lte-toggle="card-collapse"
                          >
                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                          </button>
                          <button
                            type="button"
@@ -622,7 +623,7 @@ const page = "index2";

                  <div class="col-md-6">
                    <!-- USERS LIST -->
-                    <div class="card mb-4">
+                    <div class="card">
                      <div class="card-header">
                        <h3 class="card-title">Latest Members</h3>

@@ -636,7 +637,8 @@ const page = "index2";
                            data-lte-toggle="card-collapse"
                          >
                            <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                            <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                            <i data-lte-icon="collapse" class="bi bi-dash-lg"
+                            ></i>
                          </button>
                          <button
                            type="button"
@@ -767,7 +769,7 @@ const page = "index2";
                      </div>
                      <!-- /.card-body -->
                      <div class="card-footer text-center">
-                        <a href="javascript:">View All Users</a>
+                        <a href="javascript:" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View All Users</a>
                      </div>
                      <!-- /.card-footer -->
                    </div>
@@ -777,7 +779,7 @@ const page = "index2";
                </div>
                <!--end::Row-->

-                <!-- TABLE: LATEST ORDERS -->
+                <!--begin::Latest Order Widget-->
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">Latest Orders</h3>
@@ -815,7 +817,7 @@ const page = "index2";
                        <tbody>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                            </td>
                            <td>Call of Duty IV</td>
                            <td>
@@ -824,36 +826,24 @@ const page = "index2";
                              </span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-1"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                            </td>
                            <td>Samsung Smart TV</td>
                            <td>
                              <span class="badge text-bg-warning">Pending</span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-2"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                            </td>
                            <td>iPhone 6 Plus</td>
                            <td>
@@ -862,54 +852,36 @@ const page = "index2";
                              </span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-3"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                            </td>
                            <td>Samsung Smart TV</td>
                            <td>
                              <span class="badge text-bg-info">Processing</span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00c0ef"
-                                data-height="20"
-                              >
-                                90,80,-90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-4"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR1848</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR1848</a>
                            </td>
                            <td>Samsung Smart TV</td>
                            <td>
                              <span class="badge text-bg-warning">Pending</span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f39c12"
-                                data-height="20"
-                              >
-                                90,80,-90,70,61,-83,68
-                              </div>
+                              <div id="table-sparkline-5"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR7429</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR7429</a>
                            </td>
                            <td>iPhone 6 Plus</td>
                            <td>
@@ -918,31 +890,19 @@ const page = "index2";
                              </span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#f56954"
-                                data-height="20"
-                              >
-                                90,-80,90,70,-61,83,63
-                              </div>
+                              <div id="table-sparkline-6"></div>
                            </td>
                          </tr>
                          <tr>
                            <td>
-                              <a href="pages/examples/invoice.html">OR9842</a>
+                              <a href="pages/examples/invoice.html" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">OR9842</a>
                            </td>
                            <td>Call of Duty IV</td>
                            <td>
                              <span class="badge text-bg-success">Shipped</span>
                            </td>
                            <td>
-                              <div
-                                class="sparkbar"
-                                data-color="#00a65a"
-                                data-height="20"
-                              >
-                                90,80,90,-70,61,-83,63
-                              </div>
+                              <div id="table-sparkline-7"></div>
                            </td>
                          </tr>
                        </tbody>
@@ -1063,7 +1023,7 @@ const page = "index2";
                          United States of America
                          <span class="float-end text-danger">
                            <i class="bi bi-arrow-down fs-7"></i>
-                            12%
+                             12%
                          </span>
                        </a>
                      </li>
@@ -1233,8 +1193,7 @@ const page = "index2";
    <script
      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
-      crossorigin="anonymous"
-    ></script>
+      crossorigin="anonymous"></script>

    <script is:inline>
      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@@ -1250,7 +1209,7 @@ const page = "index2";
      // - MONTHLY SALES CHART -
      //-----------------------

-      var sales_chart_options = {
+      const sales_chart_options = {
        series: [
          {
            name: "Digital Goods",
@@ -1297,9 +1256,9 @@ const page = "index2";
        },
      };

-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
        document.querySelector("#sales-chart"),
-        sales_chart_options
+        sales_chart_options,
      );
      sales_chart.render();

@@ -1307,11 +1266,80 @@ const page = "index2";
      // - END MONTHLY SALES CHART -
      //---------------------------

+      function createSparklineChart(selector, data) {
+        const options = {
+          series: [{ data }],
+          chart: {
+            type: "line",
+            width: 150,
+            height: 30,
+            sparkline: {
+              enabled: true,
+            },
+          },
+          colors: ["var(--bs-primary)"],
+          stroke: {
+            width: 2,
+          },
+          tooltip: {
+            fixed: {
+              enabled: false,
+            },
+            x: {
+              show: false,
+            },
+            y: {
+              title: {
+                formatter: function (seriesName) {
+                  return "";
+                },
+              },
+            },
+            marker: {
+              show: false,
+            },
+          },
+        };
+
+        const chart = new ApexCharts(document.querySelector(selector), options);
+        chart.render();
+      }
+
+      const table_sparkline_1_data = [
+        25, 66, 41, 89, 63, 25, 44, 12, 36, 9, 54,
+      ];
+      const table_sparkline_2_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 44,
+      ];
+      const table_sparkline_3_data = [
+        15, 46, 21, 59, 33, 15, 34, 42, 56, 19, 64,
+      ];
+      const table_sparkline_4_data = [
+        30, 56, 31, 69, 43, 35, 24, 32, 46, 29, 64,
+      ];
+      const table_sparkline_5_data = [
+        20, 76, 51, 79, 53, 35, 54, 22, 36, 49, 64,
+      ];
+      const table_sparkline_6_data = [
+        5, 36, 11, 69, 23, 15, 14, 42, 26, 19, 44,
+      ];
+      const table_sparkline_7_data = [
+        12, 56, 21, 39, 73, 45, 64, 52, 36, 59, 74,
+      ];
+
+      createSparklineChart("#table-sparkline-1", table_sparkline_1_data);
+      createSparklineChart("#table-sparkline-2", table_sparkline_2_data);
+      createSparklineChart("#table-sparkline-3", table_sparkline_3_data);
+      createSparklineChart("#table-sparkline-4", table_sparkline_4_data);
+      createSparklineChart("#table-sparkline-5", table_sparkline_5_data);
+      createSparklineChart("#table-sparkline-6", table_sparkline_6_data);
+      createSparklineChart("#table-sparkline-7", table_sparkline_7_data);
+
      //-------------
      // - PIE CHART -
      //-------------

-      var pie_chart_options = {
+      const pie_chart_options = {
        series: [700, 500, 400, 600, 300, 100],
        chart: {
          type: "donut",
@@ -1330,9 +1358,9 @@ const page = "index2";
        ],
      };

-      var pie_chart = new ApexCharts(
+      const pie_chart = new ApexCharts(
        document.querySelector("#pie-chart"),
-        pie_chart_options
+        pie_chart_options,
      );
      pie_chart.render();

--- a/src/html/pages/index3.astro
+++ b/src/html/pages/index3.astro
@@ -65,7 +65,7 @@ const page = "index3";
                  <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                      <h3 class="card-title">Online Store Visitors</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                    </div>
                  </div>
                  <div class="card-body">
@@ -100,7 +100,7 @@ const page = "index3";
                </div>
                <!-- /.card -->

-                <div class="card">
+                <div class="card mb-4">
                  <div class="card-header border-0">
                    <h3 class="card-title">Products</h3>
                    <div class="card-tools">
@@ -157,7 +157,7 @@ const page = "index3";
                          </td>
                          <td>$29 USD</td>
                          <td>
-                            <small class="text-warning me-1">
+                            <small class="text-info me-1">
                              <i class="bi bi-arrow-down"></i>
                              0.5%
                            </small>
@@ -228,7 +228,7 @@ const page = "index3";
                  <div class="card-header border-0">
                    <div class="d-flex justify-content-between">
                      <h3 class="card-title">Sales</h3>
-                      <a href="javascript:void(0);">View Report</a>
+                      <a href="javascript:void(0);" class="link-primary link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">View Report</a>
                    </div>
                  </div>
                  <div class="card-body">
@@ -298,7 +298,7 @@ const page = "index3";
                      </p>
                      <p class="d-flex flex-column text-end">
                        <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-success"></i> 12%
+                          <i class="bi bi-graph-up-arrow text-success"></i> 12%
                        </span>
                        <span class="text-secondary">CONVERSION RATE</span>
                      </p>
@@ -307,7 +307,7 @@ const page = "index3";
                    <div
                      class="d-flex justify-content-between align-items-center border-bottom mb-3"
                    >
-                      <p class="text-warning fs-2">
+                      <p class="text-info fs-2">
                        <svg
                          height="32"
                          fill="none"
@@ -326,7 +326,7 @@ const page = "index3";
                      </p>
                      <p class="d-flex flex-column text-end">
                        <span class="fw-bold">
-                          <i class="ion ion-android-arrow-up text-warning"></i> 0.8%
+                          <i class="bi bi-graph-up-arrow text-info"></i> 0.8%
                        </span>
                        <span class="text-secondary">SALES RATE</span>
                      </p>
@@ -354,7 +354,7 @@ const page = "index3";
                      </p>
                      <p class="d-flex flex-column text-end">
                        <span class="fw-bold">
-                          <i class="ion ion-android-arrow-down text-danger"></i>
+                          <i class="bi bi-graph-down-arrow text-danger"></i>
                          1%
                        </span>
                        <span class="text-secondary">REGISTRATION RATE</span>
@@ -393,7 +393,7 @@ const page = "index3";
      // IT'S ALL JUST JUNK FOR DEMO
      // ++++++++++++++++++++++++++++++++++++++++++

-      var visitors_chart_options = {
+      const visitors_chart_options = {
        series: [
          {
            name: "High - 2023",
@@ -433,13 +433,13 @@ const page = "index3";
        },
      };

-      var visitors_chart = new ApexCharts(
+      const visitors_chart = new ApexCharts(
        document.querySelector("#visitors-chart"),
        visitors_chart_options
      );
      visitors_chart.render();

-      var sales_chart_options = {
+      const sales_chart_options = {
        series: [
          {
            name: "Net Profit",
@@ -502,7 +502,7 @@ const page = "index3";
        },
      };

-      var sales_chart = new ApexCharts(
+      const sales_chart = new ApexCharts(
        document.querySelector("#sales-chart"),
        sales_chart_options
      );
--- a/src/html/pages/layout/fixed-complete.astro
+++ b/src/html/pages/layout/fixed-complete.astro
@@ -1,209 +0,0 @@
---
-import Head from "@components/_head.astro";
-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";
-
-const title = "AdminLTE 4 | Fixed Complete";
-const path = "../../../dist";
-const mainPage = "layout";
-const page = "fixed-complete";
---
-
-<!DOCTYPE html>
-<html lang="en">
-<!--begin::Head-->
-<head>
-  <Head title={title} path={path}/>
-</head>
-<!--end::Head-->
-<!--begin::Body-->
-<body class="layout-fixed-complete sidebar-expand-lg bg-body-tertiary">
-<!--begin::App Wrapper-->
-<div class="app-wrapper">
-  <Sidenav path={path} mainPage={mainPage} page={page}/>
-  <div class="app-main-wrapper">
-    <Topbar path={path}/>
-    <!--begin::App Main-->
-    <main class="app-main">
-      <!--begin::App Content Header-->
-      <div class="app-content-header">
-        <!--begin::Container-->
-        <div class="container-fluid">
-          <!--begin::Row-->
-          <div class="row">
-            <div class="col-sm-8">
-              <h3 class="mb-0">Fixed Complete <small>(Sidebar, Header & Footer)</small></h3>
-            </div>
-            <div class="col-sm-4">
-              <ol class="breadcrumb float-sm-end">
-                <li class="breadcrumb-item"><a href="#">Home</a></li>
-                <li class="breadcrumb-item active" aria-current="page">
-                  Fixed Layout
-                </li>
-              </ol>
-            </div>
-          </div>
-          <!--end::Row-->
-        </div>
-        <!--end::Container-->
-      </div>
-      <!--end::App Content Header-->
-      <!--begin::App Content-->
-      <div class="app-content">
-        <!--begin::Container-->
-        <div class="container-fluid">
-          <!--begin::Row-->
-          <div class="row">
-            <div class="col-12">
-              <!-- Default box -->
-              <div class="card">
-                <div class="card-header">
-                  <h3 class="card-title">Title</h3>
-
-                  <div class="card-tools">
-                    <button
-                      type="button"
-                      class="btn btn-tool"
-                      data-lte-toggle="card-collapse"
-                      title="Collapse"
-                    >
-                      <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
-                      <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
-                    </button>
-                    <button
-                      type="button"
-                      class="btn btn-tool"
-                      data-lte-toggle="card-remove"
-                      title="Remove"
-                    >
-                      <i class="bi bi-x-lg"></i>
-                    </button>
-                  </div>
-                </div>
-                <div class="card-body">
-                  <p>
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                  </p>
-                  <p>
-                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
-                    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
-                    praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
-                    amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-                    aliquam erat volutpat.
-                  </p>
-                  <p>
-                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
-                    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
-                    esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-                    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
-                    facilisi.
-                  </p>
-                  <p>
-                    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
-                    placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
-                    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-                    veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
-                    consequat.
-                  </p>
-                  <p>
-                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
-                    dolore eu feugiat nulla facilisis.
-                  </p>
-                  <p>
-                    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-                    diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
-                    vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
-                    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At
-                    accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt
-                    justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero
-                    voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
-                    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
-                  </p>
-                  <p>
-                    Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-                    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
-                    amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-                    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-                    clita kasd gubergren, no sea takimata sanctus.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
-                    labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
-                    et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-                  </p>
-                  <p>
-                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
-                    dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
-                    praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit
-                    amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
-                    aliquam erat volutpat.
-                  </p>
-                  <p>
-                    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
-                    aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
-                    esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et
-                    iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
-                    facilisi.
-                  </p>
-                  <p>
-                    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
-                    placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
-                    nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-                    veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
-                    consequat.
-                  </p>
-                  <p>
-                    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
-                    dolore eu feugiat nulla facilisis.
-                  </p>
-                </div>
-                <div class="card-footer">Footer</div>
-              </div>
-            </div>
-          </div>
-          <!--end::Row-->
-        </div>
-        <!--end::Container-->
-      </div>
-      <!--end::App Content-->
-    </main>
-
-    <div class="app-content-bottom-area">
-      <div class="row">
-        <div class="col-12 text-end">
-          <button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
-        </div>
-      </div>
-    </div>
-
-    <!--end::App Main-->
-    <Footer/>
-  </div>
-</div>
-<!--end::App Wrapper-->
-<!--begin::Script-->
-<Scripts path={path}/>
-<!--end::Script-->
-</body><!--end::Body-->
-</html>
--- a/src/html/pages/layout/layout-custom-area.astro
+++ b/src/html/pages/layout/layout-custom-area.astro
@@ -0,0 +1,144 @@
+---
+import Head from "@components/_head.astro";
+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";
+
+const title = "AdminLTE 4 | Layout Custom Area";
+const path = "../../../dist";
+const mainPage = "layout";
+const page = "layout-custom-area";
+---
+
+<!DOCTYPE html>
+<html lang="en">
+<!--begin::Head-->
+<head>
+  <Head title={title} path={path}/>
+</head>
+<!--end::Head-->
+<!--begin::Body-->
+<body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+<!--begin::App Wrapper-->
+<div class="app-wrapper">
+  <Topbar path={path}/>
+  <Sidenav path={path} mainPage={mainPage} page={page}/>
+
+    <!--begin::App Main-->
+    <main class="app-main">
+      <!--begin::App Content Top Area-->
+      <div class="app-content-top-area">
+        <!--begin::Container-->
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-6">
+              <div>App Content Top Area</div>
+            </div>
+
+            <div class="col-md-6 text-end">
+              <button type="submit" class="btn btn-primary" name="save" value="create">Create Admin</button>
+            </div>
+          </div>
+        </div>
+        <!--end::Container-->
+      </div>
+      <!--end::App Content Bottom Area-->
+      <!--begin::App Content Header-->
+      <div class="app-content-header">
+        <!--begin::Container-->
+        <div class="container-fluid">
+          <!--begin::Row-->
+          <div class="row">
+            <div class="col-sm-8">
+              <h3 class="mb-0"> Layout Custom Area </h3>
+            </div>
+            <div class="col-sm-4">
+              <ol class="breadcrumb float-sm-end">
+                <li class="breadcrumb-item"><a href="#">Home</a></li>
+                <li class="breadcrumb-item active" aria-current="page">
+                  Fixed Layout
+                </li>
+              </ol>
+            </div>
+          </div>
+          <!--end::Row-->
+        </div>
+        <!--end::Container-->
+      </div>
+      <!--end::App Content Header-->
+      <!--begin::App Content-->
+      <div class="app-content">
+        <!--begin::Container-->
+        <div class="container-fluid">
+          <!--begin::Row-->
+          <div class="row">
+            <div class="col-12">
+              <!-- Default box -->
+              <div class="card">
+                <div class="card-header">
+                  <h3 class="card-title">Title</h3>
+
+                  <div class="card-tools">
+                    <button
+                      type="button"
+                      class="btn btn-tool"
+                      data-lte-toggle="card-collapse"
+                      title="Collapse"
+                    >
+                      <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
+                      <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-tool"
+                      data-lte-toggle="card-remove"
+                      title="Remove"
+                    >
+                      <i class="bi bi-x-lg"></i>
+                    </button>
+                  </div>
+                </div>
+                <div class="card-body">
+                  Start creating your amazing application!
+                </div>
+                <!-- /.card-body -->
+                <div class="card-footer">Footer</div>
+                <!-- /.card-footer-->
+              </div>
+              <!-- /.card -->
+            </div>
+          </div>
+          <!--end::Row-->
+        </div>
+        <!--end::Container-->
+      </div>
+      <!--end::App Content-->
+
+      <!--begin::App Content Bottom Area-->
+      <div class="app-content-bottom-area">
+         <!--begin::Container-->
+        <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-6">
+              <div>App Content Bottom Area</div>
+            </div>
+
+            <div class="col-md-6 text-end">
+              <button type="submit" class="btn btn-secondary" name="save" value="create">Refresh</button>
+            </div>
+          </div>
+        </div>
+        <!--end::Container-->
+      </div>
+      <!--end::App Content Bottom Area-->
+    </main>
+    <!--end::App Main-->
+    <Footer/>
+</div>
+<!--end::App Wrapper-->
+<!--begin::Script-->
+<Scripts path={path}/>
+<!--end::Script-->
+</body><!--end::Body-->
+</html>
--- a/src/html/pages/tables/simple.astro
+++ b/src/html/pages/tables/simple.astro
@@ -56,7 +56,7 @@ const page = "simple";
            <!--begin::Row-->
            <div class="row">
              <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Bordered Table</h3>
                  </div>
@@ -72,7 +72,7 @@ const page = "simple";
                        </tr>
                      </thead>
                      <tbody>
-                        <tr>
+                        <tr class="align-middle">
                          <td>1.</td>
                          <td>Update software</td>
                          <td>
@@ -86,7 +86,7 @@ const page = "simple";
                          </td>
                          <td><span class="badge text-bg-danger">55%</span></td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>2.</td>
                          <td>Clean database</td>
                          <td>
@@ -102,7 +102,7 @@ const page = "simple";
                            <span class="badge text-bg-warning">70%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>3.</td>
                          <td>Cron job running</td>
                          <td>
@@ -120,7 +120,7 @@ const page = "simple";
                            <span class="badge text-bg-primary">30%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>4.</td>
                          <td>Fix and squish bugs</td>
                          <td>
@@ -164,7 +164,7 @@ const page = "simple";
                </div>
                <!-- /.card -->

-                <div class="card">
+                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Condensed Full Width Table</h3>
                  </div>
@@ -180,7 +180,7 @@ const page = "simple";
                        </tr>
                      </thead>
                      <tbody>
-                        <tr>
+                        <tr class="align-middle">
                          <td>1.</td>
                          <td>Update software</td>
                          <td>
@@ -194,7 +194,7 @@ const page = "simple";
                          </td>
                          <td><span class="badge text-bg-danger">55%</span></td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>2.</td>
                          <td>Clean database</td>
                          <td>
@@ -210,7 +210,7 @@ const page = "simple";
                            <span class="badge text-bg-warning">70%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>3.</td>
                          <td>Cron job running</td>
                          <td>
@@ -228,7 +228,7 @@ const page = "simple";
                            <span class="badge text-bg-primary">30%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>4.</td>
                          <td>Fix and squish bugs</td>
                          <td>
@@ -255,7 +255,7 @@ const page = "simple";
              </div>
              <!-- /.col -->
              <div class="col-md-6">
-                <div class="card">
+                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Simple Full Width Table</h3>

@@ -291,7 +291,7 @@ const page = "simple";
                        </tr>
                      </thead>
                      <tbody>
-                        <tr>
+                        <tr class="align-middle">
                          <td>1.</td>
                          <td>Update software</td>
                          <td>
@@ -305,7 +305,7 @@ const page = "simple";
                          </td>
                          <td><span class="badge text-bg-danger">55%</span></td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>2.</td>
                          <td>Clean database</td>
                          <td>
@@ -321,7 +321,7 @@ const page = "simple";
                            <span class="badge text-bg-warning">70%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>3.</td>
                          <td>Cron job running</td>
                          <td>
@@ -339,7 +339,7 @@ const page = "simple";
                            <span class="badge text-bg-primary">30%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>4.</td>
                          <td>Fix and squish bugs</td>
                          <td>
@@ -364,7 +364,7 @@ const page = "simple";
                </div>
                <!-- /.card -->

-                <div class="card">
+                <div class="card mb-4">
                  <div class="card-header">
                    <h3 class="card-title">Striped Full Width Table</h3>
                  </div>
@@ -380,7 +380,7 @@ const page = "simple";
                        </tr>
                      </thead>
                      <tbody>
-                        <tr>
+                        <tr class="align-middle">
                          <td>1.</td>
                          <td>Update software</td>
                          <td>
@@ -394,7 +394,7 @@ const page = "simple";
                          </td>
                          <td><span class="badge text-bg-danger">55%</span></td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>2.</td>
                          <td>Clean database</td>
                          <td>
@@ -410,7 +410,7 @@ const page = "simple";
                            <span class="badge text-bg-warning">70%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>3.</td>
                          <td>Cron job running</td>
                          <td>
@@ -428,7 +428,7 @@ const page = "simple";
                            <span class="badge text-bg-primary">30%</span>
                          </td>
                        </tr>
-                        <tr>
+                        <tr class="align-middle">
                          <td>4.</td>
                          <td>Fix and squish bugs</td>
                          <td>
--- a/src/html/pages/widgets/cards.astro
+++ b/src/html/pages/widgets/cards.astro
@@ -57,7 +57,7 @@ const page = "cards";

            <h5 class="mb-2">Abilities</h5>
            <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
              <div class="col-md-3">
                <div class="card card-primary collapsed-card">
                  <div class="card-header">
@@ -158,7 +158,7 @@ const page = "cards";

            <h5 class="mb-2">Card Outlined</h5>
            <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
              <div class="col-md-3">
                <div class="card card-outline card-primary collapsed-card">
                  <div class="card-header">
@@ -259,7 +259,7 @@ const page = "cards";

            <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
            <!--begin::Row-->
-            <div class="row">
+            <div class="row g-4 mb-4">
              <div class="col-md-3">
                <div class="card text-bg-primary collapsed-card">
                  <div class="card-header">
--- a/src/html/pages/widgets/small-box.astro
+++ b/src/html/pages/widgets/small-box.astro
@@ -126,7 +126,7 @@ const page = "small-box";
                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
                    ></path>
                  </svg>
-                  <a href="#" class="small-box-footer link-light link-underline-opacity-0 link-underline-opacity-50-hover">
+                  <a href="#" class="small-box-footer link-dark link-underline-opacity-0 link-underline-opacity-50-hover">
                    More info <i class="bi bi-link-45deg"></i>
                  </a>
                </div>
--- a/src/scss/_app-content.scss
+++ b/src/scss/_app-content.scss
@@ -1,52 +1,3 @@
 .app-content {
  padding: $lte-content-padding-y $lte-content-padding-x;
 }
-
-.app-content-top-area,
-.app-content-bottom-area{
-  display: flex;
-  align-items: center;
-  padding: $lte-content-padding-y $lte-content-padding-x;
-  overflow: auto;
-  background: $lte-app-footer-bg;
-
-  > .row {
-    display: contents;
-  }
-
-  &.app-content-top-area-sm,
-  &.app-content-bottom-area-sm{
-    min-height: $lte-app-content-bottom-area-height-sm;
-  }
-
-  &.app-content-top-area-md,
-  &.app-content-bottom-area-md{
-    min-height: $lte-app-content-bottom-area-height-md;
-  }
-  &.app-content-top-area-lg,
-  &.app-content-bottom-area-lg{
-    min-height: $lte-app-content-bottom-area-height-lg;
-  }
-  &.app-content-top-area-xl,
-  &.app-content-bottom-area-xl{
-    min-height: $lte-app-content-bottom-area-height-xl;
-  }
-}
-
-.app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
-.app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
-  padding-top: $grid-gutter-width * .625;
-  padding-bottom: $grid-gutter-width * .625;
-}
-
-.app-content-bottom-area {
-  border-top: $lte-app-footer-border-top;
-}
-.app-content-top-area {
-  border-bottom: $lte-app-footer-border-top;
-
-  + .app-main {
-    padding-top: $grid-gutter-width * .5;
-  }
-}
-
--- a/src/scss/_app-main.scss
+++ b/src/scss/_app-main.scss
@@ -1,8 +1,10 @@
 .app-main {
  position: relative;
+  display: flex;
+  flex-direction: column;
  grid-area: #{$lte-prefix}app-main;
  max-width: 100vw;
-  padding-bottom: $grid-gutter-width * .5;
+  padding-bottom: $lte-app-main-padding-bottom;
  @include transition($lte-transition-speed $lte-transition-fn);

  .app-content-header {
@@ -12,6 +14,28 @@
      padding: 0;
      margin-bottom: 0;
      line-height: 2.5rem;
+
+      a {
+        text-decoration: none;
+      }
    }
  }
+
+  .app-content-top-area,
+  .app-content-bottom-area {
+    color: $lte-app-content-bottom-area-color;
+    background-color: $lte-app-content-bottom-area-bg;
+  }
+
+  .app-content-top-area {
+    padding: $lte-app-content-top-area-padding-y $lte-app-content-top-area-padding-x;
+    border-bottom: $lte-app-content-top-area-top-border;
+  }
+
+  .app-content-bottom-area {
+    padding: $lte-app-content-bottom-area-padding-y $lte-app-content-bottom-area-padding-x;
+    margin-top: auto;
+    margin-bottom: $lte-app-content-bottom-area-margin-bottom;
+    border-top: $lte-app-content-bottom-area-top-border;
+  }
 }
--- a/src/scss/_app-sidebar.scss
+++ b/src/scss/_app-sidebar.scss
@@ -187,7 +187,7 @@

      .nav-arrow {
        @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: translateY(-50%) #{"/*rtl:rotate(180deg)*/"};
+        transform: translateY(-50%) #{"/*rtl:append:rotate(180deg)*/"};
        animation-name: fadeIn;
        animation-duration: $lte-transition-speed;
        animation-fill-mode: both;
@@ -244,7 +244,7 @@

    > .nav-link {
      .nav-arrow {
-        transform: translateY(-50%) rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+        transform: translateY(-50%) rotate(90deg) #{"/*rtl:ignore*/"};
      }
    }
  }
@@ -452,7 +452,6 @@
    /* stylelint-disable-next-line scss/selector-no-union-class-name */
    &#{$infix} {
      @include media-breakpoint-up($next) {
-        &.layout-fixed-complete,
        &.layout-fixed {
          .app-main-wrapper {
            display: flex;
@@ -477,11 +476,7 @@
            }
          }
        }
-        &.layout-fixed-complete {
-          .app-main-wrapper {
-            max-height: 100vh;
-          }
-        }
+
        &.sidebar-open {
          .nav-link > .nav-badge,
          .nav-link > p > .nav-badge {
--- a/src/scss/_bootstrap-variables.scss
+++ b/src/scss/_bootstrap-variables.scss
@@ -665,7 +665,7 @@ $headings-font-family:        null !default;
 $headings-font-style:         null !default;
 $headings-font-weight:        500 !default;
 $headings-line-height:        1.2 !default;
-$headings-color:              null !default;
+$headings-color:              inherit !default;
 // scss-docs-end headings-variables

 // scss-docs-start display-headings
@@ -715,6 +715,10 @@ $hr-border-color:             null !default; // Allows for inherited colors
 $hr-border-width:             var(--#{$prefix}border-width) !default;
 $hr-opacity:                  .25 !default;

+// scss-docs-start vr-variables
+$vr-border-width:             var(--#{$prefix}border-width) !default;
+// scss-docs-end vr-variables
+
 $legend-margin-bottom:        .5rem !default;
 $legend-font-size:            1.5rem !default;
 $legend-font-weight:          null !default;
@@ -724,6 +728,7 @@ $dt-font-weight:              $font-weight-bold !default;
 $list-inline-padding:         .5rem !default;

 $mark-padding:                .1875em !default;
+$mark-color:                  $body-color !default;
 $mark-bg:                     $yellow-100 !default;
 // scss-docs-end type-variables

@@ -740,25 +745,25 @@ $table-cell-padding-x-sm:     .25rem !default;

 $table-cell-vertical-align:   top !default;

-$table-color:                 var(--#{$prefix}body-color) !default;
-$table-bg:                    transparent !default;
+$table-color:                 var(--#{$prefix}emphasis-color) !default;
+$table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;

 $table-th-font-weight:        null !default;

 $table-striped-color:         $table-color !default;
 $table-striped-bg-factor:     .05 !default;
-$table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
+$table-striped-bg:            rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;

 $table-active-color:          $table-color !default;
 $table-active-bg-factor:      .1 !default;
-$table-active-bg:             rgba($black, $table-active-bg-factor) !default;
+$table-active-bg:             rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;

 $table-hover-color:           $table-color !default;
 $table-hover-bg-factor:       .075 !default;
-$table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
+$table-hover-bg:              rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;

-$table-border-factor:         .1 !default;
+$table-border-factor:         .2 !default;
 $table-border-width:          var(--#{$prefix}border-width) !default;
 $table-border-color:          var(--#{$prefix}border-color) !default;

@@ -848,6 +853,7 @@ $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
 $btn-link-disabled-color:     $gray-600 !default;
+$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%)) !default;

 // Allows for customizing button radius independently from global border radius
 $btn-border-radius:           var(--#{$prefix}border-radius) !default;
@@ -909,7 +915,7 @@ $input-disabled-border-color:           null !default;
 $input-color:                           var(--#{$prefix}body-color) !default;
 $input-border-color:                    var(--#{$prefix}border-color) !default;
 $input-border-width:                    $input-btn-border-width !default;
-$input-box-shadow:                      $box-shadow-inset !default;
+$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;

 $input-border-radius:                   var(--#{$prefix}border-radius) !default;
 $input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
@@ -1025,7 +1031,7 @@ $form-select-feedback-icon-size:        $input-height-inner-half $input-height-i
 $form-select-border-width:        $input-border-width !default;
 $form-select-border-color:        $input-border-color !default;
 $form-select-border-radius:       $input-border-radius !default;
-$form-select-box-shadow:          $box-shadow-inset !default;
+$form-select-box-shadow:          var(--#{$prefix}box-shadow-inset) !default;

 $form-select-focus-border-color:  $input-focus-border-color !default;
 $form-select-focus-width:         $input-focus-width !default;
@@ -1048,9 +1054,9 @@ $form-select-transition:          $input-transition !default;
 $form-range-track-width:          100% !default;
 $form-range-track-height:         .5rem !default;
 $form-range-track-cursor:         pointer !default;
-$form-range-track-bg:             var(--#{$prefix}tertiary-bg) !default;
+$form-range-track-bg:             var(--#{$prefix}secondary-bg) !default;
 $form-range-track-border-radius:  1rem !default;
-$form-range-track-box-shadow:     $box-shadow-inset !default;
+$form-range-track-box-shadow:     var(--#{$prefix}box-shadow-inset) !default;

 $form-range-thumb-width:                   1rem !default;
 $form-range-thumb-height:                  $form-range-thumb-width !default;
@@ -1226,7 +1232,8 @@ $navbar-dark-color:                 rgba($white, .55) !default;
 $navbar-dark-hover-color:           rgba($white, .75) !default;
 $navbar-dark-active-color:          $white !default;
 $navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+$navbar-dark-icon-color:            $navbar-dark-color !default;
+$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-icon-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
 $navbar-dark-brand-color:           $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
@@ -1248,10 +1255,10 @@ $dropdown-bg:                       var(--#{$prefix}body-bg) !default;
 $dropdown-border-color:             var(--#{$prefix}border-color-translucent) !default;
 $dropdown-border-radius:            var(--#{$prefix}border-radius) !default;
 $dropdown-border-width:             var(--#{$prefix}border-width) !default;
-$dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
 $dropdown-divider-bg:               $dropdown-border-color !default;
 $dropdown-divider-margin-y:         $spacer * .5 !default;
-$dropdown-box-shadow:               $box-shadow !default;
+$dropdown-box-shadow:               var(--#{$prefix}box-shadow) !default;

 $dropdown-link-color:               var(--#{$prefix}body-color) !default;
 $dropdown-link-hover-color:         $dropdown-link-color !default;
@@ -1439,8 +1446,8 @@ $popover-max-width:                 276px !default;
 $popover-border-width:              var(--#{$prefix}border-width) !default;
 $popover-border-color:              var(--#{$prefix}border-color-translucent) !default;
 $popover-border-radius:             var(--#{$prefix}border-radius-lg) !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                $box-shadow !default;
+$popover-inner-border-radius:       calc(#{$popover-border-radius} - #{$popover-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$popover-box-shadow:                var(--#{$prefix}box-shadow) !default;

 $popover-header-font-size:          $font-size-base !default;
 $popover-header-bg:                 var(--#{$prefix}secondary-bg) !default;
@@ -1514,8 +1521,8 @@ $modal-content-border-color:        var(--#{$prefix}border-color-translucent) !d
 $modal-content-border-width:        var(--#{$prefix}border-width) !default;
 $modal-content-border-radius:       var(--#{$prefix}border-radius-lg) !default;
 $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-$modal-content-box-shadow-xs:       $box-shadow-sm !default;
-$modal-content-box-shadow-sm-up:    $box-shadow !default;
+$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm) !default;
+$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow) !default;

 $modal-backdrop-bg:                 $black !default;
 $modal-backdrop-opacity:            .5 !default;
@@ -1553,9 +1560,6 @@ $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--#{$prefix}border-radius) !default;
 $alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
-$alert-bg-scale:                -80% !default;
-$alert-border-scale:            -70% !default;
-$alert-color-scale:             40% !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables

--- a/src/scss/_callouts.scss
+++ b/src/scss/_callouts.scss
@@ -11,6 +11,11 @@
  background-color: var(--#{$lte-prefix}callout-bg, var(--bs-gray-100));
  border-left: .25rem solid var(--#{$lte-prefix}callout-border, var(--bs-gray-300));

+  .callout-link {
+    font-weight: $lte-callout-link-font-weight;
+    color: var(--#{$prefix}callout-link-color);
+  }
+
  h4 {
    margin-bottom: .25rem;
  }
@@ -30,5 +35,6 @@
    --#{$lte-prefix}callout-color: var(--#{$prefix}#{$name}-text-emphasis);
    --#{$lte-prefix}callout-bg: var(--#{$prefix}#{$name}-bg-subtle);
    --#{$lte-prefix}callout-border: var(--#{$prefix}#{$name}-border-subtle);
+    --#{$prefix}callout-link-color: var(--#{$prefix}#{$name}-text-emphasis);
  }
 }
--- a/src/scss/_cards.scss
+++ b/src/scss/_cards.scss
@@ -172,6 +172,7 @@
      }

      a {
+        text-decoration: none;
        border-top: 3px solid transparent;

        &:hover {
--- a/src/scss/_compact-mode.scss
+++ b/src/scss/_compact-mode.scss
@@ -1,30 +1,4 @@
 .compact-mode {
-  .app-content-top-area:not(.app-content-top-area-sm):not(.app-content-top-area-md):not(.app-content-top-area-lg):not(.app-content-top-area-xl),
-  .app-content-bottom-area:not(.app-content-bottom-area-sm):not(.app-content-bottom-area-md):not(.app-content-bottom-area-lg):not(.app-content-bottom-area-xl) {
-    padding-top: $grid-gutter-width * .425;
-    padding-bottom: $grid-gutter-width * .425;
-  }
-  .app-content-top-area-sm,
-  .app-content-bottom-area-sm {
-    min-height: $lte-app-content-bottom-area-height-sm * .825;
-  }
-
-  .app-content-top-area-md,
-  .app-content-bottom-area-md {
-    min-height: $lte-app-content-bottom-area-height-md * .825;
-  }
-
-  .app-content-top-area-lg,
-  .app-content-bottom-area-lg {
-    min-height: $lte-app-content-bottom-area-height-lg * .825;
-  }
-
-  .app-content-top-area-xl,
-  .app-content-bottom-area-xl {
-    min-height: $lte-app-content-bottom-area-height-xl * .825;
-  }
-
-
  .app-header {
    max-height: $lte-app-header-height-compact;

--- a/src/scss/_direct-chat.scss
+++ b/src/scss/_direct-chat.scss
@@ -169,11 +169,16 @@
    @include clearfix();
    padding: 10px;
    margin: 0;
+    text-decoration: none;
    border-bottom: 1px solid rgba($black, .2);

    &:last-of-type {
      border-bottom: 0;
    }
+
+    a {
+      text-decoration: none;
+    }
  }
 }

--- a/src/scss/_dropdown.scss
+++ b/src/scss/_dropdown.scss
@@ -204,6 +204,7 @@
      border-bottom: 1px solid var(--#{$prefix}border-color-translucent);

      a {
+        text-decoration: none;
        @include media-breakpoint-up(sm) {
          color: var(--#{$prefix}body-color) !important;
          background-color: var(--#{$prefix}body-bg) !important;
--- a/src/scss/_info-box.scss
+++ b/src/scss/_info-box.scss
@@ -18,10 +18,10 @@
  .progress {
    height: 2px;
    margin: 5px 0;
-    background-color: rgba($black, .125);
+    background-color: rgba(var(--#{$lte-prefix}card-variant-color-rgb), .125);

    .progress-bar {
-      background-color: $white;
+      background-color: var(--#{$lte-prefix}card-variant-color);
    }
  }

@@ -62,14 +62,6 @@
    white-space: nowrap;
  }

-  @each $name, $color in $theme-colors {
-    .info-box {
-      .progress-bar {
-        background-color: color-contrast($color);
-      }
-    }
-  }
-
  .info-box-more {
    display: block;
  }
--- a/src/scss/_timeline.scss
+++ b/src/scss/_timeline.scss
@@ -58,6 +58,7 @@
        // Link in header
        > a {
          font-weight: 600;
+          text-decoration: none;
        }
      }
      // Item body and footer
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -59,18 +59,15 @@ $lte-app-header-link-padding-y:       $navbar-padding-y !default;
 $lte-app-header-height:               ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 $lte-app-header-height-compact:       ($nav-link-height-compact + ($lte-app-header-link-padding-y * 2)) !default;

+// APP MAIN
+// --------------------------------------------------------
+$lte-app-main-padding-bottom:       $grid-gutter-width * .5 !default;
+
 // CONTENT PADDING
 // --------------------------------------------------------
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;

-// MAIN CONTENT
-// --------------------------------------------------------
-$lte-app-content-bottom-area-height-sm: 3.5rem !default;
-$lte-app-content-bottom-area-height-md: 6rem !default;
-$lte-app-content-bottom-area-height-lg: 9rem !default;
-$lte-app-content-bottom-area-height-xl: 12rem !default;
-
 // MAIN FOOTER
 // --------------------------------------------------------
 $lte-app-footer-padding:           1rem !default;
@@ -81,6 +78,21 @@ $lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-a
 $lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
 $lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;

+// CONTENT BOTTOM AREA
+// --------------------------------------------------------
+$lte-app-content-bottom-area-margin-bottom: -$lte-app-main-padding-bottom !default;
+$lte-app-content-bottom-area-color:         $lte-app-footer-color !default;
+$lte-app-content-bottom-area-bg:            $lte-app-footer-bg !default;
+$lte-app-content-bottom-area-top-border:    $lte-app-footer-border-top !default;
+$lte-app-content-bottom-area-padding-y:     $lte-app-footer-padding !default;
+$lte-app-content-bottom-area-padding-x:     0 !default;
+
+// CONTENT TOP AREA
+// --------------------------------------------------------
+$lte-app-content-top-area-top-border:       $lte-app-footer-border-top !default;
+$lte-app-content-top-area-padding-y:     $lte-app-footer-padding !default;
+$lte-app-content-top-area-padding-x:     0 !default;
+
 // BRAND LINK
 // --------------------------------------------------------
 $navbar-brand-padding-y-compact:   $navbar-brand-padding-y * .75 !default;
@@ -101,6 +113,10 @@ $lte-card-title-font-weight: $font-weight-normal !default;
 // --------------------------------------------------------
 $lte-progress-bar-border-radius: 1px !default;

+// CALLOUTS
+// --------------------------------------------------------
+$lte-callout-link-font-weight: $alert-link-font-weight !default;
+
 // DIRECT CHAT
 // --------------------------------------------------------
 $lte-direct-chat-default-msg-bg: var(--#{$prefix}secondary-bg) !default;
--- a/src/scss/adminlte.scss
+++ b/src/scss/adminlte.scss
@@ -1,5 +1,5 @@
 /*!
- *   AdminLTE v4.0.0-alpha2
+ *   AdminLTE v4.0.0-beta2
 *   Author: Colorlib
 *   Website: AdminLTE.io <https://adminlte.io>
 *   License: Open source - MIT <https://opensource.org/licenses/MIT>
--- a/src/scss/pages/_lockscreen.scss
+++ b/src/scss/pages/_lockscreen.scss
@@ -18,6 +18,7 @@

    a {
      color: var(--#{$prefix}emphasis-color);
+      text-decoration: none;
    }
  }

--- a/src/scss/pages/_login_and_register.scss
+++ b/src/scss/pages/_login_and_register.scss
@@ -11,6 +11,7 @@

  a {
    color: var(--#{$prefix}secondary-color);
+    text-decoration: none;
  }
 }

--- a/src/ts/card-widget.ts
+++ b/src/ts/card-widget.ts
@@ -1,7 +1,8 @@
 /**
 * --------------------------------------------
- * AdminLTE card-widget.ts
- * License MIT
+ * @file AdminLTE card-widget.ts
+ * @description Card widget for AdminLTE.
+ * @license MIT
 * --------------------------------------------
 */

--- a/src/ts/direct-chat.ts
+++ b/src/ts/direct-chat.ts
@@ -1,7 +1,8 @@
 /**
 * --------------------------------------------
- * AdminLTE direct-chat.ts
- * License MIT
+ * @file AdminLTE direct-chat.ts
+ * @description Direct chat for AdminLTE.
+ * @license MIT
 * --------------------------------------------
 */

--- a/src/ts/fullscreen.ts
+++ b/src/ts/fullscreen.ts
@@ -1,8 +1,9 @@
 /**
- * ----------------------------------------------------------------------------
- * AdminLTE fullscreen.ts
- * License MIT
- * ----------------------------------------------------------------------------
+ * --------------------------------------------
+ * @file AdminLTE fullscreen.ts
+ * @description Fullscreen plugin for AdminLTE.
+ * @license MIT
+ * --------------------------------------------
 */

 import {
--- a/src/ts/layout.ts
+++ b/src/ts/layout.ts
@@ -1,7 +1,8 @@
 /**
 * --------------------------------------------
- * AdminLTE layout.ts
- * License MIT
+ * @file AdminLTE layout.ts
+ * @description Layout for AdminLTE.
+ * @license MIT
 * --------------------------------------------
 */

--- a/src/ts/push-menu.ts
+++ b/src/ts/push-menu.ts
@@ -1,7 +1,8 @@
 /**
 * --------------------------------------------
- * AdminLTE push-menu.ts
- * License MIT
+ * @file AdminLTE push-menu.ts
+ * @description Push menu for AdminLTE.
+ * @license MIT
 * --------------------------------------------
 */

@@ -155,7 +156,7 @@ onDOMContentLoaded(() => {
    const target = event.currentTarget as HTMLElement
    const data = new PushMenu(target, Defaults)
    data.collapse()
-  })
+  }, { passive: true })
  sidebarOverlay.addEventListener('click', event => {
    event.preventDefault()
    const target = event.currentTarget as HTMLElement
--- a/src/ts/treeview.ts
+++ b/src/ts/treeview.ts
@@ -1,7 +1,8 @@
 /**
 * --------------------------------------------
- * AdminLTE treeview.ts
- * License MIT
+ * @file AdminLTE treeview.ts
+ * @description Treeview plugin for AdminLTE.
+ * @license MIT
 * --------------------------------------------
 */

@@ -32,11 +33,13 @@ const SELECTOR_TREEVIEW_MENU = '.nav-treeview'
 const SELECTOR_DATA_TOGGLE = '[data-lte-toggle="treeview"]'

 const Default = {
-  animationSpeed: 300
+  animationSpeed: 300,
+  accordion: true
 }

 type Config = {
  animationSpeed: number;
+  accordion: boolean;
 }

 /**
@@ -56,6 +59,20 @@ class Treeview {
  open(): void {
    const event = new Event(EVENT_EXPANDED)

+    if (this._config.accordion) {
+      const openMenuList = this._element.parentElement?.querySelectorAll(`${SELECTOR_NAV_ITEM}.${CLASS_NAME_MENU_OPEN}`)
+
+      openMenuList?.forEach(openMenu => {
+        if (openMenu !== this._element.parentElement) {
+          openMenu.classList.remove(CLASS_NAME_MENU_OPEN)
+          const childElement = openMenu?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
+          if (childElement) {
+            slideUp(childElement, this._config.animationSpeed)
+          }
+        }
+      })
+    }
+
    this._element.classList.add(CLASS_NAME_MENU_OPEN)

    const childElement = this._element?.querySelector(SELECTOR_TREEVIEW_MENU) as HTMLElement | undefined
--- a/src/ts/util/index.ts
+++ b/src/ts/util/index.ts
@@ -83,7 +83,7 @@ const slideDown = (target: HTMLElement, duration = 500) => {
  }, duration)
 }

-/* TOOGLE */
+/* TOGGLE */
 const slideToggle = (target: HTMLElement, duration = 500) => {
  if (window.getComputedStyle(target).display === 'none') {
    slideDown(target, duration)