diff --git a/includes/navbar.php b/includes/navbar.php
index c0b2c982..9c314a62 100755
--- a/includes/navbar.php
+++ b/includes/navbar.php
@@ -1,27 +1,25 @@
-      <nav class="navbar navbar-expand navbar-light topbar mb-1 static-top">
-        <!-- Sidebar Toggle (Topbar) -->
-        <button id="sidebarToggleTopbar" class="btn btn-link d-md-none rounded-circle mr-3">
-          <i class="fa fa-bars"></i>
-        </button>
-        <!-- Topbar Navbar -->
-        <p class="text-left brand-title mt-3 ml-2"></p>
-        <ul class="navbar-nav ml-auto">
-          <!-- Nav Item - Insiders -->
-          <div class="insiders mt-4">
-            <a href="https://docs.raspap.com/insiders" target="_blank"><i class="fas fa-heart mr-3" style="color: #e63946"></i></a>
-          </div>
-          <!-- Nav Item - Night mode -->
-          <div class="custom-control custom-switch mt-4">
-            <input type="checkbox" class="custom-control-input" id="night-mode" <?php echo getNightmode() ? 'checked' : null ; ?> >
-            <label class="custom-control-label" for="night-mode"><i class="far fa-moon mr-1 text-muted"></i></label>
-          </div>
-          <div class="topbar-divider d-none d-sm-block"></div>
-          <!-- Nav Item - User -->
-          <li class="nav-item dropdown no-arrow">
-          <a class="nav-link" href="auth_conf">
-            <span class="mr-2 d-none d-lg-inline small"><?php echo htmlspecialchars($_SESSION['user_id'], ENT_QUOTES); ?></span>
-            <i class="fas fa-user-circle fa-3x"></i>
-          </a>
-          </li>
-        </ul>
-      </nav>
+  <nav class="sb-topnav navbar navbar-expand navbar-light bg-light">
+  <!-- Navbar Brand-->
+  <a class="sidebar-brand-text navbar-brand ps-5" href="wlan0_info">RaspAP</a>
+  <!-- Sidebar Toggle-->
+  <button class="btn btn-link btn-sm order-1 order-lg-0 me-auto p-3 bd-highlight" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
+  <!-- Navbar-->
+  <ul class="navbar-nav ms-auto ms-md-0 me-2 me-lg-4">
+    <!-- Nav Item - Insiders -->
+    <div class="insiders mt-4">
+      <a href="https://docs.raspap.com/insiders" target="_blank"><i class="fas fa-heart mr-3" style="color: #e63946"></i></a>
+    </div>
+    <!-- Nav Item - Night mode -->
+    <div class="form-check form-switch p-4 mt-1">
+      <input type="checkbox" class="form-check-input" id="night-mode" <?php echo getNightmode() ? 'checked' : null ; ?> >
+      <label class="form-check-label" for="night-mode"><i class="far fa-moon mr-1 text-muted"></i></label>
+    </div>
+    <!-- Nav Item - User -->
+    <li class="nav-item dropdown no-arrow">
+      <a class="nav-link" href="auth_conf">
+        <span class="mr-2 d-none d-lg-inline small"><?php echo htmlspecialchars($_SESSION['user_id'], ENT_QUOTES); ?></span>
+        <i class="fas fa-user-circle fa-3x"></i>
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/includes/sidebar.php b/includes/sidebar.php
index b83b8764..9de22a26 100755
--- a/includes/sidebar.php
+++ b/includes/sidebar.php
@@ -1,15 +1,8 @@
-      <ul class="navbar-nav sidebar sidebar-light d-none d-md-block accordion <?php echo (isset($_SESSION["toggleState"])) ? $_SESSION["toggleState"] : null ; ?>" id="accordionSidebar">
-        <!-- Sidebar - Brand -->
-        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="wlan0_info">
-          <div class="sidebar-brand-text ml-1"><?php echo RASPI_BRAND_TEXT; ?></div>
-        </a>
-        <!-- Divider -->
-        <hr class="sidebar-divider my-0">
-        <div class="row">
-          <div class="col-xs ml-3 sidebar-brand-icon">
-            <img src="app/img/raspAP-logo.php" class="navbar-logo" width="64" height="64">
-          </div>
-          <div class="col-xs ml-2">
+        <div class="row g-0">
+            <div class="col-6 col-md-4 gx-2 sidebar-brand-icon">
+                <img src="app/img/raspAP-logo.php" class="navbar-logo" width="60" height="60">
+            </div>
+          <div class="col ml-2">
             <div class="ml-1 sb-status">Status</div>
             <div class="info-item-xs"><span class="icon">
               <i class="fas fa-circle <?php echo ($hostapd_led); ?>"></i></span> <?php echo _("Hotspot").' '. _($hostapd_status); ?>
@@ -22,82 +15,75 @@
             </div>
           </div>
         </div>
