diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.html b/src/app/components/creator/room-creator-page/room-creator-page.component.html
index 4e26bcf232b0f24972cd1214a67ac69a06c8d9f2..766f70adf2f269e8f9d5f893b644797ba731947f 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.html
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.html
@@ -53,7 +53,7 @@
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-        <button mat-icon-button color="warn" (click)="openDeletionRoomDialog()"
+        <button mat-icon-button class="warn" (click)="openDeletionRoomDialog()"
                 matTooltip="{{ 'room-page.delete-room' | translate}}">
           <mat-icon>delete_forever</mat-icon>
         </button>
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.scss b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
index fca45c28b3ec4f460bf6f63dc67a386d834b4995..dc042e2929d389de597ff0b1588b82629e3dfac9 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.scss
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.scss
@@ -1,6 +1,8 @@
-mat-card {
+@import '../../../../styles';
+
+.mat-card {
   width: 800px;
-  background-color: #c8e6c9;
+  background-color: mat-color($arsnova-warn, 100);
 }
 
 mat-card-content > :first-child {
@@ -21,3 +23,7 @@ button {
   width:100% !important;
   font-size:48px !important;
 }
+
+.warn {
+  color: #ff8a80;
+}