diff --git a/resources/css/bem/mobile-menu.less b/resources/css/bem/mobile-menu.less
index fd4e4d568ad..cea5109ae8e 100644
--- a/resources/css/bem/mobile-menu.less
+++ b/resources/css/bem/mobile-menu.less
@@ -40,4 +40,13 @@
     display: flex;
     background-color: @osu-colour-d4;
   }
+
+  &--notifications {
+    background-color: @osu-colour-b5;
+
+    .mobile-menu__item {
+      max-height: calc((var(--vh, 1vh) * 100) - @navbar-height);
+      overflow-y: auto;
+    }
+  }
 }
diff --git a/resources/css/bem/navbar-mobile.less b/resources/css/bem/navbar-mobile.less
index 9ec8321e802..29f00d5053c 100644
--- a/resources/css/bem/navbar-mobile.less
+++ b/resources/css/bem/navbar-mobile.less
@@ -27,6 +27,28 @@
 
     &--buttons {
       flex: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+
+  &__icon {
+    .link-plain();
+    .link-white();
+    flex: none;
+    position: relative;
+    .center-content();
+    width: 40px;
+    height: 40px;
+    margin: -5px;
+
+    &:hover {
+      color: @osu-colour-l1;
+    }
+
+    &.js-click-menu--active {
+      color: hsla(var(--hsl-c1), 50%);
     }
   }
 
@@ -61,6 +83,7 @@
 
     &.js-click-menu--active {
       transform: rotateX(0.5turn);
+      color: hsla(var(--hsl-c1), 50%);
     }
   }
 
diff --git a/resources/js/components/notification-icon.tsx b/resources/js/components/notification-icon.tsx
index 29cda001e58..da6dcf83214 100644
--- a/resources/js/components/notification-icon.tsx
+++ b/resources/js/components/notification-icon.tsx
@@ -18,12 +18,16 @@ export default function NotificationIcon(props: Props) {
     mobile: props.type === 'mobile',
   };
 
+  const showCount = props.type !== 'mobile' || (props.ready && props.count > 0);
+
   return (
     <span className={classWithModifiers('notification-icon', modifiers)}>
       <i className={props.iconClassName} />
-      <span className='notification-icon__count'>
-        {props.ready ? formatNumber(props.count) : '...'}
-      </span>
+      {showCount && (
+        <span className='notification-icon__count'>
+          {props.ready ? formatNumber(props.count) : '...'}
+        </span>
+      )}
     </span>
   );
 }
diff --git a/resources/js/core-legacy/nav2.coffee b/resources/js/core-legacy/nav2.coffee
index 52f5bb41de3..d88d9902712 100644
--- a/resources/js/core-legacy/nav2.coffee
+++ b/resources/js/core-legacy/nav2.coffee
@@ -45,20 +45,42 @@ export default class Nav2
   autoMobileNav: (e, {previousTree, target, tree}) =>
     if target == 'mobile-menu'
       @clickMenu.show('mobile-nav')
-      Timeout.set 0, => $(@clickMenu.menu('mobile-menu')).finish().slideDown(150)
 
     @showingMobileNav = tree.indexOf('mobile-menu') != -1
+    showingNotification = @mobileNotificationInTree(tree)
 
-    if @showingMobileNav
+    @slideMobilePanel @clickMenu.menu('mobile-menu'), @showingMobileNav, previousTree.indexOf('mobile-menu') != -1
+    @slideMobilePanel '.mobile-menu--notifications', showingNotification, @mobileNotificationInTree(previousTree)
+
+    if @showingMobileNav || showingNotification
       document.body.classList.add('js-nav2--active')
       blackoutToggle(this, true)
-    else if previousTree.indexOf('mobile-menu') != -1
+    else if @mobileOverlayInTree(previousTree)
       blackoutToggle(this, false)
-      Timeout.set 0, =>
-        $(@clickMenu.menu('mobile-menu')).finish().slideUp 150, =>
-          # use actual state instead of always removing the class in case
-          # the menu is shown again right after it's closed
-          document.body.classList.toggle('js-nav2--active', @showingMobileNav)
+
+
+  mobileNotificationInTree: (tree) ->
+    tree.indexOf('mobile-chat-notification') != -1 || tree.indexOf('mobile-notification') != -1
+
+
+  mobileOverlayInTree: (tree) ->
+    tree.indexOf('mobile-menu') != -1 || @mobileNotificationInTree(tree)
+
+
+  slideMobilePanel: (element, showing, wasShowing) ->
+    return if showing == wasShowing
+
+    Timeout.set 0, =>
+      $el = $(element)
+
+      if showing
+        $el.finish().slideDown(150)
+      else
+        $el.finish().slideUp(150, @syncMobileNav2Active)
+
+
+  syncMobileNav2Active: =>
+    document.body.classList.toggle('js-nav2--active', @mobileOverlayInTree(@clickMenu.tree()))
 
 
   centerPopup: (popup, reference) ->
