diff --git a/src/app.html b/src/app.html
index 027e067..3010903 100644
--- a/src/app.html
+++ b/src/app.html
@@ -35,18 +35,20 @@
 		%sveltekit.head%
 	</head>
 	<body class="bg-gh-bg text-gh-text min-h-screen" data-sveltekit-preload-data="hover">
-		<noscript>
+		<noscript class="no-js">
 			<div class="noscript-message">
-				<h1>Oups!</h1>
+				<h1>Oups! JavaScript is disabled</h1>
 				<p>
-					This application requires JavaScript to be enabled. Please enable JavaScript in your
-					browser settings and refresh the page. <br />
+					This application needs JavaScript to function properly. <br />
+					Please enable it in your browser settings and reload the page.
+					<br />
 					<a href="https://www.enable-javascript.com/" target="_blank" rel="noopener noreferrer">
 						How to enable JavaScript?
 					</a>
 				</p>
 			</div>
 		</noscript>
-		<div style="display: contents">%sveltekit.body%</div>
+		<div class="with-js" style="display: none">%sveltekit.body%</div>
+		<script src="%sveltekit.assets%/assets/js/if.js"></script>
 	</body>
 </html>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index fff64b7..b0bcff7 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,13 +2,13 @@
 	import { page } from '$app/state';
 </script>
 
-<div class="not-found">
-	<h1>{page.error.message}</h1>
+<div class="error">
+	<h1>{page.error?.message}</h1>
 	<a href="/" class="btn-home" aria-label="Retour à l'accueil">Back to homepage</a>
 </div>
 
 <style>
