diff --git a/ng-seed/src/app/dashboard/dashboard.component.html b/ng-seed/src/app/dashboard/dashboard.component.html
index 1a03b16..e074976 100644
--- a/ng-seed/src/app/dashboard/dashboard.component.html
+++ b/ng-seed/src/app/dashboard/dashboard.component.html
@@ -1 +1,64 @@
-<h1>welcome</h1>
\ No newline at end of file
+<div fxLayout="row wrap">
+    <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
+       <mat-card>
+          <div class="card-wheather grad-blue">
+             <div class="city">New Orders</div>
+             <div class="date">This Week</div>
+             <div class="weather">
+                <div class="sun d-flex justify-content-between">
+                   <i class="fa fa-shopping-bag fa-3x align-self-center"></i>
+                   <div class="temp align-self-center">190</div>
+                </div>
+             </div>
+          </div>
+       </mat-card>
+    </div>
+    <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
+       <mat-card>
+          <div class="card-wheather grad-green">
+             <div class="city">Total Profit</div>
+             <div class="date">This Week</div>
+             <div class="weather">
+                <div class="sun d-flex justify-content-between">
+                   <i class="fa fa fa-users fa-3x align-self-center"></i>
+                   <div class="temp align-self-center">987</div>
+                </div>
+             </div>
+          </div>
+       </mat-card>
+    </div>
+    <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100" class="m-gap p-gap">
+       <mat-card>
+          <div class="card-wheather grad-red">
+             <div class="city">Email</div>
+             <div class="date">This Week</div>
+             <div class="weather">
+                <div class="sun d-flex justify-content-between">
+                   <i class="fa fa-inbox fa-3x align-self-center"></i>
+                   <div class="temp align-self-center">236</div>
+                </div>
+             </div>
+          </div>
+       </mat-card>
+    </div>
+ </div>
+ <div fxLayout="row wrap">
+    <div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100" class="m-gap p-gap">
+       <mat-card>
+          <mat-card-title fxLayout="row" fxLayoutAlign="start center">
+             Total Sales &nbsp;
+             <span fxFlex></span>
+             <!-- <button mat-icon-button mat-button-sm [mat-menu-trigger-for]="card2" aria-label="Open card menu">
+                <mat-icon>more_vert</mat-icon>
+             </button> -->
+          </mat-card-title>
+          <hr>
+          <mat-card-content>
+             <div class="w-100 h-300px">
+                <ngx-charts-area-chart [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale" (select)="onSelect($event)">
+                </ngx-charts-area-chart>
+             </div>
+          </mat-card-content>
+       </mat-card>
+    </div>
+    </div>
\ No newline at end of file
diff --git a/ng-seed/src/app/dashboard/dashboard.component.ts b/ng-seed/src/app/dashboard/dashboard.component.ts
index 7622415..c4e8131 100644
--- a/ng-seed/src/app/dashboard/dashboard.component.ts
+++ b/ng-seed/src/app/dashboard/dashboard.component.ts
@@ -1,12 +1,30 @@
 import { Component } from '@angular/core';
-
+import { single, multi } from './charts.data';
 @Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent {
-
+  public single: any[];
+  public multi: any[];
+  public showXAxis = true;
+  public showYAxis = true;
+  public gradient = false;
+  public showLegend = false;
+  public showXAxisLabel = false;
+  public xAxisLabel = 'Year';
+  public showYAxisLabel = false;
+  public yAxisLabel = 'Population';
+  public colorScheme = {
+    domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3']
+  }; 
+  public autoScale = true;
   constructor() {
+    // this.fetch((data) => { this.rows = data; });
+    Object.assign(this, {single, multi}) 
+  }
+  onSelect(event) {
+    console.log(event);
   }
 }