diff --git a/web/src/app/app-routing.module.ts b/web/src/app/app-routing.module.ts
index e052dfa8..36a33adc 100644
--- a/web/src/app/app-routing.module.ts
+++ b/web/src/app/app-routing.module.ts
@@ -4,6 +4,8 @@ import { AboutComponent } from './pages/about/about.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { WalletComponent } from './pages/wallet/wallet.component';
 import { DonateComponent } from './pages/donate/donate.component';
+import { HistoryComponent } from './pages/history/history.component';
+import { TradingComponent } from './pages/trading/trading.component';
 
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -33,6 +35,14 @@ const routes: Routes = [
     {
         path: 'donate',
         component: DonateComponent
+    },
+    {
+        path: 'history',
+        component: HistoryComponent
+    },
+    {
+        path: 'trading',
+        component: TradingComponent
     }
 
 ];
diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 68453880..849b01e6 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -12,7 +12,7 @@
         <h3>Wallet</h3>
       </mat-list-item>
       <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
-        <mat-icon>add_shopping_cart</mat-icon>&nbsp;
+        <mat-icon>swap_horiz</mat-icon>&nbsp;
         <h3>Trading</h3>
       </mat-list-item>
       <mat-list-item routerLink="history" routerLinkActive="history-highlight">
@@ -27,6 +27,7 @@
         <mat-icon>thumb_up</mat-icon>&nbsp;
         <h3>Donate</h3>
       </mat-list-item>
+      <mat-divider></mat-divider>
       <mat-list-item>
         <mat-icon>grade</mat-icon>&nbsp;
         <a href="https://github.com/thrasher-/gocryptotrader" target="_blank">
