diff --git a/src/app/dashboard/DashboardComponent.html b/src/app/dashboard/DashboardComponent.html
new file mode 100644
index 0000000..5b09dc9
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.html
@@ -0,0 +1,167 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+Licensed under the Apache License, Version 2.0 (the 'License');
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row dashboard">
+    <div class="col-xs-9 col-sm-12 col-md-12 col-lg-9 col-xl-9 p-0">
+        <div class="row instances">
+            <div class="col-xs-8 col-sm-8 col-md-12 col-lg-8 col-xl-8">
+                <div class="custom-card card mb-3 text-center graph-section">
+                    <div class="card-title">
+                        <h6 class="font-weight-bold" *ngIf="nsRunningInstance.length">
+                            {{'PAGE.DASHBOARD.UPTIME' | translate}} {{'PAGE.DASHBOARD.RUNNINGINSTANCES' | translate}}
+                        </h6>
+                        <h6 *ngIf="!nsRunningInstance.length">
+                            <span> {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</span>
+                        </h6>
+                        <div [ngClass]="{'show-canvas':nsRunningInstance.length}" class="instances-canvas">
+                            <canvas id="canvas"></canvas>
+                        </div>
+                    </div>
+                </div>
+                <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-12 col-lg-4 col-xl-4">
+                <div class="custom-card card card mb-3">
+                    <div class="card-header custom-card-header">
+                        {{'PAGE.DASHBOARD.FAILEDINSTANCES' | translate}}
+                    </div>
+                    <div class="card-body list-overflow failed-instances">
+                        <ul class="list-group">
+                            <li class="list-group-item text-left" *ngIf="!nsFailedInstances.length">
+                                {{'PAGE.DASHBOARD.NOINSTANCES' | translate}}</li>
+                            <li class="list-group-item text-left d-flex justify-content-between align-items-center"
+                                *ngFor="let nsFailedInstance of nsFailedInstances">
+                                <span class="text-truncate">{{nsFailedInstance.name}}</span>
+                                <ng-template #popTitle>
+                                    <strong>{{nsFailedInstance.name}}</strong>
+                                    <button class="button-xs close" type="button" (click)="p.close()">
+                                        <i class="fas fa-times-circle text-danger"></i>
+                                    </button>
+                                </ng-template>
+                                <span class="badge badge-pill">
+                                    <i placement="left" container="body"
+                                        ngbPopover="{{'DETAILEDSTATUS' | translate}}: {{nsFailedInstance['detailed-status']}}"
+                                        triggers="manual" #p="ngbPopover" (click)="p.open()" [autoClose]="'outside'"
+                                        [popoverTitle]="popTitle"
+                                        class="fas fa-exclamation-circle text-danger float-left"></i></span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <app-loader [waitingMessage]="message" *ngIf="isCanvasLoadingResults"></app-loader>
+            </div>
+        </div>
+        <div class="row module-counts">
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card aqua-card" routerLink="/packages/ns">
+                        <i class="fas fa-box-open"></i>
+                        <h3>{{ (nsdPackageCount)?nsdPackageCount:0 }}</h3>
+                        <h6>{{'NSPACKAGES' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card aqua-card" routerLink="/instances/ns">
+                        <i class="fas fa-sitemap"></i>
+                        <h3>{{ (nsInstanceCount)?nsInstanceCount:0 }}</h3>
+                        <h6>{{'NSINSTANCES' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card purple-card" routerLink="/packages/vnf">
+                        <i class="fas fa-box-open"></i>
+                        <h3>{{ (vnfdPackageCount)?vnfdPackageCount:0 }}</h3>
+                        <h6>{{'VNFPACKAGES' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card purple-card" routerLink="/instances/vnf">
+                        <i class="fas fa-hdd"></i>
+                        <h3>{{ (vnfInstanceCount)?vnfInstanceCount:0 }}</h3>
+                        <h6>{{'VNFINSTANCES' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card pink-card" routerLink="/vim/details">
+                        <i class="fas fa-server"></i>
+                        <h3>{{ (vimAccountCount)?vimAccountCount:0 }}</h3>
+                        <h6>{{'VIMACCOUNTS' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
+                    <div class="status-card custom-card card-hover card pink-card" routerLink="/sdn/details">
+                        <i class="fas fa-globe"></i>
+                        <h3>{{ (sdnControllerCount)?sdnControllerCount:0 }}</h3>
+                        <h6>{{'SDNCONTROLLER' | translate}}</h6>
+                        <span class="link-icon">
+                            <i class="fa fa-link" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-xs-3 col-sm-12 col-md-12 col-lg-3 col-xl-3 p-0">
+        <div class="custom-card">
+            <div class="card-header p-0 custom-card-header">
+                <a routerLink="/projects">
+                    {{'ALL' | translate}} {{'PAGE.DASHBOARD.PROJECTS' | translate}}
+                    <span
+                        class="badge badge-primary badge-pill bg-white text-body font-weight-bold">{{allProjectList.length}}</span>
+                </a>
+            </div>
+            <div class="card-body list-overflow project-list">
+                <ul class="list-group">
+                    <li class="list-group-item text-left d-flex justify-content-between align-items-center selectProject"
+                        *ngFor='let list of allProjectList'>
+                        {{list.projectName}}
+                        <span class="badge badge-pill" *ngFor='let listcheck of projectList' placement="top"
+                            container="body"
+                            ngbTooltip="{{ (list.projectName === (selectedProject | async) ? 'CURRENTPROJECT' : 'SWITCHPROJECT') | translate}}">
+                            <i *ngIf="list.projectName === (selectedProject | async) && listcheck.project === list.project"
+                                [ngClass]="list.projectName === (selectedProject | async) ? 'activeProjectLink' : ''"
+                                class="fas fa-check-circle text-success"></i>
+                            <i *ngIf="list.projectName !== (selectedProject | async) && listcheck.project === list.project"
+                                (click)="this.projectService.switchProjectModal(list)"
+                                class="fas fa-exchange-alt text-danger selectProjectLink"></i>
+                        </span>
+                    </li>
+                </ul>
+            </div>
+            <app-loader [waitingMessage]="message" *ngIf="isProjectsLoadingResults"></app-loader>
+        </div>
+    </div>
+</div>
\ No newline at end of file