diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 1dadae96..7954b234 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -1,6 +1,9 @@
 <app-navbar></app-navbar>
 
+<div class="sidebar"></div>
 
-
-
-<router-outlet></router-outlet>
+<div class="main">
+    <div class="main-content">
+        <router-outlet></router-outlet>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index 26efba42..03686ba3 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -1,31 +1,41 @@
 import 'zone.js/dist/zone-mix';
 import 'reflect-metadata';
 import 'polyfills';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MdFormFieldModule } from '@angular/material';
 
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpModule } from '@angular/http';
-import {Injectable} from '@angular/core';
+import { NgModule, Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 
+import {
+  MdButtonModule,
+  MdCardModule,
+  MdMenuModule,
+  MdToolbarModule,
+  MdIconModule,
+  MdFormFieldModule,
+  MdInputModule,
+  MdCheckboxModule,
+  MdGridListModule
+} from '@angular/material';
 
 
 import { AppComponent } from './app.component';
 import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
 import { NavbarComponent } from './shared/navbar/navbar.component';
-
-import { AppRoutingModule } from './app-routing.module';
+import { ChatbuttonComponent } from './shared/chatbutton/chatbutton.component';
+import { SettingsComponent } from './pages/settings/settings.component';
 
 import { WebsocketService } from './services/websocket/websocket.service';
 import { WebsocketHandlerService } from './services/websocket-handler/websocket-handler.service';
 import { ElectronService } from './providers/electron.service';
 
+import { AppRoutingModule } from './app-routing.module';
+
 import * as Rx from 'rxjs/Rx';
-import { ChatbuttonComponent } from './shared/chatbutton/chatbutton.component';
-import { SettingsComponent } from './pages/settings/settings.component';
+
 
 @NgModule({
   declarations: [
@@ -46,7 +56,11 @@ import { SettingsComponent } from './pages/settings/settings.component';
     MdMenuModule,
     MdCardModule,
     MdToolbarModule,
-    MdIconModule
+    MdIconModule,
+    MdFormFieldModule,
+    MdInputModule,
+    MdCheckboxModule,
+    MdGridListModule,
   ],
   providers: [ElectronService,WebsocketService,WebsocketHandlerService],
   bootstrap: [AppComponent]
diff --git a/web/src/app/pages/settings/settings.component.html b/web/src/app/pages/settings/settings.component.html
index 1caaf3cf..ec40997f 100644
--- a/web/src/app/pages/settings/settings.component.html
+++ b/web/src/app/pages/settings/settings.component.html
@@ -1,7 +1,91 @@
-<form class="example-form">
-  <md-form-field class="example-full-width">
-    <input mdInput placeholder="Favorite food" value="{{Settings?.Name}}">
-  </md-form-field>
-</form>
+<div *ngIf="settings !== null">
+    <form *ngIf="settings.SMSGlobal != null">
+        <md-card class="exchange-card">
+            <md-card-header>
+                <md-card-title>SMS Global Settings</md-card-title>
+            </md-card-header>
+            <md-card-content>
+                <table cellspacing="0">
+                    <tr>
+                        <td>
+                            <md-checkbox name="smsEnabled" [(ngModel)]="settings.SMSGlobal.Enabled">Enabled</md-checkbox>
+                        </td>
+                    </tr>
+                </table>
+                <md-grid-list cols="2" rowHeight="2:1">
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="smsUsername" [(ngModel)]="settings.SMSGlobal.Username" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Username">
+                        </md-form-field>
+                    </md-grid-tile>
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="smsPassword" [(ngModel)]="settings.SMSGlobal.Password" [disabled]="!settings?.SMSGlobal.Enabled" placeholder="Password">
+                        </md-form-field>
+                    </md-grid-tile>
+                </md-grid-list>
+                <md-grid-list cols="3" rowHeight="2:1" *ngFor="let contact of settings.SMSGlobal?.Contacts">
+                    <md-grid-tile>
+                        <md-checkbox name="contactEnabled" [(ngModel)]="contact.Enabled">Enabled</md-checkbox>
+                    </md-grid-tile>
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="contactUsername" [(ngModel)]="contact.Name" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Name">
+                        </md-form-field>
+                    </md-grid-tile>
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="contactPassword" [(ngModel)]="contact.Number" [disabled]="!settings.SMSGlobal.Enabled || !contact.Enabled" placeholder="Contact Number">
+                        </md-form-field>
+                    </md-grid-tile>
+                </md-grid-list>
+            </md-card-content>
+        </md-card>
+    </form>
 
-{{settings?.EncryptConfig}}
\ No newline at end of file
+    <form *ngFor="let exchange of settings?.Exchanges">
+        <md-card class="exchange-card">
+            <md-card-header>
+                <md-card-title>{{exchange.Name}} Exchange Settings</md-card-title>
+            </md-card-header>
+            <md-card-content>
+                <table cellspacing="0">
+                    <tr>
+                        <td>
+                            <md-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</md-checkbox>
+                        </td>
+                    </tr>
+                </table>
+                <md-grid-list cols="3" rowHeight="2:1">
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="Exchange API Key">
+                        </md-form-field>
+                    </md-grid-tile>
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="apiSecretKey" [(ngModel)]="exchange.APISecret" [disabled]="!exchange.Enabled" placeholder="Exchange API Secret Key">
+                        </md-form-field>
+                    </md-grid-tile>
+                    <md-grid-tile>
+                        <md-form-field>
+                            <input mdInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="Exchange API ClientID (optional)">
+                        </md-form-field>
+                    </md-grid-tile>
+                </md-grid-list>
+
+                <md-form-field>
+                    <input mdInput placeholder="Exchange Name" disabled value="Enabled Currencies">
+                </md-form-field>
+
+                <md-grid-list cols="5" rowHeight="2:1">
+                    <md-grid-tile *ngFor="let currency of exchange.AvailablePairs.split(',')">
+                        <md-checkbox name="availableCurrency" [disabled]="!exchange.Enabled">{{currency}}</md-checkbox>
+                    </md-grid-tile>
+                </md-grid-list>
+            </md-card-content>
+        </md-card>
+
+    </form>
+
+</div>
\ No newline at end of file
diff --git a/web/src/app/pages/settings/settings.component.scss b/web/src/app/pages/settings/settings.component.scss
index b475e51e..10c152e3 100644
--- a/web/src/app/pages/settings/settings.component.scss
+++ b/web/src/app/pages/settings/settings.component.scss
@@ -1,9 +1,13 @@
 .example-form {
-  min-width: 150px;
-  max-width: 500px;
-  width: 100%;
+    min-width: 150px;
+    width: 100%;
 }
 
 .example-full-width {
-  width: 100%;
+    width: 100%;
+}
+
+.exchange-card {
+    margin-bottom: 20px;
+    width: 1000px;
 }
\ No newline at end of file
diff --git a/web/src/app/pages/settings/settings.component.ts b/web/src/app/pages/settings/settings.component.ts
index 37a9841f..93555b23 100644
--- a/web/src/app/pages/settings/settings.component.ts
+++ b/web/src/app/pages/settings/settings.component.ts
@@ -1,6 +1,68 @@
 import { Component, OnInit } from '@angular/core';
 import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
 
+@Component({
+  selector: 'app-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+
+
+export class SettingsComponent implements OnInit {
+  private settings: RootObject = null;
+  private ws: WebsocketHandlerService;
+  private failCount = 0;
+  private timer: any;
+
+  private getSettingsMessage = {
+    Event: 'GetConfig',
+    data: null
+  };
+
+  constructor(private websocketHandler: WebsocketHandlerService) {
+    this.ws = websocketHandler;
+    this.ws.messages.subscribe(msg => {
+      if (msg.Event === 'GetConfig') {
+        console.log('Data:' + JSON.stringify(msg.data));
+        this.settings = <RootObject>msg.data;
+        this.fixUpSettings();
+      } else if (msg.Event === 'SaveConfig') {
+        // something!
+      }
+    });
+  }
+  ngOnInit() {
+    this.getSettings();
+  }
+
+  private getSettings(): void {
+    console.log('new message from client to websocket: ', this.getSettingsMessage);
+    this.ws.messages.next(this.getSettingsMessage);
+    this.resendMessageIfPageRefreshed();
+  }
+
+  private fixUpSettings(): void {
+
+  }
+
+
+  private resendMessageIfPageRefreshed(): void {
+    if (this.failCount <= 5) {
+      setTimeout(() => {
+      if (this.settings === null) {
+        console.log(this.failCount);
+          console.log('Settings hasnt been set. Trying again');
+          this.failCount++;
+          this.getSettings();
+        }
+      }, 1000);
+    } else {
+      // something has gone wrong
+      console.log('Could not load settings. Check if GocryptoTrader server is running, otherwise open a ticket');
+    }
+  }
+}
+
 
 export interface CurrencyPairFormat {
   Uppercase: boolean;
@@ -77,56 +139,3 @@ export interface RootObject {
 }
 
 
-@Component({
-  selector: 'app-settings',
-  templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.scss']
-})
-
-
-export class SettingsComponent implements OnInit {
-  private settings:RootObject = null;
-  private ws: WebsocketHandlerService;
-
-  constructor(private websocketHandler: WebsocketHandlerService) {
-    this.ws = websocketHandler;
-    this.ws.messages.subscribe(msg => {
-      if(msg.Event === "GetConfig") {
-        console.log("lol");
-        this.settings = <RootObject>msg.data;
-      } 
-      else if (msg.Event === "SaveConfig") {
-        //something!
-      } 
-    });
-  }
-
-  ngOnInit() {
-    this.getSettings();
-  }
-
-  private getSettingsMessage = {
-    Event:'GetConfig',
-    data:null
-  };
-
-  private getSettings():void {
-		console.log('new message from client to websocket: ', this.getSettingsMessage);
-    this.ws.messages.next(this.getSettingsMessage);
-    this.resendMessageIfPageRefreshed();
-  } 
-
-  private resendMessageIfPageRefreshed():void {
-    setInterval(()=> {
-      if(this.settings === null) {
-        console.log('Settings hasnt been set. Trying again');
-        this.getSettings();
-      }
-    }, 1000);
-  }
-
-  
-
-}
-
-
diff --git a/web/src/app/services/websocket-handler/websocket-handler.service.ts b/web/src/app/services/websocket-handler/websocket-handler.service.ts
index 7a142ee0..c8120dd6 100644
--- a/web/src/app/services/websocket-handler/websocket-handler.service.ts
+++ b/web/src/app/services/websocket-handler/websocket-handler.service.ts
@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs/Rx';
 import { WebsocketService } from './../../services/websocket/websocket.service';
-	 
 
 const WEBSOCKET_URL = 'ws://localhost:9050/ws';
 
@@ -12,18 +11,20 @@ export interface Message {
 
 @Injectable()
 export class WebsocketHandlerService {
-  public messages: Subject<Message>;
+	public messages: Subject<Message>;
 
-  constructor(wsService: WebsocketService) {
+	constructor(wsService: WebsocketService) {
 		this.messages = <Subject<Message>>wsService
 			.connect(WEBSOCKET_URL) 
 			.map((response: MessageEvent): Message => {
-        let data = JSON.parse(response.data);
-        console.log('Recieved response from websocket. Event: ' + data.Event)
+
+				let data = JSON.parse(response.data);
+				// debug only
+				// console.log('Recieved response from websocket. Event: ' + data.Event)
 				return {
 					Event: data.Event,
 					data: data.data,
 				}
-      });
-    }
-  }
\ No newline at end of file
+			});
+		}
+}
\ No newline at end of file
diff --git a/web/src/app/services/websocket/websocket.service.ts b/web/src/app/services/websocket/websocket.service.ts
index 55db8b53..7513b29c 100644
--- a/web/src/app/services/websocket/websocket.service.ts
+++ b/web/src/app/services/websocket/websocket.service.ts
@@ -16,7 +16,7 @@ export class WebsocketService {
 
   private authenticateMessage = {
     Event:'auth',
-    data:{"username":"Username","password":"e7cf3ef4f17c3999a94f2c6f612e8a888e5b1026878e4e19398b23bd38ec221a"},
+    data:{"username":"admin","password":"e7cf3ef4f17c3999a94f2c6f612e8a888e5b1026878e4e19398b23bd38ec221a"},
   }
 
   private isAuth = false;
diff --git a/web/src/index.html b/web/src/index.html
index a5c11d4f..25b7fac2 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -1,17 +1,20 @@
 <!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <title>GoCryptoTrader</title>
-  <base href="./">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+<head>
+    <meta charset="utf-8">
+    <title>GoCryptoTrader</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/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
 
 </head>
+
 <body class="mat-app-background">
-  <app-root>Loading...</app-root>
+    <app-root>Loading...</app-root>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/web/src/styles.scss b/web/src/styles.scss
index 1db4da0a..c33b3dae 100644
--- a/web/src/styles.scss
+++ b/web/src/styles.scss
@@ -1,8 +1,29 @@
 /* You can add global styles to this file, and also import other style files */
-html, body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
 }
 
-@import '~@angular/material/prebuilt-themes/purple-green.css';
+.main {
+    padding: 20px 70px 0;
+    display: block;
+    text-align: center;
+}
+
+.main-content {
+    display: inline-block;
+    text-align: left;
+    max-width: 940px;
+}
+
+@import '~@angular/material/prebuilt-themes/indigo-pink.css';
+
+/*
+deeppurple-amber.css
+indigo-pink.css
+pink-bluegrey.css
+purple-green.css
+*/
\ No newline at end of file