-	.not-found {
+	.error {
 		height: 80vh;
 		display: flex;
 		flex-direction: column;
@@ -19,19 +19,13 @@
 		padding: 1rem;
 	}
 
-	.not-found h1 {
+	.error h1 {
 		font-size: 6rem;
 		font-weight: 900;
 		margin-bottom: 1rem;
 		color: var(--gh-accent, #ff4500);
 	}
 
-	.not-found p {
-		font-size: 1.5rem;
-		margin-bottom: 2rem;
-		color: var(--gh-text-secondary, #666);
-	}
-
 	.btn-home {
 		background-color: var(--gh-accent-emphasis, #ff6347);
 		color: white;
@@ -43,7 +37,6 @@
 		transition: background-color 0.3s ease;
 		text-decoration: none;
 	}
-
 	.btn-home:hover {
 		background-color: var(--gh-accent, #ff4500);
 	}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a197fdf..cc17a18 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -24,9 +24,9 @@
 		const USERNAME = PUBLIC_GITHUB_USERNAME;
 
 		try {
-			// Appel public pour récupérer les infos du user
 			const userResponse = await fetch(`${BASE_URL}/users/${USERNAME}`);
-			if (!userResponse.ok) throw new Error('Error recovering user data');
+			if (!userResponse.ok)
+				throw new Error(`[getDatas] ❌ Error retrieving GitHub user data of ${USERNAME}`);
 			const userData = await userResponse.json();
 
 			user.nickname = userData.name || userData.login[0].toUpperCase() + userData.login.slice(1);
@@ -42,9 +42,14 @@
 			user.blog = userData.blog;
 			user.company = userData.company;
 
-			// Appel public pour récupérer les repos
+			console.log(
+				`[getDatas] ✅ The user data of ${user.nickname || USERNAME} has been retrieved and transformed`,
+				user
+			);
+
 			const reposResponse = await fetch(`${BASE_URL}/users/${USERNAME}/repos?per_page=100`);
-			if (!reposResponse.ok) throw new Error('Error retrieving repositories');
+			if (!reposResponse.ok)
+				throw new Error(`[getDatas] ❌ Error retrieving GitHub repository data of ${USERNAME}`);
 			const reposData = await reposResponse.json();
 
 			repositories = reposData.filter(
@@ -64,9 +69,12 @@
 				}
 			);
 
-			console.log(repositories);
+			console.log(
+				`[getDatas] ✅ The repositories of ${user.nickname || USERNAME} have been retrieved`,
+				repositories
+			);
 		} catch (error) {
-			console.error('Error retrieving GitHub data:', error);
+			console.error(`[getDatas] ❌ Error retrieving GitHub data of ${USERNAME}`, error);
 		}
 	});
 </script>
diff --git a/src/routes/repository/[username]/[repo]/+page.svelte b/src/routes/repository/[username]/[repo]/+page.svelte
index 1361b3b..1f2ad3a 100644
--- a/src/routes/repository/[username]/[repo]/+page.svelte
+++ b/src/routes/repository/[username]/[repo]/+page.svelte
@@ -41,18 +41,33 @@
 
 		try {
 			const repoRes = await fetch(`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}`);
-			if (!repoRes.ok) throw new Error('Unable to retrieve info from repo');
+			if (!repoRes.ok)
+				throw new Error(`[getRepos] ❌ Unable to retrieve info from repo ${username}/${repo}`);
 			const repoData = await repoRes.json();
+			console.log(
+				`[getRepos] ✅ The repo data of ${username}/${repo} has been retrieved`,
+				repoData
+			);
 
 			const langRes = await fetch(`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}/languages`);
-			if (!langRes.ok) throw new Error('Unable to retrieve languages');
+			if (!langRes.ok)
+				throw new Error(`[getRepos] ❌ Unable to retrieve languages of ${username}/${repo}`);
 			const languagesData = await langRes.json();
+			console.log(
+				`[getRepos] ✅ The languages data of ${username}/${repo} has been retrieved`,
+				languagesData
+			);
 
 			const contRes = await fetch(
 				`${PUBLIC_GITHUB_API_URL}/repos/${username}/${repo}/contributors`
 			);
-			if (!contRes.ok) throw new Error('Unable to retrieve contributors');
+			if (!contRes.ok)
+				throw new Error(`[getRepos] ❌ Unable to retrieve contributors of ${username}/${repo}`);
 			const contributorsData = await contRes.json();
+			console.log(
+				`[getRepos] ✅ The contributors data of ${username}/${repo} has been retrieved`,
+				contributorsData
+			);
 
 			// Calcul pourcentages langages
 			const total = Object.values(languagesData).reduce((a, b) => a + b, 0);
@@ -108,17 +123,18 @@
 					<h1 class="gh-text text-2xl font-bold sm:text-3xl">
 						{dataRepo?.repository?.full_name}
 					</h1>
-					<span
-						class="gh-success mt-3 inline-block rounded-full border px-2 py-1 text-xs"
-						style="background-color: rgba(63, 185, 80, 0.2); border-color: rgba(63, 185, 80, 0.3)"
-					>
-						{dataRepo?.repository?.visibility?.toUpperCase()}
-					</span>
 					{#if dataRepo?.repository?.archived}
 						<span
 							class="mt-3 ml-2 inline-block rounded-full border bg-orange-700/25 px-2 py-1 text-xs text-orange-500"
 						>
-							ARCHIVED
+							{dataRepo?.repository?.visibility?.toUpperCase()} ARCHIVED
+						</span>
+					{:else}
+						<span
+							class="gh-success mt-3 inline-block rounded-full border px-2 py-1 text-xs"
+							style="background-color: rgba(63, 185, 80, 0.2); border-color: rgba(63, 185, 80, 0.3)"
+						>
+							{dataRepo?.repository?.visibility?.toUpperCase()}
 						</span>
 					{/if}
 				</div>
diff --git a/static/assets/css/noscript.css b/static/assets/css/noscript.css
index 587cfb2..052674a 100644
--- a/static/assets/css/noscript.css
+++ b/static/assets/css/noscript.css
@@ -1,17 +1,40 @@
 .noscript-message {
-  text-align: center;
+	position: fixed;
+	inset: 0;
+	background-color: #0e0e10;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+	text-align: center;
+	z-index: 9999;
 }
 
 .noscript-message h1 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
+	font-size: 2.5rem;
+	color: #ff4f4f;
+	margin-bottom: 1rem;
+	text-shadow: 0 0 8px #ff4f4f;
 }
 
 .noscript-message p {
-  font-size: 1rem;
+	font-size: 1.1rem;
+	color: #dddddd;
+	max-width: 600px;
+	line-height: 1.6;
 }
 
 .noscript-message a {
-  color: #3b82f6;
-  text-decoration: none;
+	display: inline-block;
+	margin-top: 1rem;
+	color: #00c6ff;
+	text-decoration: none;
+	font-weight: bold;
+	transition: color 0.2s;
+}
+
+.noscript-message a:hover {
+	color: #00ffe0;
+	text-shadow: 0 0 4px #00ffe0;
 }
diff --git a/static/assets/js/if.js b/static/assets/js/if.js
new file mode 100644
index 0000000..b4959cf
--- /dev/null
+++ b/static/assets/js/if.js
@@ -0,0 +1,49 @@
+const urlParams = new URLSearchParams(window.location.search);
+const onLocalhost = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+const devNoJS = onLocalhost && urlParams.has('nojs');
+
+// Default: JS is considered disabled if script does not run
+window.jsEnabled = false;
+
+document.addEventListener('DOMContentLoaded', () => {
+	const noJS = document.querySelector('.no-js');
+	const withJS = document.querySelector('.with-js');
+
+	if (devNoJS) {
+		console.log('[ifJS] 🛠️ DevMode ON (simulating no-JS locally)');
+
+		// Hide JS-dependent content
+		if (withJS) withJS.style.display = 'none';
+
+		// Preview: inject <noscript> from <head> (e.g. CSS fallback)
+		const noscriptHead = document.querySelector('head > noscript');
+		if (noscriptHead) {
+			const headNoscriptDiv = document.createElement('div');
+			headNoscriptDiv.className = 'dev-noscript-head-preview';
+			headNoscriptDiv.innerHTML = noscriptHead.textContent.trim();
+			document.head.append(headNoscriptDiv);
+			console.log('[ifJS] Injected <noscript> from <head>');
+		}
+
+		// Preview: inject <noscript.no-js> from body (HTML fallback)
+		const noscriptBody = document.querySelector('body > noscript.no-js');
+		if (noscriptBody) {
+			const bodyNoscriptDiv = document.createElement('div');
+			bodyNoscriptDiv.className = 'dev-noscript-body-preview';
+			bodyNoscriptDiv.innerHTML = noscriptBody.textContent.trim();
+			document.body.prepend(bodyNoscriptDiv);
+			console.log('[ifJS] Injected <noscript.no-js> from <body>');
+		}
+
+		// Simulated JS-disabled state
+		window.jsEnabled = false;
+		return;
+	}
+
+	// Normal case: JS is enabled
+	if (noJS) noJS.style.display = 'none';
+	if (withJS) withJS.style.display = 'contents';
+	window.jsEnabled = true;
+
+	console.log('[ifJS] ✅ JS is enabled in the browser');
+});
