diff --git a/resources/base.scss b/resources/base.scss
index 13b2f2a..e7a3b3e 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -25,7 +25,7 @@ a {
     }
 
     &:active {
-        color: #faa700;
+        color: $theme_color;
     }
 }
 
@@ -170,7 +170,7 @@ header {
 }
 
 #user-links {
-    // display: inline;
+    display: inline;
     float: right;
     color: #5c5954;
 
@@ -199,10 +199,10 @@ header {
             cursor: pointer;
 
             &:hover {
-                border-top: 2px solid #9c3706;
+                border-top: 2px solid $theme_color;
                 color: black;
                 background: rgba(255, 255, 255, 0.25);
-                margin: 0;
+                margin: -2.75px;
             }
 
             & > img {
@@ -296,7 +296,7 @@ nav {
                 }
 
                 &:hover {
-                    border-top: 2px solid #9c3706;
+                    border-top: 2px solid $theme_color;
                     color: black;
                     background: rgba(255, 255, 255, 0.25);
                     margin: 0;
@@ -304,8 +304,8 @@ nav {
 
                 &.active {
                     // color: #FFF;
-                    border-top: 2px solid #9c3706;
-                    color: #9c3706;
+                    border-top: 2px solid $theme_color;
+                    color: $theme_color;
                     background: white;
                 }
 
@@ -375,7 +375,7 @@ nav {
         padding-left: 3px;
         display: inline-block;
         height: 32px;
-        margin-right: 1px;
+        margin-right: 10px;
         border-right: 3px solid rgba(255, 255, 255, 0.15);
     }
 }
@@ -630,6 +630,7 @@ math {
         display: none;
         padding: 0;
         margin-left: 0;
+        text-align: center;
         border-left: 4px solid $highlight_blue;
         position: fixed;
         top: 36px;
@@ -713,7 +714,7 @@ math {
 }
 
 #chat-icon {
-    color: #045343;
+    color: $theme_color;
 }
 
 #chat-icon:hover {
@@ -768,7 +769,7 @@ math {
     }
 }
 .navbar-icon {
-    margin-right: 0.3em;
+    margin-right: 20px;
 }
 
 .unread_boxes {
@@ -798,11 +799,11 @@ select {
     max-height: 0;
 }
 
-@media (max-width: 500px) {
-    #notification {
-        margin-top: 0.6em;
-    }
-}
+// @media (max-width: 500px) {
+    //     #notification {
+        //         margin-top: 0.6em;
+        //     }
+    // }
 
 .notification-open #notification {
     color: green !important;
@@ -873,7 +874,7 @@ select {
     top: 0;
     left: 0;
     height: 2px;
-    background-color: #993932;
+    background-color: $theme_color;
     width: 0;
     z-index: 9999;
 }
@@ -924,37 +925,61 @@ select {
 }
 
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: #045343;
+    color: $theme_color;
     opacity: 1; /* Firefox */
     text-align: center;
 }
 
 :-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-ms-input-placeholder { /* Microsoft Edge */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 input::placeholder{
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-webkit-input-placeholder {
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 :-moz-placeholder { /* Firefox 18- */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
 }
 
 ::-moz-placeholder {  /* Firefox 19+ */
-    color: #045343;
+    color: $theme_color;
     text-align: center;
+}
+
+.normal-text {
+    font-weight: normal;
+    font-size: small;
+    text-align: center;
+}
+
+#fa-icon-links:hover,
+#fa-icon-links:active,
+#fa-icon-links:hover #fa-icon,
+#fa-icon-links:active #fa-icon {
+    color: $theme_color;
+}
+
+#fa-icon {
+    margin-right: 0.1em;
+    color: #000;
+    font-size:22.5px;
+}
+#fa-icon-active {
+    margin-right: 0.1em;
+    color: $theme_color;
+    font-size:22.5px;
 }
\ No newline at end of file
diff --git a/resources/icons/logo.png b/resources/icons/logo1.png
similarity index 100%
rename from resources/icons/logo.png
rename to resources/icons/logo1.png
diff --git a/resources/vars.scss b/resources/vars.scss
index 785343d..9e4bed1 100644
--- a/resources/vars.scss
+++ b/resources/vars.scss
@@ -4,7 +4,7 @@ $border_gray: #ccc;
 $background_gray: #ededed;
 $background_light_gray: #fafafa;
 $announcement_red: #ae0000;
-$theme_color: #045343;
+$theme_color:  #9c3706;
 
 $base_font_size: 14px;
 $widget_border_radius: 4px;
diff --git a/templates/base.html b/templates/base.html
index 6d39712..a281b47 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -213,28 +213,70 @@
       <div id="nav-container">
         <span id="navicon"><i class="fa fa-bars"></i></span>
         <ul id="nav-list">
-          <li class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
+          <li style="margin-right:1.5em" class="home-nav-element"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></li>
           <li class="home-nav-element"><span class="nav-divider"></span></li>
           <li class="home-menu-item"><a href="{{ url('home') }}" class="nav-home">{{ _('Home') }}</a></li>
           {% for node in mptt_tree(nav_bar) recursive %}
-            <li>
-              <a href="{{ node.path }}" class="nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}">
-                {{ user_trans(node.label) }}
-                {% if not node.is_leaf_node %}
-                  <div href="javascript:void(0)" class="nav-expand">></div>
-                {% endif %}
-              </a>
-              {% with children=node.get_children() %}
-                {% if children %}<ul>{{ loop(children) }}</ul>{% endif %}
-              {% endwith %}
-            </li>
+            {% if node.key != "chat" %}
+              <li>
+                <a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}" style="font-size: smaller; margin-right: 1.5em; text-align: left;">
+                  {% if node.key == "problems" %}
+                    {% if node.key not in nav_tab %}
+                      <i id="fa-icon" class="fa fa-pencil"></i>
+                    {% else %}
+                      <i id="fa-icon-active" class="fa fa-pencil"></i>
+                    {% endif %}
+                  {% endif %}
+
+                  {% if node.key == "submit" %}
+                    {% if node.key not in nav_tab %}
+                      <i id="fa-icon" class="fa fa-neuter"></i>
+                    {% else %}
+                      <i id="fa-icon-active" class="fa fa-neuter"></i>
+                    {% endif %}
+                  {% endif %}
+
+                  {% if node.key == "user" %}
+                    {% if node.key not in nav_tab %}
+                      <i id="fa-icon" class="fa fa-user"></i>
+                    {% else %}
+                      <i id="fa-icon-active" class="fa fa-user"></i>
+                    {% endif %}
+                  {% endif %}
+
+                  {% if node.key == "contest" %}
+                    {% if node.key not in nav_tab %}
+                      <i id="fa-icon" class="fa fa-graduation-cap"></i>
+                    {% else %}
+                      <i id="fa-icon-active" class="fa fa-graduation-cap"></i>
+                    {% endif %}
+                  {% endif %}
+                  {% if node.key == "about" %}
+                    {% if node.key not in nav_tab %}
+                      <i id="fa-icon" class="fa fa-group"></i>
+                    {% else %}
+                      <i id="fa-icon-active" class="fa fa-group"></i>
+                    {% endif %}
+                  {% endif %}
+
+                  {{ user_trans(node.label) }}
+                  {% if not node.is_leaf_node %}
+                    <div href="javascript:void(0)" class="nav-expand">></div>
+                  {% endif %}
+                </a>
+                {% with children=node.get_children() %}
+                  {% if children %}<ul>{{ loop(children) }}</ul>{% endif %}
+                {% endwith %}
+              </li>
+            {% endif %}
           {% endfor %}
         </ul>
