diff --git a/src/lib/components/GithubLink.svelte b/src/lib/components/GithubLink.svelte
deleted file mode 100644
index c6da7c4..0000000
--- a/src/lib/components/GithubLink.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	export let repoUrl: string;
-</script>
-
-<a href={repoUrl}>
-	<svg class="githubLogo" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-		<path
-			fill-rule="evenodd"
-			clip-rule="evenodd"
-			d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-		/>
-	</svg>
-</a>
-
-<style lang="postcss">
-	.githubLogo {
-		@apply fill-gray-300/50;
-		@apply w-16 h-16;
-	}
-</style>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
deleted file mode 100644
index ad2fb79..0000000
--- a/src/lib/components/Modal.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-	import { pushState } from '$app/navigation';
-	import { onMount } from 'svelte';
-	export let title: string;
-	export let isVisible: boolean;
-</script>
-
-<div class="modal">
-	<div class="modalBody">
-		<div class="flex flex-row">
-			<h1 class="modalTitle">{title}</h1>
-            <button on:click={() => {isVisible = !isVisible}} class="ml-auto self-center font-bold text-2xl text-gray-400">X</button>
-		</div>
-        <slot />
-	</div>
-</div>
-
-<style lang="postcss">
-	.modal {
-		@apply z-50;
-		@apply w-screen h-screen;
-		@apply backdrop-blur-lg;
-		@apply absolute;
-		@apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
-		@apply bg-gray-700/80;
-		@apply flex items-center justify-center;
-	}
-	.modalBody {
-		@apply w-full h-1/2 max-w-[50rem];
-		@apply m-8;
-		@apply bg-gray-200;
-		@apply border border-gray-100;
-		@apply rounded-3xl;
-		@apply drop-shadow-sm;
-		@apply p-6;
-		@apply overflow-hidden;
-	}
-	.modalTitle {
-		@apply text-gray-600 font-bold text-4xl;
-	}
-</style>
diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
index d07c516..eee3fac 100644
--- a/src/lib/components/buttons/Button.svelte
+++ b/src/lib/components/buttons/Button.svelte
@@ -25,10 +25,12 @@
 		@apply rounded-3xl bg-orange-500 p-4;
 		@apply text-xl font-medium text-gray-100;
 		@apply hover:bg-amber-500;
+		@apply active:bg-amber-400;
 	}
 	.btn-secondary {
 		@apply rounded-3xl bg-neutral-800 p-4;
 		@apply text-xl font-medium text-gray-100;
 		@apply hover:bg-gray-600;
+		@apply active:bg-gray-700;
 	}
 </style>
diff --git a/src/lib/components/cardGroups/LandingCardGroup.svelte b/src/lib/components/cardGroups/LandingCardGroup.svelte
index 1cd9917..a13758f 100644
--- a/src/lib/components/cardGroups/LandingCardGroup.svelte
+++ b/src/lib/components/cardGroups/LandingCardGroup.svelte
@@ -15,13 +15,11 @@
 		size={SubtitleSize.SMALL}
 	/>
 	<ButtonRow>
-		<Button
-			text="Our Projects"
-			on:click={() => {
-				scrollTo(PageSectionType.PROJECTS);
-			}}
-		/>
-		<Button text="GitHub" role="secondary" />
+		<Button on:click={() => {
+			window.open("https://github.com/Kerosene-Labs"
+				
+			);
+		}} text="GitHub" role="secondary" />
 	</ButtonRow>
 </div>
 
@@ -32,7 +30,4 @@
 	div.container {
 		@apply flex w-full flex-col items-center gap-4;
 	}
-	div.buttonRow {
-		@apply flex w-full flex-row gap-4;
-	}
 </style>
diff --git a/src/lib/components/cardGroups/ProjectCardGroup.svelte b/src/lib/components/cardGroups/ProjectCardGroup.svelte
index 4f84e1c..16fe504 100644
--- a/src/lib/components/cardGroups/ProjectCardGroup.svelte
+++ b/src/lib/components/cardGroups/ProjectCardGroup.svelte
@@ -19,36 +19,21 @@
 		<Title text="Our Projects" size={TitleSize.SMALL} />
 		<p class="subtitle">We like building things that help.</p>
 	</div>
