diff --git a/src/app/instances/InstancesModule.ts b/src/app/instances/InstancesModule.ts
index 7e47d32..18c733c 100644
--- a/src/app/instances/InstancesModule.ts
+++ b/src/app/instances/InstancesModule.ts
@@ -39,6 +39,10 @@
 import { NSInstancesComponent } from 'NSInstancesComponent';
 import { NSPrimitiveComponent } from 'NSPrimitiveComponent';
 import { NSTopologyComponent } from 'NSTopologyComponent';
+import { OperationalViewAppActionsComponent } from 'OperationalAppActionsComponent';
+import { OperationalViewAppConfigsComponent } from 'OperationalAppConfigsComponent';
+import { OperationalViewAppExecutedActionsComponent } from 'OperationalAppExecutedActionsComponent';
+import { OperationalViewComponent } from 'OperationalViewComponent';
 import { PagePerRowModule } from 'PagePerRowModule';
 import { PageReloadModule } from 'PageReloadModule';
 import { PDUInstancesComponent } from 'PDUInstancesComponent';
@@ -100,6 +104,23 @@
                         projectInfo, { title: 'NSINSTANCES', url: '/instances/ns' }, { title: '{id}', url: null }]
                 },
                 component: NSTopologyComponent
+            },
+            {
+                path: 'operational-view',
+                data: {
+                    breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+                        projectInfo, { title: 'PAGE.OPERATIONALDASHBOARD.TITLE', url: null }]
+                },
+                component: OperationalViewComponent
+            },
+            {
+                path: 'operational-view/:id',
+                data: {
+                    breadcrumb: [{ title: 'PAGE.DASHBOARD.DASHBOARD', url: '/' }, { title: 'PAGE.DASHBOARD.PROJECTS', url: '/projects' },
+                        projectInfo, { title: 'PAGE.OPERATIONALDASHBOARD.TITLE', url: '/instances/operational-view' },
+                    { title: '{id}', url: null }]
+                },
+                component: OperationalViewComponent
             }
         ]
     }
@@ -114,10 +135,17 @@
         CodemirrorModule, CommonModule, Ng2SmartTableModule, FlexLayoutModule, RouterModule.forChild(routes), NgbModule,
         NgSelectModule, PagePerRowModule, LoaderModule, SidebarModule.forRoot(), PageReloadModule],
     declarations: [InstancesComponent, NSInstancesComponent, VNFInstancesComponent, PDUInstancesComponent, AddPDUInstancesComponent,
-        NetsliceInstancesComponent, HistoryOperationsComponent, NSTopologyComponent, NSPrimitiveComponent],
+        NetsliceInstancesComponent, HistoryOperationsComponent, NSTopologyComponent, NSPrimitiveComponent, OperationalViewComponent,
+        OperationalViewAppConfigsComponent, OperationalViewAppActionsComponent, OperationalViewAppExecutedActionsComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
     providers: [DataService],
-    entryComponents: [NSPrimitiveComponent, AddPDUInstancesComponent]
+    entryComponents: [
+        NSPrimitiveComponent,
+        AddPDUInstancesComponent,
+        OperationalViewAppConfigsComponent,
+        OperationalViewAppActionsComponent,
+        OperationalViewAppExecutedActionsComponent
+    ]
 })
 /** Exporting a class @exports InstancesModule */
 export class InstancesModule {
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.ts b/src/app/instances/ns-instances/NSInstancesComponent.ts
index 3f20710..7b81d91 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.ts
+++ b/src/app/instances/ns-instances/NSInstancesComponent.ts
@@ -242,7 +242,8 @@
                     adminDetails: nsdInstanceData._admin,
                     vnfID: nsdInstanceData['vnfd-id'],
                     nsd: nsdInstanceData.nsd,
-                    'nsd-id': nsdInstanceData['nsd-id']
+                    'nsd-id': nsdInstanceData['nsd-id'],
+                    vcaStatus: nsdInstanceData.vcaStatus
                 };
                 this.nsInstanceData.push(nsDataObj);
             });
