diff --git a/docs/features/browser-apis.html b/docs/features/browser-apis.html
index 4a103da..8c52951 100644
--- a/docs/features/browser-apis.html
+++ b/docs/features/browser-apis.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Browser API Demos - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -111,7 +111,7 @@ <h4>Code</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       // Geolocation
       const geoBtn = document.getElementById("geo-btn");
diff --git a/docs/features/clipboard.html b/docs/features/clipboard.html
index 663c380..8f3c2ff 100644
--- a/docs/features/clipboard.html
+++ b/docs/features/clipboard.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clipboard Interaction - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #copy-text {
         width: 100%;
@@ -99,7 +99,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const copyText = document.getElementById("copy-text");
       const copyBtn = document.getElementById("copy-btn");
diff --git a/docs/features/drag-drop.html b/docs/features/drag-drop.html
index 621078e..6e7d8c4 100644
--- a/docs/features/drag-drop.html
+++ b/docs/features/drag-drop.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Drag and Drop UI - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       .drop-lanes {
         display: flex;
@@ -142,7 +142,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const draggables = document.querySelectorAll(".draggable");
       const lanes = document.querySelectorAll(".lane");
diff --git a/docs/features/filter-search.html b/docs/features/filter-search.html
index af833f3..9d2fcc8 100644
--- a/docs/features/filter-search.html
+++ b/docs/features/filter-search.html
@@ -6,7 +6,7 @@
     <title>
       Filterable Lists & Search - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #search-input {
         width: 100%;
@@ -109,7 +109,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const searchInput = document.getElementById("search-input");
       const itemList = document.getElementById("item-list");
diff --git a/docs/features/forms.html b/docs/features/forms.html
index b1ce945..b03f199 100644
--- a/docs/features/forms.html
+++ b/docs/features/forms.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Forms Without Servers - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -101,7 +101,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const form = document.getElementById("greeting-form");
       const nameInput = document.getElementById("name-input");
diff --git a/docs/features/json-viewer.html b/docs/features/json-viewer.html
index de9162a..9df88df 100644
--- a/docs/features/json-viewer.html
+++ b/docs/features/json-viewer.html
@@ -6,7 +6,7 @@
     <title>
       JSON Viewer / Formatter - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #json-input {
         width: 100%;
@@ -138,7 +138,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const jsonInput = document.getElementById("json-input");
       const formatBtn = document.getElementById("format-btn");
diff --git a/docs/features/live-js-runner.html b/docs/features/live-js-runner.html
index 3168e9a..a46c48b 100644
--- a/docs/features/live-js-runner.html
+++ b/docs/features/live-js-runner.html
@@ -6,7 +6,7 @@
     <title>
       Live JavaScript Runner - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #js-code {
         width: 100%;
@@ -109,7 +109,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const codeArea = document.getElementById("js-code");
       const runButton = document.getElementById("run-btn");
diff --git a/docs/features/markdown-converter.html b/docs/features/markdown-converter.html
index 476d68b..dd62b68 100644
--- a/docs/features/markdown-converter.html
+++ b/docs/features/markdown-converter.html
@@ -6,7 +6,7 @@
     <title>
       Markdown to HTML Converter - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       .converter-container {
         display: flex;
@@ -123,7 +123,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <!-- Include Showdown.js from a CDN -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
     <script>
diff --git a/docs/features/mermaid-diagrams.html b/docs/features/mermaid-diagrams.html
index 1be8a55..06f2898 100644
--- a/docs/features/mermaid-diagrams.html
+++ b/docs/features/mermaid-diagrams.html
@@ -7,7 +7,7 @@
       Interactive Diagrams with Mermaid.js - Getting Interactive with GitHub
       Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -116,7 +116,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <!-- Include Mermaid.js from a CDN -->
     <script src="https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.min.js"></script>
     <script>
diff --git a/docs/features/notes-app.html b/docs/features/notes-app.html
index 51759ae..f783e75 100644
--- a/docs/features/notes-app.html
+++ b/docs/features/notes-app.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Persistent Notes App - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #note-input {
         width: 100%;
@@ -141,7 +141,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const noteInput = document.getElementById("note-input");
       const addNoteBtn = document.getElementById("add-note-btn");
diff --git a/docs/features/page-state.html b/docs/features/page-state.html
index fb3f3b1..e4112ac 100644
--- a/docs/features/page-state.html
+++ b/docs/features/page-state.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Page State Memory - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       #state-form label {
         display: block;
@@ -151,7 +151,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const form = document.getElementById("state-form");
diff --git a/docs/features/spa-routing.html b/docs/features/spa-routing.html
index eaff669..589559c 100644
--- a/docs/features/spa-routing.html
+++ b/docs/features/spa-routing.html
@@ -6,7 +6,7 @@
     <title>
       Client-Side Routing (SPA-style) - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       .page-content {
         display: none;
@@ -135,7 +135,7 @@ <h4>JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         const contentPages = document.querySelectorAll(".page-content");
diff --git a/docs/features/theme-switcher.html b/docs/features/theme-switcher.html
index 96b6d1d..771f144 100644
--- a/docs/features/theme-switcher.html
+++ b/docs/features/theme-switcher.html
@@ -6,7 +6,7 @@
     <title>
       Theme Switcher (Light/Dark) - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -128,6 +128,6 @@ <h4>3. The JavaScript</h4>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
   </body>
 </html>
diff --git a/docs/games/clicker.html b/docs/games/clicker.html
index ba06afe..fb84536 100644
--- a/docs/games/clicker.html
+++ b/docs/games/clicker.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clicker Game - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -119,7 +119,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const scoreDisplay = document.getElementById("score");
       const clickerBtn = document.getElementById("clicker-btn");
diff --git a/docs/games/drag-drop-puzzle.html b/docs/games/drag-drop-puzzle.html
index abdb32d..9a66632 100644
--- a/docs/games/drag-drop-puzzle.html
+++ b/docs/games/drag-drop-puzzle.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Drag and Drop Puzzle - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .puzzle-container {
@@ -69,7 +69,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const piecePool = document.getElementById("piece-pool");
       const puzzleBoard = document.getElementById("puzzle-board");
diff --git a/docs/games/index.html b/docs/games/index.html
index 926866b..3791bfd 100644
--- a/docs/games/index.html
+++ b/docs/games/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Games - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -84,6 +84,6 @@ <h3>Wordle Clone</h3>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
   </body>
 </html>
diff --git a/docs/games/maze.html b/docs/games/maze.html
index 974bc6a..830bc91 100644
--- a/docs/games/maze.html
+++ b/docs/games/maze.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Maze Navigation - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -67,7 +67,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const mazeContainer = document.getElementById("maze-container");
       const restartBtn = document.getElementById("restart-btn");
diff --git a/docs/games/memory-match.html b/docs/games/memory-match.html
index e6c004a..7a7e89d 100644
--- a/docs/games/memory-match.html
+++ b/docs/games/memory-match.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Memory Match - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -105,7 +105,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const gameBoard = document.getElementById("memory-game-board");
       const statusDisplay = document.getElementById("game-status");
diff --git a/docs/games/number-guessing.html b/docs/games/number-guessing.html
index 8499306..c5a19a7 100644
--- a/docs/games/number-guessing.html
+++ b/docs/games/number-guessing.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Number Guessing Game - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +73,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const guessForm = document.getElementById("guess-form");
       const guessInput = document.getElementById("guess-input");
diff --git a/docs/games/rock-paper-scissors.html b/docs/games/rock-paper-scissors.html
index 12f73d8..21cc5a5 100644
--- a/docs/games/rock-paper-scissors.html
+++ b/docs/games/rock-paper-scissors.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Rock, Paper, Scissors - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -69,7 +69,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const choiceButtons = document.querySelectorAll(".choices button");
       const resultDisplay = document.getElementById("result");
diff --git a/docs/games/simon-says.html b/docs/games/simon-says.html
index c4f0f9c..a84ce3b 100644
--- a/docs/games/simon-says.html
+++ b/docs/games/simon-says.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Simon Says - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +73,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const pads = document.querySelectorAll(".simon-pad");
       const startBtn = document.getElementById("start-btn");
diff --git a/docs/games/tic-tac-toe.html b/docs/games/tic-tac-toe.html
index e2303e9..0c50b81 100644
--- a/docs/games/tic-tac-toe.html
+++ b/docs/games/tic-tac-toe.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tic Tac Toe - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -148,7 +148,7 @@ <h4>The Code</h4>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const statusDisplay = document.getElementById("game-status");
       const restartBtn = document.getElementById("restart-btn");
diff --git a/docs/games/typing-speed.html b/docs/games/typing-speed.html
index 7c68002..b8e4080 100644
--- a/docs/games/typing-speed.html
+++ b/docs/games/typing-speed.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Typing Speed Test - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -74,7 +74,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const sampleTextDisplay = document.getElementById("sample-text");
       const typingInput = document.getElementById("typing-input");
diff --git a/docs/games/wordle.html b/docs/games/wordle.html
index 9ba155e..cee1d14 100644
--- a/docs/games/wordle.html
+++ b/docs/games/wordle.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wordle Clone - Games</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <link rel="stylesheet" href="style.css" />
     <style>
       .game-container {
@@ -73,7 +73,7 @@ <h3>How it Works</h3>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       const grid = document.getElementById("wordle-grid");
       const statusDisplay = document.getElementById("game-status");
diff --git a/docs/guides/best-practices.html b/docs/guides/best-practices.html
index 2be05c7..89fa77b 100644
--- a/docs/guides/best-practices.html
+++ b/docs/guides/best-practices.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Best Practices - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -99,6 +99,6 @@ <h2>Security</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
   </body>
 </html>
diff --git a/docs/guides/markdown-usage.html b/docs/guides/markdown-usage.html
index f72c17f..30ec725 100644
--- a/docs/guides/markdown-usage.html
+++ b/docs/guides/markdown-usage.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Markdown Usage - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -60,6 +60,6 @@ <h2>Live Conversion</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
   </body>
 </html>
diff --git a/docs/guides/resources.html b/docs/guides/resources.html
index b155b60..1fe5ea6 100644
--- a/docs/guides/resources.html
+++ b/docs/guides/resources.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resources - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
   </head>
   <body>
     <header id="main-header"></header>
@@ -107,6 +107,6 @@ <h2>Tools & Platforms</h2>
     </main>
     <footer id="main-footer"></footer>
     <button id="theme-switcher" class="btn">Dark Mode</button>
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
   </body>
 </html>
diff --git a/docs/script.js b/docs/script.js
index e9a7a21..3f5d164 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -57,9 +57,9 @@ document.addEventListener("DOMContentLoaded", () => {
   const initializePage = async () => {
     // Define components to load
     const components = [
-      { url: "/_header.html", id: "main-header" },
-      { url: "/_nav.html", id: "main-nav" },
-      { url: "/_footer.html", id: "main-footer" },
+      { url: "_header.html", id: "main-header" },
+      { url: "_nav.html", id: "main-nav" },
+      { url: "_footer.html", id: "main-footer" },
     ];
 
     // Load all components in parallel
diff --git a/docs/tools/tech-tools.html b/docs/tools/tech-tools.html
index 7fa7315..c468267 100644
--- a/docs/tools/tech-tools.html
+++ b/docs/tools/tech-tools.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tech Tools - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="/style.css" />
+    <link rel="stylesheet" href="../style.css" />
     <style>
       .tool-nav {
         margin-bottom: 20px;
@@ -91,7 +91,7 @@ <h3>Text Counter</h3>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="/script.js"></script>
+    <script src="../script.js"></script>
     <script>
       document.addEventListener("DOMContentLoaded", () => {
         // Tab switching logic
