diff --git a/frontend/src/lib/components/navbar.svelte b/frontend/src/lib/components/navbar.svelte
index 07526d7..c78fcab 100644
--- a/frontend/src/lib/components/navbar.svelte
+++ b/frontend/src/lib/components/navbar.svelte
@@ -111,4 +111,3 @@
 		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
 	</div>
 </nav>
-<div class="navbar-fake" />
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 3adeda8..6f28483 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -33,10 +33,16 @@ h1 {
     --palette-purple: #4B1E78;
     --palette-brown: #3c2317;
 
+    --background-light: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+
     --z-index-last: -1;
     --z-index-normal: 0;
     --z-index-front: 1;
-    --z-index-popup: 2;
+    --z-index-navbar: 2;
+    --z-index-popup: 3;
+
+    --border-min: 0.5rem;
+    --border-max: 2rem;
 
     --width-mobile: 875px;
     /*  https://clamp.font-size.app/ 
@@ -44,6 +50,13 @@ h1 {
     --1-rem: clamp(0.75rem, -0.2222rem + 1.7778vw, 1rem);
     --1-2-rem: clamp(0.9rem, -0.2667rem + 2.1333vw, 1.2rem);
     --1-6-rem: clamp(1.2rem, -0.3556rem + 2.8444vw, 1.6rem);
+
+    --navbar-height: 6rem;
+}
+
+.base {
+    z-index: var(--z-index-front);
+    position: relative;
 }
 
 .title {
diff --git a/frontend/src/lib/css/button-slider.css b/frontend/src/lib/css/button-slider.css
index c2f1503..eaa89fd 100644
--- a/frontend/src/lib/css/button-slider.css
+++ b/frontend/src/lib/css/button-slider.css
@@ -2,7 +2,7 @@
     display: flex;
     width: 100%;
     height: 3.5rem;
-    background: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
+    background: var(--background-light);
     border-radius: 3rem;
     padding: 0 !important;
 }
diff --git a/frontend/src/lib/css/footer.css b/frontend/src/lib/css/footer.css
index 94e2896..9cea123 100644
--- a/frontend/src/lib/css/footer.css
+++ b/frontend/src/lib/css/footer.css
@@ -11,7 +11,7 @@
     top: -2rem;
     width: 100%;
     background-color: var(--color-background);
-    border-radius: 2rem;
+    border-radius: var(--border-max);
 }
 
 .footer-container {
@@ -21,8 +21,7 @@
     padding-top: 2rem;
     height: fit-content;
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
-    box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;
-    z-index: var(--z-index-last);
+    box-shadow: rgba(72, 50, 93, 0.2) 0px 120px 60px -20px inset, rgba(0, 0, 0, 0.4) 0px 100px 60px -18px inset;    
 }
 
 .footer-content {
diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index 74c5ff3..acb9331 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -1,5 +1,4 @@
 :root {
-    --navbar-height: 6rem;
     --transition: all .4s ease 0s;
     --navbar-dark: #261C2CFF;
     --navbar-darker: #261C2CFF;
@@ -24,17 +23,12 @@ a {
 }
 
 .navbar-background {
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     height: 90%;
     margin: 0.5rem;
 }
 
-.navbar-fake {
-    height: var(--navbar-height);
-    width: 100%;
-}
-
 /* Background */
 
 .container {
@@ -50,7 +44,7 @@ a {
     background-image: linear-gradient(to right, var(--navbar-dark) 0%, var(--navbar-light) 100%);
     width: inherit;
     height: inherit;
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     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);
 }
@@ -59,7 +53,7 @@ a {
     grid-area: overlay;
     width: inherit;
     height: inherit;
-    border-radius: 0.5rem;
+    border-radius: var(--border-min);
     box-shadow: var(--navbar-inset);
     outline: var(--navbar-outline)
 }
diff --git a/frontend/src/lib/css/post.css b/frontend/src/lib/css/post.css
index 7f89cb1..dbec741 100644
--- a/frontend/src/lib/css/post.css
+++ b/frontend/src/lib/css/post.css
@@ -22,14 +22,14 @@
 
 .post-overlay-front {
     grid-area: overlay;
-    background-image: linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(221, 212, 223, 1) 100%);
-    border-radius: 0.5rem;
+    background-image: var(--background-light);
+    border-radius: 1rem;
     box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
 }
 
 .post-overlay-back {
     grid-area: overlay;
-    border-radius: 0.5rem;
+    border-radius: 1rem;
 }
 
 .post {
diff --git a/frontend/src/lib/css/profile/base.css b/frontend/src/lib/css/profile/base.css
new file mode 100644
index 0000000..3754635
--- /dev/null
+++ b/frontend/src/lib/css/profile/base.css
@@ -0,0 +1,95 @@
+:root {
+    --banner-height: 30vw;
+    --picture-width: 15rem;
+    --picture-left: 5vw;
+    --picture-border: 1.5rem;
+    --content-width: 40rem;
+}
+
+.profile {
+    font-family: 'JetBrains Mono';
+    color: var(--color-text);
+}
+
+.profile h1 {
+    font-weight: 800;
+    font-size: 2rem;
+    margin: 0;
+}
+
+.profile p {
+    text-align: justify;
+    text-justify: auto;
+}
+
+.profile-banner {
+    display: grid;
+    grid-template-areas:
+        "profile-banner-gradient"
+        "profile-banner-img"
+        "profile-banner-profile";
+    height: var(--banner-height);
+    width: 100%;
+}
+
+.profile-banner-gradient {
+    grid-area: overlay;
+    background: linear-gradient(0deg, #00000000, #261C2C70 50%, #261C2CC0 100%);
+    height: calc(var(--navbar-height)*2);
+}
+
+.profile-banner-img {
+    grid-area: overlay;
+    z-index: var(--z-index-last);
+}
+
+.profile-banner-img img {
+    object-fit: cover;
+    width: 100dvw;
+    height: var(--banner-height);
+}
+
+.profile-banner-profile {
+    grid-area: overlay;
+    position: absolute;
+    top: calc(var(--banner-height) - var(--picture-width)*2/5);
+    left: var(--picture-left);
+}
+
+.profile-banner-profile img {
+    width: var(--picture-width);
+    height: var(--picture-width);
+    border-radius: 100%;
+    border: var(--picture-border) solid;
+    color: var(--color-background);
+}
+
+.profile-name {
+    display: flex;
+    margin-top: 2rem;
+    margin-left: calc(var(--picture-left) + var(--picture-width) + var(--picture-border)*2);
+}
+
+.profile-name span {
+    background-color: var(--color-pill);
+    margin-left: 1rem;
+    margin-right: 1rem;
+    padding: 0.5rem;
+    border-radius: var(--border-min);
+}
+
+.profile-container {
+    width: 100%;
+    display: flex;
+}
+
+/* Depending on media */
+
+.profile-content {
+    margin-top: 8rem;
+    width: var(--content-width);
+    padding: 3rem;
+    border-radius: 1rem;
+    box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
+    background-image: var(--background-light);
+}
\ No newline at end of file
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d0344ea..3bb3d62 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,8 +6,8 @@
 	import Footer from '$lib/components/footer.svelte';
 </script>
 
-<Navbar/>
-<slot />
+<Navbar />
+<div class="base">
+	<slot />
+</div>
 <Footer />
-
-<!-- Footer -->
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
new file mode 100644
index 0000000..d2c181c
--- /dev/null
+++ b/frontend/src/routes/profile/+page.svelte
@@ -0,0 +1,31 @@
+<script>
+	import '$lib/css/base.css';
+	import '$lib/css/profile/base.css';
+
+	let cover =
+		'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
+	let profile = 'https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg';
+	let name = 'Yohan Boujon';
+	let pronoun = 'il/lui';
+	let description = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br><br>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Qui atque praesentium et culpa. Qui aliquam nobis error id praesentium quam reprehenderit.<br><br>Corrupti voluptas amet ut. Ratione neque fugit nam vel incidunt. Blanditiis sit vel et occaecati. Expedita necessitatibus sit et minima recusandae pariatur explicabo. Aspernatur nam laborum corrupti quisquam vero repellat soluta. Aliquid magni fugiat sint sunt. Natus ut architecto magni harum et quam. Eaque dicta quo ex inventore.<br><br>Aut odio et sunt et dicta quo non. Impedit debitis omnis in nihil. Deleniti quaerat aut quia molestias. Neque voluptatum deleniti dolore aliquam. Delectus saepe aliquam doloremque fugit voluptas laborum dolorem nobis. Eveniet est repellat autem sunt. Repudiandae repellendus incidunt est eveniet ut. Similique quis vero dolorum. Debitis dolores atque ullam quia repellat repudiandae. Consequuntur voluptatem quia vel repellendus sed asperiores. Modi rerum alias voluptatem in quia quasi quos et. Quae quisquam quis repellendus tenetur. Incidunt accusantium fugiat veritatis molestiae. Corporis nemo odio dolorem perferendis praesentium et impedit saepe.'
+</script>
+
+<div class="profile">
+	<div class="profile-banner">
+		<div class="profile-banner-gradient"></div>
+		<div class="profile-banner-img"><img alt="banner" src={cover} /></div>
+		<div class="profile-banner-profile">
+			<img alt="profile" src={profile} />
+		</div>
+	</div>
+	<div class="profile-name center">
+		<h1>{name}</h1>
+		<span>{pronoun}</span>
+	</div>
+	<div class="center profile-container">
+		<div class="profile-content">
+			<h1>À propos</h1>
+			<p>{@html description}</p>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte
index ad8c7ec..024dcac 100644
--- a/frontend/src/routes/style/+page.svelte
+++ b/frontend/src/routes/style/+page.svelte
@@ -7,24 +7,22 @@
 	import Archive from '$lib/components/archive.svelte';
 </script>
 
-<div class="base">
-	<div class="blank" />
-	<Post
-		cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
-		profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
-		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 class="margin-left-3">
-		<Search logo_size="48" />
-	</div>
-	<div class="blank" />
-	<Post />
-	<div class="blank" />
-	<div class="margin-left-3">
-		<Archive />
-	</div>
+<div class="blank" />
+<Post
+	cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
+	profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
+	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 class="margin-left-3">
+	<Search logo_size="48" />
+</div>
+<div class="blank" />
+<Post />
+<div class="blank" />
+<div class="margin-left-3">
+	<Archive />
 </div>