diff --git a/src/app/AppComponent.ts b/src/app/AppComponent.ts
index 1c5886a..26d7aab 100644
--- a/src/app/AppComponent.ts
+++ b/src/app/AppComponent.ts
@@ -19,13 +19,12 @@
 /**
  * @file App Components
  */
-import { isNullOrUndefined } from 'util';
 import { Component, HostListener, Injector } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DEFAULT_INTERRUPTSOURCES, Idle } from '@ng-idle/core';
 import { AuthenticationService } from 'AuthenticationService';
 import { DeviceCheckService } from 'DeviceCheckService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/AppModule.ts b/src/app/AppModule.ts
index 5a9c306..bdf27fc 100644
--- a/src/app/AppModule.ts
+++ b/src/app/AppModule.ts
@@ -158,7 +158,7 @@
         }),
         NgbModule,
         NgSelectModule,
-        RouterModule.forRoot(appRoutes, { useHash: false, relativeLinkResolution: 'legacy' }),
+        RouterModule.forRoot(appRoutes, { useHash: false }),
         NgIdleKeepaliveModule.forRoot(),
         LoaderModule,
         SharedModule,
diff --git a/src/app/dashboard/DashboardComponent.html b/src/app/dashboard/DashboardComponent.html
index 9689e03..d7dabe3 100644
--- a/src/app/dashboard/DashboardComponent.html
+++ b/src/app/dashboard/DashboardComponent.html
@@ -66,7 +66,7 @@
             </div>
         </div>
         <div class="row module-counts">
-            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
                     <div class="status-card custom-card card-hover card aqua-card" routerLink="/packages/ns">
                         <i class="fas fa-box-open"></i>
@@ -88,7 +88,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
                     <div class="status-card custom-card card-hover card purple-card" routerLink="/packages/vnf">
                         <i class="fas fa-box-open"></i>
@@ -110,7 +110,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4 p-0">
+            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mb-3">
                     <div class="status-card custom-card card-hover card pink-card" routerLink="/vim/details">
                         <i class="fas fa-server"></i>
@@ -135,20 +135,20 @@
         </div>
         <div class="row mb-2">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-                <div class="custom-card card mt-2 text-primary">
+                <div class="custom-card card mt-2 text-primary pb-3">
                     <div class="text-center header-style pt-2">{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</div>
                     <div class="row p-2">
                         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                             <div class="form-row">
                                 <div class="form-group col-md-6">
                                     <label for="vimType">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}</label>
-                                    <ng-select (change)="getSelectedVimTypeList($event.value)" [clearable]="false"
+                                    <ng-select (change)="getSelectedVimTypeList($event.value)" class="mt-2 vimdetails" [clearable]="false"
                                         placeholder="{{'SELECT' | translate}}" [items]="vimTypes" bindLabel="title"
                                         bindValue="value" id="vimType"></ng-select>
                                 </div>
-                                <div class="form-group col-md-6">
+                                <div class="form-group col-md-6 me-0">
                                     <label for="vimList">{{'PAGE.VIMDETAILS.NAME' | translate}}</label>
-                                    <ng-select (change)="getSelectedVIMDetails($event)" [clearable]="false"
+                                    <ng-select (change)="getSelectedVIMDetails($event)" class="mt-2 vimdetails" [clearable]="false"
                                         placeholder="{{'SELECT' | translate}}" [items]="vimList" bindLabel="name"
                                         bindValue="name" id="vimList" [(ngModel)]="vimListData"></ng-select>
                                 </div>
