diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-api.js b/plugins/chat/assets/javascripts/discourse/services/chat-api.js
index 5bc76ee7fb6..b4f77d33624 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-api.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-api.js
@@ -322,8 +322,14 @@ export default class ChatApi extends Service {
    * @param {number} channelId - The ID of the channel.
    * @returns {Promise}
    */
-  leaveChannel(channelId) {
-    return this.#deleteRequest(`/channels/${channelId}/memberships/me`);
+  async leaveChannel(channelId) {
+    await this.#deleteRequest(`/channels/${channelId}/memberships/me`);
+    const channel = await this.chatChannelsManager.find(channelId, {
+      fetchIfNotFound: false,
+    });
+    if (channel) {
+      this.chatChannelsManager.remove(channel);
+    }
   }
 
   /**
diff --git a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
index 37a81e7bc5b..8cf86fe5aa2 100644
--- a/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-channel-row.scss
@@ -23,19 +23,19 @@
     &.active {
       background: var(--primary-very-low);
     }
+  }
 
-    &.can-leave:hover {
-      .toggle-channel-membership-button.-leave {
-        display: block;
+  &.can-leave:hover {
+    .toggle-channel-membership-button.-leave {
+      display: block;
 
-        > * {
-          pointer-events: auto;
-        }
+      > * {
+        pointer-events: auto;
       }
+    }
 
-      .chat-channel__metadata {
-        display: none;
-      }
+    .chat-channel__metadata {
+      display: none;
     }
   }
 
diff --git a/plugins/chat/spec/system/drawer/index_spec.rb b/plugins/chat/spec/system/drawer/index_spec.rb
new file mode 100644
index 00000000000..ab015798320
--- /dev/null
+++ b/plugins/chat/spec/system/drawer/index_spec.rb
@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+RSpec.describe "Drawer - index", type: :system do
+  fab!(:current_user) { Fabricate(:user) }
+
+  let(:drawer_page) { PageObjects::Pages::ChatDrawer.new }
+
+  before do
+    chat_system_bootstrap
+    sign_in(current_user)
+  end
+
+  it "can leave a direct message" do
+    channel = Fabricate(:direct_message_channel, users: [current_user])
+    row = PageObjects::Components::Chat::ChannelRow.new(channel.id)
+
+    drawer_page.visit_index
+
+    expect(row).to exist
+
+    row.leave
+
+    expect(row).to be_non_existent
+  end
+
+  it "can leave a group message" do
+    channel =
+      Fabricate(
+        :direct_message_channel,
+        group: true,
+        users: [current_user, Fabricate(:user), Fabricate(:user)],
+      )
+    row = PageObjects::Components::Chat::ChannelRow.new(channel.id)
+
+    drawer_page.visit_index
+
+    expect(row).to exist
+
+    row.leave
+
+    expect(row).to be_non_existent
+  end
+end
diff --git a/plugins/chat/spec/system/page_objects/chat/components/channel_row.rb b/plugins/chat/spec/system/page_objects/chat/components/channel_row.rb
new file mode 100644
index 00000000000..b3d16f948e8
--- /dev/null
+++ b/plugins/chat/spec/system/page_objects/chat/components/channel_row.rb
@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    module Chat
+      class ChannelRow < PageObjects::Components::Base
+        SELECTOR = ".chat-channel-row"
+
+        attr_reader :id
+
+        def initialize(id)
+          @id = id
+        end
+
+        def non_existent?(**args)
+          exists?(**args, does_not_exist: true)
+        end
+
+        def exists?(**args)
+          selector = build_selector(**args)
+          selector_method = args[:does_not_exist] ? :has_no_selector? : :has_selector?
+          page.send(selector_method, selector)
+        end
+
+        def leave
+          component(class: ".can-leave").hover
+          btn = component.find(".chat-channel-leave-btn", visible: :all)
+          # style manipulation is necessary to have it working with @media(hover: hover) on CI
+          page.execute_script(
+            "document.querySelector('#{build_selector} .chat-channel-leave-btn').style.display = 'block';",
+          )
+          btn.click
+          page.execute_script(
+            "document.querySelector('#{build_selector} .chat-channel-leave-btn').style.display = '';",
+          )
+        end
+
+        def component(**args)
+          find(build_selector(**args))
+        end
+
+        private
+
+        def build_selector(**args)
+          selector = SELECTOR
+          selector += args[:class] if args[:class]
+          selector += "[data-chat-channel-id=\"#{self.id}\"]" if self.id
+          selector
+        end
+      end
+    end
+  end
+end
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 a9d20f84c9e..52617976ddf 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
@@ -24,6 +24,16 @@ module PageObjects
         find("#{VISIBLE_DRAWER} .c-navbar__back-button").click
       end
 
+      def visit_index
+        visit("/")
+        PageObjects::Pages::Chat.new.open_from_header
+      end
+
+      def visit_channel(channel)
+        visit_index
+        open_channel(channel)
+      end
+
       def open_channel(channel)
         channel_index.open_channel(channel)
         has_no_css?(".chat-skeleton")