diff --git a/src/components/MainNavigation.astro b/src/components/MainNavigation.astro
new file mode 100644
index 0000000..c1769c4
--- /dev/null
+++ b/src/components/MainNavigation.astro
@@ -0,0 +1,28 @@
+---
+import navigation from '../data/navigation.json';
+
+const currentPath = new URL(Astro.request.url).pathname;
+---
+
+<nav
+	class="navigation col-span-16 col-start-2 self-center md:col-span-14 md:col-start-3"
+	role="navigation"
+>
+	<ul class="navigation-list flex flex-wrap">
+		{
+			navigation.map(({ title, url }) => (
+				<li class="navigation-list-item mie-[10px] xs:mie-[15px]">
+					<a
+						class={`navigation-item-link text-3 font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20 ${
+							currentPath === url &&
+							'active underline !decoration-accent decoration-4'
+						}`}
+						href={url}
+					>
+						{title}
+					</a>
+				</li>
+			))
+		}
+	</ul>
+</nav>
diff --git a/src/data/navigation.json b/src/data/navigation.json
new file mode 100644
index 0000000..7c5c807
--- /dev/null
+++ b/src/data/navigation.json
@@ -0,0 +1,18 @@
+[
+	{
+		"title": "Home",
+		"url": "/"
+	},
+	{
+		"title": "About",
+		"url": "/about/"
+	},
+	{
+		"title": "Journal",
+		"url": "/journal/"
+	},
+	{
+		"title": "Projects",
+		"url": "/projects/"
+	}
+]