diff --git a/src/app.css b/src/app.css
index b5c61c9..eb2387d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@layer base {
+    @font-face {
+        font-family: 'Roboto';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url(/fonts/Roboto-Bold.ttf) format('truetype');
+    }
+    html {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/main/animatedNav.svelte b/src/components/main/animatedNav.svelte
new file mode 100644
index 0000000..faf173d
--- /dev/null
+++ b/src/components/main/animatedNav.svelte
@@ -0,0 +1,34 @@
+<script>
+	import { crossfade } from 'svelte/transition';
+	import { cubicInOut } from 'svelte/easing';
+	import { fade } from 'svelte/transition';
+	import Title from '../title.svelte';
+	const [send, receive] = crossfade({
+		duration: 3000,
+		easing: cubicInOut
+	});
+
+	export let state = 0;
+</script>
+
+{#if state === 0}
+	<div
+		out:fade={{ delay: 3000 }}
+		class="absolute flex h-screen w-screen items-center justify-center bg-[#07090f]"
+	>
+		<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-9xl">
+			<Title />
+		</div>
+	</div>
+{:else}
+	<nav class="flex w-screen justify-between p-8">
+		<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-4xl">
+			<Title />
+		</div>
+
+		<div in:fade={{ delay: 3000 }} class="flex space-x-4">
+			<slot />
+		</div>
+		<div />
+	</nav>
+{/if}
diff --git a/src/components/main/navLink.svelte b/src/components/main/navLink.svelte
new file mode 100644
index 0000000..1e2575d
--- /dev/null
+++ b/src/components/main/navLink.svelte
@@ -0,0 +1,41 @@
+<script>
+	export let href = '';
+	export let activated = false;
+</script>
+
+<a {href} class="h-full text-2xl text-white" class:active={activated}>
+	<slot />
+</a>
+
+<style>
+	a {
+		transition: all 0.3s;
+	}
+
+	a::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: black;
+	}
+
+	a:hover::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: white;
+	}
+
+	.active::after {
+		transition: all 0.3s;
+		content: '';
+		display: block;
+		width: 100%;
+		height: 2px;
+		background-color: white;
+	}
+</style>
diff --git a/src/components/title.svelte b/src/components/title.svelte
new file mode 100644
index 0000000..8122dee
--- /dev/null
+++ b/src/components/title.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<h1 class="hero glitch layers text-center text-white" data-text="4T$">4T$</h1>
diff --git a/src/lib/glitch.css b/src/lib/glitch.css
index 307fcb2..e94364b 100644
--- a/src/lib/glitch.css
+++ b/src/lib/glitch.css
@@ -1,5 +1,4 @@
 .hero {
-    font-size: clamp(40px, 10vw, 100px);
     line-height: 1;
     color: #fff;
     z-index: 2;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e253a4f..6d046ee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,12 +1,48 @@
 <script>
+	import { fade } from 'svelte/transition';
 	import '../app.css';
+	import '$lib/glitch.css';
+	import { onMount } from 'svelte';
+	import NavLink from '../components/main/navLink.svelte';
+	import AnimatedNav from '../components/main/animatedNav.svelte';
+	import { page } from '$app/stores';
+	import { onNavigate } from '$app/navigation';
+
+	// Animation : start at center, end up in the navbar
+	let titlePosition = 0;
+	let transitioning = false;
+
+	onMount(() => {
+		setTimeout(() => {
+			titlePosition++;
+		}, 1000);
+	});
+
+	onNavigate(() => {
+		transitioning = true;
+		setTimeout(() => {
+			transitioning = false;
+		}, 300);
+	});
 </script>
 
-<slot />
+<!-- Animation : start at center, end up in the navbar -->
+
+<AnimatedNav state={titlePosition}>
+	<!-- Add buttons for navigation -->
+	<NavLink href="/" activated={$page.url.pathname === '/'}>Home</NavLink>
+	<NavLink href="/page" activated={$page.url.pathname === '/page'}>Page</NavLink>
+</AnimatedNav>
+
+{#if !transitioning}
+	<div transition:fade={{ duration: 200 }}>
+		<slot />
+	</div>
+{/if}
 
 <style lang="postcss">
 	:global(html) {
-		background-color: theme(colors.gray.900);
+		background-color: #07090f;
 		overflow-x: hidden;
 	}
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 12add94..f821e01 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1 @@
-<script>
-	import '$lib/glitch.css';
-</script>
-
-<div class="w-screen">
-	<h1 class="text-center text-white hero glitch layers" data-text="4T$">4T$</h1>
-</div>
+<div class="text-white">this is home</div>
diff --git a/src/routes/page/+page.svelte b/src/routes/page/+page.svelte
new file mode 100644
index 0000000..19edb6f
--- /dev/null
+++ b/src/routes/page/+page.svelte
@@ -0,0 +1 @@
+<div class="text-white">this is page</div>
diff --git a/static/fonts/Roboto-Black.ttf b/static/fonts/Roboto-Black.ttf
new file mode 100644
index 0000000..0112e7d
Binary files /dev/null and b/static/fonts/Roboto-Black.ttf differ
diff --git a/static/fonts/Roboto-BlackItalic.ttf b/static/fonts/Roboto-BlackItalic.ttf
new file mode 100644
index 0000000..b2c6aca
Binary files /dev/null and b/static/fonts/Roboto-BlackItalic.ttf differ
diff --git a/static/fonts/Roboto-Bold.ttf b/static/fonts/Roboto-Bold.ttf
new file mode 100644
index 0000000..43da14d
Binary files /dev/null and b/static/fonts/Roboto-Bold.ttf differ
diff --git a/static/fonts/Roboto-BoldItalic.ttf b/static/fonts/Roboto-BoldItalic.ttf
new file mode 100644
index 0000000..bcfdab4
Binary files /dev/null and b/static/fonts/Roboto-BoldItalic.ttf differ
diff --git a/static/fonts/Roboto-Italic.ttf b/static/fonts/Roboto-Italic.ttf
new file mode 100644
index 0000000..1b5eaa3
Binary files /dev/null and b/static/fonts/Roboto-Italic.ttf differ
diff --git a/static/fonts/Roboto-Light.ttf b/static/fonts/Roboto-Light.ttf
new file mode 100644
index 0000000..e7307e7
Binary files /dev/null and b/static/fonts/Roboto-Light.ttf differ
diff --git a/static/fonts/Roboto-LightItalic.ttf b/static/fonts/Roboto-LightItalic.ttf
new file mode 100644
index 0000000..2d277af
Binary files /dev/null and b/static/fonts/Roboto-LightItalic.ttf differ
diff --git a/static/fonts/Roboto-Medium.ttf b/static/fonts/Roboto-Medium.ttf
new file mode 100644
index 0000000..ac0f908
Binary files /dev/null and b/static/fonts/Roboto-Medium.ttf differ
diff --git a/static/fonts/Roboto-MediumItalic.ttf b/static/fonts/Roboto-MediumItalic.ttf
new file mode 100644
index 0000000..fc36a47
Binary files /dev/null and b/static/fonts/Roboto-MediumItalic.ttf differ
diff --git a/static/fonts/Roboto-Regular.ttf b/static/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000..ddf4bfa
Binary files /dev/null and b/static/fonts/Roboto-Regular.ttf differ
diff --git a/static/fonts/Roboto-Thin.ttf b/static/fonts/Roboto-Thin.ttf
new file mode 100644
index 0000000..2e0dee6
Binary files /dev/null and b/static/fonts/Roboto-Thin.ttf differ
diff --git a/static/fonts/Roboto-ThinItalic.ttf b/static/fonts/Roboto-ThinItalic.ttf
new file mode 100644
index 0000000..084f9c0
Binary files /dev/null and b/static/fonts/Roboto-ThinItalic.ttf differ