diff --git a/src/app/operational-view/OperationalViewComponent.html b/src/app/operational-view/OperationalViewComponent.html
new file mode 100644
index 0000000..e23f6a4
--- /dev/null
+++ b/src/app/operational-view/OperationalViewComponent.html
@@ -0,0 +1,276 @@
+<!--
+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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="row d-flex flex-row justify-content-between">
+    <div class="d-flex align-items-center header-style">{{ 'PAGE.OPERATIONALDASHBOARD.TITLE' | translate }}
+        ({{ 'PAGE.OPERATIONALDASHBOARD.MODELSUMMARY' | translate }})</div>
+    <page-reload></page-reload>
+</div>
+<div class="container-fluid p-0 m-0 mt-2">
+    <ng-container *ngIf="vcaDetails.length > 0 else noData">
+        <ngb-accordion #acc="ngbAccordion" class="juju-section" [closeOthers]="true" type="secondary"
+            activeIds="{{activeID}}">
+            <ngb-panel id="{{vcaDetail.ns_id}}" *ngFor="let vcaDetail of vcaDetails; let i = index;">
+                <ng-template ngbPanelHeader let-opened="opened">
+                    <div class="d-flex align-items-center justify-content-between cursor-pointer title-bar"
+                        (click)="acc.toggle(vcaDetail.ns_id);">
+                        <span class="name-width">{{vcaDetail.vca_name}}</span>
+                        <span class="id-width">{{vcaDetail.ns_id}}</span>
+                        <button class="btn btn-sm btn-primary border-radius-default" placement="top" container="body"
+                            ngbTooltip="{{ (opened ? 'CLOSE' : 'OPEN') | translate }}">
+                            <i [ngClass]="{ 'fas': true, 'fa-angle-down': opened, 'fa-angle-right': !opened }"></i>
+                        </button>
+                    </div>
+                </ng-template>
+                <ng-template ngbPanelContent>
+                    <div class="row">
+                        <div class="col-lg-12 col-md-12 col-sm-12 p-1">
+                            <div class="row my-2 justify-content-end align-items-center setting-section">
+                                <div class="form-group row align-items-center mb-0">
+                                    <label class="col-form-label font-weight-bold text-primary">
+                                        {{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
+                                    </label>
+                                    <!-- Live button switch -->
+                                    <label class="switch ml-1">
+                                        <input id="liveData{{i}}" type="checkbox" [checked]="vcaDetail.isLiveloading"
+                                            (change)="callLiveData($event.target.checked, vcaDetail.ns_id, i)">
+                                        <div class="slider round">
+                                            <span class="on">{{ 'ON' | translate }}</span>
+                                            <span class="off">{{ 'OFF' | translate }}</span>
+                                        </div>
+                                    </label>
+                                    <!-- Seconds button group -->
+                                    <div class="btn-group list action ml-2 seconds-btn-group" role="group"
+                                        *ngIf="vcaDetail.isLiveloading">
+                                        <button [disabled]="!vcaDetail.isLiveloading" type="button"
+                                            class="btn btn-primary"
+                                            [ngClass]="{'active': seconds.value === vcaDetail.timeOutSeconds}"
+                                            (click)="onSetTimerSelector(seconds.value, vcaDetail.ns_id, i)"
+                                            *ngFor="let seconds of setSeconds;">{{seconds.label}}</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <ng-container *ngFor="let modelVCAStatus of vcaDetail.vcaStatusModels; let i = index;">
+                        <h5 class="font-weight-bold text-primary">
+                            {{ 'PAGE.OPERATIONALDASHBOARD.MODEL' | translate }} {{i+1}} (Cloud/Region):
+                            {{modelVCAStatus.model ? modelVCAStatus.model.cloud_tag : '-'}}/
+                            {{modelVCAStatus.model ? modelVCAStatus.model.region : '-' }}
+                        </h5>
+                        <div class="row">
+                            <div class="col-lg-12 col-md-12 col-sm-12 p-1">
+                                <div class="row my-2 justify-content-between align-items-center filter-actions">
+                                    <div class="form-group row align-items-center mb-0">
+                                        <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} all{{i}} active"
+                                            type="button" (click)="showHideTables($event.target, 'all', i)">
+                                            {{ 'ALL' | translate }}
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} app{{i}}"
+                                            type="button" (click)="showHideTables($event.target, 'app', i)"
+                                            *ngIf="modelVCAStatus.applications.length > 0">
+                                            {{ 'PAGE.OPERATIONALDASHBOARD.APPLICATIONTITLE' | translate }} -
+                                            {{modelVCAStatus.applications.length > 0 ?
+                                            modelVCAStatus.applications.length : 0}}
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} unit{{i}}"
+                                            type="button" (click)="showHideTables($event.target, 'unit', i)"
+                                            *ngIf="modelVCAStatus.units.length > 0">
+                                            {{ 'PAGE.OPERATIONALDASHBOARD.UNITSTITLE' | translate }} -
+                                            {{modelVCAStatus.units.length > 0 ? modelVCAStatus.units.length : 0}}
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} machine{{i}}"
+                                            type="button" (click)="showHideTables($event.target, 'machine', i)"
+                                            *ngIf="modelVCAStatus.machines.length > 0">
+                                            {{ 'PAGE.OPERATIONALDASHBOARD.MACHINETITLE' | translate }} -
+                                            {{modelVCAStatus.machines.length > 0 ? modelVCAStatus.machines.length : 0}}
+                                        </button>
+                                        <button class="btn btn-sm btn-outline-primary mx-1 filter{{i}} relation{{i}}"
+                                            type="button" (click)="showHideTables($event.target, 'relation', i)"
+                                            *ngIf="modelVCAStatus.relations.length > 0">
+                                            {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONS' | translate }} -
+                                            {{modelVCAStatus.relations.length > 0 ? modelVCAStatus.relations.length :
+                                            0}}
+                                        </button>
+                                    </div>
+                                    <div class="form-group row align-items-center mb-0"
+                                        *ngIf="modelVCAStatus.executedActions !== undefined && modelVCAStatus.executedActions.length > 0">
+                                        <label class="col-form-label font-weight-bold text-primary">
+                                            {{ 'EXECUTEDACTIONS' | translate }}
+                                        </label>
+                                        <button type="button"
+                                            class="btn btn-sm btn-primary border border-radius-default ml-1"
+                                            (click)="showExecutedActionsList(modelVCAStatus.executedActions);">
+                                            <i class="fas fa-directions"></i>
+                                        </button>
+                                    </div>
+                                </div>
+                                <!-- Apps section -->
+                                <table class="table table-sm filterTable{{i}} app{{i}}" id="app{{i}}"
+                                    *ngIf="modelVCAStatus.applications.length > 0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.APPLICATION' | translate }}
+                                            </th>
+                                            <th scope="col">{{ 'STATUS' | translate }}</th>
+                                            <th scope="col">{{ 'SCALE' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.CHARM' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.STORE' | translate }}</th>
+                                            <th scope="col">{{ 'ACTIONS' | translate }}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let application of modelVCAStatus.applications">
+                                            <th scope="row">
+                                                <i class="active-icon fa-circle"
+                                                    [ngClass]="application.status ? application.status === 'active' ?  'fas text-success': application.status === 'waiting' ? 'fas text-warning' : application.status === 'blocked' ? 'fas text-danger' : 'far': ''">
+                                                </i>
+                                                {{application.app_id ? application.app_id : '-' }}
+                                            </th>
+                                            <td>{{application.status ? application.status : '-' }}</td>
+                                            <td>{{application.scale ? application.scale : 0 }}</td>
+                                            <td>{{application.charm ? application.charm : '-' }}</td>
+                                            <td>{{application.store ? application.store : '-' }}</td>
+                                            <td>
+                                                <div class="btn-group list action" role="group">
+                                                    <button type="button" class="btn btn-primary"
+                                                        (click)="showConfigList(application.configs);" placement="top"
+                                                        container="body" ngbTooltip="{{ 'CONFIG' | translate }}"
+                                                        [disabled]="application.configs === null">
+                                                        <i class="fas fa-cogs"></i>
+                                                    </button>
+                                                    <button type="button" class="btn btn-primary"
+                                                        (click)="showActionsList(application.actions);" placement="top"
+                                                        container="body" ngbTooltip="{{ 'ACTIONS' | translate }}"
+                                                        [disabled]="application.actions === null">
+                                                        <i class="fas fa-receipt"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        <tr class="text-center" *ngIf="modelVCAStatus.applications.length === 0">
+                                            <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOAPPLICATION' | translate }}
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <!-- Units section -->
+                                <table class="table table-sm filterTable{{i}} unit{{i}}" id="unit{{i}}"
+                                    *ngIf="modelVCAStatus.units.length > 0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.UNITS' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.WORKLOAD' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.AGENT' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
+                                            <th scope="col">
+                                                {{ 'PUBLICADDRESS' | translate }} /
+                                                {{ 'PAGE.OPERATIONALDASHBOARD.ADDRESS' | translate }}
+                                            </th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let unit of modelVCAStatus.units">
+                                            <th scope="row">
+                                                <i class="active-icon fa-circle"
+                                                    [ngClass]="unit.workload_status ? unit.workload_status.status === 'active' ?  'fas text-success': unit.workload_status.status === 'waiting' ? 'fas text-warning' : unit.workload_status.status === 'blocked' ? 'fas text-danger' : 'far': ''">
+                                                </i>
+                                                {{unit.unit_id ? unit.unit_id : '-'}} {{unit.leader !== null ? '(' +
+                                                ('PAGE.OPERATIONALDASHBOARD.LEADER' | translate) + ')' : '' }}
+                                            </th>
+                                            <td>{{unit.workload_status ? unit.workload_status.status : '-'}}</td>
+                                            <td>{{unit.agent_status ? unit.agent_status.status : '-'}}</td>
+                                            <td>{{unit.machine ? unit.machine : '-'}}</td>
+                                            <td>
+                                                {{unit.public_address ? unit.public_address : unit.address ?
+                                                unit.address : '-'}}
+                                            </td>
+                                            <td>{{unit.workload_status ? unit.workload_status.info : '-'}}</td>
+                                        </tr>
+                                        <tr class="text-center" *ngIf="modelVCAStatus.units.length === 0">
+                                            <td colspan="7">{{ 'PAGE.OPERATIONALDASHBOARD.NOUNITS' | translate }}</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <!-- Machines section -->
+                                <table class="table table-sm filterTable{{i}} machine{{i}}" id="machine{{i}}"
+                                    *ngIf="modelVCAStatus.machines.length > 0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MACHINE' | translate }}</th>
+                                            <th scope="col">State</th>
+                                            <th scope="col">DNS</th>
+                                            <th scope="col">Instance ID</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.SERIES' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.MESSAGE' | translate }}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let machines of modelVCAStatus.machines">
+                                            <th scope="row">{{machines.id_ ? machines.id_ : '-'}}</th>
+                                            <td>{{machines.agent_status ? machines.agent_status.status : '-'}}</td>
+                                            <td>{{machines.dns_name !== null ? machines.dns_name : '-'}}</td>
+                                            <td>{{machines.instance_id ? machines.instance_id : '-'}}</td>
+                                            <td>{{machines.series ? machines.series : '-'}}</td>
+                                            <td>{{machines.instance_status ? machines.instance_status.info : '-'}}</td>
+                                        </tr>
+                                        <tr class="text-center" *ngIf="modelVCAStatus.machines.length === 0">
+                                            <td colspan="6">
+                                                {{ 'PAGE.OPERATIONALDASHBOARD.NOMACHINES' | translate }}
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                                <!-- Relations section -->
+                                <table class="table table-sm filterTable{{i}} relation{{i}}" id="relation{{i}}"
+                                    *ngIf="modelVCAStatus.relations.length > 0">
+                                    <thead>
+                                        <tr>
+                                            <th scope="col">
+                                                {{ 'PAGE.OPERATIONALDASHBOARD.RELATIONPROVIDER' | translate }}
+                                            </th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.REQUIRER' | translate }}</th>
+                                            <th scope="col">{{ 'PAGE.OPERATIONALDASHBOARD.INTERFACE' | translate }}</th>
+                                            <th scope="col">{{ 'TYPE' | translate }}</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr *ngFor="let relation of modelVCAStatus.relations">
+                                            <th scope="row">{{relation.key ? relation.key : '-'}}</th>
+                                            <td>{{relation.key ? relation.key : '-'}}</td>
+                                            <td>{{relation.interface ? relation.interface : '-'}}</td>
+                                            <td>{{relation.endpoints[0].role ? relation.endpoints[0].role : '-'}}</td>
+                                        </tr>
+                                        <tr class="text-center" *ngIf="modelVCAStatus.relations.length === 0">
+                                            <td colspan="4">{{ 'PAGE.OPERATIONALDASHBOARD.NORELATIONS' | translate }}
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </ng-container>
+                </ng-template>
+            </ngb-panel>
+        </ngb-accordion>
+    </ng-container>
+    <ng-template #noData>
+        <h5 class="text-center">{{ 'NODATA' | translate }}</h5>
+    </ng-template>
+</div>
+<app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/operational-view/OperationalViewComponent.ts b/src/app/operational-view/OperationalViewComponent.ts
new file mode 100644
index 0000000..9d6c1fe
--- /dev/null
+++ b/src/app/operational-view/OperationalViewComponent.ts
@@ -0,0 +1,396 @@
+/*
+ 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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View Component
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+import { CONSTANTNUMBER, ERRORDATA } from 'CommonModel';
+import { environment } from 'environment';
+import * as HttpStatus from 'http-status-codes';
+import { OperationalViewAppActionsComponent } from 'OperationalAppActionsComponent';
+import { OperationalViewAppConfigsComponent } from 'OperationalAppConfigsComponent';
+import { OperationalViewAppExecutedActionsComponent } from 'OperationalAppExecutedActionsComponent';
+import { EXECUTEDACTIONS, MACHINES, SET_TIMER, SETMODELS, SETTIMER, VCAAPPLICATIONS, VCADETAILS, VCASTATUS, VCAUNITS } from 'OperationalModel';
+import { RestService } from 'RestService';
+import { Observable } from 'rxjs';
+import { Subscription } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { SharedService } from 'SharedService';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewComponent.html as template url
+ */
+@Component({
+    selector: 'app-operational-view',
+    templateUrl: './OperationalViewComponent.html'
+})
+/** Exporting a class @exports OperationalViewComponent */
+export class OperationalViewComponent implements OnInit {
+    /** Invoke service injectors @public */
+    public injector: Injector;
+
+    /** Check the loading results @public */
+    public isLoadingResults: boolean = false;
+
+    /** Give the message for the loading @public */
+    public message: string = 'PLEASEWAIT';
+
+    /** Formation of appropriate Data for vcaStatus Details @public */
+    public vcaDetails: VCADETAILS[] = [];
+
+    /** Contains all methods related to shared @public */
+    public sharedService: SharedService;
+
+    /** Utilizes rest service for any CRUD operations @public */
+    public restService: RestService;
+
+    /** variables contains activeID @public */
+    public activeID: string = null;
+
+    /** variables contains NS Instances ID @public */
+    public instancesID: string = null;
+
+    /** variables contains URL of operational Dashboard @public */
+    public openURL: string = 'instances/operational-view/';
+
+    /** variables contains default seconds for the timeout @public */
+    public timeOutDefaultSeconds: number = CONSTANTNUMBER.timeOutDefaultSeconds;
+
+    /** variables contains minimum seconds for the timeout @public */
+    public minSeconds: number = 5;
+
+    /** variables contains maximum seconds for the timeout @public */
+    public maxSeconds: number = 60;
+
+    /** variables contains timer calculation value of milliseconds @public */
+    public timeDefaultCal: number = 1000;
+
+    /** variables contains timeout @public */
+    public timeOut: number;
+
+    /** Set the timer button @public */
+    // tslint:disable-next-line: no-magic-numbers
+    public setSeconds: SETTIMER[] = SET_TIMER;
+
+    /** Instance of subscriptions @private */
+    private generateDataSub: Subscription;
+
+    /** Contains tranlsate instance @private */
+    private translateService: TranslateService;
+
+    /** Holds teh instance of AuthService class of type AuthService @private */
+    private activatedRoute: ActivatedRoute;
+
+    /** Instance of the modal service @private */
+    private modalService: NgbModal;
+
+    /** creates Operational view component */
+    constructor(injector: Injector) {
+        this.injector = injector;
+        this.restService = this.injector.get(RestService);
+        this.sharedService = this.injector.get(SharedService);
+        this.translateService = this.injector.get(TranslateService);
+        this.activatedRoute = this.injector.get(ActivatedRoute);
+        this.modalService = this.injector.get(NgbModal);
+    }
+
+    /**
+     * Lifecyle Hooks the trigger before component is instantiate
+     */
+    public ngOnInit(): void {
+        // tslint:disable-next-line:no-backbone-get-set-outside-model
+        this.instancesID = this.activatedRoute.snapshot.paramMap.get('id');
+        this.generateData();
+        this.generateDataSub = this.sharedService.dataEvent.subscribe((): void => { this.generateData(); });
+    }
+    /** Fetching the juju vca_status data from API and Load it in the respective table @public */
+    public generateData(): void {
+        this.clearTimeoutAndInterval();
+        this.modalService.dismissAll();
+        this.isLoadingResults = true;
+        this.vcaDetails = [];
+        let NSURL: string = environment.NSDINSTANCES_URL;
+        if (this.instancesID !== null) {
+            NSURL = NSURL + '/' + this.instancesID;
+            this.generateIndividualNSData(NSURL);
+        } else {
+            this.generateAllNSData(NSURL);
+        }
+    }
+    /**
+     * Show all NS Data that contains the juju vca_status from API and Load it in the table @public
+     * @param NSURL : osm/nslcm/v1/ns_instances
+     */
+    public generateAllNSData(NSURL: string): void {
+        this.restService.getResource(NSURL).subscribe((operationalList: VCASTATUS[]): void => {
+            if (operationalList.length > 0) {
+                operationalList.forEach((list: VCASTATUS): void => {
+                    if (!isNullOrUndefined(list.vcaStatus)) {
+                        const getVCAStatusDetails: VCADETAILS = this.vcaDetailsData(list, false, this.timeOutDefaultSeconds);
+                        this.vcaDetails.push(getVCAStatusDetails);
+                    }
+                });
+                if (this.activeID === null && this.vcaDetails.length > 0) {
+                    this.activeID = this.vcaDetails[0].ns_id;
+                }
+            }
+            this.isLoadingResults = false;
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'get');
+        });
+    }
+    /**
+     * Show the individual NS Data that contains the juju vca_status from generateNSData method and Load it in the table @public
+     * @param NSURL : osm/nslcm/v1/ns_instances/<ID>
+     */
+    public generateIndividualNSData(NSURL: string): void {
+        this.generateNSData(NSURL, false, this.timeOutDefaultSeconds).subscribe((getVCAStatusDetails: VCADETAILS): void => {
+            this.vcaDetails.push(getVCAStatusDetails);
+            if (this.activeID === null && this.vcaDetails.length > 0) {
+                this.activeID = this.instancesID;
+            }
+            this.isLoadingResults = false;
+        }, (error: ERRORDATA): void => {
+            this.isLoadingResults = false;
+            this.restService.handleError(error, 'get');
+        });
+    }
+    /**
+     * Fetching the Individual NS Data that contains the juju vca_status from API and return the VCADetails @public
+     * @param NSURL : osm/nslcm/v1/ns_instances/<ID>
+     * @param liveData : Needs to repeat the httprequest
+     * @param timeOutSeconds : set the timeout seconds to trigger the httprequest
+     */
+    public generateNSData(NSURL: string, liveData: boolean, timeOutSeconds: number): Observable<VCADETAILS> {
+        if (liveData) {
+            NSURL = NSURL + '?vcaStatusRefresh=true';
+        }
+        return this.restService.getResource(NSURL).pipe(map((operationalList: VCASTATUS): VCADETAILS => {
+            return this.vcaDetailsData(operationalList, liveData, timeOutSeconds);
+        }));
+    }
+    /**
+     * Form the VCA Details for each NS Instances
+     */
+    public formVCADetails(getData: VCADETAILS): VCADETAILS {
+        return {
+            isLiveloading: getData.isLiveloading,
+            ns_id: getData.ns_id,
+            vcaStatusModels: getData.vcaStatusModels,
+            timeOutSeconds: getData.timeOutSeconds,
+            vca_id: getData.vca_id,
+            vca_name: getData.vca_name
+        };
+    }
+    /**
+     * Assign the VCA Status of Multiple model in getModels array for each NS Instance
+     */
+    public assignVCAStatusOfEachModel(getData: SETMODELS): SETMODELS {
+        return {
+            applications: getData.applications,
+            branches: getData.branches,
+            controller_timestamp: getData.controller_timestamp,
+            executedActions: getData.executedActions,
+            machines: getData.machines,
+            model: getData.model,
+            offers: getData.offers,
+            relations: getData.relations,
+            remote_applications: getData.remote_applications,
+            units: getData.units,
+            unknown_fields: getData.unknown_fields
+        };
+    }
+    /**
+     * Use to fetch the vcaDetails from vca_status @public
+     */
+    public vcaDetailsData(list: VCASTATUS, liveData: boolean, timeOutSeconds: number): VCADETAILS {
+        const assignVCADetails: VCADETAILS[] = [];
+        const setModels: SETMODELS[] = [];
+        const assignNSInstancesID: string = list.id;
+        Object.keys(list.vcaStatus).forEach((key: string): void => {
+            const vcaApplication: VCAAPPLICATIONS[] = this.appData(list.vcaStatus[key].applications);
+            const vcaUnits: VCAUNITS[] = this.unitsData(vcaApplication);
+            const vcaMachines: MACHINES[] = this.machinesData(list.vcaStatus[key].machines);
+            list.vcaStatus[key].units = vcaUnits;
+            list.vcaStatus[key].applications = vcaApplication;
+            list.vcaStatus[key].machines = vcaMachines;
+            list.vcaStatus[key].relations = list.vcaStatus[key].relations;
+            list.vcaStatus[key].model = list.vcaStatus[key].model;
+            const getEachModelData: SETMODELS = this.assignVCAStatusOfEachModel(list.vcaStatus[key]);
+            setModels.push(getEachModelData);
+            list.vcaStatus[assignNSInstancesID].vca_id = key;
+            list.vcaStatus[assignNSInstancesID].vca_name = list.name;
+            list.vcaStatus[assignNSInstancesID].ns_id = list.id;
+            list.vcaStatus[assignNSInstancesID].isLiveloading = liveData;
+            list.vcaStatus[assignNSInstancesID].timeOutSeconds = timeOutSeconds;
+            list.vcaStatus[assignNSInstancesID].vcaStatusModels = setModels;
+            const getAssignedData: VCADETAILS = this.formVCADetails(list.vcaStatus[assignNSInstancesID]);
+            assignVCADetails.push(getAssignedData);
+        });
+        return assignVCADetails[0];
+    }
+    /**
+     * Use to fetch the app data from vca_status @public
+     */
+    public appData(applicationData: VCAAPPLICATIONS): VCAAPPLICATIONS[] {
+        const vcaApplication: VCAAPPLICATIONS[] = [];
+        Object.keys(applicationData).forEach((applicationKey: string): void => {
+            const charmSplitlist: string[] = applicationData[applicationKey].charm.split('/');
+            const status: string = applicationData[applicationKey].status.status;
+            const charm: string = charmSplitlist[1].substr(0, charmSplitlist[1].lastIndexOf('-'));
+            const store: string = charmSplitlist[0].substr(0, charmSplitlist[0].lastIndexOf(':'));
+            applicationData[applicationKey].app_id = applicationKey;
+            applicationData[applicationKey].charm = charm;
+            applicationData[applicationKey].status = status;
+            applicationData[applicationKey].scale = Object.keys(applicationData[applicationKey].units).length;
+            applicationData[applicationKey].store = store;
+            applicationData[applicationKey].configs = !isNullOrUndefined(applicationData[applicationKey].configs) ?
+                applicationData[applicationKey].configs : null;
+            applicationData[applicationKey].actions = !isNullOrUndefined(applicationData[applicationKey].actions) ?
+                applicationData[applicationKey].actions : null;
+            vcaApplication.push(applicationData[applicationKey]);
+        });
+        return vcaApplication;
+    }
+    /**
+     * Use to fetch the units data from vca_status @public
+     */
+    public unitsData(applicationData: VCAAPPLICATIONS[]): VCAUNITS[] {
+        const vcaUnits: VCAUNITS[] = [];
+        applicationData.forEach((applicationList: VCAAPPLICATIONS): void => {
+            Object.keys(applicationList.units).forEach((unitsKey: string): void => {
+                applicationList.units[unitsKey].unit_id = unitsKey;
+                vcaUnits.push(applicationList.units[unitsKey]);
+            });
+        });
+        return vcaUnits;
+    }
+    /**
+     * Use to fetch the machines data from vca_status @public
+     */
+    public machinesData(machinesData: MACHINES[]): MACHINES[] {
+        const vcaMachines: MACHINES[] = [];
+        Object.keys(machinesData).forEach((machineKey: string): void => {
+            vcaMachines.push(machinesData[machineKey]);
+        });
+        return vcaMachines;
+    }
+    /** Show the Config list in modal using modalservice @public */
+    public showExecutedActionsList(executeActionsList: EXECUTEDACTIONS[]): void {
+        this.modalService.open(OperationalViewAppExecutedActionsComponent, { size: 'xl', backdrop: 'static' })
+            .componentInstance.params = { executedActions: executeActionsList };
+    }
+    /** Show the Config list in modal using modalservice @public */
+    public showConfigList(configList: object): void {
+        this.modalService.open(OperationalViewAppConfigsComponent, { size: 'xl', backdrop: 'static' })
+            .componentInstance.params = { configs: configList };
+    }
+    /** Show the Config list in modal using modalservice @public */
+    public showActionsList(actionsList: object): void {
+        this.modalService.open(OperationalViewAppActionsComponent, { size: 'xl', backdrop: 'static' })
+            .componentInstance.params = { actions: actionsList };
+    }
+    /** Call the live data to fetch the latest results @public */
+    public callLiveData(isChecked: boolean, getNSID: string, index: number): void {
+        this.vcaDetails[index].isLiveloading = isChecked;
+        if (isChecked) {
+            this.stopExistingModelLiveLoading(getNSID);
+            this.generateRefreshedData(getNSID, index, this.vcaDetails[index].timeOutSeconds);
+        } else {
+            this.clearTimeoutAndInterval();
+        }
+    }
+    /** Fetching the juju vca_status data from API and Load it in the respective model @public */
+    public generateRefreshedData(getNSID: string, index: number, secondsValue: number): void {
+        this.modalService.dismissAll();
+        const liveDataURL: string = environment.NSDINSTANCES_URL + '/' + getNSID;
+        this.generateNSData(liveDataURL, true, secondsValue).subscribe((getVCAStatusDetails: VCADETAILS): void => {
+            this.vcaDetails[index] = getVCAStatusDetails;
+            this.callSetTimeOut(getNSID, index, secondsValue);
+        }, (error: ERRORDATA): void => {
+            this.restService.handleError(error, 'get');
+            if (error.error.status === HttpStatus.NOT_FOUND) {
+                this.vcaDetails.splice(index, 1);
+            }
+            this.clearTimeoutAndInterval();
+        });
+    }
+    /** Call the setimeout to refresh the all models data in regular timeout @public */
+    public callSetTimeOut(id: string, index: number, secondsValue: number): void {
+        this.clearTimeoutAndInterval();
+        this.timeOut = window.setTimeout((): void => {
+            this.generateRefreshedData(id, index, secondsValue);
+        }, secondsValue * this.timeDefaultCal);
+    }
+    /** Stop existing model live reload @public */
+    public stopExistingModelLiveLoading(getNSID: string): void {
+        this.clearTimeoutAndInterval();
+        this.vcaDetails.forEach((vcaDetail: VCADETAILS, i: number): void => {
+            if (vcaDetail.ns_id !== getNSID) {
+                vcaDetail.isLiveloading = false;
+            }
+        });
+    }
+    /** Method to show/hide the tables @public */
+    public showHideTables(event: HTMLElement, getTableName: string, index: number): void {
+        let selectedClassName: string = getTableName + index;
+        if (selectedClassName === 'all' + index) {
+            selectedClassName = '';
+        }
+        document.querySelectorAll('.filter' + index).forEach((button: HTMLElement): void => {
+            button.classList.remove('active');
+            if (selectedClassName !== '') {
+                if (button.classList.contains(selectedClassName)) {
+                    button.classList.add('active');
+                }
+            } else if (button.classList.contains('all' + index)) {
+                button.classList.add('active');
+            }
+        });
+        document.querySelectorAll('.filterTable' + index).forEach((table: HTMLElement): void => {
+            table.classList.remove('hide');
+            if (selectedClassName !== '') {
+                if (!table.classList.contains(selectedClassName)) {
+                    table.classList.add('hide');
+                }
+            }
+        });
+    }
+    /** Get the timer selected @public */
+    public onSetTimerSelector(getSeconds: number, nsID: string, index: number): void {
+        this.vcaDetails[index].timeOutSeconds = getSeconds;
+        this.callLiveData(true, nsID, index);
+    }
+    /** Clear settimeOut and setinterval @public */
+    public clearTimeoutAndInterval(): void {
+        clearTimeout(this.timeOut);
+    }
+    /**
+     * Lifecyle hook which get trigger on component destruction
+     */
+    public ngOnDestroy(): void {
+        this.clearTimeoutAndInterval();
+        this.generateDataSub.unsubscribe();
+    }
+}
diff --git a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html
new file mode 100644
index 0000000..08e6ec7
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.html
@@ -0,0 +1,42 @@
+<!--
+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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{ 'ACTIONS' | translate }}</h4>
+    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+        <i class="fas fa-times-circle text-danger"></i>
+    </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+    <table class="table table-sm">
+        <thead class="thead-dark">
+            <tr>
+                <th scope="col">{{ 'ACTIONS' | translate }}</th>
+                <th scope="col">{{ 'DESCRIPTION' | translate }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let actions of actionsData">
+                <th scope="row">{{actions.actions ? actions.actions : '-'}}</th>
+                <td>{{actions.description ? actions.description : '-'}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
new file mode 100644
index 0000000..5a4f48e
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
@@ -0,0 +1,67 @@
+/*
+ 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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App actions Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppActionsComponent.html as template url
+ */
+@Component({
+  selector: 'app-operational-view-app-actions',
+  templateUrl: './OperationalViewAppActionsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppActionsComponent */
+export class OperationalViewAppActionsComponent implements OnInit {
+  /** Invoke service injectors @public */
+  public injector: Injector;
+
+  /** Get the actions data @public */
+  public actionsData: {}[];
+
+  /** Instance for active modal service @public */
+  public activeModal: NgbActiveModal;
+
+  /** Input contains component objects @private */
+  @Input() private params: URLPARAMS;
+
+  /** creates Operational view app actions component */
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.activeModal = this.injector.get(NgbActiveModal);
+  }
+
+  /**
+   * Lifecyle Hooks the trigger before component is instantiate
+   */
+  public ngOnInit(): void {
+    this.actionsData = [];
+    if (!isNullOrUndefined(this.params.actions)) {
+      this.actionsData = Object.keys(this.params.actions).map((key: string): Object => (
+        {
+          actions: key,
+          description: this.params.actions[key]
+        }));
+    }
+  }
+}
diff --git a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html
new file mode 100644
index 0000000..95264f6
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.html
@@ -0,0 +1,50 @@
+<!--
+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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{ 'CONFIG' | translate }}</h4>
+    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+        <i class="fas fa-times-circle text-danger"></i>
+    </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+    <table class="table table-sm">
+        <thead class="thead-dark">
+            <tr>
+                <th scope="col">{{ 'NAME' | translate }}</th>
+                <th scope="col">{{ 'DEFAULT' | translate }}</th>
+                <th scope="col">{{ 'DESCRIPTION' | translate }}</th>
+                <th scope="col">{{ 'SOURCE' | translate }}</th>
+                <th scope="col">{{ 'TYPE' | translate }}</th>
+                <th scope="col">{{ 'VALUE' | translate }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let configs of configData">
+                <th scope="row">{{configs.name}}</th>
+                <td>{{configs.default ? configs.default : '-'}}</td>
+                <td>{{configs.description ? configs.description : '-'}}</td>
+                <td>{{configs.source ? configs.source : '-'}}</td>
+                <td>{{configs.type ? configs.type : '-'}}</td>
+                <td>{{configs.value ? configs.value : '-'}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
new file mode 100644
index 0000000..1e1b453
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
@@ -0,0 +1,71 @@
+/*
+ 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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App configs Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppConfigsComponent.html as template url
+ */
+@Component({
+  selector: 'app-operational-view-app-configs',
+  templateUrl: './OperationalViewAppConfigsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppConfigsComponent */
+export class OperationalViewAppConfigsComponent implements OnInit {
+  /** Invoke service injectors @public */
+  public injector: Injector;
+
+  /** Get the config data @public */
+  public configData: {}[];
+
+  /** Instance for active modal service @public */
+  public activeModal: NgbActiveModal;
+
+  /** Input contains component objects @private */
+  @Input() private params: URLPARAMS;
+
+  /** creates Operational view app config component */
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.activeModal = this.injector.get(NgbActiveModal);
+  }
+
+  /**
+   * Lifecyle Hooks the trigger before component is instantiate
+   */
+  public ngOnInit(): void {
+    this.configData = [];
+    if (!isNullOrUndefined(this.params.configs)) {
+      this.configData = Object.keys(this.params.configs).map((key: string): Object => (
+        {
+          name: key,
+          default: this.params.configs[key].default,
+          description: this.params.configs[key].description,
+          source: this.params.configs[key].source,
+          type: this.params.configs[key].type,
+          value: this.params.configs[key].value
+        }));
+    }
+  }
+}
diff --git a/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html
new file mode 100644
index 0000000..65323b9
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.html
@@ -0,0 +1,53 @@
+<!--
+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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{ 'EXECUTEDACTIONS' | translate }}</h4>
+    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+        <i class="fas fa-times-circle text-danger"></i>
+    </button>
+</div>
+<div class="modal-body modal-body-custom-height">
+    <table class="table table-sm">
+        <thead class="thead-dark">
+            <tr>
+                <th scope="col">{{ 'ID' | translate }}</th>
+                <th scope="col">{{ 'ACTION' | translate }}</th>
+                <th scope="col">{{ 'OUTPUT' | translate }}</th>
+                <th scope="col">{{ 'STATUS' | translate }}</th>
+                <th scope="col">{{ 'VERIFIED' | translate }}</th>
+                <th scope="col">{{ 'CODE' | translate }}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr *ngFor="let executedActions of executedActionsData">
+                <td>{{executedActions.id ? executedActions.id : '-'}}</td>
+                <td>{{executedActions.action ? executedActions.action : '-'}}</td>
+                <td>{{executedActions.output ? executedActions.output : '-'}}</td>
+                <td>{{executedActions.status ? executedActions.status : '-'}}</td>
+                <td>{{executedActions.verified ? executedActions.verified : '-'}}</td>
+                <td>{{executedActions.Code ? executedActions.Code : '-'}}</td>
+            </tr>
+            <tr class="text-center" *ngIf="isExecutedActionNotAvailable">
+                <td colspan="6">{{ 'PAGE.OPERATIONALDASHBOARD.NOEXECUTEDACTIONS' | translate }}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CLOSE' | translate}}</button>
+</div>
\ No newline at end of file
diff --git a/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
new file mode 100644
index 0000000..af39f79
--- /dev/null
+++ b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
@@ -0,0 +1,69 @@
+/*
+ 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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+
+/**
+ * @file Page for Operational View App Executed actions Component
+ */
+import { Component, Injector, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { URLPARAMS } from 'CommonModel';
+import { EXECUTEDACTIONS } from 'OperationalModel';
+import { isNullOrUndefined } from 'util';
+/**
+ * Creating component
+ * @Component takes OperationalViewAppExecutedActionsComponent.html as template url
+ */
+@Component({
+  selector: 'app-operational-view-executed-app-actions',
+  templateUrl: './OperationalViewAppExecutedActionsComponent.html'
+})
+/** Exporting a class @exports OperationalViewAppExecutedActionsComponent */
+export class OperationalViewAppExecutedActionsComponent implements OnInit {
+  /** Invoke service injectors @public */
+  public injector: Injector;
+
+  /** Get the Executed actions data @public */
+  public executedActionsData: EXECUTEDACTIONS[];
+
+  /** Instance for active modal service @public */
+  public activeModal: NgbActiveModal;
+
+  /** Is executed action not available @public */
+  public isExecutedActionNotAvailable: boolean = false;
+
+  /** Input contains component objects @private */
+  @Input() private params: URLPARAMS;
+
+  /** creates Operational view app executed actions component */
+  constructor(injector: Injector) {
+    this.injector = injector;
+    this.activeModal = this.injector.get(NgbActiveModal);
+  }
+
+  /**
+   * Lifecyle Hooks the trigger before component is instantiate
+   */
+  public ngOnInit(): void {
+    if (!isNullOrUndefined(this.params.executedActions) && this.params.executedActions.length > 0) {
+      this.params.executedActions.sort((a: EXECUTEDACTIONS, b: EXECUTEDACTIONS): number => (+a.id > +b.id ? 1 : +a.id < +b.id ? -1 : 0));
+      this.executedActionsData = this.params.executedActions;
+    } else {
+      this.isExecutedActionNotAvailable = true;
+    }
+  }
+}
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
index 977a87e..8a32bb7 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.html
@@ -16,6 +16,9 @@
 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="btn-group list action" role="group">
+    <button routerLink="/instances/operational-view/{{instanceID}}" type="button" class="btn btn-primary" placement="top" container="body" [disabled]="isShowOperationalDashboard" ngbTooltip="{{'PAGE.OPERATIONALDASHBOARD.TITLE' | translate}}">
+        <i class="fas fa-tachometer-alt"></i>
+    </button>
     <button type="button" class="btn btn-primary" (click)="metrics()" placement="top" container="body" [disabled]="operationalStatus == 'failed' || configStatus == 'failed'" ngbTooltip="{{'METRICS' | translate}}">
         <i class="fas fa-chart-bar icons"></i>
     </button>
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
index ed24a67..a66f78a 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
@@ -77,15 +77,18 @@
   /** Assign the VNF Details @public */
   public vnfDetails: VNFD[] = [];
 
+  /** Contains instance ID @public */
+  public instanceID: string;
+
+  /** Contains operational dashboard view @public */
+  public isShowOperationalDashboard: boolean = false;
+
   /** Instance of the modal service @private */
   private modalService: NgbModal;
 
   /** Holds teh instance of AuthService class of type AuthService @private */
   private router: Router;
 
-  /** Contains instance ID @private */
-  private instanceID: string;
-
   /** Contains all methods related to shared @private */
   private sharedService: SharedService;
 
@@ -120,6 +123,8 @@
     this.operationalStatus = this.value.OperationalStatus;
     this.instanceID = this.value.identifier;
     this.getAdminDetails = this.value.adminDetails;
+    this.isShowOperationalDashboard = !isNullOrUndefined(this.value.vcaStatus) ?
+      Object.keys(this.value.vcaStatus).length === 0 && typeof this.value.vcaStatus === 'object' : true;
   }
 
   /** Shows information using modalservice @public */
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 8e24408..5d67b03 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -140,6 +140,7 @@
     "SUBMIT": "Submit",
     "REFRESH": "Aktualisierung",
     "OPEN": "Öffnen",
+    "CLOSE": "Schließen",
     "UPLOADCONFIG": "Upload Config",
     "FILEUPLOADLABEL": "Oder aus Datei laden",
     "CONFIG": "Konfig",
@@ -154,6 +155,16 @@
     "SCALEIN": "Scale In",
     "SCALING": "Manuelle Skalierung",
     "SCALINGNOTFOUND": "scaling-aspect nicht in vnfd gefunden",
+    "NODATA": "Derzeit sind keine Daten verfügbar",
+    "STATUS": "Status",
+    "PUBLICADDRESS": "Öffentliche Adresse",
+    "EXECUTEDACTIONS": "Ausgeführte Aktionen",
+    "OUTPUT": "Ausgabe",
+    "VERIFIED": "Verifiziert",
+    "CODE": "Code",
+    "SCALE": "Rahmen",
+    "DEFAULT": "Standard",
+    "SOURCE": "Quelle",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Instrumententafel",
@@ -429,6 +440,36 @@
             "OSMREPOTITLE": "Registriertes OSM-Repository",
             "CREATEDSUCCESSFULLY": "OSM-Repository erfolgreich hinzugefügt",
             "UPDATEDSUCCESSFULLY": "OSM-Repository erfolgreich aktualisiert"
+        },
+        "OPERATIONALDASHBOARD": {
+            "TITLE": "Betriebs-Dashboard",
+            "MODELSUMMARY": "Modellzusammenfassung",
+            "MODEL": "Modell",
+            "APPLICATION": "App",
+            "APPLICATIONTITLE": "Apps",
+            "UNITS": "Einheit",
+            "UNITSTITLE": "Einheiten",
+            "RELATIONS": "Beziehungen",
+            "NOAPPLICATION": "Es gibt keine Anwendung in diesem Modell",
+            "NOUNITS": "Es gibt keine Einheiten in diesem Modell",
+            "NORELATIONS": "In diesem Modell gibt es keine Beziehungen",
+            "NOMACHINES": "Es gibt keine Maschinen in diesem Modell",
+            "NOEXECUTEDACTIONS": "In diesem Modell sind keine Aktionen ausgeführt",
+            "MACHINE": "Maschine",
+            "MACHINETITLE": "Maschinen",
+            "MESSAGE": "Botschaft",
+            "WORKLOAD": "Arbeitsbelastung",
+            "AGENT": "Agent",
+            "ADDRESS": "Adresse",
+            "INTERFACE": "Interface",
+            "REQUIRER": "Requerente",
+            "RELATIONPROVIDER": "Provedor de relacionamento",
+            "CHARM": "Charm",
+            "STORE": "Loja",
+            "LEADER": "Führer",
+            "LIVELOAD": "Live-Laden",
+            "SETSECONDS": "Timer einstellen",
+            "SERIES": "Serie"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 11cbc54..c412e15 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -140,6 +140,7 @@
     "SUBMIT": "Submit",
     "REFRESH": "Refresh",
     "OPEN": "Open",
+    "CLOSE": "Close",
     "UPLOADCONFIG": "Upload Config",
     "FILEUPLOADLABEL": "Or load from file",
     "CONFIG": "Config",
@@ -154,6 +155,16 @@
     "SCALEIN": "Scale In",
     "SCALING": "Manual Scaling",
     "SCALINGNOTFOUND": "scaling-aspect not found in vnfd",
+    "NODATA": "Currently data not available",
+    "STATUS": "Status",
+    "PUBLICADDRESS": "Public Address",
+    "EXECUTEDACTIONS": "Executed Actions",
+    "OUTPUT": "Output",
+    "VERIFIED": "Verified",
+    "CODE": "Code",
+    "SCALE": "Scale",
+    "DEFAULT": "Default",
+    "SOURCE": "Source",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Dashboard",
@@ -429,6 +440,36 @@
             "OSMREPOTITLE": "Registered OSM repository",
             "CREATEDSUCCESSFULLY": "OSM Repository Added Successfully",
             "UPDATEDSUCCESSFULLY": "OSM Repository Updated Successfully"
+        },
+        "OPERATIONALDASHBOARD": {
+            "TITLE": "Operational Dashboard",
+            "MODELSUMMARY": "Model Summary",
+            "MODEL": "Model",
+            "APPLICATION": "App",
+            "APPLICATIONTITLE": "Apps",
+            "UNITS": "Unit",
+            "UNITSTITLE": "Units",
+            "RELATIONS": "Relations",
+            "NOAPPLICATION": "There are no application in this model",
+            "NOUNITS": "There are no units in this model",
+            "NORELATIONS": "There are no relations in this model",
+            "NOMACHINES": "There are no machines in this model",
+            "NOEXECUTEDACTIONS": "There are no executed actions in this model",
+            "MACHINE": "Machine",
+            "MACHINETITLE": "Machines",
+            "MESSAGE": "Message",
+            "WORKLOAD": "Workload",
+            "AGENT": "Agent",
+            "ADDRESS": "Address",
+            "INTERFACE": "Interface",
+            "REQUIRER": "Requirer",
+            "RELATIONPROVIDER": "Relation Provider",
+            "CHARM": "Charm",
+            "STORE": "Store",
+            "LEADER": "Leader",
+            "LIVELOAD": "Live Loading",
+            "SETSECONDS": "Set Timer",
+            "SERIES": "Series"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index a74a931..55c9490 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -139,7 +139,8 @@
     "CURRENTPROJECT": "Proyecto actual",
     "SUBMIT": "Entrar",
     "REFRESH": "Actualizar",
-    "OPEN": "Abierto",
+    "OPEN": "Abrir",
+    "CLOSE": "Cerrar",
     "UPLOADCONFIG": "Subir configuración",
     "FILEUPLOADLABEL": "O cargar desde el archivo",
     "CONFIG": "Config",
@@ -154,6 +155,16 @@
     "SCALEIN": "Escalar",
     "SCALING": "Escalado manual",
     "SCALINGNOTFOUND": "scaling-aspect no encontrado en vnfd",
+    "NODATA": "Actualmente datos no disponibles",
+    "STATUS": "Estado",
+    "PUBLICADDRESS": "Dirección pública",
+    "EXECUTEDACTIONS": "Acciones ejecutadas",
+    "OUTPUT": "Salida",
+    "VERIFIED": "Verificada",
+    "CODE": "Código",
+    "SCALE": "Escala",
+    "DEFAULT": "por defecto",
+    "SOURCE": "Fuente",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Tablero",
@@ -429,6 +440,36 @@
             "OSMREPOTITLE": "Repositorio OSM registrado",
             "CREATEDSUCCESSFULLY": "Repositorio OSM agregado correctamente",
             "UPDATEDSUCCESSFULLY" : "Repositorio OSM actualizado correctamente"
+        },
+        "OPERATIONALDASHBOARD": {
+            "TITLE": "Tablero operativo",
+            "MODELSUMMARY": "Resumen de modelo",
+            "MODEL": "Modelo",
+            "APPLICATION": "App",
+            "APPLICATIONTITLE": "Apps",
+            "UNITS": "Unidad",
+            "UNITSTITLE": "Unidades",
+            "RELATIONS": "Relaciones",
+            "NOAPPLICATION": "No hay aplicación en este modelo.",
+            "NOUNITS": "No hay unidades en este modelo",
+            "NORELATIONS": "No hay relaciones en este modelo.",
+            "NOMACHINES": "No hay máquinas en este modelo.",
+            "NOEXECUTEDACTIONS": "No hay acciones ejecutadas en este modelo",
+            "MACHINE": "Máquina",
+            "MACHINETITLE": "Máquinas",
+            "MESSAGE": "Mensaje",
+            "WORKLOAD": "Carga de trabajo",
+            "AGENT": "Agente",
+            "ADDRESS": "Dirección",
+            "INTERFACE": "Interfaz",
+            "REQUIRER": "Solicitante",
+            "RELATIONPROVIDER": "Proveedor de relaciones",
+            "CHARM": "Charm",
+            "STORE": "Tienda",
+            "LEADER": "Líder",
+            "LIVELOAD": "Cargando en vivo",
+            "SETSECONDS": "Configurar temporizador",
+            "SERIES": "serie"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index d4ebbfc..b0f7985 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -140,6 +140,7 @@
     "SUBMIT": "Enviar",
     "REFRESH": "Atualizar",
     "OPEN": "Aberto",
+    "CLOSE": "Fechar",
     "UPLOADCONFIG": "Upload Config",
     "FILEUPLOADLABEL": "Ou carregue do arquivo",
     "CONFIG": "Config",
@@ -154,6 +155,16 @@
     "SCALEIN": "Escala em",
     "SCALING": "Escalonamento Manual",
     "SCALINGNOTFOUND": "scaling-aspect não encontrado no vnfd",
+    "NODATA": "Atualmente, os dados não estão disponíveis",
+    "STATUS": "Status",
+    "PUBLICADDRESS": "Endereço público",
+    "EXECUTEDACTIONS": "Ações Executadas",
+    "OUTPUT": "Resultado",
+    "VERIFIED": "Verificada",
+    "CODE": "Code",
+    "SCALE": "Escala",
+    "DEFAULT": "Padrão",
+    "SOURCE": "Fonte",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "painel de controle",
@@ -429,6 +440,36 @@
             "OSMREPOTITLE": "Repositório OSM registrado",
             "CREATEDSUCCESSFULLY": "registrado OSM adicionado com sucesso",
             "UPDATEDSUCCESSFULLY": "registrado OSM atualizado com sucesso"
+        },
+        "OPERATIONALDASHBOARD": {
+            "TITLE": "Painel Operacional",
+            "MODELSUMMARY": "Resumo do modelo",
+            "MODEL": "Modelo",
+            "APPLICATION": "App",
+            "APPLICATIONTITLE": "Apps",
+            "UNITS": "Unidade",
+            "UNITSTITLE": "Unidades",
+            "RELATIONS": "Relações",
+            "NOAPPLICATION": "Não há aplicação neste modelo",
+            "NOUNITS": "Não há unidades neste modelo",
+            "NORELATIONS": "Não há relações neste modelo",
+            "NOMACHINES": "Não há máquinas neste modelo",
+            "NOEXECUTEDACTIONS": "Não há ações executadas neste modelo",
+            "MACHINE": "Máquina",
+            "MACHINETITLE": "Maquinas",
+            "MESSAGE": "mensagem",
+            "WORKLOAD": "Carga de trabalho",
+            "AGENT": "Agente",
+            "ADDRESS": "Endereço",
+            "INTERFACE": "Interface",
+            "REQUIRER": "Requerente",
+            "RELATIONPROVIDER": "Provedor de relacionamento",
+            "CHARM": "Charm",
+            "STORE": "Loja",
+            "LEADER": "Líder",
+            "LIVELOAD": "Carregando ao vivo",
+            "SETSECONDS": "Definir temporizador",
+            "SERIES": "Series"
         }
     },
     "HTTPERROR": {
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index 38318a7..8dd8399 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -128,9 +128,6 @@
       color: $gray-400;
     }
   }
-  .modal-dialog {
-    max-width: 600px;
-  }
   .header-style {
     @include font(null, 1.2rem, 700);
     color: $primary;
@@ -182,6 +179,37 @@
       }
     }
   }
