diff --git a/frontend/package.json b/frontend/package.json
index b715d34..420af3d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,9 +1,10 @@
 {
-  "name": "my-webpack-project",
+  "name": "uniworx.de",
   "version": "1.0.0",
   "main": "index.js",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.4.0",
     "@popperjs/core": "^2.11.7",
     "bootstrap": "^5.2.3"
   },
@@ -13,7 +14,6 @@
   "devDependencies": {
     "@babel/core": "^7.21.8",
     "@babel/preset-env": "^7.21.5",
-    "@fortawesome/fontawesome-free": "^6.4.0",
     "@webpack-cli/generators": "^3.0.4",
     "autoprefixer": "^10.4.14",
     "babel-loader": "^9.1.2",
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 9817443..d904205 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,40 +1,3 @@
-import 'bootstrap/scss/bootstrap.scss'
-import {} from 'bootstrap'
+import * as bootstrap from 'bootstrap'
 
 import {} from './main.sass'
-
-
-const navToggle = document.querySelector(".nav-toggle");
-const navMenu   = document.querySelector(".nav-menu");
-
-function toggleNavMenu() {
-  if (navMenu.classList.contains("nav-menu--active")) {
-    navMenu.classList.remove("nav-menu--active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
-  } else {
-    navMenu.classList.add("nav-menu--active");
-    navToggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
-  }
-}
-
-navToggle.addEventListener("click", toggleNavMenu, false);
-
-const navItems = document.querySelectorAll(".nav-item");
-
-function toggleNavItem() {
-  if (this.classList.contains("nav-submenu--active")) {
-    this.classList.remove("nav-submenu--active");
-  } else if (navMenu.querySelector(".nav-submenu--active")) {
-    // other submenu was previously opened: also close the other submenu
-    navMenu.querySelector(".nav-submenu--active").classList.remove("nav-submenu--active");
-  } else {
-    this.classList.add("nav-submenu--active");
-  }
-}
-
-for (let navItem of navItems) {
-  if (navItem.querySelector(".nav-submenu")) {
-    navItem.addEventListener("click"   , toggleNavItem, false);
-    navItem.addEventListener("keypress", toggleNavItem, false);
-  }
-}
diff --git a/frontend/src/main.sass b/frontend/src/main.sass
index 2ae8a1b..c5eb4f1 100644
--- a/frontend/src/main.sass
+++ b/frontend/src/main.sass
@@ -1,70 +1,26 @@
-@use "~/../@fortawesome/fontawesome-free/scss/fontawesome" with ( $fa-font-path: "~/../@fortawesome/fontawesome-free/webfonts" )
+@use "~@fortawesome/fontawesome-free/scss/fontawesome" as * with ( $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts" )
+@forward "~@fortawesome/fontawesome-free/scss/fontawesome"
+@use "~@fortawesome/fontawesome-free/scss/solid"
 
-@forward "~/../@fortawesome/fontawesome-free/scss/fontawesome"
+@use "~bootstrap/scss/bootstrap" with ( $primary: hsl(128, 100%, 20%), $navbar-toggler-padding-y: 0.5rem, $navbar-padding-x: 1rem )
 
-@use "~/../@fortawesome/fontawesome-free/scss/solid"
 
-*
-  box-sizing: border-box
+.custom-navbar-toggler-icon
+  @include fa-icon-solid($fa-var-times)
+
+  .collapsed &
+    @include fa-icon-solid($fa-var-bars)
+
+main
+  margin: 1rem
+
+footer > nav > ul
+  margin: 1rem
   padding: 0
-  margin: 0
 
+  display: flex
+  justify-content: center
+  gap: 1rem
 
-// NAVIGATION
-
-nav
-  padding: 0 15px
-  ul
-    list-style-type: none
-    li
-      padding: 10px
-
-header
-  width: 100vw
-
-  background-color: green
-  color: white
-  font-weight: 600
-  font-size: 1.2em
-  line-height: 1.5em
-  a
-    color: white
-    text-decoration: none
-    &:hover
-      color: white
-      text-decoration: none
-
-  .nav-menu
-    display: flex
-    flex-wrap: wrap
-    justify-content: space-between
-
-    li a
-      display: block
-      padding: 4px 20px
-
-    li.nav-subitem a
-      padding: 15px
-
-    .nav-toggle
-      order: 1
-      font-size: 20px
-
-    .nav-item
-      order: 2
-      width: 100%
-      text-align: center
-      display: none
-  .nav-menu--active .nav-item
+  & > li
     display: block
-
-  .nav-submenu
-    display: none
-  .nav-submenu--active
-    display: block
-
-  .nav-submenu--active
-    background-color: green
-
-  .nav-subitem a
-    padding: 10px 15px
diff --git a/templates/site-layout.html b/templates/site-layout.html
index b1ae8c8..aafcce9 100644
--- a/templates/site-layout.html
+++ b/templates/site-layout.html
@@ -12,21 +12,26 @@
 
   <body>
     <header>
-      <nav>
-	<ul class="nav-menu">
-	  $for(tags-nav)$
-	  $body$
-	  $endfor$
-          <li class="nav-toggle">
-            <a href="#"><i class="fas fa-bars"></i></a>
-          </li>
-	</ul>
+      <nav class="navbar navbar-expand-md navbar-dark bg-primary">
+	<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain">
+	  <span class="custom-navbar-toggler-icon"></span>
+	</button>
+	<a class="navbar-brand" href="/">
+	  UniWorX Systems
+	</a>
+	<div class="collapse navbar-collapse" id="navbarMain">
+	  <ul class="navbar-nav">
+	    $for(tags-nav)$
+	    $body$
+	    $endfor$
+	  </ul>
+	</div>
       </nav>
     </header>
     <main>
       $body$
     </main>
-    <footer>
+    <footer class="text-center">
       <nav>
 	<ul>
 	  $for(special-nav)$
diff --git a/templates/tag-nav.html b/templates/tag-nav.html
index 98143a7..131ed58 100644
--- a/templates/tag-nav.html
+++ b/templates/tag-nav.html
@@ -1,10 +1,12 @@
-<li class="nav-item">
-  <a href="$route$">$title$</a>
+<li class="nav-link dropdown">
+  <a class="nav-link dropdown-toggle" href="$route$" data-bs-toggle="dropdown";>
+    $title$
+  </a>
 
-  <ul class="nav-submenu">
+  <ul class="dropdown-menu dropdown-menu-dark bg-primary">
     $for(posts)$
-    <li class="nav-subitem">
-      <a href="$route$#$identifier$">$title$</a>
+    <li class="dropdown-item">
+      <a class="nav-link" href="$route$#$identifier$">$title$</a>
     </li>
     $endfor$
   </ul>