diff --git a/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue b/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
index c2f6937..90ad2de 100644
--- a/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
+++ b/src/views/Profile/Dialogs/PageInformations/ColorsPicker.vue
@@ -14,10 +14,10 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested']);
 
-const bannerTopColor = ref(props.creator.profileColors.bannerTop);
-const bannerBottomColor = ref(props.creator.profileColors.bannerBottom);
-const accentColor = ref(props.creator.profileColors.accent);
-const menuColor = ref(props.creator.profileColors.menu);
+const bannerTopColor = ref(props.creator.colors.bannerTop);
+const bannerBottomColor = ref(props.creator.colors.bannerBottom);
+const accentColor = ref(props.creator.colors.accent);
+const menuColor = ref(props.creator.colors.menu);
 
 const selectedColorName = ref(props.colorName);
 const selectedColor = computed({
@@ -69,10 +69,10 @@ const save = async () => {
           "menu": menuColor.value || null
         });
 
-    props.creator.profileColors.bannerTop = bannerTopColor.value;
-    props.creator.profileColors.bannerBottom = bannerBottomColor.value;
-    props.creator.profileColors.accent = accentColor.value;
-    props.creator.profileColors.menu = menuColor.value;
+    props.creator.colors.bannerTop = bannerTopColor.value;
+    props.creator.colors.bannerBottom = bannerBottomColor.value;
+    props.creator.colors.accent = accentColor.value;
+    props.creator.colors.menu = menuColor.value;
 
     emits('closeRequested');
   } catch (error) {
diff --git a/src/views/Profile/PageInformations.vue b/src/views/Profile/PageInformations.vue
index 9607fae..3b209bc 100644
--- a/src/views/Profile/PageInformations.vue
+++ b/src/views/Profile/PageInformations.vue
@@ -59,7 +59,7 @@ const closeDialog = () => {
         <button
             @click="openDialog('ColorsPicker', 'bannerTop')"
             class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.profileColors.bannerTop }"
+            :style="{ backgroundColor: userStore.creator.colors.bannerTop }"
         >
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
@@ -76,7 +76,7 @@ const closeDialog = () => {
         <button
             @click="openDialog('ColorsPicker', 'bannerBottom')"
             class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.profileColors.bannerBottom }"
+            :style="{ backgroundColor: userStore.creator.colors.bannerBottom }"
         >
           <v-icon>mdi-eyedropper-variant</v-icon>
         </button>
@@ -85,7 +85,7 @@ const closeDialog = () => {
           <img
               @click="openDialog('LogoPicker')"
               class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
-              :style="{ borderColor: userStore.creator.profileColors.accent }"
+              :style="{ borderColor: userStore.creator.colors.accent }"
               :src="userStore.creator.images.logo"
               alt="Profile Image"
           >
diff --git a/src/views/contents/PublishContentButton.vue b/src/views/contents/PublishContentButton.vue
index 5d718c8..7eacd4b 100644
--- a/src/views/contents/PublishContentButton.vue
+++ b/src/views/contents/PublishContentButton.vue
@@ -74,7 +74,7 @@ const closeDialog = () => {
       <v-card class="text-center rounded-xl">
 
         <v-card-title class="text-white p-4 rounded-t"
-                      :style="{backgroundColor: creator.profileColors.menu || '#A30E79'}">
+                      :style="{backgroundColor: creator.colors.menu || '#A30E79'}">
           Quicky
         </v-card-title>
 
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 7ca98e2..82a8891 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -5,7 +5,7 @@
     <div class="relative flex flex-col">
       <!-- Social Network-->
       <div class="bg-opacity-50 flex flex-col md:flex-row items-center py-4 px-4 min-h-14"
-           :style="{ backgroundColor: creator.profileColors.bannerTop || '#6B0065' }">
+           :style="{ backgroundColor: creator.colors.bannerTop || '#6B0065' }">
         <div class="w-full flex justify-between lg:justify-end gap-14 mt-2">
           <a
               v-for="socialNetwork in GetSocialsUrls()"
@@ -35,7 +35,7 @@
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
     <div class="bg-gray-800 py-4 relative shadow-lg min-h-24"
-         :style="{ backgroundColor: creator.profileColors.bannerBottom || '#A30E79' }">
+         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
       <div class="flex flex-col items-center lg:flex-row lg:items-center lg:justify-between">
         <!-- Profile Image Wrapper -->
         <div class="relative flex justify-center lg:w-auto lg:justify-start">
@@ -45,7 +45,7 @@
                 class="rounded-full border-solid border-2 z-20 lg:max-w-[200px] max-w-[200px] h-auto"
                 :src="creator.images.logo"
                 alt="Profile Picture"
-                :style="{ borderColor: creator.profileColors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
+                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px' /* Adjust the height here */ }"
             />
           </div>
         </div>
diff --git a/src/views/creators/CreatorDescriptionBtn.vue b/src/views/creators/CreatorDescriptionBtn.vue
index 053b875..1672880 100644
--- a/src/views/creators/CreatorDescriptionBtn.vue
+++ b/src/views/creators/CreatorDescriptionBtn.vue
@@ -40,11 +40,11 @@ onMounted(() => {
   const style = document.createElement('style');
   style.innerHTML = `
     .scrollable-content::-webkit-scrollbar-thumb {
-      background-color: ${props.creator.profileColors.menu};
+      background-color: ${props.creator.colors.menu};
       border-radius: 10px;
     }
     .scrollable-content::-webkit-scrollbar-thumb:hover {
-      background-color: ${shadeColor(props.creator.profileColors.accent, -10)};
+      background-color: ${shadeColor(props.creator.colors.accent, -10)};
     }
   `;
   document.head.appendChild(style);
diff --git a/src/views/main/ProfileBanner.vue b/src/views/main/ProfileBanner.vue
index 03808ab..f532e8f 100644
--- a/src/views/main/ProfileBanner.vue
+++ b/src/views/main/ProfileBanner.vue
@@ -1,31 +1,31 @@
 <template>
   <div>
     <div>
-      <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.profileColors.menu }">
+      <div class="px-5 py-2 bg-fuchsia-800 text-white" :style="{ backgroundColor: user.colors.menu }">
         <div class="flex justify-center text-2xl">Photo de couverture</div>
       </div>
       <div>
-        <div :style="{ backgroundColor: user.profileColors.bannerTop || '#6B0065' }" class="flex h-4"></div>
+        <div :style="{ backgroundColor: user.colors.bannerTop || '#6B0065' }" class="flex h-4"></div>
         <img :src="bannerImageUrl" alt="Banner Image" @error="handleBannerImageError" class="w-full object-cover">
-        <div :style="{ backgroundColor: user.profileColors.bannerBottom || '#A30E79' }" class="h-4">
+        <div :style="{ backgroundColor: user.colors.bannerBottom || '#A30E79' }" class="h-4">
 
         </div>
         <div>
           <div class="space-x-4 flex justify-center py-2">
             <v-btn @click="openColorPicker('top')"
-                   :style="{ backgroundColor: user.profileColors.bannerTop || '#6B0065', color: getTextColor(user.profileColors.bannerTop || '#6B0065') }">
+                   :style="{ backgroundColor: user.colors.bannerTop || '#6B0065', color: getTextColor(user.colors.bannerTop || '#6B0065') }">
               Haut
             </v-btn>
             <v-btn @click="openColorPicker('bottom')"
-                   :style="{ backgroundColor: user.profileColors.bannerBottom || '#A30E79', color: getTextColor(user.profileColors.bannerBottom || '#A30E79') }">
+                   :style="{ backgroundColor: user.colors.bannerBottom || '#A30E79', color: getTextColor(user.colors.bannerBottom || '#A30E79') }">
               Bas
             </v-btn>
             <v-btn @click="openColorPicker('accent')"
-                   :style="{ backgroundColor: user.profileColors.accent || '#23393B', color: getTextColor(user.profileColors.accent || '#23393B') }">
+                   :style="{ backgroundColor: user.colors.accent || '#23393B', color: getTextColor(user.colors.accent || '#23393B') }">
               Accent1
             </v-btn>
             <v-btn @click="openColorPicker('menu')"
-                   :style="{ backgroundColor: user.profileColors.menu || '#800080', color: getTextColor(user.profileColors.menu || '#800080') }">
+                   :style="{ backgroundColor: user.colors.menu || '#800080', color: getTextColor(user.colors.menu || '#800080') }">
               Menu
             </v-btn>
           </div>
@@ -51,7 +51,7 @@
       </div>
       <div class="flex justify-center  py-4">
         <img :src="logoImageUrl"
-             :style="{ borderColor: user.profileColors.accent  || '#23393B' , borderWidth: '3px', borderStyle: 'solid' }"
+             :style="{ borderColor: user.colors.accent  || '#23393B' , borderWidth: '3px', borderStyle: 'solid' }"
              class="rounded-full max-w-48 max-w-48"
              @error="handleProfileImageError"
              alt="Profile Image">
@@ -145,13 +145,13 @@ const openColorPicker = (target) => {
 
 const applyColor = () => {
   if (colorTarget.value === 'top') {
-    props.user.profileColors.bannerTop = selectedColor.value;
+    props.user.colors.bannerTop = selectedColor.value;
   } else if (colorTarget.value === 'bottom') {
-    props.user.profileColors.bannerBottom = selectedColor.value;
+    props.user.colors.bannerBottom = selectedColor.value;
   } else if (colorTarget.value === 'accent') {
-    props.user.profileColors.accent = selectedColor.value;
+    props.user.colors.accent = selectedColor.value;
   } else if (colorTarget.value === 'menu') {
-    props.user.profileColors.menu = selectedColor.value;
+    props.user.colors.menu = selectedColor.value;
   }
   showColorPicker.value = false;
 };