diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 74e04df..ce31cc4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
 
 
 import { LoginComponent } from './login/login.component';
@@ -60,7 +61,8 @@ import { AlertService, AuthenticationService, UserService } from './_services/in
     MatButtonModule,
     MatInputModule,
     MatPaginatorModule,
-    MatFormFieldModule
+    MatFormFieldModule,
+    MatSelectModule
   ],
   providers: [
     GamesService,
diff --git a/src/app/view-card/view-card.component.css b/src/app/view-card/view-card.component.css
index 3745a9e..599b749 100644
--- a/src/app/view-card/view-card.component.css
+++ b/src/app/view-card/view-card.component.css
@@ -1,4 +1,62 @@
 #gameImageHeaderContainer{
 	height:250px;
 	overflow: hidden;
-}
\ No newline at end of file
+}
+
+.lrCard{
+  width:80%;
+}
+
+.card{
+  height: 280px;
+  width: 250px;
+  margin: 5px;
+}
+
+.flex-container {
+  display: flex;
+  height: auto;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-fill-remaining-space {
+  /* This fills the remaining space, by using flexbox. 
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}
+
+.menuButton{
+  margin-right: 10px;
+}
+
+.userButton{
+
+}
+.userButton img{
+  width:35px;
+  height:35px;
+  border-radius: 50%;
+}
+
+.gameSearchInput{
+  margin-left:25px;
+  border: 0;
+  border-radius: 4px;
+  color: #555;
+  font-size: 16px;
+  font-weight: 600;
+  height: 50%;
+  line-height: 20px;
+  outline: none;
+  padding: 0 0 0 15px;
+  width: 80%;
+}
+
+.app-toolbar {
+    position: sticky;
+    position: -webkit-sticky; /* For macOS/iOS Safari */
+    top: 0; /* Sets the sticky toolbar to be on top */
+    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
+}
diff --git a/src/app/view-card/view-card.component.html b/src/app/view-card/view-card.component.html
index 7aaa623..9ddd089 100644
--- a/src/app/view-card/view-card.component.html
+++ b/src/app/view-card/view-card.component.html
@@ -1,5 +1,39 @@
+<mat-toolbar color="primary" class="app-toolbar">
+	<mat-icon >videogame_asset</mat-icon>
+
+
+	<span class="example-fill-remaining-space"></span>
+
+
+	<button class="mat-button userButton" mat-button >
+		<img src="https://i.pinimg.com/280x280_RS/88/42/df/8842df04cd938aa654c865742253c276.jpg" >&nbsp;<span *ngIf="isEmptyObject(currentUser)">{{currentUser.username}}</span>
+  	</button>
+  	
+
+  	<button class="menuButton" mat-button routerLink="/view-card">New Game</button>
+
+	<mat-menu #settingsMenu="matMenu">
+		<button mat-menu-item>Settings</button>
+		<button mat-menu-item>Help</button>
+		<button mat-menu-item (click)="logOut()">Log out</button>
+	</mat-menu>
+
+	<button class="mat-icon-button" mat-icon-button [matMenuTriggerFor]="settingsMenu">
+		<mat-icon>menu</mat-icon>
+	</button>
+
+</mat-toolbar>
+
+
+
 <div *ngIf="isEmptyObject(form)">
 
+	<div class="lrContainer">
+		<mat-card class="lrCard">
+
+
+			<div class="flex-container" >
+<div class="card">
 	<div class="row">
 		<div class="col-sm-12" id="gameImageHeaderContainer">
 			<img class="card-img-top" [src]="imageSample" alt="">
@@ -8,11 +42,11 @@
 		</div>
 	</div>
 
+</div>
+<div class="card">
+	<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" class="flex-container"  >
 
-
-	<form novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form" >
-
-
+<div class="card">
 		<div id='Row_Title' class="form-group field-wrapper">
 			<label [attr.for]="'Title'" class="control-label col-sm-3 isInputLabel">
 					Title
@@ -20,7 +54,8 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+						<mat-form-field class="fullWidth">
+						<input matInput class="form-control"
 							[formControlName]="'Title'"
 							[id]="'Title'"
 							[type]="'text'"
@@ -28,7 +63,7 @@
 						<div class="invalidEntryContainer">
 							<span *ngIf="(form.get('Title').dirty || form.get('Title').touched) && form.get('Title').invalid" >This field is required</span>
 						</div>
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -41,12 +76,14 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+												<mat-form-field class="fullWidth">
+
+						<input matInput class="form-control"
 							[formControlName]="'Description'"
 							[id]="'Description'"
 							[type]="'text'"
 							[name]="'Description'">
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -59,12 +96,14 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+												<mat-form-field class="fullWidth">
+
+						<input matInput class="form-control"
 							[formControlName]="'Developer'"
 							[id]="'Developer'"
 							[type]="'text'"
 							[name]="'Developer'">
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -77,12 +116,14 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+												<mat-form-field class="fullWidth">
+
+						<input matInput class="form-control"
 							[formControlName]="'Publisher'"
 							[id]="'Publisher'"
 							[type]="'text'"
 							[name]="'Publisher'">
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -95,14 +136,16 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+												<mat-form-field class="fullWidth">
+
+						<input matInput matInput class="form-control"
 							[formControlName]="'Art'"
 							[id]="'Art'"
 							[type]="'text'"
 							[name]="'Art'">
 
 						<input type="file" [name]="'fileToUpload'" (change)="handleFileInput($event)">
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -115,17 +158,20 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-						<input class="form-control"
+												<mat-form-field class="fullWidth">
+
+						<input matInput matInput class="form-control"
 							[formControlName]="'Year'"
 							[id]="'Year'"
 							[type]="'text'"
 							[name]="'Year'">
-
+</mat-form-field>
 					</div>
 				</div>
 			</div>
 		</div>
-
+</div>
+<div class="card">
 		<div id='Row_Genre' class="form-group field-wrapper">
 			<label [attr.for]="'Genre'" class="control-label col-sm-3 isInputLabel">
 					Genre
@@ -133,27 +179,26 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="Genre"
 							[formControlName]="'Genre'"
-							[id]="'Genre'"
-							[name]="'Genre'">
+							[id]="'Genre'">
 							
-							<option [value]="sports">sports</option>
-							<option [value]="platformer">platformer</option>
-							<option [value]="lightgun">lightgun</option>
-							<option [value]="fighter">fighter</option>
-							<option [value]="rpg">rpg</option>
-							<option [value]="strategy">strategy</option>
-							<option [value]="adventure">adventure</option>
-							<option [value]="racing">racing</option>
-							<option [value]="fps">fps</option>
-							<option [value]="action">action</option>
-							<option [value]="simulation">simulation</option>
-							<option [value]="card">card</option>
-
-						</select>
+							<mat-option [value]="sports">sports</mat-option>
+							<mat-option [value]="platformer">platformer</mat-option>
+							<mat-option [value]="lightgun">lightgun</mat-option>
+							<mat-option [value]="fighter">fighter</mat-option>
+							<mat-option [value]="rpg">rpg</mat-option>
+							<mat-option [value]="strategy">strategy</mat-option>
+							<mat-option [value]="adventure">adventure</mat-option>
+							<mat-option [value]="racing">racing</mat-option>
+							<mat-option [value]="fps">fps</mat-option>
+							<mat-option [value]="action">action</mat-option>
+							<mat-option [value]="simulation">simulation</mat-option>
+							<mat-option [value]="card">card</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -166,27 +211,27 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="System"
 							[formControlName]="'System'"
 							[id]="'System'"
-							[name]="'System'">
+							>
 							
-							<option [value]="SNES">SNES</option>
-							<option [value]="N64">N64</option>
-							<option [value]="PS1">PS1</option>
-							<option [value]="PS2">PS2</option>
-							<option [value]="GB">GB</option>
-							<option [value]="GBA">GBA</option>
-							<option [value]="DS">DS</option>
-							<option [value]="NES">NES</option>
-							<option [value]="GC">GC</option>
-							<option [value]="PSP">PSP</option>
-							<option [value]="360">360</option>
-							<option [value]="WII">WII</option>
-
-						</select>
+							<mat-option [value]="SNES">SNES</mat-option>
+							<mat-option [value]="N64">N64</mat-option>
+							<mat-option [value]="PS1">PS1</mat-option>
+							<mat-option [value]="PS2">PS2</mat-option>
+							<mat-option [value]="GB">GB</mat-option>
+							<mat-option [value]="GBA">GBA</mat-option>
+							<mat-option [value]="DS">DS</mat-option>
+							<mat-option [value]="NES">NES</mat-option>
+							<mat-option [value]="GC">GC</mat-option>
+							<mat-option [value]="PSP">PSP</mat-option>
+							<mat-option [value]="360">360</mat-option>
+							<mat-option [value]="WII">WII</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -199,17 +244,16 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="Own"
 							[formControlName]="'Own'"
-							[id]="'Own'"
-							[name]="'Own'">
+							[id]="'Own'">
 							
-							<option [value]="0">No</option>
-							<option [value]="1">Yes</option>
-
-						</select>
+							<mat-option [value]="0">No</mat-option>
+							<mat-option [value]="1">Yes</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -222,17 +266,16 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="Dumped"
 							[formControlName]="'Dumped'"
-							[id]="'Dumped'"
-							[name]="'Dumped'">
+							[id]="'Dumped'">
 							
-							<option [value]="0">No</option>
-							<option [value]="1">Yes</option>
-
-						</select>
+							<mat-option [value]="0">No</mat-option>
+							<mat-option [value]="1">Yes</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -245,17 +288,16 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="Played"
 							[formControlName]="'Played'"
-							[id]="'Played'"
-							[name]="'Played'">
+							[id]="'Played'">
 							
-							<option [value]="0">No</option>
-							<option [value]="1">Yes</option>
-
-						</select>
+							<mat-option [value]="0">No</mat-option>
+							<mat-option [value]="1">Yes</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
@@ -268,23 +310,22 @@
 			<div class="col-sm-9 isInputElement">
 				<div class="row">
 					<div class="col-md-8 isInputElement">
-
-						<select class="form-control"
+<mat-form-field>
+						<mat-select class="form-control" name="Finished"
 							[formControlName]="'Finished'"
-							[id]="'Finished'"
-							[name]="'Finished'">
+							[id]="'Finished'">
 							
-							<option [value]="0">No</option>
-							<option [value]="1">Yes</option>
-
-						</select>
+							<mat-option [value]="0">No</mat-option>
+							<mat-option [value]="1">Yes</mat-option>
 
+						</mat-select>
+</mat-form-field>
 					</div>
 				</div>
 			</div>
 		</div>
 
-			
+			</div>
 
 
 		<br />
@@ -292,17 +333,17 @@
 		<div class="buttonArea">
 			<div class="row">
 				<div class="col-sm-5 col-sm-push-7 buttonHolder text-center">
-					<button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid">
+					<button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" routerLink="/game-grid">
 						Cancel Changes
 					</button>
 				</div>
 				<div class="col-sm-2">
-					<button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" >
+					<button mat-button class="btn btn-primary btn-lg addMarginTop btn-landing" (click)="removeGame()" >
 						Remove Game
 					</button>
 				</div>
 				<div class="col-sm-5 col-sm-pull-7 buttonHolder text-center">
-					<input type="submit" class="btn btn-primary btn-lg" name="btnContinue" id="btnContinue" value="Submit Changes" [disabled]="!form.valid" />
+					<button mat-raised-button color="primary" type="submit"  [disabled]="!form.valid" >Submit Changes</button>
 				</div>
 			</div>
 		</div>
@@ -310,6 +351,12 @@
 		<br />
 
 	</form>
+</div>
+</div>
+
+</mat-card>
+
+</div>
 
 
 	<hr />