diff --git a/frontend/src/lib/components/archive.svelte b/frontend/src/lib/components/archive.svelte
index 08ebbac..bd183a6 100644
--- a/frontend/src/lib/components/archive.svelte
+++ b/frontend/src/lib/components/archive.svelte
@@ -2,7 +2,7 @@
 	import '$lib/css/base.css';
 	import '$lib/css/archive.css';
 	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiChevronRight, mdiHomeVariantOutline } from '@mdi/js';
+	import { mdiChevronRight } from '@mdi/js';
 	import anime from 'animejs';
 
 	export let fontPost = 1;
diff --git a/frontend/src/lib/components/navbar.svelte b/frontend/src/lib/components/navbar.svelte
new file mode 100644
index 0000000..c499808
--- /dev/null
+++ b/frontend/src/lib/components/navbar.svelte
@@ -0,0 +1,132 @@
+<!-- svelte-ignore a11y-missing-content -->
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/navbar.css';
+	import { page } from '$app/stores';
+	import anime from 'animejs';
+
+	import Search from '$lib/components/search.svelte';
+
+	const SCROLL = 150;
+
+	$: pageUrl = $page.url.pathname;
+	let scrollY;
+	let cursorX;
+	let cursorY;
+
+	let navbar_title;
+	let navbar_category;
+	let navbar_search;
+
+	function isActive(str, url) {
+		if (url === str) return 'navbar-active';
+		else return '';
+	}
+
+	function isActiveMultiple(strArray, url) {
+		for (const str of strArray) {
+			const returnVal = isActive(str, url);
+			if (returnVal != '') return returnVal;
+		}
+		return '';
+	}
+
+	function update_gradient(event, div) {
+		const rect = div.getBoundingClientRect();
+		cursorX = event.clientX - rect.left;
+		cursorY = event.clientY - rect.top;
+		div.style.backgroundImage = `radial-gradient(circle farthest-corner at ${Math.floor(cursorX)}px ${Math.floor(cursorY)}px, var(--navbar-ligher) 0%, var(--navbar-darker) 100%)`;
+	}
+
+	function animateForeground(isEntering, div_back) {
+		const targetOpacity = isEntering ? 1 : 0;
+
+		anime({
+			targets: div_back,
+			opacity: [1 - targetOpacity, targetOpacity],
+			duration: 400,
+			easing: 'easeInOutQuad'
+		});
+	}
+
+	function changeScroll() {
+		document.documentElement.style.setProperty(
+			'--navbar-height',
+			scrollY < SCROLL ? '6rem' : '5rem'
+		);
+	}
+</script>
+
+<svelte:window bind:scrollY on:scroll={changeScroll} />
+
+<!-- Navbar -->
+<nav class={scrollY < SCROLL ? 'flex-row' : 'flex-row floating'}>
+	<div
+		role="banner"
+		class="navbar-height flex-row container"
+		on:mousemove={(event) => {
+			update_gradient(event, navbar_title);
+		}}
+		on:mouseenter={() => {
+			animateForeground(true, navbar_title);
+		}}
+		on:mouseleave={() => {
+			animateForeground(false, navbar_title);
+		}}
+	>
+		<div class="navbar-title content">
+			<h1>Etheryo Blog</h1>
+		</div>
+		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
+		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_title} />
+	</div>
+
+	<div
+		role="banner"
+		class="navbar-height flex-row flex-end container"
+		on:mousemove={(event) => {
+			update_gradient(event, navbar_category);
+		}}
+		on:mouseenter={() => {
+			animateForeground(true, navbar_category);
+		}}
+		on:mouseleave={() => {
+			animateForeground(false, navbar_category);
+		}}
+	>
+		<div class="content navbar-categories">
+			<div>
+				<a class={isActiveMultiple(['/', '/articles', '/style'], pageUrl)} href="/articles"
+					>Articles</a
+				>
+			</div>
+			<div>
+				<a class={isActive('/authors', pageUrl)} href="/authors">Auteurs</a>
+			</div>
+			<div>
+				<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
+			</div>
+		</div>
+		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
+		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
+	</div>
+
+	<div
+		role="banner"
+		class="navbar-height flex-row container"
+		on:mousemove={(event) => {
+			update_gradient(event, navbar_search);
+		}}
+		on:mouseenter={() => {
+			animateForeground(true, navbar_search);
+		}}
+		on:mouseleave={() => {
+			animateForeground(false, navbar_search);
+		}}
+	>
+		<div class="content navbar-search"><Search /></div>
+		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
+		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_search} />
+	</div>
+</nav>
+<div class="navbar-fake" />
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 19b6ad6..3471272 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -80,6 +80,11 @@ h1 {
     justify-content: center;
 }
 
