diff --git a/src/index.html b/src/index.html
index 01405fee6..8d819f3a5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
       })
@@ -19,8 +19,8 @@
         "path": "."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
             </div>
           </div>
         </div>
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <!-- Small boxes (Stat box) -->
             <div class="row">
@@ -346,13 +346,13 @@
           </div><!-- /.container-fluid -->
         </div>
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "."
diff --git a/src/index2.html b/src/index2.html
index bc6a2e8ba..2a354aa3f 100644
--- a/src/index2.html
+++ b/src/index2.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
       })
@@ -18,8 +18,8 @@
         "path": "."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -34,7 +34,7 @@
             </div>
           </div>
         </div>
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <!-- Info boxes -->
             <div class="row">
@@ -821,13 +821,13 @@
           </div><!-- /.container-fluid -->
         </div>
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "."
diff --git a/src/index3.html b/src/index3.html
index 13db62bd2..dc026740f 100644
--- a/src/index3.html
+++ b/src/index3.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "."
       })
@@ -19,8 +19,8 @@
         "path": "."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
             </div>
           </div>
         </div>
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-lg-6">
@@ -283,13 +283,13 @@
           </div><!-- /.container-fluid -->
         </div>
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "."
diff --git a/src/pages/UI/timeline.html b/src/pages/UI/timeline.html
index 36b545bd3..ee9841615 100644
--- a/src/pages/UI/timeline.html
+++ b/src/pages/UI/timeline.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <!-- Timelime example  -->
             <div class="row">
@@ -145,13 +145,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/forms/general.html b/src/pages/forms/general.html
index e01605890..4b19139aa 100644
--- a/src/pages/forms/general.html
+++ b/src/pages/forms/general.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row g-4">
               <!-- Start column -->
@@ -80,13 +80,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/layout/fixed-sidebar.html b/src/pages/layout/fixed-sidebar.html
index c5455b38e..7d1b68f11 100644
--- a/src/pages/layout/fixed-sidebar.html
+++ b/src/pages/layout/fixed-sidebar.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
@@ -70,13 +70,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/layout/layout-rtl.html b/src/pages/layout/layout-rtl.html
index ae8354e60..e6b50543f 100644
--- a/src/pages/layout/layout-rtl.html
+++ b/src/pages/layout/layout-rtl.html
@@ -8,7 +8,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -19,8 +19,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -36,7 +36,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
@@ -71,13 +71,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/layout/sidebar-mini.html b/src/pages/layout/sidebar-mini.html
index 213ed8669..aa737407b 100644
--- a/src/pages/layout/sidebar-mini.html
+++ b/src/pages/layout/sidebar-mini.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary sidebar-mini sidebar-collapse">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
@@ -70,13 +70,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/layout/unfixed-sidebar.html b/src/pages/layout/unfixed-sidebar.html
index 328fd0e4a..ed00b5a2f 100644
--- a/src/pages/layout/unfixed-sidebar.html
+++ b/src/pages/layout/unfixed-sidebar.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-12">
@@ -70,13 +70,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/tables/simple.html b/src/pages/tables/simple.html
index e3f776320..f08b93dec 100644
--- a/src/pages/tables/simple.html
+++ b/src/pages/tables/simple.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <div class="row">
               <div class="col-md-6">
@@ -319,13 +319,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/widgets/cards.html b/src/pages/widgets/cards.html
index e5228d07a..f6bd8c21d 100644
--- a/src/pages/widgets/cards.html
+++ b/src/pages/widgets/cards.html
@@ -7,7 +7,7 @@
     })
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -18,8 +18,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -35,7 +35,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <h4 class="mb-2">Cards</h4>
 
@@ -295,13 +295,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/widgets/info-box.html b/src/pages/widgets/info-box.html
index 48079c47b..58a09e834 100644
--- a/src/pages/widgets/info-box.html
+++ b/src/pages/widgets/info-box.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -19,8 +19,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -36,7 +36,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <h5 class="mb-2">Info Box</h5>
             <div class="row">
@@ -346,13 +346,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/pages/widgets/small-box.html b/src/pages/widgets/small-box.html
index 8b33f7b5f..f368016ec 100644
--- a/src/pages/widgets/small-box.html
+++ b/src/pages/widgets/small-box.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" integrity="sha256-kqxQgiD1u2DslOB2UFKOtmYl+CpHQK2gaM3gU2V4EoY=" crossorigin="anonymous">
   </head>
   <body class="layout-fixed bg-body-tertiary">
-    <div class="wrapper">
+    <div class="app-wrapper">
       @@include('./dashboard/_topbar.html', {
         "path": "../.."
       })
@@ -19,8 +19,8 @@
         "path": "../.."
       })
       <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
+      <main class="app-main">
+        <div class="app-content-header">
           <div class="container-fluid">
             <div class="row">
               <div class="col-sm-6">
@@ -36,7 +36,7 @@
           </div>
         </div>
         <!-- Main content -->
-        <div class="content">
+        <div class="app-content">
           <div class="container-fluid">
             <!-- Small Box (Stat card) -->
             <h5 class="mb-2">Small Box</h5>
@@ -107,13 +107,13 @@
         </div>
         <!-- /.content -->
       </main>
-      <!-- /.content-wrapper -->
+      <!-- /.app-content -->
 
       @@include('./dashboard/_footer.html', {
         "path": "../.."
       })
     </div>
