diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte
index e69de29..d82a667 100644
--- a/src/lib/components/nav.svelte
+++ b/src/lib/components/nav.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    type links = {
+        destination: string;
+        name: string;
+        image: string;
+    }
+    const navlinks: Array<links> = [
+        {
+			destination: "/",
+			name: "home",
+			image: ""
+		},
+        {
+			destination: "/pets",
+			name: "pets",
+			image: ""
+		},
+        {
+			destination: "/socials",
+			name: "links",
+			image: ""
+		},
+        {
+			destination: "/portfolio",
+			name: "projects",
+			image: ""
+		}
+    ]
+</script>
+
+<nav>
+  {#each navlinks as links}
+    <a data-sveltekit-replacestate href="{links.destination}" class="link">
+        <img src="{links.image}" alt="">
+        <p>{links.name}</p>
+    </a>
+  {/each}
+</nav>
+
+<style lang="scss">
+    nav {
+        display: flex;
+        justify-content: space-evenly;
+    }
+    .link {
+        display: flex;
+        flex-direction: column;
+        img {
+            width: 100px;
+            height: 100px;
+        }
+        p {
+            text-align: center;
+        }
+    }
+    a {
+        color: white;
+        text-decoration: none;
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1a8b336..8e6f33d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -35,5 +35,6 @@
 		width: 800px;
 		margin: 0 auto;
 		box-sizing: border-box;
+		padding: 1em;
 	}
 </style>