diff --git a/ui/src/components/MQTTColorPublisher.vue b/ui/src/components/MQTTColorPublisher.vue
index b423c54..7fb9e22 100644
--- a/ui/src/components/MQTTColorPublisher.vue
+++ b/ui/src/components/MQTTColorPublisher.vue
@@ -8,9 +8,18 @@
       <div class="input-style">       
         <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>   
       </div> 
-      <div class="color-picker-style">
-        <v-color-picker mode="hex" v-model="selectedColor"></v-color-picker>
-      </div> 
+      <v-row>
+        <v-col cols="6" class="color-picker-style">
+          <v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
+        </v-col>
+        <v-col cols="5.5" class="button-container">
+          <v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
+          <v-btn color="#FF7518" class="team-button" @click="publisButtonColor('#FF7518')">Team Orange</v-btn>
+          <v-btn color="#00FF1F" class="team-button" @click="publisButtonColor('#00FF1F')">Team Verte</v-btn>
+          <v-btn color="#007AFF" class="team-button" @click="publisButtonColor('#007AFF')">Team Bleue</v-btn>
+          <v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
+        </v-col>
+      </v-row>
       <v-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>  
     </v-card> 
   </v-container>
@@ -21,18 +30,28 @@
 import { publishMessage } from '@/services/mqttService'
 
 export default {
-  data() { return {   message: '', // Initialiser la variable message   
-    selectedTopic: 'Selectionnez un topic',   
-    selectedColor: "#FF0000",   
-    topics: [     
-      '/wled/all'
-    ] // Liste des topics 
-  }
+  data() { 
+    return {   
+      message: '', // Initialiser la variable message   
+      selectedTopic: 'Selectionnez un topic',   
+      selectedColor: "#FF0000",   
+      topics: [     
+        '/wled/all',
+        '/wled/1',
+        '/wled/2',
+        '/wled/3',
+        '/wled/4',
+        '/wled/5'
+      ]
+    }
 },
   methods: { 
     publisCustomColor() {   
       publishMessage(this.selectedTopic, this.selectedColor)
     },
+    publisButtonColor(param) {   
+      publishMessage(this.selectedTopic, param)
+    },
     
   }
 }
@@ -46,11 +65,6 @@ export default {
   .input-style{ 
     margin: 20px;
   }
-  .v-btn-style-standalone{ 
-    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
-    margin-bottom: 5%;
-    margin-left: 5%;
-  }
   .v-btn-style-validate{ 
     align-items: center; 
     justify-content: center; 
@@ -63,10 +77,20 @@ export default {
     text-align: center;
   }
   .color-picker-style {
-    display: flex;
-    align-items: left; /* Centre verticalement */
-    height: 100%; /* Ajuste selon la hauteur désirée */
-    width: 100%; /* Ajuste selon la hauteur désirée */
     padding-left: 5%;
+    padding-bottom: 5%;
+  }
+  .button-container {
+  text-align: center;
+  margin-top: 12px;
+  margin-bottom: 27px;
+  margin-left: 15px;
+  margin-right: 13px;
+}
+  .team-button {
+    width: 140px;
+    display: block;
+    margin: 7% auto 0; /* 5% de marge en bas pour espacer les boutons */
+    background-color: #d42828;
   }
 </style>
\ No newline at end of file