diff --git a/src/pages/demo.html b/src/pages/demo.html
deleted file mode 100644
index 4c0386559..000000000
--- a/src/pages/demo.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Demo</title>
-</head>
-<body>
-
-</body>
-</html>
diff --git a/src/pages/forms/general.html b/src/pages/forms/general.html
index 28c390ec9..2e6913c05 100644
--- a/src/pages/forms/general.html
+++ b/src/pages/forms/general.html
@@ -4,20 +4,20 @@
 <!-- <html lang="en" dir="rtl"> -->
   <head>
     @@include('./_head.html', {
-      "path": "../../",
+      "path": "../..",
       "title": "AdminLTE 4 | General Form Elements"
     })
   </head>
   <body class="layout-fixed">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
-        "path": "../../"
+        "path": "../.."
       })
 
       @@include('./dashboard/_sidenav.html', {
         "mainPage": "forms",
         "page": "general",
-        "path": "../../"
+        "path": "../.."
       })
       <!-- Main content -->
       <div class="content-wrapper">
@@ -73,13 +73,13 @@
       <!-- /.content-wrapper -->
 
       @@include('./dashboard/_footer.html', {
-        "path": "../../"
+        "path": "../.."
       })
     </div>
     <!--  ./wrapper -->
 
     @@include('./_scripts.html', {
-      "path": "../../"
+      "path": "../.."
     })
   </body>
 </html>
diff --git a/src/pages/widgets.html b/src/pages/widgets.html
index 57efb2ba1..ce52478a7 100644
--- a/src/pages/widgets.html
+++ b/src/pages/widgets.html
@@ -4,7 +4,7 @@
 <!-- <html lang="en" dir="rtl"> -->
   <head>
     @@include('./_head.html', {
-      "path": "../",
+      "path": "..",
       "title": "AdminLTE 4 | General Form Elements"
     })
     <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
@@ -12,13 +12,13 @@
   <body class="layout-fixed">
     <div class="wrapper">
       @@include('./dashboard/_topbar.html', {
-        "path": "../"
+        "path": ".."
       })
 
       @@include('./dashboard/_sidenav.html', {
         "mainPage": "pages",
         "page": "widgets",
-        "path": "../"
+        "path": ".."
       })
       <!-- Main content -->
       <div class="content-wrapper">
@@ -407,13 +407,13 @@
       <!-- /.content-wrapper -->
 
       @@include('./dashboard/_footer.html', {
-        "path": "../"
+        "path": ".."
       })
     </div>
     <!--  ./wrapper -->
 
     @@include('./_scripts.html', {
-      "path": "../"
+      "path": ".."
     })
   </body>
 </html>
diff --git a/src/partials/_head.html b/src/partials/_head.html
index 5b170f43a..152c21bd3 100644
--- a/src/partials/_head.html
+++ b/src/partials/_head.html
@@ -4,9 +4,13 @@
 <!-- If add @@path/css/dark/adminlte-dark.css then the page supports both dark and light color schemes, and the page author prefers / default is light. -->
 <meta name="color-scheme" content="light dark">
 <title>@@title</title>
+<!-- Google Font: Source Sans Pro -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
+<!-- Font Awesome -->
+<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
+<!-- Theme style -->
 <!-- For dark mode use @@path/css/dark/adminlte-dark.css, remove dist/css/adminlte.css -->
 <!-- <link rel="stylesheet" href="@@path/css/dark/adminlte-dark.css"> -->
 <!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
 <!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css"> -->
 <link rel="stylesheet" href="@@path/css/adminlte.css">
-<link rel="stylesheet" href="@@path/vendor/@fortawesome/fontawesome-free/css/all.min.css">
diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html
index 13493773b..c1b99d2c5 100644
--- a/src/partials/dashboard/_sidenav.html
+++ b/src/partials/dashboard/_sidenav.html
@@ -24,25 +24,19 @@
             <li class="nav-item">
               <a href="@@path/index.html" class="nav-link @@if (context.page === 'index') {active}">
                 <i class="nav-icon far fa-circle"></i>
-                <p>
-                  Dashboard v1
-                </p>
+                <p>Dashboard v1</p>
               </a>
             </li>
             <li class="nav-item">
               <a href="@@path/index2.html" class="nav-link @@if (context.page === 'index2') {active}">
                 <i class="nav-icon far fa-circle"></i>
-                <p>
-                  Dashboard v2
-                </p>
+                <p>Dashboard v2</p>
               </a>
             </li>
             <li class="nav-item">
               <a href="@@path/index3.html" class="nav-link @@if (context.page === 'index3') {active}">
                 <i class="nav-icon far fa-circle"></i>
