diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
index 484bcebf2db..320a01e324b 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-footer.gjs
@@ -68,7 +68,7 @@ export default class ChatFooter extends Component {
             aria-label={{i18n "chat.direct_messages.aria_label"}}
             id="c-footer-direct-messages"
             class={{concatClass
-              "btn-flat"
+              "btn-transparent"
               "c-footer__item"
               (if (eq this.currentRouteName "chat.direct-messages") "--active")
             }}
@@ -85,7 +85,7 @@ export default class ChatFooter extends Component {
             aria-label={{i18n "chat.my_threads.aria_label"}}
             id="c-footer-threads"
             class={{concatClass
-              "btn-flat"
+              "btn-transparent"
               "c-footer__item"
               (if (eq this.currentRouteName "chat.threads") "--active")
             }}
diff --git a/plugins/chat/assets/stylesheets/common/chat-footer.scss b/plugins/chat/assets/stylesheets/common/chat-footer.scss
index 57a1f0e6a27..4e99e44753c 100644
--- a/plugins/chat/assets/stylesheets/common/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-footer.scss
@@ -28,44 +28,37 @@
     height: 100%;
     position: relative;
     color: var(--primary-medium);
-    background: var(
-      --d-nav-bg-color
-    ) !important; // todo: remove need for !important
 
-    .d-icon {
-      margin-right: 0;
-      font-size: var(--font-up-2);
-      margin-bottom: 0.15em;
-      color: inherit;
-
-      &.d-icon-discourse-threads {
-        font-size: var(--font-up-2); // visual correction
+    &.--active {
+      .d-icon,
+      .d-button-label {
+        color: var(--d-nav-color--active);
       }
     }
-
     &:hover,
     &:focus {
-      .discourse-no-touch & {
-        background: var(
-          --d-nav-bg-color--hover
-        ) !important; // todo: remove need for !important
-        color: var(--d-nav-color--hover);
-        .d-icon {
-          color: var(--d-nav-color--hover);
+      .discourse-no-touch &,
+      .discourse-touch & {
+        .d-icon,
+        .d-button-label {
+          color: var(--d-nav-color--active);
         }
       }
     }
 
-    &.--active,
-    &.--active:hover {
-      @include nav-active();
-      background: var(
-        --d-nav-bg-color--active
-      ) !important; // todo: remove need for !important
+    .d-icon {
+      margin-right: 0;
+      font-size: var(--font-up-2);
+      color: inherit;
+
+      &.d-icon-discourse-threads {
+        font-size: var(--font-up-1); //visual correction
+      }
     }
 
     .d-button-label {
       font-size: var(--font-down-1-rem);
+      color: var(--primary-medium);
     }
 
     .c-unread-indicator {
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
index f97637a059a..542f29042d5 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-footer.scss
@@ -17,6 +17,15 @@
     .c-unread-indicator.-urgent {
       margin-left: 1rem;
     }
+
+    &.--active {
+      .full-page-chat & {
+        .d-icon,
+        .d-button-label {
+          color: var(--d-nav-color--active);
+        }
+      }
+    }
   }
 }