diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdButtonModule, MdCheckboxModule } from '@angular/material';
+import { MdToolbarModule, MdSidenavModule, MdButtonModule, MdCheckboxModule, MdIconModule, MdSlideToggleModule } from '@angular/material';
 
 import { AppComponent } from './app.component';
 
@@ -16,7 +16,7 @@ import { DeedsService } from './deeds.service'
     BrowserModule,
     HttpModule,
     BrowserAnimationsModule,
-    MdButtonModule, MdCheckboxModule
+    MdToolbarModule, MdSidenavModule, MdButtonModule, MdCheckboxModule, MdIconModule, MdSlideToggleModule
   ],
   providers: [
     DeedsService

diff --git a/src/app/deeds.service.ts b/src/app/deeds.service.ts
@@ -5,11 +5,12 @@ import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/do';
 
-import { IDeed } from './app.models'
+import { IDeed, IStartingDeed } from './app.models'
 
 @Injectable()
 export class DeedsService {
-    private _deedJsonUrl: string = './assets/deedsdump.json'
+    private _deedJsonUrl: string = './assets/deedsdump.json';
+    private _startingDeedsJsonUrl: string = './assets/startingdeeds.json';
 
     constructor(private _http: Http) { }
 
@@ -20,6 +21,13 @@ export class DeedsService {
             .catch(this.handleError)
     }
 
+    getStartingDeeds(): Observable<IStartingDeed[]> {
+        return this._http.get(this._startingDeedsJsonUrl)
+            .map((response: Response) => <IStartingDeed[]>response.json())
+            .do(data => console.log('Starting Deeds: ', data))
+            .catch(this.handleError)
+    }
+
     private handleError(error: Response) {
         // in a real world app, we may send the server to some remote logging infrastructure
         // instead of just logging it to the console

diff --git a/src/assets/deeppurple-amber.css b/src/assets/deeppurple-amber.css
diff --git a/src/assets/startingdeeds.json b/src/assets/startingdeeds.json
@@ -0,0 +1,47 @@
+[
+    {
+        "Name": "Summerholt",
+        "X": 6603,
+        "Y": -2250
+    },
+    {
+        "Name": "Glasshollow",
+        "X": 1579,
+        "Y": -772
+    },
+    {
+        "Name": "Lormere",
+        "X": 3481,
+        "Y": -6414
+    },
+    {
+        "Name": "Whitefay",
+        "X": 5650,
+        "Y": -3050
+    },
+    {
+        "Name": "Greymead",
+        "X": 4700,
+        "Y": -3049
+    },
+    {
+        "Name": "Vrock Landing",
+        "X": 2721,
+        "Y": -2196
+    },
+    {
+        "Name": "Linton",
+        "X": 1824,
+        "Y": -4121
+    },
+    {
+        "Name": "Newspring",
+        "X": 883,
+        "Y": -7228
+    },
+    {
+        "Name": "Esteron",
+        "X": 7409,
+        "Y": -6421
+    }
+]
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.css" type="text/css">
-  <link href="assets/deeppurple-amber.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.8.2/ol.min.js" type="text/javascript"></script>
 

diff --git a/src/styles.css b/src/styles.css
@@ -1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+.header-icon {
+  padding: 0 14px;
+}
+
+.example-spacer {
+  flex: 1 1 auto;
+}