diff --git a/src/app/dashboard/DashboardComponent.scss b/src/app/dashboard/DashboardComponent.scss
index df3c6b1..4f14da5 100644
--- a/src/app/dashboard/DashboardComponent.scss
+++ b/src/app/dashboard/DashboardComponent.scss
@@ -20,6 +20,7 @@
  $min-height-set: 200px;
  .dashboard {
    .custom-card {
+     background-color: $white;
      word-wrap: break-word;
      @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
      @include transition(all, 0.2s, null, null);
@@ -37,7 +38,7 @@
      }
      &.pink-card {
        @include background(
-         linear-gradient(to left top, #d81b60, #e0306d, #e7407a, #ee4f87, #f55c94),
+         linear-gradient(to left top,#d81b60,#e0306d,#e7407a,#ee4f87,#f55c94),
          null,
          null,
          null,
@@ -46,7 +47,7 @@
      }
      &.purple-card {
        @include background(
-         linear-gradient(to left top, #605ca8, #736ebb, #8681ce, #9994e2, #aca7f6),
+         linear-gradient(to left top,#605ca8,#736ebb,#8681ce,#9994e2,#aca7f6),
          null,
          null,
          null,
@@ -55,7 +56,7 @@
      }
      &.aqua-card {
        @include background(
-         linear-gradient(to left top, #00c0ef, #00cdf5, #00dafa, #00e6fd, #0af3ff),
+         linear-gradient(to left top,#00c0ef,#00cdf5,#00dafa,#00e6fd,#0af3ff),
          null,
          null,
          null,
@@ -63,6 +64,7 @@
        );
      }
      .custom-card-header {
+       padding: 12px 20px 12px 20px;
        @include background(null, $primary, null, null, null);
        @include roundedTop(5);
        a {
@@ -77,6 +79,7 @@
          overflow-y: scroll;
          .list-group {
            .list-group-item {
+             background-color: $white;
              cursor: default;
              @include border(all, 0, solid, $black-coral);
              @include border(bottom, 1, solid, rgba(0, 0, 0, 0.125));
@@ -117,9 +120,9 @@
          &.show-canvas {
            @include flexbox(block !important, null, null, null, null, null);
          }
-         #canvas{
-          @include wh-value(100%, $min-height-set);
-        }
+         #canvas {
+           @include wh-value(100%, $min-height-set);
+         }
        }
      }
    }
@@ -157,4 +160,19 @@
        }
      }
    }
+   .font-weight-bold {
+     border-radius: 10px;
+   }
+   .form-row {
+     display: flex;
+     flex-wrap: wrap;
+     .form-group {
+       flex: 0 0 auto;
+       width: 47%;
+       margin-right: 25px;
+     }
+   }
+   .vimdetails {
+     width: 100%;
+   }
  }
\ No newline at end of file
diff --git a/src/app/dashboard/DashboardComponent.ts b/src/app/dashboard/DashboardComponent.ts
index d49f708..8112c06 100644
--- a/src/app/dashboard/DashboardComponent.ts
+++ b/src/app/dashboard/DashboardComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Dashboard Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { NotifierService } from 'angular-notifier';
@@ -35,7 +34,7 @@
 import { RestService } from 'RestService';
 import { Observable, Subscription } from 'rxjs';
 import { SDNControllerModel } from 'SDNControllerModel';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { ProjectRoleMappings, UserDetail } from 'UserModel';
 import { VimAccountDetails } from 'VimAccountModel';
 import { VNFInstanceDetails } from 'VNFInstanceModel';
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">
diff --git a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
index f06d098..707d8d6 100644
--- a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
+++ b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.html
@@ -23,7 +23,7 @@
     </button>
   </div>
   <div class="modal-body modal-body-custom-height">
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': k8sclusterForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-4 col-form-label" for="name">{{'PAGE.K8S.NAME' | translate}}*</label>
@@ -32,7 +32,7 @@
           formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="k8s_version">{{'PAGE.K8S.K8SVERSION' | translate}}*</label>
       <div class="col-sm-8">
         <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.K8SVERSION' | translate}}" type="text"
@@ -40,7 +40,7 @@
           required>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="vim_account">{{'PAGE.K8S.VIMACCOUNT' | translate}}*</label>
       <div class="col-sm-8">
         <ng-select placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.VIMACCOUNT' | translate}}"
@@ -49,7 +49,7 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="deployment_methods">{{'PAGE.K8S.DEPLOYMENTMETHODS' | translate}}*</label>
       <div class="col-sm-8">
         <ng-select placeholder="{{'SELECT' | translate}} {{'PAGE.K8S.DEPLOYMENTMETHODS' | translate}}"
@@ -61,7 +61,7 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
       <div class="col-sm-8">
         <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
@@ -69,29 +69,27 @@
           required></textarea>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="nets">{{'PAGE.K8S.NETS' | translate}}*</label>
       <div class="col-sm-8">
         <textarea rows="5" cols="50" class="form-control" placeholder="{{'PAGE.K8S.NETSPLACEHOLDER' | translate}}"
           formControlName="nets" id="nets" [ngClass]="{ 'is-invalid': submitted && f.nets.errors }" required></textarea>
         <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
         <div class="custom-file">
-          <input type="file" #fileInputNets class="custom-file-input" (change)="netsFile($event.target.files)"
+          <input type="file" #fileInputNets class="fileupload custom-file-input" (change)="netsFile($event.target.files)"
             id="customFileNets">
-          <label class="custom-file-label" #fileInputNetsLabel for="customFileNets">{{'CHOOSEFILE' | translate}}</label>
         </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="credentials">{{'PAGE.K8S.CREDENTIALS' | translate}}*</label>
       <div class="col-sm-8">
         <textarea rows="5" cols="50" class="form-control" placeholder="{{'YAMLCONFIG' | translate}}" formControlName="credentials"
           id="credentials" [ngClass]="{ 'is-invalid': submitted && f.credentials.errors }" required></textarea>
         <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
         <div class="custom-file">
-          <input type="file" #fileInputCredentials class="custom-file-input" (change)="credentialsFile($event.target.files)"
+          <input type="file" #fileInputCredentials class="fileupload custom-file-input" (change)="credentialsFile($event.target.files)"
             id="customFileCredentials">
-          <label class="custom-file-label" #fileInputCredentialsLabel for="customFileCredentials">{{'CHOOSEFILE' | translate}}</label>
         </div>
       </div>
     </div>
diff --git a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
index 4eb70f7..8115b6f 100644
--- a/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
+++ b/src/app/k8s/k8s-add-cluster/K8sAddClusterComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file K8sAddClusterComponent.ts.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -29,7 +28,7 @@
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 /**
  * Creating Component
diff --git a/src/app/k8s/k8s-add-repo/K8sAddRepoComponent.html b/src/app/k8s/k8s-add-repo/K8sAddRepoComponent.html
index 8caec5e..d2c68e8 100644
--- a/src/app/k8s/k8s-add-repo/K8sAddRepoComponent.html
+++ b/src/app/k8s/k8s-add-repo/K8sAddRepoComponent.html
@@ -23,7 +23,7 @@
     </button>
   </div>
   <div class="modal-body k8saddrepo">
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': k8srepoForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-4 col-form-label" for="name">{{'PAGE.K8S.NAME' | translate}}*</label>
@@ -32,7 +32,7 @@
           formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="type">{{'PAGE.K8S.TYPE' | translate}}*</label>
       <div class="col-sm-8">
         <ng-select [items]="repoTypeSelect" bindLabel="name" bindValue="id"
@@ -41,7 +41,7 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="url">{{'PAGE.K8S.URL' | translate}}*</label>
       <div class="col-sm-8">
         <input autocomplete="off" class="form-control" placeholder="{{'PAGE.K8S.URL' | translate}}" type="url"
@@ -51,7 +51,7 @@
         </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="description">{{'PAGE.K8S.DESCRIPTION' | translate}}*</label>
       <div class="col-sm-8">
         <textarea class="form-control" placeholder="{{'PAGE.K8S.DESCRIPTION' | translate}}" type="text"
diff --git a/src/app/k8s/k8scluster/K8sClusterComponent.html b/src/app/k8s/k8scluster/K8sClusterComponent.html
index ebed3e4..613e6aa 100644
--- a/src/app/k8s/k8scluster/K8sClusterComponent.html
+++ b/src/app/k8s/k8scluster/K8sClusterComponent.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.K8S.REGISTERK8CLUSTER' | translate}}</div>
   <span class="button">
     <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.K8S.ADDK8CLUSTER' | translate}}"
@@ -24,15 +24,15 @@
     </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}}</span>
       <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/k8s/k8srepository/K8sRepositoryComponent.html b/src/app/k8s/k8srepository/K8sRepositoryComponent.html
index e546356..16c9a37 100644
--- a/src/app/k8s/k8srepository/K8sRepositoryComponent.html
+++ b/src/app/k8s/k8srepository/K8sRepositoryComponent.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.K8S.REGISTERK8REPO' | translate}}</div>
   <span class="button">
     <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.K8S.ADDK8REPO' | translate}}"
@@ -24,8 +24,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/layouts/LayoutComponent.html b/src/app/layouts/LayoutComponent.html
index 96f1302..4413953 100644
--- a/src/app/layouts/LayoutComponent.html
+++ b/src/app/layouts/LayoutComponent.html
@@ -19,7 +19,7 @@
 <div id="main-wrapper" class="container-fluid" dir="ltr" appGottoTop>
     <div class="layout-wrapper mt-2">
         <app-sidebar></app-sidebar>
-        <div class="content-section pl-4">
+        <div class="content-section ps-4">
             <app-breadcrumb></app-breadcrumb>
             <div class="mt-2">
                 <div class="card custom-card shadow">
diff --git a/src/app/layouts/breadcrumb/BreadcrumbComponent.html b/src/app/layouts/breadcrumb/BreadcrumbComponent.html
index 9d028b3..0bd8d2a 100644
--- a/src/app/layouts/breadcrumb/BreadcrumbComponent.html
+++ b/src/app/layouts/breadcrumb/BreadcrumbComponent.html
@@ -16,7 +16,7 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <nav aria-label="breadcrumb" class="breadcrumb-holder">
-  <ul class="breadcrumb-custom pl-0">
+  <ul class="breadcrumb-custom ps-0">
     <li class="breadcrumb-item-custom" [routerLink]="item.url" *ngFor="let item of menuItems; let i = index" [class.active]="i===menuItems.length-1">
       <a *ngIf="i!==menuItems.length-1">
         <i *ngIf="i==0" class="fas fa-th-large"></i>&nbsp;&nbsp;{{item.title | translate}}
diff --git a/src/app/layouts/breadcrumb/BreadcrumbComponent.ts b/src/app/layouts/breadcrumb/BreadcrumbComponent.ts
index 1effed8..9f43da0 100644
--- a/src/app/layouts/breadcrumb/BreadcrumbComponent.ts
+++ b/src/app/layouts/breadcrumb/BreadcrumbComponent.ts
@@ -18,13 +18,13 @@
 /**
  * @file Bread Crumb component.
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, NavigationEnd, Router, RouterEvent, UrlSegment } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { BREADCRUMBITEM } from 'CommonModel';
 import { filter, startWith } from 'rxjs/operators';
+import { isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/layouts/header/HeaderComponent.html b/src/app/layouts/header/HeaderComponent.html
index 042f720..9d217d8 100644
--- a/src/app/layouts/header/HeaderComponent.html
+++ b/src/app/layouts/header/HeaderComponent.html
@@ -26,9 +26,9 @@
     <a class="navbar-brand">
         <img routerLink="/" src="assets/images/logo.png" class="osm-logo" alt="OPEN SOURCE MANO" draggable="false">
     </a>
-    <div class="nav navbar-nav nav-flex-icons ml-auto">
+    <div class="nav navbar-nav nav-flex-icons ms-auto">
         <h5>
-            <span class="badge badge-primary mt-2">{{'OSMVERSION' | translate}} {{sharedService.osmVersion}}</span>
+            <span class="badge bg-primary mt-2">{{'OSMVERSION' | translate}} {{sharedService.osmVersion}}</span>
         </h5>
         <ul class="navbar-nav cursor-pointer" ngbDropdown display="dynamic" placement="bottom-right">
             <li class="nav-item dropdown">
@@ -51,7 +51,7 @@
                 </div>
             </li>
         </ul>
-        <ul class="navbar-nav cursor-pointer text-right" ngbDropdown display="dynamic" placement="bottom-right">
+        <ul class="navbar-nav cursor-pointer text-end" ngbDropdown display="dynamic" placement="bottom-right">
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" id="navbarDropdown" ngbDropdownToggle>
                     <i class="fas fa-user-circle"></i> {{'USER' | translate}} ({{username$ | async}})
diff --git a/src/app/layouts/header/HeaderComponent.scss b/src/app/layouts/header/HeaderComponent.scss
index 81f90c1..0a5027a 100644
--- a/src/app/layouts/header/HeaderComponent.scss
+++ b/src/app/layouts/header/HeaderComponent.scss
@@ -18,6 +18,15 @@
 @import '../../../assets/scss/mixins/mixin';
 @import '../../../assets/scss/variable';
 
+.close {
+    opacity: 1;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 10px;
+    top: 2px;
+    font-size: 1.31rem;
+}
 .navbar{
     @include box-shadow(0px, 0px, 12px, 0px, rgba($black,0.14));
     @include border(all, 0, solid, $gray-80);
@@ -25,6 +34,7 @@
         cursor: pointer;
     }
     .custom-dropdown-menu {
+        background-color: white !important;
         .dropdown-item{
             &.project-item{
                 @include flexbox(flex, space-between, row, null, center, null);
diff --git a/src/app/layouts/header/HeaderComponent.ts b/src/app/layouts/header/HeaderComponent.ts
index fa932b8..45807f9 100644
--- a/src/app/layouts/header/HeaderComponent.ts
+++ b/src/app/layouts/header/HeaderComponent.ts
@@ -19,7 +19,6 @@
 /**
  * @file Header Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -29,7 +28,7 @@
 import { environment } from 'environment';
 import { ProjectService } from 'ProjectService';
 import { Observable } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { UserSettingsComponent } from 'UserSettingsComponent';
 
 /**
diff --git a/src/app/layouts/sidebar/SidebarComponent.ts b/src/app/layouts/sidebar/SidebarComponent.ts
index c328778..60ab756 100644
--- a/src/app/layouts/sidebar/SidebarComponent.ts
+++ b/src/app/layouts/sidebar/SidebarComponent.ts
@@ -19,9 +19,9 @@
 /**
  * @file Sidebar Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { DeviceCheckService } from 'DeviceCheckService';
+import { isNullOrUndefined } from 'SharedService';
 import { MENU_ITEMS, MENUITEMS } from 'src/models/MenuModel';
 
 /**
diff --git a/src/app/login/LoginComponent.ts b/src/app/login/LoginComponent.ts
index 45573e2..92fe3c3 100644
--- a/src/app/login/LoginComponent.ts
+++ b/src/app/login/LoginComponent.ts
@@ -19,7 +19,6 @@
 /**
  * @file Page for Login component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, Injector, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -31,7 +30,7 @@
 import { ToastrService } from 'ngx-toastr';
 import { RestService } from 'RestService';
 import { Observable } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { UserDetail } from 'UserModel';
 
 /**
diff --git a/src/app/operational-view/OperationalViewComponent.html b/src/app/operational-view/OperationalViewComponent.html
index e23f6a4..128bcb3 100644
--- a/src/app/operational-view/OperationalViewComponent.html
+++ b/src/app/operational-view/OperationalViewComponent.html
@@ -15,7 +15,7 @@
 
 Author: 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.OPERATIONALDASHBOARD.TITLE' | translate }}
         ({{ 'PAGE.OPERATIONALDASHBOARD.MODELSUMMARY' | translate }})</div>
     <page-reload></page-reload>
@@ -40,12 +40,12 @@
                     <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">
+                                <div class="form-group align-items-center mb-0 text-end p-0">
+                                    <label class="col-form-label fw-bold text-primary">
                                         {{ 'PAGE.OPERATIONALDASHBOARD.LIVELOAD' | translate}}
                                     </label>
                                     <!-- Live button switch -->
-                                    <label class="switch ml-1">
+                                    <label class="switch ms-1">
                                         <input id="liveData{{i}}" type="checkbox" [checked]="vcaDetail.isLiveloading"
                                             (change)="callLiveData($event.target.checked, vcaDetail.ns_id, i)">
                                         <div class="slider round">
@@ -54,7 +54,7 @@
                                         </div>
                                     </label>
                                     <!-- Seconds button group -->
-                                    <div class="btn-group list action ml-2 seconds-btn-group" role="group"
+                                    <div class="btn-group list action ms-2 seconds-btn-group" role="group"
                                         *ngIf="vcaDetail.isLiveloading">
                                         <button [disabled]="!vcaDetail.isLiveloading" type="button"
                                             class="btn btn-primary"
@@ -67,7 +67,7 @@
                         </div>
                     </div>
                     <ng-container *ngFor="let modelVCAStatus of vcaDetail.vcaStatusModels; let i = index;">
-                        <h5 class="font-weight-bold text-primary">
+                        <h5 class="fw-bold text-primary">
                             {{ 'PAGE.OPERATIONALDASHBOARD.MODEL' | translate }} {{i+1}} (Cloud/Region):
                             {{modelVCAStatus.model ? modelVCAStatus.model.cloud_tag : '-'}}/
                             {{modelVCAStatus.model ? modelVCAStatus.model.region : '-' }}
@@ -75,7 +75,7 @@
                         <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">
+                                    <div class="form-group align-items-center mb-0 p-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 }}
@@ -109,11 +109,11 @@
                                     </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">
+                                        <label class="col-form-label fw-bold text-primary">
                                             {{ 'EXECUTEDACTIONS' | translate }}
                                         </label>
                                         <button type="button"
-                                            class="btn btn-sm btn-primary border border-radius-default ml-1"
+                                            class="btn btn-sm btn-primary border border-radius-default ms-1"
                                             (click)="showExecutedActionsList(modelVCAStatus.executedActions);">
                                             <i class="fas fa-directions"></i>
                                         </button>
diff --git a/src/app/operational-view/OperationalViewComponent.ts b/src/app/operational-view/OperationalViewComponent.ts
index edb972a..0484de8 100644
--- a/src/app/operational-view/OperationalViewComponent.ts
+++ b/src/app/operational-view/OperationalViewComponent.ts
@@ -20,7 +20,6 @@
 /**
  * @file Page for Operational View Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -36,7 +35,7 @@
 import { Observable } from 'rxjs';
 import { Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 /**
  * Creating component
  * @Component takes OperationalViewComponent.html as template url
diff --git a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
index acee5ed..f622dbd 100644
--- a/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
+++ b/src/app/operational-view/operational-view-app-actions/OperationalViewAppActionsComponent.ts
@@ -19,10 +19,10 @@
 /**
  * @file Page for Operational View App actions Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'SharedService';
 /**
  * Creating component
  * @Component takes OperationalViewAppActionsComponent.html as template url
diff --git a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
index 4d40d2c..fafcc5f 100644
--- a/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
+++ b/src/app/operational-view/operational-view-app-configs/OperationalViewAppConfigsComponent.ts
@@ -19,10 +19,10 @@
 /**
  * @file Page for Operational View App configs Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { URLPARAMS } from 'CommonModel';
+import { isNullOrUndefined } from 'SharedService';
 /**
  * Creating component
  * @Component takes OperationalViewAppConfigsComponent.html as template url
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
index d761653..b589605 100644
--- a/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
+++ b/src/app/operational-view/operational-view-app-executed-actions/OperationalViewAppExecutedActionsComponent.ts
@@ -19,11 +19,11 @@
 /**
  * @file Page for Operational View App Executed actions Component
  */
-import { isNullOrUndefined } from 'util';
 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 'SharedService';
 /**
  * Creating component
  * @Component takes OperationalViewAppExecutedActionsComponent.html as template url
diff --git a/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html
index 38c753b..94adddf 100644
--- a/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html
+++ b/src/app/osm-repositories/osm-repo-create-update/OsmRepoCreateUpdateComponent.html
@@ -23,7 +23,7 @@
     </button>
   </div>
   <div class="modal-body osmrepoadd">
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': osmrepoForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-4 col-form-label" for="name">{{'NAME' | translate}}*</label>
@@ -33,7 +33,7 @@
           maxlength="{{sharedService.MAX_LENGTH_NAME}}" required>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="type">{{'TYPE' | translate}}*</label>
       <div class="col-sm-8">
         <ng-select bindLabel="title" bindValue="value" [items]="osmrepoType"
@@ -42,7 +42,7 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="url">{{'URL' | translate}}*</label>
       <div class="col-sm-8">
         <input autocomplete="off" class="form-control" placeholder="{{'URL' | translate}}" type="url"
@@ -52,7 +52,7 @@
         </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="description">{{'DESCRIPTION' | translate}}*</label>
       <div class="col-sm-8">
         <textarea rows="5" cols="50" class="form-control" placeholder="{{'DESCRIPTION' | translate}}" type="text"
diff --git a/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html
index 29cdbaa..5de280d 100644
--- a/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.html
+++ b/src/app/osm-repositories/osm-repositories-details/OsmRepositoriesDetailsComponent.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">{{'PAGE.OSMREPO.OSMREPOTITLE' | translate}}</div>
-    <span class="button">
+    <span class="button mb-0">
         <button class="btn btn-primary" type="button" (click)="addOsmrepo()" placement="top" container="body" ngbTooltip="{{'PAGE.OSMREPO.ADDOSMREPO' | translate}}">
             <i class="fas fa-plus-circle" aria-hidden="true"></i>
             {{'PAGE.OSMREPO.ADDOSMREPO' | translate}}
         </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/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.html b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.html
index af52927..61df6a9 100644
--- a/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.html
+++ b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.html
@@ -23,7 +23,7 @@
     </button>
   </div>
   <div class="modal-body modal-body-custom-height netsliceinstantiate-ns">
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': netSliceInstantiateForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-4 col-form-label" for="nsiName">{{'PAGE.NSTINSTANCEINSTANTIATE.NSNAME' | translate}}*</label>
@@ -33,7 +33,7 @@
           id="nsiName" [ngClass]="{ 'is-invalid': submitted && f.nsiName.errors }" required>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label"
         for="nsiDescription">{{'PAGE.NSTINSTANCEINSTANTIATE.DESCRIPTION' | translate}}*</label>
       <div class="col-sm-8">
@@ -42,7 +42,7 @@
           [ngClass]="{ 'is-invalid': submitted && f.nsiDescription.errors }" required></textarea>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="nstId">{{'PAGE.NSTINSTANCEINSTANTIATE.NSTID' | translate}}*</label>
       <div class="col-sm-8">
         <ng-select [items]="netSliceSelect" bindLabel="name" bindValue="_id"
@@ -52,7 +52,7 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label"
         for="vimAccountId">{{'PAGE.NSTINSTANCEINSTANTIATE.VIMACCOUNT' | translate}}*</label>
       <div class="col-sm-8">
@@ -63,29 +63,27 @@
         </ng-select>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="ssh_keys">{{'PAGE.NSTINSTANCEINSTANTIATE.SSHKEY' | translate}}</label>
       <div class="col-sm-8">
         <textarea class="form-control" placeholder="{{'PAGE.NSTINSTANCEINSTANTIATE.SSHKEYMSG' | translate}}"
           formControlName="ssh_keys" id="ssh_keys"></textarea>
         <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
         <div class="custom-file">
-          <input type="file" #fileInputSSH class="custom-file-input" (change)="sshFile($event.target.files)"
+          <input type="file" #fileInputSSH class="fileupload custom-file-input" (change)="sshFile($event.target.files)"
             id="customSSHFile">
-          <label class="custom-file-label" #fileInputSSHLabel for="customSSHFile">{{'CHOOSEFILE' | translate}}</label>
         </div>
       </div>
     </div>
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-4 col-form-label" for="config">{{'CONFIG' | translate}}</label>
       <div class="col-sm-8">
         <textarea class="form-control" placeholder="{{'YAMLCONFIG' | translate}}" formControlName="config"
           id="config"></textarea>
         <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
         <div class="custom-file">
-          <input type="file" #fileInputConfig class="custom-file-input" (change)="configFile($event.target.files)"
-            id="customConfigFile">
-          <label class="custom-file-label" #fileInputConfigLabel for="customConfigFile">{{'CHOOSEFILE' | translate}}</label>
+          <input type="file" #fileInputConfig class="fileupload custom-file-input" (change)="configFile($event.target.files)"
+          id="customConfigFile">
         </div>
       </div>
     </div>
diff --git a/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
index fb0abda..ab8b72f 100644
--- a/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
+++ b/src/app/packages/instantiate-net-slice-template/InstantiateNetSliceTemplateComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Instantiate NS Modal Component.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -33,7 +32,7 @@
 import { NetworkSliceData } from 'NetworkSliceModel';
 import { NSICREATEPARAMS } from 'NSDModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 /**
  * Creating component
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.html b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
index 2bbd837..428515e 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.html
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.html
@@ -23,7 +23,7 @@
         </button>
     </div>
     <div class="modal-body modal-body-custom-height instantiate-ns">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': instantiateForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
             <label class="col-sm-4 col-form-label"
@@ -35,7 +35,7 @@
                     [ngClass]="{ 'is-invalid': submitted && f.nsName.errors }" required>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label"
                 for="nsDescription">{{'PAGE.INSTANCEINSTANTIATE.DESCRIPTION' | translate}}*</label>
             <div class="col-sm-8">
@@ -44,7 +44,7 @@
                     [ngClass]="{ 'is-invalid': submitted && f.nsDescription.errors }" required></textarea>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="nsdId">{{'PAGE.INSTANCEINSTANTIATE.NSID' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select [items]="nsdSelect" bindLabel="name" bindValue="_id"
@@ -54,7 +54,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label"
                 for="vimAccountId">{{'PAGE.INSTANCEINSTANTIATE.VIMACCOUNT' | translate}}*</label>
             <div class="col-sm-6">
@@ -82,7 +82,7 @@
                 </button>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label"
                 for="ssh_keys">{{'PAGE.INSTANCEINSTANTIATE.SSHKEY' | translate}}</label>
             <div class="col-sm-8">
@@ -90,24 +90,20 @@
                     formControlName="ssh_keys" id="ssh_keys"></textarea>
                 <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
                 <div class="custom-file">
-                    <input type="file" #fileInputSSH class="custom-file-input" (change)="sshFile($event.target.files)"
+                    <input type="file" #fileInputSSH class="fileupload custom-file-input" (change)="sshFile($event.target.files)"
                         id="customSSHFile">
-                    <label class="custom-file-label" #fileInputSSHLabel
-                        for="customSSHFile">{{'CHOOSEFILE' | translate}}</label>
                 </div>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="config">{{'CONFIG' | translate}}</label>
             <div class="col-sm-8">
                 <textarea class="form-control" placeholder="{{'YAMLCONFIG' | translate}}" formControlName="config"
                     id="config"></textarea>
                 <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
                 <div class="custom-file">
-                    <input type="file" #fileInputConfig class="custom-file-input"
+                    <input type="file" #fileInputConfig class="fileupload custom-file-input"
                         (change)="configFile($event.target.files)" id="customConfigFile">
-                    <label class="custom-file-label" #fileInputConfigLabel
-                        for="customConfigFile">{{'CHOOSEFILE' | translate}}</label>
                 </div>
             </div>
         </div>
diff --git a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
index e0798d1..9ba89da 100644
--- a/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
+++ b/src/app/packages/instantiate-ns/InstantiateNsComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Instantiate NS Modal Component.
  */
-import { isNullOrUndefined } from 'util';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -31,7 +30,7 @@
 import * as jsyaml from 'js-yaml';
 import { NSCREATEPARAMS, NSData, NSDDetails } from 'NSDModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 
 /**
diff --git a/src/app/packages/netslice-template/NetsliceTemplateComponent.html b/src/app/packages/netslice-template/NetsliceTemplateComponent.html
index 6d41e11..176af9c 100644
--- a/src/app/packages/netslice-template/NetsliceTemplateComponent.html
+++ b/src/app/packages/netslice-template/NetsliceTemplateComponent.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.NETSLICETEMPLATE' | translate}}</div>
 </div>
 <div class="row">
@@ -27,8 +27,8 @@
         </div>
     </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">
diff --git a/src/app/packages/ns-packages/NSPackagesComponent.html b/src/app/packages/ns-packages/NSPackagesComponent.html
index 5b67268..c8229f3 100644
--- a/src/app/packages/ns-packages/NSPackagesComponent.html
+++ b/src/app/packages/ns-packages/NSPackagesComponent.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">NS {{'PACKAGES' | translate}}</div>
   <span class="button">
     <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.NSPACKAGE.ADDNSPACKAGE' | translate}}"
@@ -33,8 +33,8 @@
     </div>
   </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-0 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/packages/ns-packages/ns-composer/NSComposerComponent.html b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
index c4ec96d..d8c7df3 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.html
@@ -23,44 +23,44 @@
       <span class="topology_title" *ngIf="isShowVLDetails">{{'PAGE.TOPOLOGY.VIRTUALLINK' | translate}}</span>
       <span class="topology_title" *ngIf="isShowVNFDetails">{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
       <span class="topology_title" *ngIf="isShowCPDetails">{{'PAGE.TOPOLOGY.CONNECTIONPOINT' | translate}}</span>
-      <button (click)="toggleSidebar()" class="close" type="button">
+      <button (click)="toggleSidebar()" class="close-nsd" type="button">
         <i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
       </button>
     </div>
     <div class="sidebar-body">
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="isShowNSDDetails">
         <div class="row">
-          <div class="col-12 p-0">
+          <div class="col-12">
             <form autocomplete="off">
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
                     [(ngModel)]="nsPackageDetails.id">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'NAME' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'NAME' | translate }}" name="name"
                     [(ngModel)]="nsPackageDetails.name">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
                     name="description" [(ngModel)]="nsPackageDetails.description"></textarea>
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
                     [(ngModel)]="nsPackageDetails.version">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'DESIGNER' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'DESIGNER' | translate }}" name="designer"
@@ -162,7 +162,7 @@
 </ng-sidebar-container>
 <div class="container-fluid text-dark">
   <div class="row bg-white ns-composer-form">
-    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0 px-0">
+    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 ps-0 px-0">
       <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2">
           <fieldset class="p-2">
@@ -172,7 +172,7 @@
             <ul class="list-group list-group-flush dragable">
               <li class="list-group-item" draggable="true" (dragstart)="drag($event)" id="vl">
                 <img src="assets/images/VL.svg" class="ns-svg" draggable="false"/>
-                &nbsp;<span class="span-overflow-text font-weight-bold">{{'PAGE.TOPOLOGY.VL' | translate}}</span>
+                &nbsp;<span class="span-overflow-text fw-bold">{{'PAGE.TOPOLOGY.VL' | translate}}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
             </ul>
@@ -190,7 +190,7 @@
                 [attr.data-id]="list['id']" *ngFor="let list of vnfList" placement="top"
               container="body" ngbTooltip="{{ list['product-name'] }}">
                 <img src="assets/images/VNFD.svg" class="ns-svg" draggable="false"/>
-                &nbsp;<span class="span-overflow-text font-weight-bold">{{ list['product-name'] }}</span>
+                &nbsp;<span class="span-overflow-text fw-bold">{{ list['product-name'] }}</span>
                 <span class="drag-icon pull-right"><i class="fas fa-arrows-alt"></i></span>
               </li>
             </ul>
@@ -200,7 +200,7 @@
     </div>
     <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" ngbTooltip="{{(classApplied ? 'UNFREEZE' : 'FREEZE') | translate}}">
@@ -216,7 +216,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>{{'PAGE.TOPOLOGY.VNF' | translate}}</span>
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.scss b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.scss
index d750ccc..34eb552 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.scss
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.scss
@@ -14,4 +14,12 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+.close-nsd {
+    opacity: 1;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 4px;
+    font-size: 1.3125rem;
+}
\ No newline at end of file
diff --git a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
index 4552226..916ac8b 100644
--- a/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
+++ b/src/app/packages/ns-packages/ns-composer/NSComposerComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file NS Compose Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -43,7 +42,7 @@
   Tick, TickPath, VLC, VLD, VNFPROFILE
 } from 'NSDModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VNFD, VNFData } from 'VNFDModel';
 
 /**
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
index a947069..3ed9543 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.html
@@ -27,44 +27,44 @@
         translate}}</span>
       <span class="topology_title" *ngIf="showRightSideInfo === 'intcpInfo'">{{'PAGE.TOPOLOGY.INTCONNECTIONPOINT' |
         translate}}</span>
-      <button (click)="toggleSidebar()" class="close" type="button">
+      <button (click)="toggleSidebar()" class="close-vnfd" type="button">
         <i class="fas fa-times-circle text-danger" aria-hidden="true"></i>
       </button>
     </div>
     <div class="sidebar-body">
       <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2" *ngIf="showRightSideInfo === 'vnfdInfo'">
         <div class="row">
-          <div class="col-12 p-0">
+          <div class="col-12">
             <form>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'ID' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'ID' | translate }}" name="id"
                     [(ngModel)]="vnfdInfo.id">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'PRODUCTNAME' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'PRODUCTNAME' | translate }}"
                     name="product-name" [(ngModel)]="vnfdInfo['product-name']">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'DESCRIPTION' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <textarea rows="5" cols="50" class="form-control" placeholder="{{ 'DESCRIPTION' | translate }}"
                     name="description" [(ngModel)]="vnfdInfo.description"></textarea>
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'VERSION' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'VERSION' | translate }}" name="version"
                     [(ngModel)]="vnfdInfo.version">
                 </div>
               </div>
-              <div class="form-group row">
+              <div class="form-group row mb-3">
                 <label class="col-sm-4 col-form-label">{{ 'PROVIDER' | translate }}</label>
                 <div class="col-sm-8 p-0">
                   <input type="text" class="form-control" placeholder="{{ 'PROVIDER' | translate }}" name="provider"
@@ -182,7 +182,7 @@
 </ng-sidebar-container>
 <div class="container-fluid text-dark">
   <div class="row bg-white vnf-composer-form">
-    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 pl-0 px-0">
+    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 ps-0 px-0">
       <div class="row">
         <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mb-2">
           <fieldset class="p-2">
@@ -212,7 +212,7 @@
     </div>
     <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"
@@ -229,7 +229,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/VDU.svg" class="vnf-svg" draggable="false" />
             <br>{{'PAGE.TOPOLOGY.VDU' | translate}}</span>
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.scss b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.scss
index 4473c67..aa6b894 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.scss
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.scss
@@ -14,4 +14,12 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+.close-vnfd {
+    opacity: 1;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 4px;
+    font-size: 1.3125rem;
+}
\ No newline at end of file
diff --git a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
index eabd2b7..9fab0da 100644
--- a/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
+++ b/src/app/packages/ns-packages/vnf-composer/VNFComposerComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file VNFComposerComponent
  */
- import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -33,7 +32,7 @@
 import * as HttpStatus from 'http-status-codes';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { COMPOSERNODES, EXTCPD, GRAPHDETAILS, INTCPD, IVLD, Tick, TickPath, VDU, VDUINTCPD, VNFD, VNFDATA, VNIR } from 'VNFDModel';
 
 /**
diff --git a/src/app/packages/vnf-packages/VNFPackagesComponent.html b/src/app/packages/vnf-packages/VNFPackagesComponent.html
index 2d7298d..675e6d7 100644
--- a/src/app/packages/vnf-packages/VNFPackagesComponent.html
+++ b/src/app/packages/vnf-packages/VNFPackagesComponent.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">VNF {{'PACKAGES' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.VNFPACKAGE.ADDVNFPACKAGE' | translate}}"
@@ -33,8 +33,8 @@
         </div>
     </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">
diff --git a/src/app/projects/ProjectsComponent.html b/src/app/projects/ProjectsComponent.html
index ec15861..9186210 100644
--- a/src/app/projects/ProjectsComponent.html
+++ b/src/app/projects/ProjectsComponent.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">{{'PAGE.DASHBOARD.PROJECTS' | translate}}</div>
-    <span class="button">
+    <span class="button text-end">
         <button class="btn btn-primary" type="button" (click)="projectAdd()" placement="top" container="body" ngbTooltip="{{'PAGE.PROJECT.NEWPROJECT' | translate}}">
             <i class="fas fa-plus-circle" aria-hidden="true"></i>
             {{'PAGE.PROJECT.NEWPROJECT' | translate}}
         </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/projects/ProjectsComponent.ts b/src/app/projects/ProjectsComponent.ts
index 982421e..2c0e105 100644
--- a/src/app/projects/ProjectsComponent.ts
+++ b/src/app/projects/ProjectsComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Project details Component.
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -32,7 +31,7 @@
 import { ProjectsActionComponent } from 'ProjectsAction';
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
index 4e613fe..26a16c8 100644
--- a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
+++ b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.html
@@ -19,13 +19,13 @@
   <div class="modal-header">
     <h4 class="modal-title" id="modal-basic-title">{{ (getProjectType == 'Add' ? 'NEW' : 'EDIT') | translate}}
       {{'PROJECT' | translate}}</h4>
-    <button class="button-xs" type="button" class="close" aria-label="Close" (click)="activeModal.close()">
+    <button class="button-xs-2" 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">
     <div class="row" *ngIf="getProjectType === 'Add'">
-      <label class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10">{{'RECENTLY' | translate}}
+      <label class="col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 mb-2">{{'RECENTLY' | translate}}
         {{'CREATED' | translate}} {{'PROJECT' | translate}}:
         <b>{{(recentProject)?recentProject.name:''}}</b>
       </label>
@@ -39,7 +39,7 @@
           formControlName="project_name" [ngClass]="{ 'is-invalid': submitted && f.project_name.errors }" required>
       </div>
     </div>
-    <div class="form-group row" *ngIf="getProjectType === 'Add'">
+    <div class="form-group row mt-3" *ngIf="getProjectType === 'Add'">
       <label class="col-sm-4 col-form-label">{{'DOMAIN' | translate}} {{'NAME' | translate}}</label>
       <div class="col-sm-4">
         <ng-select [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="domains" bindLabel="title"
@@ -47,17 +47,17 @@
           [ngClass]="{ 'is-invalid': submitted && f.domain_name.errors }"></ng-select>
       </div>
     </div>
-    <div class="form-check form-check-inline ml-2">
-      <input class="form-check-input" type="checkbox" formControlName="enable_quota" (change)="checkQuota()"
+    <div class="form-check form-check-inline mt-3">
+      <input class="quotacheck form-check-input" type="checkbox" formControlName="enable_quota" (change)="checkQuota()"
         id="quotaCheck" *ngIf="getProjectType === 'Add' || quotaRefs === null">
-      <label class="form-check-label" for="quotaCheck"><b>{{'PAGE.PROJECT.QUOTA' | translate}}</b></label>
+      <label class="form-check-label" for="quotaCheck" [ngClass]="getProjectType === 'Edit'&& quotaRefs !== null?'quotaCheck-label':''"><b>{{'PAGE.PROJECT.QUOTA' | translate}}</b></label>
     </div>
-    <div class="row mt-1" [ngbCollapse]="!f.enable_quota.value">
-      <div class="form-group col-sm-6" *ngFor="let quota of quotaItems;">
+    <div class="row" [ngbCollapse]="!f.enable_quota.value">
+      <div class="form-group col-sm-6 mb-2 mt-2" *ngFor="let quota of quotaItems;">
         <div class="row">
           <label class="col-sm-7 col-form-label">{{quota.title | translate}}*</label>
           <div class="col-sm-5">
-            <input placeholder="{{'COUNT' | translate}}" type="number"
+            <input placeholder="{{'COUNT' | translate}}" type="number" min="0"
               class="form-control" [formControlName]="quota.value" [ngClass]="{ 'is-invalid': submitted && f[quota.value].errors }">
           </div>
         </div>
diff --git a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.scss b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.scss
index 021d205..568a9c9 100644
--- a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.scss
+++ b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.scss
@@ -14,4 +14,17 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/variable.scss";
+.quotacheck {
+   box-shadow: none;
+   border-radius: 2px;
+   border-color: $gray-600;
+}
+.form-check {
+   padding-left: 30px;
+}
+.quotaCheck-label {
+   position: absolute;
+   left: 26px;
+}
\ No newline at end of file
diff --git a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
index af6388d..2d45ef6 100644
--- a/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
+++ b/src/app/projects/project-create-update/ProjectCreateUpdateComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Project Add Modal
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@@ -30,7 +29,7 @@
 import { ProjectData, ProjectDetails, QUOTAITEM, QUOTA_ITEMS } from 'ProjectModel';
 import { ProjectService } from 'ProjectService';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/roles/roles-create-edit/RolesCreateEditComponent.html b/src/app/roles/roles-create-edit/RolesCreateEditComponent.html
index 7bb2a1f..7f33a21 100644
--- a/src/app/roles/roles-create-edit/RolesCreateEditComponent.html
+++ b/src/app/roles/roles-create-edit/RolesCreateEditComponent.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">
     {{ (getRoleType == 'Add' ? 'PAGE.ROLES.CREATEROLE' : 'PAGE.ROLES.EDITROLE') | translate}}</div>
   <span class="button">
@@ -30,22 +30,22 @@
     <label class="col-sm-12 col-form-label mandatory-label"
       [ngClass]="{'text-danger': roleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
     <label class="col-sm-2 col-form-label">{{'NAME' | translate}}*</label>
-    <div class="col-sm-5">
+    <div class="col-sm-5 mb-3">
       <input placeholder="{{'NAME' | translate}}" type="text" class="form-control" maxlength="30"
         formControlName="roleName" [ngClass]="{ 'is-invalid': submitted && f.roleName.errors }" required>
     </div>
   </div>
   <div class="form-group row" *ngIf="viewMode == 'text'">
     <label class="col-sm-2 col-form-label">{{'PAGE.ROLES.PERMISSIONS' | translate}}</label>
-    <div class="col-sm-5">
+    <div class="col-sm-5 mb-3">
       <textarea placeholder="{{'PAGE.ROLES.YAMLPERMISSIONS' | translate}}" rows="10" cols="50" type="text"
         class="form-control" formControlName="permissions"></textarea>
     </div>
   </div>
   <div class="form-group row" [ngClass]="{ 'justify-content-end': viewMode == 'text' }">
-    <div class="col-sm-6">
+    <div class="col-sm-6 mb-3">
       <button type="button" class="btn btn-danger" routerLink="/roles/details">{{'CANCEL' | translate}}</button>
-      <button class="btn btn-primary ml-3"
+      <button class="btn btn-primary ms-3"
         type="submit">{{ (getRoleType == 'Add' ? 'CREATE' : 'APPLY') | translate}}</button>
     </div>
   </div>
@@ -54,7 +54,7 @@
   <ngb-panel *ngFor="let permissionGroup of rolePermissions; let i = index">
     <ng-template ngbPanelHeader let-opened="opened">
       <div class="d-flex align-items-center justify-content-between">
-        <button ngbPanelToggle class="btn text-dark container-fluid text-left pl-0"><i
+        <button ngbPanelToggle class="btn text-dark container-fluid text-start ps-0 p-10"><i
           [ngClass]="{ 'fas': true, 'fa-angle-down': opened, 'fa-angle-right': !opened }"></i> {{permissionGroup.title}}</button>
       </div>
     </ng-template>
@@ -84,9 +84,9 @@
     </ng-template>
   </ngb-panel>
 </ngb-accordion>
-<div class="float-right" *ngIf="viewMode == 'preview'">
+<div class="float-end" *ngIf="viewMode == 'preview'">
   <button type="button" class="btn btn-danger" routerLink="/roles/details">{{'CANCEL' | translate}}</button>
-  <button class="btn btn-primary ml-3"
+  <button class="btn btn-primary ms-3"
     (click)="roleCheck()">{{ (getRoleType == 'Add' ? 'CREATE' : 'APPLY') | translate}}</button>
 </div>
 <app-loader [waitingMessage]="message" *ngIf="isLoadingResults"></app-loader>
\ No newline at end of file
diff --git a/src/app/roles/roles-create-edit/RolesCreateEditComponent.scss b/src/app/roles/roles-create-edit/RolesCreateEditComponent.scss
index 362973a..c2d0885 100644
--- a/src/app/roles/roles-create-edit/RolesCreateEditComponent.scss
+++ b/src/app/roles/roles-create-edit/RolesCreateEditComponent.scss
@@ -15,14 +15,19 @@
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 */
-@import '../../../assets/scss/mixins/mixin';
-@import '../../../assets/scss/variable';
- .custom-button{
+@import "../../../assets/scss/mixins/mixin";
+@import "../../../assets/scss/variable";
+button:focus:not(:focus-visible) {
+  border-color: $gray-400;
+}
+.custom-button {
   label {
-    @include padding-value(2,2,2,2);
+    @include padding-value(2, 2, 2, 2);
+    border: none;
     &.active {
+      border: none;
       @include background(null, $white, null, null, null);
-      span{
+      span {
         img {
           opacity: 1;
         }
@@ -33,16 +38,16 @@
     }
     span {
       display: inline-block;
-      @include wh-value(30px,30px);
+      @include wh-value(30px, 30px);
       cursor: pointer;
       border-radius: 50%;
-      @include border(all,2,solid, $white);
+      @include border(all, 2, solid, $white);
       @include box-shadow(0px, 1px, 3px, 0px, $dark);
       @include background(null, null, null, no-repeat, center);
       text-align: center;
       @include line-height(25px);
       img {
-        width:50%;
+        width: 50%;
         opacity: 0;
         @include transition(all, 0.3, null, ease);
       }
diff --git a/src/app/roles/roles-create-edit/RolesCreateEditComponent.ts b/src/app/roles/roles-create-edit/RolesCreateEditComponent.ts
index 59196ea..ae85112 100644
--- a/src/app/roles/roles-create-edit/RolesCreateEditComponent.ts
+++ b/src/app/roles/roles-create-edit/RolesCreateEditComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Roles Create and Edit Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -30,7 +29,7 @@
 import * as jsonpath from 'jsonpath';
 import { RestService } from 'RestService';
 import { Permission, PermissionGroup, RoleConfig, RoleData } from 'RolesModel';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/roles/roles-details/RolesDetailsComponent.html b/src/app/roles/roles-details/RolesDetailsComponent.html
index 28a3fe7..7ee4a2e 100644
--- a/src/app/roles/roles-details/RolesDetailsComponent.html
+++ b/src/app/roles/roles-details/RolesDetailsComponent.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">{{'ROLES' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" (click)="createRole()" placement="top"
@@ -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/roles/roles-details/RolesDetailsComponent.ts b/src/app/roles/roles-details/RolesDetailsComponent.ts
index 9c2e3e3..473a0c6 100644
--- a/src/app/roles/roles-details/RolesDetailsComponent.ts
+++ b/src/app/roles/roles-details/RolesDetailsComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Roles Deatils component.
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
@@ -30,7 +29,7 @@
 import { RolesActionComponent } from 'RolesAction';
 import { RoleData, RoleDetails } from 'RolesModel';
 import { Subscription } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
index 5937862..c9893c1 100644
--- a/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
+++ b/src/app/sdn-controller/new-sdn-controller/NewSDNControllerComponent.html
@@ -23,7 +23,7 @@
         </button>
     </div>
     <div class="modal-body modal-body-custom-height">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': sdnControllerForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
             <label class="col-sm-4 col-form-label" for="name">{{'NAME' | translate}}*</label>
@@ -32,7 +32,7 @@
                     formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="sdn_type">{{'TYPE' | translate}}*</label>
             <div class="col-sm-8">
                 <ng-select [items]="sdnType" placeholder="{{'SELECT' | translate}}" bindLabel="title" bindValue="value"
@@ -42,7 +42,7 @@
                 <small class="text-info">{{'TYPEINFO' | translate}}</small>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="username">{{'USERNAME' | translate}}*</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control" placeholder="{{'USERNAME' | translate}}" type="text"
@@ -50,7 +50,7 @@
                     required>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="password">{{'PASSWORD' | translate}}*</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control" placeholder="{{'PASSWORD' | translate}}" type="password"
@@ -58,7 +58,7 @@
                     [ngClass]="{ 'is-invalid': submitted && f.password.errors }" required>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="ip">{{'IP' | translate}}*</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control" placeholder="{{'IP' | translate}}" type="text"
@@ -68,7 +68,7 @@
                 </div>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="port">{{'PORT' | translate}}*</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control" placeholder="{{'PORT' | translate}}" type="text"
@@ -78,7 +78,7 @@
                 </div>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="dpid">{{'PAGE.SDNCONTROLLER.DPID' | translate}}*</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control"
@@ -89,7 +89,7 @@
                 </div>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-4 col-form-label" for="version">{{'VERSION' | translate}}</label>
             <div class="col-sm-8">
                 <input autocomplete="off" class="form-control" placeholder="{{'VERSION' | translate}}" type="text"
diff --git a/src/app/sdn-controller/sdn-controller-details/SDNControllerDetailsComponent.html b/src/app/sdn-controller/sdn-controller-details/SDNControllerDetailsComponent.html
index c316942..3f00d91 100644
--- a/src/app/sdn-controller/sdn-controller-details/SDNControllerDetailsComponent.html
+++ b/src/app/sdn-controller/sdn-controller-details/SDNControllerDetailsComponent.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.SDNCONTROLLER.REGISTEREDSDNCONTROLLER' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.SDNCONTROLLER.NEWSDNCONTROLLER' | translate}}"
@@ -25,15 +25,15 @@
         </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}}</span>
             <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/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
index d89ad24..3c1c15e 100644
--- a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
+++ b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.html
@@ -23,91 +23,89 @@
 </div>
 <div class="modal-body modal-body-custom-height p-0">
     <table class="table table-sm table-hover table-layout-fixed mb-0" *ngIf="sdnDetails else noData">
-        <tbody>
-            <tr>
-                <th>
-                    {{'ID' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails._id)?sdnDetails._id:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'NAME' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.name)?sdnDetails.name:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'TYPE' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.type)?sdnDetails.type:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'OPERATIONALSTATE' | translate}}
-                </th>
-                <td>
-                    <span class="badge ml-1" [ngClass]="{'badge-warning text-white':sdnDetails._admin.operationalState === operationalStateFirstStep,
-          'badge-success':sdnDetails._admin.operationalState === operationalStateSecondStep,
-          'badge-danger':sdnDetails._admin.operationalState === operationalStateThirdStep}">
-                        {{(sdnDetails._admin.operationalState)?sdnDetails._admin.operationalState:'-'}}</span>
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'URL' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.url)?sdnDetails.url:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'USER' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.user)?sdnDetails.user:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'VERSION' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.version)?sdnDetails.version:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'PAGE.SDNCONTROLLER.DPID' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails.dpid)?sdnDetails.dpid:'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'CREATED' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails._admin.created)?this.sharedService.convertEpochTime(sdnDetails._admin.created):'-'}}
-                </td>
-            </tr>
-            <tr>
-                <th>
-                    {{'MODIFIED' | translate}}
-                </th>
-                <td>
-                    {{(sdnDetails._admin.modified)?this.sharedService.convertEpochTime(sdnDetails._admin.modified):'-'}}
-                </td>
-            </tr>
-        </tbody>
+        <tr>
+            <th>
+                {{'ID' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails._id)?sdnDetails._id:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'NAME' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.name)?sdnDetails.name:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'TYPE' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.type)?sdnDetails.type:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'OPERATIONALSTATE' | translate}}
+            </th>
+            <td>
+                <span class="badge ms-1" [ngClass]="{'badge bg-warning text-white':sdnDetails._admin.operationalState === operationalStateFirstStep,
+          'badge bg-success text-white':sdnDetails._admin.operationalState === operationalStateSecondStep,
+          'badge bg-danger text-white':sdnDetails._admin.operationalState === operationalStateThirdStep}">
+                    {{(sdnDetails._admin.operationalState)?sdnDetails._admin.operationalState:'-'}}</span>
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'URL' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.url)?sdnDetails.url:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'USER' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.user)?sdnDetails.user:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'VERSION' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.version)?sdnDetails.version:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'PAGE.SDNCONTROLLER.DPID' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails.dpid)?sdnDetails.dpid:'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'CREATED' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails._admin.created)?this.sharedService.convertEpochTime(sdnDetails._admin.created):'-'}}
+            </td>
+        </tr>
+        <tr>
+            <th>
+                {{'MODIFIED' | translate}}
+            </th>
+            <td>
+                {{(sdnDetails._admin.modified)?this.sharedService.convertEpochTime(sdnDetails._admin.modified):'-'}}
+            </td>
+        </tr>
         <tr>
             <th>
                 {{'DEPLOYED' | translate}}