+
         <div style="float: right; display: inline-flex; font-size: larger; align-items: center; height: 100%;">
           <span class="navbar-icons">
             {% if request.user.is_authenticated %}
               <span title="{{_('Chat')}}">
-                <a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat navbar-icon" aria-hidden="true">
+                <a id="chat-icon" href="{{ url('chat', '') }}" class="fa fa-wechat navbar-icon" aria-hidden="true" style="font-size: 22.5px;">
                   {% set unread_chat = request.profile.count_unread_chat_boxes %}
                   {% if unread_chat %}
                     <sub class="unread_boxes">{{unread_chat}}</sub>
@@ -244,7 +286,7 @@
 
               {% set unseen_cnt = request.profile.count_unseen_notifications %}
               <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
-                <a href="{{ url('notification') }}" class="icofont-alarm navbar-icon" id="notification" aria-hidden="true">
+                <a href="{{ url('notification') }}" class="fa fa-bell-o navbar-icon" id="notification" aria-hidden="true" style="font-size: 22.5px;">
                   {% if unseen_cnt > 0 %}
                     <sub class="unread_boxes">{{unseen_cnt}}</sub>
                   {% endif %}
@@ -252,8 +294,13 @@
               </span>
             {% endif %}
             <span title="{{_('Language')}}">
-              <div class="icofont-globe navbar-icon" id="nav-lang-icon" aria-hidden="true">
-                <sub class="sub-lang">{{LANGUAGE_CODE}}</sub>
+              <div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
+                {% if LANGUAGE_CODE == "vi" %}
+                  <h4 class="normal-text" style="color: black;">Tiếng Việt</h4>
+                {% endif %}
+                {% if LANGUAGE_CODE == "en" %}
+                  <h4 class="normal-text" style="color: black;">English</h4>
+                {% endif %}
               </div>
               <div id="lang-dropdown" class="dropdown" role="tooltip">
                 {% for language in language_info_list(LANGUAGES) %}
@@ -265,11 +312,11 @@
               </div>
             </span>
             <span title="{{_('Dark Mode')}}">
-              <a class="icofont-adjust navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1"></a>
+              <a class="fa fa-moon-o navbar-icon black" id="nav-darkmode-icon" aria-hidden="true" href="?darkmode=1" style="font-size: 22.5px;"></a>
             </span>
           </span>
           {% if request.user.is_authenticated %}
-            <span id="user-links">
+            <span id="user-links" class="navbar-icons">
               <ul><li>
                 <span>
                   <img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#}
@@ -315,10 +362,9 @@
               {% endif %}
             </div>
           {% else %}
-            <span class="anon">
-              <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><b>{{ _('Log in') }}</b></a>
-              &nbsp;{{ _('or') }}&nbsp;
-              <a href="{{ url('registration_register') }}"><b>{{ _('Sign up') }}</b></a>
+            <span class="anon navbar-icons">
+              <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}" style="margin-right: 20px;"><h4 class="normal-text">{{ _('Log in') }}</h4></a>
+              <a href="{{ url('registration_register') }}"><h4 class="normal-text">{{ _('Sign up') }}</h4></a>
             </span>
           {% endif %}
         </div>