diff --git a/frontend/public/images/hutopymedia/homepage/brain.png b/frontend/public/images/hutopymedia/homepage/brain.png
index 4fcab46..5463b3c 100644
Binary files a/frontend/public/images/hutopymedia/homepage/brain.png and b/frontend/public/images/hutopymedia/homepage/brain.png differ
diff --git a/frontend/public/images/hutopymedia/homepage/hands.png b/frontend/public/images/hutopymedia/homepage/hands.png
index dbfcbda..aab3207 100644
Binary files a/frontend/public/images/hutopymedia/homepage/hands.png and b/frontend/public/images/hutopymedia/homepage/hands.png differ
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index bdb5494..9800356 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,26 +1,15 @@
 <template>
   <v-app>
-    <div class="flex flex-row">
-      <!-- Side Bar for larger screens -->
-      <div v-if="!smAndDown" class="border-r-1 z-30">
+    <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
+
+      <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
         <side-bar></side-bar>
       </div>
 
-      <!-- Mobile -->
-      <div v-if="smAndDown" class="mobile-container">
-        <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center bg-hBackground">
-          <router-view></router-view>
-        </div>
+      <div class="ml-64 w-full flex justify-center items-center ">
+        <router-view></router-view>
       </div>
 
-      <!-- PC -->
-      <div v-if="!smAndDown" class="w-full ml-64">
-        <div v-if="!brandingStore.loading"
-             class="min-h-screen justify-center items-center bg-hBackground">
-          <router-view></router-view>
-        </div>
-      </div>
     </div>
 
   </v-app>
@@ -28,20 +17,9 @@
 
 <script async setup>
 import SideBar from "@/views/main/SideBar.vue";
-import { useBrandingStore } from "@/stores/brandingStore.js";
-import { useDisplay } from "vuetify";
-
-const { smAndDown } = useDisplay();
-const brandingStore = useBrandingStore();
 </script>
 
 <style scoped>
-/* Ensure content does not overflow on mobile */
-.mobile-container {
-  width: 100%; /* Full width for mobile */
-  max-width: 100vw; /* Prevent overflow */
-  overflow-x: hidden; /* Hide horizontal overflow */
-  padding: 0; /* Remove extra padding */
-  box-sizing: border-box; /* Include padding in width/height calculation */
-}
+
+
 </style>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 36954bf..80bfcd7 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -3,16 +3,59 @@
 @tailwind utilities;
 
 :root {
-    --h-background: #1C1C1D;
+    /* Branding Colors */
+    --hutopy-primary: #6B0065;
+    --hutopy-secondary: #A30E79;
+
+    /* UI COLORS */
+    --h-background: #201b20;
     --h-on-background: #e2e5e9;
-    --h-surface: #252728;
+    --h-surface: #252829;
     --h-on-surface: #e2e5e9;
-    --h-primary: #231F20;
-    --h-on-primary: #d9e1e1;
-    --h-secondary: #683B1E;
-    --h-on-secondary: #b0b3b8;
+    --h-primary: #1B1B1F;
+    --h-on-primary: #c5c8c8;
+    --h-secondary: #e7e5ea;
+    --h-on-secondary: #000000;
     --h-tertiary: #272A44;
     --h-on-tertiary: #bdb6b6;
     --h-error: #bc2f2f;
     --h-on-error: #ffffff;
-}
\ No newline at end of file
+}
+
+@layer components {
+    .btn {
+        @apply min-w-24 w-full;
+        @apply p-4;
+        @apply flex flex-nowrap gap-4 items-center justify-center;
+        @apply rounded-lg;
+        @apply capitalize text-base font-sans font-medium;
+        @apply w-fit px-10;
+    }
+
+    button.primary {
+        @apply btn bg-hPrimary text-hOnPrimary;
+    }
+
+    button.secondary {
+        @apply btn bg-hSecondary text-hOnSecondary;
+    }
+
+    div.card {
+        @apply w-[800px];
+        @apply rounded-xl p-10 m-4;
+        @apply bg-hSurface text-hOnSurface;
+    }
+
+    div.card-title {
+        @apply font-sans font-bold text-2xl;
+        @apply mb-8;
+    }
+
+    div.card-entry {
+        @apply mb-4;
+    }
+
+    div.card-actions {
+        @apply flex flex-row gap-6 justify-end;
+    }
+}
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 7344480..c74f07d 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,39 +1,48 @@
 <template>
-  <div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
-    <!-- Image -->
-    <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
 
