diff --git a/.gitignore b/.gitignore
index 79518f7..6d840ca 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Custom
+/src/lib/assets/images/*.psd
\ No newline at end of file
diff --git a/src/app.html b/src/app.html
index b931e5c..b447f23 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="fr">
 	<head>
 		<meta charset="utf-8" />
 		<link
@@ -38,7 +38,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="min-h-screen">
+	<body data-sveltekit-preload-data="hover" class="main-background text-neutral-200">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 1387174..3e32e73 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -25,7 +25,7 @@
 
 <div class="mt-[5vh]">
 	<footer
-		class="fixed bottom-0 left-0 z-20 w-full p-2 bg-[#191e14] text-neutral-200 shadow md:flex md:items-center md:justify-between md:p-2"
+		class="bg-opacity-50 shadow fixed bottom-0 left-0 z-20 w-full p-2 bg-[#191e14] text-neutral-200 shadow md:flex md:items-center md:justify-between md:p-2"
 	>
 		<span class="text-sm sm:text-center">
 			<small>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index a241b40..372dc60 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -46,7 +46,7 @@
 						title={link.name}
 						rel="noopener"
 						target="_self"
-						class={`mx-1.5 sm:mx-6 ${
+						class={`mx-1.5 sm:mx-6 font-bold ${
 							link.url === $page.url.pathname
 								? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
 								: 'text-neutral-300 hover:text-neutral-100'
@@ -69,7 +69,7 @@
 							title={link.name}
 							rel="noopener"
 							target="_self"
-							class={`font-medium py-2 px-4 text-sm hover:bg-[#192809] ${
+							class={`font-medium py-2 px-4 text-sm hover:bg-[#192809] font-bold ${
 								link.url === $page.url.pathname
 									? 'text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-400 hover:from-red-300 hover:to-yellow-200'
 									: 'text-neutral-300 hover:text-neutral-100'
diff --git a/src/lib/assets/images/logo_header.png b/src/lib/assets/images/logo_header.png
index b9261d8..351ec63 100644
Binary files a/src/lib/assets/images/logo_header.png and b/src/lib/assets/images/logo_header.png differ
diff --git a/src/lib/assets/images/logo_header_2.png b/src/lib/assets/images/logo_header_2.png
new file mode 100644
index 0000000..351ec63
Binary files /dev/null and b/src/lib/assets/images/logo_header_2.png differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3480047..d764477 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,27 +2,35 @@
 	import '$lib/assets/css/tailwind.css';
 	import Header from '../components/Header.svelte';
 	import Footer from '../components/Footer.svelte';
-	import logoHeader from '$lib/assets/images/logo_header.png';
+	import logoHeader from '$lib/assets/images/logo_header_2.png';
 </script>
 
 <div class="container mx-auto px-4">
 	<Header />
-	<main class="text-center mt-4">
+	<main class="text-center mt-4 relative z-20">
 		<img src={logoHeader} alt="Ninjin Logo" class="w-full max-w-2xl mx-auto" draggable="false" />
 
-		<section class="bg-green-800 bg-opacity-70 border-8 border-black mx-10 my-4 p-6 rounded-lg">
+		<section
+			class="bg-[#192908] bg-opacity-70 border-4 border-black mx-10 my-4 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out"
+		>
 			<slot />
 		</section>
 	</main>
 </div>
 <Footer />
+<div class="repeat-background">
+	<!-- Cette div couvre tout l'écran sous la première image de fond -->
+</div>
 
 <style lang="postcss">
-	:global(body) {
-		background-image: url('/assets/images/background.png'), url('/assets/images/background_end.png');
-		background-repeat: no-repeat, repeat;
-		background-size: contain;
-		font-family: 'Olney', Verdana, sans-serif;
-		color: white;
+	:global(.main-background) {
+		background-image: url('/assets/images/background.png');
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+	}
+	.repeat-background {
+		background-image: url('/assets/images/background_end.png');
+		background-repeat: repeat;
 	}
 </style>
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index 4e7c013..94b63e4 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -7,5 +7,7 @@
 	Voici la map du serveur, les dimensions sont 10000x8000 blocks.
 </p>
 <div class="flex justify-center mt-6">
-	<img src={map} alt="map" draggable="false" class="w-full max-w-3xl h-auto rounded-lg" />
+	<a href={map} target="_blank" rel="noopener noreferrer" title="Voir la map en plein écran">
+		<img src={map} alt="map" draggable="false" class="w-full max-w-3xl h-auto rounded-lg" />
+	</a>
 </div>
