diff --git a/src/lib/components/cover-img.svelte b/src/lib/components/cover-img.svelte
new file mode 100644
index 0000000..6be21b8
--- /dev/null
+++ b/src/lib/components/cover-img.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import "$lib/css/base.css";
+    import "$lib/css/cover-img.css";
+
+    export let cover =
+        "https://share.etheryo.fr/rando/2023.11.01/Groupe%20Ombre%20Lac%20Montagne%20Vert%20Bleu.jpg";
+    export let gradient = false;
+    export let darken = false;
+    export let title = "Title";
+    export let subtitle = "This is an exemple subtext";
+</script>
+
+<div class="cover-img">
+    {#if gradient}
+        <div class="cover-img-gradient"></div>
+    {/if}
+    {#if darken}
+        <div class="cover-img-darken"></div>
+    {/if}
+    <div class="cover-img-image">
+        <img alt="banner" src={cover} />
+    </div>
+    <div class="cover-img-text flex-col justify-center">
+        <div class="title">
+            <h1>{title}</h1>
+        </div>
+        <div class="text-justify">
+            <h2>{subtitle}</h2>
+        </div>
+    </div>
+    <div class="cover-img-shadow"></div>
+</div>
diff --git a/src/lib/css/cover-img.css b/src/lib/css/cover-img.css
new file mode 100644
index 0000000..2ee0f71
--- /dev/null
+++ b/src/lib/css/cover-img.css
@@ -0,0 +1,63 @@
+.cover-img {
+    display: grid;
+    grid-template-areas:
+        "cover-img-gradient"
+        "cover-img-title"
+        "cover-img-subtitle"
+        "cover-img-block-shadow"
+        "cover-img-darken"
+        "cover-img-image";
+    width: 100%;
+}
+
+.cover-img-gradient {
+    grid-area: overlay;
+    background: linear-gradient(0deg, #00000000, #261C2C40 50%, #261c2c80 100%);
+    height: calc(var(--navbar-height)*2);
+    width: 100%;
+    z-index: 0;
+}
+
+.cover-img-shadow {
+    grid-area: overlay;
+    width: 100%;
+    height: calc(var(--navbar-height)*2);
+    background-color: rgba(0, 0, 0, 0);
+    align-self: end;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px -120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px -100px 60px -18px inset;
+}
+
+.cover-img-text {
+    grid-area: overlay;
+    padding: 4rem;
+    z-index: 1;
+    max-width: 50rem;
+}
+
+.cover-img-text h1 {
+    font-size: 3rem;
+}
+
+.cover-img-text h2 {
+    font-size: 1.1rem;
+    font-family: 'JetBrains Mono';
+    color: var(--color-background);
+}
+
+.cover-img-image {
+    grid-area: overlay;
+    width: 100dvw;
+    height: 100dvh;
+}
+
+.cover-img-darken {
+    grid-area: overlay;
+    background-color: rgb(0, 0, 0, 0.25);
+    z-index: 0;
+}
+
+.cover-img-image img {
+    width: 100dvw;
+    height: 100dvh;
+    object-fit: cover;
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2bb2950..4afa3ae 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,18 @@
 <script>
 	import "$lib/css/base.css";
 	import "$lib/css/main.css";
+
+	import CoverImg from "$lib/components/cover-img.svelte";
+
+	let hub_cover =
+		"https://share.etheryo.fr/rando/2024.07.28/IMG20240728141949_min.jpg";
 </script>
 
 <div class="main-banner">
-	<div class="main-banner-gradient"></div>
-	<div class="main-banner-content">
-		<div
-			class="flex-row center"
-			style="padding-top: 15rem;padding-bottom: 15rem;"
-		>
-			<h1>Welcome to Etheryo</h1>
-		</div>
-	</div>
+	<CoverImg
+		cover={hub_cover}
+		darken={true}
+		title="Welcome to Etheryo"
+		subtitle="'Etheryo' comes from the word 'ethernal' and my own name. The goal of this website is to showcase my creations. It consists of programming, art, philosophy and scientific pieces that reflects what I want to bring to this world."
+	/>
 </div>