diff --git a/angular.json b/angular.json
index a938fe5..2d6d5f3 100644
--- a/angular.json
+++ b/angular.json
@@ -126,4 +126,4 @@
       }
     }},
   "defaultProject": "vendor-app"
-}
\ No newline at end of file
+}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 06c7342..696a493 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,11 +1,21 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { LoginComponent } from './login/login.component';
 
-
-const routes: Routes = [];
+const routes: Routes = [
+	{
+		path: "",
+		redirectTo: "/login",
+		pathMatch: "full"
+	},
+	{
+		path: "login",
+		component: LoginComponent
+	},
+];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+	imports: [RouterModule.forRoot(routes)],
+	exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 385ab62..0cdde4a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,10 +3,12 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { LoginComponent } from './login/login.component';
 
 @NgModule({
 	declarations: [
-		AppComponent
+		AppComponent,
+		LoginComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
new file mode 100644
index 0000000..d4cc260
--- /dev/null
+++ b/src/app/login/login.component.html
@@ -0,0 +1,3 @@
+<div class="container">
+	<button class="rect-button" (click)="authenticateUser()"> Login </button>
+</div>
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
new file mode 100644
index 0000000..f6c9468
--- /dev/null
+++ b/src/app/login/login.component.scss
@@ -0,0 +1,11 @@
+.container {
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	button {
+		width: 100px;
+	}
+}
diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts
new file mode 100644
index 0000000..d6d85a8
--- /dev/null
+++ b/src/app/login/login.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
new file mode 100644
index 0000000..4f6b686
--- /dev/null
+++ b/src/app/login/login.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+	selector: 'app-login',
+	templateUrl: './login.component.html',
+	styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+	constructor(
+		public router: Router
+	) { }
+
+	ngOnInit() {
+	}
+
+	authenticateUser() {
+		this.router.navigate(['login']);
+	}
+
+}
diff --git a/src/app/services/auth.service.spec.ts b/src/app/services/auth.service.spec.ts
new file mode 100644
index 0000000..f3d964d
--- /dev/null
+++ b/src/app/services/auth.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthService = TestBed.get(AuthService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
new file mode 100644
index 0000000..af27fde
--- /dev/null
+++ b/src/app/services/auth.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor() { }
+}
diff --git a/src/index.html b/src/index.html
index ac678ff..813620a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
 		<base href="/">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="icon" type="image/x-icon" href="favicon.ico">
+		<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap" rel="stylesheet">
 	</head>
 
 	<body>
diff --git a/src/styles.scss b/src/styles.scss
index 90d4ee0..284927f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1 +1,39 @@
 /* You can add global styles to this file, and also import other style files */
+
+:root {
+  --brand-blue: #1881e5;
+  --background-blue: #f5f7fa;
+  --brand-grey: #9a9a9a;
+  --brand-black: #1b1d1e;
+  --brand-dark-grey: #666666;
+  --brand-yellow: #f79319;
+}
+
+
+* {
+	font-family: 'Roboto', sans-serif;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	outline: none;
+}
+
+a {
+	text-decoration: none;
+	cursor: pointer;
+}
+
+button {
+	cursor: pointer;
+}
+
+.rect-button {
+	border-radius: 5px;
+	background-color: var(--brand-blue);
+	color: white;
+	border: 0px;
+	height: 50px;
+	font-size: 16px;
+	padding: 0 15px;
+	letter-spacing: 0.5px;
+}