diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js
index 81ff741afe5..96f90da74ce 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-selector-modal-inner.js
@@ -18,6 +18,7 @@ export default Component.extend({
   searchIndex: 0,
   loading: false,
   chatChannelsManager: service(),
+  router: service(),
 
   didInsertElement() {
     this._super(...arguments);
@@ -103,13 +104,13 @@ export default Component.extend({
       return this.fetchOrCreateChannelForUser(channel).then((response) => {
         const newChannel = this.chatChannelsManager.store(response.channel);
         return this.chatChannelsManager.follow(newChannel).then((c) => {
-          this.chat.openChannel(c);
+          this.router.transitionTo("chat.channel", ...c.routeModels);
           this.close();
         });
       });
     } else {
       return this.chatChannelsManager.follow(channel).then((c) => {
-        this.chat.openChannel(c);
+        this.router.transitionTo("chat.channel", ...c.routeModels);
         this.close();
       });
     }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
index 3e8aa906ec1..b7d97773a34 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.hbs
@@ -22,7 +22,6 @@
     <ChatLivePane
       @chatChannel={{this.previewedChannel}}
       @includeHeader={{false}}
-      @onSwitchChannel={{action "onSwitchFromDraftChannel"}}
     />
   {{/if}}
 </div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
index f8f00d3e920..c5627fd1ba1 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-draft-channel-screen.js
@@ -7,7 +7,6 @@ export default class ChatDraftChannelScreen extends Component {
   @service chat;
   @service router;
   tagName = "";
-  onSwitchChannel = null;
 
   @action
   onCancelChatDraft() {
@@ -22,7 +21,6 @@ export default class ChatDraftChannelScreen extends Component {
   @action
   onSwitchFromDraftChannel(channel) {
     channel.set("isDraft", false);
-    this.onSwitchChannel?.(channel);
   }
 
   _fetchPreviewedChannel(users) {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.hbs
index 48edf5dd80d..2e44c5fde07 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.hbs
@@ -1,4 +1,5 @@
 {{#if this.chatStateManager.isDrawerActive}}
+
   <div
     data-chat-channel-id={{this.chat.activeChannel.id}}
     class={{concat-class
@@ -10,128 +11,14 @@
   >
     <div class="chat-drawer-container">
       <div class="chat-drawer-resizer"></div>
-      <div
-        role="region"
-        aria-label={{i18n "chat.aria_roles.header"}}
-        class="chat-drawer-header"
-      >
-        {{#if
-          (and this.draftChannelView this.chatStateManager.isDrawerExpanded)
-        }}
-          <div class="chat-drawer-header__left-actions">
-            <div class="chat-drawer-header__top-line">
-              <LinkTo
-                title={{i18n "chat.return_to_list"}}
-                class="chat-drawer-header__return-to-channels-btn"
-                @route="chat"
-              >
-                {{d-icon "chevron-left"}}
-              </LinkTo>
-            </div>
-          </div>
-
-          <span class="chat-drawer-header__title">
-            <div class="chat-drawer-header__top-line">
-              {{i18n "chat.direct_message_creator.title"}}
-            </div>
-          </span>
-        {{else if this.chatView}}
-          {{#if this.chatStateManager.isDrawerExpanded}}
-            <LinkTo
-              title={{i18n "chat.return_to_list"}}
-              class="chat-drawer-header__return-to-channels-btn"
-              @route="chat"
-            >
-              {{d-icon "chevron-left"}}
-            </LinkTo>
-          {{/if}}
-
-          {{#if this.chat.activeChannel}}
-            {{#if this.chatStateManager.isDrawerExpanded}}
-              <LinkTo
-                @route={{this.infoTabRoute}}
-                @models={{this.chat.activeChannel.routeModels}}
-                class="chat-drawer-header__title"
-              >
-                <div class="chat-drawer-header__top-line">
-                  <ChatChannelTitle @channel={{this.chat.activeChannel}} />
-                </div>
-              </LinkTo>
-            {{else}}
-              <div
-                role="button"
-                {{on "click" (action "toggleExpand")}}
-                class="chat-drawer-header__title"
-              >
-                <div class="chat-drawer-header__top-line">
-                  <ChatChannelTitle @channel={{this.chat.activeChannel}}>
-                    {{#if this.unreadCount}}
-                      <span
-                        class="chat-unread-count"
-                      >{{this.unreadCount}}</span>
-                    {{/if}}
-                  </ChatChannelTitle>
-                </div>
-              </div>
-            {{/if}}
-          {{/if}}
-        {{else}}
-          <span class="chat-drawer-header__title">
-            <div class="chat-drawer-header__top-line">
-              {{i18n "chat.heading"}}
-            </div>
-          </span>
-        {{/if}}
-
-        <div class="chat-drawer-header__right-actions">
-          <div class="chat-drawer-header__top-line {{this.topLineClass}}">
-            {{#if this.chatStateManager.isDrawerExpanded}}
-              <DButton
-                @icon="discourse-expand"
-                class="btn-flat btn-link chat-drawer-header__full-screen-btn"
-                @title={{"chat.open_full_page"}}
-                @action={{this.openInFullPage}}
-              />
-            {{/if}}
-
-            <FlatButton
-              @icon={{this.expandIcon}}
-              @class="chat-drawer-header__expand-btn"
-              @action={{action "toggleExpand"}}
-              @title="chat.collapse"
-            />
-
-            {{#if this.showClose}}
-              <FlatButton
-                @icon="times"
-                @action={{action "close"}}
-                @title="chat.close"
-                @class="chat-drawer-header__close-btn"
-              />
-            {{/if}}
-          </div>
-        </div>
-      </div>
-
-      {{#if this.chatStateManager.isDrawerExpanded}}
-        <div class="chat-drawer-content">
-          {{#if (and this.chatView this.chat.activeChannel)}}
-            <ChatLivePane
-              @chatChannel={{this.chat.activeChannel}}
-              @onSwitchChannel={{action "switchChannel"}}
-            />
-          {{else if this.draftChannelView}}
-            <ChatDraftChannelScreen
-              @onSwitchChannel={{action "switchChannel"}}
-            />
-          {{else}}
-            <ChannelsList
-              @onOpenView={{action "openURL"}}
-              @onSelect={{action "switchChannel"}}
-            />
-          {{/if}}
-        </div>
-      {{/if}}
+      <this.chatDrawerRouter.component
+        @params={{this.chatDrawerRouter.params}}
+        @openURL={{this.openURL}}
+        @openInFullPage={{this.openInFullPage}}
+        @toggleExpand={{this.toggleExpand}}
+        @close={{this.close}}
+        @drawerActions={{this.drawerActions}}
+      />
     </div>
   </div>
 {{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
index 3c46af5a928..287de5a7c98 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer.js
@@ -1,35 +1,22 @@
 import Component from "@ember/component";
-import discourseComputed, {
-  bind,
-  observes,
-} from "discourse-common/utils/decorators";
+import { bind, observes } from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
-import {
-  CHAT_VIEW,
-  DRAFT_CHANNEL_VIEW,
-  LIST_VIEW,
-} from "discourse/plugins/chat/discourse/services/chat";
-import { equal } from "@ember/object/computed";
-import { cancel, next, schedule, throttle } from "@ember/runloop";
+import { cancel, throttle } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { escapeExpression } from "discourse/lib/utilities";
 
 export default Component.extend({
   tagName: "",
-  listView: equal("view", LIST_VIEW),
-  chatView: equal("view", CHAT_VIEW),
-  draftChannelView: equal("view", DRAFT_CHANNEL_VIEW),
   chat: service(),
   router: service(),
   chatDrawerSize: service(),
   chatChannelsManager: service(),
   chatStateManager: service(),
+  chatDrawerRouter: service(),
   loading: false,
-  showClose: true, // TODO - false when on same topic
   sizeTimer: null,
   rafTimer: null,
-  view: null,
   hasUnreadMessages: false,
   drawerStyle: null,
 
@@ -42,12 +29,6 @@ export default Component.extend({
     this._checkSize();
     this.appEvents.on("chat:open-url", this, "openURL");
     this.appEvents.on("chat:toggle-close", this, "close");
-    this.appEvents.on("chat:open-channel", this, "switchChannel");
-    this.appEvents.on(
-      "chat:open-channel-at-message",
-      this,
-      "openChannelAtMessage"
-    );
     this.appEvents.on("composer:closed", this, "_checkSize");
     this.appEvents.on("composer:opened", this, "_checkSize");
     this.appEvents.on("composer:resized", this, "_checkSize");
@@ -74,12 +55,6 @@ export default Component.extend({
     if (this.appEvents) {
       this.appEvents.off("chat:open-url", this, "openURL");
       this.appEvents.off("chat:toggle-close", this, "close");
-      this.appEvents.off("chat:open-channel", this, "switchChannel");
-      this.appEvents.off(
-        "chat:open-channel-at-message",
-        this,
-        "openChannelAtMessage"
-      );
       this.appEvents.off("composer:closed", this, "_checkSize");
       this.appEvents.off("composer:opened", this, "_checkSize");
       this.appEvents.off("composer:resized", this, "_checkSize");
@@ -109,26 +84,6 @@ export default Component.extend({
     this.appEvents.trigger("chat:rerender-header");
   },
 
-  @discourseComputed("chatStateManager.isDrawerExpanded")
-  topLineClass(expanded) {
-    const baseClass = "chat-drawer-header__top-line";
-    return expanded ? `${baseClass}--expanded` : `${baseClass}--collapsed`;
-  },
-
-  @discourseComputed("chatStateManager.isDrawerExpanded", "chat.activeChannel")
-  displayMembers(expanded, channel) {
-    return expanded && !channel?.isDirectMessageChannel;
-  },
-
-  @discourseComputed("displayMembers")
-  infoTabRoute(displayMembers) {
-    if (displayMembers) {
-      return "chat.channel.info.members";
-    }
-
-    return "chat.channel.info.settings";
-  },
-
   computeDrawerStyle() {
     const { width, height } = this.chatDrawerSize.size;
     let style = `width: ${escapeExpression((width || "0").toString())}px;`;
@@ -136,8 +91,12 @@ export default Component.extend({
     this.set("drawerStyle", htmlSafe(style));
   },
 
-  openChannelAtMessage(channel, messageId) {
-    this.chat.openChannel(channel, messageId);
+  get drawerActions() {
+    return {
+      openInFullPage: this.openInFullPage,
+      close: this.close,
+      toggleExpand: this.toggleExpand,
+    };
   },
 
   @bind
@@ -204,74 +163,22 @@ export default Component.extend({
     );
   },
 
-  @discourseComputed("chatStateManager.isDrawerExpanded")
-  expandIcon(expanded) {
-    if (expanded) {
-      return "angle-double-down";
-    } else {
-      return "angle-double-up";
-    }
-  },
-
-  @discourseComputed("chat.activeChannel.currentUserMembership.unread_count")
-  unreadCount(count) {
-    return count || 0;
-  },
-
   @action
-  openURL(URL = null) {
+  openURL(url = null) {
     this.chat.activeChannel = null;
-    this.chatStateManager.didOpenDrawer(URL);
-
-    const route = this._buildRouteFromURL(
-      URL || this.chatStateManager.lastKnownChatURL
-    );
-
-    switch (route.name) {
-      case "chat":
-        this.set("view", LIST_VIEW);
-        this.appEvents.trigger("chat:float-toggled", false);
-        return;
-      case "chat.draft-channel":
-        this.set("view", DRAFT_CHANNEL_VIEW);
-        this.appEvents.trigger("chat:float-toggled", false);
-        return;
-      case "chat.channel":
-        return this._openChannel(
-          route.params.channelId,
-          this._highlightCb(route.queryParams.messageId)
-        );
-      case "chat.channel.near-message":
-        return this._openChannel(
-          route.parent.params.channelId,
-          this._highlightCb(route.params.messageId)
-        );
-      case "chat.channel-legacy":
-        return this._openChannel(
-          route.params.channelId,
-          this._highlightCb(route.queryParams.messageId)
-        );
-    }
+    this.chatStateManager.didOpenDrawer(url);
+    this.chatDrawerRouter.stateFor(this._routeFromURL(url));
   },
 
-  _highlightCb(messageId) {
-    if (messageId) {
-      return () => {
-        this.appEvents.trigger("chat-live-pane:highlight-message", messageId);
-      };
+  _routeFromURL(url) {
+    let route = this.router.recognize(url || "/");
+
+    // ember might recognize the index subroute
+    if (route.localName === "index") {
+      route = route.parent;
     }
-  },
 
-  _openChannel(channelId, afterRenderFunc = null) {
-    return this.chatChannelsManager.find(channelId).then((channel) => {
-      this.chat.activeChannel = channel;
-      this.set("view", CHAT_VIEW);
-      this.appEvents.trigger("chat:float-toggled", false);
-
-      if (afterRenderFunc) {
-        schedule("afterRender", afterRenderFunc);
-      }
-    });
+    return route;
   },
 
   @action
@@ -298,61 +205,10 @@ export default Component.extend({
     this.computeDrawerStyle();
     this.chatStateManager.didCloseDrawer();
     this.chat.activeChannel = null;
-    this.appEvents.trigger("chat:float-toggled", true);
   },
 
   @action
   didResize(element, { width, height }) {
     this.chatDrawerSize.size = { width, height };
   },
-
-  @action
-  switchChannel(channel) {
-    // we need next here to ensure we correctly let the time for routes transitions
-    // eg: deactivate hook of full page chat routes will set activeChannel to null
-    next(() => {
-      if (this.isDestroying || this.isDestroyed) {
-        return;
-      }
-
-      this.chat.activeChannel = channel;
-
-      if (!channel) {
-        const URL = this._buildURLFromState(LIST_VIEW);
-        this.openURL(URL);
-        return;
-      }
-
-      const URL = this._buildURLFromState(CHAT_VIEW, channel);
-      this.openURL(URL);
-    });
-  },
-
-  _buildRouteFromURL(URL) {
-    let route = this.router.recognize(URL || "/");
-
-    // ember might recognize the index subroute
-    if (route.localName === "index") {
-      route = route.parent;
-    }
-
-    return route;
-  },
-
-  _buildURLFromState(view, channel = null) {
-    switch (view) {
-      case LIST_VIEW:
-        return "/chat";
-      case DRAFT_CHANNEL_VIEW:
-        return "/chat/draft-channel";
-      case CHAT_VIEW:
-        if (channel) {
-          return `/chat/c/${channel.slug || "-"}/${channel.id}`;
-        } else {
-          return "/chat";
-        }
-      default:
-        return "/chat";
-    }
-  },
 });
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs
new file mode 100644
index 00000000000..ee06d23f1e9
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs
@@ -0,0 +1,25 @@
+<ChatDrawer::Header>
+  <ChatDrawer::Header::LeftActions />
+
+  <ChatDrawer::Header::ChannelTitle
+    @channel={{this.chat.activeChannel}}
+    @drawerActions={{@drawerActions}}
+  />
+
+  <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />
+</ChatDrawer::Header>
+
+{{#if this.chatStateManager.isDrawerExpanded}}
+  <div
+    class="chat-drawer-content"
+    {{did-insert this.fetchChannel}}
+    {{did-update this.fetchChannel @params.channelId}}
+  >
+    {{#if this.chat.activeChannel}}
+      <ChatLivePane
+        @targetMessageId={{readonly @params.messageId}}
+        @chatChannel={{this.chat.activeChannel}}
+      />
+    {{/if}}
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.js
new file mode 100644
index 00000000000..22a8017f9d2
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.js
@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import { action } from "@ember/object";
+
+export default class ChatDrawerChannel extends Component {
+  @service appEvents;
+  @service chat;
+  @service chatStateManager;
+  @service chatChannelsManager;
+
+  @action
+  fetchChannel() {
+    if (!this.args.params?.channelId) {
+      return;
+    }
+
+    return this.chatChannelsManager
+      .find(this.args.params.channelId)
+      .then((channel) => {
+        this.chat.activeChannel = channel;
+      });
+  }
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs
new file mode 100644
index 00000000000..4ffca1a505b
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs
@@ -0,0 +1,11 @@
+<ChatDrawer::Header>
+  <ChatDrawer::Header::LeftActions />
+  <ChatDrawer::Header::Title @title="chat.direct_message_creator.title" />
+  <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />
+</ChatDrawer::Header>
+
+{{#if this.chatStateManager.isDrawerExpanded}}
+  <div class="chat-drawer-content">
+    <ChatDraftChannelScreen />
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.js
new file mode 100644
index 00000000000..29c6d21f662
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerDraftChannel extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs
new file mode 100644
index 00000000000..45a25d6fed4
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs
@@ -0,0 +1,7 @@
+<div
+  role="region"
+  aria-label={{i18n "chat.aria_roles.header"}}
+  class="chat-drawer-header"
+>
+  {{yield}}
+</div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.hbs
new file mode 100644
index 00000000000..9463ae6f084
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.hbs
@@ -0,0 +1,7 @@
+<LinkTo
+  title={{i18n "chat.return_to_list"}}
+  class="chat-drawer-header__return-to-channels-btn"
+  @route="chat"
+>
+  {{d-icon "chevron-left"}}
+</LinkTo>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.js
new file mode 100644
index 00000000000..d8fe6a60067
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeaderBackLink extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.hbs
new file mode 100644
index 00000000000..c8188e9586d
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.hbs
@@ -0,0 +1,33 @@
+{{#if @channel}}
+  {{#if @this.chatStateManager.isDrawerExpanded}}
+    <LinkTo
+      @route={{if
+        @channel.isDirectMessageChannel
+        "chat.channel.info.settings"
+        "chat.channel.info.members"
+      }}
+      @models={{@channel.routeModels}}
+      class="chat-drawer-header__title"
+    >
+      <div class="chat-drawer-header__top-line">
+        <ChatChannelTitle @channel={{@channel}} />
+      </div>
+    </LinkTo>
+  {{else}}
+    <div
+      role="button"
+      {{on "click" @drawerActions.toggleExpand}}
+      class="chat-drawer-header__title"
+    >
+      <div class="chat-drawer-header__top-line">
+        <ChatChannelTitle @channel={{@channel}}>
+          {{#if @channel.currentUserMembership.unreadCount}}
+            <span class="chat-unread-count">
+              {{@channel.currentUserMembership.unreadCount}}
+            </span>
+          {{/if}}
+        </ChatChannelTitle>
+      </div>
+    </div>
+  {{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.js
new file mode 100644
index 00000000000..f7c3c5152d6
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/channel-title.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerChannelHeaderTitle extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/close-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/close-button.hbs
new file mode 100644
index 00000000000..2c8d97aa0ca
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/close-button.hbs
@@ -0,0 +1,6 @@
+<DButton
+  @icon="times"
+  @action={{@close}}
+  @title="chat.close"
+  @class="btn-flat btn-link chat-drawer-header__close-btn"
+/>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.hbs
new file mode 100644
index 00000000000..9c607d7982b
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.hbs
@@ -0,0 +1,8 @@
+{{#if this.chatStateManager.isDrawerExpanded}}
+  <DButton
+    @icon="discourse-expand"
+    class="btn-flat btn-link chat-drawer-header__full-screen-btn"
+    @title={{"chat.open_full_page"}}
+    @action={{@openInFullPage}}
+  />
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.js
new file mode 100644
index 00000000000..99ad4c2927d
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/full-page-button.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeaderFullPageButton extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.hbs
new file mode 100644
index 00000000000..6da5ccc2ef9
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.hbs
@@ -0,0 +1,7 @@
+{{#if this.chatStateManager.isDrawerExpanded}}
+  <div class="chat-drawer-header__left-actions">
+    <div class="chat-drawer-header__top-line">
+      <ChatDrawer::Header::BackLink />
+    </div>
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.js
new file mode 100644
index 00000000000..13f45c7507f
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeaderLeftActions extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs
new file mode 100644
index 00000000000..38ad3860de1
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs
@@ -0,0 +1,11 @@
+<div class="chat-drawer-header__right-actions">
+  <div class="chat-drawer-header__top-line">
+    <ChatDrawer::Header::FullPageButton
+      @openInFullPage={{@drawerActions.openInFullPage}}
+    />
+    <ChatDrawer::Header::ToggleExpandButton
+      @toggleExpand={{@drawerActions.toggleExpand}}
+    />
+    <ChatDrawer::Header::CloseButton @close={{@drawerActions.close}} />
+  </div>
+</div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.js
new file mode 100644
index 00000000000..1e61355c881
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeaderRightActions extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/title.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/title.hbs
new file mode 100644
index 00000000000..544448310b3
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/title.hbs
@@ -0,0 +1,5 @@
+<span class="chat-drawer-header__title">
+  <div class="chat-drawer-header__top-line">
+    {{i18n @title}}
+  </div>
+</span>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
new file mode 100644
index 00000000000..9514aeb96b7
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
@@ -0,0 +1,10 @@
+<DButton
+  @icon={{if
+    this.chatStateManager.isDrawerExpanded
+    "angle-double-down"
+    "angle-double-up"
+  }}
+  @class="btn-flat btn-link chat-drawer-header__expand-btn"
+  @action={{@toggleExpand}}
+  @title="chat.collapse"
+/>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.js
new file mode 100644
index 00000000000..39a19c11777
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeaderToggleExpandButton extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs
new file mode 100644
index 00000000000..4f44d5f9453
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs
@@ -0,0 +1,10 @@
+<ChatDrawer::Header>
+  <ChatDrawer::Header::Title @title="chat.heading" />
+  <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />
+</ChatDrawer::Header>
+
+{{#if this.chatStateManager.isDrawerExpanded}}
+  <div class="chat-drawer-content">
+    <ChannelsList />
+  </div>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.js
new file mode 100644
index 00000000000..c6cab84947a
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.js
@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerIndex extends Component {
+  @service chatStateManager;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
index 972814fd1ab..a3e0b689e85 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs
@@ -81,7 +81,6 @@
         @afterReactionAdded={{action "reStickScrollIfNeeded"}}
         @isHovered={{eq message.id this.hoveredMessageId}}
         @onHoverMessage={{action "onHoverMessage"}}
-        @onSwitchChannel={{this.onSwitchChannel}}
         @resendStagedMessage={{this.resendStagedMessage}}
       />
     {{/each}}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
index 6cf2c81b3d5..ae32d91d2cf 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-live-pane.js
@@ -45,7 +45,6 @@ export default Component.extend({
   loadingMorePast: false,
   loadingMoreFuture: false,
   hoveredMessageId: null,
-  onSwitchChannel: null,
 
   allPastMessagesLoaded: false,
   sendingLoading: false,
@@ -993,57 +992,58 @@ export default Component.extend({
     }
 
     this.set("_nextStagedMessageId", this._nextStagedMessageId + 1);
-    const cooked = this.cook(message);
-    const stagedId = this._nextStagedMessageId;
-    let data = {
-      message,
-      cooked,
-      staged_id: stagedId,
-      upload_ids: uploads.map((upload) => upload.id),
-    };
-    if (this.replyToMsg) {
-      data.in_reply_to_id = this.replyToMsg.id;
-    }
+    return this.chat.loadCookFunction(this.site.categories).then((cook) => {
+      const cooked = cook(message);
+      const stagedId = this._nextStagedMessageId;
+      let data = {
+        message,
+        cooked,
+        staged_id: stagedId,
+        upload_ids: uploads.map((upload) => upload.id),
+      };
+      if (this.replyToMsg) {
+        data.in_reply_to_id = this.replyToMsg.id;
+      }
 
-    // Start ajax request but don't return here, we want to stage the message instantly when all messages are loaded.
-    // Otherwise, we'll fetch latest and scroll to the one we just created.
-    // Return a resolved promise below.
-    const msgCreationPromise = this.chatApi
-      .sendMessage(this.chatChannel.id, data)
-      .catch((error) => {
-        this._onSendError(data.staged_id, error);
-      })
-      .finally(() => {
-        if (this._selfDeleted) {
-          return;
-        }
-        this.set("sendingLoading", false);
-      });
+      // Start ajax request but don't return here, we want to stage the message instantly when all messages are loaded.
+      // Otherwise, we'll fetch latest and scroll to the one we just created.
+      // Return a resolved promise below.
+      const msgCreationPromise = this.chatApi
+        .sendMessage(this.chatChannel.id, data)
+        .catch((error) => {
+          this._onSendError(data.staged_id, error);
+        })
+        .finally(() => {
+          if (this._selfDeleted) {
+            return;
+          }
+          this.set("sendingLoading", false);
+        });
 
-    if (this.details?.can_load_more_future) {
-      msgCreationPromise.then(() => this._fetchAndScrollToLatest());
-    } else {
-      const stagedMessage = this._prepareSingleMessage(
-        // We need to add the user and created at for presentation of staged message
-        {
-          message,
-          cooked,
-          stagedId,
-          uploads: cloneJSON(uploads),
-          staged: true,
-          user: this.currentUser,
-          in_reply_to: this.replyToMsg,
-          created_at: new Date(),
-        },
-        this.messages[this.messages.length - 1]
-      );
-      this.messages.pushObject(stagedMessage);
-      this._stickScrollToBottom();
-    }
+      if (this.details?.can_load_more_future) {
+        msgCreationPromise.then(() => this._fetchAndScrollToLatest());
+      } else {
+        const stagedMessage = this._prepareSingleMessage(
+          // We need to add the user and created at for presentation of staged message
+          {
+            message,
+            cooked,
+            stagedId,
+            uploads: cloneJSON(uploads),
+            staged: true,
+            user: this.currentUser,
+            in_reply_to: this.replyToMsg,
+            created_at: new Date(),
+          },
+          this.messages[this.messages.length - 1]
+        );
+        this.messages.pushObject(stagedMessage);
+        this._stickScrollToBottom();
+      }
 
-    this._resetAfterSend();
-    this.appEvents.trigger("chat-composer:reply-to-set", null);
-    return Promise.resolve();
+      this._resetAfterSend();
+      this.appEvents.trigger("chat-composer:reply-to-set", null);
+    });
   },
 
   async _upsertChannelWithMessage(channel, message, uploads) {
@@ -1063,7 +1063,7 @@ export default Component.extend({
           upload_ids: (uploads || []).mapBy("id"),
         },
       }).then(() => {
-        this.onSwitchChannel(c);
+        this.router.transitionTo("chat.channel", "-", c.id);
       })
     );
   },
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.js b/plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.js
index 7d404060d25..86a2dd8c4c1 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message-move-to-channel-modal-inner.js
@@ -12,6 +12,7 @@ export default class MoveToChannelModalInner extends Component {
   @service chatApi;
   @service router;
   @service chatChannelsManager;
+
   tagName = "";
   sourceChannel = null;
   destinationChannelId = null;
@@ -40,7 +41,9 @@ export default class MoveToChannelModalInner extends Component {
         destination_channel_id: this.destinationChannelId,
       })
       .then((response) => {
-        return this.chat.openChannelAtMessage(
+        this.router.transitionTo(
+          "chat.channel.near-message",
+          "-",
           response.destination_channel_id,
           response.first_moved_message_id
         );
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-message.js b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
index 17ce8d8f415..520486c29fb 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-message.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-message.js
@@ -609,7 +609,7 @@ export default Component.extend({
         return this.chatChannelsManager
           .getChannel(this.chatChannel.id)
           .then((reactedChannel) => {
-            this.onSwitchChannel(reactedChannel);
+            this.router.transitionTo("chat.channel", "-", reactedChannel.id);
           });
       }
     });
diff --git a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
index 66cd36bcee9..60ce768975e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
+++ b/plugins/chat/assets/javascripts/discourse/components/direct-message-creator.js
@@ -23,7 +23,6 @@ export default Component.extend({
   router: service(),
   chatStateManager: service(),
   isLoading: false,
-  onSwitchChannel: null,
 
   init() {
     this._super(...arguments);
diff --git a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
index eeb9687dff4..33661579b6c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.hbs
@@ -2,7 +2,6 @@
   <ChatLivePane
     @chatChannel={{this.chat.activeChannel}}
     @onBackClick={{action "navigateToIndex"}}
-    @onSwitchChannel={{action "switchChannel"}}
     @targetMessageId={{readonly @targetMessageId}}
   />
 {{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.js b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.js
index a736c4e9011..1fb7ad3c57e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/full-page-chat.js
+++ b/plugins/chat/assets/javascripts/discourse/components/full-page-chat.js
@@ -76,9 +76,4 @@ export default Component.extend({
   navigateToIndex() {
     this.router.transitionTo("chat.index");
   },
-
-  @action
-  switchChannel(channel) {
-    return this.chat.openChannel(channel);
-  },
 });
diff --git a/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.hbs b/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.hbs
index 9f1adaff508..c85ded54564 100644
--- a/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.hbs
@@ -1,7 +1,3 @@
 {{#if this.isDisplayed}}
-  <ChannelsList
-    @onSelect={{action "switchChannel"}}
-    @toggleSection={{this.toggleSection}}
-    @inSidebar={{true}}
-  />
+  <ChannelsList @toggleSection={{this.toggleSection}} @inSidebar={{true}} />
 {{/if}}
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.js b/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.js
index 68884a01910..d3d4fd515f7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.js
+++ b/plugins/chat/assets/javascripts/discourse/components/sidebar-channels.js
@@ -1,10 +1,11 @@
 import Component from "@ember/component";
-import { action, computed } from "@ember/object";
+import { computed } from "@ember/object";
 import { inject as service } from "@ember/service";
 
 export default class SidebarChannels extends Component {
   @service chat;
   @service router;
+
   tagName = "";
   toggleSection = null;
 
@@ -12,9 +13,4 @@ export default class SidebarChannels extends Component {
   get isDisplayed() {
     return this.chat.userCanChat;
   }
-
-  @action
-  switchChannel(channel) {
-    this.chat.openChannel(channel);
-  }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js b/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js
index 8d9f7d40ca3..6a256452363 100644
--- a/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js
+++ b/plugins/chat/assets/javascripts/discourse/components/user-card-chat-button.js
@@ -4,13 +4,15 @@ import { inject as service } from "@ember/service";
 
 export default class UserCardChatButton extends Component {
   @service chat;
+  @service appEvents;
+  @service router;
 
   @action
   startChatting() {
     this.chat
       .upsertDmChannelForUsernames([this.user.username])
       .then((chatChannel) => {
-        this.chat.openChannel(chatChannel);
+        this.router.transitionTo("chat.channel", ...chatChannel.routeModels);
         this.appEvents.trigger("card:close");
       });
   }
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-toggle.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-toggle.js
index e3dfaf5a613..a9cba248a8e 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-toggle.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-toggle.js
@@ -7,12 +7,13 @@ export default class ChatChannelToggleController extends Controller.extend(
   ModalFunctionality
 ) {
   @service chat;
+  @service router;
 
   chatChannel = null;
 
   @action
   channelStatusChanged(channel) {
     this.send("closeModal");
-    this.chat.openChannel(channel);
+    this.router.transitionTo("chat.channel", ...channel.routeModels);
   }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
index a92a3a2e4f2..734778d843b 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel.js
@@ -1,5 +1,4 @@
 import Controller from "@ember/controller";
-import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
 export default class ChatChannelController extends Controller {
@@ -9,9 +8,4 @@ export default class ChatChannelController extends Controller {
 
   // Backwards-compatibility
   queryParams = ["messageId"];
-
-  @action
-  switchChannel(channel) {
-    this.chat.openChannel(channel);
-  }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-draft-channel.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-draft-channel.js
index 162d6a72ef7..2f7f827d27f 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-draft-channel.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-draft-channel.js
@@ -1,12 +1,6 @@
 import Controller from "@ember/controller";
-import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
 export default class ChatDraftChannelController extends Controller {
   @service chat;
-
-  @action
-  onSwitchChannel(channel) {
-    return this.chat.openChannel(channel);
-  }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-index.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-index.js
index fd2b50ff962..4a8fb8178cf 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-index.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-index.js
@@ -1,12 +1,6 @@
 import Controller from "@ember/controller";
-import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 
 export default class ChatIndexController extends Controller {
   @service chat;
-
-  @action
-  selectChannel(channel) {
-    return this.chat.openChannel(channel);
-  }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/controllers/create-channel.js b/plugins/chat/assets/javascripts/discourse/controllers/create-channel.js
index 898dc21d2db..0b6328bd886 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/create-channel.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/create-channel.js
@@ -25,6 +25,7 @@ export default class CreateChannelController extends Controller.extend(
   @service dialog;
   @service chatChannelsManager;
   @service chatApi;
+  @service router;
 
   category = null;
   categoryId = null;
@@ -83,7 +84,7 @@ export default class CreateChannelController extends Controller.extend(
       .then((channel) => {
         this.send("closeModal");
         this.chatChannelsManager.follow(channel);
-        this.chat.openChannel(channel);
+        this.router.transitionTo("chat.channel", ...channel.routeModels);
       })
       .catch((e) => {
         this.flash(e.jqXHR.responseJSON.errors[0], "error");
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat-index.js b/plugins/chat/assets/javascripts/discourse/routes/chat-index.js
index 027f21b4672..e5d2fcf802e 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat-index.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat-index.js
@@ -16,7 +16,7 @@ export default class ChatIndexRoute extends DiscourseRoute {
     const id = this.chat.getIdealFirstChannelId();
     if (id) {
       return this.chatChannelsManager.find(id).then((c) => {
-        return this.chat.openChannel(c);
+        return this.router.transitionTo("chat.channel", ...c.routeModels);
       });
     } else {
       return this.router.transitionTo("chat.browse");
diff --git a/plugins/chat/assets/javascripts/discourse/routes/chat.js b/plugins/chat/assets/javascripts/discourse/routes/chat.js
index 10538625161..28f4b8cf33c 100644
--- a/plugins/chat/assets/javascripts/discourse/routes/chat.js
+++ b/plugins/chat/assets/javascripts/discourse/routes/chat.js
@@ -37,17 +37,17 @@ export default class ChatRoute extends DiscourseRoute {
     ) {
       transition.abort();
 
-      let URL = transition.intent.url;
+      let url = transition.intent.url;
       if (transition.targetName.startsWith("chat.channel")) {
-        URL ??= this.router.urlFor(
+        url ??= this.router.urlFor(
           transition.targetName,
           ...transition.intent.contexts
         );
       } else {
-        URL ??= this.router.urlFor(transition.targetName);
+        url ??= this.router.urlFor(transition.targetName);
       }
 
-      this.appEvents.trigger("chat:open-url", URL);
+      this.appEvents.trigger("chat:open-url", url);
       return;
     }
 
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js b/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js
new file mode 100644
index 00000000000..0ddf16a033c
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-drawer-router.js
@@ -0,0 +1,41 @@
+import Service, { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+import ChatDrawerDraftChannel from "discourse/plugins/chat/discourse/components/chat-drawer/draft-channel";
+import ChatDrawerChannel from "discourse/plugins/chat/discourse/components/chat-drawer/channel";
+import ChatDrawerIndex from "discourse/plugins/chat/discourse/components/chat-drawer/index";
+
+const COMPONENTS_MAP = {
+  "chat.draft-channel": { name: ChatDrawerDraftChannel },
+  "chat.channel": { name: ChatDrawerChannel },
+  chat: { name: ChatDrawerIndex },
+  "chat.channel.near-message": {
+    name: ChatDrawerChannel,
+    extractParams: (route) => {
+      return {
+        channelId: route.parent.params.channelId,
+        messageId: route.params.messageId,
+      };
+    },
+  },
+  "chat.channel-legacy": {
+    name: ChatDrawerChannel,
+    extractParams: (route) => {
+      return {
+        channelId: route.params.channelId,
+        messageId: route.queryParams.messageId,
+      };
+    },
+  },
+};
+
+export default class ChatDrawerRouter extends Service {
+  @service router;
+  @tracked component = null;
+  @tracked params = null;
+
+  stateFor(route) {
+    const component = COMPONENTS_MAP[route.name];
+    this.params = component?.extractParams?.(route) || route.params;
+    this.component = component?.name || ChatDrawerIndex;
+  }
+}
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js
index 9062f743932..466f9eb1da1 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-state-manager.js
@@ -42,12 +42,12 @@ export default class ChatStateManager extends Service {
     this.set("isSidePanelExpanded", false);
   }
 
-  didOpenDrawer(URL = null) {
+  didOpenDrawer(url = null) {
     this.set("isDrawerActive", true);
     this.set("isDrawerExpanded", true);
 
-    if (URL) {
-      this.storeChatURL(URL);
+    if (url) {
+      this.storeChatURL(url);
     }
 
     this.chat.updatePresence();
@@ -99,12 +99,12 @@ export default class ChatStateManager extends Service {
     return this.isFullPageActive || this.isDrawerActive;
   }
 
-  storeAppURL(URL = null) {
-    this._appURL = URL || this.router.currentURL;
+  storeAppURL(url = null) {
+    this._appURL = url || this.router.currentURL;
   }
 
-  storeChatURL(URL = null) {
-    this._chatURL = URL || this.router.currentURL;
+  storeChatURL(url = null) {
+    this._chatURL = url || this.router.currentURL;
   }
 
   get lastKnownAppURL() {
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat.js b/plugins/chat/assets/javascripts/discourse/services/chat.js
index a0d736a983b..d5d1cbcd74e 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat.js
@@ -188,7 +188,10 @@ export default class Chat extends Service {
       currentList[currentChannelIndex + (directionUp ? -1 : 1)];
     if (nextChannelInSameList) {
       // You're navigating in the same list of channels, just use index +- 1
-      return this.openChannel(nextChannelInSameList);
+      return this.router.transitionTo(
+        "chat.channel",
+        ...nextChannelInSameList.routeModels
+      );
     }
 
     // You need to go to the next list of channels, if it exists.
@@ -198,7 +201,10 @@ export default class Chat extends Service {
       : nextList[0];
 
     if (nextChannel.id !== activeChannel.id) {
-      return this.openChannel(nextChannel);
+      return this.router.transitionTo(
+        "chat.channel",
+        ...nextChannel.routeModels
+      );
     }
   }
 
@@ -262,57 +268,14 @@ export default class Chat extends Service {
     );
   }
 
-  async openChannelAtMessage(channelId, messageId = null) {
-    return this.chatChannelsManager.find(channelId).then((channel) => {
-      return this._openFoundChannelAtMessage(channel, messageId);
-    });
-  }
-
-  async openChannel(channel) {
-    return this._openFoundChannelAtMessage(channel);
-  }
-
-  async _openFoundChannelAtMessage(channel, messageId = null) {
-    if (
-      (this.router.currentRouteName === "chat.channel" ||
-        this.router.currentRouteName === "chat.channel.near-message") &&
-      this.activeChannel?.id === channel.id
-    ) {
-      this.activeChannel = channel;
-      this._fireOpenMessageAppEvent(messageId);
-      return Promise.resolve();
-    }
-
-    this.activeChannel = channel;
-
-    if (
-      this.chatStateManager.isFullPageActive ||
-      this.site.mobileView ||
-      this.chatStateManager.isFullPagePreferred
-    ) {
-      if (messageId) {
-        return this.router.transitionTo(
+  _fireOpenFloatAppEvent(channel, messageId = null) {
+    messageId
+      ? this.router.transitionTo(
           "chat.channel.near-message",
           ...channel.routeModels,
           messageId
-        );
-      } else {
-        return this.router.transitionTo("chat.channel", ...channel.routeModels);
-      }
-    } else {
-      this._fireOpenFloatAppEvent(channel, messageId);
-      return Promise.resolve();
-    }
-  }
-
-  _fireOpenFloatAppEvent(channel, messageId = null) {
-    messageId
-      ? this.appEvents.trigger(
-          "chat:open-channel-at-message",
-          channel,
-          messageId
         )
-      : this.appEvents.trigger("chat:open-channel", channel);
+      : this.router.transitionTo("chat.channel", ...channel.routeModels);
   }
 
   _fireOpenMessageAppEvent(messageId) {
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-draft-channel.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-draft-channel.hbs
index 858044e3763..8d692797dc0 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-draft-channel.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-draft-channel.hbs
@@ -1 +1 @@
-<ChatDraftChannelScreen @onSwitchChannel={{action "onSwitchChannel"}} />
\ No newline at end of file
+<ChatDraftChannelScreen />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/templates/chat-index.hbs b/plugins/chat/assets/javascripts/discourse/templates/chat-index.hbs
index 0d18ba932b5..ec6c915d310 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/chat-index.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/chat-index.hbs
@@ -1 +1 @@
-<ChannelsList @onSelect={{action "selectChannel"}} />
\ No newline at end of file
+<ChannelsList />
\ No newline at end of file