diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index 2b2811bd..84310ac7 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -1,54 +1,51 @@
 <app-navbar class="navbar mat-elevation-z6"></app-navbar>
 
 <mat-sidenav-container class="container ">
-    <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
-        <mat-nav-list>
-            <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
-                <mat-icon>view_quilt</mat-icon>&nbsp;
-                <h3>Dashboard</h3>
-            </mat-list-item>
-            <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
-                <mat-icon>account_balance_wallet</mat-icon>&nbsp;
-                <h3>Wallet</h3>
-            </mat-list-item>
-            <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
-                <mat-icon>add_shopping_cart</mat-icon>&nbsp;
-                <h3>Trading</h3>
-            </mat-list-item>
-            <mat-list-item routerLink="history" routerLinkActive="history-highlight">
-                <mat-icon>history</mat-icon>&nbsp;
-                <h3>History</h3>
-            </mat-list-item>
-            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                <mat-icon>settings</mat-icon>&nbsp;
-                <h3>Settings</h3>
-            </mat-list-item>
-            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                    <mat-icon>thumb_up</mat-icon>&nbsp;
-                    <h3>Donate</h3>
-                </mat-list-item>
-            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                <mat-icon>grade</mat-icon>&nbsp;
-                <a href="https://github.com/thrasher-/gocryptotrader" target="_blank">
-                    <h3>GitHub</h3>
-                </a>
-            </mat-list-item>
-            <mat-list-item >
-                <mat-icon>view_agenda</mat-icon>&nbsp;
-                <a href="https://trello.com/b/ZAhMhpOy/gocryptotrader" target="_blank">
-                <h3>Trello</h3>
-            </a>
-            </mat-list-item>
-            <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
-                    <mat-icon>bug_report</mat-icon>&nbsp;
-                    <a href="https://github.com/thrasher-/gocryptotrader/issues/new" target="_blank">
-                        <h3>Report a bug</h3>
-    </a>
-</mat-list-item>
-
-        </mat-nav-list>
-       
-    </mat-sidenav>
-
-    <router-outlet class="main"></router-outlet>
-</mat-sidenav-container>
\ No newline at end of file
+  <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
+    <mat-nav-list>
+      <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">
+        <mat-icon>view_quilt</mat-icon>&nbsp;
+        <h3>Dashboard</h3>
+      </mat-list-item>
+      <mat-list-item routerLink="wallet" routerLinkActive="wallet-highlight">
+        <mat-icon>account_balance_wallet</mat-icon>&nbsp;
+        <h3>Wallet</h3>
+      </mat-list-item>
+      <mat-list-item routerLink="trading" routerLinkActive="trading-highlight">
+        <mat-icon>add_shopping_cart</mat-icon>&nbsp;
+        <h3>Trading</h3>
+      </mat-list-item>
+      <mat-list-item routerLink="history" routerLinkActive="history-highlight">
+        <mat-icon>history</mat-icon>&nbsp;
+        <h3>History</h3>
+      </mat-list-item>
+      <mat-list-item routerLink="settings" routerLinkActive="settings-highlight">
+        <mat-icon>settings</mat-icon>&nbsp;
+        <h3>Settings</h3>
+      </mat-list-item>
+      <mat-list-item routerLink="donate" routerLinkActive="donate-highlight">
+        <mat-icon>thumb_up</mat-icon>&nbsp;
+        <h3>Donate</h3>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon>grade</mat-icon>&nbsp;
+        <a href="https://github.com/thrasher-/gocryptotrader" target="_blank">
+          <h3>GitHub</h3>
+        </a>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon>view_agenda</mat-icon>&nbsp;
+        <a href="https://trello.com/b/ZAhMhpOy/gocryptotrader" target="_blank">
+          <h3>Trello</h3>
+        </a>
+      </mat-list-item>
+      <mat-list-item>
+        <mat-icon>bug_report</mat-icon>&nbsp;
+        <a href="https://github.com/thrasher-/gocryptotrader/issues/new" target="_blank">
+          <h3>Report a bug</h3>
+        </a>
+      </mat-list-item>
+    </mat-nav-list>
+  </mat-sidenav>
+  <router-outlet class="main"></router-outlet>
+</mat-sidenav-container>
diff --git a/web/src/app/pages/dashboard/dashboard.component.html b/web/src/app/pages/dashboard/dashboard.component.html
index 92996ea5..6aec9745 100644
--- a/web/src/app/pages/dashboard/dashboard.component.html
+++ b/web/src/app/pages/dashboard/dashboard.component.html
@@ -1,60 +1,17 @@
 <mat-grid-list cols="3" rowHeight="24rem">
