diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
new file mode 100644
index 0000000..c9b47b0
--- /dev/null
+++ b/frontend/src/lib/css/base.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;700&family=Urbanist:wght@500;600;900&family=Sometype+Mono:wght@500&display=swap');
+
+body,
+html {
+    height: 100%;
+    background: var(--color-background);
+    margin: 0;
+    padding: 0;
+}
+
+h1 {
+    margin-top: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+:root {
+    --color-title: #071952;
+    --color-subtitle: #0C356A;
+    --color-special: #0174BE;
+    --color-text: #261C2C;
+    --color-subtext: #413543;
+    --color-background: #F8F1F1;
+    --color-code: #ECE6F1;
+    --color-pill: #D0D4CA;
+
+    --palette-pink: #ad62aa;
+    --palette-red: #9A031E;
+    --palette-orange: #FF5B22;
+    --palette-yellow: #ff9843;
+    --palette-green: #0d9276;
+    --palette-purple: #4B1E78;
+    --palette-brown: #3c2317;
+}
+
+.flex-row {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.flex-start {
+    align-self: flex-start;
+}
+
+.flex-end {
+    margin-left: auto !important;
+}
+
+.shadow {
+    box-shadow: rgba(29, 74, 101, 0.376) 0px 8px 18px -1px;
+}
+
+.h-100 {
+    height: 100%;
+}
\ No newline at end of file
diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
new file mode 100644
index 0000000..6861d2d
--- /dev/null
+++ b/frontend/src/lib/css/navbar.css
@@ -0,0 +1,101 @@
+nav {
+    height: 5rem;
+    width: 100%;
+    position: fixed;
+    z-index: 5;
+    transition: all .3s ease 0s;
+}
+
+nav > div {
+    transition: all .3s ease 0s;
+}
+
+.navbar-background {
+    border-radius: 0.5rem;
+    background-color: var(--color-text);
+    height: 90%;
+    margin: 0.5rem;
+}
+
+.navbar-fake {
+    height: 5rem;
+    width: 100%;
+}
+
+.navbar-title {
+    width: 15rem;
+    justify-content: center;
+}
+
+.navbar-title h1 {
+    color: var(--color-background);
+    font-family: Gabarito;
+    font-weight: 700;
+    margin: 0 !important;
+}
+
+.navbar-categories {
+    width: 25rem;
+    justify-content: center;
+}
+
+.navbar-categories a {
+    color: var(--color-background);
+    text-decoration: none;
+    font-family: Gabarito;
+    font-weight: 400;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.navbar-search {
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.navbar-search input {
+    width: 10rem;
+    margin-right: 1rem;
+    margin-left: 1rem;
+    margin-top: calc((5rem / 2) - 1.2rem);
+    background-color: var(--color-text);
+    color: var(--color-background);
+    height: 1.5rem;
+    border: 2px solid;
+    border-color: var(--color-subtext);
+    border-radius: 2rem;
+    padding-left: 0.5rem;
+}
+
+.navbar-search-floating input {
+    margin-top: 0 !important;
+    background-color: var(--color-background) !important;
+    color: var(--color-subtext) !important;
+    border-color: var(--color-pill) !important;
+}
+
+/* Floating */
+
+.floating {
+    background-color: rgba(248, 241, 241, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.376) 0px 8px 18px -1px;
+    -webkit-backdrop-filter: blur(1rem);
+    backdrop-filter: blur(1rem);
+    height: 4rem;
+}
+
+.floating > div {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    color: var(--color-text); 
+}
+
+.floating > div > h1 {
+    color: var(--color-text) !important;
+}
+
+.floating > div > div > a {
+    color: var(--color-text) !important;
+}
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
new file mode 100644
index 0000000..e995408
--- /dev/null
+++ b/frontend/src/routes/+layout.svelte
@@ -0,0 +1,38 @@
+<!-- svelte-ignore a11y-missing-content -->
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/navbar.css';
+
+	let scrollY;
+</script>
+
+<svelte:window bind:scrollY />
+
+<!-- Navbar -->
+<nav class={scrollY < 50 ? 'flex-row' : 'flex-row floating'}>
+	<div class={scrollY < 50 ? 'navbar-title flex-row navbar-background shadow' : 'navbar-title h-100'}>
+		<h1>Etheryo Blog</h1>
+	</div>
+	<div class={scrollY < 50 ? 'navbar-categories flex-row flex-end navbar-background shadow' : 'flex-end navbar-categories h-100'}>
+		<div>
+			<a href="/">Articles</a>
+		</div>
+		<div>
+			<a href="/">Auteurs</a>
+		</div>
+		<div>
+			<a href="/">Catégories</a>
+		</div>
+		<div>
+			<a href="/">Flux RSS</a>
+		</div>
+	</div>
+	<div class={scrollY < 50 ? 'navbar-search navbar-background shadow' : 'navbar-search navbar-search-floating h-100'}>
+		<input type="text" placeholder="Rechercher..." />
+	</div>
+</nav>
+<div class="navbar-fake" />
+
+<slot />
+
+<!-- Footer -->
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b8f94ba..f4772c8 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -23,6 +23,7 @@
 		{#each data as d}
             <p>id: {d.id}</p>
         {/each}
+        <div style="height: 100rem;"></div>
     {:else if hasLoadFailed}
         <p>Loading failed :c</p>
 	{:else}