+  .juju-section {
+    .card {
+      @include roundedCorners(4);
+      margin-bottom: 0.25rem;
+      box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+      .bg-secondary {
+        @include background(null, $primary !important, null, null, null);
+        b,
+        span {
+          color: $white;
+        }
+      }
+      .card-body {
+        .seconds-btn-group .active {
+          color: $white;
+          @include background(null, $primary !important, null, null, null);
+        }
+        @include border(all, 2, dashed, $primary);
+        @include padding-value(5, 5, 5, 5);
+        border-top: 0;
+        table {
+          thead th {
+            font-size: 12px;
+          }
+          tbody th i.active-icon {
+            font-size: 10px;
+          }
+        }
+      }
+    }
+  }
   .card {
     margin-bottom: 1rem;
   }
@@ -694,6 +722,93 @@
       }
     }
   }
+  /** Switch Design **/
+  .switch {
+    @include position_value(relative, null, null, null, null);
+    @include flexbox(inline-block, null, null, null, null, null);
+    @include wh-value(50px, 15px);
+    @include margin-value(0, 0, 0, 0);
+    input {
+      opacity: 0;
+      @include wh-value(0px, 0px);
+      &:checked + .slider {
+        @include background(null, $gray-400, null, null, null);
+        &:before {
+          @include background(null, $pure-red, null, null, null);
+          left: 5px;
+          animation: pulse 2s infinite;
+          -webkit-transform: translateX(26px);
+          -ms-transform: translateX(26px);
+          transform: translateX(26px);
+        }
+        .on {
+          @include flexbox(block, null, null, null, null, null);
+        }
+        .off {
+          @include flexbox(none, null, null, null, null, null);
+        }
+      }
+    }
+    .slider {
+      @include position_value(absolute, 0, 0, 0, 0);
+      cursor: pointer;
+      @include background(null, $gray-400, null, null, null);
+      -webkit-transition: 0.4s;
+      transition: 0.4s;
+      box-shadow: 0 0 1px $gray-400;
+      &.round {
+        @include roundedCorners(30);
+        &:before {
+          @include roundedCornersPercentage(50%);
+        }
+      }
+      &:before {
+        @include position_value(absolute, null, null, -2px, 0px);
+        @include wh-value(20px, 20px);
+        @include background(null, $white, null, null, null);
+        content: "";
+        -webkit-transition: 0.4s;
+        transition: 0.4s;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+      }
+      .on {
+        @include flexbox(none, null, null, null, null, null);
+        @include position_value(absolute, 50%, null, null, 35% !important);
+      }
+      .on,
+      .off {
+        @include position_value(absolute, 50%, null, null, 65%);
+        color: $primary;
+        transform: translate(-50%, -50%);
+        @include font(null, 11px, bold);
+      }
+    }
+    @-webkit-keyframes pulse {
+      0% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+      }
+      70% {
+        -webkit-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+      }
+      100% {
+        -webkit-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+      }
+    }
+    @keyframes pulse {
+      0% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+        box-shadow: 0 0 0 0 rgba(204, 89, 44, 0.4);
+      }
+      70% {
+        -moz-box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+        box-shadow: 0 0 0 10px rgba(204, 89, 44, 0);
+      }
+      100% {
+        -moz-box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+        box-shadow: 0 0 0 0 rgba(204, 89, 44, 0);
+      }
+    }
+  }
 }
 /****************************************************************************/
 /************************** MEDIA QUERIES ***********************************/