-    <!-- Message -->
-    <div class="text-lg text-gray-700 mt-8">
-      <p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
-      <p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p>
-      <p class="mt-4 font-bold">Désolé de l'inconvénient.</p>
+  <div class="flex min-h-screen items-center">
+    <div class="card justify-items-center">
+
+      <img alt="hutopy login"
+           src="/images/hutopy-logo.png"/>
+
+      <div class="flex flex-col w-[800px] gap-10 justify-items-center">
+
+        <h1 class="text-2xl font-bold login-text text-center mt-10">
+          Connexion
+        </h1>
+
+        <google-login :callback="googleCallback"
+                      class="w-full justify-items-center"
+                      popup-type="TOKEN">
+          <button class="secondary w-full">
+            <v-icon left>mdi-google</v-icon>
+            Google
+          </button>
+        </google-login>
+
+      </div>
+
     </div>
-  </div>
-  
-  <div>
-    <div class="flex items-start justify-center  py-2">
-  <div class="max-w-[600px] mt-[10%] ">
-    <img class="rounded-2xl"
-         src="/images/hutopymedia/loginpage/loginhutopy.png"
-         alt="hutopy login">
 
-    <login-form></login-form>    
-  </div>
-  </div>
   </div>
+
 </template>
 
 <script setup>
-import LoginForm from "@/views/main/LoginForm.vue";
-import { useDisplay } from "vuetify";
-import {ref, watch} from "vue";
+import {ref} from 'vue';
+import {GoogleLogin} from "vue3-google-login";
+import {useAuthStore} from '@/stores/authStore.js';
 
-const { smAndDown } = useDisplay();
-const isMobileView = ref(smAndDown.value);
+const authStore = useAuthStore();
 
-watch(smAndDown, (newVal) => {
-  isMobileView.value = newVal;
-});
+const errorSnackBar = ref(false);
+
+async function googleCallback(token) {
+  const response = await authStore.loginWithGoogle(JSON.stringify(token));
+  if (response !== true) {
+    errorSnackBar.value = true;
+  }
+}
 
 </script>
