diff --git a/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs b/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs
new file mode 100644
index 00000000000..e4c8b221f99
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/browse-channels.gjs
@@ -0,0 +1,129 @@
+import Component from "@glimmer/component";
+import { cached, tracked } from "@glimmer/tracking";
+import { concat, hash } from "@ember/helper";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { LinkTo } from "@ember/routing";
+import { schedule } from "@ember/runloop";
+import { service } from "@ember/service";
+import { eq } from "truth-helpers";
+import DButton from "discourse/components/d-button";
+import { INPUT_DELAY } from "discourse-common/config/environment";
+import i18n from "discourse-common/helpers/i18n";
+import discourseDebounce from "discourse-common/lib/debounce";
+import List from "discourse/plugins/chat/discourse/components/chat/list";
+import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
+import ChatChannelCard from "discourse/plugins/chat/discourse/components/chat-channel-card";
+import DcFilterInput from "discourse/plugins/chat/discourse/components/dc-filter-input";
+
+const ARCHIVED = "archived";
+const ALL = "all";
+const OPEN = "open";
+const CLOSED = "closed";
+const TABS = [ALL, OPEN, CLOSED, ARCHIVED];
+
+export default class BrowseChannels extends Component {
+  @service chatApi;
+  @service modal;
+  @service siteSettings;
+
+  @tracked filter = "";
+
+  get currentTab() {
+    return this.args.currentTab ?? ALL;
+  }
+
+  @cached
+  get channelsCollection() {
+    return this.chatApi.channels({
+      filter: this.filter,
+      status: this.currentTab,
+    });
+  }
+
+  get tabs() {
+    if (this.siteSettings.chat_allow_archiving_channels) {
+      return TABS;
+    } else {
+      return [...TABS].removeObject(ARCHIVED);
+    }
+  }
+
+  @action
+  showChatNewMessageModal() {
+    this.modal.show(ChatModalNewMessage);
+  }
+
+  @action
+  setFilter(event) {
+    this.filter = event.target.value;
+    discourseDebounce(this.debouncedLoad, INPUT_DELAY);
+  }
+
+  @action
+  debouncedLoad() {
+    this.channelsCollection.load({ limit: 10 });
+  }
+
+  @action
+  focusFilterInput(input) {
+    schedule("afterRender", () => input?.focus());
+  }
+
+  <template>
+    <div class="chat-browse-view">
+      <div class="chat-browse-view__actions">
+        <nav>
+          <ul class="nav-pills chat-browse-view__filters">
+            {{#each this.tabs as |tab|}}
+              <li class={{concat "chat-browse-view__filter -" tab}}>
+                <LinkTo
+                  @route={{concat "chat.browse." tab}}
+                  class={{concat "chat-browse-view__filter-link -" tab}}
+                  @current-when={{eq tab this.currentTab}}
+                >
+                  {{i18n (concat "chat.browse.filter_" tab)}}
+                </LinkTo>
+              </li>
+            {{/each}}
+          </ul>
+        </nav>
+
+        <DcFilterInput
+          {{didInsert this.focusFilterInput}}
+          @filterAction={{this.setFilter}}
+          @icons={{hash right="search"}}
+          @containerClass="filter-input"
+          placeholder={{i18n "chat.browse.filter_input_placeholder"}}
+        />
+      </div>
+
+      <div class="chat-browse-view__content_wrapper">
+        <div class="chat-browse-view__content">
+          <List
+            @collection={{this.channelsCollection}}
+            class="chat-browse-view__cards"
+            as |list|
+          >
+            <list.Item as |channel|>
+              <ChatChannelCard @channel={{channel}} />
+            </list.Item>
+
+            <list.EmptyState>
+              <span class="empty-state-title">
+                {{i18n "chat.empty_state.title"}}
+              </span>
+              <div class="empty-state-body">
+                <p>{{i18n "chat.empty_state.direct_message"}}</p>
+                <DButton
+                  @action={{this.showChatNewMessageModal}}
+                  @label="chat.empty_state.direct_message_cta"
+                />
+              </div>
+            </list.EmptyState>
+          </List>
+        </div>
+      </div>
+    </div>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
index 0b2f14ba3a3..77399df0ce4 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel.gjs
@@ -702,7 +702,6 @@ export default class ChatChannel extends Component {
       {{didUpdate this.loadMessages @targetMessageId}}
       data-id={{@channel.id}}
     >
-
       <ChatChannelStatus @channel={{@channel}} />
       <ChatNotices @channel={{@channel}} />
       <ChatMentionWarnings />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs
new file mode 100644
index 00000000000..e077aa7a9a4
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/browse.gjs
@@ -0,0 +1,47 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { array } from "@ember/helper";
+import { service } from "@ember/service";
+import i18n from "discourse-common/helpers/i18n";
+import BrowseChannels from "discourse/plugins/chat/discourse/components/browse-channels";
+import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
+
+export default class ChatDrawerRoutesBrowse extends Component {
+  @service chat;
+  @service chatStateManager;
+  @service chatChannelsManager;
+  @service chatHistory;
+
+  @tracked showThreadFullTitle = false;
+
+  get showfullTitle() {
+    return this.chatStateManager.isDrawerExpanded && this.showThreadFullTitle;
+  }
+
+  <template>
+    <div class="c-drawer-routes --browse">
+      <Navbar
+        @onClick={{this.chat.toggleDrawer}}
+        @showFullTitle={{this.showfullTitle}}
+        as |navbar|
+      >
+        <navbar.BackButton @route="chat.channels" />
+        <navbar.Title @title={{i18n "chat.browse.title"}} />
+        <navbar.Actions as |a|>
+          <a.NewChannelButton />
+          <a.ToggleDrawerButton />
+          <a.FullPageButton />
+          <a.CloseDrawerButton />
+        </navbar.Actions>
+      </Navbar>
+
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <div class="chat-drawer-content">
+          {{#each (array @params.currentTab) as |tab|}}
+            <BrowseChannels @currentTab={{tab}} />
+          {{/each}}
+        </div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs
similarity index 53%
rename from plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs
rename to plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs
index e367f09a1ae..5440d0d892e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/members.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-members.gjs
@@ -34,27 +34,35 @@ export default class ChatDrawerRoutesMembers extends Component {
   }
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.BackButton
-        @title={{this.backButton.title}}
-        @route={{this.backButton.route}}
-        @routeModels={{this.backButton.models}}
-      />
-      <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
-      <navbar.Actions as |a|>
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+    <div
+      class="c-drawer-routes --channel-info-members"
+      {{didInsert this.fetchChannel}}
+    >
+      {{#if this.chat.activeChannel}}
+        <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+          <navbar.BackButton
+            @title={{this.backButton.title}}
+            @route={{this.backButton.route}}
+            @routeModels={{this.backButton.models}}
+          />
+          <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
+          <navbar.Actions as |a|>
+            <a.ToggleDrawerButton />
+            <a.FullPageButton />
+            <a.CloseDrawerButton />
+          </navbar.Actions>
+        </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div class="chat-drawer-content" {{didInsert this.fetchChannel}}>
-        {{#if this.chat.activeChannel}}
-          <ChannelInfoNav @channel={{this.chat.activeChannel}} @tab="members" />
-          <ChannelMembers @channel={{this.chat.activeChannel}} />
+        {{#if this.chatStateManager.isDrawerExpanded}}
+          <div class="chat-drawer-content">
+            <ChannelInfoNav
+              @channel={{this.chat.activeChannel}}
+              @tab="members"
+            />
+            <ChannelMembers @channel={{this.chat.activeChannel}} />
+          </div>
         {{/if}}
-      </div>
-    {{/if}}
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs
similarity index 53%
rename from plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs
rename to plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs
index 4b2fea27d5a..9cfb1f1349c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-info-settings.gjs
@@ -34,30 +34,35 @@ export default class ChatDrawerRoutesSettings extends Component {
   }
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.BackButton
-        @title={{this.backButton.title}}
-        @route={{this.backButton.route}}
-        @routeModels={{this.backButton.models}}
-      />
-      <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
-      <navbar.Actions as |a|>
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
-
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div class="chat-drawer-content" {{didInsert this.fetchChannel}}>
-        {{#if this.chat.activeChannel}}
-          <ChannelInfoNav
-            @channel={{this.chat.activeChannel}}
-            @tab="settings"
+    <div
+      class="c-drawer-routes --channel-info-settings"
+      {{didInsert this.fetchChannel}}
+    >
+      {{#if this.chat.activeChannel}}
+        <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+          <navbar.BackButton
+            @title={{this.backButton.title}}
+            @route={{this.backButton.route}}
+            @routeModels={{this.backButton.models}}
           />
-          <ChannelSettings @channel={{this.chat.activeChannel}} />
+          <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
+          <navbar.Actions as |a|>
+            <a.ToggleDrawerButton />
+            <a.FullPageButton />
+            <a.CloseDrawerButton />
+          </navbar.Actions>
+        </Navbar>
+
+        {{#if this.chatStateManager.isDrawerExpanded}}
+          <div class="chat-drawer-content">
+            <ChannelInfoNav
+              @channel={{this.chat.activeChannel}}
+              @tab="settings"
+            />
+            <ChannelSettings @channel={{this.chat.activeChannel}} />
+          </div>
         {{/if}}
-      </div>
-    {{/if}}
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs
index 8564c5e080d..32cf80c02cf 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-thread.gjs
@@ -78,41 +78,45 @@ export default class ChatDrawerRoutesChannelThread extends Component {
   }
 
   <template>
-    <Navbar
-      @onClick={{this.chat.toggleDrawer}}
-      @showFullTitle={{this.showfullTitle}}
-      as |navbar|
+    <div
+      class="c-drawer-routes --channel-thread"
+      {{didInsert this.fetchChannelAndThread}}
+      {{didUpdate this.fetchChannelAndThread @params.channelId}}
+      {{didUpdate this.fetchChannelAndThread @params.threadId}}
     >
-      <navbar.BackButton
-        @title={{this.backButton.title}}
-        @route={{this.backButton.route}}
-        @routeModels={{this.backButton.models}}
-      />
-      <navbar.Title @title={{this.threadTitle}} @icon="discourse-threads" />
-      <navbar.Actions as |a|>
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+      {{#if this.chat.activeChannel}}
+        <Navbar
+          @onClick={{this.chat.toggleDrawer}}
+          @showFullTitle={{this.showfullTitle}}
+          as |navbar|
+        >
+          <navbar.BackButton
+            @title={{this.backButton.title}}
+            @route={{this.backButton.route}}
+            @routeModels={{this.backButton.models}}
+          />
+          <navbar.Title @title={{this.threadTitle}} @icon="discourse-threads" />
+          <navbar.Actions as |a|>
+            <a.ToggleDrawerButton />
+            <a.FullPageButton />
+            <a.CloseDrawerButton />
+          </navbar.Actions>
+        </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div
-        class="chat-drawer-content"
-        {{didInsert this.fetchChannelAndThread}}
-        {{didUpdate this.fetchChannelAndThread @params.channelId}}
-        {{didUpdate this.fetchChannelAndThread @params.threadId}}
-      >
-        {{#each (array this.chat.activeChannel.activeThread) as |thread|}}
-          {{#if thread}}
-            <ChatThread
-              @thread={{thread}}
-              @targetMessageId={{@params.messageId}}
-              @setFullTitle={{this.setFullTitle}}
-            />
-          {{/if}}
-        {{/each}}
-      </div>
-    {{/if}}
+        {{#if this.chatStateManager.isDrawerExpanded}}
+          <div class="chat-drawer-content">
+            {{#each (array this.chat.activeChannel.activeThread) as |thread|}}
+              {{#if thread}}
+                <ChatThread
+                  @thread={{thread}}
+                  @targetMessageId={{@params.messageId}}
+                  @setFullTitle={{this.setFullTitle}}
+                />
+              {{/if}}
+            {{/each}}
+          </div>
+        {{/if}}
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs
index a2fd12560ac..861b9742ccb 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel-threads.gjs
@@ -40,29 +40,31 @@ export default class ChatDrawerRoutesChannelThreads extends Component {
   }
 
   <template>
-    {{#if this.chat.activeChannel}}
-      <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-        <navbar.BackButton
-          @title={{this.backLinkTitle}}
-          @route="chat.channel"
-          @routeModels={{this.chat.activeChannel.routeModels}}
-        />
-        <navbar.Title @title={{this.title}} @icon="discourse-threads" />
-        <navbar.Actions as |a|>
-          <a.ToggleDrawerButton />
-          <a.FullPageButton />
-          <a.CloseDrawerButton />
-        </navbar.Actions>
-      </Navbar>
-    {{/if}}
-
-    <div class="chat-drawer-content" {{didInsert this.fetchChannel}}>
+    <div class="c-drawer-routes --channel-threads">
       {{#if this.chat.activeChannel}}
-        <ChatThreadList
-          @channel={{this.chat.activeChannel}}
-          @includeHeader={{false}}
-        />
+        <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+          <navbar.BackButton
+            @title={{this.backLinkTitle}}
+            @route="chat.channel"
+            @routeModels={{this.chat.activeChannel.routeModels}}
+          />
+          <navbar.Title @title={{this.title}} @icon="discourse-threads" />
+          <navbar.Actions as |a|>
+            <a.ToggleDrawerButton />
+            <a.FullPageButton />
+            <a.CloseDrawerButton />
+          </navbar.Actions>
+        </Navbar>
       {{/if}}
+
+      <div class="chat-drawer-content" {{didInsert this.fetchChannel}}>
+        {{#if this.chat.activeChannel}}
+          <ChatThreadList
+            @channel={{this.chat.activeChannel}}
+            @includeHeader={{false}}
+          />
+        {{/if}}
+      </div>
     </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs
index 587630451c2..d126e5b1130 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channel.gjs
@@ -11,9 +11,12 @@ export default class ChatDrawerRoutesChannel extends Component {
   @service chat;
   @service chatStateManager;
   @service chatChannelsManager;
+  @service chatHistory;
 
   get backBtnRoute() {
-    if (this.chat.activeChannel?.isDirectMessageChannel) {
+    if (this.chatHistory.previousRoute?.name === "chat.browse") {
+      return "chat.browse";
+    } else if (this.chat.activeChannel?.isDirectMessageChannel) {
       return "chat.direct-messages";
     } else {
       return "chat.channels";
@@ -34,34 +37,36 @@ export default class ChatDrawerRoutesChannel extends Component {
   }
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.BackButton @route={{this.backBtnRoute}} />
-      <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
-      <navbar.Actions as |a|>
-        <a.ThreadsListButton @channel={{this.chat.activeChannel}} />
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+    <div class="c-drawer-routes --channel">
+      <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+        <navbar.BackButton @route={{this.backBtnRoute}} />
+        <navbar.ChannelTitle @channel={{this.chat.activeChannel}} />
+        <navbar.Actions as |a|>
+          <a.ThreadsListButton @channel={{this.chat.activeChannel}} />
+          <a.ToggleDrawerButton />
+          <a.FullPageButton />
+          <a.CloseDrawerButton />
+        </navbar.Actions>
+      </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div
-        class="chat-drawer-content"
-        {{didInsert this.fetchChannel}}
-        {{didUpdate this.fetchChannel @params.channelId}}
-      >
-        {{#if this.chat.activeChannel}}
-          {{#each (array this.chat.activeChannel) as |channel|}}
-            {{#if channel}}
-              <ChatChannel
-                @targetMessageId={{readonly @params.messageId}}
-                @channel={{channel}}
-              />
-            {{/if}}
-          {{/each}}
-        {{/if}}
-      </div>
-    {{/if}}
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <div
+          class="chat-drawer-content"
+          {{didInsert this.fetchChannel}}
+          {{didUpdate this.fetchChannel @params.channelId}}
+        >
+          {{#if this.chat.activeChannel}}
+            {{#each (array this.chat.activeChannel) as |channel|}}
+              {{#if channel}}
+                <ChatChannel
+                  @targetMessageId={{readonly @params.messageId}}
+                  @channel={{channel}}
+                />
+              {{/if}}
+            {{/each}}
+          {{/if}}
+        </div>
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
index 624f4dd6548..d9fa7211637 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs
@@ -10,21 +10,23 @@ export default class ChatDrawerRoutesChannels extends Component {
   @service chatStateManager;
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.Title @title={{i18n "chat.heading"}} />
-      <navbar.Actions as |a|>
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+    <div class="c-drawer-routes --channels">
+      <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+        <navbar.Title @title={{i18n "chat.heading"}} />
+        <navbar.Actions as |a|>
+          <a.ToggleDrawerButton />
+          <a.FullPageButton />
+          <a.CloseDrawerButton />
+        </navbar.Actions>
+      </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div class="chat-drawer-content">
-        <ChannelsListPublic />
-      </div>
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <div class="chat-drawer-content">
+          <ChannelsListPublic />
+        </div>
 
-      <ChatFooter />
-    {{/if}}
+        <ChatFooter />
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs
index 080842f5bb6..4ab1eee669d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/direct-messages.gjs
@@ -5,26 +5,28 @@ import ChannelsListDirect from "discourse/plugins/chat/discourse/components/chan
 import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
 import ChatFooter from "discourse/plugins/chat/discourse/components/chat-footer";
 
-export default class ChatDrawerRoutesChannels extends Component {
+export default class ChatDrawerRoutesDirectMessages extends Component {
   @service chat;
   @service chatStateManager;
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.Title @title={{i18n "chat.heading"}} />
-      <navbar.Actions as |a|>
-        <a.ToggleDrawerButton />
-        <a.FullPageButton />
-        <a.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+    <div class="c-drawer-routes --direct-messages">
+      <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+        <navbar.Title @title={{i18n "chat.heading"}} />
+        <navbar.Actions as |a|>
+          <a.ToggleDrawerButton />
+          <a.FullPageButton />
+          <a.CloseDrawerButton />
+        </navbar.Actions>
+      </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div class="chat-drawer-content">
-        <ChannelsListDirect />
-      </div>
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <div class="chat-drawer-content">
+          <ChannelsListDirect />
+        </div>
 
-      <ChatFooter />
-    {{/if}}
+        <ChatFooter />
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
index 992004cb238..c2d33bf60ea 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
@@ -10,22 +10,24 @@ export default class ChatDrawerRoutesThreads extends Component {
   @service chatStateManager;
 
   <template>
-    <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
-      <navbar.Title @title={{i18n "chat.heading"}} />
-      <navbar.Actions as |action|>
-        <action.ThreadsListButton />
-        <action.ToggleDrawerButton />
-        <action.FullPageButton />
-        <action.CloseDrawerButton />
-      </navbar.Actions>
-    </Navbar>
+    <div class="c-drawer-routes --threads">
+      <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
+        <navbar.Title @title={{i18n "chat.heading"}} />
+        <navbar.Actions as |action|>
+          <action.ThreadsListButton />
+          <action.ToggleDrawerButton />
+          <action.FullPageButton />
+          <action.CloseDrawerButton />
+        </navbar.Actions>
+      </Navbar>
 
-    {{#if this.chatStateManager.isDrawerExpanded}}
-      <div class="chat-drawer-content">
-        <UserThreads />
-      </div>
-    {{/if}}
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <div class="chat-drawer-content">
+          <UserThreads />
+        </div>
+      {{/if}}
 
-    <ChatFooter />
+      <ChatFooter />
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs
index 4b1c7f2bfb8..92c7d256dfc 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs
@@ -2,7 +2,6 @@ import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
 import icon from "discourse-common/helpers/d-icon";
 import I18n from "I18n";
-import { FOOTER_NAV_ROUTES } from "discourse/plugins/chat/discourse/lib/chat-constants";
 
 export default class ChatNavbarBackButton extends Component {
   get icon() {
@@ -14,11 +13,7 @@ export default class ChatNavbarBackButton extends Component {
   }
 
   get targetRoute() {
-    if (FOOTER_NAV_ROUTES.includes(this.args.route)) {
-      return this.args.route;
-    } else {
-      return "chat";
-    }
+    return this.args.route ?? "chat";
   }
 
   <template>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/browse.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/browse.gjs
deleted file mode 100644
index ccfceff6091..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/browse.gjs
+++ /dev/null
@@ -1,131 +0,0 @@
-import { cached, tracked } from "@glimmer/tracking";
-import Component from "@ember/component";
-import { concat, hash } from "@ember/helper";
-import { action, computed } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { LinkTo } from "@ember/routing";
-import { schedule } from "@ember/runloop";
-import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
-import { INPUT_DELAY } from "discourse-common/config/environment";
-import i18n from "discourse-common/helpers/i18n";
-import discourseDebounce from "discourse-common/lib/debounce";
-import List from "discourse/plugins/chat/discourse/components/chat/list";
-import ChatModalNewMessage from "discourse/plugins/chat/discourse/components/chat/modal/new-message";
-import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
-import ChatChannelCard from "discourse/plugins/chat/discourse/components/chat-channel-card";
-import DcFilterInput from "discourse/plugins/chat/discourse/components/dc-filter-input";
-
-const TABS = ["all", "open", "closed", "archived"];
-
-export default class ChatRoutesBrowse extends Component {
-  @service chatApi;
-  @service modal;
-
-  @tracked filter = "";
-
-  @cached
-  get channelsCollection() {
-    return this.chatApi.channels({
-      filter: this.filter,
-      status: this.status,
-    });
-  }
-
-  @computed("siteSettings.chat_allow_archiving_channels")
-  get tabs() {
-    if (this.siteSettings.chat_allow_archiving_channels) {
-      return TABS;
-    } else {
-      return [...TABS].removeObject("archived");
-    }
-  }
-
-  @action
-  showChatNewMessageModal() {
-    this.modal.show(ChatModalNewMessage);
-  }
-
-  @action
-  setFilter(event) {
-    this.filter = event.target.value;
-    discourseDebounce(this.debouncedLoad, INPUT_DELAY);
-  }
-
-  @action
-  debouncedLoad() {
-    this.channelsCollection.load({ limit: 10 });
-  }
-
-  @action
-  focusFilterInput(input) {
-    schedule("afterRender", () => input?.focus());
-  }
-
-  <template>
-    <div class="c-routes-browse">
-      <Navbar as |navbar|>
-        <navbar.BackButton />
-        <navbar.Title @title={{i18n "chat.browse.title"}} />
-
-        <navbar.Actions as |a|>
-          <a.NewChannelButton />
-        </navbar.Actions>
-      </Navbar>
-
-      <div class="chat-browse-view">
-        <div class="chat-browse-view__actions">
-          <nav>
-            <ul class="nav-pills chat-browse-view__filters">
-              {{#each this.tabs as |tab|}}
-                <li class={{concat "chat-browse-view__filter -" tab}}>
-                  <LinkTo
-                    @route={{concat "chat.browse." tab}}
-                    class={{concat "chat-browse-view__filter-link -" tab}}
-                  >
-                    {{i18n (concat "chat.browse.filter_" tab)}}
-                  </LinkTo>
-                </li>
-              {{/each}}
-            </ul>
-          </nav>
-
-          <DcFilterInput
-            {{didInsert this.focusFilterInput}}
-            @filterAction={{this.setFilter}}
-            @icons={{hash right="search"}}
-            @containerClass="filter-input"
-            placeholder={{i18n "chat.browse.filter_input_placeholder"}}
-          />
-        </div>
-
-        <div class="chat-browse-view__content_wrapper">
-          <div class="chat-browse-view__content">
-            <List
-              @collection={{this.channelsCollection}}
-              class="chat-browse-view__cards"
-              as |list|
-            >
-              <list.Item as |channel|>
-                <ChatChannelCard @channel={{channel}} />
-              </list.Item>
-
-              <list.EmptyState>
-                <span class="empty-state-title">
-                  {{i18n "chat.empty_state.title"}}
-                </span>
-                <div class="empty-state-body">
-                  <p>{{i18n "chat.empty_state.direct_message"}}</p>
-                  <DButton
-                    @action={{this.showChatNewMessageModal}}
-                    @label="chat.empty_state.direct_message_cta"
-                  />
-                </div>
-              </list.EmptyState>
-            </List>
-          </div>
-        </div>
-      </div>
-    </div>
-  </template>
-}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
index 544e1b79613..648d6349fb7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
@@ -125,76 +125,78 @@ export default class ChatRouteChannelInfoMembers extends Component {
   }
 
   <template>
-    {{#if this.site.mobileView}}
-      <LinkTo
-        class="c-back-button"
-        @route="chat.channel.info.settings"
-        @model={{@channel}}
-      >
-        {{icon "chevron-left"}}
-        {{i18n "chat.members_view.back_to_settings"}}
-      </LinkTo>
-    {{/if}}
-    {{#if this.showAddMembers}}
-      <MessageCreator
-        @mode={{this.addMembersMode}}
-        @channel={{@channel}}
-        @onClose={{this.hideAddMember}}
-        @onCancel={{this.hideAddMember}}
-      />
-    {{else}}
-      <div class="c-channel-members">
-        <DcFilterInput
-          {{autoFocus}}
-          @filterAction={{this.mutFilter}}
-          @icons={{hash right="search"}}
-          @containerClass="c-channel-members__filter"
-          placeholder={{this.filterPlaceholder}}
+    <div class="c-routes --channel-info-members">
+      {{#if this.site.mobileView}}
+        <LinkTo
+          class="c-back-button"
+          @route="chat.channel.info.settings"
+          @model={{@channel}}
+        >
+          {{icon "chevron-left"}}
+          {{i18n "chat.members_view.back_to_settings"}}
+        </LinkTo>
+      {{/if}}
+      {{#if this.showAddMembers}}
+        <MessageCreator
+          @mode={{this.addMembersMode}}
+          @channel={{@channel}}
+          @onClose={{this.hideAddMember}}
+          @onCancel={{this.hideAddMember}}
         />
+      {{else}}
+        <div class="c-channel-members">
+          <DcFilterInput
+            {{autoFocus}}
+            @filterAction={{this.mutFilter}}
+            @icons={{hash right="search"}}
+            @containerClass="c-channel-members__filter"
+            placeholder={{this.filterPlaceholder}}
+          />
 
-        <ul class="c-channel-members__list" {{this.fill}}>
-          {{#if @channel.chatable.group}}
-            <li
-              class="c-channel-members__list-item -add-member"
-              role="button"
-              {{on "click" this.addMember}}
-              {{this.onEnter this.addMember}}
-              tabindex="0"
-            >
-              {{icon "plus"}}
-              <span>{{this.addMemberLabel}}</span>
-            </li>
-          {{/if}}
-          {{#each this.members as |membership|}}
-            <li
-              class="c-channel-members__list-item -member"
-              {{on "click" (fn this.openMemberCard membership.user)}}
-              {{this.onEnter (fn this.openMemberCard membership.user)}}
-              tabindex="0"
-            >
-              <ChatUserInfo
-                @user={{membership.user}}
-                @avatarSize="tiny"
-                @interactive={{false}}
-                @showStatus={{true}}
-                @showStatusDescription={{true}}
-              />
-            </li>
-          {{else}}
-            {{#if this.noResults}}
+          <ul class="c-channel-members__list" {{this.fill}}>
+            {{#if @channel.chatable.group}}
               <li
-                class="c-channel-members__list-item -no-results alert alert-info"
+                class="c-channel-members__list-item -add-member"
+                role="button"
+                {{on "click" this.addMember}}
+                {{this.onEnter this.addMember}}
+                tabindex="0"
               >
-                {{this.noMembershipsFoundLabel}}
+                {{icon "plus"}}
+                <span>{{this.addMemberLabel}}</span>
               </li>
             {{/if}}
-          {{/each}}
-        </ul>
+            {{#each this.members as |membership|}}
+              <li
+                class="c-channel-members__list-item -member"
+                {{on "click" (fn this.openMemberCard membership.user)}}
+                {{this.onEnter (fn this.openMemberCard membership.user)}}
+                tabindex="0"
+              >
+                <ChatUserInfo
+                  @user={{membership.user}}
+                  @avatarSize="tiny"
+                  @interactive={{false}}
+                  @showStatus={{true}}
+                  @showStatusDescription={{true}}
+                />
+              </li>
+            {{else}}
+              {{#if this.noResults}}
+                <li
+                  class="c-channel-members__list-item -no-results alert alert-info"
+                >
+                  {{this.noMembershipsFoundLabel}}
+                </li>
+              {{/if}}
+            {{/each}}
+          </ul>
 
-        <div {{this.loadMore}}>
-          <br />
+          <div {{this.loadMore}}>
+            <br />
+          </div>
         </div>
-      </div>
-    {{/if}}
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-nav.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-nav.gjs
index 80c0bc96d3d..58eaafa7893 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-nav.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-nav.gjs
@@ -12,36 +12,38 @@ export default class ChatRoutesChannelInfoNav extends Component {
   }
 
   <template>
-    {{#if this.showTabs}}
-      <nav class="c-channel-info__nav">
-        <ul class="nav nav-pills">
-          <li>
-            <LinkTo
-              @route="chat.channel.info.settings"
-              @models={{@channel.routeModels}}
-              class={{if (eq @tab "settings") "active"}}
-              @replace={{true}}
-            >
-              {{i18n "chat.channel_info.tabs.settings"}}
-            </LinkTo>
-          </li>
-          <li>
-            <LinkTo
-              @route="chat.channel.info.members"
-              @models={{@channel.routeModels}}
-              class={{if (eq @tab "members") "active"}}
-              @replace={{true}}
-            >
-              {{i18n "chat.channel_info.tabs.members"}}
-              {{#if @channel.isCategoryChannel}}
-                <span
-                  class="c-channel-info__member-count"
-                >({{@channel.membershipsCount}})</span>
-              {{/if}}
-            </LinkTo>
-          </li>
-        </ul>
-      </nav>
-    {{/if}}
+    <div class="c-routes --channel-info-nav">
+      {{#if this.showTabs}}
+        <nav class="c-channel-info__nav">
+          <ul class="nav nav-pills">
+            <li>
+              <LinkTo
+                @route="chat.channel.info.settings"
+                @models={{@channel.routeModels}}
+                class={{if (eq @tab "settings") "active"}}
+                @replace={{true}}
+              >
+                {{i18n "chat.channel_info.tabs.settings"}}
+              </LinkTo>
+            </li>
+            <li>
+              <LinkTo
+                @route="chat.channel.info.members"
+                @models={{@channel.routeModels}}
+                class={{if (eq @tab "members") "active"}}
+                @replace={{true}}
+              >
+                {{i18n "chat.channel_info.tabs.members"}}
+                {{#if @channel.isCategoryChannel}}
+                  <span
+                    class="c-channel-info__member-count"
+                  >({{@channel.membershipsCount}})</span>
+                {{/if}}
+              </LinkTo>
+            </li>
+          </ul>
+        </nav>
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
index 6e339010800..53350e5bf98 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-settings.gjs
@@ -327,280 +327,283 @@ export default class ChatRouteChannelInfoSettings extends Component {
   }
 
   <template>
-    <div class="c-channel-settings">
-      <ChatForm as |form|>
-        <form.section @title={{this.titleSectionTitle}} as |section|>
-          <section.row>
-            <:default>
-              <div class="c-channel-settings__name">
-                {{replaceEmoji @channel.title}}
-              </div>
-
-              {{#if @channel.isCategoryChannel}}
-                <div class="c-channel-settings__slug">
-                  <LinkTo
-                    @route="chat.channel"
-                    @models={{@channel.routeModels}}
-                  >
-                    /chat/c/{{@channel.slug}}/{{@channel.id}}
-                  </LinkTo>
-                </div>
-              {{/if}}
-            </:default>
-
-            <:action>
-              {{#if this.canEditChannel}}
-                <DButton
-                  @label="chat.channel_settings.edit"
-                  @action={{this.onEditChannelTitle}}
-                  class="edit-name-slug-btn btn-flat"
-                />
-              {{/if}}
-            </:action>
-
-          </section.row>
-        </form.section>
-
-        {{#if this.shouldRenderDescriptionSection}}
-          <form.section @title={{this.descriptionSectionTitle}} as |section|>
+    <div class="c-routes --channel-info-settings">
+      <div class="c-channel-settings">
+        <ChatForm as |form|>
+          <form.section @title={{this.titleSectionTitle}} as |section|>
             <section.row>
               <:default>
-                {{#if @channel.description.length}}
-                  {{@channel.description}}
-                {{else}}
-                  {{this.descriptionPlaceholder}}
+                <div class="c-channel-settings__name">
+                  {{replaceEmoji @channel.title}}
+                </div>
+
+                {{#if @channel.isCategoryChannel}}
+                  <div class="c-channel-settings__slug">
+                    <LinkTo
+                      @route="chat.channel"
+                      @models={{@channel.routeModels}}
+                    >
+                      /chat/c/{{@channel.slug}}/{{@channel.id}}
+                    </LinkTo>
+                  </div>
                 {{/if}}
               </:default>
 
               <:action>
                 {{#if this.canEditChannel}}
                   <DButton
-                    @label={{if
-                      @channel.description.length
-                      "chat.channel_settings.edit"
-                      "chat.channel_settings.add"
-                    }}
-                    @action={{this.onEditChannelDescription}}
-                    class="edit-description-btn btn-flat"
+                    @label="chat.channel_settings.edit"
+                    @action={{this.onEditChannelTitle}}
+                    class="edit-name-slug-btn btn-flat"
                   />
                 {{/if}}
               </:action>
+
             </section.row>
           </form.section>
-        {{/if}}
 
-        {{#if this.site.mobileView}}
-          <form.section as |section|>
-            <section.row
-              @label={{this.membersLabel}}
-              @route="chat.channel.info.members"
-              @routeModels={{@channel.routeModels}}
-            />
-          </form.section>
-        {{/if}}
+          {{#if this.shouldRenderDescriptionSection}}
+            <form.section @title={{this.descriptionSectionTitle}} as |section|>
+              <section.row>
+                <:default>
+                  {{#if @channel.description.length}}
+                    {{@channel.description}}
+                  {{else}}
+                    {{this.descriptionPlaceholder}}
+                  {{/if}}
+                </:default>
 
-        {{#if @channel.isOpen}}
-          <form.section @title={{this.settingsSectionTitle}} as |section|>
-            <section.row @label={{this.muteSectionLabel}}>
-              <:action>
-                <DToggleSwitch
-                  @state={{@channel.currentUserMembership.muted}}
-                  class="c-channel-settings__mute-switch"
-                  {{on "click" this.onToggleMuted}}
-                />
-              </:action>
-            </section.row>
-
-            {{#if this.shouldRenderDesktopNotificationsLevelSection}}
-              <section.row @label={{this.desktopNotificationsLevelLabel}}>
                 <:action>
-                  <ComboBox
-                    @content={{this.notificationLevels}}
-                    @value={{@channel.currentUserMembership.desktopNotificationLevel}}
-                    @valueProperty="value"
-                    @onChange={{fn
-                      this.saveNotificationSettings
-                      "desktopNotificationLevel"
-                      "desktop_notification_level"
-                    }}
-                    class="c-channel-settings__selector c-channel-settings__desktop-notifications-selector"
-                  />
+                  {{#if this.canEditChannel}}
+                    <DButton
+                      @label={{if
+                        @channel.description.length
+                        "chat.channel_settings.edit"
+                        "chat.channel_settings.add"
+                      }}
+                      @action={{this.onEditChannelDescription}}
+                      class="edit-description-btn btn-flat"
+                    />
+                  {{/if}}
                 </:action>
               </section.row>
-            {{/if}}
-
-            {{#if this.shouldRenderMobileNotificationsLevelSection}}
-              <section.row @label={{this.mobileNotificationsLevelLabel}}>
-                <:action>
-                  <ComboBox
-                    @content={{this.notificationLevels}}
-                    @value={{@channel.currentUserMembership.mobileNotificationLevel}}
-                    @valueProperty="value"
-                    @onChange={{fn
-                      this.saveNotificationSettings
-                      "mobileNotificationLevel"
-                      "mobile_notification_level"
-                    }}
-                    class="c-channel-settings__selector c-channel-settings__mobile-notifications-selector"
-                  />
-                </:action>
-              </section.row>
-            {{/if}}
-          </form.section>
-        {{/if}}
-
-        <form.section @title={{this.channelInfoSectionTitle}} as |section|>
-          {{#if @channel.isCategoryChannel}}
-            <section.row @label={{this.categoryLabel}}>
-              {{categoryBadge
-                @channel.chatable
-                link=true
-                allowUncategorized=true
-              }}
-            </section.row>
+            </form.section>
           {{/if}}
 
-          <section.row @label={{this.historyLabel}}>
-            <ChatRetentionReminderText @channel={{@channel}} @type="short" />
-          </section.row>
-        </form.section>
+          {{#if this.site.mobileView}}
+            <form.section as |section|>
+              <section.row
+                @label={{this.membersLabel}}
+                @route="chat.channel.info.members"
+                @routeModels={{@channel.routeModels}}
+              />
+            </form.section>
+          {{/if}}
 
-        {{#if this.shouldRenderAdminSection}}
-          <form.section
-            @title={{this.adminSectionTitle}}
-            data-section="admin"
-            as |section|
-          >
-            {{#if this.autoJoinAvailable}}
-              <section.row @label={{this.autoJoinLabel}}>
+          {{#if @channel.isOpen}}
+            <form.section @title={{this.settingsSectionTitle}} as |section|>
+              <section.row @label={{this.muteSectionLabel}}>
                 <:action>
                   <DToggleSwitch
-                    @state={{@channel.autoJoinUsers}}
-                    class="c-channel-settings__auto-join-switch"
-                    {{on
-                      "click"
-                      (fn this.onToggleAutoJoinUsers @channel.autoJoinUsers)
-                    }}
+                    @state={{@channel.currentUserMembership.muted}}
+                    class="c-channel-settings__mute-switch"
+                    {{on "click" this.onToggleMuted}}
                   />
                 </:action>
               </section.row>
-            {{/if}}
 
-            {{#if this.toggleChannelWideMentionsAvailable}}
-              <section.row @label={{this.channelWideMentionsLabel}}>
-                <:action>
-                  <DToggleSwitch
-                    class="c-channel-settings__channel-wide-mentions"
-                    @state={{@channel.allowChannelWideMentions}}
-                    {{on
-                      "click"
-                      (fn
-                        this.onToggleChannelWideMentions
-                        @channel.allowChannelWideMentions
-                      )
-                    }}
-                  />
-                </:action>
-
-                <:description>
-                  {{this.channelWideMentionsDescription}}
-                </:description>
-              </section.row>
-            {{/if}}
-
-            {{#if this.toggleThreadingAvailable}}
-              <section.row @label={{this.toggleThreadingLabel}}>
-                <:action>
-                  <DToggleSwitch
-                    @state={{@channel.threadingEnabled}}
-                    class="c-channel-settings__threading-switch"
-                    {{on
-                      "click"
-                      (fn
-                        this.onToggleThreadingEnabled @channel.threadingEnabled
-                      )
-                    }}
-                  />
-                </:action>
-
-                <:description>
-                  {{this.toggleThreadingDescription}}
-                </:description>
-              </section.row>
-            {{/if}}
-
-            {{#if this.shouldRenderStatusSection}}
-              {{#if this.shouldRenderArchiveRow}}
-                <section.row>
+              {{#if this.shouldRenderDesktopNotificationsLevelSection}}
+                <section.row @label={{this.desktopNotificationsLevelLabel}}>
                   <:action>
-                    <DButton
-                      @action={{this.onArchiveChannel}}
-                      @label="chat.channel_settings.archive_channel"
-                      @icon="archive"
-                      class="archive-btn chat-form__btn btn-transparent"
+                    <ComboBox
+                      @content={{this.notificationLevels}}
+                      @value={{@channel.currentUserMembership.desktopNotificationLevel}}
+                      @valueProperty="value"
+                      @onChange={{fn
+                        this.saveNotificationSettings
+                        "desktopNotificationLevel"
+                        "desktop_notification_level"
+                      }}
+                      class="c-channel-settings__selector c-channel-settings__desktop-notifications-selector"
                     />
                   </:action>
                 </section.row>
               {{/if}}
 
-              <section.row>
-                <:action>
-                  {{#if @channel.isOpen}}
-                    <DButton
-                      @action={{this.onToggleChannelState}}
-                      @label="chat.channel_settings.close_channel"
-                      @icon="lock"
-                      class="close-btn chat-form__btn btn-transparent"
+              {{#if this.shouldRenderMobileNotificationsLevelSection}}
+                <section.row @label={{this.mobileNotificationsLevelLabel}}>
+                  <:action>
+                    <ComboBox
+                      @content={{this.notificationLevels}}
+                      @value={{@channel.currentUserMembership.mobileNotificationLevel}}
+                      @valueProperty="value"
+                      @onChange={{fn
+                        this.saveNotificationSettings
+                        "mobileNotificationLevel"
+                        "mobile_notification_level"
+                      }}
+                      class="c-channel-settings__selector c-channel-settings__mobile-notifications-selector"
                     />
-                  {{else}}
-                    <DButton
-                      @action={{this.onToggleChannelState}}
-                      @label="chat.channel_settings.open_channel"
-                      @icon="unlock"
-                      class="open-btn chat-form__btn btn-transparent"
-                    />
-                  {{/if}}
-                </:action>
-              </section.row>
+                  </:action>
+                </section.row>
+              {{/if}}
+            </form.section>
+          {{/if}}
 
-              <section.row>
-                <:action>
-                  <DButton
-                    @action={{this.onDeleteChannel}}
-                    @label="chat.channel_settings.delete_channel"
-                    @icon="trash-alt"
-                    class="delete-btn chat-form__btn btn-transparent"
-                  />
-                </:action>
+          <form.section @title={{this.channelInfoSectionTitle}} as |section|>
+            {{#if @channel.isCategoryChannel}}
+              <section.row @label={{this.categoryLabel}}>
+                {{categoryBadge
+                  @channel.chatable
+                  link=true
+                  allowUncategorized=true
+                }}
               </section.row>
             {{/if}}
 
+            <section.row @label={{this.historyLabel}}>
+              <ChatRetentionReminderText @channel={{@channel}} @type="short" />
+            </section.row>
           </form.section>
-        {{/if}}
 
-        <form.section class="--leave-channel" as |section|>
-          {{#if @channel.chatable.group}}
-            <div class="c-channel-settings__leave-info">
-              {{icon "exclamation-triangle"}}
-              {{i18n "chat.channel_settings.leave_groupchat_info"}}
-            </div>
+          {{#if this.shouldRenderAdminSection}}
+            <form.section
+              @title={{this.adminSectionTitle}}
+              data-section="admin"
+              as |section|
+            >
+              {{#if this.autoJoinAvailable}}
+                <section.row @label={{this.autoJoinLabel}}>
+                  <:action>
+                    <DToggleSwitch
+                      @state={{@channel.autoJoinUsers}}
+                      class="c-channel-settings__auto-join-switch"
+                      {{on
+                        "click"
+                        (fn this.onToggleAutoJoinUsers @channel.autoJoinUsers)
+                      }}
+                    />
+                  </:action>
+                </section.row>
+              {{/if}}
+
+              {{#if this.toggleChannelWideMentionsAvailable}}
+                <section.row @label={{this.channelWideMentionsLabel}}>
+                  <:action>
+                    <DToggleSwitch
+                      class="c-channel-settings__channel-wide-mentions"
+                      @state={{@channel.allowChannelWideMentions}}
+                      {{on
+                        "click"
+                        (fn
+                          this.onToggleChannelWideMentions
+                          @channel.allowChannelWideMentions
+                        )
+                      }}
+                    />
+                  </:action>
+
+                  <:description>
+                    {{this.channelWideMentionsDescription}}
+                  </:description>
+                </section.row>
+              {{/if}}
+
+              {{#if this.toggleThreadingAvailable}}
+                <section.row @label={{this.toggleThreadingLabel}}>
+                  <:action>
+                    <DToggleSwitch
+                      @state={{@channel.threadingEnabled}}
+                      class="c-channel-settings__threading-switch"
+                      {{on
+                        "click"
+                        (fn
+                          this.onToggleThreadingEnabled
+                          @channel.threadingEnabled
+                        )
+                      }}
+                    />
+                  </:action>
+
+                  <:description>
+                    {{this.toggleThreadingDescription}}
+                  </:description>
+                </section.row>
+              {{/if}}
+
+              {{#if this.shouldRenderStatusSection}}
+                {{#if this.shouldRenderArchiveRow}}
+                  <section.row>
+                    <:action>
+                      <DButton
+                        @action={{this.onArchiveChannel}}
+                        @label="chat.channel_settings.archive_channel"
+                        @icon="archive"
+                        class="archive-btn chat-form__btn btn-transparent"
+                      />
+                    </:action>
+                  </section.row>
+                {{/if}}
+
+                <section.row>
+                  <:action>
+                    {{#if @channel.isOpen}}
+                      <DButton
+                        @action={{this.onToggleChannelState}}
+                        @label="chat.channel_settings.close_channel"
+                        @icon="lock"
+                        class="close-btn chat-form__btn btn-transparent"
+                      />
+                    {{else}}
+                      <DButton
+                        @action={{this.onToggleChannelState}}
+                        @label="chat.channel_settings.open_channel"
+                        @icon="unlock"
+                        class="open-btn chat-form__btn btn-transparent"
+                      />
+                    {{/if}}
+                  </:action>
+                </section.row>
+
+                <section.row>
+                  <:action>
+                    <DButton
+                      @action={{this.onDeleteChannel}}
+                      @label="chat.channel_settings.delete_channel"
+                      @icon="trash-alt"
+                      class="delete-btn chat-form__btn btn-transparent"
+                    />
+                  </:action>
+                </section.row>
+              {{/if}}
+
+            </form.section>
           {{/if}}
-          <section.row>
-            <:action>
-              <ToggleChannelMembershipButton
-                @channel={{@channel}}
-                @onLeave={{this.onLeaveChannel}}
-                @options={{hash
-                  joinClass="btn-primary"
-                  leaveClass="btn-danger"
-                  joinIcon="sign-in-alt"
-                  leaveIcon="sign-out-alt"
-                }}
-              />
-            </:action>
-          </section.row>
-        </form.section>
-      </ChatForm>
+
+          <form.section class="--leave-channel" as |section|>
+            {{#if @channel.chatable.group}}
+              <div class="c-channel-settings__leave-info">
+                {{icon "exclamation-triangle"}}
+                {{i18n "chat.channel_settings.leave_groupchat_info"}}
+              </div>
+            {{/if}}
+            <section.row>
+              <:action>
+                <ToggleChannelMembershipButton
+                  @channel={{@channel}}
+                  @onLeave={{this.onLeaveChannel}}
+                  @options={{hash
+                    joinClass="btn-primary"
+                    leaveClass="btn-danger"
+                    joinIcon="sign-in-alt"
+                    leaveIcon="sign-out-alt"
+                  }}
+                />
+              </:action>
+            </section.row>
+          </form.section>
+        </ChatForm>
+      </div>
     </div>
   </template>
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
index f3326bc9d2e..a003808779e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info.gjs
@@ -30,7 +30,7 @@ export default class ChatRoutesChannelInfo extends Component {
   }
 
   <template>
-    <div class="c-routes-channel-info">
+    <div class="c-routes --channel-info">
       <Navbar as |navbar|>
         {{#if this.chatChannelInfoRouteOriginManager.isBrowse}}
           <navbar.BackButton
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-thread.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-thread.gjs
index 1b0447d582c..c24548937ba 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-thread.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-thread.gjs
@@ -14,7 +14,7 @@ export default class ChatRoutesChannelThread extends Component {
   }
 
   <template>
-    <div class="c-routes-channel-thread">
+    <div class="c-routes --channel-thread">
       {{#each (array @thread) as |thread|}}
         <ThreadHeader
           @thread={{thread}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-threads.gjs
index 3bd07965b22..2ab2671645a 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-threads.gjs
@@ -2,7 +2,7 @@ import ChatThreadListHeader from "discourse/plugins/chat/discourse/components/ch
 import ChatThreadList from "discourse/plugins/chat/discourse/components/chat-thread-list";
 
 const ChatRoutesChannelThreads = <template>
-  <div class="c-routes-channel-threads">
+  <div class="c-routes --channel-threads">
     <ChatThreadListHeader @channel={{@channel}} />
     <ChatThreadList @channel={{@channel}} @includeHeader={{true}} />
   </div>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel.gjs
index a3cac9fef9f..9c617cefe96 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel.gjs
@@ -14,7 +14,7 @@ export default class ChatRoutesChannel extends Component {
   }
 
   <template>
-    <div class="c-routes-channel">
+    <div class="c-routes --channel">
       <Navbar as |navbar|>
         {{#if this.site.mobileView}}
           <navbar.BackButton @route={{this.getChannelsRoute}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channels.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channels.gjs
index b068e60a321..f2aaab363e9 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channels.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channels.gjs
@@ -8,7 +8,7 @@ export default class ChatRoutesChannels extends Component {
   @service site;
 
   <template>
-    <div class="c-routes-channels">
+    <div class="c-routes --channels">
       <Navbar as |navbar|>
         <navbar.Title @title={{i18n "chat.chat_channels"}} />
         <navbar.Actions as |action|>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/direct-messages.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/direct-messages.gjs
index ad9b1f4c29d..e75aba6eca6 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/direct-messages.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/direct-messages.gjs
@@ -8,7 +8,7 @@ export default class ChatRoutesDirectMessages extends Component {
   @service site;
 
   <template>
-    <div class="c-routes-direct-messages">
+    <div class="c-routes --direct-messages">
       <Navbar as |navbar|>
         <navbar.Title @title={{i18n "chat.direct_messages.title"}} />
         <navbar.Actions as |action|>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
index 296a197370b..d8136250172 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
@@ -8,7 +8,7 @@ export default class ChatRoutesThreads extends Component {
   @service site;
 
   <template>
-    <div class="c-routes-threads">
+    <div class="c-routes --threads">
       <Navbar as |navbar|>
         <navbar.Title @title={{i18n "chat.my_threads.title"}} />
 
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-channel-composer.js b/plugins/chat/assets/javascripts/discourse/services/chat-channel-composer.js
index a7930ae7a87..323313e1f27 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-channel-composer.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-channel-composer.js
@@ -78,10 +78,16 @@ export default class ChatChannelComposer extends Service {
 
       message.channel.resetDraft(this.currentUser);
 
-      await this.router.transitionTo(
-        "chat.channel.thread",
-        ...message.thread.routeModels
-      );
+      try {
+        await this.router.transitionTo(
+          "chat.channel.thread",
+          ...message.thread.routeModels
+        );
+      } catch (e) {
+        if (e.name !== "TransitionAborted") {
+          throw e;
+        }
+      }
 
       this.threadComposer.focus({ ensureAtEnd: true, refreshHeight: true });
     } else {
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js b/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js
index a6c8af3f34a..1bfc219c900 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js
@@ -1,16 +1,43 @@
 import { tracked } from "@glimmer/tracking";
 import Service, { service } from "@ember/service";
+import ChatDrawerRoutesBrowse from "discourse/plugins/chat/discourse/components/chat/drawer-routes/browse";
 import ChatDrawerRoutesChannel from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channel";
+import ChatDrawerRoutesChannelInfoMembers from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channel-info-members";
+import ChatDrawerRoutesChannelInfoSettings from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channel-info-settings";
 import ChatDrawerRoutesChannelThread from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channel-thread";
 import ChatDrawerRoutesChannelThreads from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channel-threads";
 import ChatDrawerRoutesChannels from "discourse/plugins/chat/discourse/components/chat/drawer-routes/channels";
 import ChatDrawerRoutesDirectMessages from "discourse/plugins/chat/discourse/components/chat/drawer-routes/direct-messages";
-import ChatDrawerRoutesMembers from "discourse/plugins/chat/discourse/components/chat/drawer-routes/members";
-import ChatDrawerRoutesSettings from "discourse/plugins/chat/discourse/components/chat/drawer-routes/settings";
 import ChatDrawerRoutesThreads from "discourse/plugins/chat/discourse/components/chat/drawer-routes/threads";
 
 const ROUTES = {
+  chat: { name: ChatDrawerRoutesChannels },
   "chat.index": { name: ChatDrawerRoutesChannels },
+  // order matters, non index before index
+  "chat.browse": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: () => ({ currentTab: "all" }),
+  },
+  "chat.browse.index": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: () => ({ currentTab: "all" }),
+  },
+  "chat.browse.open": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: (r) => ({ currentTab: r.localName }),
+  },
+  "chat.browse.archived": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: (r) => ({ currentTab: r.localName }),
+  },
+  "chat.browse.closed": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: (r) => ({ currentTab: r.localName }),
+  },
+  "chat.browse.all": {
+    name: ChatDrawerRoutesBrowse,
+    extractParams: (r) => ({ currentTab: r.localName }),
+  },
   "chat.channels": { name: ChatDrawerRoutesChannels },
   "chat.channel": { name: ChatDrawerRoutesChannel },
   "chat.channel.index": { name: ChatDrawerRoutesChannel },
@@ -56,7 +83,6 @@ const ROUTES = {
   "chat.threads": {
     name: ChatDrawerRoutesThreads,
   },
-  chat: { name: ChatDrawerRoutesChannels },
   "chat.channel.near-message": {
     name: ChatDrawerRoutesChannel,
     extractParams: (route) => {
@@ -76,7 +102,7 @@ const ROUTES = {
     },
   },
   "chat.channel.info.settings": {
-    name: ChatDrawerRoutesSettings,
+    name: ChatDrawerRoutesChannelInfoSettings,
     extractParams: (route) => {
       return {
         channelId: route.parent.params.channelId,
@@ -84,7 +110,7 @@ const ROUTES = {
     },
   },
   "chat.channel.info.members": {
-    name: ChatDrawerRoutesMembers,
+    name: ChatDrawerRoutesChannelInfoMembers,
     extractParams: (route) => {
       return {
         channelId: route.parent.params.channelId,
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-all.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-all.hbs
index e63eb8e9b66..bd73ca0d68c 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-all.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-all.hbs
@@ -1 +1 @@
-<Chat::Routes::Browse @status="all" />
\ No newline at end of file
+<BrowseChannels @currentTab="all" />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-archived.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-archived.hbs
index fb8af2ac9c3..0cc4d1ac2bf 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-archived.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-archived.hbs
@@ -1 +1 @@
-<Chat::Routes::Browse @status="archived" />
\ No newline at end of file
+<BrowseChannels @currentTab="archived" />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-closed.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-closed.hbs
index 994ae1bbc1c..3dd4d6e9a30 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-closed.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-closed.hbs
@@ -1 +1 @@
-<Chat::Routes::Browse @status="closed" />
\ No newline at end of file
+<BrowseChannels @currentTab="closed" />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-open.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-open.hbs
index 6e1bf126b2e..6fc0bb370b9 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-browse-open.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-browse-open.hbs
@@ -1 +1 @@
-<Chat::Routes::Browse @status="open" />
\ No newline at end of file
+<BrowseChannels @currentTab="open" />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-browse.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-browse.hbs
index e2147cab02d..7d44ab2ad4c 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-browse.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-browse.hbs
@@ -1 +1,13 @@
-{{outlet}}
\ No newline at end of file
+<div class="c-routes --browse">
+  <Chat::Navbar as |navbar|>
+    <navbar.BackButton />
+    <navbar.Title @title={{i18n "chat.browse.title"}} />
+
+    <navbar.Actions as |a|>
+      <a.NewChannelButton />
+      <a.OpenDrawerButton />
+    </navbar.Actions>
+  </Chat::Navbar>
+
+  {{outlet}}
+</div>
\ No newline at end of file
diff --git a/plugins/chat/assets/stylesheets/common/chat-browse.scss b/plugins/chat/assets/stylesheets/common/chat-browse.scss
index a598ce921da..854bfa0fef9 100644
--- a/plugins/chat/assets/stylesheets/common/chat-browse.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-browse.scss
@@ -35,6 +35,16 @@
     justify-content: space-between;
     align-items: end;
 
+    .c-drawer-routes.--browse & {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: flex-start;
+
+      .filter-input {
+        width: 100%;
+      }
+    }
+
     @include breakpoint(tablet) {
       flex-direction: column;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer-routes.scss b/plugins/chat/assets/stylesheets/common/chat-drawer-routes.scss
new file mode 100644
index 00000000000..b1a5ae98a61
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-drawer-routes.scss
@@ -0,0 +1,6 @@
+.c-drawer-routes {
+  display: flex;
+  flex-direction: column;
+  flex: 1 0 auto;
+  height: 100%;
+}
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index 1f476629c2c..e9ea15a319a 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -2,6 +2,7 @@
 @import "chat-height-mixin";
 @import "base-common";
 @import "sidebar-extensions";
+@import "chat-drawer-routes";
 @import "chat-browse";
 @import "chat-channel";
 @import "chat-channel-card";
diff --git a/plugins/chat/assets/stylesheets/desktop/chat-navbar.scss b/plugins/chat/assets/stylesheets/desktop/chat-navbar.scss
index 9b61edbd8c1..6de8e549e3b 100644
--- a/plugins/chat/assets/stylesheets/desktop/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/desktop/chat-navbar.scss
@@ -1,7 +1,7 @@
 .c-navbar-container {
   .chat-drawer &,
-  .c-routes-channel-thread &,
-  .c-routes-channel-info & {
+  .c-routes-channel.--thread &,
+  .c-routes-channel.--info & {
     padding-inline: 0;
   }
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
index fe7af9682ff..91b59b08ec9 100644
--- a/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
+++ b/plugins/chat/assets/stylesheets/mobile/base-mobile.scss
@@ -21,7 +21,7 @@ html.has-full-page-chat {
       &.has-side-panel-expanded {
         grid-template-columns: 1fr;
 
-        .c-routes-channel {
+        .c-routes.--channel {
           display: none;
         }
       }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-index.scss b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
index 67c49c698eb..daea4db625a 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-index.scss
@@ -8,9 +8,9 @@
   }
 }
 
-.c-routes-direct-messages,
-.c-routes-channels,
-.c-routes-threads {
+.c-routes.--direct-messages,
+.c-routes.--channels,
+.c-routes.--threads {
   background: var(--primary-very-low);
   max-width: 100vw;
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss b/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
index eb266c7a0bc..2e9c7fc0016 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-message-thread-indicator.scss
@@ -1,5 +1,5 @@
 .chat-message-thread-indicator {
-  .c-routes-threads & {
+  .c-routes.--threads & {
     background: var(--secondary);
   }
   grid-template-areas:
diff --git a/plugins/chat/spec/system/drawer/browse_spec.rb b/plugins/chat/spec/system/drawer/browse_spec.rb
new file mode 100644
index 00000000000..4ae0404fea5
--- /dev/null
+++ b/plugins/chat/spec/system/drawer/browse_spec.rb
@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+RSpec.describe "Drawer - Browse", type: :system do
+  fab!(:current_user) { Fabricate(:user) }
+
+  let(:drawer_page) { PageObjects::Pages::ChatDrawer.new }
+
+  fab!(:channel_1) { Fabricate(:chat_channel) }
+
+  before do
+    chat_system_bootstrap
+    sign_in(current_user)
+  end
+
+  it "can change status" do
+    drawer_page.visit_browse
+
+    expect(drawer_page.browse).to have_channel(name: channel_1.name)
+
+    drawer_page.browse.change_status("closed")
+
+    expect(drawer_page.browse).to have_no_channel(name: channel_1.name)
+  end
+end
diff --git a/plugins/chat/spec/system/drawer/index_spec.rb b/plugins/chat/spec/system/drawer/index_spec.rb
index 4b1eef2ed08..1b7165100b0 100644
--- a/plugins/chat/spec/system/drawer/index_spec.rb
+++ b/plugins/chat/spec/system/drawer/index_spec.rb
@@ -42,4 +42,13 @@ RSpec.describe "Drawer - index", type: :system do
 
     expect(row).to be_non_existent
   end
+
+  it "can open browse" do
+    channel = Fabricate(:chat_channel)
+
+    drawer_page.visit_index
+    drawer_page.channels_index.open_browse
+
+    expect(drawer_page.browse).to have_channel(name: channel.name)
+  end
 end
diff --git a/plugins/chat/spec/system/hashtag_autocomplete_spec.rb b/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
index ef635f8f82f..a04e2123e3f 100644
--- a/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
+++ b/plugins/chat/spec/system/hashtag_autocomplete_spec.rb
@@ -9,8 +9,8 @@ describe "Using #hashtag autocompletion to search for and lookup channels", type
   fab!(:topic)
   fab!(:post) { Fabricate(:post, topic: topic) }
   fab!(:message1) { Fabricate(:chat_message, chat_channel: channel1) }
+
   let(:chat_page) { PageObjects::Pages::Chat.new }
-  let(:chat_drawer_page) { PageObjects::Pages::ChatDrawer.new }
   let(:chat_channel_page) { PageObjects::Pages::ChatChannel.new }
   let(:topic_page) { PageObjects::Pages::Topic.new }
 
diff --git a/plugins/chat/spec/system/message_notifications_mobile_spec.rb b/plugins/chat/spec/system/message_notifications_mobile_spec.rb
index d0cd9f2880a..d3ea939595f 100644
--- a/plugins/chat/spec/system/message_notifications_mobile_spec.rb
+++ b/plugins/chat/spec/system/message_notifications_mobile_spec.rb
@@ -5,7 +5,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
 
   let!(:chat_page) { PageObjects::Pages::Chat.new }
   let!(:chat_channel_page) { PageObjects::Pages::ChatChannel.new }
-  let!(:channel_index_page) { PageObjects::Components::Chat::ChannelIndex.new }
+  let!(:channels_index_page) { PageObjects::Components::Chat::ChannelsIndex.new }
 
   before do
     SiteSetting.navigation_menu = "sidebar"
@@ -35,7 +35,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               create_message(channel_1, user: user_1)
 
               expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
-              expect(page).to have_no_css(channel_index_page.channel_row_selector(channel_1))
+              expect(page).to have_no_css(channels_index_page.channel_row_selector(channel_1))
             end
           end
         end
@@ -73,7 +73,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
                 create_message(channel_1, user: user_1)
 
                 expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
-                expect(channel_index_page).to have_no_unread_channel(channel_1)
+                expect(channels_index_page).to have_no_unread_channel(channel_1)
               end
             end
           end
@@ -85,7 +85,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               create_message(channel_1, user: user_1)
 
               expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
-              expect(channel_index_page).to have_unread_channel(channel_1)
+              expect(channels_index_page).to have_unread_channel(channel_1)
             end
           end
 
@@ -102,7 +102,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               )
 
               expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
-              expect(channel_index_page).to have_unread_channel(channel_1, count: 1)
+              expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
             end
 
             it "shows correct count when there are multiple messages but only 1 is urgent" do
@@ -122,7 +122,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
                 ".chat-header-icon .chat-channel-unread-indicator",
                 text: "1",
               )
-              expect(channel_index_page).to have_unread_channel(channel_1, count: 1)
+              expect(channels_index_page).to have_unread_channel(channel_1, count: 1)
             end
           end
         end
@@ -147,7 +147,7 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               text: "1",
               wait: 25,
             )
-            expect(channel_index_page).to have_unread_channel(dm_channel_1, wait: 25)
+            expect(channels_index_page).to have_unread_channel(dm_channel_1, wait: 25)
 
             create_message(dm_channel_1, user: user_1)
 
@@ -198,13 +198,13 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
             create_message(channel_1, user: user_1)
 
             expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "")
-            expect(channel_index_page).to have_unread_channel(channel_1)
+            expect(channels_index_page).to have_unread_channel(channel_1)
 
             visit("/chat/direct-messages")
 
             create_message(dm_channel_1, user: user_1)
 
-            expect(channel_index_page).to have_unread_channel(dm_channel_1)
+            expect(channels_index_page).to have_unread_channel(dm_channel_1)
             expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator", text: "1")
           end
         end
diff --git a/plugins/chat/spec/system/navigation_spec.rb b/plugins/chat/spec/system/navigation_spec.rb
index 17458ac4e50..46bdb5b1e06 100644
--- a/plugins/chat/spec/system/navigation_spec.rb
+++ b/plugins/chat/spec/system/navigation_spec.rb
@@ -305,25 +305,13 @@ RSpec.describe "Navigation", type: :system do
       end
     end
 
-    context "when opening browse page from drawer in drawer mode" do
-      it "opens browser page in full page" do
-        visit("/")
-        chat_page.open_from_header
-        chat_drawer_page.open_browse
-
-        expect(page).to have_current_path("/chat/browse/open")
-        expect(page).not_to have_css(".chat-drawer.is-expanded")
-      end
-    end
-
     context "when opening browse page from sidebar in drawer mode" do
       it "opens browser page in full page" do
         visit("/")
         chat_page.open_from_header
         sidebar_page.open_browse
 
-        expect(page).to have_current_path("/chat/browse/open")
-        expect(page).not_to have_css(".chat-drawer.is-expanded")
+        expect(chat_drawer_page.browse).to have_channel(name: category_channel.name)
       end
     end
 
diff --git a/plugins/chat/spec/system/page_objects/chat/browse_page.rb b/plugins/chat/spec/system/page_objects/chat/browse.rb
similarity index 69%
rename from plugins/chat/spec/system/page_objects/chat/browse_page.rb
rename to plugins/chat/spec/system/page_objects/chat/browse.rb
index eaff9fa1bf9..789daa1e3f4 100644
--- a/plugins/chat/spec/system/page_objects/chat/browse_page.rb
+++ b/plugins/chat/spec/system/page_objects/chat/browse.rb
@@ -3,8 +3,19 @@
 module PageObjects
   module Pages
     class ChatBrowse < PageObjects::Pages::Base
+      SELECTOR = ".c-routes.--browse"
+
+      def initialize(context = SELECTOR)
+        @context = context
+      end
+
       def component
-        find(".chat-browse-view")
+        find("#{@context} .chat-browse-view")
+      end
+
+      def change_status(status = "all")
+        component.find(".chat-browse-view__filter.-#{status}").click
+        has_finished_loading?
       end
 
       def has_finished_loading?
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel_threads.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel_threads.rb
index db89b148555..8c5fd15feb8 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat_channel_threads.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat_channel_threads.rb
@@ -4,11 +4,11 @@ module PageObjects
   module Pages
     class ChatChannelThreads < PageObjects::Pages::Base
       def close
-        find(".c-routes-channel-threads .c-navbar__close-threads-button").click
+        find(".c-routes.--channel-threads .c-navbar__close-threads-button").click
       end
 
       def back
-        find(".c-routes-channel-threads .c-navbar__back-button").click
+        find(".c-routes.--channel-threads .c-navbar__back-button").click
       end
     end
   end
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb
index 600426b0d22..780a8936d3e 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat_thread.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat_thread.rb
@@ -17,7 +17,7 @@ module PageObjects
       end
 
       def header
-        @header ||= PageObjects::Components::Chat::ThreadHeader.new(".c-routes-channel-thread")
+        @header ||= PageObjects::Components::Chat::ThreadHeader.new(".c-routes.--channel-thread")
       end
 
       def notifications_button
diff --git a/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb b/plugins/chat/spec/system/page_objects/chat/components/channels_index.rb
similarity index 85%
rename from plugins/chat/spec/system/page_objects/chat/components/channel_index.rb
rename to plugins/chat/spec/system/page_objects/chat/components/channels_index.rb
index 60e90b7d059..92c227d41a2 100644
--- a/plugins/chat/spec/system/page_objects/chat/components/channel_index.rb
+++ b/plugins/chat/spec/system/page_objects/chat/components/channels_index.rb
@@ -3,10 +3,10 @@
 module PageObjects
   module Components
     module Chat
-      class ChannelIndex < PageObjects::Components::Base
+      class ChannelsIndex < PageObjects::Components::Base
         attr_reader :context
 
-        SELECTOR = ".channels-list-container"
+        SELECTOR = ".c-drawer-routes.--channels"
 
         def initialize(context = nil)
           @context = context
@@ -17,6 +17,10 @@ module PageObjects
           find(context).find(SELECTOR)
         end
 
+        def open_browse
+          component.find(".open-browse-page-btn").click
+        end
+
         def open_channel(channel)
           component.find("#{channel_row_selector(channel)}").click
         end
diff --git a/plugins/chat/spec/system/page_objects/chat/user_threads.rb b/plugins/chat/spec/system/page_objects/chat/user_threads.rb
index d14b9bf16c4..85d0a8a111a 100644
--- a/plugins/chat/spec/system/page_objects/chat/user_threads.rb
+++ b/plugins/chat/spec/system/page_objects/chat/user_threads.rb
@@ -5,7 +5,7 @@ module PageObjects
     class UserThreads < PageObjects::Pages::Base
       def has_threads?(count: nil)
         has_no_css?(".spinner")
-        has_css?(".c-user-thread", count: count)
+        has_css?(".c-user-thread", count: count, visible: :all)
       end
 
       def open_thread(thread)
diff --git a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
index 52321b00241..384094a3a66 100644
--- a/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
+++ b/plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb
@@ -5,8 +5,12 @@ module PageObjects
     class ChatDrawer < PageObjects::Pages::Base
       VISIBLE_DRAWER = ".chat-drawer.is-expanded"
 
-      def channel_index
-        @channel_index ||= ::PageObjects::Components::Chat::ChannelIndex.new(VISIBLE_DRAWER)
+      def channels_index
+        @channels_index ||= ::PageObjects::Components::Chat::ChannelsIndex.new(VISIBLE_DRAWER)
+      end
+
+      def browse
+        @browse ||= ::PageObjects::Pages::ChatBrowse.new(".c-drawer-routes.--browse")
       end
 
       def open_browse
@@ -34,17 +38,22 @@ module PageObjects
         open_channel(channel)
       end
 
+      def visit_browse
+        visit_index
+        open_browse
+      end
+
       def open_channel(channel)
-        channel_index.open_channel(channel)
+        channels_index.open_channel(channel)
         has_no_css?(".chat-skeleton")
       end
 
       def has_unread_channel?(channel)
-        channel_index.has_unread_channel?(channel)
+        channels_index.has_unread_channel?(channel)
       end
 
       def has_no_unread_channel?(channel)
-        channel_index.has_no_unread_channel?(channel)
+        channels_index.has_no_unread_channel?(channel)
       end
 
       def has_user_threads_section?
diff --git a/plugins/chat/spec/system/single_thread_spec.rb b/plugins/chat/spec/system/single_thread_spec.rb
index d6972c7ac9a..25c0173dc7e 100644
--- a/plugins/chat/spec/system/single_thread_spec.rb
+++ b/plugins/chat/spec/system/single_thread_spec.rb
@@ -102,7 +102,7 @@ describe "Single thread in side panel", type: :system do
       it "doesn’t show back button " do
         chat_page.visit_thread(thread)
 
-        expect(page).to have_no_css(".c-routes-channel-thread .c-navbar__back-button")
+        expect(page).to have_no_css(".c-routes.--channel-thread .c-navbar__back-button")
       end
     end