@@ -709,6 +824,25 @@
 .text-captilize {
   text-transform: capitalize;
 }
-.text-info{
+.text-info {
   color: $secondary !important;
 }
+.hide {
+  @include flexbox(none, null, null, null, null, null);
+}
+.title-bar {
+  .name-width {
+    @include wh-value(20%, null);
+  }
+  .id-width {
+    @include wh-value(25%, null);
+  }
+}
+.filter-actions {
+  button {
+    @include roundedCorners(10);
+    @include padding-percentage-value(0.2rem, 1rem, 0.2rem, 1rem);
+    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+    border: none;
+  }
+}
diff --git a/src/models/CommonModel.ts b/src/models/CommonModel.ts
index 7bd1cca..7b51e9e 100644
--- a/src/models/CommonModel.ts
+++ b/src/models/CommonModel.ts
@@ -17,6 +17,7 @@
  */
 import { HttpHeaders } from '@angular/common/http';
 import { NSD } from 'NSInstanceModel';
+import { EXECUTEDACTIONS } from 'OperationalModel';
 import { VNFD } from 'VNFDModel';
 
 /**
@@ -41,7 +42,8 @@
     oneMB = 1048576,
     paginationDefaultValue = 10,
     splitLongitude = 1,
-    splitLatitude = 2
+    splitLatitude = 2,
+    timeOutDefaultSeconds = 5
 }
 /**
  * handle count @enum
@@ -115,6 +117,9 @@
     nsID?: string;
     nsd?: NSD;
     data?: VNFD[];
+    configs?: object;
+    actions?: object;
+    executedActions?: EXECUTEDACTIONS[];
 }
 /** Handle the Delete params */
 export interface DELETEPARAMS {
diff --git a/src/models/MenuModel.ts b/src/models/MenuModel.ts
index deb9654..d9d0620 100644
--- a/src/models/MenuModel.ts
+++ b/src/models/MenuModel.ts
@@ -134,6 +134,16 @@
                 icon: 'fas fa-layer-group',
                 menuName: 'PAGE.DASHBOARD.NETSLICEINSTANCE',
                 isChildExists: false
+            },
+            {
+                liClass: '',
+                anchorTagClass: 'link',
+                routerLink: '/instances/operational-view',
+                routerLinkActive: childActiveClass,
+                routerLinkActiveOptions: false,
+                icon: 'fas fa-tachometer-alt',
+                menuName: 'PAGE.OPERATIONALDASHBOARD.TITLE',
+                isChildExists: false
             }
         ]
     },
