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';
 
 /**