diff --git a/src/assets/css/components/layout/Nav.scss b/src/assets/css/components/layout/Nav.scss
index 708074b..cf83353 100644
--- a/src/assets/css/components/layout/Nav.scss
+++ b/src/assets/css/components/layout/Nav.scss
@@ -1,14 +1,14 @@
 nav.main-menu {
-	@apply absolute top-0 left-0 py-3 pr-6 w-full flex gap-6 justify-end;
+	@apply absolute top-0 left-0 py-3 pr-6 w-full flex gap-6 justify-between md:justify-end;
 	z-index: 48;
 	box-sizing: border-box;
 }
 
 .nav-menu-toggle {
-	@apply w-16 h-16 bg-transparent  bg-no-repeat bg-center;
+	@apply w-12 h-12 md:w-16 md:h-16 bg-transparent  bg-no-repeat bg-center;
 	background-image: url("../../../img/shapes-background/menu-toggle-background.svg");
 	img {
-		@apply w-8 h-8;
+		@apply w-6 h-6 md:w-8 md:h-8;
 		box-sizing: border-box;
 	}
 }
diff --git a/src/assets/css/components/layout/Page-container.scss b/src/assets/css/components/layout/Page-container.scss
index b996f93..e658be4 100644
--- a/src/assets/css/components/layout/Page-container.scss
+++ b/src/assets/css/components/layout/Page-container.scss
@@ -11,8 +11,11 @@
 	}
 
 	.screen {
-		@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
-		height: 100vh;
+		@apply xl:flex flex-col justify-center items-center relative  bg-lhoist xl:h-screen;
+		// height: 100vh;
+		// @apply overflow-x-hidden overflow-y-auto;
+		overflow: hidden;
+		@apply pb-44 pt-32 xl:pb-0 xl:pt-0;
 
 		@screen md {
 			height: calc(99.8dvh - $margin * 2);
@@ -21,7 +24,7 @@
 		}
 
 		&__content {
-			@apply text-center pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative;
+			@apply text-center pb-8  md:pb-0 pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative;
 			background-image: url("../../../img/shapes-background/mask.svg");
 			background-position: center;
 			background-size: cover;
diff --git a/src/assets/css/components/ui/AppLogoVector.scss b/src/assets/css/components/ui/AppLogoVector.scss
index fc67657..252128c 100644
--- a/src/assets/css/components/ui/AppLogoVector.scss
+++ b/src/assets/css/components/ui/AppLogoVector.scss
@@ -1,10 +1,12 @@
-.app-Logo-vector {
-	@apply md:absolute mr-auto ml-8 md:ml-0  top-0 left-0 z-10  bg-no-repeat  w-auto h-auto;
-	background-size: 100% 100%;
+.app-logo-vector {
+	@apply md:absolute mr-auto ml-0  top-0 left-0 z-10  bg-no-repeat  w-auto h-auto;
 	background-position: left;
-	translate: -2px -3px;
-
+	background-size: 100% 100%;
 	isolation: isolate;
+	translate: -2px -3px;
+	@screen md {
+	}
+
 	img {
 		@apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-12 z-10;
 	}
diff --git a/src/assets/css/components/ui/BrandingLogo.scss b/src/assets/css/components/ui/BrandingLogo.scss
index 05ddb1e..1a9de0f 100644
--- a/src/assets/css/components/ui/BrandingLogo.scss
+++ b/src/assets/css/components/ui/BrandingLogo.scss
@@ -1,5 +1,5 @@
 .lhoist-branding-logo {
-	@apply absolute bottom-4 left-4 z-10  bg-no-repeat  w-auto h-auto;
+	@apply fixed bottom-4 left-4 z-10  bg-no-repeat  w-auto h-auto;
 
 	translate: -2px -3px;
 
diff --git a/src/assets/css/components/ui/CountrySelect.scss b/src/assets/css/components/ui/CountrySelect.scss
index 5ba7e06..0064fa7 100644
--- a/src/assets/css/components/ui/CountrySelect.scss
+++ b/src/assets/css/components/ui/CountrySelect.scss
@@ -1,5 +1,5 @@
 .country-select {
-	@apply relative my-8 flex flex-wrap gap-4;
+	@apply relative my-8 flex flex-wrap gap-4 justify-center;
 	&__toggle,
 	&__country-list {
 		@apply bg-slate-100  border-none  w-full;
diff --git a/src/assets/css/components/ui/LanguageSelect.scss b/src/assets/css/components/ui/LanguageSelect.scss
index 7267094..fa5c827 100644
--- a/src/assets/css/components/ui/LanguageSelect.scss
+++ b/src/assets/css/components/ui/LanguageSelect.scss
@@ -17,12 +17,14 @@
 	}
 
 	&__toggle {
-		@apply py-3
+		@apply flex
 		bg-transparent 
 		text-neutral-800
 		capitalize
-		text-base
-		flex
+		text-sm
+		md:text-base
+
+		md:py-3
 		px-5
 		pr-12
 		my-0
@@ -32,7 +34,7 @@
 		transform: skew(-2deg);
 
 		.flag {
-			@apply bg-slate-200 rounded-full w-8 h-8 flex justify-center items-center border-2 border-solid border-black overflow-hidden;
+			@apply bg-slate-200 rounded-full w-6 h-6 md:w-8 md:h-8 flex justify-center items-center border-2 border-solid border-black overflow-hidden;
 
 			img {
 				@apply w-full h-full object-cover;
diff --git a/src/assets/css/components/ui/Modal.scss b/src/assets/css/components/ui/Modal.scss
index a3b5cd2..8ff18d8 100644
--- a/src/assets/css/components/ui/Modal.scss
+++ b/src/assets/css/components/ui/Modal.scss
@@ -38,9 +38,7 @@ dialog {
 }
 
 .modal-content-container {
-	@apply w-full
-		
-	 grid  
+	@apply grid  
 	 gap-x-8
 
 	 md:grid-cols-2
@@ -48,16 +46,24 @@ dialog {
 	 md:px-24
 	 pt-6
 	 md:pt-28
-	 pb-16;
+	 pb-16
+	 bg-white
+
+	 md:bg-transparent;
 
 	box-sizing: border-box;
+	width: calc(100% - 20px);
+	margin: 10px auto 100px auto;
 
 	// grid-template-columns: 1fr 1fr;
 
 	&__background {
 		@apply h-full w-full absolute top-0 left-0 object-fill;
 	}
-	background-image: url("../../../img/shapes-background/modal-background.svg");
+	@screen md {
+		background-image: url("../../../img/shapes-background/modal-background.svg");
+		@apply w-full;
+	}
 	background-position: center top;
 	background-size: 100% 100%;
 	background-repeat: no-repeat;
diff --git a/src/assets/css/pages/Game.scss b/src/assets/css/pages/Game.scss
index 853d19e..7b1ffe0 100644
--- a/src/assets/css/pages/Game.scss
+++ b/src/assets/css/pages/Game.scss
@@ -4,6 +4,14 @@
 	.screen {
 		@apply overflow-hidden;
 	}
+	.screen--game {
+		@apply py-0 flex;
+
+		height: 100vh;
+	}
+	.app-logo-vector {
+		@apply fixed left-0;
+	}
 	.lhoist-blocks-search-and-find {
 		-ms-overflow-style: none; /* IE and Edge */
 		scrollbar-width: none; /* Firefox */
diff --git a/src/assets/css/pages/Home.scss b/src/assets/css/pages/Home.scss
index 8ac4d08..bc52295 100644
--- a/src/assets/css/pages/Home.scss
+++ b/src/assets/css/pages/Home.scss
@@ -1,10 +1,13 @@
 .page-container--home {
 	.screen {
 		@apply bg-lhoistlight;
+
 		.screen_worker_1,
 		.screen_worker_2 {
-			@apply hidden lg:block absolute w-fit;
-			max-height: 60%;
+			@apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%];
+			pointer-events: none;
+			// max-height: 60%;
+			// height: 60%;
 			bottom: -3rem;
 		}
 		.screen_worker_1 {
@@ -27,9 +30,10 @@
 			}
 		}
 		&__content {
+			@apply mt-40 xl:mt-0;
 			.cover_worker {
 				@apply mx-auto;
-				transform: translate(0%, -50%);
+				transform: translate(0%, -60%);
 				margin-bottom: -130px;
 			}
 
@@ -41,7 +45,7 @@
 				@apply text-6xl xl:text-9xl;
 			}
 			.application_subtitle {
-				@apply text-6xl bg-construction py-2 w-fit mx-auto px-3 block mb-10 md:inline-block;
+				@apply text-6xl bg-construction py-2 w-fit mx-auto px-3 block md:mb-10 md:inline-block;
 				transform: rotate(-3deg);
 			}
 			.application_draft {
@@ -51,7 +55,7 @@
 			}
 
 			.application_description {
-				@apply max-w-lg 2xl:max-w-xl text-lg px-20 font-bold;
+				@apply max-w-lg 2xl:max-w-xl text-lg px-4 md:px-20 font-bold;
 				margin-bottom: -40px;
 			}
 			.cta--play {
diff --git a/src/assets/css/pages/Profile.scss b/src/assets/css/pages/Profile.scss
index 977a22f..b1c8d76 100644
--- a/src/assets/css/pages/Profile.scss
+++ b/src/assets/css/pages/Profile.scss
@@ -1,8 +1,11 @@
 .page-container--profile {
+	.screen__content {
+		@apply w-full md:w-fit;
+	}
 	.profile-select {
-		@apply grid sm:grid-cols-2 md:grid-cols-4 list-none gap-2;
+		@apply grid sm:grid-cols-2 md:grid-cols-2 xl:grid-cols-4 list-none gap-2 px-2;
 		&__profile-type {
-			@apply flex flex-col justify-center items-center py-10 px-3  rounded-lg cursor-pointer gap-2;
+			@apply flex flex-col justify-center items-center py-10 px-3  rounded-lg cursor-pointer gap-2 w-fit mx-auto;
 			transition: all 0.3s ease-in-out;
 			&:hover,
 			&--selected {
diff --git a/src/components/ui/AppLogoVector.jsx b/src/components/ui/AppLogoVector.jsx
index 7237fdc..8e9ea65 100644
--- a/src/components/ui/AppLogoVector.jsx
+++ b/src/components/ui/AppLogoVector.jsx
@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 
 export default function Logo() {
 	return (
-		<Link to='/' className='app-Logo-vector'>
+		<Link to='/' className='app-logo-vector'>
 			<img src={appLogo} alt='' />
 		</Link>
 	);
diff --git a/src/pages/Game.jsx b/src/pages/Game.jsx
index 9f1d95c..5fa19a4 100644
--- a/src/pages/Game.jsx
+++ b/src/pages/Game.jsx
@@ -15,7 +15,7 @@ export default function Game() {
 		<>
 			<AnimatedPage className='page-container page-container--play'>
 				<GameContextProvider>
-					<div className='screen'>
+					<div className='screen screen--game'>
 						<AppLogo />
 						<GameModal />
 						<Tutorials />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 0b89b47..9806942 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -26,12 +26,14 @@ export default function Home() {
 					<BrandingLogo />
 					<section className='screen__content'>
 						<img className='cover_worker' src={coverWorker} alt='' />
-						<h1 className='application_title'>stay safe</h1>
-						<h2 className='application_subtitle'>interactive</h2>
-						<h3 className='application_draft'>draft</h3>
-						<p className='application_description'>
-							{currentScreenTranslations.app_description}
-						</p>
+						<div className='screen__content__wrapper'>
+							<h1 className='application_title'>stay safe</h1>
+							<h2 className='application_subtitle'>interactive</h2>
+							<h3 className='application_draft'>draft</h3>
+							<p className='application_description'>
+								{currentScreenTranslations.app_description}
+							</p>
+						</div>
 						<Link
 							title={uiTranslations.start}
 							to='/select-profile'