diff --git a/ui/src/components/CardButtonScore.vue b/ui/src/components/CardButtonScore.vue
new file mode 100644
index 0000000..d6d8cc5
--- /dev/null
+++ b/ui/src/components/CardButtonScore.vue
@@ -0,0 +1,114 @@
+<template>
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
+      <v-icon left class="white--text pr-5 pl-2" size="40">mdi-calculator-variant</v-icon>
+      Gestion des scores
+    </v-card-title>
+    <v-container class="text-center">
+      <v-row justify="center">
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn red xs12 sm6 md3" topic="/game/score" message="TEAM_RED-2"rounded>
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="/game/score" message="TEAM_RED-1">
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3" topic="/game/score" message="TEAM_RED+1">
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn red card xs12 sm6 md3 " topic="/game/score" message="TEAM_RED+2">
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="/game/score" message="TEAM_BLUE-2">
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="/game/score" message="TEAM_BLUE-1">
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="/game/score" message="TEAM_BLUE+1">
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn blue card xs12 sm6 md3 " topic="/game/score" message="TEAM_BLUE+2">
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE-2">
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE-1">
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE+1">
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn orange card xs12 sm6 md3 " topic="/game/score" message="TEAM_ORANGE+2">
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="/game/score" message="TEAM_GREEN-2">
+            <v-icon left size="40">mdi-minus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="/game/score" message="TEAM_GREEN-1">
+            <v-icon left size="40">mdi-minus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="4" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="/game/score" message="TEAM_GREEN+1">
+            <v-icon left size="40">mdi-plus-box</v-icon>
+          </mqtt-button>
+        </v-col>
+        <v-col cols="12" sm="6" md="3">
+          <mqtt-button width="120" height="60" class="btn green card xs12 sm6 md3 " topic="/game/score" message="TEAM_GREEN+2">
+            <v-icon left size="40">mdi-plus-box-multiple</v-icon>
+          </mqtt-button>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script setup>
+  import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
+</script>
+
+<style>
+  .card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 170px;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+  }
+</style>
\ No newline at end of file
diff --git a/ui/src/components/CardControl.vue b/ui/src/components/CardControl.vue
index 33a1c4b..b002357 100644
--- a/ui/src/components/CardControl.vue
+++ b/ui/src/components/CardControl.vue
@@ -2,28 +2,28 @@
   <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
     <v-card-title class="card__title primary" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-camera-control</v-icon>
-      Contrôles
+      Contrôle du jeu
     </v-card-title>
     <v-container class="text-center">
       <v-row justify="center">
         <v-col cols="12" sm="6" md="5" class="mt-4">
-          <mqtt-button width="220" height="110" class="btn xs12 sm6 md3" topic="/display/control" message="previous">
-            <v-icon left size="80">mdi-skip-previous</v-icon>
+          <mqtt-button width="150" height="90" class="btn red" topic="/display/control" message="previous">
+            <v-icon left size="60">mdi-skip-previous</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="5" class="mt-4">
-          <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="next">
-            <v-icon left size="80">mdi-skip-next</v-icon>
+          <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="next">
+            <v-icon left size="60">mdi-skip-next</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="5" class="mb-4">
-          <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3" topic="/display/control" message="pause">
-            <v-icon left size="80">mdi-pause</v-icon>
+          <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="pause">
+            <v-icon left size="60">mdi-pause</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="5" class="mb-4">
-          <mqtt-button width="240" height="110" class="btn card xs12 sm6 md3 " topic="/display/control" message="play">
-            <v-icon left size="80">mdi-play</v-icon>
+          <mqtt-button width="150" height="90" class="btn red card" topic="/display/control" message="play">
+            <v-icon left size="60">mdi-play</v-icon>
           </mqtt-button>
         </v-col>
       </v-row>
diff --git a/ui/src/components/CardSolution.vue b/ui/src/components/CardSolution.vue
index 5fbc40b..c36a094 100644
--- a/ui/src/components/CardSolution.vue
+++ b/ui/src/components/CardSolution.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
-    <v-card-title class="card__title feedback" @click="toggleCardSize">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
       Solution
     </v-card-title>
@@ -8,7 +8,7 @@
       <v-row justify="center">
         <v-container class="text-center">
           <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