diff --git a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.scss b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.scss
index c68960c..7ff1ee9 100644
--- a/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.scss
+++ b/src/app/sdn-controller/sdn-controller-info/SDNControllerInfoComponent.scss
@@ -14,4 +14,25 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/variable.scss";
+.table tr:hover {
+	color: $body-color;
+	background-color: #f6fafe;
+  }
+  .table thead th {
+	vertical-align: bottom;
+	border-bottom: 2px solid rgba(0, 0, 0, .1);
+  }
+  .table th, .table td {
+	padding: 5px;
+	vertical-align: top;
+	border-top: 1px solid rgba(0, 0, 0, .1);
+	border-bottom: transparent;
+  }
+  .table b {
+	background: none;
+	color: $body-color;
+	padding-right: 0px;
+	padding-left: 0px;
+  }
\ No newline at end of file
diff --git a/src/app/users/add-user/AddEditUserComponent.html b/src/app/users/add-user/AddEditUserComponent.html
index d3a0b08..6ae0f32 100644
--- a/src/app/users/add-user/AddEditUserComponent.html
+++ b/src/app/users/add-user/AddEditUserComponent.html
@@ -28,7 +28,7 @@
       <label class="col-sm-12 col-form-label mandatory-label"
         [ngClass]="{'text-danger': userForm.invalid === true && submitted === true,'message': isPassword && userForm.invalid === true && submitted  }">{{'MANDATORYCHECK'|
         translate}}</label>
