diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b150c3..b764544 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,6 @@
-import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
-import {HeaderComponent} from '@app/header/header.component';
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from '@app/header/header.component';
 
 import { NotificationBoxComponent } from './notification-box/notification-box.component';
 
@@ -11,4 +11,5 @@ import { NotificationBoxComponent } from './notification-box/notification-box.co
     styleUrl: './app.component.scss'
 })
 export class AppComponent {
+
 }
diff --git a/src/app/app.config.ts b/src/app/app.config.ts
index 869359e..942db50 100644
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -1,16 +1,17 @@
-import {provideHttpClient} from '@angular/common/http';
-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
-import {provideRouter} from '@angular/router';
-import {routes} from '@app/app.routes';
-import {OpenAPI} from '@core/ems/core/OpenAPI';
-import {LogLevel, provideAuth} from 'angular-auth-oidc-client';
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideRouter } from '@angular/router';
+import { routes } from '@app/app.routes';
+import { OpenAPI } from '@core/ems/core/OpenAPI';
+import { LogLevel, provideAuth } from 'angular-auth-oidc-client';
 
 OpenAPI.BASE = 'http://localhost:8080';
 
 export const appConfig: ApplicationConfig = {
     providers: [
-        provideZoneChangeDetection({eventCoalescing: true}),
+        provideZoneChangeDetection({ eventCoalescing: true }),
         provideAnimationsAsync(),
         provideRouter(routes),
         provideHttpClient(),
@@ -26,6 +27,7 @@ export const appConfig: ApplicationConfig = {
                 useRefreshToken: true,
                 logLevel: LogLevel.Error,
             },
-        })
+        }),
+        { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' } }
     ],
 };
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 087641c..467bc07 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,10 @@
-import {Routes} from '@angular/router';
-import {DashboardComponent} from '@app/views/dashboard/dashboard.component';
+import { Routes } from '@angular/router';
+import { DashboardComponent } from '@app/views/dashboard/dashboard.component';
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+import { EmployeeDetailComponent } from './views/employee-detail/employee-detail.component';
+
+export const routes: Routes = [
+    { path: '', component: DashboardComponent, title: 'Home' },
+    { path: 'employee/new', component: EmployeeDetailComponent, title: 'New Employee' },
+    { path: 'employee/:id', component: EmployeeDetailComponent, title: 'Edit Employee' }
+];
diff --git a/src/app/views/dashboard/dashboard.component.html b/src/app/views/dashboard/dashboard.component.html
index 2e49c07..04367cb 100644
--- a/src/app/views/dashboard/dashboard.component.html
+++ b/src/app/views/dashboard/dashboard.component.html
@@ -1,4 +1,5 @@
 <p>dashboard works!</p>
-
+<a href="/employee/new">New Employee</a>
+<a href="/employee/3">Edit Employee 3</a>
 <button mat-button (click)="testInfo()">Test Info</button>
 <button mat-button (click)="testError()">Test Error</button>
diff --git a/src/app/views/employee-detail/employee-detail.component.html b/src/app/views/employee-detail/employee-detail.component.html
new file mode 100644
index 0000000..cea9e62
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.html
@@ -0,0 +1,53 @@
+<form class="employee-detail" [formGroup]="employeeForm" appearance="outline">
+    <div class="employee-detail__info-view">
+        <div class="employee-detail__info-view__base">
+            <mat-form-field>
+                <mat-label>First Name</mat-label>
+                <input matInput formControlName="firstName">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Last Name</mat-label>
+                <input matInput formControlName="lastName">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Postcode</mat-label>
+                <mat-icon matSuffix>money</mat-icon>
+                <input matInput formControlName="postcode">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>City</mat-label>
+                <mat-icon matSuffix>location_city</mat-icon>
+                <input matInput formControlName="city">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Street</mat-label>
+                <mat-icon matSuffix>house</mat-icon>
+                <input matInput formControlName="street">
+            </mat-form-field>
+            <mat-form-field>
+                <mat-label>Phone</mat-label>
+                <mat-icon matSuffix>phone</mat-icon>
+                <input matInput formControlName="phone">
+            </mat-form-field>
+        </div>
+        <div class="employee-detail__info-view__qualifications"></div>
+        @if (isNewEmployee) {
+        <p>New Employee View Works</p>
+        }
+        @else {
+        @if ($employee|async;as employee) {
+        <code>{{employee}}</code>
+        }
+        }
+    </div>
+    <div class="employee-detail__action-row">
+        <button mat-flat-button (click)="onAbort()" class="abort">Abort</button>
+        @if (isNewEmployee) {
+        <button mat-flat-button (click)="onCreate()">Create</button>
+        }
+        @else {
+        <button mat-flat-button (click)="onSave()">Save</button>
+        }
+    </div>
+
+</form>
diff --git a/src/app/views/employee-detail/employee-detail.component.scss b/src/app/views/employee-detail/employee-detail.component.scss
new file mode 100644
index 0000000..757c94d
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.scss
@@ -0,0 +1,27 @@
+@use '@angular/material' as mat;
+
+.employee-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__info-view {
+    display: flex;
+    gap: 1rem;
+
+    >* {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+
+    &__base {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  &__action-row {
+    display: flex;
+    justify-content: space-between;
+  }
+}
diff --git a/src/app/views/employee-detail/employee-detail.component.ts b/src/app/views/employee-detail/employee-detail.component.ts
new file mode 100644
index 0000000..ecc7ae8
--- /dev/null
+++ b/src/app/views/employee-detail/employee-detail.component.ts
@@ -0,0 +1,55 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { MatButton } from '@angular/material/button';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInput } from '@angular/material/input';
+import { ActivatedRoute } from '@angular/router';
+import { Employee, EmployeeService } from '@core/ems';
+import { Observable, of } from 'rxjs';
+
+@Component({
+    selector: 'app-employee-detail',
+    imports: [AsyncPipe, MatButton, ReactiveFormsModule, MatFormField, MatLabel, MatInput, MatIcon, MatSuffix],
+    templateUrl: './employee-detail.component.html',
+    styleUrl: './employee-detail.component.scss'
+})
+export class EmployeeDetailComponent {
+    isNewEmployee: boolean;
+    employeeForm: FormGroup;
+    $employee: Observable<Employee | undefined> = of();
+    constructor(private route: ActivatedRoute, private employeeService: EmployeeService, private formBuilder: FormBuilder) {
+        const idParam = this.route.snapshot.paramMap.get('id');
+        this.isNewEmployee = idParam == null;
+
+        this.employeeForm = this.formBuilder.group<Employee>({
+            id: 0,
+            firstName: '',
+            lastName: '',
+            postcode: '',
+            city: '',
+            street: '',
+            phone: '',
+            skillSet: []
+        });
+        if (this.isNewEmployee) {
+            return;
+        }
+
+        const id = parseInt(idParam as string);
+        this.$employee = this.employeeService.getEmployee({ id });
+    }
+
+    onAbort() {
+
+    }
+
+    onCreate() {
+
+    }
+
+    onSave() {
+
+    }
+}
diff --git a/src/index.html b/src/index.html
index e479876..3f84408 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,15 +1,18 @@
 <!doctype html>
 <html lang="en">
+
 <head>
-  <meta charset="utf-8">
-  <title>A</title>
-  <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/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <meta charset="utf-8">
+    <title>A</title>
+    <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/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
+
 <body class="mat-typography">
-  <app-root></app-root>
+    <app-root></app-root>
 </body>
+
 </html>