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