diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index e61368c..dcdf3fd 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -129,7 +129,6 @@
 		text-decoration: none;
 		user-select: none;
 		border-radius: 10px;
-		display: flex;
 		align-items: center;
 		justify-content: center;
 		padding: 10px 16px;
diff --git a/src/lib/components/organisms/NavBar.svelte b/src/lib/components/organisms/NavBar.svelte
index 004fb91..18b8636 100644
--- a/src/lib/components/organisms/NavBar.svelte
+++ b/src/lib/components/organisms/NavBar.svelte
@@ -14,7 +14,7 @@
 	</Banner>
 {/snippet}
 
-<div class="nav-container">
+<div id="nav-container">
 	<!-- whether the api doesn't return 204 or the request itself fails, show banner -->
 	{#await api.general.ping() then apiUp}
 		{#if !apiUp}
@@ -23,4 +23,51 @@
 	{:catch _}
 		{@render apiDownBanner()}
 	{/await}
+
+	<div class="nav-wrapper">
+		<div id="main-navigation">
+			<!-- apparently range ignore doesn't work -->
+			<ul class="nav-buttons">
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/" label="Home">Home</Button></li>
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/download" label="Download">Download</Button></li>
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/patches" label="Patches">Patches</Button></li>
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/announcements" label="Announcements">Announcements</Button></li>
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/contributors" label="Contributors">Contributors</Button></li>
+				<!-- prettier-ignore -->
+				<li><Button type="navbar" href="/donate" label="Donate">Donate</Button></li>
+			</ul>
+		</div>
+	</div>
 </div>
+
+<style>
+	/* .nav-wrapper {
+		display: flex;
+		width: 100%;
+		justify-content: space-between;
+	}
+
+	@media (min-width: 768px) {
+		.nav-wrapper {
+			align-items: center;
+		}
+	}
+
+	#main-navigation,
+	#secondary-navigation {
+		align-items: center;
+		display: flex;
+		gap: 2rem;
+	} */
+
+	.nav-buttons {
+		list-style-type: none;
+		display: flex;
+		gap: 1rem;
+	}
+</style>