diff --git a/resources/views/layout/_header_mobile.blade.php b/resources/views/layout/_header_mobile.blade.php
index 04a7a15955c..5c41fd74add 100644
--- a/resources/views/layout/_header_mobile.blade.php
+++ b/resources/views/layout/_header_mobile.blade.php
@@ -17,6 +17,36 @@
         </div>
 
         <div class="navbar-mobile__header-section navbar-mobile__header-section--buttons">
+            @if (isset($user))
+                <a
+                    class="navbar-mobile__icon js-click-menu js-react"
+                    data-click-menu-target="mobile-chat-notification"
+                    data-react="chat-icon"
+                    data-turbo-permanent
+                    data-type="mobile"
+                    id="notification-widget-chat-icon-mobile"
+                    href="{{ route('chat.index') }}"
+                >
+                    <span class="notification-icon notification-icon--mobile">
+                        <i class="fas fa-comment-alt"></i>
+                    </span>
+                </a>
+
+                <a
+                    class="navbar-mobile__icon js-click-menu js-react"
+                    data-click-menu-target="mobile-notification"
+                    data-react="main-notification-icon"
+                    data-turbo-permanent
+                    data-type="mobile"
+                    id="notification-widget-icon-mobile"
+                    href="{{ route('notifications.index') }}"
+                >
+                    <span class="notification-icon notification-icon--mobile">
+                        <i class="fas fa-bell"></i>
+                    </span>
+                </a>
+            @endif
+
             <button
                 type="button"
                 class="navbar-mobile__toggle js-click-menu"
@@ -87,36 +117,6 @@ class="mobile-menu-tab mobile-menu-tab--user js-user-link"
                     <button class="mobile-menu-tab js-click-menu" data-click-menu-target="mobile-search">
                         <span class="fas fa-search"></span>
                     </button>
-
-                    <a
-                        class="mobile-menu-tab js-click-menu js-react"
-                        data-click-menu-target="mobile-chat-notification"
-                        data-react="chat-icon"
-                        data-turbo-permanent
-                        data-type='mobile'
-                        id="notification-widget-chat-icon-mobile"
-                        href="{{ route('chat.index') }}"
-                    >
-                        <span class="notification-icon notification-icon--mobile">
-                            <i class="fas fa-comment-alt"></i>
-                            <span class="notification-icon__count">...</span>
-                        </span>
-                    </a>
-
-                    <a
-                        class="mobile-menu-tab js-click-menu js-react"
-                        data-click-menu-target="mobile-notification"
-                        data-react="main-notification-icon"
-                        data-turbo-permanent
-                        data-type='mobile'
-                        id="notification-widget-icon-mobile"
-                        href="{{ route('notifications.index') }}"
-                    >
-                        <span class="notification-icon notification-icon--mobile">
-                            <i class="fas fa-inbox"></i>
-                            <span class="notification-icon__count">...</span>
-                        </span>
-                    </a>
                 @endif
             </div>
 
@@ -134,27 +134,33 @@ class="mobile-menu__item mobile-menu__item--search js-click-menu js-react"
                     data-click-menu-id="mobile-search"
                     data-react="quick-search"
                 ></div>
-
-                <div
-                    class="mobile-menu__item js-click-menu js-react"
-                    data-click-menu-id="mobile-chat-notification"
-                    data-notification-widget="{{ json_encode(['only' => 'channel']) }}"
-                    data-react="notification-widget"
-                    data-visibility="hidden"
-                    data-turbo-permanent
-                    id="notification-widget-chat-mobile"
-                ></div>
-
-                <div
-                    class="mobile-menu__item js-click-menu js-react"
-                    data-click-menu-id="mobile-notification"
-                    data-notification-widget="{{ json_encode(['excludes' => ['channel']]) }}"
-                    data-react="notification-widget"
-                    data-visibility="hidden"
-                    data-turbo-permanent
-                    id="notification-widget-mobile"
-                ></div>
             @endif
         </div>
     </div>
+
+    @if (isset($user))
+        <div class="mobile-menu mobile-menu--notifications">
+            <div
+                class="mobile-menu__item js-click-menu js-react"
+                data-click-menu-id="mobile-chat-notification"
+                data-notification-widget="{{ json_encode(['only' => 'channel']) }}"
+                data-react="notification-widget"
+                data-visibility="hidden"
+                data-visibility-animation="none"
+                data-turbo-permanent
+                id="notification-widget-chat-mobile"
+            ></div>
+
+            <div
+                class="mobile-menu__item js-click-menu js-react"
+                data-click-menu-id="mobile-notification"
+                data-notification-widget="{{ json_encode(['excludes' => ['channel']]) }}"
+                data-react="notification-widget"
+                data-visibility="hidden"
+                data-visibility-animation="none"
+                data-turbo-permanent
+                id="notification-widget-mobile"
+            ></div>
+        </div>
+    @endif
 </div>