diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
index e69de29..1fdf6f5 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
@@ -0,0 +1,49 @@
+@media screen and (max-width: 1200px) {
+    .button-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+        flex-direction: column;
+    }
+    
+    .button {
+        width: calc(20vh - 20px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(20vh - 20px); /* Hauteur égale à la largeur pour faire un bouton carré */
+        transform: translate(3vh);
+        background-color: #1a237e; /* Légèrement plus clair que le fond */
+        border: 10px solid #3949ab; /* Bordure */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        cursor: pointer;
+        margin: 10px; /* Espacement entre les boutons */
+        font-size: 8vh;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .button-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 80%;
+    }
+    
+    .button {
+        width: calc(20vw - 20px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(20vw - 20px); /* Hauteur égale à la largeur pour faire un bouton carré */
+        transform: translate(10vw, 0);
+        background-color: #1a237e; /* Légèrement plus clair que le fond */
+        border: 10px solid #3949ab; /* Bordure */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        cursor: pointer;
+        margin: 10px; /* Espacement entre les boutons */
+        font-size: 8vw;
+    }
+}
+
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
index 2d5fa69..a8aa294 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
@@ -1,4 +1,12 @@
+<!-- 
 <div>
   <input type="text" [(ngModel)]="value">
-    <input type="button" value="send" (click)="click()">
-  </div>
\ No newline at end of file
+  <input type="button" value="send" (click)="click()">
+</div>
+-->
+<div class="button-container">
+<div class="button" (click)="click('0')">💡</div>
+<div class="button" (click)="click('1')">🫀</div>
+<div class="button" (click)="click('2')">👻</div>
+<div class="button" (click)="click('3')">🪟</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
index 2a0cd11..9ff0eec 100644
--- a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
+++ b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
@@ -9,7 +9,6 @@ import { UrlService } from '../url.service';
 })
 export class AsymetricUnityTemplateComponent implements OnInit {
 
-  value: string | undefined;
   variable: string | undefined;
 
   constructor(private route: ActivatedRoute, private urlService: UrlService) {
@@ -21,12 +20,8 @@ export class AsymetricUnityTemplateComponent implements OnInit {
     });
   }
 
-  onInputChange(event: Event) {
-    // Accéder à la valeur du champ de texte à partir de l'événement
-    this.value = (event.target as HTMLInputElement).value;
-  }
 
-  click() {
-    this.urlService.publish(this.variable, this.value).subscribe((x)=>console.log)
+  click(value: string) {
+    this.urlService.publish(this.variable, value).subscribe((x)=>console.log)
   }
 }
diff --git a/frontend/src/app/url.service.ts b/frontend/src/app/url.service.ts
index 58514a9..14d49a6 100644
--- a/frontend/src/app/url.service.ts
+++ b/frontend/src/app/url.service.ts
@@ -6,10 +6,11 @@ import { HttpClient } from '@angular/common/http';
 })
 export class UrlService {
 
-  url:string = "https://asyncunitycore.multiplayertournamentonline.fr/"
+  url:string = "https://sgj2024.multiplayertournamentonline.fr/"
   constructor(private http: HttpClient) { }
 
   public publish(id: string |undefined, value: string|undefined) {
-    return this.http.post(this.url+id+"/publish", {message: value})
+    //return this.http.post(this.url+id+"/publish", {message: value})
+    return this.http.post(this.url+"publish", {message: value})
   }
 }
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 90d4ee0..c34b004 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #1a237e; /* Fond sobre */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
\ No newline at end of file