-      <div class="row form-group" *ngIf="userType === 'add' || userType === 'editUserName'">
+      <div class="row form-group mb-3" *ngIf="userType === 'add' || userType === 'editUserName'">
         <div class="col-sm-4">
           <label for="userName">{{'PAGE.USERS.USERNAME' | translate}} *</label>
         </div>
@@ -43,7 +43,7 @@
         </div>
       </div>
       <ng-container *ngIf="userType === 'add' || userType === 'editPassword' || userType === 'changePassword'">
-        <div class="row form-group" *ngIf=" userType === 'changePassword'">
+        <div class="row form-group mb-3" *ngIf=" userType === 'changePassword'">
           <div class="col-sm-4">
             <label for="oldpassword">{{'PAGE.USERS.OLDPASSWORD' | translate}} *</label>
           </div>
@@ -53,7 +53,7 @@
               [ngClass]="{ 'is-invalid': submitted && f.old_password.errors }" required>
           </div>
         </div>
-        <div class="row form-group" *ngIf="userType === 'add' || userType === 'editPassword'">
+        <div class="row form-group mb-3" *ngIf="userType === 'add' || userType === 'editPassword'">
           <div class="col-sm-4">
             <label for="password">{{'PAGE.USERS.PASSWORD' | translate}} *</label>
           </div>
@@ -68,7 +68,7 @@
               {{'PAGE.LOGIN.PASSWORDMINLENGTHVALIDMESSAGE' | translate}} </div>
           </div>
         </div>
-        <div class="row form-group" *ngIf="userType === 'changePassword'">
+        <div class="row form-group mb-3" *ngIf="userType === 'changePassword'">
           <div class="col-sm-4">
             <label for="password">{{'PAGE.USERS.NEWPASSWORD' | translate}} *</label>
           </div>
@@ -83,7 +83,7 @@
               {{'PAGE.LOGIN.PASSWORDMINLENGTHVALIDMESSAGE' | translate}} </div>
           </div>
         </div>
-        <div class="row form-group">
+        <div class="row form-group mb-3">
           <div class="col-sm-4">
             <label for="password2">{{'PAGE.USERS.CONFPASSWORD' | translate}} *</label>
           </div>
@@ -100,7 +100,7 @@
           </div>
         </div>
       </ng-container>
-      <div class="form-group row" *ngIf="userType === 'add'">
+      <div class="form-group row mb-3" *ngIf="userType === 'add'">
         <label class="col-sm-4 col-form-label">{{'DOMAIN' | translate}} {{'NAME' | translate}}</label>
         <div class="col-sm-8">
           <ng-select [clearable]="false" placeholder="{{'SELECT' | translate}}" [items]="domains" bindLabel="title"
diff --git a/src/app/users/add-user/AddEditUserComponent.scss b/src/app/users/add-user/AddEditUserComponent.scss
index 3520b4e..fc31506 100644
--- a/src/app/users/add-user/AddEditUserComponent.scss
+++ b/src/app/users/add-user/AddEditUserComponent.scss
@@ -57,4 +57,7 @@
     @include padding-value(0, 0, 0, 10);
     @include margin-value(0, 0, 10, 0);
     @include font(null, 11px, null);
+}
+.mandatory-label {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/src/app/users/add-user/AddEditUserComponent.ts b/src/app/users/add-user/AddEditUserComponent.ts
index 2931d79..a816c62 100644
--- a/src/app/users/add-user/AddEditUserComponent.ts
+++ b/src/app/users/add-user/AddEditUserComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Add Edit Component.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -29,7 +28,7 @@
 import { APIURLHEADER, ERRORDATA, LOGINPARAMS, MODALCLOSERESPONSEDATA, TYPESECTION } from 'CommonModel';
 import { environment } from 'environment';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/users/project-role/ProjectRoleComponent.html b/src/app/users/project-role/ProjectRoleComponent.html
index 31f71e4..477549c 100644
--- a/src/app/users/project-role/ProjectRoleComponent.html
+++ b/src/app/users/project-role/ProjectRoleComponent.html
@@ -29,7 +29,7 @@
                     <i class="fas fa-plus-circle"></i> {{'PAGE.USERS.ADDMAPPINGS' | translate}}</button>
             </div>
         </div>
-        <label class="col-sm-12 col-form-label mandatory-label"
+        <label class="col-sm-12 col-form-label mandatory-label ps-2"
             [ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
             translate}}</label>
         <div *ngFor="let params of getControls(); let i = index;" [formGroupName]="i">
@@ -40,8 +40,7 @@
                         <div class="col-sm-8 col-md-8">
                             <ng-select placeholder="{{'SELECT' | translate}}" [items]="projects" bindLabel="name"
                                 bindValue="name" formControlName="project_name" id="project_{{i}}"
-                                [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }">
-                            </ng-select>
+                                [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }"></ng-select>
                         </div>
                         <label class="col-sm-3 col-md-3 col-form-label" for="roles_{{i}}">{{'ROLES' |
                             translate}}*</label>
@@ -52,16 +51,16 @@
                         </div>
                         <div class="col-sm-1"
                             *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
-                            <button class="button-xs" type="button" class="close" (click)="removeMapping(i)"
+                            <button class="button-xs" type="button" class="delete" (click)="removeMapping(i)"
                                 placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
                                 <i class="fas fa-minus-circle text-danger"></i>
                             </button>
                         </div>
                         <div class="col-sm-1"
                             *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
-                            <button class="button-xs" type="button" class="close"
-                                (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right" 
-                                ngbTooltip="{{ 'DELETE' | translate }}">
+                            <button class="button-xs" type="button" class="delete"
+                                (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])"
+                                placement="right" ngbTooltip="{{ 'DELETE' | translate }}">
                                 <i class="fas fa-trash-alt text-danger"></i>
                             </button>
                         </div>
diff --git a/src/app/users/project-role/ProjectRoleComponent.scss b/src/app/users/project-role/ProjectRoleComponent.scss
index c80a776..09ff918 100644
--- a/src/app/users/project-role/ProjectRoleComponent.scss
+++ b/src/app/users/project-role/ProjectRoleComponent.scss
@@ -33,5 +33,17 @@
 }
 
 .col-sm-1{
- bottom: 10px;
-}
\ No newline at end of file
+  position: relative;
+  bottom: 10px;
+}
+.modal-body .row{
+  margin-bottom: 0px;
+}
+.delete{
+  position: absolute;
+  bottom: 8px;
+  left: 3px;
+  border: 0;
+  font-size: 1.3125rem;
+  background-color: transparent;
+}
diff --git a/src/app/users/user-details/UserDetailsComponent.html b/src/app/users/user-details/UserDetailsComponent.html
index 49661cb..985d64f 100644
--- a/src/app/users/user-details/UserDetailsComponent.html
+++ b/src/app/users/user-details/UserDetailsComponent.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.USERS' | translate}}</div>
   <span class="button">
     <button class="btn btn-primary" type="button" (click)="composeUser()" 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">
-  <div *ngIf="isAdminShow" class="col-auto mr-auto">
+<div class="mt-2 mb-2 form-group justify-content-end list-utilites-actions">
+  <div *ngIf="isAdminShow" class="col-auto me-auto">
     <nav class="custom-items-config">
       <span><i class="fas fa-user-check text-success"></i>{{userActive}}</span>
       <span><i class="fas fa-user-lock text-danger"></i>{{userLocked}}</span>
@@ -34,7 +34,7 @@
       <span><i class="fas fa-user-shield text-info"></i>{{userAlwaysActive}}</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/users/user-details/UserDetailsComponent.ts b/src/app/users/user-details/UserDetailsComponent.ts