-	<div class="carousel">
-		<div class="carouselItems">
-			<div class="carouselItem">
-				<ProjectCard
-					name="Kindling"
-					description="The fuel that'll ignite your application. A programmable TLS HTTP/1.1 server with no dependencies."
-					repoUrl="https://github.com/Kerosene-Labs/kindling"
-				/>
-			</div>
-			<ProjectCard
-				name="ATC"
-				description="An API gateway with scoped access management for organizations that don't enjoy vendor lock-in."
-				repoUrl="https://github.com/Kerosene-Labs/atc"
-			/>
-			<ProjectCard
-				name="Espresso"
-				description="Build Java applications without fighting your build tool. Drink some espresso. "
-				repoUrl="https://github.com/Kerosene-Labs/espresso"
-			/>
-		</div>
-	</div>
-	<div class="w-1/4 self-center">
-		<Button
-			text="Our Team"
-			role="secondary"
-			on:click={() => {
-				scrollTo(PageSectionType.MEMBERS);
-			}}
-		/>
-	</div>
+	<ProjectCard
+		name="Kindling"
+		description="The fuel that'll ignite your application. A programmable TLS HTTP/1.1 server with no dependencies."
+		repoUrl="https://github.com/Kerosene-Labs/kindling"
+	/>
+	<ProjectCard
+		name="ATC"
+		description="An API gateway with scoped access management for organizations that don't enjoy vendor lock-in."
+		repoUrl="https://github.com/Kerosene-Labs/atc"
+	/>
+	<ProjectCard
+		name="Espresso"
+		description="Build Java applications without fighting your build tool. Drink some espresso. "
+		repoUrl="https://github.com/Kerosene-Labs/espresso"
+	/>
 </div>
 
 <style lang="postcss">
diff --git a/src/lib/components/layout/CenterContainer.svelte b/src/lib/components/layout/CenterContainer.svelte
new file mode 100644
index 0000000..3004434
--- /dev/null
+++ b/src/lib/components/layout/CenterContainer.svelte
@@ -0,0 +1,5 @@
+<script lang="ts"></script>
+
+<div class="flex w-full h-full items-center justify-center">
+    <slot/>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/PageSection.svelte b/src/lib/components/layout/PageSection.svelte
similarity index 60%
rename from src/lib/components/PageSection.svelte
rename to src/lib/components/layout/PageSection.svelte
index 7a234da..e59adec 100644
--- a/src/lib/components/PageSection.svelte
+++ b/src/lib/components/layout/PageSection.svelte
@@ -4,18 +4,11 @@ Description: A slottable component that forces its width and height to be that o
 also exports functions for having the browser smooth scroll to it.
 -->
 <script lang="ts">
-	import type { PageSectionType } from "$lib/util/pageSection";
-
-	export let type: PageSectionType;
 </script>
 
-<div class="page" id={type}>
+<div class="page">
 	<slot />
 </div>
 
 <style lang="postcss">
-	div.page {
-		@apply h-screen w-screen;
-		@apply overflow-clip;
-	}
 </style>
