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 b035a52b9779c863ee39bc9cbe13136f405300cc..4e26bcf232b0f24972cd1214a67ac69a06c8d9f2 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
@@ -2,7 +2,7 @@
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
     <mat-card *ngIf="room">
-      <mat-card-header>
+      <mat-card-header fxLayoutAlign="center">
         <mat-card-title>
           <h3 class="subheading-2">{{ room.name }}</h3>
         </mat-card-title>
@@ -13,36 +13,52 @@
         </mat-card-subtitle>
       </mat-card-header>
       <mat-divider></mat-divider>
-      <mat-card-content>
+      <mat-card-content fxLayoutAlign="center">
         <p>
           {{ room.description }}
         </p>
       </mat-card-content>
       <mat-divider></mat-divider>
-      <mat-card-actions>
-        <button mat-button color="primary" background-color="accent"
+      <mat-grid-list cols="3" rowHeight="2:1">
+        <mat-grid-tile colspan="1" rowspan="1">
+        <button mat-icon-button color="primary" matTooltip="{{ 'room-page.create-content' | translate}}"
                 routerLink="/creator/room/{{ room.shortId }}/create-content">
-          {{ 'room-page.create-content' | translate }}
+          <mat-icon>note_add</mat-icon>
         </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/comments">
-          {{ 'room-page.comments' | translate }}
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.comments' | translate}}"
+                  routerLink="/creator/room/{{ room.shortId }}/comments">
+            <mat-icon>question_answer</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button *ngIf="!modify" (click)="showEditDialog()"  color="accent"
+                  matTooltip="{{ 'room-page.edit-room' | translate}}">
+            <mat-icon>create</mat-icon>
+          </button>
+        </mat-grid-tile>
+      </mat-grid-list>
+      <mat-grid-list cols="3" rowHeight="2:1">
+        <mat-grid-tile>
+         <button mat-icon-button color="primary" matTooltip="{{ 'room-page.answer-statistics' | translate}}"
+                 routerLink="/creator/room/{{ room.shortId }}/statistics">
+           <mat-icon>insert_chart</mat-icon>
+         </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.live-feedback' | translate}}"
+                  routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
+            <mat-icon>thumbs_up_down</mat-icon>
+          </button>
+        </mat-grid-tile>
+        <mat-grid-tile>
+        <button mat-icon-button color="warn" (click)="openDeletionRoomDialog()"
+                matTooltip="{{ 'room-page.delete-room' | translate}}">
+          <mat-icon>delete_forever</mat-icon>
         </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
-          {{ 'room-page.live-feedback' | translate }}
-        </button>
-        <button mat-button color="primary"
-                routerLink="/creator/room/{{ room.shortId }}/statistics">
-          {{ 'room-page.answer-statistics' | translate }}
-        </button>
-        <button mat-button *ngIf="!modify" (click)="showEditDialog()"  color="primary">
-          {{ 'room-page.edit-room' | translate }}
-        </button>
-        <button mat-button color="warn" (click)="openDeletionRoomDialog()">
-          {{ 'room-page.delete-room' | translate }}
-        </button>
-      </mat-card-actions>
+        </mat-grid-tile>
+      </mat-grid-list>
       <app-content-groups *ngIf="room && room.contentGroups" [contentGroups]="room.contentGroups"></app-content-groups>
     </mat-card>
     <div *ngIf="!isLoading && !room">Error: room could not be found!</div>
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 cee43eb1022836d4bef30d5d8411474f9019ee02..fca45c28b3ec4f460bf6f63dc67a386d834b4995 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,13 +1,23 @@
 mat-card {
   width: 800px;
+  background-color: #c8e6c9;
 }
 
 mat-card-content > :first-child {
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin-top: 5%;
+  margin-bottom: 5%;
 }
 
 button {
   margin: 5px;
   width: 30%;
+  &:hover {
+    transform: scale(1.25)
+  }
+}
+
+.mat-icon{
+  height:100% !important;
+  width:100% !important;
+  font-size:48px !important;
 }
diff --git a/src/app/components/shared/content-groups/content-groups.component.html b/src/app/components/shared/content-groups/content-groups.component.html
index 5cfe7f843159211b92e06214c21fe2667f964fee..76764e7da23e29279607db640783aa27b118ab7b 100644
--- a/src/app/components/shared/content-groups/content-groups.component.html
+++ b/src/app/components/shared/content-groups/content-groups.component.html
@@ -1,5 +1,4 @@
 <mat-card *ngFor="let contentGroup of contentGroups" (click)="viewContents(contentGroup)">
-  <mat-divider></mat-divider>
   <mat-card-header>
     <mat-card-title>
       <h4 *ngIf="!(contentGroup.name == 'Default')">{{contentGroup.name}}<mat-icon color="accent"
diff --git a/src/app/components/shared/content-groups/content-groups.component.scss b/src/app/components/shared/content-groups/content-groups.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..eab7ba16ae3e21c13c57937488ca78949485ec28 100644
--- a/src/app/components/shared/content-groups/content-groups.component.scss
+++ b/src/app/components/shared/content-groups/content-groups.component.scss
@@ -0,0 +1,20 @@
+@import '../../../../theme/_variables.scss';
+
+$light-amber: #bbdefb;
+
+.mat-card {
+  background-color: #fff8e1;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    position: relative;
+    top: 0;
+    text-align: center;
+    transition: all 0.25s;
+
+    &:hover {
+      cursor: pointer;
+      background-color: $light-amber;
+      top: -15px;
+      box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
+    }
+}