diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
index 1d92d13d63f..c3de79f7e9e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
@@ -47,7 +47,7 @@ export default class ChatFooter extends Component {
           aria-label={{i18n "chat.channel_list.aria_label"}}
           id="c-footer-channels"
           class={{concatClass
-            "btn-flat"
+            "btn-transparent"
             "c-footer__item"
             (if (eq @activeTab "channels") "--active")
           }}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
index 175c76c2dd2..a3c3971c4fc 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
@@ -58,13 +58,13 @@ export default class FooterUnreadIndicator extends Component {
 
   <template>
     {{#if this.showUrgent}}
-      <div class="chat-channel-unread-indicator -urgent">
-        <div class="chat-channel-unread-indicator__number">
+      <div class="c-unread-indicator -urgent">
+        <div class="c-unread-indicator__number">
           {{this.urgentBadgeCount}}
         </div>
       </div>
     {{else if this.showUnread}}
-      <div class="chat-channel-unread-indicator"></div>
+      <div class="c-unread-indicator"></div>
     {{/if}}
   </template>
 }
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index e383e5a65c8..5a2fb54c01e 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -65,8 +65,7 @@ html.ios-device.keyboard-visible body #main-outlet .full-page-chat {
   }
 }
 
-.header-dropdown-toggle.chat-header-icon .icon,
-.c-footer .c-footer__item {
+.header-dropdown-toggle.chat-header-icon .icon {
   .chat-channel-unread-indicator {
     @include chat-unread-indicator;
     border: 2px solid var(--header_background);
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
index 7adf56a6ff1..017c4b70fb9 100644
--- a/plugins/chat/assets/stylesheets/common/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-footer.scss
@@ -38,7 +38,6 @@
     &:focus {
       .discourse-no-touch &,
       .discourse-touch & {
-        background-color: var(--primary-low);
         .d-icon,
         .d-button-label {
           color: var(--quaternary);
@@ -61,17 +60,22 @@
       color: var(--primary-medium);
     }
 
-    .chat-channel-unread-indicator,
-    .chat-channel-unread-indicator.-urgent {
-      top: 0.25rem;
+    .c-unread-indicator {
+      position: absolute;
+      top: 0.35rem;
       right: unset;
       left: 50%;
       margin-left: 0.75rem;
-    }
-
-    .chat-channel-unread-indicator:not(.-urgent) {
-      width: 11px;
-      height: 11px;
+      &.-urgent {
+        height: 1em;
+        width: min-content;
+        min-width: 0.6em;
+        padding: 0.21em 0.42em;
+      }
+      &:not(.-urgent) {
+        width: 11px;
+        height: 11px;
+      }
     }
   }
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index bfea3a4501f..f97637a059a 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
@@ -11,6 +11,15 @@
   }
 }
 
+.c-footer {
+  &__item {
+    .c-unread-indicator,
+    .c-unread-indicator.-urgent {
+      margin-left: 1rem;
+    }
+  }
+}
+
 .has-full-page-chat div#reply-control {
   display: none;
 }
diff --git a/plugins/chat/spec/system/chat_footer_spec.rb b/plugins/chat/spec/system/chat_footer_spec.rb
index 520cdd25651..078366d724e 100644
--- a/plugins/chat/spec/system/chat_footer_spec.rb
+++ b/plugins/chat/spec/system/chat_footer_spec.rb
@@ -100,7 +100,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
         visit("/")
         chat_page.open_from_header
 
-        expect(page).to have_css("#c-footer-channels .chat-channel-unread-indicator")
+        expect(page).to have_css("#c-footer-channels .c-unread-indicator")
       end
 
       it "is urgent for mentions" do
@@ -116,10 +116,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
           user: user_2,
         )
 
-        expect(page).to have_css(
-          "#c-footer-channels .chat-channel-unread-indicator.-urgent",
-          text: "1",
-        )
+        expect(page).to have_css("#c-footer-channels .c-unread-indicator.-urgent", text: "1")
       end
     end
 
@@ -131,7 +128,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
         visit("/")
         chat_page.open_from_header
 
-        expect(page).to have_css("#c-footer-direct-messages .chat-channel-unread-indicator.-urgent")
+        expect(page).to have_css("#c-footer-direct-messages .c-unread-indicator.-urgent")
       end
     end
 
@@ -145,7 +142,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
         visit("/")
         chat_page.open_from_header
 
-        expect(page).to have_css("#c-footer-threads .chat-channel-unread-indicator")
+        expect(page).to have_css("#c-footer-threads .c-unread-indicator")
       end
     end
   end