diff --git a/index.html b/index.html
index dc976fa..722aa9e 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="de">
     <head>
         <meta charset="UTF-8" />
+        <link rel="stylesheet" href="/src/styles/navigation.css" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta
             name="description"
@@ -10,9 +11,7 @@
         <title>1:1-Ernährungsberatung</title>
     </head>
     <body>
-        <header class="container">
-            <a href="/" aria-label="Startseite">Ernährungsberatung</a>
-        </header>
+        <div id="navbar-placeholder"></div>
 
         <main class="container">
             <h1>Ernährung, die zu dir passt.</h1>
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000..3063d26
Binary files /dev/null and b/public/images/logo.png differ
diff --git a/src/components/navigationsbar/README.md b/src/components/navigationsbar/README.md
new file mode 100644
index 0000000..e349d1c
--- /dev/null
+++ b/src/components/navigationsbar/README.md
@@ -0,0 +1,14 @@
+# Navigation einbinden
+
+Füge an der gewünschten Stelle im HTML einen Platzhalter ein und binde CSS
+und JavaScript separat ein:
+
+```html
+<div id="navbar-placeholder"></div>
+<link rel="stylesheet" href="/src/styles/navigation.css" />
+<script type="module" src="/src/components/navigationsbar/navigation.js"></script>
+```
+
+Das Script lädt `navigation.html` und initialisiert die Navigation automatisch,
+`initNavbar()` muss nicht zusätzlich aufgerufen werden. Die Stylesheet-Datei wird
+nicht vom Script geladen und muss deshalb separat eingebunden werden.
diff --git a/src/components/navigationsbar/navigation.html b/src/components/navigationsbar/navigation.html
index 16665fb..255751a 100644
--- a/src/components/navigationsbar/navigation.html
+++ b/src/components/navigationsbar/navigation.html
@@ -3,11 +3,7 @@
 <header class="navbar" id="site-navbar">
     <div class="navbar__inner">
         <div class="navbar__brand">
-            <img
-                src="/src/components/navigationsbar/images/logo.png"
-                alt=""
-                class="navbar__logo-img"
-            />
+            <img src="/images/logo.png" alt="" class="navbar__logo-img" />
             <span class="navbar__brand-text">
                 <span class="navbar__brand-title">TRI-HUB</span>
                 <span class="navbar__brand-tagline"
@@ -28,23 +24,37 @@
 
         <nav class="navbar__nav" aria-label="Hauptnavigation">
             <ul id="navbar-menu" class="navbar__menu">
-                <li><a href="/pakete.html" class="navbar__link">Pakete</a></li>
+                <li>
+                    <a href="/angebotsuebersicht.html" class="navbar__link"
+                        >Pakete</a
+                    >
+                </li>
                 <li>
                     <a href="#ernaehrung" class="navbar__link">Ernährung</a>
                 </li>
                 <li>
-                    <a href="/beraterprofil.html" class="navbar__link"
+                    <a
+                        href="/src/design/tri-hub-ernaehrungsberatung.html"
+                        class="navbar__link"
                         >Beraterprofil</a
                     >
                 </li>
-                <li><a href="/faq.html" class="navbar__link">FAQ</a></li>
                 <li>
-                    <a href="/rezensionen.html" class="navbar__link"
-                        >Rezensionen</a
+                    <a
+                        href="/src/design/tri-hub-ernaehrungsberatung.html"
+                        class="navbar__link"
+                        >FAQ</a
                     >
                 </li>
                 <li>
-                    <a href="/kontakt.html" class="navbar__link">Kontakt</a>
+                    <a href="#erfahrungen" class="navbar__link">Rezensionen</a>
+                </li>
+                <li>
+                    <a
+                        href="/src/design/tri-hub-ernaehrungsberatung.html"
+                        class="navbar__link"
+                        >Kontakt</a
+                    >
                 </li>
                 <li>
                     <a
diff --git a/src/components/navigationsbar/navigation.js b/src/components/navigationsbar/navigation.js
index 7ca3a40..a93a67c 100644
--- a/src/components/navigationsbar/navigation.js
+++ b/src/components/navigationsbar/navigation.js
@@ -1,6 +1,8 @@
+import navigationHtml from "./navigation.html?raw";
+
 /**
- * Lädt das Navbar-Fragment (navigation.html) per fetch() und ersetzt
- * damit den Platzhalter im Header der jeweiligen Seite.
+ * Bindet das mit Vite gebündelte Navbar-Fragment (navigation.html) ein und
+ * ersetzt damit den Platzhalter im Header der jeweiligen Seite.
  * Aufruf z. B. in main.js: initNavbar('#navbar-placeholder')
  */
 export function initNavbar(placeholderSelector = "#navbar-placeholder") {
@@ -10,16 +12,9 @@ export function initNavbar(placeholderSelector = "#navbar-placeholder") {
         return;
     }
 
-    fetch(new URL("./navigation.html", import.meta.url))
-        .then((res) => res.text())
-        .then((html) => {
-            placeholder.outerHTML = html; // Platzhalter durch echtes Navbar-Markup ersetzen
-            setupBehavior();
-            markCurrentPage();
-        })
-        .catch((err) =>
-            console.error("Navbar konnte nicht geladen werden:", err),
-        );
+    placeholder.outerHTML = navigationHtml; // Platzhalter durch echtes Navbar-Markup ersetzen
+    setupBehavior();
+    markCurrentPage();
 }
 
 /**
diff --git a/src/main.js b/src/main.js
index cb01bb8..a8ccb3d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,4 @@
-import "./styles.css";
+import "./styles/styles.css";
+import "./components/navigationsbar/navigation.js";
 
 document.querySelector("#year").textContent = new Date().getFullYear();
