diff --git a/src/components/Nav.astro b/src/components/Nav.astro
index c404b96..b4fde04 100644
--- a/src/components/Nav.astro
+++ b/src/components/Nav.astro
@@ -1,21 +1,13 @@
 ---
 import Emoji from 'astro-emoji'
+import Navbar from './ui/Nav'
 
 const { PageName } = Astro.props
 ---
 
-<nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
-  <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
-    <a href="/">Derek Brown <Emoji symbol="👨🏻‍💻" label="person" /></a>
-  </div>
-  <div class="font-['Merriweather'] text-xl flex items-center gap-4">
-    <span class="navItem" id="notes"><a href="/">Notes</a></span>
-    <span class="navItem" id="tags"><a href="/tags">Tags</a></span>
-    <span class="navItem" id="about"><a href="/about">About</a></span>
-  </div>
-</nav>
+<Navbar emoji={Emoji} />
 
-<script define:vars={{ PageName }}>
+<script define:vars={{ PageName }} is:inline>
 
   switch (PageName) {
     case 'Home':
diff --git a/src/components/ui/Nav.jsx b/src/components/ui/Nav.jsx
new file mode 100644
index 0000000..eee643a
--- /dev/null
+++ b/src/components/ui/Nav.jsx
@@ -0,0 +1,14 @@
+export default function Nav({ emoji }) {
+  return (
+    <nav class="flex flex-col mt-12 mb-10 text-[#F2F5F7]">
+      <div class="flex font-['Merriweather'] text-4xl font-black mb-3">
+        <a href="/">Derek Brown <emoji symbol="👨🏻‍💻" label="person" /></a>
+      </div>
+      <div class="font-['Merriweather'] text-xl flex items-center gap-4">
+        <span class="navItem" id="notes"><a href="/">Notes</a></span>
+        <span class="navItem" id="tags"><a href="/tags">Tags</a></span>
+        <span class="navItem" id="about"><a href="/about">About</a></span>
+      </div>
+    </nav>
+  )
+}
\ No newline at end of file