diff --git a/frontend/src/views/creators/CreateCreator.vue b/frontend/src/views/creators/CreateCreator.vue
index 7f0d411..c067d0a 100644
--- a/frontend/src/views/creators/CreateCreator.vue
+++ b/frontend/src/views/creators/CreateCreator.vue
@@ -47,48 +47,55 @@ async function createAccount() {
 </script>
 
 <template>
+  <div class="container">
+    <div class="card">
 
-  <div class="h-1"></div>  <!--  To delete and find the bug that causes the margin of the following component to use a white background.-->
+      <div class="card-title">
+        Créez votre Hutopy.
+      </div>
 
-  <div class="create-creator-card">
+      <div class="card-entry">
+        <name-editor
+            v-model:name="creatorName"
+            creator-name-reservation-id="creatorNameDirty"
+            @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
+        ></name-editor>
+      </div>
 
-    <div class="py-2 text-3xl font-bold text-center mb-10">
-      Créez votre Hutopy.
-    </div>
-
-    <div class="flex flex-column justify-end gap-2">
-      <v-alert
-          v-if="!!errorMessage"
-          outlined
-          type="error"
-      >
-        {{ errorMessage }}
-      </v-alert>
-
-      <name-editor
-          v-model:name="creatorName"
-          creator-name-reservation-id="creatorNameDirty"
-          @update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
-      ></name-editor>
-
-      <div class="flex flex-row justify-end gap-2">
-        <v-btn
+      <div class="card-actions">
+        <button
             :disabled="!canSave"
-            variant="outlined"
-            @click="createAccount"
-            :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
-        >
+            class="secondary"
+            @click="createAccount">
+          Cancel
+        </button>
+        <button
+            class="primary"
+            :disabled="!canSave"
+            @click="createAccount">
           Créer
-        </v-btn>
+        </button>
       </div>
 
     </div>
   </div>
+
+  <v-alert
+      v-if="!!errorMessage"
+      outlined
+      type="error"
+  >
+    {{ errorMessage }}
+  </v-alert>
+
+
 </template>
 
 <style scoped>
-.create-creator-card {
-  @apply text-center max-w-[1000px] mx-auto p-10 bg-white shadow-2xl rounded mt-16 ;
+
+.container {
+  @apply min-h-screen w-full;
+  @apply flex items-center justify-center;
 }
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/creators/CreatorHome.vue b/frontend/src/views/creators/CreatorHome.vue
index 340c855..4d26b10 100644
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -7,7 +7,7 @@
     <button
         v-if="isLoggedIn"
         @click="isEditMode ? saveChanges() : toggleEditMode()"
-        class="px-4 py-2 rounded-md hover:opacity-90 bg-hSecondary text-hOnSecondary"
+        class="primary"
     >
       {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
     </button>
@@ -15,14 +15,14 @@
     <button
         v-if="isEditMode && isLoggedIn"
         @click="cancelEdit"
-        class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white"
+        class="secondary"
     >
       Annuler
     </button>
   </div>
 
   <!-- MainPage -->
-  <div class="flex flex-col max-w-[650px] mx-auto px-6 bg-hBackground text-hOnBackground">
+  <div class="flex flex-col mx-auto px-6">
 
     <h1 class="flex justify-start text-2xl font-bold text-center  mb-4">Qui sommes-nous</h1>
 
@@ -55,7 +55,8 @@
                    alt="Image principale"
                    class=" max-w-full h-auto cursor-pointer max-h-96"/>
             </label>
-            <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
+            <button v-if="isEditMode"
+                    @click="deleteImage('mainImageUrl')"
                     class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
               X
             </button>
@@ -301,12 +302,11 @@
 </template>
 
 <script setup>
-import {ref, onMounted} from "vue";
+import {onMounted, ref, watch} from "vue";
 import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useDisplay} from "vuetify";
-import {watch} from "vue";
 import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
 const {smAndDown} = useDisplay();
diff --git a/frontend/src/views/creators/CreatorLayout.vue b/frontend/src/views/creators/CreatorLayout.vue
index 7918af8..9f83619 100644
--- a/frontend/src/views/creators/CreatorLayout.vue
+++ b/frontend/src/views/creators/CreatorLayout.vue
@@ -1,18 +1,20 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+  <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
+
     <div v-if="brandingStore.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
     <div v-else>
-      <banner></banner>
-    </div>
-    <div class="py-8 flex-grow">
-      <router-view></router-view>
-    </div>
-
-    <div>
-      <Footer></Footer>
+      <div>
+        <banner></banner>
+      </div>
+      <div>
+        <router-view></router-view>
+      </div>
+      <div>
+        <Footer></Footer>
+      </div>
     </div>
 
   </div>
@@ -23,5 +25,6 @@
 import Banner from "@/views/creators/Banner.vue";
 import Footer from "@/views/main/Footer.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
+
 const brandingStore = useBrandingStore()
 </script>
diff --git a/frontend/src/views/documentation/DocumentationLayout.vue b/frontend/src/views/documentation/DocumentationLayout.vue
index 0a99a1f..61f9cd8 100644
--- a/frontend/src/views/documentation/DocumentationLayout.vue
+++ b/frontend/src/views/documentation/DocumentationLayout.vue
@@ -3,22 +3,12 @@ import Footer from "@/views/main/Footer.vue";
 </script>
 
 <template>
-
-  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
-
-<!--    <div class="flex justify-center">-->
-<!--      <img src="/images/hutopy.png"-->
-<!--           class="rounded-2xl"-->
-<!--           alt="logo hutopy"-->
-<!--           width="600">-->
-<!--    </div>-->
-
-    <div class="p-4">
+  <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
+    <div>
       <router-view></router-view>
     </div>
-
-    <Footer></Footer>
-
+    <div>
+      <Footer></Footer>
+    </div>
   </div>
-
 </template>
\ No newline at end of file
diff --git a/frontend/src/views/main/Footer.vue b/frontend/src/views/main/Footer.vue
index 95ba83a..7c14706 100644
--- a/frontend/src/views/main/Footer.vue
+++ b/frontend/src/views/main/Footer.vue
@@ -6,7 +6,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
 
 <template>
 
-  <footer class="py-8 flex flex-col gap-8 bg-hBackground">
+  <footer class="py-8 flex flex-col gap-8">
 
     <div
         class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
@@ -58,7 +58,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
       </router-link>
     </div>
 
-    <div class="flex justify-center base-text mb-13 link">
+    <div class="flex justify-center base-text link">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
 
diff --git a/frontend/src/views/main/Landing.vue b/frontend/src/views/main/Landing.vue
index 35b2ad3..e40a888 100644
--- a/frontend/src/views/main/Landing.vue
+++ b/frontend/src/views/main/Landing.vue
@@ -4,124 +4,135 @@ import Footer from "@/views/main/Footer.vue";
 
 <template>
   <div>
-    <div class="pa-4 flex flex-col  justify-center md:flex-row">
-      <div class="py-6">
-        <div>
-          <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto">
-        </div>
-      </div>
-      <div class="flex flex-col space-y-3 header-btn">
-        <v-btn
-            to="/login"
-            class="text-white w-full sm:w-auto inscription-btn-header">
-          Inscription
-        </v-btn>
-        <v-btn
-            to="/create-creator"
-            variant="outlined"
-            class="w-full sm:w-auto inscription-btn-header-outlined">
-          Créer ma page
-        </v-btn>
-      </div>
 
-    </div>
-  </div>
-
-  <div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
-    <div class="support-text text-justify md:text-left">
-      <span class="text-white"> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br>
-      <span class="text-white"> les <span class="highlight2">CRÉATEURS</span>, </span><br>
-      <span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br>
-      <span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span>
-    </div>
-    <img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain">
-  </div>
-
-  <div class="relative mt-10">
-    <img
-        src="/images/hutopymedia/banners/bannerbg.png"
-        alt="YourHutopy"
-        class="responsive-banner"
-    />
-    <div class="absolute inset-0 flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
-      <div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
-        <div class="text-xl mb-2 box-text">Je soutiens</div>
-        <img
-            src="/images/hutopymedia/homepage/hands.png"
-            alt="YourHutopy"
-            class="max-h-56 mx-auto"
-        >
-        <div class="text-md text-justify px-6 ">
-          Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion.
-        </div>
-        <!-- <v-btn>Soutenir</v-btn> -->
-      </div>
-      <div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
-        <div class="text-xl  mb-2 box-text">Je crée</div>
-        <img
-            src="/images/hutopymedia/homepage/brain.png"
-            alt="YourHutopy"
-            class="max-h-56 mx-auto"
-        >
-        <div class="text-md text-justify px-6">
-          Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous.
-        </div>
-        <v-btn
-            to="/login"
-            class="inscription-btn"
-        >
-          Inscription
-        </v-btn>
-      </div>
-    </div>
-
-  </div>
-
-  <div class="max-w-5xl mx-auto px-6 py-8">
-    <div class="gap-8 items-start flex flex-col md:flex-row">
-      <!-- Section de texte -->
-      <div class="space-y-6">
-        <img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6">
-        <div class="space-y-4">
-          <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p>
-          <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
-            Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
-          </p>
-          <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
-            Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
-          </p>
-          <div class="flex justify-center">
-            <v-btn
-                to="/create-creator"
-                class="text-white mt-12 flex items-center justify-center round create-btn"
-            >
-              Créer ma page
-            </v-btn>
+    <div>
+      <div class="pa-4 flex flex-col  justify-center md:flex-row">
+        <div class="py-6">
+          <div>
+            <img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"
+                 src="/images/hutopymedia/banners/hutopy.png">
           </div>
         </div>
-      </div>
+        <div class="flex flex-col space-y-3 header-btn">
+          <v-btn
+              class="text-white w-full sm:w-auto inscription-btn-header"
+              to="/login">
+            Inscription
+          </v-btn>
+          <v-btn
+              class="w-full sm:w-auto inscription-btn-header-outlined"
+              to="/create-creator"
+              variant="outlined">
+            Créer ma page
+          </v-btn>
+        </div>
 
-      <!-- Section droite : 4 images -->
-      <div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
-        <div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div>
-        <div><img src="/images/hutopymedia/homepage/sign.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div>
-        <div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div>
-        <div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div>
       </div>
     </div>
+
+    <div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
+      <div class="support-text text-justify md:text-left">
+        <span class="text-white"> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br>
+        <span class="text-white"> les <span class="highlight2">CRÉATEURS</span>, </span><br>
+        <span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br>
+        <span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span>
+      </div>
+      <img alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"
+           src="/images/hutopymedia/banners/heart.png">
+    </div>
+
+    <div class="relative mt-10">
+
+      <div class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
+        <div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
+          <div class="text-xl mb-2 box-text">Je soutiens</div>
+          <img
+              alt="YourHutopy"
+              class="max-h-56 mx-auto"
+              src="/images/hutopymedia/homepage/hands.png"
+          >
+          <div class="text-md text-justify px-6 ">
+            Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution
+            est un geste fort pour encourager leur talent et leur passion.
+          </div>
+          <!-- <v-btn>Soutenir</v-btn> -->
+        </div>
+        <div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
+          <div class="text-xl  mb-2 box-text">Je crée</div>
+          <img
+              alt="YourHutopy"
+              class="max-h-56 mx-auto"
+              src="/images/hutopymedia/homepage/brain.png"
+          >
+          <div class="text-md text-justify px-6">
+            Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos
+            idées en réalité grâce à ceux qui croient en vous.
+          </div>
+          <v-btn
+              class="inscription-btn"
+              to="/login"
+          >
+            Inscription
+          </v-btn>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="max-w-5xl mx-auto px-6 py-8">
+      <div class="gap-8 items-start flex flex-col md:flex-row">
+        <!-- Section de texte -->
+        <div class="space-y-6">
+          <img alt="YourHutopy" class="w-full mb-6" src="/images/hutopymedia/homepage/votrehutopy.png">
+          <div class="space-y-4">
+            <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p>
+            <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
+              Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les
+              encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer
+              leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
+            </p>
+            <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
+              Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit
+              soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
+            </p>
+            <div class="flex justify-center">
+              <v-btn
+                  class="text-white mt-12 flex items-center justify-center round create-btn"
+                  to="/create-creator"
+              >
+                Créer ma page
+              </v-btn>
+            </div>
+          </div>
+        </div>
+
+        <!-- Section droite : 4 images -->
+        <div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
+          <div><img alt="Grinding" class="w-full h-auto object-cover rounded-2xl"
+                    src="/images/hutopymedia/homepage/grinding.png"></div>
+          <div><img alt="Microphone" class="w-full h-auto object-cover rounded-2xl"
+                    src="/images/hutopymedia/homepage/sign.png"></div>
+          <div><img alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"
+                    src="/images/hutopymedia/homepage/girlvr.png"></div>
+          <div><img alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"
+                    src="/images/hutopymedia/homepage/girlarmy.png"></div>
+        </div>
+      </div>
+    </div>
+
+    <Footer class="mt-10"></Footer>
   </div>
 
-  <Footer class="mt-10"></Footer>
 </template>
 
 <style scoped>
-.box-text{
+.box-text {
   color: #6A0164;
   font-size: 30px;
   font-weight: bold;
 }
 
-.inscription-btn-header{
+.inscription-btn-header {
   color: white;
   background-color: #6A0164;
   font-size: 18px;
@@ -132,7 +143,7 @@ import Footer from "@/views/main/Footer.vue";
 
 }
 
-.inscription-btn-header-outlined{
+.inscription-btn-header-outlined {
   color: #6A0164;
   font-size: 18px;
   height: 40px;
@@ -142,7 +153,7 @@ import Footer from "@/views/main/Footer.vue";
 
 }
 
-.inscription-btn{
+.inscription-btn {
   color: white;
   background-color: #6A0164;
   font-size: 18px;
@@ -197,30 +208,15 @@ body {
 
 }
 
-
-.responsive-banner {
-  width: 100vw; /* Prend toute la largeur de l'écran */
-  height: 1100px; /* Hauteur par défaut pour les petits écrans */
-  object-fit: cover; /* Maintient les proportions de l'image */
-}
-
-.header-btn {
-}
-
 .logo-image {
   margin-left: auto;
-
-
 }
 
 @media (min-width: 640px) {
-  .header-btn{
+  .header-btn {
     margin-top: 25px;
     margin-bottom: 25px;
   }
-  .responsive-banner {
-    height: 1100px; /* Pour les écrans >= 640px */
-  }
 
   .support-text {
     font-size: 3.0rem; /* Ajustez la taille du texte */
@@ -231,35 +227,20 @@ body {
 }
 
 @media (min-width: 768px) {
-  .responsive-banner {
-    height: 1100px; /* Pour les écrans >= 768px */
-  }
-  .header-btn{
+
+  .header-btn {
     margin-top: 60px;
   }
+
   .logo-image {
     margin-right: 20px;
     margin-left: 0;
-
   }
 }
 
-@media (min-width: 1024px) {
-  .responsive-banner {
-    height: 750px; /* Pour les écrans >= 1024px */
-  }
-}
-
-@media (min-width: 1280px) {
-  .responsive-banner {
-    height: 600px; /* Pour les écrans >= 1280px */
-  }
-}
-
-.homepagetext{
+.homepagetext {
   color: white;
   font-family: "Roboto", sans-serif;
-
 }
 
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/main/LoginForm.vue b/frontend/src/views/main/LoginForm.vue
deleted file mode 100644
index 3306889..0000000
--- a/frontend/src/views/main/LoginForm.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="flex flex-col items-center min-w-[300px] m-4">
-    <h1 class="text-center text-2xl font-bold mb-5 login-text">Connexion</h1>
-
-    <google-login class="w-full"
-                  :callback="googleCallback"
-                  popup-type="TOKEN">
-      <v-btn density="comfortable" class="mb-2 w-full">
-        <v-icon left>mdi-google</v-icon>
-        Google
-      </v-btn>
-    </google-login>
-    
-  </div>
-</template>
-
-<script setup>
-import {ref} from 'vue';
-import {useAuthStore} from '@/stores/authStore.js';
-import {GoogleLogin} from "vue3-google-login";
-
-const authStore = useAuthStore();
-
-const errorSnackBar = ref(false);
-
-async function googleCallback(token) {
-  const response = await authStore.loginWithGoogle(JSON.stringify(token));
-  if (response !== true) {
-    errorSnackBar.value = true;
-  }
-}
-
-</script>
-
-<style scoped>
-
-.login-text{
-  @apply text-hOnBackground;
-
-}
-
-</style>
diff --git a/frontend/src/views/main/SideBar.vue b/frontend/src/views/main/SideBar.vue
index 486d608..3aaf4e0 100644
--- a/frontend/src/views/main/SideBar.vue
+++ b/frontend/src/views/main/SideBar.vue
@@ -35,7 +35,7 @@ function toggleLanguage() {
 
 <template>
   <nav class="container">
-    <div class="mt-4 px-4">
+    <div class="m-4">
       <router-link to="/@hutopy">
         <img src="/images/hutopy-logo.png"
              alt="hutopy logo">
@@ -98,7 +98,7 @@ function toggleLanguage() {
         <button @click="authStore.logout"
                 class="action">
           <i class="mdi mdi-logout"></i>
-          {{ t.signOut }}
+          <span class="text-no-wrap">{{ t.signOut }}</span>
         </button>
       </div>
 
@@ -110,19 +110,17 @@ function toggleLanguage() {
 <style scoped>
 
 .container {
-  @apply fixed flex flex-col h-full max-w-64;
-  @apply border-r;
-  @apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
+  @apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
 }
 
 .profile {
   @apply ml-4 text-lg font-sans capitalize;
-  @apply font-sans font-semibold;
+  @apply font-semibold;
 }
 
 .action {
+  @apply capitalize;
   @apply w-full flex items-center gap-4 px-4 py-2 rounded;
-  @apply capitalize text-base font-sans font-medium;
   @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
 }
 
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index 00ab511..1c2a464 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+  <div class="flex flex-col min-h-screen w-[1024px]">
     <!-- Modal -->
     <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
       <fullname-dialog
@@ -20,21 +20,19 @@
     </v-dialog>
 
     <!-- Creator Section (integrated directly) -->
-    <v-dialog v-model="dialog" max-width="800px">
-      <div class="card">
+    <v-dialog v-model="dialogShown" max-width="800px">
         <component
             :is="currentComponent"
             :creator="creatorProfileStore.creator"
             @closeRequested="closeDialog"
         ></component>
-      </div>
     </v-dialog>
 
     <div class="space-y-6 p-4">
 
       <div class="card">
 
-        <div class="title">
+        <div class="card-title">
           {{ $t('personnalinformation.informations') }}
         </div>
 
@@ -61,7 +59,7 @@
       <!-- Phone & email -->
       <div class="card">
 
-        <div class="title">
+        <div class="card-title">
           {{ $t('personnalinformation.contactdetails') }}
         </div>
 
@@ -77,7 +75,7 @@
 
       <template v-if="creatorProfileStore.creator !== undefined">
         <div class="card">
-          <div class="title">
+          <div class="card-title">
             {{ $t('creatorinfopage.informations') }}
           </div>
           <div class="content">
@@ -107,7 +105,7 @@
         </div>
 
         <div class="card">
-          <div class="title">
+          <div class="card-title">
             {{ $t('creatorinfopage.socialnetwork') }}
           </div>
           <div class="content">
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
 
 const creatorProfileStore = useCreatorProfileStore();
 
-const dialog = ref(false);
+const dialogShown = ref(false);
 const currentComponent = ref('');
 
 const componentsMap = {
@@ -245,34 +243,22 @@ const componentsMap = {
 
 function requestCancel() {
   currentComponent.value = null;
-  dialog.value = false;
+  dialogShown.value = false;
 }
 
 const openDialog = (component) => {
   currentComponent.value = componentsMap[component];
-  dialog.value = true;
+  dialogShown.value = true;
 };
 
 const closeDialog = () => {
   currentComponent.value = null;
-  dialog.value = false;
+  dialogShown.value = false;
 };
 </script>
 
 <style scoped>
 
-.card {
-  @apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
-}
-
-.title {
-  @apply text-lg font-semibold text-hOnSecondary mb-2;
-}
-
-.content {
-  @apply text-base font-semibold text-hOnSurface flex flex-col w-full;
-}
-
 .action {
   @apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
 }
diff --git a/frontend/src/views/profile/account/AliasDialog.vue b/frontend/src/views/profile/account/AliasDialog.vue
index bb7e0af..0c1b3ea 100644
--- a/frontend/src/views/profile/account/AliasDialog.vue
+++ b/frontend/src/views/profile/account/AliasDialog.vue
@@ -1,10 +1,12 @@
 <template>
-  <v-card>
-    <v-card-title>
-      {{ $t('personnalinformation.alias') }}
-    </v-card-title>
 
-    <div class="m-4">
+  <div class="card">
+
+    <div class="card-title">
+      {{ $t('personnalinformation.alias') }}
+    </div>
+
+    <div class="card-entry">
       <v-text-field
           variant="outlined"
           v-model="alias"
@@ -12,15 +14,22 @@
       ></v-text-field>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
+    <div class="card-actions">
+
+      <button class="secondary"
+              @click="requestClose">
         Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
+      </button>
+
+      <button class="primary"
+              @click="requestSave">
         Enregistrer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+      </button>
+
+    </div>
+
+  </div>
+
 </template>
 
 <script setup>
diff --git a/frontend/src/views/profile/account/EmailDialog.vue b/frontend/src/views/profile/account/EmailDialog.vue
index 194c8b6..af0e547 100644
--- a/frontend/src/views/profile/account/EmailDialog.vue
+++ b/frontend/src/views/profile/account/EmailDialog.vue
@@ -1,23 +1,28 @@
 <template>
-  <div class="pb-5 text-2xl">Courriel</div>
+  <div class="card">
+    <div class="card-title">
+      Courriel
+    </div>
 
-  <div class="m-4">
-    <v-text-field
-        variant="outlined"
-        v-model="email"
-        label="Votre courriel"
-    ></v-text-field>
+    <div class="card-entry">
+      <v-text-field
+          v-model="email"
+          label="Votre courriel"
+          variant="outlined"
+      ></v-text-field>
+    </div>
+
+    <div class="card-actions">
+      <button class="secondary"
+              @click="cancel">
+        Annuler
+      </button>
+      <button class="primary"
+              @click="save">
+        Enregistrer
+      </button>
+    </div>
   </div>
-
-  <div class="flex justify-end space-x-4">
-    <v-btn color="black" variant="text" @click="cancel">
-      Annuler
-    </v-btn>
-    <v-btn color="#A6147D" @click="save">
-      Enregistrer
-    </v-btn>
-  </div>
-
 </template>
 
 <script setup>
diff --git a/frontend/src/views/profile/account/FullnameDialog.vue b/frontend/src/views/profile/account/FullnameDialog.vue
index 97ecd4b..42b847f 100644
--- a/frontend/src/views/profile/account/FullnameDialog.vue
+++ b/frontend/src/views/profile/account/FullnameDialog.vue
@@ -1,16 +1,19 @@
 <template>
-  <v-card>
-    <v-card-title>
-      {{ $t('personnalinformation.fullname') }}
-    </v-card-title>
 
-    <div class="m-4">
+  <div class="card">
+    <div class="card-title">
+      {{ $t('personnalinformation.fullname') }}
+    </div>
+
+    <div class="card-entry">
       <v-text-field
           variant="outlined"
           v-model="firstname"
           :label="$t('personnalinformation.firstname')"
       ></v-text-field>
+    </div>
 
+    <div class="card-entry">
       <v-text-field
           variant="outlined"
           v-model="lastname"
@@ -18,15 +21,21 @@
       ></v-text-field>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
+    <div class="card-actions">
+
+      <button class="secondary"
+              @click="requestClose">
         Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
+      </button>
+
+      <button class="primary"
+              @click="requestSave">
         Enregistrer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+      </button>
+
+    </div>
+
+  </div>
 </template>
 
 <script setup>
diff --git a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
index 779498e..a6f8579 100644
--- a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { useClient } from '@/plugins/api.js';
-import { ref } from 'vue';
+import {useClient} from '@/plugins/api.js';
+import {ref} from 'vue';
 
 const props = defineProps({
   creator: {
@@ -33,27 +33,33 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="pb-5 text-2xl">Modifier le Stripe ID</div>
-  <div class="flex flex-col space-y-4">
-    <v-text-field
-      variant="outlined"
-      v-model="stripeId"
-      label="Stripe Id"
-      outlined
-    ></v-text-field>
+  <div class="card">
+    <div class="card-title">
+      Modifier le Stripe ID
+    </div>
 
-    <div class="flex justify-end space-x-4">
-      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+    <div class="card-entry">
+      <v-text-field
+          v-model="stripeId"
+          label="Stripe Id"
+          outlined
+          variant="outlined"
+      ></v-text-field>
+
+      <div class="card-actions">
+        <button class="secondary"
+                @click="cancel">
+          Annuler
+        </button>
+        <button class="primary"
+                @click="save">
+          Enregistrer
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.flex {
-  display: flex;
-}
-.space-y-4 > * + * {
-  margin-top: 1rem;
-}
+
 </style>
diff --git a/frontend/src/views/profile/creators/ChangeTitleDialog.vue b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
index ba6bfdc..b4e6e5b 100644
--- a/frontend/src/views/profile/creators/ChangeTitleDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeTitleDialog.vue
@@ -36,28 +36,34 @@ const cancel = () => {
 </script>
 
 <template>
-  <div class="pb-5 text-2xl">Modifier le Titre</div>
-  <div class="flex flex-col space-y-4">
-    <v-text-field
-        variant="outlined"
-        v-model="title"
-        label="Titre"
-        outlined
-    ></v-text-field>
+  <div class="card">
 
-    <div class="flex justify-end space-x-4">
-      <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-      <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
+    <div class="card-title">
+      Modifier le Titre
+    </div>
+
+    <div class="card-entry">
+      <v-text-field
+          v-model="title"
+          label="Titre"
+          outlined
+          variant="outlined"
+      ></v-text-field>
+
+      <div class="card-actions">
+        <button class="secondary"
+                @click="cancel">
+          Annuler
+        </button>
+        <button class="primary"
+                @click="save">
+          Enregistrer
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.flex {
-  display: flex;
-}
 
-.space-y-4 > * + * {
-  margin-top: 1rem;
-}
 </style>
diff --git a/frontend/src/views/profile/creators/SocialsDialog.vue b/frontend/src/views/profile/creators/SocialsDialog.vue
index 4716049..dff38bf 100644
--- a/frontend/src/views/profile/creators/SocialsDialog.vue
+++ b/frontend/src/views/profile/creators/SocialsDialog.vue
@@ -59,7 +59,7 @@ const cancel = () => {
 
 <style scoped>
 .icon {
-  
+
   width: 28px;
   height: 30px;
   fill: #000000;
@@ -67,96 +67,127 @@ const cancel = () => {
 </style>
 
 <template>
-  <div class="pb-5 text-2xl">Reseaux Sociaux</div>
 
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="facebookUrl"
-        label="Lien Facebook"
-        outlined
-    ></v-text-field>
-  </div>
+  <div class="card">
 
-
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="instagramUrl"
-        label="Lien Instagram"
-        outlined
-    ></v-text-field>
-  </div>
-
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="linkedInUrl"
-        label="Lien LinkedIn"
-        outlined
-    ></v-text-field>
-  </div>
-
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="redditUrl"
-        label="Lien Reddit"
-        outlined
-    ></v-text-field>
-  </div>
-
-  <div class="flex flex-row align-center">
-    <div class="w-6 h-6 mb-5 mr-2">
-      <XIcon></XIcon>
-    </div>
-    <v-text-field
-        variant="outlined"
-        v-model="tikTokUrl"
-        label="Lien TikTok"
-        outlined
-    ></v-text-field>
-  </div>
-
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-web</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="websiteUrl"
-        label="Lien site web"
-        outlined
-    ></v-text-field>
-  </div>
-  <div class="flex flex-row align-center">
-
-    <div class="w-6 h-6 mb-5 mr-2">
-      <XIcon class="icon"></XIcon>
+    <div class="card-title">
+      Reseaux Sociaux
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
+        <v-text-field
+            v-model="facebookUrl"
+            label="Lien Facebook"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
+        <v-text-field
+            v-model="instagramUrl"
+            label="Lien Instagram"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
+        <v-text-field
+            v-model="linkedInUrl"
+            label="Lien LinkedIn"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
+        <v-text-field
+            v-model="redditUrl"
+            label="Lien Reddit"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <div class="w-6 h-6 mb-5 mr-2">
+          <XIcon></XIcon>
+        </div>
+        <v-text-field
+            v-model="tikTokUrl"
+            label="Lien TikTok"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-web</v-icon>
+        <v-text-field
+            v-model="websiteUrl"
+            label="Lien site web"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+
+        <div class="w-6 h-6 mb-5 mr-2">
+          <XIcon class="icon"></XIcon>
+        </div>
+
+        <v-text-field
+            v-model="xUrl"
+            label="Lien X"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-entry">
+      <div class="flex flex-row align-center">
+        <v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
+        <v-text-field
+            v-model="youtubeUrl"
+            label="Lien Youtube"
+            outlined
+            variant="outlined"
+        ></v-text-field>
+      </div>
+    </div>
+
+    <div class="card-actions">
+      <button class="secondary"
+              @click="cancel">
+        Annuler
+      </button>
+      <button class="primary"
+              @click="save">
+        Enregistrer
+      </button>
     </div>
 
-    <v-text-field
-        variant="outlined"
-        v-model="xUrl"
-        label="Lien X"
-        outlined
-    ></v-text-field>
   </div>
 
-  <div class="flex flex-row align-center">
-    <v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
-    <v-text-field
-        variant="outlined"
-        v-model="youtubeUrl"
-        label="Lien Youtube"
-        outlined
-    ></v-text-field>
-  </div>
 
-  <div class="flex justify-end space-x-4">
-    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-    <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
-  </div>
 </template>