diff --git a/src/components/CardControl.vue b/src/components/CardControl.vue
new file mode 100644
index 0000000..19a07d0
--- /dev/null
+++ b/src/components/CardControl.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-card tile outlined class="card">
+    <v-card-title class="card__title primary">
+      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
+      Contrôles
+    </v-card-title>
+    <v-container class="text-center">
+      <v-row justify="center">
+        <v-col cols="12" sm="6" md="5" class="mt-4">
+          <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
+            <v-icon left size="100">mdi-skip-previous</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="5" class="mt-4">
+          <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
+            <v-icon left size="100">mdi-skip-next</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="5" class="mb-4">
+          <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
+            <v-icon left size="100">mdi-pause</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="5" class="mb-4">
+          <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
+            <v-icon left size="100">mdi-play</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
diff --git a/src/components/CardSolution.vue b/src/components/CardSolution.vue
new file mode 100644
index 0000000..88ffddd
--- /dev/null
+++ b/src/components/CardSolution.vue
@@ -0,0 +1,30 @@
+<template>
+  <v-card tile outlined class="card">
+    <v-card-title class="card__title feedback">
+      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
+      Solution
+    </v-card-title>
+    <v-container class="text-center">
+      <v-row justify="center">
+        <v-container class="text-center">
+          <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
+          <v-img width="450" 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>
+  </v-card>
+</template>
+<style>
+@media (min-width: 1024px) {
+  .image-container {
+    width: 300px;
+    overflow: hidden; /* Pour masquer le dépassement de l'image */
+    border: 1px solid #ccc; /* Bordure de l'image */
+  }
+  .image-container img {
+    width: 100%; /* Pour remplir complètement le conteneur */
+    height: auto; /* Pour maintenir le ratio d'aspect de l'image */
+    display: block; /* Pour éviter l'espace réservé pour les images */
+  }
+}
+</style>
diff --git a/src/components/CardSoundboard.vue b/src/components/CardSoundboard.vue
new file mode 100644
index 0000000..8f61199
--- /dev/null
+++ b/src/components/CardSoundboard.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-card tile outlined class="card" color="">
+    <v-card-title class="card__title primary">
+      <v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
+      Soundboard
+    </v-card-title>
+    <v-container class="text-center">
+      <v-row justify="center">
+        <v-col cols="12" sm="6" md="4" class="mt-4">
+          <v-btn class="card" width="200" height="130" @click="" rounded>
+            <v-icon size="100">mdi-check-circle-outline</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" class="mt-4">
+          <v-btn class="card" width="200" height="130" @click="" rounded>
+            <v-icon size="100">mdi-close-circle-outline</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="4" class="mt-4">
+          <v-btn class="card" width="200" height="130" @click="" rounded>
+            <v-icon size="100">mdi-timer-outline</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+      <v-row justify="center">
+        <v-col cols="12" sm="6" md="4" class="mb-4">
+          <v-btn class="card" width="220" height="130" @click="" rounded>
+            <v-icon size="100">mdi-human-handsup</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col cols="12" sm="6" md="s" class="mb-4">
+          <v-btn class="card" width="220" height="130" @click="" rounded>
+            <v-icon size="100">mdi-bell-outline</v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
diff --git a/src/views/GameControl.vue b/src/views/GameControl.vue
index d9a64c1..428c945 100644
--- a/src/views/GameControl.vue
+++ b/src/views/GameControl.vue
@@ -1,127 +1,41 @@
-
 <template>
-    <v-container>
-            <v-row no-gutters>
-              <v-col class="align-start">
-                <v-card tile outlined class="card">
-                  <v-card-title class="card__title primary">
-                    <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
-                    Contrôles
-                  </v-card-title>
-                  <v-container class="text-center">
-                    <v-row justify="center">
-                      <v-col cols="12" sm="6" md="5" class="mt-4">
-                        <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
-                          <v-icon left size="100">mdi-skip-previous</v-icon>
-                        </v-btn>
-                      </v-col>
-                      <v-col cols="12" sm="6" md="5" class="mt-4">
-                        <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
-                          <v-icon left size="100">mdi-skip-next</v-icon>
-                        </v-btn>
-                      </v-col>
-                      <v-col cols="12" sm="6" md="5" class="mb-4">
-                        <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
-                          <v-icon left size="100">mdi-pause</v-icon>
-                        </v-btn>
-                      </v-col>
-                      <v-col cols="12" sm="6" md="5" class="mb-4">
-                        <v-btn width="240" height="130" class="btn card xs12 sm6 md3">
-                          <v-icon left size="100">mdi-play</v-icon>
-                        </v-btn>
-                      </v-col>
-                    </v-row>
-                  </v-container>
-                </v-card>
-              </v-col>
+<v-container>
+  <v-row no-gutters>
+    <v-col class="align-start">
+      <card-control />
+    </v-col>
+    <v-col class="pl-3">
+      <card-soundboard />
+    </v-col>
+  </v-row>
+</v-container>
+<v-container>
+  <v-row no-gutters>
+    <v-col>
+      <card-solution />
+    </v-col>
+  </v-row>
+</v-container>
+</template>
 
