diff --git a/src/main.js b/src/main.js
index 3f80faf..950b618 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,8 +11,9 @@ import * as directives from 'vuetify/directives'
 import vueGoogleOauth from 'vue3-google-login'
 import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {useAuthStore} from "@/stores/authStore.js";
-import {useUserStore} from "@/stores/userStore.js";
 import i18n from './i18n.js';
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 
 const vuetify = createVuetify({
     components,
@@ -31,9 +32,10 @@ const app = createApp(App)
 // Make $t globally available
 app.config.globalProperties.$t = i18n.global.t;
 
-// this force the creation of the stores
-const subscriptionStore = useSubscriptionStore()
-const authStore = useAuthStore()
-const userStore = useUserStore()
+// this force the creation and initialization of the stores
+useSubscriptionStore()
+useAuthStore()
+useUserProfileStore()
+useCreatorProfileStore()
 
 app.mount('#app');
diff --git a/src/stores/brandingStore.js b/src/stores/brandingStore.js
new file mode 100644
index 0000000..6e8fb59
--- /dev/null
+++ b/src/stores/brandingStore.js
@@ -0,0 +1,53 @@
+import {defineStore} from 'pinia'
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+import {onBeforeMount, ref, watch} from "vue";
+import {useRoute} from "vue-router";
+
+export const useBrandingStore = defineStore(
+    'branding',
+    () => {
+
+        const currentBrand = ref('')
+        
+        const value = useSessionStorage(
+            'branding',
+            {},
+            {writeDefaults: false})
+
+        const loading = ref(true)
+
+        const route = useRoute()
+
+        onBeforeMount(async () => await fetchCreatorData(route.params.creator))
+
+        watch(
+            () => route.params.creator,
+            async () => {
+                console.log(`creator: ${route.params.creator}`)
+                console.log(`currentBrand: ${currentBrand.value}`)
+                if (route.params.creator != currentBrand.value) {
+                    await fetchCreatorData(route.params.creator);
+                    currentBrand.value = route.params.creator
+                }
+            }
+        )
+
+        const fetchCreatorData = async (creatorAlias) => {
+            try {
+                loading.value = true
+                const client = useClient()
+                const response = await client.get(`/api/creators/@${creatorAlias}`)
+                value.value = response.data
+            } catch (error) {
+                console.error(`Error fetching content: ${error}`)
+            } finally {
+                loading.value = false
+            }
+        }
+
+        return {
+            value,
+            loading
+        }
+    })
diff --git a/src/stores/creatorProfileStore.js b/src/stores/creatorProfileStore.js
new file mode 100644
index 0000000..7b15ccd
--- /dev/null
+++ b/src/stores/creatorProfileStore.js
@@ -0,0 +1,47 @@
+import {computed, watch} from 'vue'
+import {defineStore} from 'pinia'
+import {useAuthStore} from "@/stores/authStore.js";
+import {useClient} from "@/plugins/api.js";
+import {useSessionStorage} from "@vueuse/core";
+
+export const useCreatorProfileStore = defineStore(
+    'creator-profile',
+    () => {
+        const authStore = useAuthStore()
+
+        const authWatcher = watch(
+            () => authStore.isAuthenticated,
+            async (newValue) => {
+                if (newValue) {
+                    await fetchCurrentCreatorProfile()
+                } else {
+                    value.value = undefined
+                }
+            })
+
+        const value = useSessionStorage(
+            'creator-profile',
+            {},
+            {writeDefaults: false})
+
+        const hasCreator = computed(() =>
+            value.value
+            && Object.getOwnPropertyNames(value.value).length >= 1)
+
+        const client = useClient()
+
+        async function fetchCurrentCreatorProfile() {
+            try {
+                const creatorResponse = await client.get(`/api/creators/profile`)
+                value.value = creatorResponse.data
+                // TODO: no cache-busting ???
+            } catch (error) {
+                value.value = undefined
+            }
+        }
+
+        return {
+            creator: value,
+            hasCreator
+        }
+    })
diff --git a/src/stores/userStore.js b/src/stores/userProfileStore.js
similarity index 66%
rename from src/stores/userStore.js
rename to src/stores/userProfileStore.js
index b702e66..6cd490d 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userProfileStore.js
@@ -4,38 +4,30 @@ import {useAuthStore} from "@/stores/authStore.js";
 import {useClient} from "@/plugins/api.js";
 import {useSessionStorage} from "@vueuse/core";
 
-export const useUserStore = defineStore(
-    'user',
+export const useUserProfileStore = defineStore(
+    'user-profile',
     () => {
+
         const authStore = useAuthStore()
+
         const authWatcher = watch(
             () => authStore.isAuthenticated,
             async (newValue) => {
                 if (newValue) {
                     await fetchCurrentUserProfile()
-                    await fetchCurrentCreatorProfile()
                 } else {
-                    user.value = undefined
-                    creator.value = undefined
+                    value.value = undefined
                 }
             })
 
-        const user = useSessionStorage(
-            'user-user',
+        const value = useSessionStorage(
+            'user-profile',
             {},
             {writeDefaults: false})
-        const creator = useSessionStorage(
-            'user-creator',
-            {},
-            {writeDefaults: false})
-
-        const hasCreator = computed(() =>
-            creator.value
-            && Object.getOwnPropertyNames(creator.value).length >= 1)
 
         const fullname = computed(() => {
-            if (user.value) {
-                const {firstname, lastname} = user.value;
+            if (value.value) {
+                const {firstname, lastname} = value.value;
 
                 if (firstname && lastname) {
                     return `${lastname}, ${firstname}`;
@@ -49,38 +41,29 @@ export const useUserStore = defineStore(
         })
 
         const alias = computed(() => {
-            if (user.value) {
-                return user.value.alias || `${user.value.firstname || ''} ${user.value.lastname || ''}`.trim() || 'Anonyme'
+            if (value.value) {
+                return value.value.alias || `${value.value.firstname || ''} ${value.value.lastname || ''}`.trim() || 'Anonyme'
             }
             return 'Anonyme';
         })
+
         const portraitUrl = computed(() => {
-            return user.value && user.value.portraitUrl
-                ? user.value.portraitUrl
+            return value.value && value.value.portraitUrl
+                ? value.value.portraitUrl
                 : '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'
         })
 
-        const client = useClient()
-
         async function fetchCurrentUserProfile() {
             try {
+                const client = useClient()
                 const userResponse = await client.get("/api/users/profile");
-                user.value = userResponse.data
+                value.value = userResponse.data
                 // Cache-busting only if portraitUrl exists
-                if (user.value.portraitUrl) {
-                    user.value.portraitUrl = `${user.value.portraitUrl}?${Date.now()}`;
+                if (value.value.portraitUrl) {
+                    value.value.portraitUrl = `${value.value.portraitUrl}?${Date.now()}`;
                 }
             } catch (error) {
-                user.value = undefined;
-            }
-        }
-
-        async function fetchCurrentCreatorProfile() {
-            try {
-                const creatorResponse = await client.get(`/api/creators/profile`)
-                creator.value = creatorResponse.data
-            } catch (error) {
-                creator.value = undefined
+                value.value = undefined;
             }
         }
 
@@ -92,8 +75,8 @@ export const useUserStore = defineStore(
                         firstname: firstname,
                         lastname: lastname
                     })
-                user.value.firstname = firstname;
-                user.value.lastname = lastname;
+                value.value.firstname = firstname;
+                value.value.lastname = lastname;
             } catch (error) {
                 console.error(error)
             }
@@ -106,7 +89,7 @@ export const useUserStore = defineStore(
                     {
                         alias: alias
                     })
-                user.value.alias = alias;
+                value.value.alias = alias;
             } catch (error) {
                 console.error(error)
             }
@@ -119,7 +102,7 @@ export const useUserStore = defineStore(
                     {
                         birthdate: birthdate
                     })
-                user.value.birthDate = birthdate;
+                value.value.birthDate = birthdate;
             } catch (error) {
                 console.error(error)
             }
@@ -132,7 +115,7 @@ export const useUserStore = defineStore(
                     {
                         phoneNumber: phoneNumber
                     })
-                user.value.phoneNumber = phoneNumber;
+                value.value.phoneNumber = phoneNumber;
             } catch (error) {
                 console.error(error)
             }
@@ -145,7 +128,7 @@ export const useUserStore = defineStore(
                     {
                         email: email
                     })
-                user.value.email = email;
+                value.value.email = email;
             } catch (error) {
                 console.error(error)
             }
@@ -158,12 +141,12 @@ export const useUserStore = defineStore(
                     {
                         address: address
                     })
-                user.value.address = address;
+                value.value.address = address;
             } catch (error) {
                 console.error(error)
             }
         }
-        
+
         async function changePortrait(selectedFile) {
             try {
                 const formData = new FormData();
@@ -172,18 +155,16 @@ export const useUserStore = defineStore(
                 const response = await client.post(
                     `/api/users/portrait`,
                     formData)
-                    
-                user.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
+
+                value.value.portraitUrl = `${response.data.blobUrl}?${Date.now()}` // the Date.now() is for cache-busting
             } catch (error) {
                 console.error(error)
             }
         }
 
         return {
-            user,
-            creator,
+            user: value,
             alias,
-            hasCreator,
             fullname,
             portraitUrl,
             changeFullname,
@@ -192,7 +173,6 @@ export const useUserStore = defineStore(
             changePhone,
             changeEmail,
             changeAddress,
-            changePortrait,
-            fetchCurrentCreatorProfile
+            changePortrait
         }
     })
diff --git a/src/views/contents/ContentCard.vue b/src/views/contents/ContentCard.vue
index 8fb9d47..151ed39 100644
--- a/src/views/contents/ContentCard.vue
+++ b/src/views/contents/ContentCard.vue
@@ -72,13 +72,7 @@
           {{ messageCount }}
         </v-btn>
 
-        <donation-button :color-border="colorMenu"
-                         :color-accent="colorAccent"
-                         :creator-id="creatorId"
-                         :creator-name="creatorName"
-                         :creator-logo="creatorLogo"
-                         iconColorClass="text-black"
-        ></donation-button>
+        <donation-button></donation-button>
 
       </div>
 
diff --git a/src/views/contents/PublishContentButton.vue b/src/views/contents/PublishContentButton.vue
index f87c946..a277a7e 100644
--- a/src/views/contents/PublishContentButton.vue
+++ b/src/views/contents/PublishContentButton.vue
@@ -1,8 +1,9 @@
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {ref} from 'vue';
-import {useUserStore} from '@/stores/userStore.js';
 import {v7} from 'uuid';
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
 
 const props = defineProps({
   creator: {type: Object, required: true},
@@ -10,7 +11,8 @@ const props = defineProps({
 
 const emits = defineEmits(['content-posted'])
 
-const userStore = useUserStore();
+const userProfileStore = useUserProfileStore()
+const creatorProfileStore = useCreatorProfileStore()
 
 const isDialogActive = ref(false);
 
@@ -31,7 +33,7 @@ const removeUrl = (index) => {
 async function publishPost() {
   const formData = new FormData();
   formData.append('id', v7());
-  formData.append('creatorId', userStore.user.id);
+  formData.append('creatorId', creatorProfileStore.value.id);
   formData.append('title', title.value);
   formData.append('description', message.value);
   files.value.forEach(file => {
@@ -73,7 +75,7 @@ const closeDialog = () => {
 
 <template>
   <button
-      v-if="creator && userStore.user && creator.id === userStore.user.id"
+      v-if="creator && userProfileStore.value && creator.id === userProfileStore.value.id"
       class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125 px-4"
       @click="isDialogActive = true">
     <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
diff --git a/src/views/contents/Reaction.vue b/src/views/contents/Reaction.vue
index 253874f..eff7351 100644
--- a/src/views/contents/Reaction.vue
+++ b/src/views/contents/Reaction.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useUserStore } from "@/stores/userStore.js";
 import { REACTIONS } from "@/Constants/Reactions.js";
 import { computed, ref } from "vue";
 import { useClient } from "@/plugins/api.js";
 import {useAuthStore} from "@/stores/authStore.js"
 import MustBeLogged from "@/views/MustBeLogged.vue";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
 
-const userStore = useUserStore();
+const userProfileStore = useUserProfileStore();
 const authStore = useAuthStore()
 
 const props = defineProps({
@@ -49,8 +49,8 @@ async function reactToContent(reaction) {
     const request = {
       ContentId: contentId.value,
       reaction: reaction,
-      userId: userStore.user.id,
-      userName: `${userStore.user.firstName} ${userStore.user.lastName}`,
+      userId: userProfileStore.value.id,
+      userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/", request);
@@ -61,8 +61,8 @@ async function reactToContent(reaction) {
     const requestAdd = {
       ContentId: contentId.value,
       reaction: reaction,
-      userId: userStore.user.id,
-      userName: `${userStore.user.firstName} ${userStore.user.lastName}`,
+      userId: userProfileStore.value.id,
+      userName: `${userProfileStore.value.firstName} ${userProfileStore.value.lastName}`,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/", requestAdd);
@@ -71,7 +71,7 @@ async function reactToContent(reaction) {
   } else {
     const requestRemove = {
       ContentId: contentId.value,
-      userId: userStore.user.id,
+      userId: userProfileStore.value.id,
     };
     adjustReactionCount(reaction);
     await client.post("/api/content/reaction/remove", requestRemove);
@@ -168,7 +168,7 @@ function adjustReactionCount(newReaction) {
 }
 
 function initializeReactions() {
-  const userReaction = props.content.reactions.find((x) => x.userId === userStore.user.id);
+  const userReaction = props.content.reactions.find((x) => x.userId === userProfileStore.value.id);
   if (userReaction) {
     currentReaction.value = userReaction.reaction;
     hasReacted.value = true;
diff --git a/src/views/contents/contentcards/NContentCard.vue b/src/views/contents/contentcards/NContentCard.vue
index 965ca59..b8bb26a 100644
--- a/src/views/contents/contentcards/NContentCard.vue
+++ b/src/views/contents/contentcards/NContentCard.vue
@@ -72,13 +72,7 @@
           {{ messageCount }}
         </v-btn>
 
-        <donation-button :color-border="colorMenu"
-                         :color-accent="colorAccent"
-                         :creator-id="creatorId"
-                         :creator-name="creatorName"
-                         :creator-logo="creatorLogo"
-                         iconColorClass="text-black"
-        ></donation-button>
+        <donation-button></donation-button>
 
       </div>
 
diff --git a/src/views/contents/contentcards/SmContentCard.vue b/src/views/contents/contentcards/SmContentCard.vue
index f6f4077..34b78b8 100644
--- a/src/views/contents/contentcards/SmContentCard.vue
+++ b/src/views/contents/contentcards/SmContentCard.vue
@@ -72,13 +72,7 @@
           {{ messageCount }}
         </v-btn>
 
-        <donation-button :color-border="colorMenu"
-                         :color-accent="colorAccent"
-                         :creator-id="creatorId"
-                         :creator-name="creatorName"
-                         :creator-logo="creatorLogo"
-                         iconColorClass="text-black"
-        ></donation-button>
+        <donation-button></donation-button>
 
       </div>
 
diff --git a/src/views/contents/contentfullscreen/FullScreenContentMd.vue b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
index 26b5819..4f9509b 100644
--- a/src/views/contents/contentfullscreen/FullScreenContentMd.vue
+++ b/src/views/contents/contentfullscreen/FullScreenContentMd.vue
@@ -53,14 +53,7 @@
         <div class="flex justify-around py-2">
           <Reaction v-if="data" :content="data"></Reaction>
 
-          <donation-button v-if="data"
-                           :color-border="data.colorMenu"
-                           :color-accent="data.colorAccent"
-                           :creator-id="data.createdBy"
-                           :creator-name="data.createdByName"
-                           :creator-logo="data.createdByPortraitUrl"
-                           iconColorClass="text-black"
-          ></donation-button>
+          <donation-button v-if="data"></donation-button>
 
         </div>
       </div>
diff --git a/src/views/contents/contentfullscreen/FullScreenContentSm.vue b/src/views/contents/contentfullscreen/FullScreenContentSm.vue
index a76d523..438521a 100644
--- a/src/views/contents/contentfullscreen/FullScreenContentSm.vue
+++ b/src/views/contents/contentfullscreen/FullScreenContentSm.vue
@@ -57,12 +57,6 @@
           <Reaction v-if="data" :content="data"></Reaction>
 
           <donation-button v-if="data"
-                           :color-border="data.colorMenu"
-                           :color-accent="data.colorAccent"
-                           :creator-id="data.createdBy"
-                           :creator-name="data.createdByName"
-                           :creator-logo="data.createdByPortraitUrl"
-                           iconColorClass="text-black"
           ></donation-button>
 
         </div>
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index 614530d..666a796 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/src/views/creators/CreatorBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="shadow-lg rounded-2xl"
-       :style="{ backgroundColor: creator.colors.secondary}">
+       :style="{ backgroundColor: branding.value.colors.secondary}">
     <div class="relative z-20">
       
       <!--Banner-->
@@ -8,7 +8,7 @@
         <div>
           <img
               class="w-full drop-shadow-[0_10px_6px_rgba(0,0,0,0.25)]"
-              :src="creator.images.banner ? creator.images.banner : '/images/placeholders/banner.png'"
+              :src="branding.value.images.banner ? branding.value.images.banner : '/images/placeholders/banner.png'"
               alt="Profile Banner"
               style="max-height: 425px"
           >
@@ -17,23 +17,15 @@
 
     </div>
     <!--actions - Lowerpart-->
-    <banner-actions :creator="creator" @content-posted="addContent"></banner-actions>
+    <banner-actions></banner-actions>
 
   </div>
 </template>
 
 <script setup>
 import BannerActions from "@/views/creators/banner/bannerlower/BannerActions.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-});
-
-const emits = defineEmits(['content-posted'])
-
-function addContent(content) {
-  emits('content-posted', content)
-}
-
+const branding = useBrandingStore()
 
 </script>
\ No newline at end of file
diff --git a/src/views/creators/CreatorHome.vue b/src/views/creators/CreatorHome.vue
index a7bfa2b..7bf4e4f 100644
--- a/src/views/creators/CreatorHome.vue
+++ b/src/views/creators/CreatorHome.vue
@@ -5,11 +5,9 @@
       <creator-news-summary></creator-news-summary>
     </div>
 
-    <div class="px-4"  :style="{ color: userStore.creator.colors.onBackground}">
-      <h1>{{ userStore.creator.about.title }}</h1>
-      <p>
-        {{ userStore.creator.about.description }}
-      </p>
+    <div class="px-4" :style="{ color: brandingStore.value.colors.onBackground}">
+      <h1>TEST</h1>
+      <p>GET ME AN EDITOR NOW!</p>
     </div>
     
   </div>
@@ -17,10 +15,12 @@
 </template>
 
 <script setup>
-import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
-import {useUserStore} from "@/stores/userStore.js";
 
-const userStore = useUserStore()
+import CreatorNewsSummary from "@/views/creators/CreatorNewsSummary.vue"
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
+
 </script>
 
 <style scoped>
diff --git a/src/views/creators/CreatorLayout.vue b/src/views/creators/CreatorLayout.vue
index e63cbdc..12c1a1b 100644
--- a/src/views/creators/CreatorLayout.vue
+++ b/src/views/creators/CreatorLayout.vue
@@ -1,11 +1,9 @@
 <template>
-  <div :style="{ backgroundColor: creator.colors.background }">
+  <div :style="{ backgroundColor: brandingStore.value.colors.background }">
     <div class="max-w-[1500px] mx-auto">
 
-      <div v-if="creator && creator.id">
-        <creator-banner :creator="creator"
-                        @content-posted="contentPosted"
-        ></creator-banner>
+      <div v-if="brandingStore.value && brandingStore.value.id">
+        <creator-banner></creator-banner>
       </div>
       <div v-else>
         <div v-if="loading">
@@ -27,7 +25,7 @@
         </div>
 
         <div class="max-w-80">
-          <rewards :creator="creator"></rewards>
+          <rewards></rewards>
         </div>
 
       </div>
@@ -45,34 +43,7 @@ import {useClient} from "@/plugins/api.js";
 import CreatorBanner from "@/views/creators/CreatorBanner.vue";
 import Rewards from "@/views/creators/Rewards.vue";
 import Footer from "@/views/main/Footer.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const creator = ref(null)
-const loading = ref(true)
-const contents = ref([])
-
-const client = useClient()
-const route = useRoute()
-
-function contentPosted(content) {
-  contents.value.unshift(content)
-}
-
-onBeforeMount(async () => await fetchCreatorData(route.params.creator))
-
-watch(
-    () => route.params.creator,
-    async () => await fetchCreatorData(route.params.creator)
-)
-
-const fetchCreatorData = async (creatorAlias) => {
-  try {
-    loading.value = true
-    const response = await client.get(`/api/creators/@${creatorAlias}`)
-    creator.value = response.data
-  } catch (error) {
-    console.error(`Error fetching content: ${error}`)
-  } finally {
-    loading.value = false
-  }
-}
+const brandingStore = useBrandingStore()
 </script>
diff --git a/src/views/creators/CreatorNewsSummary.vue b/src/views/creators/CreatorNewsSummary.vue
index e9d6186..0cb5d93 100644
--- a/src/views/creators/CreatorNewsSummary.vue
+++ b/src/views/creators/CreatorNewsSummary.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
-       :style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
+       :style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
     Actualité
   </div>
 
   <div v-for="(item, index) in articles"
        class="my-1 text-white"
        :key="index"
-       :style="{ backgroundColor: userStore.creator.colors.primary }">
+       :style="{ backgroundColor: brandingStore.value.colors.primary }">
 
     <div class="flex justify-between items-center border-b-2 border-white p-2 mx-2">
       <p class="text-xl tracking-[8px]">
@@ -64,9 +64,9 @@
 
 <script setup>
 import {ref} from 'vue';
-import {useUserStore} from "@/stores/userStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const userStore = useUserStore()
+const brandingStore = useBrandingStore()
 
 const articles = ref([
   {
diff --git a/src/views/creators/DonationButton.vue b/src/views/creators/DonationButton.vue
index 5e6c35d..90d349a 100644
--- a/src/views/creators/DonationButton.vue
+++ b/src/views/creators/DonationButton.vue
@@ -6,20 +6,20 @@
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
 
         <div class="flex flex-row align-center px-3">
           <img
-              :src="creatorLogo"
+              :src="brandingStore.value.images.logo"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${colorAccent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
+              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
           <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -50,7 +50,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -68,34 +69,29 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+          <v-btn block class="ma-auto"
+                 style="width: 200px;"
+                 @click="closeDialog()">Annuler
+          </v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
-  
+
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
+
+const brandingStore = useBrandingStore()
 
 const props = defineProps({
-  colorBorder: {required: true},
-  colorAccent: {required: true},
-  creatorId: {type: String, required: true},
-  creatorName: {type: String, required: true},
-  creatorLogo: {required: true},
   iconColorClass: {default: 'text-black'}
 });
 
-const colorBorder = computed(() => props.colorBorder)
-const colorAccent = computed(() => props.colorAccent)
-const creatorId = computed(() => props.creatorId)
-const creatorName = computed(() => props.creatorName)
-const creatorLogo = computed(() => props.creatorLogo)
-
 const donationModal = ref(false);
 
 function openDonationDialog() {
@@ -145,6 +141,7 @@ function closeDialog() {
     checkout.destroy();
   }
 }
+
 async function goPay() {
   isPaymentDialogActive.value = true;
 
diff --git a/src/views/creators/DonationButtonBanner.vue b/src/views/creators/DonationButtonBanner.vue
index 67f3d28..ef37cab 100644
--- a/src/views/creators/DonationButtonBanner.vue
+++ b/src/views/creators/DonationButtonBanner.vue
@@ -1,28 +1,32 @@
 <template>
   <v-btn :style="{ 
-    backgroundColor: colorBorder, color: 'white', 
-    borderRadius: '8px', padding:'20px 24px', 
-    display: 'flex', alignItems: 'center', 
-    justifyContent: 'center' }" @click="openDonationDialog()">
-    <div class="font-bold"> Je soutiens </div>
+    backgroundColor: brandingStore.value.colors.primary, 
+    color: 'white', 
+    borderRadius: '8px',
+     padding:'20px 24px', 
+    display: 'flex', 
+    alignItems: 'center', 
+    justifyContent: 'center' }" 
+         @click="openDonationDialog()">
+    <div class="font-bold"> Je soutiens</div>
   </v-btn>
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
 
         <div class="flex flex-row align-center px-3">
           <img
-              :src="creatorLogo"
+              :src="brandingStore.value.image.logoUrl"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${colorAccent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
+              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
           <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -53,7 +57,7 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+          <v-btn variant="outlined" :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -76,28 +80,16 @@
       </v-card>
     </template>
   </v-dialog>
-  
+
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  colorBorder: {required: true},
-  colorAccent: {required: true},
-  creatorId: {type: String, required: true},
-  creatorName: {type: String, required: true},
-  creatorLogo: {required: true},
-  iconColorClass: {default: 'text-black'}
-});
-
-const colorBorder = computed(() => props.colorBorder)
-const colorAccent = computed(() => props.colorAccent)
-const creatorId = computed(() => props.creatorId)
-const creatorName = computed(() => props.creatorName)
-const creatorLogo = computed(() => props.creatorLogo)
+const brandingStore = useBrandingStore()
 
 const donationModal = ref(false);
 
@@ -109,7 +101,6 @@ function closeDonationDialog() {
   donationModal.value = false
 }
 
-
 const isPaymentDialogActive = ref(false);
 
 const tipAmount = ref(0);
@@ -148,6 +139,7 @@ function closeDialog() {
     checkout.destroy();
   }
 }
+
 async function goPay() {
   isPaymentDialogActive.value = true;
 
diff --git a/src/views/creators/DonationButtonBannerSlim.vue b/src/views/creators/DonationButtonBannerSlim.vue
index b36fdea..ca0ee72 100644
--- a/src/views/creators/DonationButtonBannerSlim.vue
+++ b/src/views/creators/DonationButtonBannerSlim.vue
@@ -1,28 +1,32 @@
 <template>
-  <v-btn :style="{ 
-    backgroundColor: colorBorder, color: 'white', 
-    borderRadius: '8px', padding:'0px 24px', 
-    display: 'flex', alignItems: 'center', 
-    justifyContent: 'center' }" @click="openDonationDialog()">
-    <div class="font-bold"> Je soutiens </div>
+  <v-btn :style="{
+    backgroundColor: brandingStore.value.colors.primary,
+    color: 'white', 
+    borderRadius: '8px', 
+    padding:'0px 24px', 
+    display: 'flex', 
+    alignItems: 'center', 
+    justifyContent: 'center' }"
+         @click="openDonationDialog()">
+    <div class="font-bold">Je soutiens</div>
   </v-btn>
 
   <v-dialog v-model="donationModal" max-width="500">
     <v-form>
-      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${colorBorder}` }">
+      <v-card class="text-center rounded-xl" :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
         <div class="py-4 text-2xl font-bold border-b mb-2">
           Je Soutiens!
         </div>
 
         <div class="flex flex-row align-center px-3">
           <img
-              :src="creatorLogo"
+              :src="brandingStore.value.images.logo"
               alt="Profile Image"
               class="rounded-full"
               width="40"
               height="40"
-              :style="{ border: `2px solid ${colorAccent}` }">
-          <div class="capitalize px-2 text-2xl">{{ creatorName }}</div>
+              :style="{ border: `2px solid ${brandingStore.value.colors.secondary}` }">
+          <div class="capitalize px-2 text-2xl">{{ brandingStore.value.name }}</div>
           <v-btn icon @click="closeDonationDialog()" class="ml-auto" variant="text">
             <v-icon>mdi-close</v-icon>
           </v-btn>
@@ -53,7 +57,8 @@
                       clearable
           ></v-textarea>
 
-          <v-btn variant="outlined" :style="{ borderColor: colorBorder, color: colorBorder }"
+          <v-btn variant="outlined"
+                 :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
                  @click="goPay()" class="w-full mt-5">
             Envoyez
           </v-btn>
@@ -71,33 +76,21 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn block class="ma-auto" style="width: 200px;" text @click="closeDialog()">Annuler</v-btn>
+          <v-btn block class="ma-auto" style="width: 200px;" @click="closeDialog()">Annuler</v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
-  
+
 </template>
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {loadStripe} from '@stripe/stripe-js';
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  colorBorder: {required: true},
-  colorAccent: {required: true},
-  creatorId: {type: String, required: true},
-  creatorName: {type: String, required: true},
-  creatorLogo: {required: true},
-  iconColorClass: {default: 'text-black'}
-});
-
-const colorBorder = computed(() => props.colorBorder)
-const colorAccent = computed(() => props.colorAccent)
-const creatorId = computed(() => props.creatorId)
-const creatorName = computed(() => props.creatorName)
-const creatorLogo = computed(() => props.creatorLogo)
+const brandingStore = useBrandingStore()
 
 const donationModal = ref(false);
 
@@ -148,6 +141,7 @@ function closeDialog() {
     checkout.destroy();
   }
 }
+
 async function goPay() {
   isPaymentDialogActive.value = true;
 
diff --git a/src/views/creators/FollowButton.vue b/src/views/creators/FollowButton.vue
index 9842553..eed5883 100644
--- a/src/views/creators/FollowButton.vue
+++ b/src/views/creators/FollowButton.vue
@@ -1,27 +1,22 @@
 <script setup>
-import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {computed, ref} from "vue";
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-  backgroundColor: {required: true},
-});
-
-const colorBorder = computed(() => props.colorBorder);
-
+const brandingStore = useBrandingStore()
 const subscriptionStore = useSubscriptionStore();
 
-const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
 
 function subscribeToCreator() {
-  subscriptionStore.subscribeTo(props.creator.id);
+  subscriptionStore.subscribeTo(brandingStore.value.id);
 }
 
 // Référence pour contrôler l'affichage du modal
 const showUnsubscribeModal = ref(false);
 
 function unsubscribeFromCreator() {
-  subscriptionStore.unsubscribeFrom(props.creator.id);
+  subscriptionStore.unsubscribeFrom(brandingStore.value.id);
   // Fermer le modal après désabonnement
   showUnsubscribeModal.value = false;
 }
@@ -33,7 +28,7 @@ function unsubscribeFromCreator() {
         :style="{ 
        width: '150px',
        height: '28px',
-        backgroundColor: backgroundColor, 
+        backgroundColor: brandingStore.value.colors.secondary, 
         color: 'white', 
       borderRadius: '8px 0 0 8px',
         padding: '10px 24px',
@@ -50,17 +45,17 @@ function unsubscribeFromCreator() {
 
   <template v-else>
     <v-btn
-        :style="{ 
-       width: '150px',
-              height: '28px',
-        backgroundColor: backgroundColor, 
-        color: 'white', 
+        :style="{
+      width: '150px',
+      height: '28px',
+      backgroundColor: brandingStore.value.colors.secondary,
+      color: 'white', 
       borderRadius: '8px 0 0 8px',
-        padding: '10px 24px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        transition: 'background-color 0.3s ease'
+      padding: '10px 24px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      transition: 'background-color 0.3s ease'
       }"
         @click="showUnsubscribeModal = true"
     >
@@ -70,7 +65,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${creator.colors.menu}` }">
+            :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -87,12 +82,13 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
+               variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: creator.colors.menu }">Non</div>
+          <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
-  </v-dialog>
+  </v-dialog> 
 </template>
 
diff --git a/src/views/creators/Rewards.vue b/src/views/creators/Rewards.vue
index 016d63c..b0e7cfd 100644
--- a/src/views/creators/Rewards.vue
+++ b/src/views/creators/Rewards.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="text-center rounded-t-lg p-4 tracking-widest uppercase"
-       :style="{ color: userStore.creator.colors.onPrimary, backgroundColor: userStore.creator.colors.primary}">
+       :style="{ color: brandingStore.value.colors.onPrimary, backgroundColor: brandingStore.value.colors.primary}">
     Récompenses
   </div>
 
   <div v-for="(item, index) in rewards"
        class="my-1 text-white"
        :key="index"
-       :style="{ backgroundColor: userStore.creator.colors.primary }">
+       :style="{ backgroundColor: brandingStore.value.colors.primary }">
     
     <div class="flex justify-center border-b-2 border-white p-3 mx-2 text-xl tracking-[4px]">
       {{ item.title }}
@@ -30,10 +30,10 @@
 </template>
 
 <script setup>
-import {ref, computed} from 'vue';
-import {useUserStore} from "@/stores/userStore.js";
+import {ref} from 'vue';
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const userStore = useUserStore()
+const brandingStore = useBrandingStore()
 
 const rewards = ref([
   {
diff --git a/src/views/creators/SubscribeButton.vue b/src/views/creators/SubscribeButton.vue
index eb70b09..c0399d9 100644
--- a/src/views/creators/SubscribeButton.vue
+++ b/src/views/creators/SubscribeButton.vue
@@ -1,25 +1,22 @@
 <script setup>
 import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {computed, ref} from "vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-  backgroundColor: {required: true},
-});
+const brandingStore = useBrandingStore()
+const subscriptionStore = useSubscriptionStore()
 
-const subscriptionStore = useSubscriptionStore();
-
-const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
 
 function subscribeToCreator() {
-  subscriptionStore.subscribeTo(props.creator.id);
+  subscriptionStore.subscribeTo(brandingStore.value.id);
 }
 
 // Référence pour contrôler l'affichage du modal
 const showUnsubscribeModal = ref(false);
 
 function unsubscribeFromCreator() {
-  subscriptionStore.unsubscribeFrom(props.creator.id);
+  subscriptionStore.unsubscribeFrom(brandingStore.value.id);
   // Fermer le modal après désabonnement
   showUnsubscribeModal.value = false;
 }
@@ -31,7 +28,7 @@ function unsubscribeFromCreator() {
         :style="{ 
           width: '150px',
           height: '28px',
-          backgroundColor: backgroundColor, 
+          backgroundColor: brandingStore.value.colors.secondary, 
           color: 'white', 
           borderRadius: '0 8px 8px 0',
           padding: '10px 24px',
@@ -42,7 +39,7 @@ function unsubscribeFromCreator() {
         }"
         @click="subscribeToCreator"
     >
-     {{ $t('subscribebutton.subscribe') }}
+      {{ $t('subscribebutton.subscribe') }}
     </v-btn>
   </template>
 
@@ -51,7 +48,7 @@ function unsubscribeFromCreator() {
         :style="{ 
        width: '150px',
               height: '28px',
-        backgroundColor: backgroundColor, 
+        backgroundColor: brandingStore.value.colors.secondary, 
         color: 'white', 
       borderRadius: '0 8px 8px 0',
         padding: '10px 24px',
@@ -68,7 +65,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${creator.colors.menu}` }">
+            :style="{ border: `3px solid ${brandingStore.value.colors.secondary}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -83,11 +80,12 @@ function unsubscribeFromCreator() {
                :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
                @click="unsubscribeFromCreator">Oui
         </v-btn>
- 
+
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               :style="{ borderColor: brandingStore.value.colors.secondary, color: brandingStore.value.colors.secondary }"
+               variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: creator.colors.menu }">Non</div>
+          <div :style="{ color: brandingStore.value.colors.secondary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/src/views/creators/SubscribeButtonSlim.vue b/src/views/creators/SubscribeButtonSlim.vue
index 61b9f10..1870f8a 100644
--- a/src/views/creators/SubscribeButtonSlim.vue
+++ b/src/views/creators/SubscribeButtonSlim.vue
@@ -1,28 +1,21 @@
 <script setup>
-import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
 import {computed, ref} from "vue";
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true},
-  colorBorder: {required: true},
-});
-
-const colorBorder = computed(() => props.colorBorder);
-
+const brandingStore = useBrandingStore()
 const subscriptionStore = useSubscriptionStore();
 
-const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
+const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(brandingStore.value.id));
 
 function subscribeToCreator() {
-  subscriptionStore.subscribeTo(props.creator.id);
+  subscriptionStore.subscribeTo(brandingStore.value.id);
 }
 
-
 const showUnsubscribeModal = ref(false);
 
 function unsubscribeFromCreator() {
-  subscriptionStore.unsubscribeFrom(props.creator.id);
-  
+  subscriptionStore.unsubscribeFrom(brandingStore.value.id);
   showUnsubscribeModal.value = false;
 }
 </script>
@@ -32,7 +25,7 @@ function unsubscribeFromCreator() {
     <v-btn
         class="mr-4"
         :style="{ 
-        backgroundColor: colorBorder, 
+        backgroundColor: brandingStore.value.colors.secondary, 
         color: 'white', 
         borderRadius: '8px', 
         padding: '0px 24px',
@@ -51,7 +44,7 @@ function unsubscribeFromCreator() {
     <v-btn
         class="mr-4"
         :style="{ 
-        backgroundColor: colorBorder, 
+        backgroundColor: brandingStore.value.colors.secondary, 
         color: 'white', 
         borderRadius: '8px', 
         padding: '0px 24px',
@@ -68,7 +61,7 @@ function unsubscribeFromCreator() {
 
   <v-dialog v-model="showUnsubscribeModal" max-width="500">
     <v-card class="text-center rounded-xl"
-            :style="{ border: `3px solid ${creator.colors.menu}` }">
+            :style="{ border: `3px solid ${brandingStore.value.colors.primary}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -85,9 +78,10 @@ function unsubscribeFromCreator() {
         </v-btn>
 
         <v-btn class="flex-grow-1"
-               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
+               :style="{ borderColor: brandingStore.value.colors.primary, color: brandingStore.value.colors.primary }"
+               variant="outlined"
                @click="showUnsubscribeModal = false">
-          <div :style="{ color: creator.colors.menu }">Non</div>
+          <div :style="{ color: brandingStore.value.colors.primary }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
diff --git a/src/views/creators/SubscriptionList.vue b/src/views/creators/SubscriptionList.vue
index b4fe476..815c433 100644
--- a/src/views/creators/SubscriptionList.vue
+++ b/src/views/creators/SubscriptionList.vue
@@ -12,11 +12,12 @@ const subscriptionStore = useSubscriptionStore()
       <RouterLink class="capitalize" :to="`/@${subscription.creatorName}`">
 
         <div class="flex items-center content-center font-sans font-semibold pt-2 ">
-          <img :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
-               alt="Profile Image"
-               class="rounded-full mx-2"
-               width="32px"
-               height="32px">
+          <img
+              :src="subscription.creatorPortraitUrl ? subscription.creatorPortraitUrl: '/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png' "
+              alt="Profile Image"
+              class="rounded-full mx-2"
+              width="32px"
+              height="32px">
           {{ subscription.creatorName }}
         </div>
 
@@ -26,9 +27,7 @@ const subscriptionStore = useSubscriptionStore()
   </template>
 
   <template v-else>
-    <slot>
-      <span>No subscriptions</span>
-    </slot>
+    <span>No subscriptions</span>
   </template>
 
 </template>
\ No newline at end of file
diff --git a/src/views/creators/banner/bannerlower/BannerActions.vue b/src/views/creators/banner/bannerlower/BannerActions.vue
index 8aa856c..c60c06b 100644
--- a/src/views/creators/banner/bannerlower/BannerActions.vue
+++ b/src/views/creators/banner/bannerlower/BannerActions.vue
@@ -4,40 +4,21 @@ import BannerActionsSm from "@/views/creators/banner/bannerlower/BannerActionsSm
 import BannerActionsLg from "@/views/creators/banner/bannerlower/BannerActionsLg.vue";
 import BannerActionsXl from "@/views/creators/banner/bannerlower/BannerActionsXl.vue";
 
-const props = defineProps({
-  creator: {type: Object, required: true}
-});
-
-const emits = defineEmits(['content-posted']);
-
-function addContent(content) {
-  emits('content-posted', content);
-}
 </script>
 
 <template>
   <div>
     <banner-actions-sm class="d-sm-none"
-                       :creator="creator"
-                       @content-posted="addContent"
     ></banner-actions-sm>
 
-    <div class="d-none d-sm-flex d-md-none">
-      <banner-actions-md :creator="creator"
-                         @content-posted="addContent"
-      ></banner-actions-md>
-    </div>
+    <banner-actions-md class="d-none d-sm-flex d-md-none"
+    ></banner-actions-md>
 
-    <div class="d-none d-md-flex d-lg-none">
-      <banner-actions-lg :creator="creator"
-                         @content-posted="addContent"
-      ></banner-actions-lg>
-    </div>
+    <banner-actions-lg class="d-none d-md-flex d-lg-none"
+    ></banner-actions-lg>
 
-    <div class="d-none d-lg-flex">
-      <banner-actions-xl :creator="creator"
-                         @content-posted="addContent"
-      ></banner-actions-xl>
-    </div>
+    <banner-actions-xl class="d-none d-lg-flex"
+    ></banner-actions-xl>
+  
   </div>
 </template>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsLg.vue b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
index a3f32d4..f8136f1 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsLg.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsLg.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="relative w-full">
     <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
 
       <!-- Logo & User Info -->
       <div class="relative z-20">
@@ -9,30 +9,21 @@
           <div>
             <img
                 class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
-                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                 alt="Profile Picture"
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
+                :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
             />
           </div>
-          
+
           <div class="flex flex-row ml-auto space-x-2.5">
-            <donation-button-banner
-                :color-border="creator.colors.menu"
-                :color-accent="creator.colors.accent"
-                :creator-id="creator.id"
-                :creator-name="creator.name"
-                :creator-logo="creator.images.logo"
-                iconColorClass="text-white">
-            </donation-button-banner>
+            <donation-button-banner></donation-button-banner>
+        
             <div class="flex flex-column">
               <!-- Bouton abonnement affiché seulement si non abonné -->
-              <subscribe-button
-
-                  :creator="creator"
-                  :color-border="creator.colors.menu">
-              </subscribe-button>
+              <subscribe-button></subscribe-button>
+              
               <div class="font-bold text-white flex justify-end mr-5 py-1.5">
-                {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+                {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
               </div>
             </div>
           </div>
@@ -42,36 +33,26 @@
 
     <!-- Conteneur sticky -->
     <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
+         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom , borderBottom: '5px inset' + (brandingStore.value.colors.menu || '#000') }">
       <div class="shadow-3xl flex flex-row items-center py-2 px-2">
         <div>
           <img
               class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
-              :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+              :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
               alt="Profile Picture"
-              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
+              :style="{ borderColor: brandingStore.value.colors.accent, height: '190px'}"
           />
         </div>
         <div class="ml-5 text-white">
-          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
+          <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
         </div>
         <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
 
-          <donation-button-banner-slim
-              class=""
-              :color-border="creator.colors.menu"
-              :color-accent="creator.colors.accent"
-              :creator-id="creator.id"
-              :creator-name="creator.name"
-              :creator-logo="creator.images.logo"
-          >
-          </donation-button-banner-slim>
+          <donation-button-banner-slim></donation-button-banner-slim>
 
           <!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
           <subscribe-button-slim
-              v-if="!isSubscribed"
-              :creator="creator"
-              :color-border="creator.colors.menu">
+              v-if="!isSubscribed">
           </subscribe-button-slim>
 
         </div>
@@ -82,21 +63,19 @@
 
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
-import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
+import {ref, onMounted, computed} from 'vue';
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
 import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
 import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";
+import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: { type: Object, required: true }
-});
-
-const subscriptionStore = useSubscriptionStore();
+const brandingStore = useBrandingStore()
+const subscriptionStore = useSubscriptionStore()
 
 // Calculer si l'utilisateur est abonné
-const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));
+const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(brandingStore.value.id));
 
 const isSticky = ref(false);
 const mainContainer = ref(null);
@@ -106,7 +85,7 @@ onMounted(() => {
       ([entry]) => {
         isSticky.value = !entry.isIntersecting;
       },
-      { threshold: 0 }
+      {threshold: 0}
   );
 
   if (mainContainer.value) {
diff --git a/src/views/creators/banner/bannerlower/BannerActionsMd.vue b/src/views/creators/banner/bannerlower/BannerActionsMd.vue
index b0ee6d2..3d66149 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsMd.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsMd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <div class="rounded-b-2xl"
-         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79' }">
+         :style="{ backgroundColor: brandingStore.value.colors.bannerBottom }">
       <div>
 
         <!-- Logo-Name-Followers -->
@@ -9,32 +9,26 @@
           <div>
             <img
                 class="absolute rounded-full border-solid border-2  max-w-[140px] h-auto ml-3 -mt-3"
-                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                 alt="Profile Picture"
-                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"
+                :style="{ borderColor: brandingStore.value.colors.accent, height: '150px'}"
             />
           </div>
 
           <div class="flex flex-column text-white cap px-2 mt-1 w-full ml-40">
             <div class="flex justify-between">
               <div>
-                <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
-                <div>{{ creator.subscriberCount }} {{ $t('banner.subscription') }}</div>
+                <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
+                <div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
                 
               </div>
               
             </div>
 
             <div class="flex justify-between mt-2">
-              <subscribe-button :creator="creator"></subscribe-button>
+              <subscribe-button></subscribe-button>
               <div class="flex space-x-2">
-                
-                <donation-button :color-border="creator.colors.menu"
-                                 :color-accent="creator.colors.accent"
-                                 :creator-id="creator.id"
-                                 :creator-name="creator.name"
-                                 :creator-logo="creator.images.logo"
-                                 iconColorClass="text-white"
+                <donation-button iconColorClass="text-white"
                 ></donation-button>
               </div>
             </div>
@@ -50,9 +44,8 @@
 <script setup>
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import DonationButton from "@/views/creators/DonationButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true}
-});
+const brandingStore = useBrandingStore()
 
 </script>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsSm.vue b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
index 2e3ae80..8c76c24 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsSm.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsSm.vue
@@ -1,27 +1,14 @@
 <template>
   <div class="w-full">
     <div
-        :style="{ 
-    backgroundColor: creator.colors.bannerBottom || '#A30E79',
-    borderBottom: `2px solid ${creator.colors.accent || '#000000'}` 
-  }">
+        :style="{backgroundColor: brandingStore.value.colors.bannerBottom, borderBottom: `2px solid ${brandingStore.value.colors.accent}`}">
       <div>
         <!--        Logo-Name-Followers-->
         <div class="flex flex-row relative z-20">
-          <div>
-            <!-- bug space-->
-<!--            <img-->
-<!--                -->
-<!--                class="rounded-full border-solid border-2 -mt-4  max-w-[80px] h-auto ml-2"-->
-<!--                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"-->
-<!--                alt="Profile Picture"-->
-<!--                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '150px'}"-->
-<!--            />-->
-          </div>
 
           <div class="flex flex-column text-white capitalize px-2 mt-1">
-            <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
-            <div>{{ creator.subscriberCount }} {{ $t('banner.subscription')}}</div>
+            <p class="capitalize text-2xl font-bold">{{ brandingStore.value.name }}</p>
+            <div>{{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}</div>
           </div>
 
         </div>
@@ -30,21 +17,11 @@
         <div class="flex flex-row items-center justify-between w-full px-4">
 
           <div>
-            <subscribe-button :creator="creator"
-            ></subscribe-button>
+            <subscribe-button></subscribe-button>
           </div>
 
           <div class="flex ml-auto space-x-4">
-            <publish-content-button :creator="creator"
-                                    @content-posted="addContent"
-            ></publish-content-button>
-
-            <donation-button :color-border="creator.colors.menu"
-                             :color-accent="creator.colors.accent"
-                             :creator-id="creator.id"
-                             :creator-name="creator.name"
-                             :creator-logo="creator.images.logo"
-                             iconColorClass="text-white"
+            <donation-button iconColorClass="text-white"
             ></donation-button>
           </div>
 
@@ -58,16 +35,9 @@
 
 <script setup>
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 import DonationButton from "@/views/creators/DonationButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
-const props = defineProps({
-  creator: {type: Object, required: true}
-});
+const brandingStore = useBrandingStore()
 
-const emits = defineEmits(['content-posted']);
-
-function addContent(content) {
-  emits('content-posted', content);
-}
 </script>
diff --git a/src/views/creators/banner/bannerlower/BannerActionsXl.vue b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
index 3643da8..dd44797 100644
--- a/src/views/creators/banner/bannerlower/BannerActionsXl.vue
+++ b/src/views/creators/banner/bannerlower/BannerActionsXl.vue
@@ -4,7 +4,7 @@
     <div class="relative w-full shadow-xl rounded-2xl">
 
       <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
-           :style="{ backgroundColor: creator.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
+           :style="{ backgroundColor: brandingStore.value.colors.primary, boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">
 
         <div>
           <div>
@@ -14,16 +14,16 @@
               <div>
                 <img
                     class="shadow-2xl rounded-full border-solid border-102 absolute z-20 max-w-[190px] ml-10 -mt-10"
-                    :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
+                    :src="brandingStore.value.images.logo ? brandingStore.value.images.logo : '/images/placeholders/logo.png'"
                     alt="Profile Picture"
-                    :style="{ borderColor: creator.colors.secondary, height: '190px'}"
+                    :style="{ borderColor: brandingStore.value.colors.secondary, height: '190px'}"
                 />
               </div>
               <div class="ml-64 text-white w-25 min-w-60">
-                <p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
-
+                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
+                <p class="capitalize text-2xl mt-1">{{ brandingStore.value.name }}</p>
                 <div class="text-xs">
-                  105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
+                  105 Followers - {{ brandingStore.value.subscriberCount }} {{ $t('banner.subscription') }}
                 </div>
               </div>
             </div>
@@ -50,29 +50,23 @@
               </div>
               <!-- Follow and Subscribe Buttons -->
               <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
-                <follow-button
-                    :creator="creator"
-                    :background-color="creator.colors.secondary">
-                </follow-button>
-                <subscribe-button
-                    :creator="creator"
-                    :background-color="creator.colors.secondary">
-                </subscribe-button>
+                <follow-button></follow-button>
+                <subscribe-button></subscribe-button>
               </div>
             </div>
           </div>
 
           <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-md text-white"
-               :style="{ backgroundColor: creator.colors.background}">
+               :style="{ backgroundColor: brandingStore.value.colors.background}">
 
             <div class="w-96 h-28 flex flex-col">
               <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
               <div class="flex flex-row flex-grow-[2] min-h-20">
                 <div class="rounded-tl-md w-1/2   flex items-center justify-center"
-                     :style="{ backgroundColor: creator.colors.primary, opacity: 0.20 }">
+                     :style="{ backgroundColor: brandingStore.value.colors.primary, opacity: 0.20 }">
                 </div>
                 <div class="rounded-tr-md w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
-                     :style="{ backgroundColor: creator.colors.secondary}">
+                     :style="{ backgroundColor: brandingStore.value.colors.secondary}">
                   <div class="absolute left-1">
                     <div class="flex flex-row items-center justify-center space-x-5">
                       <div class="flex flex-row items-center">
@@ -87,11 +81,11 @@
 
                       <div class="flex flex-col items-center space-y-2">
                         <v-btn
-                            :style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">+
                         </v-btn>
                         <v-btn
-                            :style="{ backgroundColor: creator.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
+                            :style="{ backgroundColor: brandingStore.value.colors.secondary, fontSize: '20px', height: '30px', width: '30px', padding: '0', minWidth: '25px', minHeight: '25px' }"
                             variant="tonal">-
                         </v-btn>
                       </div>
@@ -108,7 +102,7 @@
               </div>
 
               <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-md"
-                   :style="{ backgroundColor: creator.colors.secondary, opacity: 0.80 }">
+                   :style="{ backgroundColor: brandingStore.value.colors.secondary, opacity: 0.80 }">
 
                 <textarea
                     rows="1"
@@ -126,18 +120,18 @@
     </div>
 
     <div class="rounded-b-2xl h-12 px-36 flex flex-col items-center justify-center"
-         :style="{ backgroundColor: creator.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
+         :style="{ backgroundColor: brandingStore.value.colors.secondary, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
       <div class="flex justify-evenly w-full">
         <RouterLink class="nav-button"
-                    :to="`/@${creator.name}`">
+                    :to="`/@${brandingStore.value.name}`">
           Présentation
         </RouterLink>
         <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${creator.name}/news`">
+                    :to="`/@${brandingStore.value.name}/news`">
           Actualité
         </RouterLink>
         <RouterLink class="nav-button text-white hover:bg-gray-700"
-                    :to="`/@${creator.name}/content`">
+                    :to="`/@${brandingStore.value.name}/content`">
           Exclusivité
         </RouterLink>
       </div>
@@ -161,69 +155,66 @@
 import {ref, onMounted} from 'vue';
 import SubscribeButton from "@/views/creators/SubscribeButton.vue";
 import FollowButton from "@/views/creators/FollowButton.vue";
+import {useBrandingStore} from "@/stores/brandingStore.js";
 
+const brandingStore = useBrandingStore()
 
 function GetSocialsUrls() {
 
   const socials = [];
 
-  if (props.creator.socials.facebookUrl !== null) {
+  if (brandingStore.value.socials.facebookUrl !== null) {
     socials.push({
       icon: "mdi-facebook",
-      url: props.creator.socials.facebookUrl
+      url: brandingStore.value.socials.facebookUrl
     })
   }
-  if (props.creator.socials.instagramUrl !== null) {
+  if (brandingStore.value.socials.instagramUrl !== null) {
     socials.push({
       icon: "mdi-instagram",
-      url: props.creator.socials.instagramUrl
+      url: brandingStore.value.socials.instagramUrl
     })
   }
-  if (props.creator.socials.xUrl !== null) {
+  if (brandingStore.value.socials.xUrl !== null) {
     socials.push({
       icon: "mdi-twitter",
-      url: props.creator.socials.xUrl
+      url: brandingStore.value.socials.xUrl
     })
   }
-  if (props.creator.socials.linkedInUrl !== null) {
+  if (brandingStore.value.socials.linkedInUrl !== null) {
     socials.push({
       icon: 'mdi-linkedin',
-      url: props.creator.socials.linkedInUrl
+      url: brandingStore.value.socials.linkedInUrl
     })
   }
-  if (props.creator.socials.tikTokUrl !== null) {
+  if (brandingStore.value.socials.tikTokUrl !== null) {
     socials.push({
       icon: '/images/socials/tiktok-white.png',
-      url: props.creator.socials.tikTokUrl
+      url: brandingStore.value.socials.tikTokUrl
     })
   }
-  if (props.creator.socials.youtubeUrl !== null) {
+  if (brandingStore.value.socials.youtubeUrl !== null) {
     socials.push({
       icon: 'mdi-youtube',
-      url: props.creator.socials.youtubeUrl
+      url: brandingStore.value.socials.youtubeUrl
     })
   }
-  if (props.creator.socials.redditUrl !== null) {
+  if (brandingStore.value.socials.redditUrl !== null) {
     socials.push({
       icon: 'mdi-reddit',
-      url: props.creator.socials.redditUrl
+      url: brandingStore.value.socials.redditUrl
     })
   }
-  if (props.creator.socials.websiteUrl !== null) {
+  if (brandingStore.value.socials.websiteUrl !== null) {
     socials.push({
       icon: 'mdi-web',
-      url: props.creator.socials.websiteUrl
+      url: brandingStore.value.socials.websiteUrl
     })
   }
 
   return socials;
 }
 
-
-const props = defineProps({
-  creator: {type: Object, required: true}
-});
-
 // Calculer si l'utilisateur est abonné
 const isSticky = ref(false);
 const mainContainer = ref(null);
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index aef20d5..cb01c6f 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -97,10 +97,10 @@
           <template v-slot:activator="{ props }">
             <div v-bind="props" class="flex align-center font-sans py-1 px-2 rounded-lg hover:bg-gray-100">
               <span class="max-w-xs hidden md:block capitalize">
-                {{ userStore.alias }}
+                {{ userProfileStore.alias }}
               </span>
               <img
-                  :src="userStore.portraitUrl"
+                  :src="userProfileStore.portraitUrl"
                   alt="Profile Image"
                   class="ml-2 rounded-full"
                   width="32"
@@ -119,13 +119,13 @@
             </template>
 
             <template v-else>
-              <v-list-item v-if="userStore.creator && Object.keys(userStore.creator).length > 0" class="nav-button">
-                <router-link :to="`/@${userStore.creator.name}`">
-                  <v-btn class="w-100" variant="plain">@{{ userStore.creator.name }}</v-btn>
+              <v-list-item v-if="creatorProfileStore.value && Object.keys(creatorProfileStore.value).length > 0" class="nav-button">
+                <router-link :to="`/@${creatorProfileStore.value.name}`">
+                  <v-btn class="w-100" variant="plain">@{{ creatorProfileStore.value.name }}</v-btn>
                 </router-link>
               </v-list-item>
 
-              <v-list-item v-if="!userStore.hasCreator" class="nav-button">
+              <v-list-item v-if="!creatorProfileStore.hasCreator" class="nav-button">
                 <router-link to="/profile?target=CreatorPage">
                   <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
                 </router-link>
@@ -158,12 +158,16 @@
 import { ref, onBeforeUnmount, onBeforeMount, watch } from "vue";
 import { useRouter } from 'vue-router';
 import { useSideBarStore } from '@/stores/sideBarStore.js';
-import { useUserStore } from "@/stores/userStore.js";
+
 import { useAuthStore } from "@/stores/authStore.js";
 import { useDisplay } from 'vuetify';
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 
 const authStore = useAuthStore();
-const userStore = useUserStore();
+const userProfileStore = useUserProfileStore();
+const creatorProfileStore = useCreatorProfileStore();
+
 const sideBarStore = useSideBarStore();
 const { smAndDown } = useDisplay();
 
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index 6d9a4fd..9ba679c 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -63,9 +63,6 @@ initializeLocale();
       </div>
 
       <subscription-list>
-        <template v-slot:default>
-          <span v-if="subscriptionListIsEmpty">Aucun abonnement</span>
-        </template>
       </subscription-list>
     </div>
 
diff --git a/src/views/main/Wallet.vue b/src/views/main/Wallet.vue
index 244f2ab..2413ead 100644
--- a/src/views/main/Wallet.vue
+++ b/src/views/main/Wallet.vue
@@ -47,9 +47,9 @@
 <script async setup>
 import { onBeforeMount, ref, computed } from 'vue';
 import { useRouter } from 'vue-router';
-import {useUserStore} from "@/stores/userStore.js";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
 
-const userStore = useUserStore();
+const userProfileStore = useUserProfileStore();
 const router = useRouter();
 
 const userTransactions = ref([]);
@@ -72,8 +72,8 @@ const transactionCount = computed(() => userTransactions.value.length);
 
 onBeforeMount( () => {
   try {
-    userTransactions.value = userStore.user.userTransactions;
-    totalBalance.value = userStore.user.totalBalance;
+    userTransactions.value = userProfileStore.value.userTransactions;
+    totalBalance.value = userProfileStore.value.totalBalance;
   } catch (error) {
     navigateToHome();
   }
diff --git a/src/views/messages/MessageList.vue b/src/views/messages/MessageList.vue
index 57f3281..0826707 100644
--- a/src/views/messages/MessageList.vue
+++ b/src/views/messages/MessageList.vue
@@ -6,10 +6,11 @@
       class="justify-items-center"
   >
     <template v-for="message in messages" :key="message">
-      <message :message="message"
-               @message-deleted="(messageId) => handleDeleteMessage(messageId)"
-               class="border-b"
-      ></message>
+      <div class="border-b">
+        <message :message="message"
+                 @message-deleted="(messageId) => handleDeleteMessage(messageId)"
+        ></message>
+      </div>
     </template>
 
     <template v-slot:load-more="{ props }">
@@ -89,7 +90,7 @@ async function fetchMessages({done, page_size = 10}) {
   }
 }
 
-function handleDeleteMessage(message){
+function handleDeleteMessage(message) {
   messages.value = messages.value.filter(item => item.id !== message.id);
 }
 </script>
diff --git a/src/views/messages/PostMessage.vue b/src/views/messages/PostMessage.vue
index 756284d..03e56a5 100644
--- a/src/views/messages/PostMessage.vue
+++ b/src/views/messages/PostMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-column">
     <div class="flex flex-row items-center ">
-      <img :src="userStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
+      <img :src="userProfileStore.portraitUrl" alt="Profile Image" class="rounded-full mr-2" width="32px" height="32px">
       <div class="flex-grow">
         <div class="flex flex-row bg-gray-100 rounded-2xl">
           <v-textarea
@@ -15,7 +15,7 @@
               maxlength="1024"
               class="pr-1 ml-6 flex-grow"
               @keydown.enter.prevent="publish"
-              
+
           >
           </v-textarea>
           <div class="flex flex-col justify-center">
@@ -36,14 +36,17 @@
     </div>
   </div>
 
-  <must-be-logged v-model="loginModal" message="Vous devez être connecté pour ajouter un commentaire."></must-be-logged>
+  <must-be-logged v-model="loginModal"
+                  message="Vous devez être connecté pour ajouter un commentaire."
+  ></must-be-logged>
+
 </template>
 
 <script setup>
 import {ref} from 'vue'
 import {v7} from 'uuid'
 import {useClient} from '@/plugins/api.js'
-import {useUserStore} from "@/stores/userStore.js"
+import {useUserProfileStore} from "@/stores/userProfileStore.js"
 import {useAuthStore} from "@/stores/authStore.js"
 import MustBeLogged from "@/views/MustBeLogged.vue";
 
@@ -59,7 +62,7 @@ const emits = defineEmits(['message-posted'])
 const loginModal = ref(false);
 const client = useClient()
 const value = ref("")
-const userStore = useUserStore()
+const userProfileStore = useUserProfileStore()
 const authStore = useAuthStore()
 
 const publish = async () => {
@@ -76,9 +79,9 @@ const publish = async () => {
       emits('message-posted', {
         "id": messageId,
         "subjectId": props.subjectId,
-        "createdBy": userStore.user.id,
-        "createdByName": userStore.alias,
-        "createdByPortraitUrl": userStore.portraitUrl,
+        "createdBy": userProfileStore.value.id,
+        "createdByName": userProfileStore.alias,
+        "createdByPortraitUrl": userProfileStore.portraitUrl,
         "createdAt": new Date(Date.now()).toISOString(),
         "value": value.value,
         "parentId": null
diff --git a/src/views/profile/account/AccountPage.vue b/src/views/profile/account/AccountPage.vue
index de619f6..31f7563 100644
--- a/src/views/profile/account/AccountPage.vue
+++ b/src/views/profile/account/AccountPage.vue
@@ -18,7 +18,7 @@
         <span class="value">Un portrait vous permet de personnaliser votre profil</span>
         <span>
             <img
-                :src="userStore.user.portraitUrl"
+                :src="userProfileStore.value.portraitUrl"
                 alt="Profile Image"
                 class="rounded-full"
                 width="48px"
@@ -30,7 +30,7 @@
           class="editableValue"
           @click="openEditFullname">
         <span class="label">{{ $t('personnalinformation.fullname') }}</span>
-        <span class="value">{{ userStore.fullname }}</span>
+        <span class="value">{{ userProfileStore.fullname }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
@@ -38,7 +38,7 @@
           class="editableValue"
           @click="openEditAlias">
         <span class="label">{{ $t('personnalinformation.alias') }}</span>
-        <span class="value">{{ userStore.user.alias }}</span>
+        <span class="value">{{ userProfileStore.value.alias }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
@@ -46,7 +46,7 @@
           class="editableValue"
           @click="openEditBirthday">
         <span class="label">{{ $t('personnalinformation.dob') }}</span>
-        <span class="value">{{ userStore.user.birthDate }}</span>
+        <span class="value">{{ userProfileStore.value.birthDate }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
@@ -62,7 +62,7 @@
           class="editableValue"
           @click="openEditEmail">
         <span class="label">{{ $t('personnalinformation.email') }}</span>
-        <span class="value">{{ userStore.user.email }}</span>
+        <span class="value">{{ userProfileStore.value.email }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
 
@@ -70,7 +70,7 @@
           class="editableValue"
           @click="openEditPhone">
         <span class="label">{{ $t('personnalinformation.phone') }}</span>
-        <span class="value">{{ userStore.user.phoneNumber }}</span>
+        <span class="value">{{ userProfileStore.value.phoneNumber }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
     </v-card>
@@ -85,7 +85,7 @@
           class="editableValue"
           @click="openEditAddress">
         <span class="label">{{ $t('personnalinformation.home') }}</span>
-        <span class="value">{{ userStore.user.address }}</span>
+        <span class="value">{{ userProfileStore.value.address }}</span>
         <span><v-icon>mdi-chevron-right</v-icon></span>
       </button>
     </v-card>
@@ -94,7 +94,7 @@
   <!-- Modal -->
   <v-dialog v-model="dialogEditPortraitShown" max-width="600px">
     <portrait-dialog
-        :portrait-url="userStore.user.portraitUrl"
+        :portrait-url="userProfileStore.value.portraitUrl"
         @close="handleCloseEditPortrait"
         @save="handleSaveEditPortrait"
     ></portrait-dialog>
@@ -102,8 +102,8 @@
 
   <v-dialog v-model="dialogEditFullnameShown" max-width="600px">
     <fullname-dialog
-        :firstname="userStore.user.firstname"
-        :lastname="userStore.user.lastname"
+        :firstname="userProfileStore.value.firstname"
+        :lastname="userProfileStore.value.lastname"
         @close="handleCloseEditFullname"
         @save="handleSaveEditFullname"
     ></fullname-dialog>
@@ -111,7 +111,7 @@
 
   <v-dialog v-model="dialogEditAliasShown" max-width="600px">
     <alias-dialog
-        :alias="userStore.user.alias"
+        :alias="userProfileStore.value.alias"
         @close="handleCloseEditAlias"
         @save="handleSaveEditAlias"
     ></alias-dialog>
@@ -119,7 +119,7 @@
 
   <v-dialog v-model="dialogEditBirthdayShown" max-width="600px">
     <birthday-dialog
-        :birth-date="userStore.user.birthDate"
+        :birth-date="userProfileStore.value.birthDate"
         @close="handleCloseEditBirthday"
         @save="handleSaveEditBirthday"
     ></birthday-dialog>
@@ -127,7 +127,7 @@
 
   <v-dialog v-model="dialogEditPhoneShown" max-width="600px">
     <phone-dialog
-        :phone="userStore.user.phoneNumber"
+        :phone="userProfileStore.value.phoneNumber"
         @close="handleCloseEditPhone"
         @save="handleSaveEditPhone"
     ></phone-dialog>
@@ -135,7 +135,7 @@
 
   <v-dialog v-model="dialogEditEmailShown" max-width="600px">
     <email-dialog
-        :email="userStore.user.email"
+        :email="userProfileStore.value.email"
         @close="handleCloseEditEmail"
         @save="handleSaveEditEmail"
     ></email-dialog>
@@ -143,7 +143,7 @@
 
   <v-dialog v-model="dialogEditAddressShown" max-width="600px">
     <address-dialog
-        :address="userStore.user.address"
+        :address="userProfileStore.value.address"
         @close="handleCloseEditAddress"
         @save="handleSaveEditAddress"
     ></address-dialog>
@@ -159,9 +159,10 @@ import BirthdayDialog from "@/views/profile/account/BirthdayDialog.vue";
 import AliasDialog from "@/views/profile/account/AliasDialog.vue";
 import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
 import PortraitDialog from "@/views/profile/account/PortraitDialog.vue";
-import {useUserStore} from "@/stores/userStore.js";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
+
+const userProfileStore = useUserProfileStore()
 
-const userStore = useUserStore()
 
 // ### Portrait
 
@@ -176,7 +177,7 @@ function handleCloseEditPortrait() {
 }
 
 function handleSaveEditPortrait(portraitData) {
-  userStore.changePortrait(portraitData)
+  userProfileStore.changePortrait(portraitData)
   dialogEditPortraitShown.value = false
 }
 
@@ -193,7 +194,7 @@ function handleCloseEditFullname() {
 }
 
 function handleSaveEditFullname(firstname, lastname) {
-  userStore.changeFullname(firstname, lastname)
+  userProfileStore.changeFullname(firstname, lastname)
   dialogEditFullnameShown.value = false
 }
 
@@ -210,7 +211,7 @@ function handleCloseEditAlias() {
 }
 
 function handleSaveEditAlias(alias) {
-  userStore.changeAlias(alias)
+  userProfileStore.changeAlias(alias)
   dialogEditAliasShown.value = false
 }
 
@@ -227,7 +228,7 @@ function handleCloseEditBirthday() {
 }
 
 function handleSaveEditBirthday(birthday) {
-  userStore.changeBirthday(birthday)
+  userProfileStore.changeBirthday(birthday)
   dialogEditBirthdayShown.value = false
 }
 
@@ -244,7 +245,7 @@ function handleCloseEditPhone() {
 }
 
 function handleSaveEditPhone(phone) {
-  userStore.changePhone(phone)
+  userProfileStore.changePhone(phone)
   dialogEditPhoneShown.value = false
 }
 
@@ -261,7 +262,7 @@ function handleCloseEditEmail() {
 }
 
 function handleSaveEditEmail(email) {
-  userStore.changeEmail(email)
+  userProfileStore.changeEmail(email)
   dialogEditEmailShown.value = false
 }
 
@@ -277,7 +278,7 @@ function handleCloseEditAddress() {
 }
 
 function handleSaveEditAddress(address) {
-  userStore.changeAddress(address)
+  userProfileStore.changeAddress(address)
   dialogEditAddressShown.value = false
 }
 </script>
diff --git a/src/views/profile/creators/About.vue b/src/views/profile/creators/About.vue
deleted file mode 100644
index 2f0ab42..0000000
--- a/src/views/profile/creators/About.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup>
-import {ref} from 'vue'
-import {useClient} from "@/plugins/api.js";
-
-const props = defineProps({
-  creator: {
-    required: true
-  }
-})
-
-const emits = defineEmits(['closeRequested'])
-
-const title = ref(props.creator.about.title)
-const description = ref(props.creator.about.description)
-
-const client = useClient()
-const save = async () => {
-  try {
-    await client.post(
-        `/api/creators/${props.creator.id}/about`,
-        {
-          "title": title.value || null,
-          "description": description.value || null
-        })
-
-    props.creator.about.title = title
-    props.creator.about.description = description
-
-    emits('closeRequested')
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const cancel = () => {
-  emits('closeRequested')
-}
-
-</script>
-
-<template>
-  <div class="pb-5 text-2xl">About</div>
-
-  <div class="flex flex-row align-center">
-    <v-text-field
-        variant="outlined"
-        v-model="title"
-        label="Titre"
-        outlined
-    ></v-text-field>
-  </div>
-
-
-  <div class="flex flex-row align-center">
-    <v-text-field
-        variant="outlined"
-        v-model="description"
-        label="Description"
-        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>
diff --git a/src/views/profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
index a3c02da..fa4c4b4 100644
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -1,23 +1,23 @@
 <script setup>
 import XIcon from '@/assets/icons/x.svg'
 import {computed, ref} from 'vue'
-import {useUserStore} from "@/stores/userStore.js"
 import Socials from './Socials.vue'
 import BannerPicker from './BannerPicker.vue'
 import ColorsPicker from './ColorsPicker.vue'
 import LogoPicker from "./LogoPicker.vue"
-import About from "./About.vue";
 import CreateCreator from "./CreateCreator.vue";
 import {useClient} from "@/plugins/api.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
+import {useUserProfileStore} from "@/stores/userProfileStore.js";
 
-const userStore = useUserStore()
+const creatorProfileStore = useCreatorProfileStore()
 
-const colorBannerTop = computed(() => userStore.creator.colors.bannerTop || '#a0c0f0')
-const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0')
-const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0')
-const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0')
-const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png')
-const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png')
+const colorBannerTop = computed(() => creatorProfileStore.value.colors.bannerTop || '#a0c0f0')
+const colorBannerBottom = computed(() => creatorProfileStore.value.colors.bannerBottom || '#a0c0f0')
+const colorAccent = computed(() => creatorProfileStore.value.colors.accent || '#a0c0f0')
+const colorMenu = computed(() => creatorProfileStore.value.colors.menu || '#a0c0f0')
+const imageBanner = computed(() => creatorProfileStore.value.images.banner || '/images/placeholders/banner.png')
+const imageLogo = computed(() => creatorProfileStore.value.images.logo || '/images/placeholders/logo.png')
 
 const dialog = ref(false);
 const currentComponent = ref('')
@@ -28,20 +28,20 @@ const componentsMap = {
   LogoPicker,
   Socials,
   ColorsPicker,
-  About,
   CreateCreator
 };
 
 async function requestAccept(creatorName) {
+  const userProfileStore = useUserProfileStore()
   const client = useClient()
   const response = await client.post(
       '/api/creators',
       {
-        'creatorId': userStore.user.id,
+        'creatorId': userProfileStore.value.id,
         'name': creatorName
       })
   if (response.status >= 200 && response.status < 300) {
-    await userStore.fetchCurrentCreatorProfile()
+    await creatorProfileStore.fetchCurrentCreatorProfile()
     dialog.value = false
   } else {
     console.log(`An issue while creating the creator: ${response.statusText}`)
@@ -71,7 +71,7 @@ const closeDialog = () => {
     <v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
       <v-card-text>
         <component :is="currentComponent"
-                   :creator="userStore.creator"
+                   :creator="creatorProfileStore.value"
                    :colorName="colorToEdit"
                    @closeRequested="closeDialog"
                    @requestAccept="requestAccept"
@@ -88,7 +88,7 @@ const closeDialog = () => {
       {{ $t('creatorinfopage.pageinformation') }}
     </h1>
 
-    <div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
+    <div v-if="creatorProfileStore.hasCreator" class="w-full max-w-[800px]">
 
       <div class="my-10 border rounded-2xl">
 
@@ -98,31 +98,11 @@ const closeDialog = () => {
 
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
             <span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span>
-            <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.value.name }}</span>
             <span class="flex-none">  
             <v-icon>mdi-chevron-right</v-icon>
           </span>
           </button>
-
-          <button
-              @click="openDialog('About')"
-              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
-            <span class="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.title') }}</span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
-            <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-          </button>
-
-          <button
-              @click="openDialog('About')"
-              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
-            <span class="pa-2 min-w-32 text-left">{{ $t('creatorinfopage.description') }}</span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
-            <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-          </button>
         </div>
       </div>
 
@@ -196,7 +176,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
             <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.facebookUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -206,7 +186,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
             <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.instagramUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -218,7 +198,7 @@ const closeDialog = () => {
           <span class="flex-none pa-2 w-6 h-6 text-left">    
             <XIcon></XIcon>
           </span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.xUrl }}</span>
             <span class="flex-none">          
                         <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -228,7 +208,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
             <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.linkedInUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -240,7 +220,7 @@ const closeDialog = () => {
           <span class="flex-none pa-2 min-w-32 text-left"> 
             <XIcon class="w-5 h-5"></XIcon>
           </span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.tikTokUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -250,7 +230,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
             <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.youtubeUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -260,7 +240,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
             <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.redditUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>
@@ -270,7 +250,7 @@ const closeDialog = () => {
               @click="openDialog('Socials')"
               class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
             <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
-            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
+            <span class="flex-auto text-left pr-6">{{ creatorProfileStore.value.socials.websiteUrl }}</span>
             <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
           </span>