diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index c213343..bc574fd 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -63,7 +63,7 @@ a {
     width: 0;
     background-color: var(--palette-purple);
     transition: all .3s ease 0s;
-    height: 2px;
+    height: 3px;
 }
 
 .navbar-categories-white>div>a::before,
@@ -73,7 +73,6 @@ a {
 
 .navbar-categories>div>a::before {
     top: -6px;
-    height: 3px;
 }
 
 .navbar-categories>div>a::after {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 81a4e95..da58333 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -4,8 +4,21 @@
 	import '$lib/css/navbar.css';
 	import { page } from '$app/stores';
 
-	const url = $page.url.pathname;
+	$: 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 />
@@ -22,16 +35,18 @@
 			: 'flex-end navbar-categories h-100'}
 	>
 		<div>
-			<a class={scrollY < 50 ? 'navbar-active' : 'navbar-active navbar-active-scroll'}  href="/">Articles</a>
+			<a class={isActiveMultiple(['/', '/articles'], pageUrl, scrollY < 50)} href="/articles"
+				>Articles</a
+			>
 		</div>
 		<div>
-			<a href="/">Auteurs</a>
+			<a class={isActive('/authors', pageUrl, scrollY < 50)} href="/authors">Auteurs</a>
 		</div>
 		<div>
-			<a href="/">Catégories</a>
+			<a class={isActive('/categories', pageUrl, scrollY < 50)} href="/categories">Catégories</a>
 		</div>
 		<div>
-			<a href="/">Flux RSS</a>
+			<a class={isActive('/rss', pageUrl, scrollY < 50)} href="/rss">Flux RSS</a>
 		</div>
 	</div>
 	<div
diff --git a/frontend/src/routes/+page.js b/frontend/src/routes/+page.js
new file mode 100644
index 0000000..ce4db72
--- /dev/null
+++ b/frontend/src/routes/+page.js
@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load(context)
+{
+    redirect(301, '/articles')
+}
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/articles/+page.svelte
similarity index 100%
rename from frontend/src/routes/+page.svelte
rename to frontend/src/routes/articles/+page.svelte
diff --git a/frontend/src/routes/authors/+page.svelte b/frontend/src/routes/authors/+page.svelte
new file mode 100644
index 0000000..2bdac90
--- /dev/null
+++ b/frontend/src/routes/authors/+page.svelte
@@ -0,0 +1 @@
+<h1>Authors</h1>
\ No newline at end of file
diff --git a/frontend/src/routes/categories/+page.svelte b/frontend/src/routes/categories/+page.svelte
new file mode 100644
index 0000000..904e488
--- /dev/null
+++ b/frontend/src/routes/categories/+page.svelte
@@ -0,0 +1 @@
+<h1>Categories</h1>
\ No newline at end of file
diff --git a/frontend/src/routes/rss/+page.svelte b/frontend/src/routes/rss/+page.svelte
new file mode 100644
index 0000000..105934e
--- /dev/null
+++ b/frontend/src/routes/rss/+page.svelte
@@ -0,0 +1 @@
+<h1>Rss</h1>
\ No newline at end of file