diff --git a/web/src/app/app.component.scss b/web/src/app/app.component.scss
index 6df782bd..ae2f8824 100644
--- a/web/src/app/app.component.scss
+++ b/web/src/app/app.component.scss
@@ -1,6 +1,6 @@
 .container {
-    min-height: 100vh;
-    height:100%;
+    height: 100vh;
+    min-height:100%;
 }
 
 .main {
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index 7bf57ff9..e59d770e 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -24,7 +24,8 @@ import {
   MatSortModule,
   MatExpansionModule,
   MatLineModule,
-  MatTooltipModule
+  MatTooltipModule,
+  MatTabsModule,
 } from '@angular/material';
 
 
@@ -62,6 +63,8 @@ import { MyOrdersComponent } from './shared/my-orders/my-orders.component';
 import { OrdersComponent } from './shared/orders/orders.component';
 import { BuySellComponent } from './shared/buy-sell/buy-sell.component';
 import { SelectedCurrencyComponent } from './shared/selected-currency/selected-currency.component';
+import { TradingComponent } from './pages/trading/trading.component';
+import { HistoryComponent } from './pages/history/history.component';
 
 
 @NgModule({
@@ -83,6 +86,8 @@ import { SelectedCurrencyComponent } from './shared/selected-currency/selected-c
     BuySellComponent,
     DonateComponent,
     SelectedCurrencyComponent,
+    TradingComponent,
+    HistoryComponent,
   ],
   imports: [
     BrowserModule,
@@ -106,6 +111,7 @@ import { SelectedCurrencyComponent } from './shared/selected-currency/selected-c
     MatExpansionModule,
     MatLineModule,
     MatTooltipModule,
+    MatTabsModule,
   ],
   providers: [
     ElectronService,
diff --git a/web/src/app/pages/dashboard/dashboard.component.html b/web/src/app/pages/dashboard/dashboard.component.html
index 2e22b349..309e3f03 100644
--- a/web/src/app/pages/dashboard/dashboard.component.html
+++ b/web/src/app/pages/dashboard/dashboard.component.html
@@ -1,6 +1,6 @@
 
 <button matTooltip="Trade" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >swap_horiz</mat-icon></button>
-
+<ng-template app-buy-sell></ng-template>
 <div style="width:97%;">
 <mat-grid-list cols="3" rowHeight="24rem">
     <mat-grid-tile [colspan]="tile.columns" [rowspan]="tile.rows" *ngFor="let tile of dashboard.tiles">
diff --git a/web/src/app/pages/dashboard/dashboard.component.ts b/web/src/app/pages/dashboard/dashboard.component.ts
index 488a04e5..22923aa9 100644
--- a/web/src/app/pages/dashboard/dashboard.component.ts
+++ b/web/src/app/pages/dashboard/dashboard.component.ts
@@ -1,5 +1,6 @@
 import {Component, OnInit }from '@angular/core'; 
 
+
 @Component( {
 selector:'app-dashboard', 
 templateUrl:'./dashboard.component.html', 
@@ -9,6 +10,7 @@ styleUrls:['./dashboard.component.scss'],
 export class DashboardComponent implements OnInit {
 public dashboard:any;
 public expanded:boolean = false;
+
 constructor() {
 }
 
diff --git a/web/src/app/pages/donate/donate.component.html b/web/src/app/pages/donate/donate.component.html
index 6308e679..90cd5da2 100644
--- a/web/src/app/pages/donate/donate.component.html
+++ b/web/src/app/pages/donate/donate.component.html
@@ -4,9 +4,7 @@
         <mat-card-subtitle>We give our thanks</mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
-        <div style="margin: 0px auto" >
-        <img src="/assets/early-dumb-donate.png"/>
-    </div>
+        <img class="heart" src="/assets/early-dumb-donate.png"/>
 <p>If this framework helped you in any way, or you would like to support the developers working on it, please donate</p>
 <mat-list>
     <mat-list-item >
diff --git a/web/src/app/pages/donate/donate.component.scss b/web/src/app/pages/donate/donate.component.scss
index 5dfe9673..13f14a65 100644
--- a/web/src/app/pages/donate/donate.component.scss
+++ b/web/src/app/pages/donate/donate.component.scss
@@ -3,6 +3,11 @@
 }
 
 .full-card {
-    width: 80%;
+    width: 30%;
     margin: 0px auto !important;
+}
+
+.heart {
+    margin: 0px auto !important;
+display:flex;    
 }
\ No newline at end of file
diff --git a/web/src/app/pages/history/history.component.html b/web/src/app/pages/history/history.component.html
new file mode 100644
index 00000000..c0470d21
--- /dev/null
+++ b/web/src/app/pages/history/history.component.html
@@ -0,0 +1,3 @@
+<p>
+  history works!
+</p>
diff --git a/web/src/app/pages/history/history.component.scss b/web/src/app/pages/history/history.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/web/src/app/pages/history/history.component.spec.ts b/web/src/app/pages/history/history.component.spec.ts
new file mode 100644
index 00000000..f68be4f2
--- /dev/null
+++ b/web/src/app/pages/history/history.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HistoryComponent } from './history.component';
+
+describe('HistoryComponent', () => {
+  let component: HistoryComponent;
+  let fixture: ComponentFixture<HistoryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HistoryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/pages/history/history.component.ts b/web/src/app/pages/history/history.component.ts
new file mode 100644
index 00000000..92c80aa8
--- /dev/null
+++ b/web/src/app/pages/history/history.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-history',
+  templateUrl: './history.component.html',
+  styleUrls: ['./history.component.scss']
+})
+export class HistoryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/web/src/app/pages/trading/trading.component.html b/web/src/app/pages/trading/trading.component.html
new file mode 100644
index 00000000..826064a5
--- /dev/null
+++ b/web/src/app/pages/trading/trading.component.html
@@ -0,0 +1,4 @@
+<p>
+  trading works!
+</p>
+<button matTooltip="Trade" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >swap_horiz</mat-icon></button>
diff --git a/web/src/app/pages/trading/trading.component.scss b/web/src/app/pages/trading/trading.component.scss
new file mode 100644
index 00000000..66903595
--- /dev/null
+++ b/web/src/app/pages/trading/trading.component.scss
@@ -0,0 +1,9 @@
+
+.mat-fab {
+    top: auto;
+    right: 30px;
+    bottom: 20px;
+    left: auto;
+    position: fixed;
+    z-index: 3;
+}
\ No newline at end of file
diff --git a/web/src/app/pages/trading/trading.component.spec.ts b/web/src/app/pages/trading/trading.component.spec.ts
new file mode 100644
index 00000000..da3ae01d
--- /dev/null
+++ b/web/src/app/pages/trading/trading.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TradingComponent } from './trading.component';
+
+describe('TradingComponent', () => {
+  let component: TradingComponent;
+  let fixture: ComponentFixture<TradingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TradingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TradingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/src/app/pages/trading/trading.component.ts b/web/src/app/pages/trading/trading.component.ts
new file mode 100644
index 00000000..446023a7
--- /dev/null
+++ b/web/src/app/pages/trading/trading.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-trading',
+  templateUrl: './trading.component.html',
+  styleUrls: ['./trading.component.scss']
+})
+export class TradingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/web/src/app/shared/buy-sell/buy-sell.component.html b/web/src/app/shared/buy-sell/buy-sell.component.html
index 40a5d1ef..a2e2fdc5 100644
--- a/web/src/app/shared/buy-sell/buy-sell.component.html
+++ b/web/src/app/shared/buy-sell/buy-sell.component.html
@@ -1,3 +1,16 @@
-<p>
-  buy-sell works!
-</p>
+<mat-tab-group>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      The <em>best</em> pasta
+    </ng-template>
+    <h1>Best pasta restaurants</h1>
+    <p>...</p>
+  </mat-tab>
+  <mat-tab>
+    <ng-template mat-tab-label>
+      <mat-icon>thumb_down</mat-icon> The worst sushi
+    </ng-template>
+    <h1>Terrible sushi restaurants</h1>
+    <p>...</p>
+  </mat-tab>
+</mat-tab-group>
\ No newline at end of file
diff --git a/web/src/app/shared/buy-sell/buy-sell.component.ts b/web/src/app/shared/buy-sell/buy-sell.component.ts
index c0b2e2af..e9d0bbd7 100644
--- a/web/src/app/shared/buy-sell/buy-sell.component.ts
+++ b/web/src/app/shared/buy-sell/buy-sell.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit,Directive, ViewContainerRef } from '@angular/core';
 
 @Component({
   selector: 'app-buy-sell',
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class BuySellComponent implements OnInit {
 
-  constructor() { }
+  constructor(public viewContainerRef: ViewContainerRef) { }
 
   ngOnInit() {
   }