diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index 5333b16..04adc3f 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -62,7 +62,7 @@
       <button
         class="button-join"
         type="button"
-        (click)="onRunButtonClicked()"
+        (click)="onCreateRoomButtonClicked()"
         [disabled]="isLoaded">
         Créer une salle
       </button>
diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss
index 3e19580..754bc49 100644
--- a/src/app/components/editor/editor.component.scss
+++ b/src/app/components/editor/editor.component.scss
@@ -46,7 +46,6 @@ svg {
   color: white;
   padding: 12px 16px;
   font-size: 16px;
-  width: 100px;
   cursor: pointer;
   border-radius: 10px;
 }
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index b74061c..ce32fd2 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -1,11 +1,12 @@
 import { Component, Input, ViewChild } from '@angular/core';
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
+import { BackendService } from 'src/app/services/backendService.service';
 import { Compartment, StateEffect } from '@codemirror/state';
 import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
 import { LanguageDescription } from '@codemirror/language';
 import { CODE_DEFAULTS, LANGUAGES } from '../languages';
 import { SafeHTMLPipe } from '../../safe-html.pipe';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
 import {
   keymap,
   highlightSpecialChars,
@@ -157,13 +158,22 @@ export class EditorComponent {
     });
   }
 
-  constructor(private codeExecutionService: CodeExecutionService) {}
+  constructor(
+    private router: Router,
+    private codeExecutionService: BackendService
+  ) {}
 
   // Efface le contenu de l'éditeur
   clear(): void {
     this.editorContent = '';
   }
 
+  async onCreateRoomButtonClicked() {
+    const idRoom = await this.codeExecutionService.createRoom();
+    console.log(idRoom);
+    this.router.navigate([`./editor-live/${idRoom}`]);
+  }
+
   onRunButtonClicked() {
     // Le code à exécuter est le contenu de l'éditeur
     const codeToExecute = this.editorContent;
diff --git a/src/app/services/codeExecution.service.ts b/src/app/services/backendService.service.ts
similarity index 81%
rename from src/app/services/codeExecution.service.ts
rename to src/app/services/backendService.service.ts
index 3d57318..052b580 100644
--- a/src/app/services/codeExecution.service.ts
+++ b/src/app/services/backendService.service.ts
@@ -10,14 +10,19 @@ export type ExecutionMessage = {
 @Injectable({
   providedIn: 'root',
 })
-export class CodeExecutionService {
-  private apiUrl = 'http://localhost:3000/run';
+export class BackendService {
+  private apiUrl = 'http://localhost:3000';
   private resultSubject = new Subject<ExecutionMessage>();
 
   constructor() {}
 
+  async createRoom() {
+    const reponse = await fetch(this.apiUrl + '/live');
+    return reponse.text();
+  }
+
   executeCode(code: string, language: string) {
-    const sse = new SSE(this.apiUrl, {
+    const sse = new SSE(this.apiUrl + '/run', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',