diff --git a/frontend/src/lib/components/archive.svelte b/frontend/src/lib/components/archive.svelte
index a2c5b1c..12236dc 100644
--- a/frontend/src/lib/components/archive.svelte
+++ b/frontend/src/lib/components/archive.svelte
@@ -7,7 +7,7 @@
 
 	export let fontPost = 1;
 	export let paddingPost = 0.5;
-	export let width = "100%";
+	export let customStyle = "";
 
 	const posts = {
 		'Août 2024': [
@@ -38,7 +38,6 @@
 	const size = Object.keys(posts).length;
 	let archiveRefs = Array(size);
 	let archivePostRefs = Array(size);
-	let containerRef;
 
 	let isActive = Array(size).fill(false);
 	let indexArchive = -1;
@@ -103,9 +102,8 @@
 </script>
 
 <div
-	class="archive-container"
-	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem; width:{width};"
-	bind:this={containerRef}
+	class="archive-container {customStyle}"
+	style="--font-post: {fontPost}rem; --padding-post: {paddingPost}rem;"
 >
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	{#each Object.keys(posts) as date, index}
diff --git a/frontend/src/lib/components/social.svelte b/frontend/src/lib/components/social.svelte
index b5ec10f..6fc82bb 100644
--- a/frontend/src/lib/components/social.svelte
+++ b/frontend/src/lib/components/social.svelte
@@ -9,34 +9,35 @@
 		{
 			pic: 'https://cdn.simpleicons.org/instagram',
 			color: 'E4405F',
-			alt: 'instagram',
+			alt: 'Instagram',
 			name: '@yo.boujon',
 			link: 'https://www.instagram.com/yoboujon/'
 		},
 		{
 			pic: 'https://cdn.simpleicons.org/github',
 			color: '181717',
-			alt: 'github',
+			alt: 'Github',
 			name: 'yoboujon',
 			link: 'https://github.com/yoboujon'
 		},
 		{
 			pic: 'https://cdn.simpleicons.org/youtube',
 			color: 'FF0000',
-			alt: 'youtube',
+			alt: 'Youtube',
 			name: '@yoboujon',
 			link: 'https://www.youtube.com/@yoboujon'
 		},
 		{
 			pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
 			color: '0A66C2',
-			alt: 'linkedin',
+			alt: 'Linkedin',
 			name: 'Yohan Boujon',
 			link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
 		},
 		{
 			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
 			color: 'AD62AA',
+			alt: 'Etheryo',
 			name: 'Etheryo',
 			link: 'https://www.etheryo.fr'
 		}
@@ -83,26 +84,28 @@
 	}
 </script>
 
-<div class="social" bind:this={div_social}>
+<div class="social social-width" bind:this={div_social}>
 	<h1>Liens</h1>
 	{#each social_list as s}
-		<div class="social-link align-center">
+		<div
+			class="social-link align-center"
+			style="--social-color: #{s.color};"
+			role="button"
+			tabindex="0"
+			title={s.alt}
+			on:mouseenter={() => {
+				changeBackground(s.color, false);
+			}}
+			on:mouseleave={() => {
+				changeBackground(s.color, true);
+			}}
+		>
 			{#if s.pic === undefined}
 				<SvgIcon size="32" type="mdi" path={s.icon}></SvgIcon>
 			{:else}
 				<img alt={s.alt} src={s.pic} />
 			{/if}
-			<a
-				href={s.link}
-				target="_blank"
-				style="--social-color: #{s.color};"
-				on:mouseenter={() => {
-					changeBackground(s.color, false);
-				}}
-				on:mouseleave={() => {
-					changeBackground(s.color, true);
-				}}>{s.name}</a
-			>
+			<a href={s.link} target="_blank">{s.name}</a>
 		</div>
 	{/each}
 </div>
diff --git a/frontend/src/lib/css/base.css b/frontend/src/lib/css/base.css
index 25315c6..bf78161 100644
--- a/frontend/src/lib/css/base.css
+++ b/frontend/src/lib/css/base.css
@@ -44,7 +44,8 @@ h1 {
 
     --border-min: 0.5rem;
     --border-max: 2rem;
-    --profile-content-width: 40rem;
+    --profile-content-width-max: 40rem;
+    --profile-content-width-min: 36rem;
 
     --width-min-desktop: 1275px;
     --width-mobile: 875px;
diff --git a/frontend/src/lib/css/post-min.css b/frontend/src/lib/css/post-min.css
index a30b3e5..fe0eb34 100644
--- a/frontend/src/lib/css/post-min.css
+++ b/frontend/src/lib/css/post-min.css
@@ -1,11 +1,39 @@
+@media screen and (max-width: 1275px) {
+    .post-min-container {
+        height: calc(var(--profile-content-width-min)/2);
+        width: calc((var(--profile-content-width-min) + 6rem - 4rem)/3);
+    }
+
+    .post-min {
+        height: calc(var(--profile-content-width-min)/2);
+    }
+
+    .post-min img {
+        max-height: calc(var(--profile-content-width-min)/4);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+    .post-min-container {
+        height: calc(var(--profile-content-width-max)/2);
+        width: calc((var(--profile-content-width-max) + 6rem - 4rem)/3);
+    }
+
+    .post-min {
+        height: calc(var(--profile-content-width-max)/2);
+    }
+
+    .post-min img {
+        max-height: calc(var(--profile-content-width-max)/4);
+    }
+}
+
 .post-min-container {
     display: grid;
     grid-template-areas:
         "post-min-overlay-back"
         "post-min-overlay-front"
         "post-min";
-    height: calc(var(--profile-content-width)/2);
-    width: calc((var(--profile-content-width) + 6rem - 4rem)/3);
     margin-left: 1rem;
     margin-right: 1rem;
 }
@@ -15,13 +43,11 @@
     display: flex;
     flex-direction: column;
     grid-area: overlay;
-    height: calc(var(--profile-content-width)/2);
     z-index: var(--z-index-front);
 }
 
 .post-min img {
     width: auto;
-    max-height: calc(var(--profile-content-width)/4);
     width: 100%;
     object-fit: cover;
     border-top-left-radius: 1rem;
diff --git a/frontend/src/lib/css/profile/base.css b/frontend/src/lib/css/profile/base.css
index 146efd3..4d2bd25 100644
--- a/frontend/src/lib/css/profile/base.css
+++ b/frontend/src/lib/css/profile/base.css
@@ -5,6 +5,26 @@
     --picture-border: 1.5rem;
 }
 
+@media screen and (max-width: 1275px) {
+    .profile-post-container {
+        width: calc(var(--profile-content-width-min) + 6rem);
+    }
+
+    .profile-content {
+        width: var(--profile-content-width-min);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+    .profile-post-container {
+        width: calc(var(--profile-content-width-max) + 6rem);
+    }
+
+    .profile-content {
+        width: var(--profile-content-width-max);
+    }
+}
+
 .profile {
     font-family: 'JetBrains Mono';
     color: var(--color-text);
@@ -19,7 +39,7 @@
 .profile-title {
     margin-bottom: 2rem !important;
     margin-left: 2rem !important;
-} 
+}
 
 .profile p {
     text-align: justify;
@@ -95,20 +115,16 @@
     margin-right: 1rem;
 }
 
-.profile-container > div {
+.profile-container>div {
     margin-bottom: 2rem;
 }
 
 .profile-post-container {
     display: flex;
     flex-direction: row;
-    width: calc(var(--profile-content-width) + 6rem);
 }
 
-/* Depending on media */
-
 .profile-content {
-    width: var(--profile-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;
diff --git a/frontend/src/lib/css/social.css b/frontend/src/lib/css/social.css
index f1c2239..f1dd98c 100644
--- a/frontend/src/lib/css/social.css
+++ b/frontend/src/lib/css/social.css
@@ -3,14 +3,52 @@
     --social-min-width: 2rem;
 }
 
+@media screen and (max-width: 1275px) {
+    .social-width {
+        width: var(--social-min-width);
+    }
+
+    .social-link a {
+        display: none;
+    }
+
+    .social h1 {
+        display: none;
+    }
+
+    .social-archive {
+        width: calc(var(--profile-content-width-min) + 6rem);
+    }
+}
+
+@media screen and (min-width: 1276px) {
+.social-width {
+        width: var(--social-max-width);
+    }
+
+    .social-link a {
+        text-decoration: none;
+        position: relative;
+        color: var(--color-text);
+        margin-left: auto;
+        font-size: 1.4rem;
+        font-weight: 500;
+    }
+
+    .social-archive {
+        width: calc(var(--social-max-width) + 4rem);
+    }
+}
+
 .social {
     padding: 3rem;
-    padding-right: 2rem;    
+    padding-right: 2rem;
     padding-left: 2rem;
     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;
+    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);
-    width: var(--social-max-width);
 }
 
 .social-link {
@@ -26,15 +64,19 @@
 .social-link img {
     height: 2rem;
     width: 2rem;
+    transition: all .3s ease 0s;
 }
 
-.social-link a {
-    text-decoration: none;
-    position: relative;
-    color: var(--color-text);
-    margin-left: auto;
-    font-size: 1.4rem;
-    font-weight: 500;
+.social-link img:hover {
+    filter: drop-shadow(0px 4px 8px var(--social-color));
+}
+
+.social-link svg {
+    transition: all .3s ease 0s;
+}
+
+.social-link svg:hover {
+    filter: drop-shadow(0px 0px 8px var(--social-color));
 }
 
 /* Underline links */
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 59745b4..49e3cb7 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -4,7 +4,7 @@
 
 	import PostMin from '$lib/components/post-min.svelte';
 	import Social from '$lib/components/social.svelte';
-	import Archive from '$lib/components/archive.svelte'
+	import Archive from '$lib/components/archive.svelte';
 
 	let cover =
 		'https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg';
@@ -13,8 +13,11 @@
 	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.';
+	let innerWidth;
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div class="profile">
 	<div class="profile-banner">
 		<div class="profile-banner-gradient"></div>
@@ -29,9 +32,11 @@
 	</div>
 	<div class="profile-main justify-center">
 		<div class="profile-container">
-			<Social />
-			<h1 class="profile-title">Archives</h1>
-			<Archive width="24rem"/>
+			<Social showname={false} />
+			{#if innerWidth > 1275}
+				<h1 class="profile-title">Archives</h1>
+				<Archive customStyle="social-archive" />
+			{/if}
 		</div>
 		<div class="profile-container">
 			<div class="profile-content">
@@ -52,6 +57,10 @@
 				/>
 				<PostMin title="Alix est beau" />
 			</div>
+			{#if innerWidth <= 1275}
+				<h1 class="profile-title">Archives</h1>
+				<Archive customStyle="social-archive" />
+			{/if}
 		</div>
 	</div>
 </div>