diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
index 27afbf3..5618a57 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts
@@ -1,5 +1,6 @@
 import { RouterModule, Routes } from '@angular/router';
 import { SelectRoleComponent } from './app/components/select-role/select-role.component';
+import { SignInComponent } from './app/components/sign-in/sign-in.component';
 
 const routes: Routes = [
   {
@@ -7,6 +8,11 @@ const routes: Routes = [
     component: SelectRoleComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'login',
+    component: SignInComponent,
+    pathMatch: 'full'
+  },
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
index b5176ce..518f9cc 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts
@@ -8,14 +8,16 @@ import { appRoutingModule } from '../app.routing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { SignInComponent } from './components/sign-in/sign-in.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SelectRoleComponent,
+    SignInComponent
   ],
   imports: [
-  BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
     HttpClientModule,
     FormsModule,
     appRoutingModule,
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html
index 47b866b..97f14c4 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.html
@@ -1,4 +1,4 @@
 <div class="container font">
-  <button id="player-button" class="button font">Player</button>
-  <button id="game-master-button" class="button font">Game Master</button>
+  <button (click)="SignInWithRole()" id="player-button" class="button font">Player</button>
+  <button (click)="SignInWithRole()" id="game-master-button" class="button font">Game Master</button>
 </div>
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts
index eecb8d0..6ccd92c 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts
@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { SignInComponent } from './../sign-in/sign-in.component';
 
 @Component({
   selector: 'app-select-role',
@@ -8,10 +10,16 @@ import { Component } from '@angular/core';
 export class SelectRoleComponent {
   isExpanded = false;
 
+  constructor(private router: Router) {}
+  
   collapse() {
     this.isExpanded = false;
   }
 
+  SignInWithRole() {
+    this.router.navigate(['login'])
+  }
+
   toggle() {
     this.isExpanded = !this.isExpanded;
   }
diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
index e69de29..2b2ebb2 100644
--- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
+++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html
@@ -0,0 +1 @@
+<p>Sign in</p>
\ No newline at end of file
diff --git a/SessionCompanion/SessionCompanion/package-lock.json b/SessionCompanion/SessionCompanion/package-lock.json
new file mode 100644
index 0000000..cf7dd80
--- /dev/null
+++ b/SessionCompanion/SessionCompanion/package-lock.json
@@ -0,0 +1,19 @@
+{
+  "requires": true,
+  "lockfileVersion": 1,
+  "dependencies": {
+    "@ngrx/store": {
+      "version": "10.1.0",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/@ngrx/store/-/store-10.1.0.tgz",
+      "integrity": "sha1-N5qjhUP//T5ByoYiQ0oXH+cO1vg=",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "tslib": {
+      "version": "2.0.3",
+      "resolved": "https://artifactory.platform.vwfs.io/artifactory/api/npm/vwfs-du-cp-npm-virtual/tslib/-/tslib-2.0.3.tgz",
+      "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+    }
+  }
+}