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
diff --git a/src/app/dashboard/DashboardComponent.scss b/src/app/dashboard/DashboardComponent.scss
new file mode 100644
index 0000000..df3c6b1
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.scss
@@ -0,0 +1,160 @@
+/*
+ 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)
+ */
+ @import "../../assets/scss/mixins/mixin";
+ @import "../../assets/scss/variable";
+ $min-height-set: 200px;
+ .dashboard {
+   .custom-card {
+     word-wrap: break-word;
+     @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
+     @include transition(all, 0.2s, null, null);
+     @include roundedCorners(5);
+     @include border(all, 1, solid, rgba(238, 238, 238, 0.75));
+     color: $white;
+     &.card-hover {
+       @include transition(all, 0.25s, ease, null);
+       &:hover {
+         -moz-transform: translateY(-4px) scale(1.01);
+         -ms-transform: translateY(-4px) scale(1.01);
+         -o-transform: translateY(-4px) scale(1.01);
+         transform: translateY(-4px) scale(1.01);
+       }
+     }
+     &.pink-card {
+       @include background(
+         linear-gradient(to left top, #d81b60, #e0306d, #e7407a, #ee4f87, #f55c94),
+         null,
+         null,
+         null,
+         null
+       );
+     }
+     &.purple-card {
+       @include background(
+         linear-gradient(to left top, #605ca8, #736ebb, #8681ce, #9994e2, #aca7f6),
+         null,
+         null,
+         null,
+         null
+       );
+     }
+     &.aqua-card {
+       @include background(
+         linear-gradient(to left top, #00c0ef, #00cdf5, #00dafa, #00e6fd, #0af3ff),
+         null,
+         null,
+         null,
+         null
+       );
+     }
+     .custom-card-header {
+       @include background(null, $primary, null, null, null);
+       @include roundedTop(5);
+       a {
+         color: $white;
+         @include flexbox(flex, space-between, null, null, center, null);
+         @include padding-value(12, 20, 12, 20);
+       }
+     }
+     .card-body {
+       @include padding-value(5, 5, 5, 10);
+       &.list-overflow {
+         overflow-y: scroll;
+         .list-group {
+           .list-group-item {
+             cursor: default;
+             @include border(all, 0, solid, $black-coral);
+             @include border(bottom, 1, solid, rgba(0, 0, 0, 0.125));
+             @include padding-value(10, 0, 10, 0);
+             @include margin-value(0, 0, 0, 0);
+             color: $gray-600;
+             i {
+               cursor: pointer;
+               @include font(null, 14px, null);
+               &.activeProjectLink {
+                 cursor: default;
+               }
+             }
+             &:last-child {
+               @include border(bottom, 0, solid, rgba(0, 0, 0, 0.125));
+             }
+           }
+         }
+         &.failed-instances {
+           max-height: $min-height-set;
+         }
+         &.project-list {
+           max-height: 65vh;
+         }
+       }
+     }
+   }
+   .instances {
+     .graph-section {
+       min-height: $min-height-set;
+       @include flexbox(null, center, null, null, null, null);
+       @include padding-value(10, 10, 10, 10);
+       .card-title {
+         color: $gray-600;
+       }
+       .instances-canvas {
+         @include flexbox(none !important, null, null, null, null, null);
+         &.show-canvas {
+           @include flexbox(block !important, null, null, null, null, null);
+         }
+         #canvas{
+          @include wh-value(100%, $min-height-set);
+        }
+       }
+     }
+   }
+   .module-counts {
+     .status-card {
+       overflow: hidden;
+       @include wh-value(null, 130px);
+       @include roundedCorners(4);
+       @include box-shadow(0px, 5px, 20px, 2px, $transparent-dark-bg);
+       cursor: pointer;
+       @include flexbox(null, null, null, null, center, null);
+       @include padding-value(20, 20, 20, 20);
+       @include border(all, 0, solid, $gray-80);
+       i {
+         @include font(null, 2rem, null);
+         @include margin-value(0, 0, 8, 0);
+       }
+       h6 {
+         @include font(null, 0.8rem, null);
+       }
+       &:hover .link-icon {
+         @include position_value(null, null, -60px, null, null);
+       }
+       .link-icon {
+         @include background(null, rgba(255, 255, 255, 0.5), null, null, null);
+         @include position_value(absolute, 0px, -130px, null, null);
+         @include wh-value(130px, 130px);
+         @include font(null, 30px, null);
+         @include padding-value(40, 20, 40, 20);
+         @include roundedCornersPercentage(50%);
+         @include transition(all, 0.3s, ease-in-out, null);
+         i {
+           @include font(null, 1.875rem, null);
+         }
+       }
+     }
+   }
+ }
\ No newline at end of file
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
new file mode 100644
index 0000000..4ab802f
--- /dev/null
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -0,0 +1,402 @@
+/*
+ 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)
+ */
+/**
+ * @file Dashboard Component
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { AuthenticationService } from 'AuthenticationService';
+import { Chart } from 'chart.js';
+import { ERRORDATA } from 'CommonModel';
+import { environment } from 'environment';
+import { NSDDetails } from 'NSDModel';
+import { NSInstanceDetails } from 'NSInstanceModel';
+import { ProjectData, ProjectDetails } from 'ProjectModel';
+import { ProjectService } from 'ProjectService';
+import { RestService } from 'RestService';
+import { Observable, Subscription } from 'rxjs';
+import { SDNControllerModel } from 'SDNControllerModel';
+import { SharedService } from 'SharedService';
+import { ProjectRoleMappings, UserDetail } from 'UserModel';
+import { VimAccountDetails } from 'VimAccountModel';
+import { VNFDDetails } from 'VNFDModel';
+import { VNFInstanceDetails } from 'VNFInstanceModel';
+
+/**
+ * Creating component
+ * @Component takes DashboardComponent.html as template url
+ */
+@Component({
+    styleUrls: ['./DashboardComponent.scss'],
+    templateUrl: './DashboardComponent.html'
+})
+
+/**
+ * This file created during the angular project creation
+ */
+
+/** Exporting a class @exports DashboardComponent */
+export class DashboardComponent implements OnInit {
+    /** Invoke service injectors @public */
+    public injector: Injector;
+
+    /** handle translate @public */
+    public translateService: TranslateService;
+
+    /** Observable holds logined value  @public */
+    public username$: Observable<string>;
+
+    /** Variables holds admin is logged or not @public */
+    public isAdmin: boolean;
+
+    /** List of NS failed Instances @public */
+    public nsFailedInstances: {}[] = [];
+
+    /** Setting up count for vnfdPackages @public */
+    public vnfdPackageCount: number;
+
+    /** Setting up count for nsdPackage @public */
+    public nsdPackageCount: number;
+
+    /** Setting up count for nsInstance @public */
+    public nsInstanceCount: number;
+
+    /** Setting up count for vnfInstance @public */
+    public vnfInstanceCount: number;
+
+    /** Setting up count for vimAccount @public */
+    public vimAccountCount: number;
+
+    /** Setting up count for sdnController @public */
+    public sdnControllerCount: number;
+
+    /** Variables holds current project details @public */
+    public currentProjectDetails: {};
+
+    /** Array holds all the projects @public */
+    public projectList: {}[] = [];
+
+    /** Array holds all the projects @public */
+    public allProjectList: {}[] = [];
+
+    /** Variables holds the selected project @public */
+    public selectedProject: Observable<string>;
+
+    /** Check the Instances loading results @public */
+    public isCanvasLoadingResults: boolean = true;
+
+    /** Check the Projects loading results @public */
+    public isProjectsLoadingResults: boolean = true;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** List of NS Success Instances @private */
+    public nsRunningInstance: string[] = [];
+
+    /** Utilizes rest service for any CRUD operations @private */
+    private restService: RestService;
+
+    /** Utilizes auth service for any auth operations @private */
+    private authService: AuthenticationService;
+
+    /** Used to subscribe vnfdPackage @private */
+    private vnfdPackageCountSub: Subscription;
+
+    /** Used to subscribe nsdPackage @private */
+    private nsdPackageCountSub: Subscription;
+
+    /** Used to subscribe nsInstance @private */
+    private nsInstanceCountSub: Subscription;
+
+    /** Used to subscribe vnfInstance @private */
+    private vnfInstanceCountSub: Subscription;
+
+    /** Used to subscribe vimAccount @private */
+    private vimAccountCountSub: Subscription;
+
+    /** Used to subscribe sdnController @private */
+    private sdnControllerCountSub: Subscription;
+
+    /** No of Hours of NS Success Instances @private */
+    private noOfHours: number[] = [];
+
+    /** collects charts objects @private */
+    private charts: object = [];
+
+    /** Contains all methods related to projects @private */
+    private projectService: ProjectService;
+
+    /** Contains all methods related to shared @private */
+    private sharedService: SharedService;
+
+    /** Contains NS Instance Details */
+    private nsInstancesDataArr: {}[];
+
+    /** Container created time array @private */
+    private createdTimes: string[] = [];
+
+    /** Contains slice limit const @private */
+    private sliceLimit: number = 10;
+
+    /** Contians hour converter @private */
+    private hourConverter: number = 3600;
+
+    /** Contians color code for chart @private */
+    private chartColorPink: string = '#e4397c';
+
+    /** Contians color code for chart @private */
+    private chartColorPurple: string = '#605ca8';
+
+    /** Contians color code for chart @private */
+    private chartColorCyan: string = '#00c0ef';
+
+    /** Contians color code for chart @private */
+    private chartColorBlue: string = '#054C8C';
+
+    /** Contians color code for chart @private */
+    private chartColorYellow: string = '#ffce56';
+
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.authService = this.injector.get(AuthenticationService);
+        this.projectService = this.injector.get(ProjectService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+    }
+
+    /**
+     * Lifecyle Hooks the trigger before component is instantiate
+     */
+    public ngOnInit(): void {
+        this.username$ = this.authService.username;
+        this.isAdmin = (localStorage.getItem('isAdmin') === 'true') ? true : false;
+        this.selectedProject = this.authService.ProjectName;
+        this.checkAdminPrivilege();
+        this.getUserAccessedProjects();
+        this.getAllProjects();
+        this.getVnfdPackageCount();
+        this.getNsdPackageCount();
+        this.getNsInstanceCount();
+        this.getVnfInstanceCount();
+        this.getVimAccountCount();
+        this.getSDNControllerCount();
+    }
+
+    /** Get all the projects @public */
+    public getUserAccessedProjects(): void {
+        this.projectService.getUserProjects().subscribe((projects: UserDetail) => {
+            const projectList: {}[] = projects.project_role_mappings;
+            this.projectList = projectList.filter(
+                (thing: ProjectRoleMappings, i: number, arr: []) => arr
+                    .findIndex((t: ProjectRoleMappings) => t.project_name === thing.project_name) === i
+            );
+        }, (error: Error) => {
+            // TODO: Handle failure
+        });
+    }
+
+    /** Fetching all the Project in dashboard @public */
+    public getAllProjects(): void {
+        this.isProjectsLoadingResults = true;
+        this.restService.getResource(environment.PROJECTS_URL).subscribe((projectsData: ProjectDetails[]) => {
+            this.allProjectList = [];
+            projectsData.forEach((projectData: ProjectDetails) => {
+                const projectDataObj: ProjectData = this.generateProjectData(projectData);
+                this.allProjectList.push(projectDataObj);
+            });
+            this.isProjectsLoadingResults = false;
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+            this.isProjectsLoadingResults = false;
+        });
+    }
+
+    /** Generate Projects object from loop and return for the datasource @public */
+    public generateProjectData(projectData: ProjectDetails): ProjectData {
+        return {
+            projectName: projectData.name,
+            modificationDate: this.sharedService.convertEpochTime(projectData._admin.modified),
+            creationDate: this.sharedService.convertEpochTime(projectData._admin.created),
+            id: projectData._id,
+            project: projectData._id
+        };
+    }
+
+    /** Function to check admin privilege @public */
+    public checkAdminPrivilege(): void {
+        if (!this.isAdmin) {
+            this.projectService.getCurrentProjectDetails().subscribe((projectDetails: {}) => {
+                this.currentProjectDetails = projectDetails;
+            }, (error: Error) => {
+                // TODO: Handle failure
+            });
+        }
+    }
+
+    /** Get VNFD Package details @public */
+    public getVnfdPackageCount(): void {
+        this.vnfdPackageCountSub = this.restService.getResource(environment.VNFPACKAGESCONTENT_URL)
+            .subscribe((vnfdPackageData: VNFDDetails[]) => {
+            this.vnfdPackageCount = vnfdPackageData.length;
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+        });
+    }
+
+    /** Get NSD Package details @public */
+    public getNsdPackageCount(): void {
+        this.nsdPackageCountSub = this.restService.getResource(environment.NSDESCRIPTORSCONTENT_URL)
+            .subscribe((nsdPackageData: NSDDetails[]) => {
+            this.nsdPackageCount = nsdPackageData.length;
+        }, (error: ERRORDATA) => {
+            this.restService.handleError(error, 'get');
+        });
+    }
+
+    /** Get NS Instance details @public */
+    public getNsInstanceCount(): void {
+        this.isCanvasLoadingResults = true;
+        this.nsInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+            .subscribe((nsInstancesData: NSInstanceDetails[]) => {
+                this.nsInstancesDataArr = nsInstancesData;
+                this.nsInstanceCount = nsInstancesData.length;
+                this.nsInstanceChart();
+                this.isCanvasLoadingResults = false;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+                this.isCanvasLoadingResults = false;
+            });
+    }
+
+    /** Get NS Instance chart details @public */
+    public nsInstanceChart(): void {
+        this.nsInstancesDataArr.forEach((nsdInstanceData: NSDDetails) => {
+            const operationalStatus: string = nsdInstanceData['operational-status'];
+            const configStatus: string = nsdInstanceData['config-status'];
+            if (operationalStatus === 'failed' || configStatus === 'failed') {
+                this.nsFailedInstances.push(nsdInstanceData);
+            } else if (operationalStatus === 'running' && configStatus === 'configured') {
+                this.nsRunningInstance.push(nsdInstanceData.name);
+                this.createdTimes.push(((nsdInstanceData._admin.created).toString()).slice(0, this.sliceLimit));
+            }
+        });
+        const now: Date = new Date();
+        const currentTime: number = Number((now.getTime().toString().slice(0, this.sliceLimit)));
+        this.createdTimes.forEach((createdTime: string) => {
+            this.noOfHours.push((Math.round((currentTime - Number(createdTime)) / this.hourConverter)));
+        });
+        this.drawNsChart();
+    }
+
+    /** Prepare and sketch NS instance chart */
+    public drawNsChart(): void {
+        this.charts = new Chart('canvas', {
+            type: 'bar',
+            data: {
+                labels: this.nsRunningInstance,
+                datasets: [{
+                    data: this.noOfHours,
+                    label: this.translateService.instant('NOOFHOURS'),
+                    borderColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
+                    this.chartColorBlue, this.chartColorYellow],
+                    fill: false,
+                    backgroundColor: [this.chartColorPurple, this.chartColorPink, this.chartColorCyan,
+                    this.chartColorBlue, this.chartColorYellow]
+                }]
+            },
+            options: {
+                legend: { display: false },
+                scales: {
+                    xAxes: [{
+                        display: true,
+                        ticks: {
+                            // tslint:disable-next-line: no-any
+                            callback: (label: any, index: number, labels: string): string => {
+                                const length: number = 20;
+                                const ending: string = '...';
+                                if (label.length > length) {
+                                    return label.substring(0, length - ending.length) + ending;
+                                } else {
+                                    return label;
+                                }
+                            }
+                        },
+                        scaleLabel: {
+                            display: true,
+                            labelString: this.translateService.instant('INSTANCES')
+                        }
+                    }],
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        },
+                        display: true,
+                        scaleLabel: {
+                            display: true,
+                            labelString: this.translateService.instant('NOOFHOURS')
+                        }
+                    }]
+                }
+            }
+        });
+    }
+
+    /** Get VNFD instance details @public */
+    public getVnfInstanceCount(): void {
+        this.vnfInstanceCountSub = this.restService.getResource(environment.NSDINSTANCES_URL)
+            .subscribe((vnfInstanceData: VNFInstanceDetails[]) => {
+                this.vnfInstanceCount = vnfInstanceData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
+    }
+
+    /** Get VIM account details @public */
+    public getVimAccountCount(): void {
+        this.vimAccountCountSub = this.restService.getResource(environment.VIMACCOUNTS_URL)
+            .subscribe((vimAccountData: VimAccountDetails[]) => {
+                this.vimAccountCount = vimAccountData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
+    }
+
+    /** Get SDN Controller Count  @public */
+    public getSDNControllerCount(): void {
+        this.sdnControllerCountSub = this.restService.getResource(environment.SDNCONTROLLER_URL)
+            .subscribe((sdnControllerData: SDNControllerModel[]) => {
+                this.sdnControllerCount = sdnControllerData.length;
+            }, (error: ERRORDATA) => {
+                this.restService.handleError(error, 'get');
+            });
+    }
+
+    /**
+     * Lifecyle Hooks the trigger before component is deleted
+     */
+    public ngOnDestroy(): void {
+        this.vnfdPackageCountSub.unsubscribe();
+        this.nsdPackageCountSub.unsubscribe();
+        this.nsInstanceCountSub.unsubscribe();
+        this.vnfInstanceCountSub.unsubscribe();
+        this.vimAccountCountSub.unsubscribe();
+        this.sdnControllerCountSub.unsubscribe();
+    }
+}
diff --git a/src/app/dashboard/DashboardModule.ts b/src/app/dashboard/DashboardModule.ts
new file mode 100644
index 0000000..4d882e2
--- /dev/null
+++ b/src/app/dashboard/DashboardModule.ts
@@ -0,0 +1,61 @@
+/*
+ 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)
+ */
+
+/**
+ * @file Dashboard Module
+ */
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule } from '@angular/forms';
+import { RouterModule, Routes } from '@angular/router';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
+import { DashboardComponent } from 'DashboardComponent';
+import { LoaderModule } from 'LoaderModule';
+import { ChartsModule } from 'ng2-charts';
+
+/** To halndle project information */
+const projectInfo: {} = { title: '{project}', url: '/' };
+
+/** const values for dashboard Routes */
+const routes: Routes = [
+    {
+        path: '',
+        data: {
+            breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+                projectInfo]
+        },
+        component: DashboardComponent
+    }
+];
+/**
+ * An NgModule is a class adorned with the @NgModule decorator function.
+ * @NgModule takes a metadata object that tells Angular how to compile and run module code.
+ */
+@NgModule({
+    imports: [FormsModule, CommonModule, HttpClientModule, FlexLayoutModule, TranslateModule,
+        ChartsModule, RouterModule.forChild(routes), NgbModule, LoaderModule],
+    declarations: [DashboardComponent]
+})
+/** Exporting a class @exports DashboardModule */
+export class DashboardModule {
+    /** Variables declared to avoid state-less class */
+    private dashboardModule: string;
+}