-          <v-img width="400" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
+          <v-img width="385" src="https://c4.wallpaperflare.com/wallpaper/908/893/291/funny-middle-finger-black-background-wallpaper-preview.jpg" style="margin: 0 auto;"></v-img>
         </v-container>
       </v-row>
     </v-container>
diff --git a/ui/src/components/CardSoundboard.vue b/ui/src/components/CardSoundboard.vue
index 6c8208d..01bcb36 100644
--- a/ui/src/components/CardSoundboard.vue
+++ b/ui/src/components/CardSoundboard.vue
@@ -7,30 +7,30 @@
     <v-container class="text-center">
       <v-row justify="center">
         <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="good-response" rounded>
-            <v-icon size="70">mdi-check-circle-outline</v-icon>
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="good-response" rounded>
+            <v-icon size="60">mdi-check-circle-outline</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="bad-response" rounded>
-            <v-icon size="70">mdi-close-circle-outline</v-icon>
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="bad-response" rounded>
+            <v-icon size="60">mdi-close-circle-outline</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="4" class="mt-4">
-          <mqtt-button class="btn" width="200" height="110" topic="/sound/playsound" message="timer" rounded>
-            <v-icon size="70">mdi-timer-outline</v-icon>
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="timer" rounded>
+            <v-icon size="60">mdi-timer-outline</v-icon>
           </mqtt-button>
         </v-col>
       </v-row>
       <v-row justify="center">
         <v-col cols="12" sm="6" md="4" class="mb-4">
-          <mqtt-button class="btn" width="220" height="110" topic="/sound/playsound" message="applause" rounded>
-            <v-icon size="70">mdi-human-handsup</v-icon>
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="applause" rounded>
+            <v-icon size="60">mdi-human-handsup</v-icon>
           </mqtt-button>
         </v-col>
         <v-col cols="12" sm="6" md="4" class="mb-4">
-          <mqtt-button class="btn" width="220" height="110" topic="/sound/playsound" message="bell" rounded>
-            <v-icon size="70">mdi-bell-outline</v-icon>
+          <mqtt-button class="btn red" width="150" height="90" topic="/sound/playsound" message="bell" rounded>
+            <v-icon size="60">mdi-bell-outline</v-icon>
           </mqtt-button>
         </v-col>
       </v-row>
diff --git a/ui/src/views/GameControl.vue b/ui/src/views/GameControl.vue
index 33510e8..518a77b 100644
--- a/ui/src/views/GameControl.vue
+++ b/ui/src/views/GameControl.vue
@@ -11,11 +11,15 @@
 </v-container>
 
   <v-row no-gutters class="pr-4 pl-4">
-    <v-col>
-      <card-solution />
-    </v-col>
+    <v-row no-gutters>
+      <v-col class="align-start">
+        <CardButtonScore />
+      </v-col>
+      <v-col class="pl-3">
+        <card-solution />
+      </v-col>
+    </v-row>
   </v-row>
-
 </template>
 
 <script setup>
@@ -23,6 +27,7 @@
 import CardSolution from '@/components/CardSolution.vue'
 import CardControl from '@/components/CardControl.vue'
 import CardSoundboard from '@/components/CardSoundboard.vue';
+import CardButtonScore from '@/components/CardButtonScore.vue'
 
 </script>
 
@@ -35,8 +40,43 @@ import CardSoundboard from '@/components/CardSoundboard.vue';
       background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
   }
   .btn{
-    border-radius:30px!important;
+    border-radius:20px!important;
+  }
+  .btn.red {
     background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.blue {
+    background-color: #2867d4; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.orange {
+    background-color: #d48f28; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .btn.green {
+    background-color: #28d42e; /* Changez la couleur en fonction de votre thème */
+    
+  }
+  .scorediv-style-red {
+    background-color: #d42828 !important;
+    padding: 15px;
+    border-top-left-radius: 10%;
+  }
+  .scorediv-style-orange {
+    background-color: #d48f28 !important;
+    padding: 15px;
+    border-bottom-left-radius: 10%;
+  }
+  .scorediv-style-blue {
+    background-color: #2867d4 !important;
+    padding: 15px;
+    border-top-right-radius: 10%;    
+  }
+  .scorediv-style-green {
+    background-color: #28d42e !important;
+    padding: 15px;
+    border-bottom-right-radius: 10%;
   }
 }
 </style>