diff --git a/resources/base.scss b/resources/base.scss
index 1559ffe..30b104a 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -170,56 +170,17 @@ header {
 }
 
 #user-links {
-    display: inline;
-    float: right;
-    color: #5c5954;
-
-    .anon {
-        margin-top: 1em;
-        padding-right: 10px;
-        display: inline-flex;
-        min-height: 100%;
-        align-items: center;
-        white-space: nowrap;
-    }
-
-    li {
-        text-transform: none;
-    }
-
-    & > ul {
-        display: block;
-        margin: 0;
-
-        & > li > span {
-            height: 36px;
-            padding-top: 8px;
-            display: block;
-            white-space: nowrap;
-            cursor: pointer;
-
-            &:hover {
-                border-top: 2px solid $theme_color;
-                color: black;
-                background: rgba(255, 255, 255, 0.25);
-                margin: -2.75px;
-            }
-
-            & > img {
-                vertical-align: middle;
-                border-radius: $widget_border_radius;
-                display: inline;
-                margin: 2px 6px 0 5px;
-            }
-
-            & > span {
-                vertical-align: middle;
-                display: inline;
-                margin-top: 11px;
-                margin-right: 9px;
-                padding: 0;
-            }
-        }
+    display: flex;
+    text-align: center;
+    padding: 4px;
+    margin-right: 1em;
+    gap: 5px;
+    &:hover {
+        color: black;
+        border-radius: 2px;
+        border: 0.5px solid black;
+        cursor: pointer;
+        padding: 3.5px;
     }
 }
 
@@ -280,14 +241,12 @@ nav {
             }
 
             a, button {
-                display: inline-block;
+                display: flex;
+                height: 100%;
+                align-items: center;
+                gap: 2px;
                 text-decoration: none;
-                vertical-align: middle;
                 color: black;
-                padding: 13px 7px;
-                height: 18px;
-                border-top: 2px solid transparent;
-                border-bottom: 2px solid transparent;
                 font-weight: bold;
                 font-size: initial;
 
@@ -306,7 +265,6 @@ nav {
                     // color: #FFF;
                     border-top: 2px solid $theme_color;
                     color: $theme_color;
-                    background: white;
                 }
 
                 .nav-expand {
@@ -368,16 +326,6 @@ nav {
             }
         }
     }
-
-    .nav-divider {
-        width: 1px;
-        vertical-align: middle;
-        padding-left: 3px;
-        display: inline-block;
-        height: 32px;
-        margin-right: 10px;
-        border-right: 3px solid rgba(255, 255, 255, 0.15);
-    }
 }
 
 hr {
@@ -541,26 +489,6 @@ noscript #noscript {
     flex: 1 1 1px;
 }
 
-#user-links {
-    height: 100%;
-    padding-right: 1em;
-
-    ul {
-        margin: 0;
-
-        li {
-            display: block;
-            height: 100%;
-
-            a {
-                display: block;
-                padding: 0;
-                height: 100%;
-            }
-        }
-    }
-}
-
 #page-container {
     min-height: 100%;
     position: relative;