-        <li class="nav-item">
-          <a class="nav-link" href="wlan0_info"><i class="fas fa-tachometer-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _("Dashboard"); ?></span></a>
-        </li>
-        <?php if (RASPI_HOTSPOT_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="hostapd_conf"><i class="far fa-dot-circle fa-fw mr-2"></i><span class="nav-label"><?php echo _("Hotspot"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_DHCP_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="dhcpd_conf"><i class="fas fa-exchange-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _("DHCP Server"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_ADBLOCK_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
-        <li class="nav-item">
-           <a class="nav-link" href="adblock_conf"><i class="far fa-hand-paper fa-fw mr-2"></i><span class="nav-label"><?php echo _("Ad Blocking"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_NETWORK_ENABLED) : ?>
-        <li class="nav-item">
-           <a class="nav-link" href="network_conf"><i class="fas fa-network-wired fa-fw mr-2"></i><span class="nav-label"><?php echo _("Networking"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_WIFICLIENT_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="wpa_conf"><i class="fas fa-wifi fa-fw mr-2"></i><span class="nav-label"><?php echo _("WiFi client"); ?></span></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_OPENVPN_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="openvpn_conf"><i class="fas fa-key fa-fw mr-2"></i><span class="nav-label"><?php echo _("OpenVPN"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_WIREGUARD_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="wg_conf"><i class="ra-wireguard mr-2"></i><span class="nav-label"><?php echo _("WireGuard"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_VPN_PROVIDER_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="provider_conf"><i class="fas fa-shield-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _(getProviderValue($_SESSION["providerID"], "name")); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_TORPROXY_ENABLED) : ?>
-        <li class="nav-item">
-           <a class="nav-link" href="torproxy_conf"><i class="fas fa-eye-slash fa-fw mr-2"></i><span class="nav-label"><?php echo _("TOR proxy"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_CONFAUTH_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="auth_conf"><i class="fas fa-user-lock fa-fw mr-2"></i><span class="nav-label"><?php echo _("Authentication"); ?></a>
-        </li>
-        <?php endif; ?>
-        <?php if (RASPI_VNSTAT_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="data_use"><i class="fas fa-chart-bar fa-fw mr-2"></i><span class="nav-label"><?php echo _("Data usage"); ?></a>
-        </li>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="wlan0_info"><i class="sb-nav-link-icon fas fa-tachometer-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _("Dashboard"); ?></span></a>
+        </div>
+          <?php if (RASPI_HOTSPOT_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="hostapd_conf"><i class="sb-nav-link-icon far fa-dot-circle fa-fw mr-2"></i><span class="nav-label"><?php echo _("Hotspot"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_DHCP_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="dhcpd_conf"><i class="sb-nav-link-icon fas fa-exchange-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _("DHCP Server"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_ADBLOCK_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
+        <div class="sb-nav-link-icon px-2">
+           <a class="nav-link" href="adblock_conf"><i class="sb-nav-link-icon far fa-hand-paper fa-fw mr-2"></i><span class="nav-label"><?php echo _("Ad Blocking"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_NETWORK_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+           <a class="nav-link" href="network_conf"><i class="sb-nav-link-icon fas fa-network-wired fa-fw mr-2"></i><span class="nav-label"><?php echo _("Networking"); ?></a>
+        </div> 
+          <?php endif; ?>
+          <?php if (RASPI_WIFICLIENT_ENABLED && !$_SESSION["bridgedEnabled"]) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="wpa_conf"><i class="sb-nav-link-icon fas fa-wifi fa-fw mr-2"></i><span class="nav-label"><?php echo _("WiFi client"); ?></span></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_OPENVPN_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="openvpn_conf"><i class="sb-nav-link-icon fas fa-key fa-fw mr-2"></i><span class="nav-label"><?php echo _("OpenVPN"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_WIREGUARD_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="wg_conf"><i class="sb-nav-link-icon ra-wireguard mr-2"></i><span class="nav-label"><?php echo _("WireGuard"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_VPN_PROVIDER_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="provider_conf"><i class="sb-nav-link-icon fas fa-shield-alt fa-fw mr-2"></i><span class="nav-label"><?php echo _(getProviderValue($_SESSION["providerID"], "name")); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_TORPROXY_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+           <a class="nav-link" href="torproxy_conf"><i class="sb-nav-link-icon fas fa-eye-slash fa-fw mr-2"></i><span class="nav-label"><?php echo _("TOR proxy"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_CONFAUTH_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+        <a class="nav-link" href="auth_conf"><i class="sb-nav-link-icon fas fa-user-lock fa-fw mr-2"></i><span class="nav-label"><?php echo _("Authentication"); ?></a>
+        </div>
+          <?php endif; ?>
+          <?php if (RASPI_VNSTAT_ENABLED) : ?>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="data_use"><i class="sb-nav-link-icon fas fa-chart-bar fa-fw mr-2"></i><span class="nav-label"><?php echo _("Data usage"); ?></a>
+        </div>
         <?php endif; ?>
         <?php if (RASPI_RESTAPI_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="restapi_conf"><i class="fas fa-puzzle-piece mr-2"></i><span class="nav-label"><?php echo _("RestAPI"); ?></a>
-        </li>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="restapi_conf"><i class="sb-nav-link-icon fas fa-puzzle-piece mr-2"></i><span class="nav-label"><?php echo _("RestAPI"); ?></a>
+        </div>
         <?php endif; ?>
         <?php if (RASPI_SYSTEM_ENABLED) : ?>
-        <li class="nav-item">
-          <a class="nav-link" href="system_info"><i class="fas fa-cube fa-fw mr-2"></i><span class="nav-label"><?php echo _("System"); ?></a>
-        </li>
+          <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="system_info"><i class="sb-nav-link-icon fas fa-cube fa-fw mr-2"></i><span class="nav-label"><?php echo _("System"); ?></a>
+          </div>
         <?php endif; ?>
-        <li class="nav-item">
-          <a class="nav-link" href="about"><i class="fas fa-info-circle fa-fw mr-2"></i><span class="nav-label"><?php echo _("About RaspAP"); ?></a>
-        </li>
-        <!-- Divider -->
-        <hr class="sidebar-divider d-none d-md-block">
-
-        <!-- Sidebar Toggler (Sidebar) -->
-        <div class="text-center d-none d-md-block">
-          <button class="rounded-circle border-0" id="sidebarToggle"></button>
+        <div class="sb-nav-link-icon px-2">
+          <a class="nav-link" href="about"><i class="sb-nav-link-icon fas fa-info-circle fa-fw mr-2"></i><span class="nav-label"><?php echo _("About RaspAP"); ?></a>
         </div>
-    </ul>
+