diff --git a/app/components/nav-bar.js b/app/components/nav-bar.js
index 5764d4d4a31..1a736fd2fd3 100644
--- a/app/components/nav-bar.js
+++ b/app/components/nav-bar.js
@@ -86,6 +86,23 @@ export default class NavBar extends Component {
     return !(String(this.session.currentRouteName).includes('events.view'));
   }
 
+  @computed('isNotPublicPageRoute')
+  get checkShowClassCssPublic() {
+    if (this.session.isAuthenticated) {
+      if (this.isNotPublicPageRoute) {
+        return 'au-home-page';
+      } else {
+        return 'au-public-page';
+      }
+    } else {
+      if (this.isNotPublicPageRoute) {
+        return 'un-home-page';
+      } else {
+        return 'un-public-page';
+      }
+    }
+  }
+
   @action
   handleKeyPress() {
     if (event.keyCode === 13 || event.which === 13) {
@@ -120,6 +137,7 @@ export default class NavBar extends Component {
     });
   }
 
+
   @action
   handleClick() {
     this.router.replaceWith('public.index',  this.globalData.idEvent);
diff --git a/app/styles/pages/public-event.scss b/app/styles/pages/public-event.scss
index 401b384d6ea..6efd7731d1f 100644
--- a/app/styles/pages/public-event.scss
+++ b/app/styles/pages/public-event.scss
@@ -228,17 +228,11 @@
 }
 
 .logo-event {
-  margin: 10px !important;
-  width: 56px !important;
+  // margin: 10px !important;
+  // width: 56px !important;
   height: auto;
 }
 
-.btn-un-bd {
-  border: unset;
-  padding: unset !important;
-  height: 46px !important;
-}
-
 .public-social-links {
   margin-top: 1.5rem !important;
 }
diff --git a/app/styles/partials/nav-bar.scss b/app/styles/partials/nav-bar.scss
index bc21b62b97e..d56fe3ee1a8 100644
--- a/app/styles/partials/nav-bar.scss
+++ b/app/styles/partials/nav-bar.scss
@@ -34,9 +34,10 @@
 }
 
 .menu-item-public {
+  height: 100%;
   padding-left: unset !important;
   padding-right: unset !important;
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .item-exhibition {
@@ -45,12 +46,8 @@
   }
 }
 
