diff --git a/src/Iframes/TutorialV1/Tuto/Components/Steps.svelte b/src/Iframes/TutorialV1/Tuto/Components/Steps.svelte
index 78c134e..555699b 100644
--- a/src/Iframes/TutorialV1/Tuto/Components/Steps.svelte
+++ b/src/Iframes/TutorialV1/Tuto/Components/Steps.svelte
@@ -24,11 +24,11 @@
     }
     $: console.log('Current Step:', $currentStepStore);
 </script>
-<div class="tw-flex tw-flex-col tw-items-center tw-w-full  tw-pt-20 tw-pb-24 ">
+<div class="tw-flex tw-flex-col  tw-w-full  tw-pt-20 tw-pb-24 ">
  
 
 
-    <div class="header  tw-p-3 tw-flex tw-justify-around tw-fixed tw-top-14 tw-w-full tw-h-3 tw-overflow-visible   ">
+    <div class="header  tw-p-3 tw-flex tw-justify-center  tw-absolute tw-top-7 sm:tw-top-14 tw-w-full tw-h-3 tw-overflow-visible   ">
         <nav class="tw-flex  tw-gap-2 tw-py-4 tw-text-sm tw-font-medium tw-items-center">
             {#each steps as step, index}
             <button
@@ -37,7 +37,7 @@
                 class:tw-text-white={index === $currentStepStore}>
                 {step}
                 {#if index === $currentStepStore}
-                <span class="tw-left-0 tw-h-[4px] tw-w-[8em] tw-bg-blue-500 tw-rounded-full tw-flex tw-justify-self-center tw-mt-3"></span>
+                <span class="tw-start-0 tw-h-[4px] tw-w-[8em] tw-bg-blue-500 tw-rounded-full tw-flex tw-justify-self-center tw-mt-3"></span>
                 {/if}
             </button>
             {/each}
@@ -53,26 +53,26 @@
         </div> -->
       
             {#if $currentStepStore === 0}
-            <div class="tw-flex tw-w-full "> 
-            <button class=" tw-w-full tw-justify-center tw-mx-6 tw-h-[50px] tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
-                <span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.skipTutorial')}
+            <div class="tw-flex tw-w-full tw-flex-col sm:tw-flex-row "> 
+            <button class=" tw-w-full hover:tw-bg-[#ffffff] tw-justify-center tw-rounded-[8px]  tw-mx-0 sm:tw-mx tw-h-[50px] tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
+                <span class="tw-px-4 tw-absolute tw-start-4"></span> {i18next.t('tuto.skipTutorial')}
             </button>
-            <button class=" tw-w-full tw-bg-[#4156F6] tw-rounded-[8px] tw-h-[50px] tw-justify-center tw-mx-6 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
-                <span class="tw-px-4 tw-absolute tw-left-4"></span> {i18next.t('tuto.startTutorial')}
+            <button class=" tw-w-full tw-bg-[#4156F6] tw-rounded-[8px] tw-h-[50px] tw-justify-center tw-mx-0 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
+                <span class="tw-px-4 tw-absolute tw-start-4"></span> {i18next.t('tuto.startTutorial')}
                 </button>
             </div>
 
             {:else if $currentStepStore === 3}
 
-            <button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
+            <button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-relative tw-cursor-pointer" on:click|stopPropagation={close}>
                 {i18next.t('tuto.finish')}
-                <span class="tw-px-4 tw-absolute tw-right-4"></span>
+                <span class="tw-px-4 tw-absolute tw-end-4"></span>
             </button>
 
             {:else}
             <button class="tw-bg-[#4156F6] tw-rounded-[8px] tw-w-full tw-h-[50px] tw-justify-center tw-mx-4 tw-relative tw-cursor-pointer" on:click|stopPropagation={next}>
                 {i18next.t('tuto.next')}
-                <span class="tw-px-4 tw-absolute tw-right-4"></span>
+                <span class="tw-px-4 tw-absolute tw-end-4"></span>
             </button>
             {/if}
     </div>
diff --git a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte
index c700449..a3869c4 100644
--- a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte
+++ b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step1.svelte
@@ -3,25 +3,25 @@
 </script>
 
 
-<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10  tw-mb-5 tw-text-white   tw-h-auto tw-px-5">
+<div class=" tw-flex tw-flex-col tw-items-center tw-justify-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10">
     
   
         
-        <h1>{i18next.t('tuto.step1.title')}</h1>
-        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+        <h1 class="xs:tw-text-xl" >{i18next.t('tuto.step1.title')}</h1>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-my-10"></div>
 
-        <div class="tw-flex tw-flex-col  tw-items-center tw-justify-center tw-mt-[5em]  tw-gap-[15px]  tw-py-1 tw-w-full tw-h-full ">
-            <img src="resources/images/tutov1/move/wokamove.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
-            <img src="resources/images/tutov1/move/ZQSD.png" alt="Walk" class="tw-w-[30em] tw-h-auto tw-mb-2" />
-            <p class="tw-text-xl tw-p-0">{i18next.t('tuto.step1.use')} <strong> {i18next.t('tuto.step1.arowkeys')} </strong> {i18next.t('tuto.step1.or')} <strong> {i18next.t('tuto.step1.wasd')} </strong> {i18next.t('tuto.step1.aroundTheMap')}</p>
+        <div class="tw-flex tw-flex-col  tw-items-center tw-justify-center  tw-gap-4  tw-py-1 tw-w-10/12 md:tw-w-full tw-h-full ">
+            <img src="resources/images/tutov1/move/wokamove.png" alt="Walk" class="tw-w-[80px] sm:tw-w-[100px] tw-h-auto tw-mb-2 " />
+            <img src="resources/images/tutov1/move/ZQSD.png" alt="Walk" class="tw-w-full tw-max-w-[300px] sm:tw-max-w-[30em] tw-h-auto tw-mb-2" />
+            <p class="tw-text-base sm:tw-text-xl tw-text-center tw-p-0">{i18next.t('tuto.step1.use')} <strong> {i18next.t('tuto.step1.arowkeys')} </strong> {i18next.t('tuto.step1.or')} <strong> {i18next.t('tuto.step1.wasd')} </strong> {i18next.t('tuto.step1.aroundTheMap')}</p>
    
 
-            <p class=" tw-p-0"> <strong> {i18next.t('tuto.step1.tip')}</strong> {i18next.t('tuto.step1.describeTip')}</p>
+            <p class="tw-text-sm sm:tw-text-base tw-text-center tw-p-0"> <strong> {i18next.t('tuto.step1.tip')}</strong> {i18next.t('tuto.step1.describeTip')}</p>
         </div>
 
-        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
-        <img src="resources/images/tutov1/move/CamOFF.png" alt="Walk" class="tw-w-[120px] tw-h-auto tw-mb-2 tw-opacity-75" />
-        <p class="tw-text-l tw-p-0 tw-opacity-75">{i18next.t('tuto.step1.silentZone')}</p>
+        <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-my-10"></div>
+        <img src="resources/images/tutov1/move/CamOFF.png" alt="Walk" class="tw-w-[80px] sm:tw-w-[120px]  tw-h-auto tw-mb-2 tw-opacity-75" />
+        <p class="tw-text-sm sm:tw-text-base tw-w-10/12 md:tw-w-full tw-text-center tw-p-0 tw-opacity-75">{i18next.t('tuto.step1.silentZone')}</p>
    
     <!-- <div class="video">
         <video class="tw-w-full tw-rounded-lg" 
diff --git a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte
index efa381b..115931b 100644
--- a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte
+++ b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step2.svelte
@@ -7,18 +7,18 @@
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
 
 
-        <img src="resources/images/tutov1/interact/Bubble.png" alt="Walk" class="tw-w-[20em] tw-h-auto tw-mb-2 " />
+        <img src="resources/images/tutov1/interact/Bubble.png" alt="Walk" class="tw-w-[15em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
         <p class="tw-text-xl tw-p-0"> <strong> {i18next.t("tuto.step2.describe")} </strong> {i18next.t("tuto.step2.describe2")}</p>
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
 
 
         <div class="tw-flex tw-gap-3"> 
-            <div>  <img src="resources/images/tutov1/interact/Lock.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+            <div>  <img src="resources/images/tutov1/interact/Lock.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
                 <p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe3")}</p>
             </div>
       
             <div> 
-                <img src="resources/images/tutov1/interact/ShareScreen.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+                <img src="resources/images/tutov1/interact/ShareScreen.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
                 <p class="tw-text-l tw-p-0">{i18next.t("tuto.step2.describe4")}</p>
             </div>
        
diff --git a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte
index a842a8a..a940cd6 100644
--- a/src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte
+++ b/src/Iframes/TutorialV1/Tuto/Components/Steps/Step3.svelte
@@ -9,19 +9,19 @@
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
 
 
-        <img src="resources/images/tutov1/discover/Object.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2 " />
+        <img src="resources/images/tutov1/discover/Object.png" alt="Walk" class="tw-w-[80px] md:tw-w-[100px] tw-h-auto tw-mb-2 " />
         <p class="tw-p-3 tw-text-xl"><strong> {i18next.t("tuto.step3.interact")} </strong> {i18next.t("tuto.step3.likeSign")} {i18next.t("tuto.step3.sometimes")} <strong> {i18next.t("tuto.step3.closer")}</strong>  </p>
         <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
 
 
-        <div class="tw-flex tw-gap-3"> 
+        <div class="tw-flex tw-gap-3 justify-center"> 
             <div> 
-            <img src="resources/images/tutov1/discover/GlobalMessage.png" alt="Walk" class="tw-w-[15em] tw-h-auto tw-mb-2 " />
+            <img src="resources/images/tutov1/discover/GlobalMessage.png" alt="Walk" class="tw-w-[10em] md:tw-w-[20em] tw-h-auto tw-mb-2 " />
             <p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe3")}</p>
             </div>
 
             <div> 
-            <img src="resources/images/tutov1/discover/Silent.png" alt="Walk" class="tw-w-[10em] tw-h-auto tw-mb-2 " />
+            <img src="resources/images/tutov1/discover/Silent.png" alt="Walk" class="tw-w-[8em] md:tw-w-[14em] tw-h-auto tw-mb-2 " />
             <p class="tw-p-3 tw-text-s">{i18next.t("tuto.step3.describe4")}</p>
             </div>
 
diff --git a/src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte b/src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte
index ff5bea2..03174c3 100644
--- a/src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte
+++ b/src/Iframes/TutorialV1/Tuto/Components/Steps/Welcome.svelte
@@ -5,36 +5,36 @@ import i18next from "i18next";
 </script>
 
 
-    <div class="tw-flex tw-mt-10  tw-flex-col tw-items-center tw-justify-center tw-mb-5 tw-text-white tw-px-8"> 
+    <div class="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-mb-5 tw-text-white tw-h-auto tw-px-4 sm:tw-px-10 tw-overflow-x-hidden tw-w-full tw-max-w-full"> 
 
             <h1>{i18next.t('tuto.welcome.title')}</h1>
-            <p> {i18next.t('tuto.welcome.subtitle')} </p>
-            <div class="tw-bg-white/10 tw-h-[1px] tw-w-full tw-m-10"></div>
+            <p class="tw-w-10/12 sm:tw-w-full-"> {i18next.t('tuto.welcome.subtitle')} </p>
+            <div class="tw-bg-white/10 tw-h-[1px] tw-w-11/12 md:tw-w-full tw-m-10"></div>
 
 
             
-            <div class="tw-mt-[4em]">
+            <div class="tw-mt-[4em] tw-mb-[5em]">
 
-                <p class="tw-text-[130px]"> 👋</p>
-                <p class="tw-mt-2 tw-text-xl ">  <strong> {i18next.t('tuto.welcome.describe')} </strong> {i18next.t('tuto.welcome.describe2')}</p>
-                <p class="tw-text-xl">{i18next.t('tuto.welcome.describe3')}</p>
+                <p class="tw-text-[80px]  md:tw-text-[130px]"> 👋</p>
+                <p class="tw-mt-2 tw-text-sm md:tw-text-xl tw-mx-10 ">  <strong> {i18next.t('tuto.welcome.describe')} </strong> {i18next.t('tuto.welcome.describe2')}</p>
+                <p class="tw-text-sm md:tw-text-xl">{i18next.t('tuto.welcome.describe3')}</p>
 
-                <div class="tw-flex tw-flex-col tw-gap-[15px] tw-py-1 tw-w-full tw-h-full">
+                <div class="tw-flex tw-flex-col tw-gap-[15px] tw-py-1 tw-w-full tw-h-full tw-items-center tw-justify-center">
                     <!-- <div class="tw-flex-shrink-0">  
                         <img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[100px] tw-h-auto tw-mb-2" />
                     </div> -->
-                    <div class="tw-bg-white/5 tw-relative  tw-flex tw-items-center tw-p-4 tw-rounded-[16px]  tw-w-full tw-h-[75px] tw-p-[24px] hover:tw-bg-white/10  ">
-                        <img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[120px] tw-left-[-4px] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
-                        <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc1')} </span>
+                    <div class="tw-bg-white/5 tw-relative  tw-flex tw-items-center tw-p-4 tw-rounded-[16px] tw-w-10/12 md:tw-w-full tw-h-[75px] tw-p-[24px] hover:tw-bg-white/10  ">
+                        <img src="resources/images/tutov1/welcome/Move.png" alt="Walk" class="tw-w-[120px] tw-h-auto tw-absolute tw-start-2 tw-top-1 " />
+                        <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl "> {i18next.t('tuto.welcome.bloc1')} </span>
                     </div>
 
-                    <div class="tw-bg-white/5  tw-relative  tw-flex tw-items-center   tw-p-4 tw-rounded-[16px]  tw-w-full tw-p-[24px] hover:tw-bg-white/10  tw-overflow-hidden ">
-                        <img src="resources/images/tutov1/welcome/Talk.png" alt="Walk" class="tw-w-[140px] tw-left-[-4px]  tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
-                        <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc2')} </span>
+                    <div class="tw-bg-white/5  tw-relative  tw-flex tw-items-center   tw-p-4 tw-rounded-[16px] tw-w-10/12 md:tw-w-full tw-p-[24px] hover:tw-bg-white/10  tw-overflow-hidden ">
+                        <img src="resources/images/tutov1/welcome/Talk.png" alt="Walk" class="tw-w-[120px] tw-start-[-4px]  tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
+                        <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl"> {i18next.t('tuto.welcome.bloc2')} </span>
                     </div>
-                    <div class="tw-bg-white/5  tw-relative  tw-flex tw-items-center   tw-p-4 tw-rounded-[16px]  tw-w-full tw-p-[24px] hover:tw-bg-white/10 ">
+                    <div class="tw-bg-white/5  tw-relative  tw-flex tw-items-center   tw-p-4 tw-rounded-[16px]  tw-w-10/12 md:tw-w-full tw-p-[24px] hover:tw-bg-white/10 ">
                         <img src="resources/images/tutov1/welcome/laptop.png" alt="Walk" class="tw-w-[4em] tw-h-auto tw-absolute tw-mb-2 tw-self-start tw-top-0 " />
-                         <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-xl"> {i18next.t('tuto.welcome.bloc3')} </span>
+                         <span class="tw-font-bold tw-flex-1 tw-text-center tw-text-sm md:tw-text-xl"> {i18next.t('tuto.welcome.bloc3')} </span>
                     </div>
 
                 </div>