@@ -610,14 +538,13 @@ math {
 
     #navicon {
         transition-duration: 0.25s;
-        display: block;
-        line-height: 26px;
+        display: flex;
         font-size: 2em;
         color: $widget_black;
         padding: 0 0.25em;
         margin: 4px 0.25em;
         white-space: nowrap;
-        float: left;
+        flex-grow: 1;
 
         &.hover {
             color: #4db7fe;
@@ -647,6 +574,8 @@ math {
             a {
                 display: block;
                 font-weight: normal;
+                text-align: left;
+                padding: 7px 13px;
 
                 .nav-expand {
                     float: right;
@@ -669,25 +598,13 @@ math {
             }
         }
     }
-
-    #user-links {
-        & > ul > li {
-            & > a > span {
-                padding-top: 4px;
-                height: 32px;
-            }
-
-            & > ul {
-                left: 0 !important;
-                margin-top: 0 !important;
-            }
-        }
-    }
 }
 
-@media not all and (max-width: 760px) {
+@media(min-width: 800px) {
     #nav-list {
-        display: inline !important;
+        display: flex !important;
+        gap: 1.5em;
+        flex-grow: 1;
 
         li {
             &.home-menu-item {
@@ -758,20 +675,6 @@ math {
     background: lightgray;
 }
 
-.navbar-icons {
-    display: inline-flex;
-    align-items: center;
-    float: left;
-    margin-right: 0.3em;
-
-    .navbar-icon {
-        font-size: 1.6em;
-    }
-}
-.navbar-icon {
-    margin-right: 20px;
-}
-
 .unread_boxes {
     background-color: red;
     color: white;
@@ -879,18 +782,32 @@ select {
     z-index: 9999;
 }
 
+.nav-right-text {
+    font-weight: normal;
+    font-size: small;
+    text-align: center;
+}
+
+.anon {
+    display: flex;
+    gap: 1em;
+    padding-right: 1em;
+    a {
+        color: black;
+    }
+}
+
 @media (max-width: 799px) {
-    #user-links, .anon {
-        padding-right: 0.5em;
+    .nav-fa-icon {
+        display: none;
     }
 }
 
 @media(min-width: 800px) {
-    .anon {
-        padding-right: 1em;
-    }
-    .navbar-icons {
-        margin-top: 6px;
+    .normal-text {
+        font-weight: normal;
+        font-size: small;
+        text-align: left;
     }
     #page-container {
         background: #f1f2f2;
@@ -960,12 +877,6 @@ input::placeholder{
     text-align: center;
 }
 
-.normal-text {
-    font-weight: normal;
-    font-size: small;
-    text-align: center;
-}
-
 .nav-fa-icon {
     i {
         margin-right: 0.1em;
diff --git a/resources/darkmode.css b/resources/darkmode.css
index 88254b8..36a4304 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -1502,7 +1502,7 @@ a:hover {
     color: rgb(102, 177, 250);
 }
 a:active {
-    color: rgb(255, 180, 29);
+    color: rgb(249, 146, 97);
 }
 * {
     -webkit-tap-highlight-color: transparent;
@@ -1538,14 +1538,9 @@ header {
     background-color: rgb(13, 14, 14);
     color: rgb(178, 172, 162);
 }
-#user-links {
-    color: rgb(176, 170, 159);
-}
-#user-links > ul > li > span:hover {
-    border-top-color: rgb(199, 70, 8);
+#user-links:hover {
     color: rgb(232, 230, 227);
-    background-image: initial;
-    background-color: rgba(24, 26, 27, 0.25);
+    border-color: rgb(140, 130, 115);
 }
 #nav-shadow {
     background-image: linear-gradient(rgb(49, 53, 55),
@@ -1571,8 +1566,6 @@ nav ul li a,
 nav ul li button {
     text-decoration-color: initial;
     color: rgb(232, 230, 227);
-    border-top-color: transparent;
-    border-bottom-color: transparent;
 }
 nav ul li a:link,
 nav ul li button:link {
@@ -1589,8 +1582,6 @@ nav ul li a.active,
 nav ul li button.active {
     border-top-color: rgb(199, 70, 8);
     color: rgb(249, 146, 97);
-    background-image: initial;
-    background-color: rgb(24, 26, 27);
 }
 nav ul li ul {
     color: rgb(232, 230, 227);
@@ -1619,9 +1610,6 @@ nav ul li.home-nav-element a:hover {
     background-image: initial;
     background-color: transparent;
 }
-nav .nav-divider {
-    border-right-color: rgba(48, 52, 54, 0.15);
-}
 hr {
     color: rgba(232, 230, 227, 0.2);
 }
@@ -1724,7 +1712,7 @@ noscript #noscript {
     color: rgb(178, 171, 161);
 }
 #chat-icon {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 #chat-icon:hover {
     color: rgb(114, 255, 114);
@@ -1800,7 +1788,10 @@ noscript #noscript {
     color: rgb(152, 143, 129);
 }
 #loading-bar {
-    background-color: rgb(122, 46, 40);
+    background-color: rgb(125, 44, 5);
+}
+.anon a {
+    color: rgb(232, 230, 227);
 }
 @media (min-width: 800px) {
     #page-container {
@@ -1816,19 +1807,25 @@ noscript #noscript {
     color: rgb(232, 230, 227);
 }
 ::-webkit-input-placeholder {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 ::placeholder {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 input::-webkit-input-placeholder {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 input::placeholder {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 ::-webkit-input-placeholder {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
+}
+.nav-fa-icon i {
+    color: rgb(232, 230, 227);
+}
+.nav-fa-icon-active i {
+    color: rgb(249, 146, 97);
 }
 .table {
     background-image: initial;
@@ -1921,7 +1918,7 @@ input::placeholder {
 }
 .left-sidebar-item.active {
     color: rgb(232, 230, 227);
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
 }
 .left-sidebar-item.active .sidebar-icon {
     color: rgb(232, 230, 227);
@@ -1976,7 +1973,7 @@ input::placeholder {
     color: rgb(232, 230, 227);
 }
 .left-sidebar-item.active:hover {
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     color: rgb(232, 230, 227);
 }
 .sidebar-icon {
@@ -2406,7 +2403,7 @@ a.user-redirect:hover {
     color: rgb(224, 90, 72); 
 }
 .button, button, input[type="submit"] {
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     border-color: transparent;
     box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px;
     text-decoration-color: initial;
@@ -2452,18 +2449,18 @@ a.user-redirect:hover {
 }
 .button.btn-darkGreen, button.btn-darkGreen, input[type="submit"].btn-darkGreen {
     background-image: initial;
-    background-color: rgb(3, 66, 54); 
+    background-color: rgb(125, 44, 5); 
 }
 .button:hover, button:hover, input[type="submit"]:hover {
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 
 }
 .button:focus, button:focus, input[type="submit"]:focus {
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 
 }
 .button:active, button:active, input[type="submit"]:hover {
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px; 
 }
 input[type="text"], input[type="password"], input[type="email"], input[type="number"] {
@@ -2513,8 +2510,8 @@ input[type="text"]:focus, input[type="password"]:focus {
 .tabs > ul > li.active > span:hover,
 .tabs > ul > li.active > a,
 .tabs > ul > li.active > span {
-    color: rgb(205, 200, 194);
-    border-bottom-color: rgb(126, 117, 103);
+    color: rgb(249, 146, 97);
+    border-bottom-color: rgb(199, 70, 8);
     background-image: initial;
     background-color: transparent;
 }
@@ -2561,9 +2558,9 @@ ul.pagination a:hover {
 ul.pagination > li > a,
 ul.pagination > li > span {
     text-decoration-color: initial;
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
     background-color: rgb(24, 26, 27);
-    border-color: rgb(126, 117, 103);
+    border-color: rgb(199, 70, 8);
 }
 ul.pagination > .disabled-page > a {
     color: rgb(157, 148, 136);
@@ -2577,7 +2574,7 @@ ul.pagination > .disabled-page > span {
 }
 ul.pagination > .active-page > a {
     color: rgb(232, 230, 227);
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     border-color: transparent;
 }
 ul.pagination > .active-page > span {
@@ -2635,7 +2632,7 @@ a.close:hover {
 }
 .sidebox h3 .fa {
     background-image: initial;
-    background-color: rgb(3, 66, 54);
+    background-color: rgb(125, 44, 5);
     color: rgb(232, 230, 227);
 }
 .sidebox-content {
@@ -3107,7 +3104,7 @@ a.voted {
     color: rgb(232, 230, 227);
 }
 .chat-input-icon {
-    color: rgb(205, 200, 194);
+    color: rgb(249, 146, 97);
 }
 .chat-input-icon:hover {
     background-image: initial;
@@ -3873,11 +3870,67 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
-.recently-attempted ul {
-    list-style-image: initial;
+mjx-stretchy-v > mjx-ext {
+    border-color: transparent;
 }
-.organization-row:last-child {
-    border-bottom-color: initial;
+.noUi-target,
+.noUi-target * {
+    -webkit-tap-highlight-color: transparent;
+}
+.noUi-target {
+    background-image: initial;
+    background-color: rgb(27, 29, 30);
+    border-color: rgb(60, 65, 68);
+    box-shadow: rgb(32, 35, 37) 0px 1px 1px inset,
+    rgb(62, 68, 70) 0px 3px 6px -5px;
+}
+.noUi-connect {
+    background-image: initial;
+    background-color: rgb(50, 147, 140);
+    box-shadow: rgba(38, 42, 43, 0.45) 0px 0px 3px inset;
+}
+.noUi-handle {
+    border-color: rgb(59, 64, 66);
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+    box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
+    rgb(35, 38, 40) 0px 1px 7px inset,
+    rgb(62, 68, 70) 0px 3px 6px -3px;
+}
+.noUi-active {
+    box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
+    rgb(43, 47, 49) 0px 1px 7px inset,
+    rgb(62, 68, 70) 0px 3px 6px -3px;
+}
+.noUi-handle::after,
+.noUi-handle::before {
+    background-image: initial;
+    background-color: rgb(38, 41, 42);
+}
+[disabled] .noUi-connect {
+    background-image: initial;
+    background-color: rgb(64, 69, 72);
+}
+.noUi-pips {
+    color: rgb(168, 160, 149);
+}
+.noUi-value-sub {
+    color: rgb(200, 195, 188);
+}
+.noUi-marker {
+    background-image: initial;
+    background-color: rgb(53, 57, 59);
+}
+.noUi-marker-large,
+.noUi-marker-sub {
+    background-image: initial;
+    background-color: rgb(72, 78, 81);
+}
+.noUi-tooltip {
+    border-color: rgb(59, 64, 66);
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+    color: rgb(232, 230, 227);
 }
 
 /* Override Style */
diff --git a/resources/icons/logo.png b/resources/icons/logo.png
index 1786dfd..b7f38f0 100644
Binary files a/resources/icons/logo.png and b/resources/icons/logo.png differ
diff --git a/resources/icons/logo1.png b/resources/icons/logo1.png
deleted file mode 100644
index b7f38f0..0000000
Binary files a/resources/icons/logo1.png and /dev/null differ
diff --git a/templates/base.html b/templates/base.html
index 4d1e0f9..2140eb6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -210,21 +210,21 @@
       </defs>
     </svg>
     <nav id="navigation" class="unselectable">
-      <div id="nav-container">
+      <div id="nav-container" style="display: flex">
         <span id="navicon"><i class="fa fa-bars"></i></span>
         <ul id="nav-list">
-          <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-nav-element" style="margin-right: 1em"><a href="{{ url('home') }}">{% include "site-logo-fragment.html" %}</a></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 }}" 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;">
+              <a href="{{ node.path }}" id="fa-icon-links" class="normal-text nav-{{ node.key }}{% if node.key in nav_tab %} active{% endif %}">
                 <span class="nav-fa-icon{{'-active' if node.key in nav_tab else''}}">
                   {% if node.key == "problems" %} <i class="fa fa-pencil"></i> {% endif %}
-                  {% if node.key == "submit" %} <i class="fa fa-neuter"></i> {% endif %}
+                  {% if node.key == "submit" %} <i class="fa fa-code"></i> {% endif %}
                   {% if node.key == "user" %} <i class="fa fa-user"></i> {% endif %}
                   {% if node.key == "contest" %} <i class="fa fa-graduation-cap"></i> {% endif %}
-                  {% if node.key == "about" %} <i class="fa fa-group"></i> {% endif %}
+                  {% if node.key == "group" %} <i class="fa fa-group"></i> {% endif %}
+                  {% if node.key == "about" %} <i class="fa fa-at"></i> {% endif %}
                 </span>
                 {{ user_trans(node.label) }}
                 {% if not node.is_leaf_node %}
@@ -238,59 +238,51 @@
           {% 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="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>
-                  {% endif %}
-                </a>
-              </span>
+        <div style="display: flex; font-size: larger; align-items: center; height: 100%; gap: 1em;">
+          {% if request.user.is_authenticated %}
+            <span title="{{_('Chat')}}">
+              <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>
+                {% endif %}
+              </a>
+            </span>
 
-              {% set unseen_cnt = request.profile.count_unseen_notifications %}
-              <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
-                <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 %}
-                </a>
-              </span>
-            {% endif %}
-            <span title="{{_('Language')}}">
-              <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>
+            {% set unseen_cnt = request.profile.count_unseen_notifications %}
+            <span title="{{_('Notification')}}" class="{{ 'notification-open' if unseen_cnt > 0 }}">
+              <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 %}
-                {% 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) %}
-                  <div value="{{ language.code }}"
-                    class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
-                    {{ language.name_local }}
-                  </div>
-                {% endfor %}
-              </div>
-            </span>
-            <span title="{{_('Dark Mode')}}">
-              <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>
+              </a>
             </span>
+          {% endif %}
+          <span title="{{_('Language')}}">
+            <div class="navbar-icon" id="nav-lang-icon" aria-hidden="true" style="font-size: 22.5px;">
+              {% if LANGUAGE_CODE == "vi" %}
+                <h4 class="black nav-right-text">Tiếng Việt</h4>
+              {% endif %}
+              {% if LANGUAGE_CODE == "en" %}
+                <h4 class="black nav-right-text">English</h4>
+              {% endif %}
+            </div>
+            <div id="lang-dropdown" class="dropdown" role="tooltip">
+              {% for language in language_info_list(LANGUAGES) %}
+                <div value="{{ language.code }}"
+                  class="dropdown-item lang-dropdown-item" style="{{'font-weight: bold' if language.code == LANGUAGE_CODE}}">
+                  {{ language.name_local }}
+                </div>
+              {% endfor %}
+            </div>
+          </span>
+          <span title="{{_('Dark Mode')}}">
+            <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>
           {% if request.user.is_authenticated %}
-            <span id="user-links" class="navbar-icons">
-              <ul><li>
-                <span>
-                  <img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">{# -#}
-                  <span>
-                    <b class="{{request.profile.css_class}}">{{ request.user.username }}</b>
-                  </span>
-                </span>
-              </li></ul>
+            <span id="user-links">
+              <img src="{{ gravatar(request.profile, 32) }}" height="24" width="24">
+              <i class="fa fa-angle-down" style="font-size: 18px; padding-top: 8px;"></i>
             </span>
             <div class="dropdown" id="userlink_dropdown" role="tooptip">
               <a href="{{ url('user_page') }}">
@@ -328,9 +320,9 @@
               {% endif %}
             </div>
           {% else %}
-            <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 class="anon">
+              <a href="{{ url('auth_login') }}?next={{ LOGIN_RETURN_PATH|urlencode }}"><h4 class="nav-right-text">{{ _('Log in') }}</h4></a>
+              <a href="{{ url('registration_register') }}"><h4 class="nav-right-text">{{ _('Sign up') }}</h4></a>
             </span>
           {% endif %}
         </div>