-    <mat-grid-tile [colspan]="1" [rowspan]="2">
+    <mat-grid-tile [colspan]="tile.columns" [rowspan]="tile.rows" *ngFor="let tile of dashboard.tiles">
         <mat-card class="full-card">
             <mat-card-header>
-                <mat-card-title>Shiba Inu</mat-card-title>
-                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
+                <mat-card-title>{{tile.title}}</mat-card-title>
+                <mat-card-subtitle>{{tile.subTitle}}</mat-card-subtitle>
             </mat-card-header>
             <mat-card-content>
-                HI
+                {{tile.content}}
             </mat-card-content>
             <mat-card-footer>
-                <button mat-button>EXPAND</button>
+                <button *ngIf="!expanded" (click)="expandTile(tile)" mat-button>EXPAND</button>
+                <button *ngIf="expanded" (click)="resetTiles()" mat-button>RESTORE</button>
             </mat-card-footer>
         </mat-card>
     </mat-grid-tile>
-    <mat-grid-tile [colspan]="2" [rowspan]="1">
-        <mat-card class="full-card">
-            <mat-card-header>
-                <mat-card-title>Shiba Inu</mat-card-title>
-                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                HI
-            </mat-card-content>
-
-            <mat-card-footer>
-                <button mat-button>EXPAND</button>
-            </mat-card-footer>
-        </mat-card>
-    </mat-grid-tile>
-    <mat-grid-tile [colspan]="1" [rowspan]="1">
-        <mat-card class="full-card">
-            <mat-card-header>
-                <mat-card-title>Shiba Inu</mat-card-title>
-                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                HI
-            </mat-card-content>
-
-            <mat-card-footer>
-                <button mat-button>EXPAND</button>
-            </mat-card-footer>
-        </mat-card>
-    </mat-grid-tile>
-    <mat-grid-tile [colspan]="1" [rowspan]="1">
-        <mat-card class="full-card">
-            <mat-card-header>
-                <mat-card-title>4 Inu</mat-card-title>
-                <mat-card-subtitle>Dog Breed</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                HI
-            </mat-card-content>
-            <mat-card-footer>
-                <button mat-button>EXPAND</button>
-        </mat-card-footer>
-        </mat-card>
-    </mat-grid-tile>
 </mat-grid-list>
\ No newline at end of file
diff --git a/web/src/app/pages/dashboard/dashboard.component.ts b/web/src/app/pages/dashboard/dashboard.component.ts
index 121dc821..488a04e5 100644
--- a/web/src/app/pages/dashboard/dashboard.component.ts
+++ b/web/src/app/pages/dashboard/dashboard.component.ts
@@ -1,18 +1,63 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit }from '@angular/core'; 
 
-@Component({
-  selector: 'app-dashboard',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.scss'],
+@Component( {
+selector:'app-dashboard', 
+templateUrl:'./dashboard.component.html', 
+styleUrls:['./dashboard.component.scss'], 
 })
+
 export class DashboardComponent implements OnInit {
-  constructor() 
-  {
-   }
+public dashboard:any;
+public expanded:boolean = false;
+constructor() {
+}
 
-  ngOnInit() {
+ngOnInit() {
+  this.resetTiles();
+}
+
+public expandTile(tile:any) {
+  for(var i = 0; i< this.dashboard.tiles.length; i++) {
+    if(this.dashboard.tiles[i].title === tile.title ) {
+      this.dashboard.tiles[i].rows = 2;
+      this.dashboard.tiles[i].columns = 3;
+      this.expanded = true;
+      } else {
+        this.dashboard.tiles[i].rows = 0;
+        this.dashboard.tiles[i].columns = 0;
+      }
   }
+}
 
+public resetTiles() {
+  this.expanded = false;
+ this.dashboard = {tiles:[ {
+    title:'Trade History:', 
+    subTitle:'Trade History', 
+    content:'<app-trade-history></app-trade-history>',
+    columns:1,
+    rows:2,
+    },  {
+    title:'Price History:', 
+    subTitle:'Price History', 
+    content:'<app-price-history></app-price-history>',
+    columns:2,
+    rows:1,
+    },  {
+    title:'My Orders:', 
+    subTitle:'My Orders', 
+    content:'<app-my-orders></app-my-orders>',
+    columns:1,
+    rows:1,
+    },  {
+    title:'Orders:', 
+    subTitle:'Orders', 
+    content:'<app-orders></app-orders>',
+    columns:1,
+    rows:1,
+    }, 
+    ]}; 
+}
 }