-.rm-pd-l {
-  width: 100% !important;
-}
-
 .item-public {
-  font-size: .85714286rem !important;
+  font-size: 9px !important;
 }
 
 .item-menu-right {
@@ -62,6 +59,181 @@
 }
 
 .item-padding {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
+  padding-left: 16px !important;
+  padding-right: 16px !important;
+}
+
+.header-mobile > .layout-header-mobile > .row > .two.wide.column.bl-six {
+  width: 14.5% !important;
+}
+
+.layout-header-mobile {
+
+  .row {
+    position: absolute;
+  }
+
+
+  .reset-pd {
+    padding: unset !important;
+  }
+
+  .bl-one {
+    display: flex !important;
+    margin-right: -22px !important;
+    padding-left: 18px !important;
+    border-left: 1px solid rgba(34, 36, 38, .15) !important;
+
+    .item-bl-one {
+      width: calc(100% - 44px);
+    }
+  }
+
+  .bl-two {
+    margin-left: 9px !important;
+    border-left: 1px solid rgba(34, 36, 38, .15);
+    font-size: 14px;
+
+    .item-bl-two-login {
+      border-right: 1px solid rgba(34, 36, 38, .15) !important;
+      height: 100%;
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .btn-un-bd {
+      border: unset;
+      padding: unset !important;
+      height: 46px !important;
+      width: 100%;
+      margin: auto !important;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        width: 80%;
+      }
+    }
+  }
+
+  .bl-three {
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+  }
+
+  .bl-three-border {
+    border-right: 1px solid rgba(34, 36, 38, .15);
+  }
+
+  .bl-four {
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+
+    .menu-speakers {
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+    }
+  }
+
+  .bl-six {
+    border-right: 1px solid rgba(34, 36, 38, .15);
+
+    .au-public-page {
+      justify-content: center;
+    }
+
+    .un-public-page {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+
+  .bl-six-border {
+    border-left: 1px solid rgba(34, 36, 38, .15);
+  }
+
+  .bl-seven-au-public-page {
+    margin-right: auto !important;
+    margin-left: auto !important;
+
+    .au-public-page-text {
+      text-align: center !important;
+      justify-content: center;
+    }
+  }
+
+  .au-home-page-text {
+    justify-content: center;
+  }
+
+  .bl-seven-au-home-page {
+    .text-home-page {
+      display: flex !important;
+      justify-content: center;
+    }
+  }
+
+  .bl-seven {
+    left: 3px;
+    width: 18.5% !important;
+    margin: unset !important;
+    display: flex !important;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+
+    a {
+      width: calc(100% - 4px);
+      background-color: #fff !important;
+    }
+
+    .tag-a-not-login {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: unset !important;
+    }
+
+    .a-login-public {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: unset !important;
+    }
+  }
+
+  .bl-six-login {
+    button {
+      padding-left: 7px !important;
+    }
+  }
+
+  .bl-seven-not-login {
+    margin-right: unset !important;
+  }
+
+  .item {
+    &::before {
+      position: unset !important;
+      content: unset !important;
+      top: unset !important;
+      right: unset !important;
+      height: unset !important;
+      width: unset !important;
+      background: unset !important;
+    }
+  }
+}
+
+.set-bd-home {
+  padding-left: 21px !important;
+  padding-top: unset !important;
+  padding-right: unset !important;
+  padding-bottom: unset !important;
 }
diff --git a/app/templates/components/nav-bar.hbs b/app/templates/components/nav-bar.hbs
index c7fe6383ea4..71a5fa51922 100644
--- a/app/templates/components/nav-bar.hbs
+++ b/app/templates/components/nav-bar.hbs
@@ -68,88 +68,105 @@
   </div>
 </div>
 
-<div class="mobile only row">
-  <div class="ui navbar {{if (and this.showSessions this.showSpeakers this.showExhibitors (not isNotPublicPageRoute)) 'six item item-public' 'tiny'}} menu">
-    <a href="#" class="menu item open sidebar">
-      <i class="large content icon"></i>
-    </a>
-    {{#if this.session.isAuthenticated}}
-        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
-         <LinkTo
-          @route="index" class="item" @activeClass="">
-          <div class="ui header small text">{{this.settings.appName}}</div>
-        </LinkTo>
-        {{else }}
-            {{#if this.globalData.logoUrl}}
-              <button class="item btn-un-bd" {{on "click" this.handleClick}}>
-                  <img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
-              </button>
-            {{else}}
-            <button class="item btn-un-bd" {{on "click" this.handleClick}}>
-              <div class="ui header small text item-padding">Home</div>
-            </button>
-            {{/if}}
-        {{/if}}
-    {{else}}
-        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
+
+<div class="mobile only row header-mobile">
+  <div class="ui six column grid navbar menu  layout-header-mobile">
+  <div class="row reset-pd">
+    <div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
+      <Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
+      <i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
+    </div>
+    <div class="three wide column reset-pd bl-one ">
+        <a href="#" class="menu item open sidebar reset-pd item-bl-one">
+          <i class="large content icon"></i>
+        </a>
+    </div>
+    <div class="four wide column reset-pd bl-two" >
+      <div class="item-bl-two-login">
+        {{#if this.session.isAuthenticated}}
+          {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
           <LinkTo
-            @route="index" class="item" @activeClass="">
-            <div class="ui header small text">{{this.settings.appName}}</div>
+            @route="index" class="item reset-pd" @activeClass="">
+            <div class="ui header small text reset-pd">{{this.settings.appName}}</div>
           </LinkTo>
+          {{else }}
+              {{#if this.globalData.logoUrl}}
+                <button class="item btn-un-bd reset-pd " {{on "click" this.handleClick}} >
+                    <img src="{{this.globalData.logoUrl}}" class="logo-event " style="width: 80%;"/>
+                </button>
+              {{else}}
+              <button class="item btn-un-bd reset-pd" {{on "click" this.handleClick}} >
+                <div class="ui header small text item-padding">Home</div>
+              </button>
+              {{/if}}
+          {{/if}}
         {{else}}
-          {{#if this.globalData.logoUrl}}
-            <button class="item btn-un-bd" {{on "click" this.handleClick}}>
-                <img src="{{this.globalData.logoUrl}}" class="logo-event mr-8"/>
-            </button>
-          {{else}}
-          <button class="item btn-un-bd" {{on "click" this.handleClick}}>
-            <div class="ui header small text item-padding">Home</div>
-          </button>
+            {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
+              <LinkTo
+                @route="index" class="item reset-pd" @activeClass="">
+                <div class="ui header small text reset-pd">{{this.settings.appName}}</div>
+              </LinkTo>
+            {{else}}
+                {{#if this.globalData.logoUrl}}
+                  <button class="item btn-un-bd reset-pd" {{on "click" this.handleClick}} >
+                      <img src="{{this.globalData.logoUrl}}" class="logo-event "/ style="width: 80%;">
+                  </button>
+                {{else}}
+                <button class="item btn-un-bd reset-pd " {{on "click" this.handleClick}}>
+                  <div class="ui header small text item-padding">Home</div>
+                </button>
+                {{/if}}
+              {{/if}}
           {{/if}}
+      </div>
+    </div>
+    <div class="two wide column reset-pd bl-three {{if (and (not this.isNotPublicPageRoute) this.showSessions) 'bl-three-border' ''}}">
+      {{#if (not this.isNotPublicPageRoute)}}
+        {{#if this.showSessions}}
+        <div role="button" class="item menu-item-public menu-schedule" {{on "click" (fn this.redirectToPage 'schedule')}}>Schedule</div>
         {{/if}}
-    {{/if}}
-    {{#if (not this.isNotPublicPageRoute)}}
-      {{#if this.showSessions}}
-      <div role="button" class="item menu-item-public{{if  (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'schedule')}}>Schedule</div>
       {{/if}}
-      {{#if this.showSpeakers}}
-      <div  role="button" class="item menu-item-public {{if  (not (and showSessions showSpeakers showExhibitors)) 'item-padding' ''}} " {{on "click" (fn this.redirectToPage 'speakers')}}>Speakers</div>
-      {{/if}}
-      {{#if this.showExhibitors}}
-      <div role="button" class="item menu-item-public item-exhibition" {{on "click" (fn this.redirectToPage 'exhibition')}}>Exhibition</div>
+    </div>
+    <div class="two wide column reset-pd bl-four">
+      	{{#if (not this.isNotPublicPageRoute)}}
+        {{#if this.showSpeakers}}
+        <div  role="button" class="item menu-item-public menu-speakers " {{on "click" (fn this.redirectToPage 'speakers')}}>Speakers</div>
+        {{/if}}
       {{/if}}
-    {{/if}}
-    <div id="mobile-bar" class="search-bar search-bar-mobile d-flex items-center space-between m-1 p-2">
-      <Input @class="prompt" id="mobileSearchBar" @type="text" @key-up={{action "handleKeyPress"}} @value={{this.event_name}} placeholder={{t "Search"}} />
-      <i role="button" class="search icon" style="cursor: auto;" {{on "click" this.searchOnClick}}></i>
     </div>
-    <div class="{{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'item-menu-right' 'right menu nav-bar' }}">
-      {{!-- {{#if this.session.isAuthenticated}} --}}
-        {{!-- <NotificationDropdown
-          @notifications={{this.notifications}} /> --}}
-      {{!-- {{/if}} --}}
-      {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute this.isNotWizardPageRoute)}}
+    <div class="{{if this.session.isAuthenticated 'bl-six-login two' 'three'}} wide column reset-pd bl-six {{if (and (not this.isNotPublicPageRoute) this.showExhibitors) 'bl-six-border'  ''}}">
+      {{#if (not this.isNotPublicPageRoute)}}
+        {{#if this.showExhibitors}}
+        <div role="button" class="item menu-item-public item-exhibition {{checkShowClassCssPublic}}" {{on "click" (fn this.redirectToPage 'exhibition')}}>Exhibition</div>
+        {{/if}}
+    {{/if}}
+    {{#if (and this.isNotEventPageRoute this.isNotExplorePageRoute this.isNotWizardPageRoute)}}
         <div role="button" class="item ui" {{action "toggleMobileSearchBar"}} >
           <i class="search icon"></i>
         </div>
       {{/if}}
-      {{#if this.session.isAuthenticated}}
-        {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
-          <LinkTo
-            @route="create" class="item ui blue button-text small text">
-            <div>
-              {{t 'Create Event'}}
-            </div>
-          </LinkTo>
-        {{else}}
-          <LinkTo
-            @route="index" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}" @activeClass="">
-            <div class="ui header small text " >{{this.settings.appName}}</div>
-          </LinkTo>
-        {{/if}}
+    </div>
+    {{#if this.session.isAuthenticated}}
+      <div class="{{if (not this.isNotPublicPageRoute) 'three'  'four set-bd-home'}}  wide right floated reset-pd column bl-seven bl-seven-{{checkShowClassCssPublic}} " >
+          {{#if (and this.isNotPublicPageRoute this.isNotWizardPageRoute this.isNotEventPageRoute this.isNotOrderPageRoute  this.isNotEventDetailPageRoute)}}
+            <LinkTo
+              @route="create" class="item ui blue button-text small text reset-pd text-home-page">
+              <div style="font-size: 11.4286px !important;">
+                {{t 'Create Event'}}
+              </div>
+            </LinkTo>
+          {{else}}
+            <LinkTo
+              @route="index" class="item reset-pd {{checkShowClassCssPublic}}-text" @activeClass="" >
+              <div class="ui header small text reset-pd" style="font-size: 11.4286px !important;">{{this.settings.appName}}</div>
+            </LinkTo>
+          {{/if}}
+      </div>
       {{else}}
-        <a href="{{href-to 'login'}}" class="item {{if (and showSessions showSpeakers showExhibitors (not isNotPublicPageRoute)) 'rm-pd-l' ''}}">{{t 'Login'}}</a>
+      <div class="two wide right floated column reset-pd bl-seven">
+          <a href="{{href-to 'login'}}" class="item {{if (not this.isNotPublicPageRoute) 'a-login-public' 'tag-a-not-login'}}">{{t 'Login'}}</a>
+       </div>
       {{/if}}
-    </div>
+  </div>
   </div>
 </div>