diff --git a/src/app/instances/netslice-instances/NetsliceInstancesComponent.html b/src/app/instances/netslice-instances/NetsliceInstancesComponent.html
index e8b3c0c..90342fd 100644
--- a/src/app/instances/netslice-instances/NetsliceInstancesComponent.html
+++ b/src/app/instances/netslice-instances/NetsliceInstancesComponent.html
@@ -15,7 +15,7 @@
 
 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 d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
     <div class="d-flex align-items-center header-style">{{'PAGE.DASHBOARD.NETSLICEINSTANCE' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" placement="top" container="body"
@@ -25,8 +25,8 @@
         </button>
     </span>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-2 list-utilites-actions">
+    <div class="col-auto me-auto">
         <nav class="custom-items-config">
             <span><i class="fas fa-clock text-warning"></i>{{operationalStateFirstStep}}</span>
             <span><i class="fas fa-check-circle text-success"></i>{{operationalStateSecondStep}} /
@@ -34,7 +34,7 @@
             <span><i class="fas fa-times-circle text-danger"></i>{{operationalStateThirdStep}}</span>
         </nav>
     </div>
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">
diff --git a/src/app/instances/ns-history-operations/HistoryOperationsComponent.html b/src/app/instances/ns-history-operations/HistoryOperationsComponent.html
index 7890a13..aabdd78 100644
--- a/src/app/instances/ns-history-operations/HistoryOperationsComponent.html
+++ b/src/app/instances/ns-history-operations/HistoryOperationsComponent.html
@@ -15,18 +15,18 @@
 
 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 d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
     <div class="d-flex align-items-center header-style">{{'HISTORYOFOPERATIONS' | translate}}</div>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-2 list-utilites-actions">
+    <div class="col-auto me-auto">
         <nav class="custom-items-config">
             <span><i class="fas fa-clock text-warning"></i>{{historyStateFirstStep}}</span>
             <span><i class="fas fa-check-circle text-success"></i>{{historyStateSecondStep}}</span>
             <span><i class="fas fa-times-circle text-danger"></i>{{historyStateThirdStep}}</span>
         </nav>
     </div>
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">
diff --git a/src/app/instances/ns-history-operations/HistoryOperationsComponent.ts b/src/app/instances/ns-history-operations/HistoryOperationsComponent.ts
index afbefdb..da3ff10 100644
--- a/src/app/instances/ns-history-operations/HistoryOperationsComponent.ts
+++ b/src/app/instances/ns-history-operations/HistoryOperationsComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file NS History Of Operations Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Router } from '@angular/router';
@@ -32,7 +31,7 @@
 import { NSDInstanceData } from 'NSInstanceModel';
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { ShowInfoComponent } from 'ShowInfoComponent';
 
 /**
diff --git a/src/app/instances/ns-instances/NSInstancesComponent.html b/src/app/instances/ns-instances/NSInstancesComponent.html
index 568ac86..8ee93b8 100644
--- a/src/app/instances/ns-instances/NSInstancesComponent.html
+++ b/src/app/instances/ns-instances/NSInstancesComponent.html
@@ -15,17 +15,17 @@
 
 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 d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
     <div class="d-flex align-items-center header-style">{{'NSINSTANCES' | translate}}</div>
     <span class="button">
-        <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.NSINSTANCE.NEWNSINSTANCE' | translate}}"
+        <button class="btn btn-primary me-2" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.NSINSTANCE.NEWNSINSTANCE' | translate}}"
             (click)="instantiateNS()">
             <i class="fa fa-paper-plane" aria-hidden="true"></i>&nbsp; {{'PAGE.NSINSTANCE.NEWNSINSTANCE' | translate}}
         </button>
     </span>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-2 list-utilites-actions">
+    <div class="col-auto me-auto">
         <nav class="custom-items-config">
             <span><i class="fas fa-clock text-warning"></i>{{operationalStateFirstStep}}</span>
             <span><i class="fas fa-check-circle text-success"></i>{{operationalStateSecondStep}} /
@@ -35,11 +35,12 @@
             <span><i class="fas fa-briefcase-medical text-success"></i>{{operationalStateFifthStep}}</span>
         </nav>
     </div>
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">
-    <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource" (userRowSelect)="onUserRowSelect($event)">
+    <ng2-smart-table [ngClass]="checkDataClass" [settings]="settings" [source]="dataSource"
+        (userRowSelect)="onUserRowSelect($event)">
     </ng2-smart-table>
 </div>
 <app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.html b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
index 34b8a0e..f5344ff 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.html
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.html
@@ -23,33 +23,33 @@
 </div>
 <form [formGroup]="primitiveForm" (ngSubmit)="execPrimitive()">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label">{{'PRIMITIVETYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select (change)="primitiveTypeChange($event)" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="primitiveTypeList" bindLabel="title" bindValue="value" [(ngModel)]="primitiveType" id="primitiveType" [ngModelOptions]="{standalone: true}"
                     [ngClass]="{ 'is-invalid': submitted && !primitiveType }"></ng-select>
             </div>
         </div>
-        <div class="form-group row" *ngIf="primitiveType === 'VNF_Primitive' || primitiveType === 'VDU_Primitive' || primitiveType === 'KDU_Primitive'">
+        <div class="form-group row mb-3" *ngIf="primitiveType === 'VNF_Primitive' || primitiveType === 'VDU_Primitive' || primitiveType === 'KDU_Primitive'">
             <label class="col-sm-4 col-form-label">VNF Profile ID *</label>
             <div class="col-sm-3">
                 <ng-select (change)="indexChange($event, primitiveType)" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="memberTypes" bindLabel="id" bindValue="id" formControlName="member_vnf_index" id="member_vnf_index"
                     [ngClass]="{ 'is-invalid': submitted && f.member_vnf_index.errors }"></ng-select>
             </div>
         </div>
-        <div class="form-group row" *ngIf="primitiveType === 'VDU_Primitive'">
+        <div class="form-group row mb-3" *ngIf="primitiveType === 'VDU_Primitive'">
             <label class="col-sm-4 col-form-label">{{'SELECT' | translate}} VDU *</label>
             <div class="col-sm-8">
                 <ng-select (change)="getPrimitiveList($event, 'vdu')" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="vduList" bindLabel="name" bindValue="id" formControlName="vdu_id" id="vdu_id" [ngClass]="{ 'is-invalid': submitted && f.vdu_id.errors }"></ng-select>
             </div>
         </div>
-        <div class="form-group row" *ngIf="primitiveType === 'KDU_Primitive'">
+        <div class="form-group row mb-3" *ngIf="primitiveType === 'KDU_Primitive'">
             <label class="col-sm-4 col-form-label">{{'SELECT' | translate}} KDU *</label>
             <div class="col-sm-8">
                 <ng-select (change)="getPrimitiveList($event, 'kdu')" [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="kduList" bindLabel="name" bindValue="name" formControlName="kdu_name" id="kdu_name" [ngClass]="{ 'is-invalid': submitted && f.kdu_name.errors }"></ng-select>
             </div>
         </div>
-        <div class="form-group row" *ngIf="primitiveType">
+        <div class="form-group row mb-3" *ngIf="primitiveType">
             <label class="col-sm-4 col-form-label">
                 {{'PAGE.NSPRIMITIVE.PRIMITIVE' | translate}}*</label>
             <div class="col-sm-8">
@@ -65,7 +65,7 @@
                 </div>
             </div>
             <div formArrayName="primitive_params" *ngFor="let params of getControls(); let i = index;">
-                <div class="form-group row" [formGroupName]="i">
+                <div class="form-group row mb-3" [formGroupName]="i">
                     <label class="col-sm-2 col-form-label">{{'NAME' | translate}}:</label>
                     <div class="col-sm-3">
                         <ng-select placeholder="{{'SELECT' | translate}}" [clearable]="false" [items]="primitiveParameter" bindLabel="name" bindValue="name" formControlName="primitive_params_name" id="parameter{{i}}" [ngClass]="{ 'is-invalid': submitted && params.controls.primitive_params_name.errors }">
diff --git a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
index 8f39a20..cf60b57 100644
--- a/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
+++ b/src/app/instances/ns-primitive/NSPrimitiveComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file NS Instance Primitive Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@@ -30,7 +29,7 @@
 import { KDUPRIMITIVELEVEL, NSData, VDUPRIMITIVELEVEL, VNFPROFILE } from 'NSDModel';
 import { NSPrimitiveParams } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { CONFIGPRIMITIVE, DF, VDUCONFIG, VDUPROFILE, VNFCONFIG, VNFD } from 'VNFDModel';
 import { VNFInstanceDetails } from 'VNFInstanceModel';
 
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.html b/src/app/instances/ns-topology/NSTopologyComponent.html
index 084f90e..108a4ed 100644
--- a/src/app/instances/ns-topology/NSTopologyComponent.html
+++ b/src/app/instances/ns-topology/NSTopologyComponent.html
@@ -26,7 +26,7 @@
         <div class="sidebar-body">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowNSDetails && nsInfo">
                 <div class="row">
-                    <div class="col-12 p-0">
+                    <div class="col-12">
                         <table class="table table-bordered text-dark custom-table">
                             <tr>
                                 <td>{{'NS' | translate}} {{'INSTANCE' | translate}} Id</td>
@@ -137,7 +137,7 @@
     <div class="row ns-instance-form justify-content-end ">
         <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
             <div class="row">
-                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 pl-0">
+                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 ps-0">
                     <div class="btn-group list" role="group" aria-label="Basic example">
                         <button type="button" class="btn btn-primary topology-btn" (click)="onFreeze()"
                             [class.pinned]="classApplied" placement="top" container="body"
@@ -146,7 +146,7 @@
                         </button>
                     </div>
                 </div>
-                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-right pr-0 badgegroup">
+                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-end pe-0 badgegroup">
                     <span class="badge badge-primary badge-pill bg-white text-body font-weight-bold">
                         <img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
                         <br>VNFR</span>
diff --git a/src/app/instances/ns-topology/NSTopologyComponent.ts b/src/app/instances/ns-topology/NSTopologyComponent.ts
index 8981e26..57e9ca2 100644
--- a/src/app/instances/ns-topology/NSTopologyComponent.ts
+++ b/src/app/instances/ns-topology/NSTopologyComponent.ts
@@ -30,8 +30,8 @@
 import { CCI, DF, VLC, VNFPROFILE } from 'NSDModel';
 import { COMPOSERNODES, CONNECTIONPOINT, NSD, NSDVLD, NSINFO, NSInstanceDetails, NSINSTANCENODES, VLINFO, VNFRINFO } from 'NSInstanceModel';
 import { GRAPHDETAILS, Tick, TickPath } from 'NSTopologyModel';
-import { RestService } from 'src/services/RestService';
-import { isNullOrUndefined } from 'util';
+import { RestService } from 'RestService';
+import { isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/instances/pdu-instances/PDUInstancesComponent.html b/src/app/instances/pdu-instances/PDUInstancesComponent.html
index 3c18bfa..8e7ac45 100644
--- a/src/app/instances/pdu-instances/PDUInstancesComponent.html
+++ b/src/app/instances/pdu-instances/PDUInstancesComponent.html
@@ -15,7 +15,7 @@
 
 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 d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
     <div class="d-flex align-items-center header-style">{{'PDUINSTANCES' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" placement="top" container="body"
@@ -25,8 +25,8 @@
         </button>
     </span>
 </div>
-<div class="row mt-2 mb-0 form-group justify-content-end list-utilites-actions">
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+<div class="mt-2 mb-2 form-group justify-content-end list-utilites-actions">
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">
diff --git a/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.html b/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.html
index 54e36fa..1a9a0a7 100644
--- a/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.html
+++ b/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.html
@@ -22,8 +22,8 @@
     </button>
 </div>
 <form [formGroup]="pduInstancesForm" (ngSubmit)="createPDUInstances()" autocomplete="off">
-    <div class="modal-body">
-        <div class="form-group row">
+    <div class="modal-body pb-0">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label" [ngClass]="{'text-danger': pduInstancesForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
             <label class="col-sm-3 col-form-label" for="name">{{'NAME' | translate}}*</label>
             <div class="col-sm-3">
@@ -35,7 +35,7 @@
                 <input placeholder="{{'PAGE.PDUINSTANCE.PDUTYPE' | translate}}" type="text" class="form-control" formControlName="type" id="type" [ngClass]="{ 'is-invalid': submitted && f.type.errors }">
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-3 col-form-label" for="vim_accounts">{{'VIMACCOUNTS' | translate}}*</label>
             <div class="col-sm-9">
                 <ng-select placeholder="{{'VIMACCOUNTS' | translate}}" [items]="vimAccountSelect" multiple="true" bindLabel="name" bindValue="_id" formControlName="vim_accounts" id="vim_accounts"
@@ -43,7 +43,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row p-2 bg-light text-dark">
+        <div class="form-group row p-2 bg-light text-dark mb-3">
             <div class="col-sm-7 align-self-center"><span>{{'PAGE.PDUINSTANCE.PARAMETERS' | translate}}</span></div>
             <div class="col-sm-5">
                 <button type="button" class="btn btn-primary" (click)="createInterfaces()">
@@ -67,7 +67,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="row mr-top-5">
+                        <div class="row me-top-5 mb-3">
                             <label class="col-sm-2 col-form-label" for="mgmt{{i}}">{{'MGMT' | translate}}*</label>
                             <div class="col-sm-4">
                                 <ng-select placeholder="{{'SELECT' | translate}} {{'MGMT' | translate}}" [items]="mgmtState" bindLabel="name" bindValue="value" formControlName="mgmt" id="mgmt{{i}}" [ngClass]="{ 'is-invalid': submitted && params.controls.mgmt.errors }"></ng-select>
@@ -87,7 +87,7 @@
             </div>
         </div>
     </div>
-    <div class="modal-footer">
+    <div class="modal-footer mt-3">
         <button type="button" class="btn btn-danger" (click)="activeModal.close()">{{'CANCEL' | translate}}</button>
         <button type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
     </div>
diff --git a/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.scss b/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.scss
index 950bb39..81553bb 100644
--- a/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.scss
+++ b/src/app/instances/pdu-instances/add-pdu-instances/AddPDUInstancesComponent.scss
@@ -31,4 +31,5 @@
     align-items: center;
     font-size: 20px;
     cursor: pointer;
+    margin-bottom: 15px;
 }
\ No newline at end of file
diff --git a/src/app/instances/vnf-instances/VNFInstancesComponent.html b/src/app/instances/vnf-instances/VNFInstancesComponent.html
index e36cc3d..609af69 100644
--- a/src/app/instances/vnf-instances/VNFInstancesComponent.html
+++ b/src/app/instances/vnf-instances/VNFInstancesComponent.html
@@ -15,11 +15,11 @@
 
 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 d-flex flex-row justify-content-between">
+<div class="d-flex flex-row justify-content-between">
     <div class="d-flex align-items-center header-style">{{'VNFINSTANCES' | translate}}</div>
 </div>
-<div class="row mt-2 mb-0 form-group justify-content-end list-utilites-actions">
-    <page-per-row class="mr-2" (pagePerRow)="onChange($event)"></page-per-row>
+<div class="mt-2 mb-2 form-group justify-content-end list-utilites-actions">
+    <page-per-row class="me-2" (pagePerRow)="onChange($event)"></page-per-row>
     <page-reload></page-reload>
 </div>
 <div class="smarttable-style bg-white mt-1">