diff --git a/src/components/Icons/LucideLineSquiggle.astro b/src/components/Icons/LucideLineSquiggle.astro
new file mode 100644
index 0000000..d1e7482
--- /dev/null
+++ b/src/components/Icons/LucideLineSquiggle.astro
@@ -0,0 +1,21 @@
+---
+const props = Astro.props;
+---
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    {...props}
+    ><!-- Icon from Lucide by Lucide Contributors - https://github.com/lucide-icons/lucide/blob/main/LICENSE -->
+    <path
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M7 3.5c5-2 7 2.5 3 4C1.5 10 2 15 5 16c5 2 9-10 14-7s.5 13.5-4 12c-5-2.5.5-11 6-2"
+    >
+    </path>
+</svg>
diff --git a/src/components/Nav/NavBar.astro b/src/components/Nav/NavBar.astro
new file mode 100644
index 0000000..c0b1313
--- /dev/null
+++ b/src/components/Nav/NavBar.astro
@@ -0,0 +1,27 @@
+---
+import LucideLineSquiggle from "../Icons/LucideLineSquiggle.astro";
+---
+
+<div class="flex max-w-screen flex-col items-center">
+    <nav>
+        <div class="flex w-[66vw] justify-between py-6">
+            <a
+                href="/"
+                class="flex items-center gap-2 font-serif text-lg font-bold"
+            >
+                <LucideLineSquiggle />
+                <p>Serenity, the Goldweaver</p>
+            </a>
+            <div class="flex gap-2 font-serif">
+                <a href="/blog">Blog</a>
+                <a href="/thoughtlog">Thoughtlog</a>
+                <a
+                    href="https://projects.sylfr.dev/"
+                    target="_blank"
+                    rel="noreferrer noopener">Projects</a
+                >
+            </div>
+        </div>
+    </nav>
+    <div class="text-glw-overlay0 w-screen border-b border-dashed"></div>
+</div>
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
deleted file mode 100644
index a873c84..0000000
--- a/src/components/NavBar.astro
+++ /dev/null
@@ -1,12 +0,0 @@
-<div>
-    <nav>
-        <div class="flex w-screen justify-between">
-            <div>Serenity, the Goldweaver</div>
-            <div>
-                <a>Home</a>
-                <a>Blog</a>
-                <a>Projects</a>
-            </div>
-        </div>
-    </nav>
-</div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index e58cf7a..0379584 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,5 +1,5 @@
 ---
-import NavBar from "../components/NavBar.astro";
+import NavBar from "../components/Nav/NavBar.astro";
 import RootLayout from "../layouts/RootLayout.astro";
 const { title } = Astro.props;
 ---