diff --git a/resources/base.scss b/resources/base.scss
index daedb8c..57f301e 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -705,10 +705,6 @@ math {
 
 #notification {
     color: lightsteelblue;
-    float: left;
-    margin-top: 0.6em;
-    margin-right: 0.8em;
-    font-size: 1.3em;
 }
 
 #notification:hover {
@@ -717,16 +713,21 @@ math {
 
 #chat-icon {
     color: lightseagreen;
-    float: left;
-    margin-top: 0.6em;
-    margin-right: 0.5em;
-    font-size: 1.3em;
 }
 
 #chat-icon:hover {
     color: darkgreen;
 }
 
+.navbar-icons {
+    font-size: 1.6em;
+    float: left;
+    margin-right: 0.3em;
+}
+.navbar-icon {
+    margin-right: 0.3em;
+}
+
 .unread_boxes {
     background-color: red;
     color: white;
@@ -782,4 +783,16 @@ math {
 }
 .contest-info-toggle-mode-off:hover {
     background: rgba(255, 0, 0, 0.97);
-}
\ No newline at end of file
+}
+
+@media (max-width: 799px) {
+    .navbar-icons {
+        margin-top: 2px;
+    }
+}
+
+@media (min-width: 800px) {
+    .navbar-icons {
+        margin-top: 7px;
+    }
+}
diff --git a/templates/base.html b/templates/base.html
index 8e1654f..5e6dc54 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -227,18 +227,20 @@
         </ul>
         <div style="float: right; display: inline; font-size: larger;">
             {% if request.user.is_authenticated %}
-            <span title="{{_('Chat')}}">
-                <a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat" aria-hidden="true">
-                </a>
-            </span>
+            <span class="navbar-icons">
+                <span title="{{_('Chat')}}">
+                    <a id="chat-icon" href="{{ url('chat', '') }}" class="icofont-wechat navbar-icon" aria-hidden="true">
+                    </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="icofont-alarm" id="notification" aria-hidden="true">
-                {% if unseen_cnt > 0 %}    
-                <sub class="unread_boxes">{{unseen_cnt}}</sub>
-                {% endif %}
-                </a>
+                {% 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">
+                    {% if unseen_cnt > 0 %}    
+                    <sub class="unread_boxes">{{unseen_cnt}}</sub>
+                    {% endif %}
+                    </a>
+                </span>
             </span>
             {% endif %}
             <span id="user-links">