-                <p>
-                  Dashboard v3
-                </p>
+                <p>Dashboard v3</p>
               </a>
             </li>
           </ul>
@@ -68,16 +62,18 @@
             <li class="nav-item">
               <a href="@@path/pages/forms/general.html" class="nav-link @@if (context.page === 'general') {active}">
                 <i class="nav-icon far fa-circle"></i>
-                <p>
-                  General Elements
-                </p>
+                <p>General Elements</p>
               </a>
             </li>
           </ul>
         </li>
-
         <li class="nav-header">MULTI LEVEL EXAMPLE</li>
-
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon fas fa-circle"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
         <li class="nav-item">
           <a href="#" class="nav-link">
             <i class="nav-icon fas fa-circle"></i>
@@ -87,6 +83,12 @@
             </p>
           </a>
           <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon far fa-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
             <li class="nav-item">
               <a href="#" class="nav-link">
                 <i class="nav-icon far fa-circle"></i>
@@ -99,9 +101,19 @@
                 <li class="nav-item">
                   <a href="#" class="nav-link">
                     <i class="nav-icon far fa-dot-circle"></i>
-                    <p>
-                      Level 3
-                    </p>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-dot-circle"></i>
+                    <p>Level 3</p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-dot-circle"></i>
+                    <p>Level 3</p>
                   </a>
                 </li>
               </ul>
@@ -109,13 +121,36 @@
             <li class="nav-item">
               <a href="#" class="nav-link">
                 <i class="nav-icon far fa-circle"></i>
-                <p>
-                  Level 2
-                </p>
+                <p>Level 2</p>
               </a>
             </li>
           </ul>
         </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon fas fa-circle"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-header">LABELS</li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon far fa-circle text-danger"></i>
+            <p class="text">Important</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon far fa-circle text-warning"></i>
+            <p>Warning</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon far fa-circle text-info"></i>
+            <p>Informational</p>
+          </a>
+        </li>
       </ul>
     </nav>
   </div>
diff --git a/src/partials/dashboard/_topbar.html b/src/partials/dashboard/_topbar.html
index b72f7089a..a833aac20 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">
+<nav class="main-header navbar navbar-expand navbar-light">
   <div class="container-fluid">
     <ul class="navbar-nav">
       <li class="nav-item">
@@ -11,16 +11,39 @@
       <li class="nav-item">
         <a href="#" class="nav-link">Contact</a>
       </li>
-      <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-          Dropdown
+    </ul>
+    <!-- Right navbar links -->
+    <ul class="navbar-nav mr-auto">
+      <!-- Navbar Search -->
+      <li class="nav-item">
+        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+          <i class="fas fa-search"></i>
+        </a>
+      </li>
+
+      <!-- Messages Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-comments"></i>
+          <span class="badge bg-danger navbar-badge">3</span>
+        </a>
+      </li>
+      <!-- Notifications Dropdown Menu -->
+      <li class="nav-item dropdown">
+        <a class="nav-link" data-toggle="dropdown" href="#">
+          <i class="far fa-bell"></i>
+          <span class="badge bg-warning navbar-badge">15</span>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
+          <i class="fas fa-expand-arrows-alt"></i>
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
+          <i class="fas fa-th-large"></i>
         </a>
-        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-          <li><a class="dropdown-item" href="#">Action</a></li>
-          <li><a class="dropdown-item" href="#">Another action</a></li>
-          <li><hr class="dropdown-divider"></li>
-          <li><a class="dropdown-item" href="#">Something else here</a></li>
-        </ul>
       </li>
     </ul>
   </div>
diff --git a/src/scss/_main-header.scss b/src/scss/_main-header.scss
index 7841d098d..10ec40e89 100644
--- a/src/scss/_main-header.scss
+++ b/src/scss/_main-header.scss
@@ -16,6 +16,16 @@
   z-index: $zindex-main-header;
 }
 
+// Navbar badge
+.navbar-badge {
+  font-size: .6rem;
+  font-weight: 300;
+  padding: 2px 4px;
+  position: absolute;
+  right: 5px;
+  top: 9px;
+}
+
 .layout-navbar-fixed {
   .main-header {
     // position: fixed;
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index bbf76578a..5b05cf582 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -419,7 +419,7 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
@@ -945,7 +945,7 @@ $nav-pills-link-active-bg:          $component-active-bg !default;
 $navbar-padding-y:                  $spacer / 2 !default;
 $navbar-padding-x:                  null !default;
 
-$navbar-nav-link-padding-x:         .5rem !default;
+$navbar-nav-link-padding-x:         1rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
