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">