-            <v-col class="pl-3">
-                <v-card tile outlined class="card" color="">
-                    <v-card-title class="card__title primary">
-                    <v-icon left class="white--text pr-5 pl-2" size="50">mdi-music-box-multiple</v-icon>
-                    Soundboard
-                    </v-card-title>
-                    <v-container class="text-center">
-                        <v-row justify="center">
-                            <v-col cols="12" sm="6" md="4" class="mt-4">
-                                <v-btn class="card" width="200" height="130" @click="" rounded>
-                                    <v-icon size="100">mdi-check-circle-outline</v-icon>
-                                </v-btn>
-                            </v-col>
-                            <v-col cols="12" sm="6" md="4" class="mt-4">
-                                <v-btn class="card" width="200" height="130" @click="" rounded>
-                                    <v-icon size="100">mdi-close-circle-outline</v-icon>
-                                </v-btn>
-                            </v-col>
-                            <v-col cols="12" sm="6" md="4" class="mt-4">
-                                <v-btn class="card" width="200" height="130" @click="" rounded>
-                                    <v-icon size="100">mdi-timer-outline</v-icon>
-                                </v-btn>
-                            </v-col>
-                        </v-row>
-                        <v-row justify="center">
-                            <v-col cols="12" sm="6" md="4" class="mb-4">
-                                <v-btn class="card" width="220" height="130" @click="" rounded>
-                                    <v-icon size="100">mdi-human-handsup</v-icon>
-                                </v-btn>
-                            </v-col>
-                            <v-col cols="12" sm="6" md="s" class="mb-4">
-                                <v-btn class="card" width="220" height="130" @click="" rounded>
-                                    <v-icon size="100">mdi-bell-outline</v-icon>
-                                </v-btn>
-                            </v-col>
-                        </v-row>
-                    </v-container>
-                </v-card>
-            </v-col>
-            </v-row>
-          </v-container>
-          <v-container>
-            <v-row no-gutters>
-              <v-col>
-                <v-card tile outlined class="card">
-                  <v-card-title class="card__title feedback">
-                    <v-icon left class="white--text pr-5 pl-2" size="50">mdi-play-network-outline</v-icon>
-                    Solution
-                  </v-card-title>
-                  <v-container class="text-center">
-                    <v-row justify="center">
-                      <v-container class="text-center">
-                        <!-- Utilisation de styles CSS personnalisés pour centrer l'image -->
-                        <v-img width="450" 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>
-                </v-card>
-              </v-col>
-            </v-row>
-          </v-container>
-  </template>
-  
-  <style>
-  @media (min-width: 1024px) {
-    .card__title.primary {
-        background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
-    }
-    .card__title.feedback {
-        background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
-    }
-    .btn{
-      border-radius:50px!important;
-    }
-    .card {
-        background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
-    }
-    .image-container {
-      width: 300px;
-      overflow: hidden; /* Pour masquer le dépassement de l'image */
-      border: 1px solid #ccc; /* Bordure de l'image */
-    }
-    .image-container img {
-      width: 100%; /* Pour remplir complètement le conteneur */
-      height: auto; /* Pour maintenir le ratio d'aspect de l'image */
-      display: block; /* Pour éviter l'espace réservé pour les images */
-    } 
+<script setup>
+
+import CardSolution from '@/components/CardSolution.vue'
+import CardControl from '@/components/CardControl.vue'
+import CardSoundboard from '@/components/CardSoundboard.vue';
+
+</script>
+
+<style>
+@media (min-width: 1024px) {
+  .card__title.primary {
+      background-color: #2979FF; /* Changez la couleur en fonction de votre thème */
   }
-  </style>
-  
+  .card__title.feedback {
+      background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
+  }
+  .btn{
+    border-radius:50px!important;
+  }
+}
+</style>