diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8b18b51..25637bb 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,20 +1,50 @@
 <script>
-    const nav = {
-        
-        whoami: ["about", "resume", "homelab"],
-        portfolio: ["project a", "project, b", "project c"],
-        contact: ["get in touch", "socials"],
-        login: []
-    };
+	import { writable } from "svelte/store";
+    
+    const nav = [
+        {
+            name: "index",
+            subPages: [],
+        },
+        {
+            name: "whoami",
+            subPages: ["about", "resume", "homelab"],
+        },
+        {
+            name: "portfolio",
+            subPages: ["project a", "project, b", "project c"],
+        },
+        {
+            name: "contact",
+            subPages: ["get in touch", "socials"],
+        },
+        {
+            name: "login",
+            subPages: []
+        }
+    ];
 
+    let selected = nav[0];	// keep track of the selected 'page' object (default to the about component since we must have local db connection established first)
+    let intSelected = 0;	// selected page index
+
+    // change the selected component (the event.originalTarget.id is not accessible in Chrome so switched to event.srcElement.id)
+    function changeComponent(event) {
+        selected = nav[event.srcElement.id];
+        intSelected = event.srcElement.id;
+    }
 </script>
 
 <nav>
     <ul>
-        {#each Object.entries(nav) as [main, context]}
-            <li><a href={main}>{main}</a></li>
+        {#each nav as main,i}
+            {#if i != 0}
+                <li><button class={selected==i ? "nav-link active p-2 ml-1" : "p-2 ml-1 nav-link"} on:click={changeComponent} id={i} >{main.name}</button></li>
+            {/if}     
         {/each}
         <hr />
+        {#each selected.subPages as subPage}
+            <li><a href={subPage}>{subPage}</a></li>
+        {/each}
     </ul>
 </nav>
 <slot />
\ No newline at end of file