diff --git a/src/app/components/creator/_dialogs/moderators/moderators.ts b/src/app/components/creator/_dialogs/moderators/moderators.component.ts
similarity index 100%
rename from src/app/components/creator/_dialogs/moderators/moderators.ts
rename to src/app/components/creator/_dialogs/moderators/moderators.component.ts
diff --git a/src/app/components/creator/creator.module.ts b/src/app/components/creator/creator.module.ts
index 23bd007379aff117db79cbfdfa886e0f333126df..f7296a626e7a8cecb3b2daeb76ee233a6253ed37 100644
--- a/src/app/components/creator/creator.module.ts
+++ b/src/app/components/creator/creator.module.ts
@@ -22,7 +22,7 @@ import { ContentListComponent } from './content-list/content-list.component';
 import { ContentEditComponent } from './_dialogs/content-edit/content-edit.component';
 import { ContentPresentationComponent } from './content-presentation/content-presentation.component';
 import { CommentExportComponent } from './_dialogs/comment-export/comment-export.component';
-import { ModeratorsComponent } from './_dialogs/moderators/moderators';
+import { ModeratorsComponent } from './_dialogs/moderators/moderators.component';
 
 @NgModule({
   imports: [
@@ -66,7 +66,8 @@ import { ModeratorsComponent } from './_dialogs/moderators/moderators';
     ContentTextCreatorComponent,
     ContentYesNoCreatorComponent,
     ContentEditComponent,
-    CommentExportComponent
+    CommentExportComponent,
+    ModeratorsComponent
   ]
 })
 export class CreatorModule {
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 88705ee739d3c75b30e471df0e061f5aaad79e59..b0be0f809e12cc17306580e850cafa1a58677976 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
@@ -15,7 +15,7 @@
           </mat-card-subtitle>
         </mat-card-header>
         <span class="fill-remaining-space"></span>
-        <button mat-icon-button class="corner-icons" id="person" (click)="showModeratorsDialog()">
+        <button mat-icon-button class="corner-icons" (click)="showModeratorsDialog()">
           <mat-icon class="corner-icon" id="moderators-icon" matTooltip="{{ 'room-page.moderators' | translate}}">person</mat-icon>
         </button>
         <button mat-icon-button class="corner-icons" id="settings" (click)="showSettingsDialog()">
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 cea5d05ebd281c96d7dc95a8397bcba1908ff88e..dcbe662df0fb33a07018feea8acf95a8e313024c 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
@@ -36,11 +36,10 @@ button {
   margin-bottom: 5%;
 }
 
-
-  .corner-icons {
-    width: 10%;
-    max-width: 40px;
-  }
+.corner-icons {
+  width: 10%;
+  max-width: 40px;
+}
 
 .corner-icon {
   font-size: 35px;
diff --git a/src/app/components/creator/room-creator-page/room-creator-page.component.ts b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
index 5f9621c6ea6a6c392af4d66464327bc1cc35483d..b1f5c8cf3007f73bca2a94d177e9ff8df586c99e 100644
--- a/src/app/components/creator/room-creator-page/room-creator-page.component.ts
+++ b/src/app/components/creator/room-creator-page/room-creator-page.component.ts
@@ -12,6 +12,7 @@ import { LanguageService } from '../../../services/util/language.service';
 import { TSMap } from 'typescript-map';
 import { WsCommentServiceService } from '../../../services/websockets/ws-comment-service.service';
 import { CommentService } from '../../../services/http/comment.service';
+import { ModeratorsComponent } from '../_dialogs/moderators/moderators.component';
 
 @Component({
   selector: 'app-room-creator-page',
@@ -84,7 +85,9 @@ export class RoomCreatorPageComponent extends RoomPageComponent implements OnIni
   }
 
   showModeratorsDialog(): void {
-
+    const dialogRef = this.dialog.open(ModeratorsComponent, {
+      width: '400px'
+    });
   }
 }
 
diff --git a/src/app/components/shared/room-join/room-join.component.ts b/src/app/components/shared/room-join/room-join.component.ts
index e6aa51ee553dcf4adfdabdfcc9fcafae583aa021..6a449581d2ac7db35fff94aa3597bb75d7748a53 100644
--- a/src/app/components/shared/room-join/room-join.component.ts
+++ b/src/app/components/shared/room-join/room-join.component.ts
@@ -62,7 +62,6 @@ export class RoomJoinComponent implements OnInit {
           if (!this.user) {
             this.guestLogin();
           } else {
-            console.log(room);
             if (this.user.role === UserRole.CREATOR) {
               this.authenticationService.logout();
               this.guestLogin();
diff --git a/src/app/services/http/moderator.service.ts b/src/app/services/http/moderator.service.ts
index 47c7700baf49bd8c38cf628fb43a98f766c546b4..86f0eadbe7ba0808082c3cee7caf7b49a583ccce 100644
--- a/src/app/services/http/moderator.service.ts
+++ b/src/app/services/http/moderator.service.ts
@@ -30,11 +30,11 @@ export class ModeratorService extends BaseHttpService {
     );
   }
 
-  put(roomId: string, userId: string) {
+  add(roomId: string, userId: string) {
     const url = `${this.apiUrl.base + this.apiUrl.room}/${roomId + this.apiUrl.moderator}/${userId}`;
     return this.http.put(url, httpOptions).pipe(
       tap(_ => ''),
-      catchError(this.handleError<any>('putModerator'))
+      catchError(this.handleError<any>('addModerator'))
     );
   }