diff --git a/src/views/profile/creators/CreatorPage.vue b/src/views/profile/creators/CreatorPage.vue
index fbeb434..34bca91 100644
--- a/src/views/profile/creators/CreatorPage.vue
+++ b/src/views/profile/creators/CreatorPage.vue
@@ -90,7 +90,7 @@ const closeDialog = () => {
         <div class="flex flex-col w-full">
           <button
 
-              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">
+              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="flex-none pa-2 min-w-32 text-left">{{ $t('creatorinfopage.name') }}</span>
             <span class="flex-auto text-left pr-6 capitalize">{{ creatorProfileStore.creator.name }}</span>
             <span class="flex-none">  
@@ -105,14 +105,16 @@ const closeDialog = () => {
         <div class="flex flex-col w-full gap-4">
 
 
-          <v-btn
-              variant="elevated"
-              @click="openDialog('ColorsPicker')"
-              class="flex h-10 px-5 hover:brightness-150"
-          >
-            Choissisez votre palette de couleurs
-          </v-btn>
 
+            <button
+                @click="openDialog('ColorsPicker')"
+                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-auto text-left pr-6 capitalize">  Choisissez votre palette de couleurs. </span>
+              <span class="flex-none">  
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+            </button>    
 
           <button>
             <img
@@ -164,7 +166,7 @@ const closeDialog = () => {
           <button
               @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 w-6 h-6 text-left">    
+          <span class="flex-none pa-2 w-9 h-9 text-left ml-0.5">    
             <XIcon></XIcon>
           </span>
             <span class="flex-auto text-left pr-6">{{ creatorProfileStore.creator.socials.xUrl }}</span>
diff --git a/src/views/profile/creators/Socials.vue b/src/views/profile/creators/Socials.vue
index a4956b0..19d662a 100644
--- a/src/views/profile/creators/Socials.vue
+++ b/src/views/profile/creators/Socials.vue
@@ -59,9 +59,10 @@ const cancel = () => {
 
 <style scoped>
 .icon {
-  width: 40px;
-  height: 40px;
-  fill: #1976d2;
+  
+  width: 28px;
+  height: 30px;
+  fill: #000000;
 }
 </style>
 
@@ -132,10 +133,9 @@ const cancel = () => {
   <div class="flex flex-row align-center">
 
     <div class="w-6 h-6 mb-5 mr-2">
-      
       <XIcon class="icon"></XIcon>
     </div>
-    
+
     <v-text-field
         variant="outlined"
         v-model="xUrl"