diff --git a/src/models/NSInstanceModel.ts b/src/models/NSInstanceModel.ts
index ce44122..62b9c5c 100644
--- a/src/models/NSInstanceModel.ts
+++ b/src/models/NSInstanceModel.ts
@@ -48,6 +48,7 @@
     instantiate_params: InstantiateParam;
     additionalParamsForNs: AdditionalParamForN;
     _id?: string;
+    vcaStatus?: object;
 }
 
 /** Interface for Admin */
@@ -179,6 +180,7 @@
     state?: string;
     memberIndex?: DF[];
     nsConfig?: object;
+    vcaStatus?: object;
     adminDetails?: object;
     vnfID?: string[];
     nsd?: NSD;
diff --git a/src/models/OperationalModel.ts b/src/models/OperationalModel.ts
new file mode 100644
index 0000000..79f248e
--- /dev/null
+++ b/src/models/OperationalModel.ts
@@ -0,0 +1,147 @@
+/*
+ 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: BARATH KUMAR R (barath.r@tataelxsi.co.in)
+ */
+
+/**
+ * @file  Model for Operational view JUJU information.
+ */
+
+// tslint:disable: completed-docs
+
+/** Interface for the VCASTATUS */
+export interface VCASTATUS {
+    vcaStatus: VCADETAILS;
+    name: string;
+    id: string;
+}
+/** Interface for the VCASTATUS */
+export interface VCADETAILS {
+    isLiveloading: boolean;
+    ns_id: string;
+    vcaStatusModels: SETMODELS[];
+    timeOutSeconds?: number;
+    vca_id: string;
+    vca_name: string;
+}
+/** Interface for the SETMODELS */
+export interface SETMODELS {
+    applications: VCAAPPLICATIONS[];
+    branches?: {};
+    controller_timestamp?: string;
+    executedActions?: EXECUTEDACTIONS;
+    machines: MACHINES[];
+    model: VCAMODEL;
+    offers?: {};
+    relations: RELATIONS[];
+    remote_applications?: {};
+    units: VCAUNITS[];
+    unknown_fields?: {};
+}
+/** Interface for the VCAAPPLICATIONS */
+export interface VCAAPPLICATIONS {
+    app_id: string;
+    charm: string;
+    store: string;
+    units: {};
+    status: STATUS;
+    scale: number;
+    public_address: string;
+    agent_status: AGENTSTATUS;
+    configs: object;
+    actions: object;
+}
+/** Interface for the VCAUNITS */
+export interface VCAUNITS {
+    address: string;
+    machine: string;
+    unit_id: string;
+    public_address: string;
+    status: string;
+    agent_status: AGENTSTATUS;
+}
+/** Interface for the EXECUTEDACTIONS */
+export interface EXECUTEDACTIONS {
+    id: string;
+    action: string;
+    status: string;
+    Code: string;
+    outout: string;
+    verified: string;
+}
+/** Interface for the VCAMODEL */
+export interface VCAMODEL {
+    available_version: string;
+    cloud_tag: string;
+    migration: string;
+    name: string;
+    region: string;
+    version: string;
+}
+/** Interface for the STATUS */
+export interface STATUS {
+    status: string;
+}
+/** Interface for the AGENTSTATUS */
+export interface AGENTSTATUS {
+    status: string;
+    info?: string;
+}
+/** Interface for the MACHINES */
+export interface MACHINES {
+    id_: string;
+    agent_status: AGENTSTATUS;
+    dns_name: string;
+    instance_id: string;
+    series: string;
+    instance_status: AGENTSTATUS;
+}
+/** Interface for the RELATIONS */
+export interface RELATIONS {
+    endpoints: ENDPOINTS[];
+    'interface': string;
+    key: string;
+}
+/** Interface for the ENDPOINTS */
+export interface ENDPOINTS {
+    application: string;
+    name: string;
+    role: string;
+    subordinate: string;
+}
+/** Interface for the SETTIMER */
+export interface SETTIMER {
+    label: string;
+    value: number;
+}
+export const SET_TIMER: SETTIMER[] = [
+    {
+        label: '5s',
+        value: 5
+    },
+    {
+        label: '10s',
+        value: 10
+    },
+    {
+        label: '30s',
+        value: 30
+    },
+    {
+        label: '1m',
+        value: 60
+    }
+];
diff --git a/tsconfig.json b/tsconfig.json
index 6397742..7c024ea 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -142,7 +142,12 @@
             "OsmRepositoriesAction" : ["src/app/utilities/osm-repositories-action/OsmRepositoriesActionComponent"],
             "OsmRepoModel": ["src/models/OsmRepoModel"],
             "OsmRepoCreateUpdate": ["src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent"],
-            "ScalingComponent": ["src/app/utilities/scaling/ScalingComponent"]
+            "ScalingComponent": ["src/app/utilities/scaling/ScalingComponent"],
+            "OperationalViewComponent": ["src/app/operational-view/OperationalViewComponent"],
+            "OperationalModel": ["src/models/OperationalModel"],
+            "OperationalAppConfigsComponent": ["src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent"],
+            "OperationalAppActionsComponent": ["src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent"],
+            "OperationalAppExecutedActionsComponent" : ["src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent"]
         }
     }
 }
\ No newline at end of file