diff --git a/src/lib/components/navigation/Navbar.svelte b/src/lib/components/navigation/Navbar.svelte
new file mode 100644
index 0000000..057d2df
--- /dev/null
+++ b/src/lib/components/navigation/Navbar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import NavbarButton from './NavbarButton.svelte';
+	import NavbarContent from './NavbarContent.svelte';
+	import NavbarLink from './NavbarLink.svelte';
+
+	let isDrawerOpen: boolean = false;
+</script>
+
+<div class="navbar-container">
+	<div class="navbar">
+		<!-- only show navbar on small screens -->
+		<div class="w-min flex md:hidden">
+			<NavbarButton
+				on:click={() => {
+					isDrawerOpen = !isDrawerOpen;
+				}}
+			/>
+		</div>
+		<!-- responsive drawer/flex row -->
+		<NavbarContent {isDrawerOpen}>
+			<NavbarLink text="Home" url="/" />
+			<NavbarLink text="Projects" url="/projects" />
+			<NavbarLink text="Members" url="/members" />
+		</NavbarContent>
+	</div>
+</div>
+
+<style lang="postcss">
+	.navbar {
+		@apply bg-neutral-100 rounded-[-10px];
+		@apply transition-all;
+	}
+	.navbar-container {
+		@apply w-screen z-50;
+		@apply fixed;
+		@apply transition-all;
+	}
+</style>
diff --git a/src/lib/components/navigation/NavbarButton.svelte b/src/lib/components/navigation/NavbarButton.svelte
new file mode 100644
index 0000000..b9e3b60
--- /dev/null
+++ b/src/lib/components/navigation/NavbarButton.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+</script>
+
+<button on:click class="btn btn-navbar">
+	<svg class="logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<path d="M4 18H10" stroke-width="2" stroke-linecap="round"/>
+		<path d="M4 12L16 12" stroke-width="2" stroke-linecap="round"/>
+		<path d="M4 6L20 6" stroke-width="2" stroke-linecap="round"/>
+		</svg>
+</button>
+
+<style lang="postcss">
+	.btn {
+		@apply select-none p-4;
+	}
+	.logo {
+		@apply w-11 h-11 stroke-neutral-300 hover:stroke-neutral-400 active:stroke-neutral-400 focus:stroke-neutral-400;
+		@apply transition-all;
+	}
+</style>
diff --git a/src/lib/components/navigation/NavbarContent.svelte b/src/lib/components/navigation/NavbarContent.svelte
new file mode 100644
index 0000000..567addb
--- /dev/null
+++ b/src/lib/components/navigation/NavbarContent.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	// If the drawer is open. Note, this only works on (sm)all  screens.
+	export let isDrawerOpen: boolean;
+	let isNotMobileDisplay: boolean;
+
+	function handleResize() {
+		// determine if we're a "small" display
+		isNotMobileDisplay = window.matchMedia('(min-width: 768px)').matches;
+
+		// if we are a small display and the drawer is open, close it
+		if (!isNotMobileDisplay && isDrawerOpen) {
+			isDrawerOpen = false;
+			return;
+		}
+
+		// if we're a big display and the drawer isn't open it, open it
+		if (isNotMobileDisplay && !isDrawerOpen) {
+			isDrawerOpen = true;
+			return;
+		}
+	}
+
+	onMount(() => {
+		window.addEventListener('resize', handleResize);
+		handleResize();
+	});
+</script>
+
+<div class:hidden={!isDrawerOpen} id="navbarContent">
+	<div class="content">
+		<slot />
+	</div>
+</div>
+
+<style lang="postcss">
+	.content {
+		@apply flex flex-col;
+		@apply transition-all;
+		@apply md:flex-row;
+	}
+</style>
diff --git a/src/lib/components/navigation/NavbarLink.svelte b/src/lib/components/navigation/NavbarLink.svelte
new file mode 100644
index 0000000..c94fb19
--- /dev/null
+++ b/src/lib/components/navigation/NavbarLink.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let text: string;
+	export let url: string;
+</script>
+
+<a href={url} class="navbar-item">
+	{text}
+</a>
+
+<style lang="postcss">
+	.navbar-item {
+		@apply bg-inherit hover:bg-neutral-200;
+		@apply p-4;
+		@apply active:bg-inherit;
+		@apply transition-all;
+		@apply h-full;
+
+		@apply text-4xl font-medium;
+		@apply md:text-xl;
+	}
+</style>
diff --git a/src/lib/util/screenSize.ts b/src/lib/util/screenSize.ts
new file mode 100644
index 0000000..123a780
--- /dev/null
+++ b/src/lib/util/screenSize.ts
@@ -0,0 +1,3 @@
+export enum ScreenSizes {
+    sm = 300,
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d90d04c..acaf498 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,35 +1,16 @@
 <script lang="ts">
 	import LandingCardGroup from '$lib/components/cardGroups/LandingCardGroup.svelte';
-	import MembersCardGroup from '$lib/components/cardGroups/MembersCardGroup.svelte';
-	import ProjectCardGroup from '$lib/components/cardGroups/ProjectCardGroup.svelte';
-	import PageSection from '$lib/components/PageSection.svelte';
-	import { PageSectionType } from '$lib/util/pageSection';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
 
 	if (typeof window !== 'undefined') {
 		document.title = 'Kerosene Labs';
 	}
 </script>
 
-<PageSection type={PageSectionType.LANDING}>
-	<div class="center-container">
+<Navbar></Navbar>
+<div class="w-screen h-screen">
+	<CenterContainer>
 		<LandingCardGroup />
-	</div>
-</PageSection>
-<PageSection type={PageSectionType.PROJECTS}>
-	<div class="center-container">
-		<div class="sm:w-5/6 lg:w-1/2">
-			<ProjectCardGroup />
-		</div>
-	</div>
-</PageSection>
-<PageSection type={PageSectionType.MEMBERS}>
-	<div class="center-container">
-		<MembersCardGroup />
-	</div>
-</PageSection>
-
-<style lang="postcss">
-	div.center-container {
-		@apply flex w-full h-full items-center justify-center;
-	}
-</style>
+	</CenterContainer>
+</div>
diff --git a/src/routes/members/+page.svelte b/src/routes/members/+page.svelte
new file mode 100644
index 0000000..ad5ed7f
--- /dev/null
+++ b/src/routes/members/+page.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import MembersCardGroup from '$lib/components/cardGroups/MembersCardGroup.svelte';
+</script>
+
+<Navbar></Navbar>
+<div class="w-screen pt-[6rem]">
+	<CenterContainer>
+		<MembersCardGroup></MembersCardGroup>
+	</CenterContainer>
+</div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..83931b8
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import ProjectCardGroup from '$lib/components/cardGroups/ProjectCardGroup.svelte';
+	import CenterContainer from '$lib/components/layout/CenterContainer.svelte';
+	import Navbar from '$lib/components/navigation/Navbar.svelte';
+</script>
+
+<Navbar></Navbar>
+<div class="w-screen h-full pt-[6rem]">
+		<ProjectCardGroup></ProjectCardGroup>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4c85b87..6bbc173 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,13 +3,6 @@ export default {
   content: ['./src/**/*.{html,js,svelte,ts,svg}'],
   theme: {
     extend: {},
-    screens: {
-      xl: '1280px',
-      lg: '1024px',
-      md: '768px',
-      sm: '640px',
-
-    },
   },
   plugins: [],
 }