diff --git a/src/app/join-room/join-room.component.html b/src/app/join-room/join-room.component.html
index f95094982ae799814fde8312e4a776f49d748e7b..db4f112125a3983e37a3d173f894dda1c9565a84 100644
--- a/src/app/join-room/join-room.component.html
+++ b/src/app/join-room/join-room.component.html
@@ -2,9 +2,12 @@
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field class="input-block">
       <input matInput #roomId placeholder="Room-Id"/>
+
     </mat-form-field>
-    <button mat-fab color="primary" routerLink="room/{{ roomId.value }}">
+    <button mat-fab color="primary" (click)="joinRoom(roomId.value)">
       <mat-icon>send</mat-icon>
     </button>
   </div>
+  <mat-error *ngIf="!isExisting">Please enter a <strong>valid</strong> room-id.</mat-error>
+  <mat-error *ngIf="noInput">Please enter a room-id.</mat-error>
 </form>
diff --git a/src/app/join-room/join-room.component.ts b/src/app/join-room/join-room.component.ts
index ad5b3670d8225fe93f2eda9cedfb87477c1a3ac9..f06ff7649079857b837e9788779213ea45a207dc 100644
--- a/src/app/join-room/join-room.component.ts
+++ b/src/app/join-room/join-room.component.ts
@@ -1,15 +1,47 @@
 import { Component, OnInit } from '@angular/core';
+import { Room } from '../room';
+import { RoomService } from '../room.service';
+import { Router } from '@angular/router';
+import { NotificationService } from '../notification.service';
 
 @Component({
   selector: 'app-join-room',
   templateUrl: './join-room.component.html',
   styleUrls: ['./join-room.component.scss']
 })
+
 export class JoinRoomComponent implements OnInit {
 
-  constructor() { }
+  room: Room;
+  isExisting = true;
+  noInput = false;
+
+  constructor(private roomService: RoomService,
+              private router: Router,
+              private notificationService: NotificationService) {
+  }
 
   ngOnInit() {
+
   }
 
+  joinRoom(id: string): void {
+    if (id) {
+        this.roomService.getRoom(id)
+          .subscribe( room => {
+            this.room = room;
+            if (!room) {
+              this.isExisting = false;
+              this.noInput = false;
+              this.notificationService.show('Invalid room-id.');
+            } else {
+              this.router.navigate([`/participant/room/${this.room.id}`], { relativeTo: this.route });
+            }
+          });
+    } else {
+      this.noInput = true;
+      this.isExisting = true;
+      this.notificationService.show('No room-id entered.');
+    }
+  }
 }