+.center {
+    align-items: center;
+    justify-content: center;
+}
+
 .margin-padding-0 {
     margin: 0;
     padding: 0;
@@ -92,4 +97,25 @@ h1 {
 .margin-horizontal-05 {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
+}
+
+.margin-left-3 {
+    margin-left: 3rem;
+}
+
+.margin-05 {
+    margin-left: 0.5rem;
+}
+
+.padding-left-3 {
+    padding-left: 3rem;
+}
+
+.relative {
+    position: relative;
+}
+
+.inherit-w-h {
+    width: inherit;
+    height: inherit;
 }
\ No newline at end of file
diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index 91cc12d..bdad68d 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -1,13 +1,22 @@
+:root {
+    --navbar-height: 6rem;
+    --transition: all .4s ease 0s;
+    --navbar-dark: #261C2CFF;
+    --navbar-darker: #261C2CFF;
+    --navbar-light: #413543FF;
+    --navbar-ligher: #413543FF;
+    --navbar-outline: 2px solid rgb(40, 32, 44, 0.5);
+    --navbar-inset: inset 0px 0px 0px 2px rgba(52, 42, 58, 0.5);
+    --navbar-blur: blur(0.6rem);
+}
+
 nav {
-    height: 5rem;
+    height: var(--navbar-height);
     width: 100%;
     position: fixed;
     z-index: 5;
-    transition: all .3s ease 0s;
-}
-
-nav>div {
-    transition: all .3s ease 0s;
+    transition: var(--transition);
+    padding-top: 0.5rem;
 }
 
 a {
@@ -16,38 +25,87 @@ a {
 
 .navbar-background {
     border-radius: 0.5rem;
-    background-color: var(--color-text);
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     height: 90%;
     margin: 0.5rem;
 }
 
 .navbar-fake {
-    height: 5rem;
+    height: var(--navbar-height);
     width: 100%;
 }
 
+/* Background */
+
+.container {
+    display: grid;
+    grid-template-areas:
+        "navbar-overlay-back"
+        "navbar-overlay-front"
+        "navbar-content";
+}
+
+.navbar-overlay-front {
+    grid-area: overlay;
+    background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
+    width: inherit;
+    height: inherit;
+    border-radius: 0.5rem;
+    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, var(--navbar-inset);
+    outline: 2px solid rgb(40, 32, 44, 0.5);
+}
+
+.navbar-overlay-back {
+    grid-area: overlay;
+    width: inherit;
+    height: inherit;
+    border-radius: 0.5rem;
+    box-shadow: var(--navbar-inset);
+    outline: var(--navbar-outline)
+}
+
+.content {
+    grid-area: overlay;
+    z-index: 1;
+    width: inherit;
+    display: flex;
+}
+
+/* Each element */
+.navbar-height {
+    height: var(--navbar-height);
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
 .navbar-title {
-    width: 15rem;
-    justify-content: center;
+    margin-left: 3rem;
+    margin-right: 3rem;
 }
 
 .navbar-title h1 {
     color: var(--color-background);
     font-family: Gabarito;
     font-weight: 700;
-    margin: 0 !important;
+    cursor: default;
+    transition: var(--transition);
 }
 
 .navbar-categories {
-    width: 25rem;
-    justify-content: center;
+    align-items: center;
+    height: var(--navbar-height);
+    padding-left: 1rem;
+    padding-right: 1rem;
 }
 
 .navbar-categories a {
     text-decoration: none;
-    font-family: Gabarito;
-    font-weight: 400;
+    font-family: JetBrains Mono;
+    font-weight: 500;
+    font-size: 1rem;
     transition: all .3s ease 0s;
+    color: var(--color-background);
+    transition: var(--transition);
 }
 
 .navbar-categories div {
@@ -61,22 +119,19 @@ a {
     content: "";
     position: absolute;
     width: 0;
-    background-color: var(--palette-purple);
+    background-color: var(--palette-pink);
     transition: all .3s ease 0s;
     height: 3px;
 }
 
-.navbar-categories-white>div>a::before,
-.navbar-categories-white>div>a::after {
-    background-color: var(--palette-pink) !important;
-}
-
 .navbar-categories>div>a::before {
-    top: -6px;
+    top: -3px;
+    height: 3px;
 }
 
 .navbar-categories>div>a::after {
-    bottom: -6px;
+    bottom: -3px;
+    height: 3px;
     right: 0;
 }
 
@@ -86,17 +141,11 @@ a {
 }
 
 .navbar-categories>div>a:hover {
-    color: var(--palette-purple);
-}
-
-.navbar-categories-white>div>a:hover {
     color: var(--palette-pink);
 }
 
 .navbar-search {
-    align-items: center;
     justify-content: center;
-    text-align: center;
 }
 
 .navbar-search input {
@@ -123,39 +172,28 @@ a {
 /* Floating */
 
 .floating {
-    background-color: rgba(248, 241, 241, 0.5);
-    box-shadow: #41354340 0px 8px 18px -1px;
-    -webkit-backdrop-filter: blur(1rem);
-    backdrop-filter: blur(1rem);
-    height: 4rem;
+    background-image: linear-gradient(to right, #241d25e5 0%, #3d2b47e5 100%);
+    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+    border-bottom-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    padding-top: 0;
+    -webkit-backdrop-filter: var(--navbar-blur);
+    backdrop-filter: var(--navbar-blur);
 }
 
 .floating>div {
     display: flex;
     align-items: center;
     flex-direction: row;
-    color: var(--color-text);
-}
-
-.floating>div>h1 {
-    color: var(--color-text);
-}
-
-.floating>div>div>a {
-    color: var(--color-text);
 }
 
 /* Active */
 
 .navbar-active {
-    color: var(--palette-pink);
+    color: var(--palette-pink) !important;
     cursor: default;
 }
 
-.navbar-active-scroll {
-    color: var(--palette-purple) !important;
-}
-
 .navbar-active::after {
     width: 100% !important;
 }
diff --git a/frontend/src/lib/css/style.css b/frontend/src/lib/css/style.css
index 1ac9494..fe9eea0 100644
--- a/frontend/src/lib/css/style.css
+++ b/frontend/src/lib/css/style.css
@@ -1,50 +1,4 @@
-.base {
-    margin-left: 3rem;
-}
-
 .blank {
     height: 10rem;
     background-color: #00000000;
 }
-
-/* Menu */
-
-.menu-border {
-    background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
-    background-image: -webkit-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: -moz-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: -o-linear-gradient(left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: linear-gradient(to left, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    padding: 0.8rem;
-    width: 40rem;
-    border-radius: 1rem;
-    box-shadow: rgba(52, 42, 58, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
-}
-
-
-.menu {
-    border-radius: 0.8rem;
-    background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, rgb(52, 42, 58)), color-stop(100, rgb(38, 28, 44)));
-    background-image: -webkit-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: -moz-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: -o-linear-gradient(right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    background-image: linear-gradient(to right, rgb(52, 42, 58) 0%, rgb(38, 28, 44) 100%);
-    justify-content: center;
-    align-items: center;
-    min-height: 10rem;
-}
-
-.menu p {
-    font-family: 'JetBrains Mono';
-    font-weight: 600;
-    margin: 0 !important;
-    font-size: 5rem;
-    color: var(--color-background);
-    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.3)) drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.1));
-}
-
-.menu svg {
-    margin-right: 3rem;
-    color: var(--color-background);
-    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 15px 25px) drop-shadow(rgba(0, 0, 0, 0.1) 0px 5px 10px);
-}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index da58333..3780c68 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -2,63 +2,10 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/navbar.css';
-	import { page } from '$app/stores';
-
-	$: pageUrl = $page.url.pathname;
-	let scrollY;
-
-	function isActive(str, url, condition) {
-		if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
-		else return '';
-	}
-
-	function isActiveMultiple(strArray, url, condition) {
-		for (const str of strArray) {
-			const returnVal = isActive(str, url, condition);
-			if (returnVal != '') return returnVal;
-		}
-		return '';
-	}
+	import Navbar from '$lib/components/navbar.svelte';
 </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 navbar-categories-white flex-row flex-end navbar-background shadow'
-			: 'flex-end navbar-categories h-100'}
-	>
-		<div>
-			<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
-				>Articles</a
-			>
-		</div>
-		<div>
-			<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
-		</div>
-		<div>
-			<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
-		</div>
-		<div>
-			<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">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" />
-
+<Navbar/>
 <slot />
 
 <!-- Footer -->
diff --git a/frontend/src/routes/old_layout.svelte b/frontend/src/routes/old_layout.svelte
new file mode 100644
index 0000000..da58333
--- /dev/null
+++ b/frontend/src/routes/old_layout.svelte
@@ -0,0 +1,64 @@
+<!-- svelte-ignore a11y-missing-content -->
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/navbar.css';
+	import { page } from '$app/stores';
+
+	$: pageUrl = $page.url.pathname;
+	let scrollY;
+
+	function isActive(str, url, condition) {
+		if (url === str) return condition ? 'navbar-active' : 'navbar-active navbar-active-scroll';
+		else return '';
+	}
+
+	function isActiveMultiple(strArray, url, condition) {
+		for (const str of strArray) {
+			const returnVal = isActive(str, url, condition);
+			if (returnVal != '') return returnVal;
+		}
+		return '';
+	}
+</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 navbar-categories-white flex-row flex-end navbar-background shadow'
+			: 'flex-end navbar-categories h-100'}
+	>
+		<div>
+			<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
+				>Articles</a
+			>
+		</div>
+		<div>
+			<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
+		</div>
+		<div>
+			<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
+		</div>
+		<div>
+			<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">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/style/+page.svelte b/frontend/src/routes/style/+page.svelte
index 2df61a8..cc935ce 100644
--- a/frontend/src/routes/style/+page.svelte
+++ b/frontend/src/routes/style/+page.svelte
@@ -1,8 +1,6 @@
 <script>
 	import '$lib/css/base.css';
 	import '$lib/css/style.css';
-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiAccount } from '@mdi/js';
 
 	import Post from '$lib/components/post-min.svelte';
 	import Search from '$lib/components/search.svelte';
@@ -10,28 +8,31 @@
 </script>
 
 <div class="base">
-	<br /><br />
-	<div class="menu-border">
-		<div class="menu flex-row">
-			<SvgIcon type="mdi" path={mdiAccount} size="120"></SvgIcon>
-			<p>Test</p>
-		</div>
+	<div class="blank" />
+	<div class="blank" />
+	<div class="margin-left-3">
+		<Post
+			cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
+			profile="https://avatars.githubusercontent.com/u/115081848?v=4"
+			title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
+			text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
+			author="Yohan boujon"
+			date="26/07/2024"
+		/>
 	</div>
-	<div class="blank"></div>
-	<Post
-		cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
-		profile="https://avatars.githubusercontent.com/u/115081848?v=4"
-		title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
-		text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
-		author="Yohan boujon"
-		date="26/07/2024"
-	/>
-	<div class="blank"></div>
-	<Search/>
-	<div class="blank"></div>
-	<Post/>
-	<div class="blank"></div>
-	<Archive/>
-	<div class="blank"></div>
-	<div class="blank"></div>
+	<div class="blank" />
+	<div class="margin-left-3">
+		<Search />
+	</div>
+	<div class="blank" />
+	<div class="margin-left-3">
+		<Post />
+	</div>
+
+	<div class="blank" />
+	<div class="margin-left-3">
+		<Archive />
+	</div>
+	
+	<div class="blank" />
 </div>