I modified the banner section on large screens.

src/views/creators/SubscribeButton.vue

@@ -4,8 +4,11 @@ import {computed, ref} from "vue";
 
 const props = defineProps({
   creator: {type: Object, required: true},
+  colorBorder: {required: true},
 });
 
+const colorBorder = computed(() => props.colorBorder);
+
 const subscriptionStore = useSubscriptionStore();
 
 const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));
@@ -27,32 +30,45 @@ function unsubscribeFromCreator() {
 <template>
   <template v-if="isSubscribe">
     <v-btn
-        class="action mr-4"
-        variant="outlined"
+        class="mr-4"
+        :style="{ 
+        backgroundColor: colorBorder, 
+        color: 'white', 
+        borderRadius: '8px', 
+        padding: '20px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
         @click="subscribeToCreator"
-        color="white"
     >
-      {{ $t('subscribebutton.subscribe') }}
+      <div class="font-bold">{{ $t('subscribebutton.subscribe') }}</div>
     </v-btn>
   </template>
 
   <template v-else>
     <v-btn
-        class="action mr-4"
-        variant="outlined"
+        class="mr-4"
+        :style="{ 
+        backgroundColor: colorBorder, 
+        color: 'white', 
+        borderRadius: '8px', 
+        padding: '20px 24px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'background-color 0.3s ease'
+      }"
         @click="showUnsubscribeModal = true"
-        style="transition: background-color 0.3s ease;"
-        color="white"
     >
-      {{ $t('subscribebutton.unsubscribe') }}
+      <div class="font-bold">{{ $t('subscribebutton.unsubscribe') }}</div>
     </v-btn>
   </template>
 
   <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 ${creator.colors.menu}` }">
 
       <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
         <div class="flex-1 text-center">
@@ -64,22 +80,17 @@ function unsubscribeFromCreator() {
       <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
       <v-card-actions class="justify-center px-4 pb-4">
         <v-btn text class="flex-grow-1" variant="outlined"
-               style="background-color: rgba(255, 255, 255, 0.1); color: rgba(0, 0, 0, 0.4);"
+               :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
                @click="unsubscribeFromCreator">Oui
         </v-btn>
 
-        <v-btn color="secondary" class="flex-grow-1"
+        <v-btn class="flex-grow-1"
                :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
-               @click="showUnsubscribeModal = false "> <div :style="{color: creator.colors.menu}">non</div>
+               @click="showUnsubscribeModal = false">
+          <div :style="{ color: creator.colors.menu }">Non</div>
         </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
-<style scoped>
-.action {
-  @apply py-2 px-4 rounded;
-  border: 1px solid currentColor;
-}
-</style>