diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
new file mode 100644
index 0000000..f3f664d
--- /dev/null
+++ b/src/components/Nav.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  export let routes: { url: string; label: string }[];
+</script>
+
+<nav>
+  <ul>
+    {#each routes as route}
+      <li><a href={route.url}>{route.label}</a></li>
+    {/each}
+  </ul>
+</nav>
+
+
+<style>
+  nav {
+    background-color: #007bff;
+    padding: 1rem;
+  }
+
+  ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-around;
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    margin: 0;
+  }
+
+  a {
+    color: #fff;
+    text-decoration: none;
+    font-size: 1.2rem;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  a:hover {
+    background-color: #0056b3;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 0000000..a222a9a
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,17 @@
+<!-- __layout.svelte -->
+<script>
+  import Nav from '../components/Nav.svelte';
+
+  export let routes = [
+    { url: "/", label: "Home" },
+    { url: "/projects", label: "Projects" },
+    { url: "/about", label: "About" },
+    // { url: "/blog", label: "Blog" },
+    { url: "/contact", label: "Contact" }
+  ]
+</script>
+
+<main>
+  <Nav {routes} />
+  <slot />
+</main>