-    <!--  ./wrapper -->
+    <!--  ./app-wrapper -->
 
     @@include('./_scripts.html', {
       "path": "../.."
diff --git a/src/partials/_scripts.html b/src/partials/_scripts.html
index 4f6d1a997..207fc6af8 100644
--- a/src/partials/_scripts.html
+++ b/src/partials/_scripts.html
@@ -14,7 +14,7 @@
 
 <!-- OPTIONAL SCRIPTS -->
 <script>
-  const SELECTOR_SIDEBAR = '.sidebar'
+  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
   const Default = {
     scrollbarTheme: 'os-theme-light',
     scrollbarAutoHide: 'leave'
@@ -22,7 +22,7 @@
 
   document.addEventListener("DOMContentLoaded", function() {
     if (typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
-      OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR), {
+      OverlayScrollbarsGlobal.OverlayScrollbars(document.querySelector(SELECTOR_SIDEBAR_WRAPPER), {
         scrollbars: {
           theme: Default.scrollbarTheme,
           autoHide: Default.scrollbarAutoHide,
diff --git a/src/partials/dashboard/_footer.html b/src/partials/dashboard/_footer.html
index dd300f858..990cc4336 100644
--- a/src/partials/dashboard/_footer.html
+++ b/src/partials/dashboard/_footer.html
@@ -1,5 +1,5 @@
 <!-- Main Footer -->
-<footer class="main-footer">
+<footer class="app-footer">
   <!-- To the end -->
   <div class="float-end d-none d-sm-inline">
     Anything you want
diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html
index 58f285c85..c0290c835 100644
--- a/src/partials/dashboard/_sidenav.html
+++ b/src/partials/dashboard/_sidenav.html
@@ -1,17 +1,17 @@
-<!-- Main Sidebar Container -->
-<aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
-  <div class="brand-container">
-    <a href="javascript:;" class="brand-link">
+<!-- Sidebar Container -->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <div class="sidebar-brand">
+    <a href="@@path/index.html" class="brand-link">
       <img src="@@path/assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
       <span class="brand-text fw-light">AdminLTE 4</span>
     </a>
-    <a class="pushmenu mx-1 d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
+    <a class="pushmenu d-none d-lg-block" data-lte-toggle="sidebar-mini" href="javascript:;" role="button"><i class="fa-solid fa-angle-double-left"></i></a>
   </div>
   <!-- Sidebar -->
-  <div class="sidebar">
+  <div class="sidebar-wrapper">
     <nav class="mt-2">
       <!-- Sidebar Menu -->
-      <ul class="nav nav-pills nav-sidebar flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
         <li class="nav-item @@if (context.mainPage === 'dashboard') {menu-open}">
           <a href="javascript:;" class="nav-link @@if (context.mainPage === 'dashboard') {active}">
             <i class="nav-icon fa-solid fa-gauge-high"></i>
diff --git a/src/partials/dashboard/_topbar.html b/src/partials/dashboard/_topbar.html
index 3b2375326..a6724af13 100644
--- a/src/partials/dashboard/_topbar.html
+++ b/src/partials/dashboard/_topbar.html
@@ -1,5 +1,5 @@
 <!-- Navbar -->
-<nav class="main-header navbar navbar-expand bg-body">
+<nav class="app-header navbar navbar-expand bg-body">
   <div class="container-fluid">
     <!-- Start navbar links -->
     <ul class="navbar-nav">
diff --git a/src/scss/_app-footer.scss b/src/scss/_app-footer.scss
new file mode 100644
index 000000000..03125fc1c
--- /dev/null
+++ b/src/scss/_app-footer.scss
@@ -0,0 +1,14 @@
+//
+// Core: Main Footer
+//
+
+.app-footer {
+  grid-area: #{$lte-prefix}app-footer;
+  width: inherit;
+  max-width: 100vw;
+  padding: $lte-app-footer-padding;
+  color: $lte-app-footer-color;
+  background-color: $lte-app-footer-bg;
+  border-top: $lte-app-footer-border-top;
+}
+
diff --git a/src/scss/_main-header.scss b/src/scss/_app-header.scss
similarity index 65%
rename from src/scss/_main-header.scss
rename to src/scss/_app-header.scss
index bb8596243..ea750f99d 100644
--- a/src/scss/_main-header.scss
+++ b/src/scss/_app-header.scss
@@ -2,11 +2,11 @@
 // Core: Main Header
 //
 
-.main-header {
-  z-index: $lte-zindex-main-header;
-  grid-area: #{$lte-prefix}main-header;
+.app-header {
+  z-index: $lte-zindex-app-header;
+  grid-area: #{$lte-prefix}app-header;
   max-width: 100vw;
-  border-bottom: $lte-main-header-bottom-border;
+  border-bottom: $lte-app-header-bottom-border;
 
   .nav-link {
     position: relative;
diff --git a/src/scss/_app-main.scss b/src/scss/_app-main.scss
new file mode 100644
index 000000000..4343d955c
--- /dev/null
+++ b/src/scss/_app-main.scss
@@ -0,0 +1,19 @@
+.app-main {
+  grid-area: #{$lte-prefix}app-main;
+  max-width: 100vw;
+  padding-bottom: 1rem;
+
+  .app-content-header {
+    padding: 1rem $lte-content-padding-x;
+
+    .breadcrumb {
+      padding: 0;
+      margin-bottom: 0;
+      line-height: 2.5rem;
+    }
+  }
+
+  .app-content {
+    padding: $lte-content-padding-y $lte-content-padding-x;
+  }
+}
diff --git a/src/scss/_app-sidebar.scss b/src/scss/_app-sidebar.scss
new file mode 100644
index 000000000..904d6d249
--- /dev/null
+++ b/src/scss/_app-sidebar.scss
@@ -0,0 +1,198 @@
+.app-sidebar {
+  --#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg};
+  --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color};
+  --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color};
+  --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color};
+  --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
+  --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
+  --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg};
+  --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color};
+  --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color};
+  --#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg};
+  --#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color};
+  --#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg};
+  --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color};
+
+  z-index: $lte-zindex-sidebar;
+  grid-area: #{$lte-prefix}app-sidebar;
+  min-width: var(--#{$lte-prefix}sidebar-width);
+  max-width: var(--#{$lte-prefix}sidebar-width);
+  @include transition($lte-sidebar-transition);
+}
+
+.sidebar-wrapper {
+  padding-top: $lte-sidebar-padding-y;
+  padding-right: $lte-sidebar-padding-x;
+  padding-bottom: $lte-sidebar-padding-y;
+  padding-left: $lte-sidebar-padding-x;
+  overflow-x: hidden;
+  overflow-y: auto;
+  @include scrollbar-color-gray();
+  @include scrollbar-width-thin();
+
+  // Sidebar Menu. First level links
+  .sidebar-menu > .nav-item {
+    // links
+    > .nav-link {
+      &:active,
+      &:focus {
+        color: var(--#{$lte-prefix}sidebar-color);
+      }
+    }
+
+    > .nav-link.active {
+      color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
+      // background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
+    }
+
+    // Hover and active states
+    &.menu-open > .nav-link,
+    &:hover > .nav-link,
+    > .nav-link:focus  {
+      color: var(--#{$lte-prefix}sidebar-hover-color);
+      // background-color: var(--#{$lte-prefix}sidebar-hover-bg);
+    }
+
+    // First Level Submenu
+    > .nav-treeview {
+      background-color: var(--#{$lte-prefix}sidebar-submenu-bg);
+    }
+  }
+
+  // Section Heading
+  .nav-header {
+    color: var(--#{$lte-prefix}sidebar-header-color);
+    background-color: inherit;
+  }
+
+  // All links within the sidebar menu
+  a {
+    color: var(--#{$lte-prefix}sidebar-color);
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+    }
+  }
+
+  // All submenus
+  .nav-treeview {
+    > .nav-item {
+      > .nav-link {
+        color: var(--#{$lte-prefix}sidebar-submenu-color);
+
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-submenu-hover-color);
+          // background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
+        }
+      }
+
+      > .nav-link.active {
+        &,
+        &:hover,
+        &:focus {
+          color: var(--#{$lte-prefix}sidebar-submenu-active-color);
+          background-color: var(--#{$lte-prefix}sidebar-submenu-active-bg);
+        }
+      }
+
+      > .nav-link:hover {
+        background-color: var(--#{$lte-prefix}sidebar-submenu-hover-bg);
+      }
+    }
+  }
+}
+
+// Sidebar navigation menu
+.sidebar-menu {
+  // All levels
+  .nav-item {
+    > .nav-link {
+      margin-bottom: .2rem;
+
+      .nav-arrow {
+        @include transition(transform $lte-transition-fn $lte-transition-speed);
+        transform: none #{"/*rtl:rotate(180deg)*/"};
+      }
+    }
+  }
+
+  // All levels
+  .nav-link > .nav-arrow,
+  .nav-link > p > .nav-arrow {
+    position: absolute;
+    top: .7rem;
+    right: 1rem;
+  }
+
+  .nav-link {
+    position: relative;
+    width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
+    @include transition(width $lte-transition-fn $lte-transition-speed);
+    @include border-radius($border-radius);
+
+    p {
+      display: inline;
+      padding-left: .5rem;
+      margin: 0;
+    }
+
+    .nav-icon {
+      padding-left: .3rem;
+    }
+  }
+
+  .nav-header {
+    padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
+    font-size: .9rem;
+  }
+
+  // Tree view menu
+  .nav-treeview {
+    display: none;
+    padding: 0;
+    list-style: none;
+  }
+
+  .menu-open {
+    > .nav-treeview {
+      display: block;
+    }
+
+    > .nav-link {
+      .nav-arrow {
+        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
+      }
+    }
+  }
+}
+
+.hold-transition {
+  .app-sidebar {
+    @include transition(none !important);
+    animation: none !important;
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    &.app-sidebar,
+    .app-sidebar {
+      --#{$lte-prefix}sidebar-hover-bg: #{$lte-sidebar-hover-bg-dark};
+      --#{$lte-prefix}sidebar-color: #{$lte-sidebar-color-dark};
+      --#{$lte-prefix}sidebar-hover-color: #{$lte-sidebar-hover-color-dark};
+      --#{$lte-prefix}sidebar-active-color: #{$lte-sidebar-active-color-dark};
+      --#{$lte-prefix}sidebar-menu-active-bg: #{$primary};
+      --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($primary)};
+      --#{$lte-prefix}sidebar-submenu-bg: #{$lte-sidebar-submenu-bg-dark};
+      --#{$lte-prefix}sidebar-submenu-color: #{$lte-sidebar-submenu-color-dark};
+      --#{$lte-prefix}sidebar-submenu-hover-color: #{$lte-sidebar-submenu-hover-color-dark};
+      --#{$lte-prefix}sidebar-submenu-hover-bg: #{$lte-sidebar-submenu-hover-bg-dark};
+      --#{$lte-prefix}sidebar-submenu-active-color: #{$lte-sidebar-submenu-active-color-dark};
+      --#{$lte-prefix}sidebar-submenu-active-bg: #{$lte-sidebar-submenu-active-bg-dark};
+      --#{$lte-prefix}sidebar-header-color: #{$lte-sidebar-header-color-dark};
+    }
+  }
+}
+
diff --git a/src/scss/_wrapper.scss b/src/scss/_app-wrapper.scss
similarity index 55%
rename from src/scss/_wrapper.scss
rename to src/scss/_app-wrapper.scss
index 52a5bfbd2..eb88b5d9a 100644
--- a/src/scss/_wrapper.scss
+++ b/src/scss/_app-wrapper.scss
@@ -2,13 +2,13 @@
 // Core: Layout
 //
 
-.wrapper {
+.app-wrapper {
   position: relative;
   display: grid;
   grid-template-areas:
-    "#{$lte-prefix}main-sidebar #{$lte-prefix}main-header"
-    "#{$lte-prefix}main-sidebar #{$lte-prefix}content-wrapper"
-    "#{$lte-prefix}main-sidebar #{$lte-prefix}main-footer";
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-header"
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-main"
+    "#{$lte-prefix}app-sidebar #{$lte-prefix}app-footer";
   grid-template-rows: min-content 1fr min-content;
   grid-gap: 0;
   align-content: stretch;
@@ -17,6 +17,6 @@
   min-height: 100vh;
 }
 
-:not(.layout-mobile) .wrapper {
+:not(.layout-mobile) .app-wrapper {
   grid-template-columns: auto 1fr;
 }
diff --git a/src/scss/_brand-container.scss b/src/scss/_brand-container.scss
deleted file mode 100644
index 44b15e3ea..000000000
--- a/src/scss/_brand-container.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-//
-// Core: Brand
-//
-
-.brand-container {
-  display: grid;
-  grid-template-areas: "#{$lte-prefix}brand-link #{$lte-prefix}pushmenu";
-  justify-content: space-between;
-  padding: $lte-brand-link-padding-y $lte-sidebar-padding-x;
-  overflow: hidden;
-  font-size: $navbar-brand-font-size;
-  white-space: nowrap;
-  @include transition(width $lte-transition-speed $lte-transition-fn);
-
-  .brand-link {
-    grid-area: #{$lte-prefix}brand-link;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    .brand-image {
-      float: left;
-      width: auto;
-      max-height: 33px;
-      margin-top: -3px;
-      margin-right: .5rem;
-      margin-left: .8rem;
-      line-height: .8;
-    }
-  }
-
-  .pushmenu {
-    grid-area: #{$lte-prefix}pushmenu;
-  }
-
-  .sidebar-bg-dark & {
-    border-bottom: $lte-brand-link-border-buttom solid $gray-700;
-
-    .brand-link,
-    .pushmenu {
-      color: rgba($white, .8);
-
-      &:hover {
-        color: $white;
-      }
-    }
-  }
-
-  .sidebar-bg-light & {
-    border-bottom: $lte-brand-link-border-buttom solid $gray-300;
-
-    .brand-link,
-    .pushmenu {
-      color: rgba($black, .8);
-
-      &:hover {
-        color: $black;
-      }
-    }
-  }
-}
-
-.sidebar-collapse:not(.sidebar-is-hover) {
-  .brand-container {
-    justify-content: center;
-
-    .brand-link {
-      width: 0;
-    }
-  }
-}
diff --git a/src/scss/_content-header.scss b/src/scss/_content-header.scss
deleted file mode 100644
index b0b81cca8..000000000
--- a/src/scss/_content-header.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.content-header {
-  padding: 1rem $lte-content-padding-x;
-
-  .breadcrumb {
-    padding: 0;
-    margin-bottom: 0;
-    line-height: 2.5rem;
-  }
-}
diff --git a/src/scss/_content-wrapper.scss b/src/scss/_content-wrapper.scss
deleted file mode 100644
index 2a8876c52..000000000
--- a/src/scss/_content-wrapper.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.content-wrapper {
-  grid-area: #{$lte-prefix}content-wrapper;
-  max-width: 100vw;
-  padding-bottom: 1rem;
-}
diff --git a/src/scss/_content.scss b/src/scss/_content.scss
deleted file mode 100644
index cb7b71de9..000000000
--- a/src/scss/_content.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.content {
-  padding: $lte-content-padding-y $lte-content-padding-x;
-}
diff --git a/src/scss/_layout-fixed.scss b/src/scss/_layout-fixed.scss
index 8f1b705ac..9f6a67408 100644
--- a/src/scss/_layout-fixed.scss
+++ b/src/scss/_layout-fixed.scss
@@ -1,6 +1,6 @@
 @include media-breakpoint-up($lte-sidebar-breakpoint) {
   .layout-fixed {
-    .main-sidebar {
+    .app-sidebar {
       position: fixed;
       top: auto;
       bottom: 0;
@@ -8,30 +8,30 @@
       float: none;
       max-height: 100vh;
 
-      .sidebar {
-        height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width));
+      .sidebar-wrapper {
+        height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
       }
     }
 
-    .main-header,
-    .content-wrapper,
-    .main-footer {
+    .app-header,
+    .app-main,
+    .app-footer {
       margin-left: var(--#{$lte-prefix}sidebar-width);
       @include transition($lte-transition-speed $lte-transition-fn);
     }
 
     &.sidebar-collapse {
-      .main-header,
-      .content-wrapper,
-      .main-footer {
+      .app-header,
+      .app-main,
+      .app-footer {
         margin-left: $lte-sidebar-mini-width;
       }
     }
 
     &.sidebar-close {
-      .main-header,
-      .content-wrapper,
-      .main-footer {
+      .app-header,
+      .app-main,
+      .app-footer {
         margin-left: 0;
       }
     }
diff --git a/src/scss/_layout-mobile.scss b/src/scss/_layout-mobile.scss
index 0e8a2094b..ff4097c63 100644
--- a/src/scss/_layout-mobile.scss
+++ b/src/scss/_layout-mobile.scss
@@ -1,14 +1,14 @@
 @include media-breakpoint-down($lte-sidebar-breakpoint) {
-  .wrapper {
-    .main-sidebar {
+  .app-wrapper {
+    .app-sidebar {
       position: fixed;
       top: 0;
       bottom: 0;
       max-height: 100vh;
       margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1); // stylelint-disable-line function-disallowed-list
 
-      .sidebar {
-        height: subtract(100vh, add($lte-main-header-height-inner, $lte-main-header-bottom-border-width));
+      .sidebar-wrapper {
+        height: subtract(100vh, add($lte-app-header-height-inner, $lte-app-header-bottom-border-width));
         overflow-x: hidden;
         overflow-y: auto;
       }
@@ -16,7 +16,7 @@
   }
 
   .sidebar-open {
-    .main-sidebar {
+    .app-sidebar {
       margin-left: 0;
     }
   }
diff --git a/src/scss/_main-footer.scss b/src/scss/_main-footer.scss
deleted file mode 100644
index 40a4eb8b2..000000000
--- a/src/scss/_main-footer.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-//
-// Core: Main Footer
-//
-
-.main-footer {
-  grid-area: #{$lte-prefix}main-footer;
-  width: inherit;
-  max-width: 100vw;
-  padding: $lte-main-footer-padding;
-  color: $lte-main-footer-color;
-  background-color: $lte-main-footer-bg;
-  border-top: $lte-main-footer-border-top;
-}
-
diff --git a/src/scss/_main-sidebar.scss b/src/scss/_main-sidebar.scss
deleted file mode 100644
index bbe8d322a..000000000
--- a/src/scss/_main-sidebar.scss
+++ /dev/null
@@ -1,220 +0,0 @@
-//
-// Core: Main Sidebar
-//
-
-
-.main-sidebar {
-  @include transition($lte-sidebar-transition);
-  z-index: $lte-zindex-sidebar;
-  grid-area: #{$lte-prefix}main-sidebar;
-  min-width: var(--#{$lte-prefix}sidebar-width);
-  max-width: var(--#{$lte-prefix}sidebar-width);
-
-  .nav-sidebar > .nav-item {
-    > .nav-link.active {
-      color: var(--#{$lte-prefix}sidebar-menu-active-color) !important;
-      background-color: var(--#{$lte-prefix}sidebar-menu-active-bg) !important;
-    }
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .sidebar-color-#{$color} {
-    --#{$lte-prefix}sidebar-menu-active-bg: #{$value};
-    --#{$lte-prefix}sidebar-menu-active-color: #{color-contrast($value)};
-  }
-}
-
-.sidebar-bg-dark {
-  --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg};
-  --#{$lte-prefix}sidebar-dark-hover-bg: #{$lte-sidebar-dark-hover-bg};
-  --#{$lte-prefix}sidebar-dark-color: #{$lte-sidebar-dark-color};
-  --#{$lte-prefix}sidebar-dark-hover-color: #{$lte-sidebar-dark-hover-color};
-  --#{$lte-prefix}sidebar-dark-active-color: #{$lte-sidebar-dark-active-color};
-  --#{$lte-prefix}sidebar-dark-submenu-bg: #{$lte-sidebar-dark-submenu-bg};
-  --#{$lte-prefix}sidebar-dark-submenu-color: #{$lte-sidebar-dark-submenu-color};
-  --#{$lte-prefix}sidebar-dark-submenu-hover-color: #{$lte-sidebar-dark-submenu-hover-color};
-  --#{$lte-prefix}sidebar-dark-submenu-hover-bg: #{$lte-sidebar-dark-submenu-hover-bg};
-  --#{$lte-prefix}sidebar-dark-submenu-active-color: #{$lte-sidebar-dark-submenu-active-color};
-  --#{$lte-prefix}sidebar-dark-submenu-active-bg: #{$lte-sidebar-dark-submenu-active-bg};
-  --#{$lte-prefix}sidebar-dark-header-color: #{$lte-sidebar-dark-header-color};
-
-  // Sidebar background color
-  background-color: var(--#{$lte-prefix}sidebar-dark-bg);
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      &:active {
-        color: var(--#{$lte-prefix}sidebar-dark-color);
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link,
-    > .nav-link:focus  {
-      color: var(--#{$lte-prefix}sidebar-dark-hover-color);
-      background-color: var(--#{$lte-prefix}sidebar-dark-hover-bg);
-    }
-
-    > .nav-link.active {
-      color: var(--#{$lte-prefix}sidebar-dark-hover-color);
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: var(--#{$lte-prefix}sidebar-dark-submenu-bg);
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: var(--#{$lte-prefix}sidebar-dark-header-color);
-    background-color: inherit;
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: var(--#{$lte-prefix}sidebar-dark-color);
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: var(--#{$lte-prefix}sidebar-dark-submenu-color);
-
-        &:hover,
-        &:focus {
-          color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-color);
-          background-color: var(--#{$lte-prefix}sidebar-dark-submenu-hover-bg);
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover,
-        &:focus {
-          color: var(--#{$lte-prefix}sidebar-dark-submenu-active-color);
-          background-color: var(--#{$lte-prefix}sidebar-dark-submenu-active-bg);
-        }
-      }
-    }
-  }
-}
-
-.sidebar-bg-light {
-  --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg};
-  --#{$lte-prefix}sidebar-light-hover-bg: #{$lte-sidebar-light-hover-bg};
-  --#{$lte-prefix}sidebar-light-color: #{$lte-sidebar-light-color};
-  --#{$lte-prefix}sidebar-light-hover-color: #{$lte-sidebar-light-hover-color};
-  --#{$lte-prefix}sidebar-light-active-color: #{$lte-sidebar-light-active-color};
-  --#{$lte-prefix}sidebar-light-submenu-bg: #{$lte-sidebar-light-submenu-bg};
-  --#{$lte-prefix}sidebar-light-submenu-color: #{$lte-sidebar-light-submenu-color};
-  --#{$lte-prefix}sidebar-light-submenu-hover-color: #{$lte-sidebar-light-submenu-hover-color};
-  --#{$lte-prefix}sidebar-light-submenu-hover-bg: #{$lte-sidebar-light-submenu-hover-bg};
-  --#{$lte-prefix}sidebar-light-submenu-active-color: #{$lte-sidebar-light-submenu-active-color};
-  --#{$lte-prefix}sidebar-light-submenu-active-bg: #{$lte-sidebar-light-submenu-active-bg};
-  --#{$lte-prefix}sidebar-light-header-color: #{$lte-sidebar-light-header-color};
-
-  // Sidebar background color
-  background-color: var(--#{$lte-prefix}sidebar-light-bg);
-
-  // Sidebar Menu. First level links
-  .nav-sidebar > .nav-item {
-    // links
-    > .nav-link {
-      &:active,
-      &:focus {
-        color: var(--#{$lte-prefix}sidebar-light-color);
-      }
-    }
-
-    // Hover and active states
-    &.menu-open > .nav-link,
-    &:hover > .nav-link {
-      color: var(--#{$lte-prefix}sidebar-light-hover-color);
-      background-color: var(--#{$lte-prefix}sidebar-light-hover-bg);
-    }
-
-    > .nav-link.active {
-      color: var(--#{$lte-prefix}sidebar-light-active-color);
-    }
-
-    // First Level Submenu
-    > .nav-treeview {
-      background-color: var(--#{$lte-prefix}sidebar-light-submenu-bg);
-    }
-  }
-
-  // Section Heading
-  .nav-header {
-    color: var(--#{$lte-prefix}sidebar-light-header-color);
-    background-color: inherit;
-  }
-
-  // All links within the sidebar menu
-  .sidebar {
-    a {
-      color: var(--#{$lte-prefix}sidebar-light-color);
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-
-  // All submenus
-  .nav-treeview {
-    > .nav-item {
-      > .nav-link {
-        color: var(--#{$lte-prefix}sidebar-light-submenu-color);
-
-        &:hover,
-        &:focus {
-          color: var(--#{$lte-prefix}sidebar-light-submenu-hover-color);
-          background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
-        }
-      }
-
-      > .nav-link.active {
-        &,
-        &:hover {
-          color: var(--#{$lte-prefix}sidebar-light-submenu-active-color);
-          background-color: var(--#{$lte-prefix}sidebar-light-submenu-active-bg);
-        }
-      }
-
-      > .nav-link:hover {
-        background-color: var(--#{$lte-prefix}sidebar-light-submenu-hover-bg);
-      }
-    }
-  }
-}
-
-.hold-transition {
-  .main-sidebar {
-    @include transition(none !important);
-    animation: none !important;
-  }
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .sidebar-bg-dark {
-      --#{$lte-prefix}sidebar-dark-bg: #{$lte-sidebar-dark-bg-dark};
-    }
-    .sidebar-bg-light {
-      --#{$lte-prefix}sidebar-light-bg: #{$lte-sidebar-light-bg-dark};
-    }
-  }
-}
diff --git a/src/scss/_nav-sidebar.scss b/src/scss/_nav-sidebar.scss
deleted file mode 100644
index 0d7a720d7..000000000
--- a/src/scss/_nav-sidebar.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-// Sidebar navigation menu
-.nav-sidebar {
-  // All levels
-  .nav-item {
-    > .nav-link {
-      margin-bottom: .2rem;
-
-      .nav-arrow {
-        @include transition(transform $lte-transition-fn $lte-transition-speed);
-        transform: none #{"/*rtl:rotate(180deg)*/"};
-      }
-    }
-  }
-
-  // All levels
-  .nav-link > .nav-arrow,
-  .nav-link > p > .nav-arrow {
-    position: absolute;
-    top: .7rem;
-    right: 1rem;
-  }
-
-  .nav-link {
-    position: relative;
-    width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
-    @include transition(width $lte-transition-fn $lte-transition-speed);
-
-    p {
-      display: inline;
-      padding-left: .5rem;
-      margin: 0;
-    }
-
-    .nav-icon {
-      padding-left: .3rem;
-    }
-  }
-
-  .nav-header {
-    padding: $nav-link-padding-y ($nav-link-padding-y * 1.5);
-    font-size: .9rem;
-  }
-
-  // Tree view menu
-  .nav-treeview {
-    display: none;
-    padding: 0;
-    list-style: none;
-  }
-
-  .menu-open {
-    > .nav-treeview {
-      display: block;
-    }
-  }
-
-  .menu-open,
-  .menu-is-opening {
-    > .nav-link {
-      .nav-arrow {
-        transform: rotate(90deg) #{"/*rtl:rotate(90deg)*/"};
-      }
-    }
-  }
-}
diff --git a/src/scss/_sidebar-brand.scss b/src/scss/_sidebar-brand.scss
new file mode 100644
index 000000000..201338808
--- /dev/null
+++ b/src/scss/_sidebar-brand.scss
@@ -0,0 +1,56 @@
+//
+// Core: Brand
+//
+
+.sidebar-brand {
+  display: flex;
+  justify-content: space-between;
+  padding: $lte-brand-link-padding-y $lte-brand-link-padding-x;
+  overflow: hidden;
+  font-size: $navbar-brand-font-size;
+  white-space: nowrap;
+  border-bottom: $lte-brand-link-border-buttom solid var(--#{$prefix}border-color);
+  @include transition(width $lte-transition-speed $lte-transition-fn);
+
+  .brand-link {
+    flex: 1;
+    &:hover {
+      text-decoration: none;
+    }
+
+    .brand-image {
+      float: left;
+      width: auto;
+      max-height: 33px;
+      margin-top: -3px;
+      margin-right: .5rem;
+      margin-left: .8rem;
+      line-height: .8;
+    }
+  }
+
+  .pushmenu {
+    flex: 0;
+    margin-left: auto;
+  }
+
+  .brand-link,
+  .pushmenu {
+    color: rgba(var(--#{$prefix}emphasis-color-rgb), .8);
+    @include transition(flex $lte-transition-speed $lte-transition-fn, width $lte-transition-speed $lte-transition-fn);
+    &:hover {
+      color: var(--#{$prefix}emphasis-color);
+    }
+  }
+}
+
+.sidebar-collapse:not(.sidebar-is-hover) {
+  .sidebar-brand {
+    .brand-link {
+      width: 0;
+    }
+    .pushmenu {
+      flex: auto;
+    }
+  }
+}
diff --git a/src/scss/_sidebar-close.scss b/src/scss/_sidebar-close.scss
index 187335138..1a4b2c1dd 100644
--- a/src/scss/_sidebar-close.scss
+++ b/src/scss/_sidebar-close.scss
@@ -1,5 +1,5 @@
 .sidebar-close {
-  .main-sidebar {
+  .app-sidebar {
     // stylelint-disable-next-line
     margin-left: calc(var(--#{$lte-prefix}sidebar-width) * -1);
   }
diff --git a/src/scss/_sidebar-collapse.scss b/src/scss/_sidebar-collapse.scss
index 56d86720c..ebb01f842 100644
--- a/src/scss/_sidebar-collapse.scss
+++ b/src/scss/_sidebar-collapse.scss
@@ -3,58 +3,56 @@
 //
 
 // A fix for text overflow while transitioning from sidebar mini to full sidebar
-.nav-sidebar,
-.nav-sidebar > .nav-header,
-.nav-sidebar .nav-link {
+.sidebar-menu,
+.sidebar-menu > .nav-header,
+.sidebar-menu .nav-link {
   white-space: nowrap;
 }
 
 .sidebar-collapse {
-  .main-sidebar {
+  .app-sidebar {
     min-width: $lte-sidebar-mini-width;
     max-width: $lte-sidebar-mini-width;
   }
 
   // Make the sidebar headers
-  .nav-sidebar .nav-header {
+  .sidebar-menu .nav-header {
     display: none;
   }
 
-  .nav-sidebar {
+  .sidebar-menu {
     .nav-link {
       width: $lte-sidebar-mini-width - $lte-sidebar-padding-x * 2;
     }
   }
 
-  .nav-sidebar .nav-link p {
+  .sidebar-menu .nav-link p {
     width: 0;
     white-space: nowrap;
   }
 
-  .nav-sidebar .nav-link p,
+  .sidebar-menu .nav-link p,
   .brand-link {
-    margin-left: -10px;
-    visibility: hidden;
     animation-name: fadeOut;
     animation-duration: $lte-transition-speed;
     animation-fill-mode: both;
   }
 
   &.sidebar-is-hover {
-    .main-sidebar {
+    .app-sidebar {
       min-width: var(--#{$lte-prefix}sidebar-width);
       max-width: var(--#{$lte-prefix}sidebar-width);
     }
 
-    .nav-sidebar .nav-header {
+    .sidebar-menu .nav-header {
       display: inline-block;
     }
 
-    .nav-sidebar .nav-link {
+    .sidebar-menu .nav-link {
       width: subtract(var(--#{$lte-prefix}sidebar-width), $lte-sidebar-padding-x * 2);
     }
 
-    .nav-sidebar .nav-link p,
+    .sidebar-menu .nav-link p,
     .brand-link {
       margin-left: 0;
       visibility: visible;
@@ -63,4 +61,13 @@
       animation-fill-mode: both;
     }
   }
+
+  &:not(.sidebar-is-hover) {
+    .sidebar-menu .nav-link p {
+      .float-end {
+        // clear: both;
+        float: none !important;
+      }
+    }
+  }
 }
diff --git a/src/scss/_sidebar.scss b/src/scss/_sidebar.scss
deleted file mode 100644
index d04f20bde..000000000
--- a/src/scss/_sidebar.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.sidebar {
-  // min-height: 100%;
-  padding-top: $lte-sidebar-padding-y;
-  padding-right: $lte-sidebar-padding-x;
-  padding-bottom: $lte-sidebar-padding-y;
-  padding-left: $lte-sidebar-padding-x;
-  overflow-x: hidden;
-  overflow-y: auto;
-  @include scrollbar-color-gray();
-  @include scrollbar-width-thin();
-}
diff --git a/src/scss/_variables-dark.scss b/src/scss/_variables-dark.scss
index 81bfe9a77..c4b64e623 100644
--- a/src/scss/_variables-dark.scss
+++ b/src/scss/_variables-dark.scss
@@ -1,9 +1,14 @@
-// Body background (Affects main content background only)
-$lte-main-bg-dark:                 $body-tertiary-bg-dark !default;
-$lte-main-color-dark:              $body-color-dark !default;
+// SIDEBAR SKINS
+// --------------------------------------------------------
 
-// Dark sidebar
-$lte-sidebar-dark-bg-dark:         $dark !default;
-
-// Light sidebar
-$lte-sidebar-light-bg-dark:        $light !default;
+$lte-sidebar-hover-bg-dark:               rgba(255, 255, 255, .1) !default;
+$lte-sidebar-color-dark:                  #c2c7d0 !default;
+$lte-sidebar-hover-color-dark:            $white !default;
+$lte-sidebar-active-color-dark:           $white !default;
+$lte-sidebar-submenu-bg-dark:             transparent !default;
+$lte-sidebar-submenu-color-dark:          $lte-sidebar-color-dark !default;
+$lte-sidebar-submenu-hover-color-dark:    $white !default;
+$lte-sidebar-submenu-hover-bg-dark:       $lte-sidebar-hover-bg-dark !default;
+$lte-sidebar-submenu-active-color-dark:   $white !default;
+$lte-sidebar-submenu-active-bg-dark:      rgba(255, 255, 255, .1) !default;
+$lte-sidebar-header-color-dark:           tint-color(#c2c7d0, 5%) !default;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 2a168b013..d408aaf50 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,13 +1,8 @@
 // Custom AdminLTE Variables
 
-// Prefix for :root CSS variables
+// Prefix for :root CSS variables and others.
 $lte-prefix:                      lte- !default;
 
-// LAYOUT
-// --------------------------------------------------------
-
-$lte-font-size-root:              1rem !default;
-
 // TRANSITIONS SETTINGS
 // --------------------------------------------------------
 
@@ -21,11 +16,6 @@ $lte-sidebar-width:               250px !default;
 $lte-sidebar-breakpoint:          lg !default;
 $lte-sidebar-padding-x:           .5rem !default;
 $lte-sidebar-padding-y:           .5rem !default;
-$lte-sidebar-custom-height:       4rem !default;
-$lte-sidebar-custom-height-lg:    6rem !default;
-$lte-sidebar-custom-height-xl:    8rem !default;
-$lte-sidebar-custom-padding-x:    .85rem !default;
-$lte-sidebar-custom-padding-y:    .5rem !default;
 $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transition-fn,
   max-width $lte-transition-speed $lte-transition-fn,
   margin-left $lte-transition-speed $lte-transition-fn,
@@ -34,33 +24,17 @@ $lte-sidebar-transition:          min-width $lte-transition-speed $lte-transitio
 // SIDEBAR SKINS
 // --------------------------------------------------------
 
-// Dark sidebar
-$lte-sidebar-dark-bg:                     $gray-800 !default;
-$lte-sidebar-dark-hover-bg:               rgba(255, 255, 255, .1) !default;
-$lte-sidebar-dark-color:                  #c2c7d0 !default;
-$lte-sidebar-dark-hover-color:            $white !default;
-$lte-sidebar-dark-active-color:           $white !default;
-$lte-sidebar-dark-submenu-bg:             transparent !default;
-$lte-sidebar-dark-submenu-color:          $lte-sidebar-dark-color !default;
-$lte-sidebar-dark-submenu-hover-color:    $white !default;
-$lte-sidebar-dark-submenu-hover-bg:       $lte-sidebar-dark-hover-bg !default;
-$lte-sidebar-dark-submenu-active-color:   $lte-sidebar-dark-bg !default;
-$lte-sidebar-dark-submenu-active-bg:      rgba(255, 255, 255, .9) !default;
-$lte-sidebar-dark-header-color:           tint-color(#c2c7d0, 5%) !default;
-
-// Light sidebar
-$lte-sidebar-light-bg:                    $white !default;
-$lte-sidebar-light-hover-bg:              rgba($black, .1) !default;
-$lte-sidebar-light-color:                 $gray-800 !default;
-$lte-sidebar-light-hover-color:           $gray-900 !default;
-$lte-sidebar-light-active-color:          $black !default;
-$lte-sidebar-light-submenu-bg:            transparent !default;
-$lte-sidebar-light-submenu-color:         #777 !default;
-$lte-sidebar-light-submenu-hover-color:   $black !default;
-$lte-sidebar-light-submenu-hover-bg:      $lte-sidebar-light-hover-bg !default;
-$lte-sidebar-light-submenu-active-color:  $lte-sidebar-light-hover-color !default;
-$lte-sidebar-light-submenu-active-bg:     $lte-sidebar-light-submenu-hover-bg !default;
-$lte-sidebar-light-header-color:          shade-color($gray-800, 5%) !default;
+$lte-sidebar-hover-bg:              rgba($black, .1) !default;
+$lte-sidebar-color:                 $gray-800 !default;
+$lte-sidebar-hover-color:           $gray-900 !default;
+$lte-sidebar-active-color:          $black !default;
+$lte-sidebar-submenu-bg:            transparent !default;
+$lte-sidebar-submenu-color:         #777 !default;
+$lte-sidebar-submenu-hover-color:   $black !default;
+$lte-sidebar-submenu-hover-bg:      $lte-sidebar-hover-bg !default;
+$lte-sidebar-submenu-active-color:  $lte-sidebar-hover-color !default;
+$lte-sidebar-submenu-active-bg:     $lte-sidebar-submenu-hover-bg !default;
+$lte-sidebar-header-color:          shade-color($gray-800, 5%) !default;
 
 // SIDEBAR MINI
 // --------------------------------------------------------
@@ -68,64 +42,39 @@ $lte-sidebar-mini-width:          ($nav-link-padding-x + $lte-sidebar-padding-x
 $lte-sidebar-nav-icon-width:      $lte-sidebar-mini-width - (($lte-sidebar-padding-x + $nav-link-padding-x) * 2) !default;
 $lte-sidebar-user-image-width:    $lte-sidebar-nav-icon-width + ($nav-link-padding-x * .5) !default;
 
-// CONTROL SIDEBAR
-// --------------------------------------------------------
-$lte-control-sidebar-width:       $lte-sidebar-width !default;
-
 // MAIN HEADER
 // --------------------------------------------------------
-$lte-main-header-bottom-border-width:  $border-width !default;
-$lte-main-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
-$lte-main-header-bottom-border:        $lte-main-header-bottom-border-width solid $lte-main-header-bottom-border-color !default;
-$lte-main-header-link-padding-y:       $navbar-padding-y !default;
-$lte-main-header-height-inner:         ($nav-link-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height:               add($lte-main-header-height-inner, $lte-main-header-bottom-border-width) !default;
-$lte-nav-link-sm-padding-y:            .35rem !default;
-$lte-nav-link-sm-height:               ($font-size-sm * $line-height-sm + $lte-nav-link-sm-padding-y * 1.785) !default;
-$lte-main-header-height-sm-inner:      ($lte-nav-link-sm-height + ($lte-main-header-link-padding-y * 2)) !default;
-$lte-main-header-height-sm:            add($lte-main-header-height-sm-inner, $lte-main-header-bottom-border-width) !default;
+$lte-app-header-bottom-border-width:  $border-width !default;
+$lte-app-header-bottom-border-color:  var(--#{$prefix}border-color) !default;
+$lte-app-header-bottom-border:        $lte-app-header-bottom-border-width solid $lte-app-header-bottom-border-color !default;
+$lte-app-header-link-padding-y:       $navbar-padding-y !default;
+$lte-app-header-height-inner:         ($nav-link-height + ($lte-app-header-link-padding-y * 2)) !default;
 
 // Content padding
 $lte-content-padding-y:           0 !default;
 $lte-content-padding-x:           .5rem !default;
 
-// IMAGE SIZES
-// --------------------------------------------------------
-$lte-img-size-sm:   1.875rem !default;
-$lte-img-size-md:   3.75rem !default;
-$lte-img-size-lg:   6.25rem !default;
-$lte-img-size-push: .625rem !default;
-
 // MAIN FOOTER
 // --------------------------------------------------------
-$lte-main-footer-padding:           1rem !default;
-$lte-main-footer-padding-sm:        $lte-main-footer-padding * .812 !default;
-$lte-main-footer-border-top-width:  1px !default;
-$lte-main-footer-border-top-color:  var(--#{$prefix}border-color) !default;
-$lte-main-footer-border-top:        $lte-main-footer-border-top-width solid $lte-main-footer-border-top-color !default;
-$lte-main-footer-height-inner:      (($lte-font-size-root * $line-height-base) + ($lte-main-footer-padding * 2)) !default;
-$lte-main-footer-height:            add($lte-main-footer-height-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-height-sm-inner:   (($font-size-sm * $line-height-base) + ($lte-main-footer-padding-sm * 2)) !default;
-$lte-main-footer-height-sm:         add($lte-main-footer-height-sm-inner, $lte-main-footer-border-top-width) !default;
-$lte-main-footer-bg:                var(--#{$prefix}body-bg) !default;
-$lte-main-footer-color:             var(--#{$prefix}secondary-color) !default;
+$lte-app-footer-padding:           1rem !default;
+$lte-app-footer-border-top-width:  1px !default;
+$lte-app-footer-border-top-color:  var(--#{$prefix}border-color) !default;
+$lte-app-footer-border-top:        $lte-app-footer-border-top-width solid $lte-app-footer-border-top-color !default;
+$lte-app-footer-bg:                var(--#{$prefix}body-bg) !default;
+$lte-app-footer-color:             var(--#{$prefix}secondary-color) !default;
 
 // BRAND LINK
 // --------------------------------------------------------
 $lte-brand-link-padding-y:        $navbar-brand-padding-y + $navbar-padding-y !default;
+$lte-brand-link-padding-x:        $lte-sidebar-padding-x !default;
 $lte-brand-link-border-buttom:    1px !default;
 
 
 // Cards
 // --------------------------------------------------------
-$lte-card-dark-border-color: tint-color($gray-900, 10%) !default;
 $lte-card-shadow: 0 0 1px rgba(var(--#{$prefix}body-color-rgb), .125), 0 1px 3px rgba(var(--#{$prefix}body-color-rgb), .2) !default;
 $lte-card-title-font-size: 1.1rem !default;
-$lte-card-title-font-size-sm: 1rem !default;
 $lte-card-title-font-weight: $font-weight-normal !default;
-$lte-card-nav-link-padding-sm-y: .4rem !default;
-$lte-card-nav-link-padding-sm-x: .8rem !default;
-$lte-card-img-size: $lte-img-size-sm !default;
 
 // PROGRESS BARS
 // --------------------------------------------------------
@@ -139,41 +88,5 @@ $lte-direct-chat-default-msg-border-color: var(--#{$prefix}border-color) !defaul
 
 // Z-INDEX
 // --------------------------------------------------------
-$lte-zindex-main-header:          $zindex-fixed + 4 !default;
+$lte-zindex-app-header:          $zindex-fixed + 4 !default;
 $lte-zindex-sidebar:              $zindex-fixed + 8 !default;
-$lte-zindex-main-footer:          $zindex-fixed + 2 !default;
-$lte-zindex-control-sidebar:      $zindex-fixed + 1 !default;
-$lte-zindex-toasts:               $lte-zindex-sidebar + 2 !default;
-$lte-zindex-content-wrapper:      $lte-zindex-sidebar - 2 !default;
-$lte-zindex-preloader:            $lte-zindex-toasts + 2 !default;
-
-// Body background (Affects main content background only)
-$lte-main-bg:                   #f4f6f9 !default;
-$lte-main-color:                  $black !default;
-
-// BUTTON
-// --------------------------------------------------------
-$lte-button-padding-y-xs: .125rem !default;
-$lte-button-padding-x-xs: .25rem !default;
-$lte-button-line-height-xs: $line-height-sm !default;
-$lte-button-font-size-xs: ($font-size-base * .75) !default;
-$lte-button-border-radius-xs: .15rem !default;
-
-// RIBBON
-// --------------------------------------------------------
-$lte-ribbon-border-size: 3px !default;
-$lte-ribbon-line-height: 100% !default;
-$lte-ribbon-padding: .375rem 0 !default;
-$lte-ribbon-font-size: .8rem !default;
-$lte-ribbon-width: 90px !default;
-$lte-ribbon-wrapper-size: 70px !default;
-$lte-ribbon-top: 10px !default;
-$lte-ribbon-right: -2px !default;
-$lte-ribbon-lg-wrapper-size: 120px !default;
-$lte-ribbon-lg-width: 160px !default;
-$lte-ribbon-lg-top: 26px !default;
-$lte-ribbon-lg-right: 0 !default;
-$lte-ribbon-xl-wrapper-size: 180px !default;
-$lte-ribbon-xl-width: 240px !default;
-$lte-ribbon-xl-top: 47px !default;
-$lte-ribbon-xl-right: 4px !default;
diff --git a/src/scss/mixins/_animations.scss b/src/scss/mixins/_animations.scss
index 6ace4c640..65dbb07b8 100644
--- a/src/scss/mixins/_animations.scss
+++ b/src/scss/mixins/_animations.scss
@@ -32,20 +32,24 @@
 
 @keyframes fadeIn {
   from {
+    visibility: hidden;
     opacity: 0;
   }
 
   to {
+    visibility: visible;
     opacity: 1;
   }
 }
 
 @keyframes fadeOut {
   from {
+    visibility: visible;
     opacity: 1;
   }
 
   to {
+    visibility: hidden;
     opacity: 0;
   }
 }
diff --git a/src/scss/parts/_core.scss b/src/scss/parts/_core.scss
index 92863a7aa..83d67bc27 100644
--- a/src/scss/parts/_core.scss
+++ b/src/scss/parts/_core.scss
@@ -3,18 +3,14 @@
 //
 
 @import "../root";
-@import "../wrapper";
-@import "../main-header";
-@import "../brand-container";
-@import "../main-sidebar";
-@import "../sidebar";
-@import "../nav-sidebar";
+@import "../app-wrapper";
+@import "../app-header";
+@import "../app-sidebar";
+@import "../sidebar-brand";
 @import "../sidebar-collapse";
 @import "../sidebar-close";
-@import "../content-wrapper";
-@import "../content-header";
-@import "../content";
-@import "../main-footer";
+@import "../app-main";
+@import "../app-footer";
 @import "../layout-fixed";
 @import "../layout-mobile";
 @import "../dropdown";
diff --git a/src/ts/push-menu.ts b/src/ts/push-menu.ts
index e9d694b70..b272fbd88 100644
--- a/src/ts/push-menu.ts
+++ b/src/ts/push-menu.ts
@@ -30,14 +30,14 @@ const CLASS_NAME_SIDEBAR_IS_HOVER = 'sidebar-is-hover'
 const CLASS_NAME_MENU_OPEN = 'menu-open'
 const CLASS_NAME_LAYOUT_MOBILE = 'layout-mobile'
 
-const SELECTOR_SIDEBAR = '.sidebar'
-const SELECTOR_NAV_SIDEBAR = '.nav-sidebar'
+const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
+const SELECTOR_SIDEBAR_MENU = '.sidebar-menu'
 const SELECTOR_NAV_ITEM = '.nav-item'
 const SELECTOR_NAV_TREEVIEW = '.nav-treeview'
 const SELECTOR_MINI_TOGGLE = '[data-lte-toggle="sidebar-mini"]'
 const SELECTOR_FULL_TOGGLE = '[data-lte-toggle="sidebar-full"]'
 const SELECTOR_LAYOUT_MOBILE = `.${CLASS_NAME_LAYOUT_MOBILE}`
-const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
+const SELECTOR_APP_MAIN = '.app-main'
 
 const Defaults = {
   onLayoutMobile: 992
@@ -70,7 +70,7 @@ class PushMenu {
       navTree.style.removeProperty('height')
     }
 
-    const navSidebar = document.querySelector(SELECTOR_NAV_SIDEBAR)
+    const navSidebar = document.querySelector(SELECTOR_SIDEBAR_MENU)
     const navItem = navSidebar?.querySelectorAll(SELECTOR_NAV_ITEM)
 
     if (navItem) {
@@ -111,7 +111,7 @@ class PushMenu {
   }
 
   sidebarHover(): void {
-    const selSidebar = document.querySelector(SELECTOR_SIDEBAR)
+    const selSidebar = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
 
     if (selSidebar) {
       selSidebar.addEventListener('mouseover', () => {
@@ -175,7 +175,7 @@ class PushMenu {
     this.sidebarHover()
 
     const targetLayoutMobile = document.querySelector(SELECTOR_LAYOUT_MOBILE)
-    const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_CONTENT_WRAPPER)
+    const targetContentWrapper = targetLayoutMobile?.querySelector(SELECTOR_APP_MAIN)
 
     if (targetContentWrapper) {
       targetContentWrapper.addEventListener('touchstart', this.removeOverlaySidebar)
