diff --git a/src/app/creator-home-screen/creator-home-screen.component.scss b/src/app/creator-home-screen/creator-home-screen.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..e41d2f8e71267ae6bbf57136c28f1b516b0b9464 100644
--- a/src/app/creator-home-screen/creator-home-screen.component.scss
+++ b/src/app/creator-home-screen/creator-home-screen.component.scss
@@ -0,0 +1,4 @@
+app-room-list {
+  width: 100%;
+  max-width: 800px;
+}
diff --git a/src/app/room-list/room-list.component.html b/src/app/room-list/room-list.component.html
index 5c96b0160fa03bc126ea52648f8037ae6535a916..ceb78669607fbcf54d98e9c0cb812d37e3073c8a 100644
--- a/src/app/room-list/room-list.component.html
+++ b/src/app/room-list/room-list.component.html
@@ -1,8 +1,18 @@
-<mat-list>
-  <mat-list-item *ngFor="let room of rooms">
-    <button mat-button routerLink="room/{{room.id}}">
-      {{room.name}}
-    </button>
-  </mat-list-item>
-</mat-list>
-
+<mat-accordion>
+  <mat-expansion-panel *ngFor="let room of rooms">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        {{ room.shortId }}
+      </mat-panel-title>
+      <mat-panel-description>
+        {{ room.name }}
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+    <p>
+      {{ room.description }}
+    </p>
+    <mat-action-row>
+      <button mat-button routerLink="/room/{{ room.id }}">Join room</button>
+    </mat-action-row>
+  </mat-expansion-panel>
+</mat-accordion>