index c56f43a..65ef878 100644
--- a/src/app/users/user-details/UserDetailsComponent.ts
+++ b/src/app/users/user-details/UserDetailsComponent.ts
@@ -19,7 +19,6 @@
 /**
  * @file users details Component.
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnDestroy, OnInit } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -31,7 +30,7 @@
 import { ProjectService } from 'ProjectService';
 import { RestService } from 'RestService';
 import { Subscription } from 'rxjs';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { UserData, UserDetail } from 'UserModel';
 import { UsersActionComponent } from 'UsersActionComponent';
 
diff --git a/src/app/utilities/compose-packages/ComposePackages.html b/src/app/utilities/compose-packages/ComposePackages.html
index 0d66e0f..1067054 100644
--- a/src/app/utilities/compose-packages/ComposePackages.html
+++ b/src/app/utilities/compose-packages/ComposePackages.html
@@ -23,7 +23,7 @@
     </button>
   </div>
   <div class="modal-body">
-    <div class="form-group row">
+    <div class="form-group row mb-3">
       <label class="col-sm-12 col-form-label mandatory-label" [ngClass]="{'text-danger': packagesForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
       <label class="col-sm-6 col-form-label">{{'PACKAGE' | translate}} {{'NAME' | translate}}*</label>
       <div class="col-sm-6">
diff --git a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
index 92a2726..3594a37 100644
--- a/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
+++ b/src/app/utilities/confirmation-topology/ConfirmationTopologyComponent.html
@@ -50,7 +50,7 @@
       <i class="fas fa-times-circle text-danger"></i>
     </button>
   </div>
-  <div class="modal-body">
+  <div class="modal-body ms-2">
     <span *ngIf="topologyType === 'Delete'">{{'DELETECONFIRMPOPUPMESSAGE' | translate}} <b>{{ topologyname }}</b> ?</span>
     <ul *ngIf="topologyType === 'Info'">
       <li>
diff --git a/src/app/utilities/edit-packages/EditPackagesComponent.html b/src/app/utilities/edit-packages/EditPackagesComponent.html
index f099af1..30ae5e0 100644
--- a/src/app/utilities/edit-packages/EditPackagesComponent.html
+++ b/src/app/utilities/edit-packages/EditPackagesComponent.html
@@ -15,34 +15,34 @@
 
 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="form-group row">
-  <div class="d-flex align-items-center header-style">{{'EDIT' | translate}}&nbsp;<span
+<div class="form-group row mb-3">
+  <div class="d-flex align-items-center header-style p-0">{{'EDIT' | translate}}&nbsp;<span
       class="text-uppercase">{{pacakgeType}}&nbsp;</span>{{'DESCRIPTOR' | translate}}</div>
 </div>
 <form *ngIf="defaults[mode]">
-  <div class="row">
+  <div class="row mb-2">
     <div class="col-2">
       <div class="form-group">
-        <select class="form-control custom-select" name="state" [(ngModel)]="mode" (ngModelChange)="changeMode()">
+        <select class="form-control select" name="state" [(ngModel)]="mode" (ngModelChange)="changeMode()">
           <option *ngFor="let types of fileTypes;" [value]="types.value">
             {{types.viewValue}}</option>
         </select>
       </div>
     </div>
     <div class="col-4">
-      <div class="btn-group-toggle mb-1 mr-1 float-left">
+      <div class="btn-group-toggle mb-1 me-1 float-start">
         <label class="btn btn-light" [class.active]="readOnly">
-          <input type="checkbox" [(ngModel)]="readOnly" name="readOnly" autocomplete="off">
+          <input class="checkbox d-none" type="checkbox" [(ngModel)]="readOnly" name="readOnly" autocomplete="off">
           {{'READONLYMODE' | translate}} ({{'CURRENTLY' | translate}} {{ (readOnly ? 'ON' : 'OFF') | translate }})
         </label>
       </div>
     </div>
-    <div class="col-6 text-right">
-      <button type="button" class="btn btn-primary mr-2" routerLink="/packages/{{navigatePath}}/compose/{{paramsID}}"
+    <div class="col-6 text-end">
+      <button type="button" class="btn btn-primary me-2" routerLink="/packages/{{navigatePath}}/compose/{{paramsID}}"
         [hidden]="navigatePath==='netslice'">
         <i class="fa fa-sitemap" aria-hidden="true"></i>&nbsp;{{'SHOWGRAPH' | translate}}
       </button>
-      <button type="button" class="btn btn-primary mr-2" (click)="update(true)" [hidden]="navigatePath==='netslice'">
+      <button type="button" class="btn btn-primary me-2" (click)="update(true)" [hidden]="navigatePath==='netslice'">
         <i class="fa fa-save" aria-hidden="true"></i>&nbsp;{{'UPDATESHOWGRAPH' | translate}}
       </button>
       <button type="button" class="btn btn-primary" (click)="update(false)">
diff --git a/src/app/utilities/edit-packages/EditPackagesComponent.scss b/src/app/utilities/edit-packages/EditPackagesComponent.scss
index 5a9c483..3844392 100644
--- a/src/app/utilities/edit-packages/EditPackagesComponent.scss
+++ b/src/app/utilities/edit-packages/EditPackagesComponent.scss
@@ -15,6 +15,34 @@
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 */
-.ngx-codemirror {
-    font-size: 14px;
+@use "sass:math";
+@import "/src/assets/scss/mixins/mixin.scss";
+@import "/src/assets/scss/variable.scss";
+.btn.active {
+    color: $gray-900;
+    background-color: $paleblue;
+    border-color: $paleblue;
+}
+.btn-light:hover {
+    color: $gray-900;
+    background-color: $paleblue;
+    border-color: $paleblue;
+}
+select.form-control {
+    background-color: $white !important;
+    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+    @include flexbox(inline-block, null, null, null, null, null);
+    vertical-align: middle;
+    background: $white
+        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+        no-repeat right 0.75rem center;
+    background-size: 8px 10px;
+    @include border(all, 1, solid, $gray-200);
+    @include roundedCorners(2);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    &::-ms-expand {
+        visibility: hidden;
+    }
 }
\ No newline at end of file
diff --git a/src/app/utilities/healing/HealingComponent.html b/src/app/utilities/healing/HealingComponent.html
index ad22db6..84c413a 100644
--- a/src/app/utilities/healing/HealingComponent.html
+++ b/src/app/utilities/healing/HealingComponent.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="healingForm" (ngSubmit)="manualHealingTrigger()" autocomplete="off">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': healingForm.invalid === true && submitted === true}">
                 {{'MANDATORYCHECK' | translate}}
@@ -39,7 +39,7 @@
                 <small class="form-text text-muted" *ngIf="selectedvnfId !== ''">vnfd-id : {{ selectedvnfId }}</small>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="memberVnfIndex"> {{'DAY1OPERATION' | translate}}</label>
             </div>
@@ -49,8 +49,8 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row p-2 bg-light text-white justify-content-end">
-            <div class="col-5">
+        <div class="form-group row p-2 bg-light text-white justify-content-end" mb-3>
+            <div class="col-5 text-end">
                 <button class="button-xs" type="button" class="btn btn-primary" (click)="addVdu()">
                     <i class="fas fa-plus-circle"></i>{{'SELECTVDU' | translate}}</button>
             </div>
@@ -60,34 +60,34 @@
                 <div class="form-group row" [formGroupName]="i">
                     <div class="card bg-light">
                         <div class="card-body">
-                            <div class="form-group row">
-                                <label class="col-sm-3 col-md-3 col-form-label" for="vduId_{{i}}">{{'VDUID' |
+                            <div class="form-group row mb-3">
+                                <label class="col-sm-3 col-md-3 col-form-label ps-0" for="vduId_{{i}}">{{'VDUID' |
                                     translate}}</label>
-                                <div class="col-sm-8 col-md-8">
+                                <div class="col-sm-8 col-md-8 ps-1">
                                     <ng-select (change)="getCountIndex($event.VDU)"
                                         placeholder="{{'SELECT' | translate}}" [items]="vduId" bindLabel="VDU"
                                         bindValue="VDU" formControlName="vduId" id="vduId_{{i}}"
                                         [ngClass]="{ 'is-invalid': submitted && params.controls.vduId.errors }">
                                     </ng-select>
                                 </div>
-                                <label class="col-sm-3 col-md-3 col-form-label" for="countIndex_{{i}}">{{'COUNTINDEX' |
+                                <label class="col-sm-3 col-md-3 col-form-label ps-0" for="countIndex_{{i}}">{{'COUNTINDEX' |
                                     translate}}</label>
-                                <div class="col-sm-8 col-md-8">
+                                <div class="col-sm-8 col-md-8 ps-1">
                                     <ng-select placeholder="{{'SELECT' | translate}}" [items]="countIndex"
                                         bindLabel="count-index" bindValue="count-index" formControlName="countIndex"
                                         id="countIndex_{{i}}"
                                         [ngClass]="{ 'is-invalid': submitted && params.controls.countIndex.errors }">
                                     </ng-select>
                                 </div>
-                                <label class="col-sm-3 col-md-3 col-form-label" for="runDay1_{{i}}">{{'DAY1OPERATION' |
+                                <label class="col-sm-3 col-md-3 col-form-label ps-0" for="runDay1_{{i}}">{{'DAY1OPERATION' |
                                     translate}}</label>
-                                <div class="col-sm-8 col-md-8">
+                                <div class="col-sm-8 col-md-8 ps-1">
                                     <ng-select formControlName="runDay1" [clearable]="false" placeholder="{{'DAY1OPERATION' |
                                 translate}}" [items]="day1Operation" bindLabel="name" bindValue="id">
                                     </ng-select>
                                 </div>
                                 <div class="col-sm-1">
-                                    <button class="button-xs" type="button" class="close" (click)="removeMapping(i)"
+                                    <button class="button-xs" type="button" class="remove-mapping close" (click)="removeMapping(i)"
                                         placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
                                         <i class="fas fa-minus-circle text-danger"></i>
                                     </button>
diff --git a/src/app/utilities/healing/HealingComponent.scss b/src/app/utilities/healing/HealingComponent.scss
index f7fbc0a..a801a0a 100644
--- a/src/app/utilities/healing/HealingComponent.scss
+++ b/src/app/utilities/healing/HealingComponent.scss
@@ -15,3 +15,9 @@
 
  Author: SANDHYA JS (sandhya.j@tataelxsi.co.in)
 */
+.remove-mapping {
+   top: 50px;
+}
+.modal-body .row {
+   margin-bottom: 1px;
+ }
diff --git a/src/app/utilities/healing/HealingComponent.ts b/src/app/utilities/healing/HealingComponent.ts
index b3a1072..6360c48 100644
--- a/src/app/utilities/healing/HealingComponent.ts
+++ b/src/app/utilities/healing/HealingComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Healing Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -29,7 +28,7 @@
 import { environment } from 'environment';
 import { VDUMAP, VDUMAPPINGS } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { InstanceData, VDUR, VNFInstanceDetails } from 'VNFInstanceModel';
 /**
  * Creating component
diff --git a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
index 08e5e97..1582bc4 100644
--- a/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
+++ b/src/app/utilities/ns-instances-action/NSInstancesActionComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file NS InstancesAction Component
  */
-import { isNullOrUndefined } from 'util';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector } from '@angular/core';
 import { Router } from '@angular/router';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
@@ -35,7 +34,7 @@
 import { RestService } from 'RestService';
 import { forkJoin, Observable } from 'rxjs';
 import { ScalingComponent } from 'ScalingComponent';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { ShowInfoComponent } from 'ShowInfoComponent';
 import { StartStopRebuildComponent } from 'StartStopRebuildComponent';
 import { VerticalScalingComponent } from 'VerticalScalingComponent';
diff --git a/src/app/utilities/ns-update/NsUpdateComponent.html b/src/app/utilities/ns-update/NsUpdateComponent.html
index 2c98599..337c283 100644
--- a/src/app/utilities/ns-update/NsUpdateComponent.html
+++ b/src/app/utilities/ns-update/NsUpdateComponent.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="nsUpdateForm" (ngSubmit)="triggerNsUpdate()" autocomplete="off">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': nsUpdateForm.invalid === true && submitted === true}">
                 {{'MANDATORYCHECK' | translate}}
@@ -37,19 +37,19 @@
                     [ngClass]="{ 'is-invalid': submitted && f.updateType.errors }"></ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="memberVnfIndex"> {{'MEMBERVNFINDEX' | translate}} *</label>
             </div>
             <div class="col-sm-6">
-                <ng-select formControlName="memberVnfIndex" [clearable]="false" [(ngModel)]="memberIndexValue" (change) = 'getSelectedVNF($event.vnfinstanceId)'
-                    placeholder="{{'SELECTMEMBERVNFINDEX' | translate}}" [items]="memberTypes" bindLabel="id"
-                    bindValue="id" [ngClass]="{ 'is-invalid': submitted && f.memberVnfIndex.errors }">
+                <ng-select formControlName="memberVnfIndex" [clearable]="false" [(ngModel)]="memberIndexValue" (change)='getSelectedVNF($event.vnfinstanceId)'
+                    placeholder="{{'SELECTMEMBERVNFINDEX' | translate}}" [items]="memberTypes"
+                    bindLabel="id" bindValue="id" [ngClass]="{ 'is-invalid': submitted && f.memberVnfIndex.errors }">
                 </ng-select>
                 <small class="form-text text-muted" *ngIf="selectedvnfId !== ''">vnfd : {{ selectedvnfId }}</small>
             </div>
         </div>
-        <div class="form-group row" *ngIf="!vnfdIdShow">
+        <div class="form-group row mb-3" *ngIf="!vnfdIdShow">
             <div class="col-sm-6">
                 <label for="vnfdId"> {{'VNFDNAME' | translate}} *</label>
             </div>
diff --git a/src/app/utilities/ns-update/NsUpdateComponent.ts b/src/app/utilities/ns-update/NsUpdateComponent.ts
index 7efba70..724bba3 100644
--- a/src/app/utilities/ns-update/NsUpdateComponent.ts
+++ b/src/app/utilities/ns-update/NsUpdateComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Ns Update Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -29,7 +28,7 @@
 import { environment } from 'environment';
 import { NSUPDATE, TERMINATEVNF } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VNFD } from 'VNFDModel';
 import { InstanceData, VNFInstanceDetails } from 'VNFInstanceModel';
 import { WarningComponent } from 'WarningComponent';
diff --git a/src/app/utilities/page-per-row/PagePerRow.html b/src/app/utilities/page-per-row/PagePerRow.html
index a63ebb4..1bab5d5 100644
--- a/src/app/utilities/page-per-row/PagePerRow.html
+++ b/src/app/utilities/page-per-row/PagePerRow.html
@@ -16,7 +16,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="page-per-row">
-  <label class="mr-2 mt-2">
+  <label class="me-2">
     <b>{{'ENTRIES' | translate}}</b>
   </label>
   <select class="form-control custom-select" (change)="onSelectRow($event.target.value)">
diff --git a/src/app/utilities/projects-action/ProjectsActionComponent.html b/src/app/utilities/projects-action/ProjectsActionComponent.html
index 3f193c2..6f0ab70 100644
--- a/src/app/utilities/projects-action/ProjectsActionComponent.html
+++ b/src/app/utilities/projects-action/ProjectsActionComponent.html
@@ -20,7 +20,7 @@
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown mt-1" ngbDropdownMenu>
             <button type="button" class="btn btn-primary dropdown-item" (click)="projectEdit()" placement="left"
                 container="body" ngbTooltip="{{'EDIT' | translate}}">
                 <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/roles-action/RolesActionComponent.html b/src/app/utilities/roles-action/RolesActionComponent.html
index 522ba83..1487a7c 100644
--- a/src/app/utilities/roles-action/RolesActionComponent.html
+++ b/src/app/utilities/roles-action/RolesActionComponent.html
@@ -20,7 +20,7 @@
       <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
           {{'ACTION' | translate}}
       </button>
-      <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+      <div class="dropdown-menu list-action-dropdown mt-1" ngbDropdownMenu>
           <button type="button" class="btn btn-primary dropdown-item" (click)="editRole()" placement="left"
               container="body" ngbTooltip="{{'EDIT' | translate}}">
               <i class="fa fa-edit icons"></i> {{'EDIT' | translate}}
diff --git a/src/app/utilities/scaling/ScalingComponent.html b/src/app/utilities/scaling/ScalingComponent.html
index 10d5a16..fa6b960 100644
--- a/src/app/utilities/scaling/ScalingComponent.html
+++ b/src/app/utilities/scaling/ScalingComponent.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="scalingForm" (ngSubmit)="manualScalingTrigger()" autocomplete="off">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': scalingForm.invalid === true && submitted === true}">
                 {{'MANDATORYCHECK' | translate}}
@@ -37,7 +37,7 @@
                 <small class="form-text text-muted" *ngIf="selectedVNFID !== ''">vnfd-id : {{ selectedVNFID }}</small>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-12">
                 <ng-select formControlName="scalingname" [clearable]="false" placeholder="Select scaling-aspect *"
                     [items]="scalingGroup" bindLabel="name" bindValue="id"
@@ -45,7 +45,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-12">
                 <ng-select formControlName="scaleType" [clearable]="false" placeholder="Select Scale Type *"
                     [items]="scaleTypes" bindLabel="name" bindValue="id"
diff --git a/src/app/utilities/scaling/ScalingComponent.ts b/src/app/utilities/scaling/ScalingComponent.ts
index be15660..46a257d 100644
--- a/src/app/utilities/scaling/ScalingComponent.ts
+++ b/src/app/utilities/scaling/ScalingComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Scaling Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -28,7 +27,7 @@
 import { APIURLHEADER, ERRORDATA, MODALCLOSERESPONSEDATA, URLPARAMS } from 'CommonModel';
 import { environment } from 'environment';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { DF, SCALING, VNFD } from 'VNFDModel';
 import { InstanceData, VNFInstanceDetails } from 'VNFInstanceModel';
 /**
diff --git a/src/app/utilities/start-stop-rebuild/StartStopRebuildComponent.ts b/src/app/utilities/start-stop-rebuild/StartStopRebuildComponent.ts
index 9940129..aed0444 100644
--- a/src/app/utilities/start-stop-rebuild/StartStopRebuildComponent.ts
+++ b/src/app/utilities/start-stop-rebuild/StartStopRebuildComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file StartStopRebuild Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -28,7 +27,7 @@
 import { environment } from 'environment';
 import { StartStopRebuild } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { DF, VNFD } from 'VNFDModel';
 import { InstanceData, VDUR, VNFInstanceDetails } from 'VNFInstanceModel';
 
diff --git a/src/app/utilities/users-action/UsersActionComponent.html b/src/app/utilities/users-action/UsersActionComponent.html
index c108655..69bf2ab 100644
--- a/src/app/utilities/users-action/UsersActionComponent.html
+++ b/src/app/utilities/users-action/UsersActionComponent.html
@@ -20,7 +20,7 @@
         <button type="button" class="btn btn-primary dropdown-toggle action-button" ngbDropdownToggle>
             {{'ACTION' | translate}}
         </button>
-        <div class="dropdown-menu list-action-dropdown" ngbDropdownMenu>
+        <div class="dropdown-menu list-action-dropdown mt-1" ngbDropdownMenu>
             <button *ngIf="isAdminShow" type="button" class="btn btn-primary dropdown-item" (click)="editUserModal('editPassword')"
                 placement="left" container="body" ngbTooltip="{{'PAGE.USERS.EDITCREDENTIALS' | translate}}">
                 <i class="fa fa-edit icons"></i> {{'PAGE.USERS.EDITCREDENTIALS' | translate}}
diff --git a/src/app/utilities/users-action/UsersActionComponent.ts b/src/app/utilities/users-action/UsersActionComponent.ts
index 799779d..a7b4c24 100644
--- a/src/app/utilities/users-action/UsersActionComponent.ts
+++ b/src/app/utilities/users-action/UsersActionComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Users Action Component
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector } from '@angular/core';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateService } from '@ngx-translate/core';
@@ -26,7 +25,7 @@
 import { MODALCLOSERESPONSEDATA } from 'CommonModel';
 import { DeleteComponent } from 'DeleteComponent';
 import { ProjectRoleComponent } from 'ProjectRoleComponent';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { UserData } from 'UserModel';
 import { WarningComponent } from 'WarningComponent';
 /**
diff --git a/src/app/utilities/vertical-scaling/VerticalScalingComponent.html b/src/app/utilities/vertical-scaling/VerticalScalingComponent.html
index 5525871..eddf226 100644
--- a/src/app/utilities/vertical-scaling/VerticalScalingComponent.html
+++ b/src/app/utilities/vertical-scaling/VerticalScalingComponent.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="scalingForm" (ngSubmit)="triggerVerticalScaling()" autocomplete="off">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': scalingForm.invalid === true && submitted === true}">
                 {{'MANDATORYCHECK' | translate}}
@@ -39,7 +39,7 @@
                 <small class="form-text text-muted" *ngIf="selectedvnfId !== ''">vnfd-id : {{ selectedvnfId }}</small>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="vdu-id"> {{'VDUID' | translate}} *</label>
             </div>
@@ -50,7 +50,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="count-index"> {{'COUNTINDEX' | translate}} *</label>
             </div>
@@ -62,7 +62,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="memoryMB"> {{'MEMORYMB' | translate}} *</label>
             </div>
@@ -72,7 +72,7 @@
                     [ngClass]="{ 'is-invalid': submitted && f.virtualMemory.errors }">
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="storageGB"> {{'STORAGEGB' | translate}} *</label>
             </div>
@@ -82,7 +82,7 @@
                     [ngClass]="{ 'is-invalid': submitted && f.sizeOfStorage.errors }">
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="vcpucount"> {{'VCPUCOUNT' | translate}} *</label>
             </div>
diff --git a/src/app/utilities/vertical-scaling/VerticalScalingComponent.ts b/src/app/utilities/vertical-scaling/VerticalScalingComponent.ts
index 7b4c087..36ec2fc 100644
--- a/src/app/utilities/vertical-scaling/VerticalScalingComponent.ts
+++ b/src/app/utilities/vertical-scaling/VerticalScalingComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file VerticalScaling Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -30,7 +29,7 @@
 import { environment } from 'environment';
 import { VerticalScaling } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { InstanceData, VDUR, VNFInstanceDetails } from 'VNFInstanceModel';
 
 /**
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
index 1286116..071c341 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.html
@@ -18,7 +18,7 @@
 <div class="btn-group list action" role="group">
     <ng-template #popTitle>
         <span class="text-primary"><strong>{{'PAGE.DASHBOARD.RUNNINGINSTANCES' | translate}}</strong></span>
-        <button class="button-xs close" type="button" (click)="p.close()">
+        <button class="button-xs close-instances" type="button" (click)="p.close()">
             <i class="fas fa-times-circle text-danger"></i>
         </button>
     </ng-template>
@@ -33,7 +33,7 @@
     </ng-template>
     <ng-template #graphTitle>
         <span class="text-primary"><strong>{{'PAGE.VIMDETAILS.VIMRESOURCES' | translate}}</strong></span>
-        <button class="button-xs close" type="button" (click)="chart.close()">
+        <button class="chart button-xs close" type="button" (click)="chart.close()">
             <i class="fas fa-times-circle text-danger"></i>
         </button>
     </ng-template>
diff --git a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.scss b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.scss
index 021d205..12b851d 100644
--- a/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.scss
+++ b/src/app/utilities/vim-accounts-action/VimAccountsActionComponent.scss
@@ -14,4 +14,25 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+.chart {
+   opacity: 1;
+   background-color: transparent;
+   border: 0;
+   position: absolute;
+   right: 10px;
+   top: 4px;
+   font-size: 1.31rem;
+}
+.list-group-item {
+   background-color: white;
+}
+.close-instances {
+   opacity: 1;
+   background-color: transparent;
+   border: 0;
+   position: absolute;
+   right: 10px;
+   bottom: 62px;
+   font-size: 1.31rem;
+}
\ No newline at end of file
diff --git a/src/app/utilities/vm-migration/VmMigrationComponent.html b/src/app/utilities/vm-migration/VmMigrationComponent.html
index fa1cd14..ee2078f 100644
--- a/src/app/utilities/vm-migration/VmMigrationComponent.html
+++ b/src/app/utilities/vm-migration/VmMigrationComponent.html
@@ -23,7 +23,7 @@
 </div>
 <form [formGroup]="migrationForm" (ngSubmit)="triggerMigration()" autocomplete="off">
     <div class="modal-body">
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': migrationForm.invalid === true && submitted === true}">
                 {{'MANDATORYCHECK' | translate}}
@@ -39,7 +39,7 @@
                 <small class="form-text text-muted" *ngIf="selectedvnfId !== ''">vnfd-id : {{ selectedvnfId }}</small>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="vduid"> {{'VDUID' | translate}}</label>
             </div>
@@ -50,7 +50,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="countIndex"> {{'COUNTINDEX' | translate}}</label>
             </div>
@@ -62,7 +62,7 @@
                 </ng-select>
             </div>
         </div>
-        <div class="form-group row">
+        <div class="form-group row mb-3">
             <div class="col-sm-6">
                 <label for="migrateToHost"> {{'MIGRATETOHOST' | translate}}</label>
             </div>
diff --git a/src/app/utilities/vm-migration/VmMigrationComponent.ts b/src/app/utilities/vm-migration/VmMigrationComponent.ts
index b629497..27f60e1 100644
--- a/src/app/utilities/vm-migration/VmMigrationComponent.ts
+++ b/src/app/utilities/vm-migration/VmMigrationComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Vm Migration Component
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, Injector, Input, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -28,7 +27,7 @@
 import { environment } from 'environment';
 import { VMMIGRATION } from 'NSInstanceModel';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { InstanceData, VDUR, VNFInstanceDetails } from 'VNFInstanceModel';
 
 /**
diff --git a/src/app/utilities/warning/WarningComponent.html b/src/app/utilities/warning/WarningComponent.html
index 92adccb..84ec4af 100644
--- a/src/app/utilities/warning/WarningComponent.html
+++ b/src/app/utilities/warning/WarningComponent.html
@@ -28,7 +28,7 @@
 </div>
 <div class="modal-footer">
     <button (click)="closeModal('close')" class="btn btn-danger">{{'CANCEL' | translate }}</button>
-    <button *ngIf="!action" (click)="closeModal('done')" class="btn btn-success">{{submitMessage}}</button>
-    <button *ngIf="action" (click)="onSubmit()" class="btn btn-success">{{submitMessage}}</button>
+    <button class="btn btn-success text-white"
+        (click)="!action ? closeModal('done') : onSubmit()">{{submitMessage}}</button>
 </div>
 <app-loader [waitingMessage]="message" *ngIf="isLoad"></app-loader>
\ No newline at end of file
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
index 8c75d25..e25cd44 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.html
@@ -17,10 +17,10 @@
 -->
 <div class="row">
     <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
-        <div class="row d-flex flex-row justify-content-between px-3 py-2">
+        <div class="d-flex flex-row justify-content-between px-3 py-2">
             <div class="d-flex align-items-center header-style">{{resourcesData.name}}</div>
             <span class="button">
-                <label class="switch ml-1">
+                <label class="switch ms-1">
                     <input type="checkbox" (change)="changeChartType($event.target.checked)">
                     <div class="slider round">
                         <span class="on">{{ 'PAGE.VIMDETAILS.DOUGHNUT' | translate }}</span>
@@ -30,7 +30,7 @@
             </span>
         </div>
         <ng-container *ngFor="let showData of chartData">
-            <div class="header-style ml-3 mt-2">{{showData.heading}}</div>
+            <div class="header-style ms-2 mt-2 px-3 py-1">{{showData.heading}}</div>
             <div class="row mt-2">
                 <div class="col-xs-{{12/showData.length}} col-sm-{{12/showData.length}} col-md-{{12/showData.length}} col-lg-{{12/showData.length}} col-xl-{{12/showData.length}}"
                     *ngFor="let list of showData.data;let i = index;">
diff --git a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
index 1ffd10c..1b694ea 100644
--- a/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
+++ b/src/app/vim-accounts/Resources-Overview/ResourcesOverviewComponent.scss
@@ -18,6 +18,7 @@
 @import "../../../assets/scss/mixins/mixin.scss";
 @import "../../../assets/scss/variable.scss";
 .chartData-card {
+    background-color: $white;
     word-wrap: break-word;
     @include box-shadow(0px, 1px, 15px, 0px, rgba(69, 90, 100, 0.1));
     @include transition(all, 0.2s, null, null);
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.html b/src/app/vim-accounts/info-vim/InfoVimComponent.html
index 80ea8bf..504fdfe 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.html
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.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="col-sm-4">
       <div class="d-flex align-items-center header-style">{{'PAGE.VIMDETAILS.VIMACCOUNTDETAILS' | translate}}</div>
   </div>
-  <div class="col-sm-8 text-right">
+  <div class="col-sm-8 text-end">
       <span class="button">
           <button class="btn btn-primary" type="button" placement="top" container="body"
               ngbTooltip="{{'PAGE.VIMDETAILS.NEWVIM' | translate}}" routerLink="/vim/new">
@@ -37,7 +37,7 @@
     </div>
   </div>
 </div>
-<div class="col-12">
+<div class="d-grid col-sm-12">
   <button type="button" class="btn btn-block border-0 bg-light text-dark" (click)="isCollapsed = !isCollapsed"
     [attr.aria-expanded]="!isCollapsed">
     {{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}
@@ -51,7 +51,7 @@
     </div>
   </div>
 </div>
-<div class="modal-footer list border-0">
+<div class="modal-footer list border-0 mt-3">
   <button (click)="onVimAccountBack()"
     class="btn btn-danger pull-right">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
 </div>
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.scss b/src/app/vim-accounts/info-vim/InfoVimComponent.scss
index 8c2b739..4efa471 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.scss
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.scss
@@ -15,3 +15,13 @@
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 */
+@import "../../../assets/scss/variable.scss";
+.text-dark {
+   color: $gray-800 !important;
+}
+.font-weight-bold {
+   font-weight: 700 !important;
+}
+button.bg-light:hover, button.bg-light:focus {
+   background-color: $paleblue !important;
+}
\ No newline at end of file
diff --git a/src/app/vim-accounts/info-vim/InfoVimComponent.ts b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
index 02aea69..42a3209 100644
--- a/src/app/vim-accounts/info-vim/InfoVimComponent.ts
+++ b/src/app/vim-accounts/info-vim/InfoVimComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Info VIM Page
  */
-import { isNullOrUndefined } from 'util';
 import { Component, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -29,6 +28,7 @@
 import { environment } from 'environment';
 import * as HttpStatus from 'http-status-codes';
 import { RestService } from 'RestService';
+import { isNullOrUndefined } from 'SharedService';
 import { CONFIG, VimAccountDetails, VIMData } from 'VimAccountModel';
 
 /**
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
index be535d2..7f719a2 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.html
@@ -16,7 +16,7 @@
 Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
 -->
 <form [formGroup]="vimNewAccountForm" (ngSubmit)="newVimAccountSubmit()" autocomplete="off">
-    <div class="row d-flex flex-row justify-content-between">
+    <div class="d-flex flex-row justify-content-between">
         <div *ngIf="vimID;else empty" class="d-flex align-items-center header-style">{{'PAGE.VIMDETAILS.EDITVIMACCOUNT'
             | translate}} </div>
         <ng-template #empty>
@@ -32,7 +32,7 @@
             <div class="col-sm-3">
                 <label for="name">{{'PAGE.VIMDETAILS.NAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.NAME' | translate}}"
                     type="text" formControlName="name" id="name"
                     [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
@@ -40,7 +40,7 @@
             <div class="col-sm-3">
                 <label for="vim_tenant_name">{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.TENANTNAME' | translate}}" type="text"
                     formControlName="vim_tenant_name" id="vim_tenant_name"
@@ -51,7 +51,7 @@
             <div class="col-sm-3">
                 <label for="vim_type">{{'PAGE.VIMDETAILS.VIMTYPE' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <ng-select bindLabel="title" bindValue="value" [items]="vimType" placeholder="{{'SELECT' | translate}}"
                     formControlName="vim_type" id="vim_type" [(ngModel)]="selectedVimType"
                     [addTag]="sharedService.addCustomTag" [ngClass]="{ 'is-invalid': submitted && f.vim_type.errors }"
@@ -62,7 +62,7 @@
             <div class="col-sm-3">
                 <label for="description">{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <textarea class="form-control" placeholder="{{'PAGE.VIMDETAILS.DESCRIPTION' | translate}}" type="text"
                     formControlName="description" id="description"></textarea>
             </div>
@@ -71,7 +71,7 @@
             <div class="col-sm-3">
                 <label for="vim_url">{{'PAGE.VIMDETAILS.VIMURL' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.VIMDETAILS.VIMURL' | translate}}"
                     type="url" formControlName="vim_url" id="vim_url"
                     [ngClass]="{ 'is-invalid': submitted && f.vim_url.errors }">
@@ -82,7 +82,7 @@
             <div class="col-sm-3">
                 <label for="schema_type">{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.SCHEMATYPE' | translate}}" type="text" formControlName="schema_type"
                     id="schema_type">
@@ -92,7 +92,7 @@
             <div class="col-sm-3">
                 <label for="vim_user">{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control"
                     placeholder="{{'PAGE.VIMDETAILS.VIMUSERNAME' | translate}}" type="text" formControlName="vim_user"
                     id="vim_user" [ngClass]="{ 'is-invalid': submitted && f.vim_user.errors }">
@@ -100,7 +100,7 @@
             <div class="col-sm-3">
                 <label for="vim_password">{{'PAGE.VIMDETAILS.VIMPASSWORD' | translate}}*</label>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-3 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="VIM Password" type="password"
                     formControlName="vim_password" id="vim_password"
                     [ngClass]="{ 'is-invalid': submitted && f.vim_password.errors }">
@@ -110,7 +110,7 @@
             <div class="col-sm-3">
                 <label for="location">{{'PAGE.VIMDETAILS.VIMLOCATION' | translate}}</label>
             </div>
-            <div class="col-sm-9 form-inline">
+            <div class="col-sm-9 form-inline mb-3">
                 <div class="input-group">
                     <input autocomplete="off" formControlName="locationName" type="text" class="form-control"
                         placeholder="{{'PAGE.VIMDETAILS.NAME' | translate}}"
@@ -120,7 +120,7 @@
                     <input autocomplete="off" formControlName="longitude" type="text" class="form-control"
                         placeholder="Longitude" [ngClass]="{ 'is-invalid': submitted && f.longitude.errors }">
                 </div>
-                <small class="text-info mt-1 ml-1">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
+                <small class="text-info mt-1 me-1">{{'PAGE.VIM.LOCATIONINFO' | translate}}</small>
             </div>
         </div>
         <div class="row form-group content-style">
@@ -129,17 +129,14 @@
             </div>
             <div class="col-sm-3 form-group">
                 <div class="custom-file">
-                    <input [disabled]="!selectedVimType" type="file" #fileInput class="custom-file-input"
+                    <input [disabled]="!selectedVimType" type="file" #fileInput class="fileupload custom-file-input"
                         (change)="filesDropped($event.target.files)" id="customFile">
-                    <label class="custom-file-label" #fileInputLabel for="customFile">
-                        {{'CHOOSEFILE' | translate}}
-                    </label>
                 </div>
                 <small class="text-info">{{'UPLOADCONFIGLABEL' | translate}}</small>
             </div>
         </div>
         <div class="row" [hidden]="!selectedVimType">
-            <div class="col-12">
+            <div class="d-grid col-12">
                 <button type="button" class="btn btn-block border-0 bg-light text-dark"
                     (click)="isCollapsed = !isCollapsed"
                     [attr.aria-expanded]="!isCollapsed">{{'PAGE.VIMDETAILS.CONFIGPARAMETERS' | translate}}</button>
@@ -148,8 +145,8 @@
         <div id="configurationparameters" class="row collapse mt-3" [ngbCollapse]="isCollapsed">
             <div class="col-sm-12">
                 <div class="ngx-codemirror new-vim" [hidden]="!selectedVimType">
-                    <div class="form-group"  *ngIf="!vimID">
-                        <button type="button" class="btn btn-warning btn-sm mr-3" (click)="checkData()">
+                    <div class="form-group mb-3" *ngIf="!vimID">
+                        <button type="button" class="btn btn-warning btn-sm me-3" (click)="checkData()">
                             <i class="fa fa-clone" aria-hidden="true"></i>
                             {{'PAGE.VIMDETAILS.LOADSAMPLECONFIG' | translate}}</button>
                         <button type="button" class="btn btn-danger btn-sm" (click)="clearConfig()">
@@ -162,9 +159,9 @@
                 </div>
             </div>
         </div>
-        <div class="modal-footer border-0">
+        <div class="modal-footer border-0 mb-3 mt-3 me-3">
             <button type="button" (click)="onVimAccountBack()"
-                class="btn btn-danger">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
+                class="btn btn-danger me-2">{{'PAGE.VIMDETAILS.BACKTOVIMACCOUNTS' | translate}}</button>
             <button *ngIf="!vimID" type="submit" class="btn btn-primary">{{'CREATE' | translate}}</button>
             <button *ngIf="vimID" type="submit" class="btn btn-primary">{{'UPDATE' | translate}}</button>
         </div>
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
index d750ccc..28444af 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.scss
@@ -14,4 +14,18 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/variable.scss";
+.form-control:disabled {
+    background-color: var(--bs-secondary-bg) !important;
+    opacity: 1;
+}
+.d-grid {
+    margin-top: 40px;
+}
+.input-group {
+    width: 74%;
+}
+button.bg-light:hover, button.bg-light:focus {
+    background-color: $paleblue !important;
+ }
\ No newline at end of file
diff --git a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
index 05fe4a2..6619bfd 100644
--- a/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
+++ b/src/app/vim-accounts/new-vimaccount/NewVimaccountComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file Vim Account Component.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -48,7 +47,7 @@
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 import { VimAccountDetails } from 'VimAccountModel';
 import { WarningComponent } from 'WarningComponent';
 /**
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
index 7feabe2..9838656 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.html
@@ -15,12 +15,12 @@
 
 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 align-items-center justify-content-between">
+<div class="d-flex align-items-center justify-content-between">
     <div class="col-sm-4">
         <div class="d-flex align-items-center header-style">{{'VIMACCOUNTS' | translate}}</div>
     </div>
-    <div class="col-sm-8 text-right">
-        <div class="btn-group list mr-2" role="group">
+    <div class="col-sm-8 text-end">
+        <div class="btn-group list me-2" role="group">
             <button class="btn btn-primary" type="button" (click)="mapView()" placement="top" container="body"
                 ngbTooltip="{{'MAPVIEW' | translate}}" [hidden]="showList" [disabled]="vimData.length == 0">
                 <i class="fas fa-map-marker-alt"></i>&nbsp;
@@ -41,15 +41,15 @@
         </span>
     </div>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions" [hidden]="showList">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-0 list-utilites-actions" [hidden]="showList">
+    <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}}</span>
             <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" [hidden]="showList">
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
index aeb086e..b79a921 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.scss
@@ -22,13 +22,13 @@
     width: 100%;
     .ol-popup {
         @include background(null, $white, null, null, null);
-        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
-        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
+        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
         @include border(all, 1, solid, $gray-80);
         @include position_value(absolute, $top: null, $right: null, $bottom: 12px, $left: -50px);
         @include wh-value(280px, null);
         @include font-style(normal);
-        @include font(null, .765625rem, 400);
+        @include font(null, 0.765625rem, 400);
         @include line-height(1.5);
         text-align: start;
         text-decoration: none;
@@ -39,7 +39,8 @@
         line-break: auto;
         word-wrap: break-word;
         @include roundedCorners(2px);
-        &:after, &:before{
+        &:after,
+        &:before {
             top: 100%;
             @include border(all, 1, solid, transparent);
             content: " ";
@@ -70,4 +71,13 @@
             content: "✖";
         }
     }
+    .close {
+        opacity: 1;
+        background-color: transparent;
+        border: 0;
+        position: absolute;
+        right: 10px;
+        bottom: 213px;
+        font-size: 1.31rem;
+    }
 }
\ No newline at end of file
diff --git a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
index ac0b502..20081c4 100644
--- a/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
+++ b/src/app/vim-accounts/vim-account-details/VimAccountDetailsComponent.ts
@@ -169,16 +169,16 @@
                 valuePrepareFunction: (cell: VIMData, row: VIMData): string => {
                     if (row.operationalState === this.operationalStateFirstStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-clock text-warning"></i>
-                        </span>`;
+                         <i class="fas fa-clock text-warning"></i>
+                         </span>`;
                     } else if (row.operationalState === this.operationalStateSecondStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-check-circle text-success"></i>
-                        </span>`;
+                         <i class="fas fa-check-circle text-success"></i>
+                         </span>`;
                     } else if (row.operationalState === this.operationalStateThirdStep) {
                         return `<span class="icon-label" title="${row.operationalState}">
-                        <i class="fas fa-times-circle text-danger"></i>
-                        </span>`;
+                         <i class="fas fa-times-circle text-danger"></i>
+                         </span>`;
                     } else {
                         return `<span>${row.operationalState}</span>`;
                     }
@@ -360,7 +360,7 @@
                 }
             }
         });
-        if (this.getLocation !== []) {
+        if (this.getLocation.length) {
             this.getLocation.filter((loc: GetLocation) => {
                 if (loc.location !== '') {
                     if (loc.location !== ',,') {
@@ -456,7 +456,7 @@
         this.popupData += '<ul class="list-unstyled m-2">';
         const instnaceData: NSInstanceDetails[] = this.nsData.filter((item: NSInstanceDetails) => {
             if (item.datacenter === feature.values_.Id) {
-                this.popupData += '<li class="m-2"><a class="d-block text-truncate" target="_parent" href="instances/ns/' + item._id + '"><i class="fa-sitemap fas icons mr-1"></i>'
+                this.popupData += '<li class="m-2"><a class="d-block text-truncate" target="_parent" href="instances/ns/' + item._id + '"><i class="fa-sitemap fas icons me-1"></i>'
                     + item.name + '</a></li>';
                 return item;
             }
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
index 925a5a2..b69ae7c 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.html
@@ -27,14 +27,14 @@
             <label class="col-sm-12 col-form-label mandatory-label"
                 [ngClass]="{'text-danger': wimNewAccountForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
             <label class="col-sm-4 col-form-label" for="name">{{'NAME' | translate}}*</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'NAME' | translate}}" type="text"
                     formControlName="name" id="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" required>
             </div>
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label" for="wim_type">{{'TYPE' | translate}}*</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <ng-select bindLabel="title" bindValue="value" [items]="wimType" placeholder="{{'SELECT' | translate}}"
                     formControlName="wim_type" id="wim_type" [(ngModel)]="wimTypeMod" [addTag]="sharedService.addCustomTag"
                     [ngClass]="{ 'is-invalid': submitted && f.wim_type.errors }" required>
@@ -44,7 +44,7 @@
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label" for="wim_url">{{'URL' | translate}}*</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'URL' | translate}}" type="url"
                     formControlName="wim_url" id="wim_url" [ngClass]="{ 'is-invalid': submitted && f.wim_url.errors }"
                     required>
@@ -55,7 +55,7 @@
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label" for="user">{{'PAGE.WIMACCOUNTS.USERNAME' | translate}}*</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.WIMACCOUNTS.USERNAME' | translate}}"
                     type="text" formControlName="user" id="user"
                     [ngClass]="{ 'is-invalid': submitted && f.user.errors }" required>
@@ -63,7 +63,7 @@
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label" for="password">{{'PAGE.WIMACCOUNTS.PASSWORD' | translate}}*</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <input autocomplete="off" class="form-control" placeholder="{{'PAGE.WIMACCOUNTS.PASSWORD' | translate}}"
                     type="password" formControlName="password" id="password"
                     [ngClass]="{ 'is-invalid': submitted && f.password.errors }" required>
@@ -71,7 +71,7 @@
         </div>
         <div class="form-group row">
             <label class="col-sm-4 col-form-label" for="description">{{'DESCRIPTION' | translate}}</label>
-            <div class="col-sm-8">
+            <div class="col-sm-8 mb-3">
                 <textarea class="form-control" placeholder="{{'DESCRIPTION' | translate}}" type="text"
                     formControlName="description" id="description"></textarea>
             </div>
@@ -83,9 +83,8 @@
                     id="config"></textarea>
                 <div class="fileupload-text mt-1 mb-1">{{'FILEUPLOADLABEL' | translate}}</div>
                 <div class="custom-file">
-                    <input type="file" #fileInputConfig class="custom-file-input"
+                    <input type="file" #fileInputConfig class="fileupload custom-file-input"
                         (change)="configFile($event.target.files)" id="customFile">
-                    <label class="custom-file-label" #fileInputConfigLabel for="customFile">{{'CHOOSEFILE' | translate}}</label>
                 </div>
             </div>
         </div>
diff --git a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
index 65ae937..2fa3b96 100644
--- a/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
+++ b/src/app/wim-accounts/new-wim-account/NewWIMAccountComponent.ts
@@ -18,7 +18,6 @@
 /**
  * @file WIM Account Component.
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Component, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
@@ -29,7 +28,7 @@
 import { environment } from 'environment';
 import * as jsyaml from 'js-yaml';
 import { RestService } from 'RestService';
-import { SharedService } from 'SharedService';
+import { SharedService, isNullOrUndefined } from 'SharedService';
 
 /**
  * Creating component
diff --git a/src/app/wim-accounts/wim-account-details/WIMAccountDetailsComponent.html b/src/app/wim-accounts/wim-account-details/WIMAccountDetailsComponent.html
index 2c2d839..2b34ea2 100644
--- a/src/app/wim-accounts/wim-account-details/WIMAccountDetailsComponent.html
+++ b/src/app/wim-accounts/wim-account-details/WIMAccountDetailsComponent.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">{{'WIMACCOUNTS' | translate}}</div>
     <span class="button">
         <button class="btn btn-primary" type="button" placement="top" container="body" ngbTooltip="{{'PAGE.WIMACCOUNTS.NEWWIM' | translate}}"
@@ -24,15 +24,15 @@
         </button>
     </span>
 </div>
-<div class="row mt-2 mb-0 list-utilites-actions">
-    <div class="col-auto mr-auto">
+<div class="mt-2 mb-0 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}}</span>
             <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/wim-accounts/wim-account-info/WIMAccountInfoComponent.html b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
index 930b63d..7f4fd92 100644
--- a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
+++ b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.html
@@ -22,7 +22,7 @@
   </button>
 </div>
 <div class="modal-body modal-body-custom-height p-0">
-  <table class="table table-striped table-layout-fixed mb-0" *ngIf="wimDetails">
+  <table class="table table-borderless table-layout-fixed mb-0" *ngIf="wimDetails">
     <tr>
       <td colspan="2">
         <b>{{'ID' | translate}}:</b> {{(wimDetails._id)?wimDetails._id:''}}
@@ -35,9 +35,9 @@
     </tr>
     <tr>
       <td>
-        <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ml-1 badge" [ngClass]="{'badge-warning text-white':wimDetails._admin.operationalState === operationalStateFirstStep,
-        'badge-success':wimDetails._admin.operationalState === operationalStateSecondStep,
-        'badge-danger':wimDetails._admin.operationalState === operationalStateThirdStep}">
+        <b>{{'OPERATIONALSTATE' | translate}}:</b><span class="ms-1 badge" [ngClass]="{'badge bg-warning text-white p-1':wimDetails._admin.operationalState === operationalStateFirstStep,
+        'badge bg-success text-white p-1':wimDetails._admin.operationalState === operationalStateSecondStep,
+        'badge bg-danger text-white p-1':wimDetails._admin.operationalState === operationalStateThirdStep}">
           {{(wimDetails._admin.operationalState)?wimDetails._admin.operationalState:''}}
         </span>
       </td>
diff --git a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.scss b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.scss
index 021d205..34a3091 100644
--- a/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.scss
+++ b/src/app/wim-accounts/wim-account-info/WIMAccountInfoComponent.scss
@@ -14,4 +14,21 @@
  limitations under the License.
 
  Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
-*/
\ No newline at end of file
+*/
+@import "../../../assets/scss/variable.scss";
+.table thead th {
+   vertical-align: bottom;
+   border-bottom: 2px solid rgba(0, 0, 0, .1);
+ }
+ .table th, .table td {
+   padding: 1rem;
+   vertical-align: top;
+   border-top: 1px solid rgba(0, 0, 0, .1);
+   border-bottom: transparent;
+ }
+ .table b {
+   background: none;
+   color: $body-color;
+   padding-right: 0px;
+   padding-left: 0px;
+ }
\ No newline at end of file
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 286f750..dd6e156 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -197,6 +197,7 @@
     "HEALING": "Manuelle Heilung",
     "DAY1OPERATION": "Tag-1 Operation",
     "SELECTVDU": "Wählen VDU",
+    "DATE": "Datum",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Instrumententafel",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 7f27b20..ebe8d7c 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -197,6 +197,7 @@
     "HEALING": "Manual Healing",
     "DAY1OPERATION": "Day1 operation",
     "SELECTVDU": "Select VDU",
+    "DATE": "Date",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Dashboard",
diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json
index 5f19c04..354058b 100644
--- a/src/assets/i18n/es.json
+++ b/src/assets/i18n/es.json
@@ -197,6 +197,7 @@
     "HEALING": "Curación Manual",
     "DAY1OPERATION": "Operación día 1",
     "SELECTVDU": "Seleccionar VDU",
+    "DATE":"Fecha",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "Tablero",
diff --git a/src/assets/i18n/pt.json b/src/assets/i18n/pt.json
index c1fb1e3..98b3c46 100644
--- a/src/assets/i18n/pt.json
+++ b/src/assets/i18n/pt.json
@@ -197,6 +197,7 @@
     "HEALING": "Cura Manual",
     "DAY1OPERATION": "Operação dia 1",
     "SELECTVDU": "Selecione VDU",
+    "DATE":"Data",
     "PAGE": {
         "DASHBOARD": {
             "DASHBOARD": "painel de controle",
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index abb0be9..031608d 100644
--- a/src/assets/scss/app.scss
+++ b/src/assets/scss/app.scss
@@ -31,6 +31,16 @@
 .btn-danger:focus {
   @include box-shadow(0, 0, 0, 0.2rem, lighten($danger, 30%) !important);
 }
+.btn-success {
+  --bs-btn-hover-bg: #198754;
+}
+.btn-danger {
+  --bs-btn-hover-bg: #cb3424;
+  --bs-btn-color: #fff;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-active-bg: #cb3424;
+  --bs-btn-active-color: #fff;
+}
 body,
 .list-overflow,
 .scroll-box,
@@ -70,6 +80,7 @@
     @include background(null, $theme-bg-color !important, null, null, null);
   }
   a {
+    text-decoration: none;
     color: $primary;
     &:hover,
     &:focus {
@@ -110,6 +121,7 @@
       }
       &:disabled {
         cursor: not-allowed;
+        background-color: grey;
       }
     }
   }
@@ -126,11 +138,15 @@
     );
   }
   .form-control {
+    color: #4f5467;
+    border-radius: 4px;
+    background-color: $white;
     @include roundedCorners(4);
     @include font(null, 12px, null);
     &::placeholder {
       color: $gray-400;
     }
+    background-color: $white;
   }
   .header-style {
     @include font(null, 1.2rem, 700);
@@ -143,7 +159,7 @@
   .cursor-pointer {
     cursor: pointer;
   }
-  .mr-top-5 {
+  .me-top-5 {
     @include margin-value-percentage(5px, auto, auto, auto);
   }
   .padLeft0 {
@@ -172,18 +188,31 @@
   }
   .close {
     opacity: 1 !important;
+    background-color: transparent;
+    border: 0;
+    position: absolute;
+    right: 10px;
+    font-size: 1.3125rem;
   }
   .closeVersion {
     text-shadow: none;
   }
   .roles-section {
     .card {
+      .card-body {
+        background-color: #fff;
+      }
       .bg-secondary {
+        padding: 11px;
         @include background(null, $gray-400 !important, null, null, null);
       }
     }
   }
   .juju-section {
+    .col-form-label {
+      position: relative;
+      bottom: 3px;
+    }
     .card {
       @include roundedCorners(4);
       margin-bottom: 0.25rem;
@@ -195,7 +224,13 @@
           color: $white;
         }
       }
+      .card-header {
+        padding: 0.75rem 1.25rem;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
       .card-body {
+        border-radius: 2px;
         .seconds-btn-group .active {
           color: $white;
           @include background(null, $primary !important, null, null, null);
@@ -204,14 +239,20 @@
         @include padding-value(5, 5, 5, 5);
         border-top: 0;
         table {
+          th,
+          td {
+            color: $body-color;
+          }
           thead th {
             font-size: 12px;
+            color: $body-color;
           }
           tbody th i.active-icon {
             font-size: 10px;
           }
         }
       }
+      background-color: #fff;
     }
   }
   .card {
@@ -222,6 +263,7 @@
     @include roundedCorners(3);
     .custom-card-body {
       @include padding-value(15, 15, 15, 15);
+      background-color: #fff;
     }
   }
   table-cell-default-editor select-editor select {
@@ -242,7 +284,17 @@
     @include roundedCorners(3);
   }
   /** Model Popup-Design **/
+  .modal-header {
+    .close {
+      top: 10px;
+    }
+  }
+  .modal-content {
+    background-color: #fff;
+  }
   .modal-body-custom-height {
+    background-color: #fff !important;
+    color: $body-color;
     max-height: 65vh;
     overflow-y: auto;
   }
@@ -256,30 +308,37 @@
   }
   /** Popover Header **/
   .popover-header {
+    margin-top: 7px;
     color: $primary;
     @include background(null, $theme-bg-color, null, null, null);
   }
   /** Vim Show running instance Details **/
   .runninginstances {
     width: 200px;
+    margin-top: 10px;
     .popover-body {
       max-height: 200px;
       overflow-y: scroll;
+      background-color: $white !important;
     }
   }
   .resources-chart-popover {
+    margin-top: 4px;
     max-width: 60% !important;
     width: 600px !important;
     @include font-family("Roboto");
     .popover-body {
       max-height: 60vh;
       overflow-y: scroll;
+      background-color: #fff !important;
     }
   }
   /****************************************************************************/
   /************************** Smart table custom design ***********************/
   /****************************************************************************/
   ng2-smart-table {
+    background-color: #fff;
+    background-color: none;
     @include font(null, 15px, null);
     color: $gray-700;
     .form-control {
@@ -349,15 +408,29 @@
       }
     }
     .ng2-smart-filter {
+      background-color: #fff;
       @include wh-value(null, calc(2rem + 2px) !important);
       @include font(null, 12px, null);
       margin-top: 6px;
     }
+    input {
+      background-color: #fff !important;
+    }
     table.list-data {
       tr td,
       tr th {
         @include padding-value(2, 10, 2, 10);
         vertical-align: middle !important;
+        background-color: #fff;
+        color: grey;
+      }
+      input[type="checkbox"] {
+        padding: 6px 6px;
+        border-color: rgba(0, 0, 0, 0.5);
+        &:checked {
+          background-color: $blue !important;
+          border: black;
+        }
       }
       tbody {
         tr.selected {
@@ -368,6 +441,7 @@
     default-table-filter {
       select-filter {
         select.form-control {
+          background-color: #fff !important;
           @include flexbox(inline-block, null, null, null, null, null);
           @include wh-value(null, calc(1.5rem + 2px) !important);
           vertical-align: middle;
@@ -392,9 +466,11 @@
       }
       input-filter {
         input[type="text"] {
+          background-color: #fff;
           @include position_value(relative, null, null, null, null);
         }
         &:after {
+          color: #afb5c1;
           @include position_value(relative, -26px, null, null, 100%);
           content: "\f002";
           @include font("Font Awesome 5 Free", 10px, null);
@@ -415,6 +491,8 @@
             }
           }
           .ng2-smart-page-link {
+            background-color: #fff;
+            box-shadow: none;
             @include font(null, 12px !important, null);
             &.page-link {
               text-align: center;
@@ -472,12 +550,15 @@
   /*********************** List Action Dropdown section ***********************/
   /****************************************************************************/
   .list-action-dropdown {
+    background-color: #fff;
     @include border(all, 1, solid, $primary);
     @include padding-value(0, 0, 0, 0);
+    margin-top: 3px;
     button.btn.btn-primary {
       @include background(null, transparent, null, null, null);
       @include padding-value(8, 8, 8, 8);
       @include roundedCorners(0);
+      background-color: #fff;
       color: $primary;
       &:hover {
         @include background(null, $primary, null, null, null);
@@ -492,12 +573,14 @@
   /*********************** Custom tabel design in topology ********************/
   /****************************************************************************/
   .custom-table {
+    border: 1px solid rgba(0, 0, 0, 0.1);
     td:first-child {
       @include font(null, null, bold);
       text-align: right;
     }
     th,
     td {
+      border: 1px solid rgba(0, 0, 0, 0.1);
       @include padding-value(5, 7, 5, 7);
       @include font(null, 10px, null);
       @include line-height(15px);
@@ -528,6 +611,7 @@
   /******************** Custom nav section for default status *****************/
   /****************************************************************************/
   .list-utilites-actions {
+    margin-left: 10px;
     @include flexbox(flex, null, row, null, center, null);
     nav.custom-items-config {
       @include position_value(relative, null, null, null, null);
@@ -552,6 +636,22 @@
   /****************************************************************************/
   /************************* File upload custom design ************************/
   /****************************************************************************/
+  .fileupload {
+    border: 1px solid;
+    border: 1px solid;
+    border-color: #054c8c;
+    border-radius: 4px;
+  }
+  input[type="file"] {
+    width: 100%;
+  }
+  input[type="file"]::file-selector-button {
+    border: none;
+    background: #054c8c;
+    padding: 7px 10px;
+    border-radius: 2px;
+    color: #fff;
+  }
   .custom-file-label {
     color: $primary;
     @include roundedCorners(4);
@@ -613,6 +713,7 @@
           @include flexbox(flex, null, null, null, center, null);
           border: none;
           .span-overflow-text {
+            color: $black;
             @include wh-value(90%, null);
             white-space: nowrap;
             overflow: hidden;
@@ -665,6 +766,7 @@
     fieldset {
       @include border(all, 1, solid, $primary);
       legend {
+        float: none;
         @include padding-value(0, 5, 0, 5);
         @include font(null, 15px, null);
         color: $primary;
@@ -676,6 +778,9 @@
           @include wh-value(25%, null);
         }
       }
+      .font-weight-bold {
+        font-weight: 700 !important;
+      }
     }
     .btn-icon {
       @include wh-value(36px, 36px);
@@ -867,6 +972,17 @@
   }
 }
 
+.custom-select {
+  background-color: #fff !important;
+  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
+  @include background(
+    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='100' height='10' viewBox='0 0 10 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
+    var(--input-bg-color),
+    null,
+    no-repeat,
+    0px 10px
+  );
+}
 /****************************************************************************/
 /************************** HEALING STYLE ***********************************/
 /****************************************************************************/
@@ -887,6 +1003,9 @@
 
   .form-group {
     margin-bottom: 1px;
+    .row {
+      margin-bottom: 16px;
+    }
   }
 
   .col-sm-1 {
@@ -897,3 +1016,22 @@
     left: 79px;
   }
 }
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+}
+.table th,
+.table td {
+  background-color: #fff;
+  padding: 5px;
+  vertical-align: top;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: transparent;
+}
+.table b {
+  background: none;
+  color: $body-color;
+  padding-right: 0px;
+  padding-left: 0px;
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 40c5e16..f2ad391 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -45,4 +45,4 @@
 @import "../../../node_modules/angular-notifier/styles/types/type-default.scss";
 @import "../../../node_modules/angular-notifier/styles/types/type-info.scss";
 /*toastr styles*/
-@import '~ngx-toastr/toastr.css';
\ No newline at end of file
+@import '/node_modules/ngx-toastr/toastr';
\ No newline at end of file
diff --git a/src/assets/scss/variable.scss b/src/assets/scss/variable.scss
index 3af9d3b..5fcb793 100644
--- a/src/assets/scss/variable.scss
+++ b/src/assets/scss/variable.scss
@@ -124,6 +124,7 @@
 $cyan: #4fc3f7 !default;
 $grayish-red: #c1bfbf !default;
 $white-smoke: #f1f1f1 !default;
+$paleblue: #c8e1f9 !default;
 $text-muted: $gray-500 !default;
 $colors: (
   "blue": $blue,
diff --git a/src/models/MenuModel.ts b/src/models/MenuModel.ts
index d9d0620..5944aef 100644
--- a/src/models/MenuModel.ts
+++ b/src/models/MenuModel.ts
@@ -41,7 +41,7 @@
     },
     {
         liClass: 'round-edge-top-3',
-        anchorTagClass: 'parentlink round-edge-top-3 mr-top-5',
+        anchorTagClass: 'parentlink round-edge-top-3 me-top-5',
         clickFunction: 'packages',
         routerLink: '/packages',
         routerLinkActive: ['menu-open', 'parentactive'],
@@ -148,7 +148,7 @@
         ]
     },
     {
-        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        liClass: 'round-edge-top-3 round-edge-bottom-3 me-top-5',
         anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
         routerLink: '/sdn/details',
@@ -159,7 +159,7 @@
         isChildExists: false
     },
     {
-        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        liClass: 'round-edge-top-3 round-edge-bottom-3 me-top-5',
         anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
         routerLink: '/vim',
@@ -170,7 +170,7 @@
         isChildExists: false
     },
     {
-        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        liClass: 'round-edge-top-3 round-edge-bottom-3 me-top-5',
         anchorTagClass: 'parentlink round-edge-top-3 round-edge-bottom-3',
         clickFunction: 'k8s',
         routerLink: '/k8s',
@@ -204,7 +204,7 @@
         ]
     },
     {
-        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        liClass: 'round-edge-top-3 round-edge-bottom-3 me-top-5',
         anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
         routerLink: '/repos/details',
@@ -215,7 +215,7 @@
         isChildExists: false
     },
     {
-        liClass: 'round-edge-top-3 round-edge-bottom-3 mr-top-5',
+        liClass: 'round-edge-top-3 round-edge-bottom-3 me-top-5',
         anchorTagClass: 'link round-edge-top-3 round-edge-bottom-3 individual',
         clickFunction: 'nosubmenu',
         routerLink: '/wim/details',
diff --git a/src/services/AcessGuardService.ts b/src/services/AcessGuardService.ts
index 1ee7f64..ec77d04 100644
--- a/src/services/AcessGuardService.ts
+++ b/src/services/AcessGuardService.ts
@@ -28,6 +28,7 @@
  * @Injectable takes a metadata object that tells Angular how to compile and run module code
  */
 @Injectable()
+// eslint-disable-next-line deprecation/deprecation
 export class AcessGuardService implements CanLoad {
     /**
      * check if module can be loaded
diff --git a/src/services/AuthGuardService.ts b/src/services/AuthGuardService.ts
index 512705f..3e0ef8f 100644
--- a/src/services/AuthGuardService.ts
+++ b/src/services/AuthGuardService.ts
@@ -30,6 +30,7 @@
  * @Injectable takes a metadata object that tells Angular how to compile and run module code
  */
 @Injectable()
+// eslint-disable-next-line deprecation/deprecation
 export class AuthGuardService implements CanActivate {
     /** Holds teh instance of AuthService class of type AuthService @private */
     private router: Router;
diff --git a/src/services/AuthenticationService.ts b/src/services/AuthenticationService.ts
index d01eec6..904c1cf 100644
--- a/src/services/AuthenticationService.ts
+++ b/src/services/AuthenticationService.ts
@@ -18,7 +18,6 @@
 /**
  * @file Auth service
  */
-import { isNullOrUndefined } from 'util';
 import { HttpHeaders } from '@angular/common/http';
 import { Injectable, Injector } from '@angular/core';
 import { Router } from '@angular/router';
@@ -28,6 +27,7 @@
 import { environment } from 'environment';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { isNullOrUndefined } from 'SharedService';
 import { SharedService } from 'SharedService';
 import { ProjectModel } from '../models/VNFDModel';
 import { RestService } from './RestService';
diff --git a/src/services/RestService.ts b/src/services/RestService.ts
index d3d9ea0..5f47fb1 100644
--- a/src/services/RestService.ts
+++ b/src/services/RestService.ts
@@ -20,7 +20,6 @@
  * @file Provider for REST Service
  */
 
-import { isNullOrUndefined } from 'util';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -41,6 +40,9 @@
     private http: HttpClient;
     /** API URL. Disabled tslint since server doesn't support https protocol */
     private apiURL: string = '';
+    /** Method to handle null or undefined @private */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    private isNullOrUndefined = (data: any): boolean => data === null || data === undefined;
     /** Notifier service to popup notification @private */
     private notifierService: NotifierService;
     /** Instance for active modal service @public */
@@ -62,7 +64,7 @@
 
     public getResource(apiURL: string, httpHeaders?: { headers: HttpHeaders }): Observable<{}> {
         const getRequest: APIURLHEADER = this.getHttpoptions(apiURL);
-        if (!isNullOrUndefined(httpHeaders)) {
+        if (!this.isNullOrUndefined(httpHeaders)) {
             return this.http.get(apiURL, httpHeaders);
         } else {
             return this.http.get(getRequest.url, getRequest.httpOptions);
@@ -77,7 +79,7 @@
 
     public postResource(apiURLHeader: { url: string, httpOptions?: { headers: HttpHeaders } }, payload: {}): Observable<{}> {
         const getRequest: APIURLHEADER = this.getHttpoptions(apiURLHeader.url);
-        if (!isNullOrUndefined(apiURLHeader.httpOptions)) {
+        if (!this.isNullOrUndefined(apiURLHeader.httpOptions)) {
             return this.http.post(apiURLHeader.url, payload, apiURLHeader.httpOptions);
         } else {
             return this.http.post(getRequest.url, payload, getRequest.httpOptions);
@@ -92,7 +94,7 @@
 
     public patchResource(apiURLHeader: { url: string, httpOptions?: { headers: HttpHeaders } }, payload: {}): Observable<object> {
         const getRequest: APIURLHEADER = this.getHttpoptions(apiURLHeader.url);
-        if (!isNullOrUndefined(apiURLHeader.httpOptions)) {
+        if (!this.isNullOrUndefined(apiURLHeader.httpOptions)) {
             return this.http.patch(apiURLHeader.url, payload, apiURLHeader.httpOptions);
         } else {
             return this.http.patch(getRequest.url, payload, getRequest.httpOptions);
@@ -107,7 +109,7 @@
 
     public putResource(apiURLHeader: { url: string, httpOptions?: { headers: HttpHeaders } }, payload: {}): Observable<object> {
         const getRequest: APIURLHEADER = this.getHttpoptions(apiURLHeader.url);
-        if (!isNullOrUndefined(apiURLHeader.httpOptions)) {
+        if (!this.isNullOrUndefined(apiURLHeader.httpOptions)) {
             return this.http.put(apiURLHeader.url, payload, apiURLHeader.httpOptions);
         } else {
             return this.http.put(getRequest.url, payload, getRequest.httpOptions);
@@ -121,7 +123,7 @@
 
     public deleteResource(apiURL: string, httpHeaders?: { headers: HttpHeaders }): Observable<object> {
         const getRequest: APIURLHEADER = this.getHttpoptions(apiURL);
-        if (!isNullOrUndefined(httpHeaders)) {
+        if (!this.isNullOrUndefined(httpHeaders)) {
             return this.http.delete(apiURL, httpHeaders);
         } else {
             return this.http.delete(getRequest.url, getRequest.httpOptions);
diff --git a/src/services/SharedService.ts b/src/services/SharedService.ts
index 8fb51bf..00f0a63 100644
--- a/src/services/SharedService.ts
+++ b/src/services/SharedService.ts
@@ -18,7 +18,6 @@
 /**
  * @file Provider for Shared Service
  */
-import { isNullOrUndefined } from 'util';
 import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { EventEmitter, Injectable, Output } from '@angular/core';
 import { FormArray, FormGroup } from '@angular/forms';
@@ -514,3 +513,8 @@
         };
     }
 }
+
+/** Method to handle null or undefined @public */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+export const isNullOrUndefined = (data: any): boolean => data === null || data === undefined;
+
diff --git a/src/test.ts b/src/test.ts
index c191cf8..5ea6a97 100644
--- a/src/test.ts
+++ b/src/test.ts
@@ -25,10 +25,6 @@
 } from '@angular/platform-browser-dynamic/testing';
 import 'zone.js/dist/zone-testing';
 
-/** const variable require */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
@@ -36,9 +32,3 @@
     teardown: { destroyAfterEach: false }
 }
 );
-
-/** const variable context */
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);