diff --git a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js
index 35be0c97a41..82bc6c59b2e 100644
--- a/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js
+++ b/plugins/chat/assets/javascripts/discourse/controllers/chat-channel-edit-name-slug.js
@@ -46,7 +46,7 @@ export default class ChatChannelEditTitleController extends Controller.extend(
         slug: this.editedSlug || this.autoGeneratedSlug || this.model.slug,
       })
       .then((result) => {
-        this.model.set("title", result.channel.title);
+        this.model.title = result.channel.title;
         this.send("closeModal");
       })
       .catch(flashAjaxError(this));
diff --git a/plugins/chat/spec/system/channel_about_page_spec.rb b/plugins/chat/spec/system/channel_about_page_spec.rb
index a52666c850d..4cb8d3e229b 100644
--- a/plugins/chat/spec/system/channel_about_page_spec.rb
+++ b/plugins/chat/spec/system/channel_about_page_spec.rb
@@ -4,6 +4,7 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
   fab!(:channel_1) { Fabricate(:category_channel) }
 
   let(:chat_page) { PageObjects::Pages::Chat.new }
+  let(:chat_channel_about_page) { PageObjects::Pages::ChatChannelAbout.new }
 
   before { chat_system_bootstrap }
 
@@ -79,15 +80,16 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
 
     it "can edit name" do
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
 
-      expect(find(".chat-channel-edit-name-slug-modal__name-input").value).to eq(channel_1.title)
+      edit_modal = chat_channel_about_page.open_edit_modal
+
+      expect(edit_modal).to have_name_input(channel_1.title)
 
       name = "A new name"
-      find(".chat-channel-edit-name-slug-modal__name-input").fill_in(with: name)
-      find(".create").click
 
-      expect(page).to have_content(name)
+      edit_modal.fill_and_save_name(name)
+
+      expect(chat_channel_about_page).to have_name(name)
     end
 
     it "can edit description" do
@@ -108,30 +110,29 @@ RSpec.describe "Channel - Info - About page", type: :system, js: true do
 
     it "can edit slug" do
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
-
-      expect(find(".chat-channel-edit-name-slug-modal__slug-input").value).to eq(channel_1.slug)
+      edit_modal = chat_channel_about_page.open_edit_modal
 
       slug = "gonzo-slug"
-      find(".chat-channel-edit-name-slug-modal__slug-input").fill_in(with: slug)
-      find(".create").click
 
-      expect(page).to have_content(slug)
+      expect(edit_modal).to have_slug_input(channel_1.slug)
+
+      edit_modal.fill_and_save_slug(slug)
+
+      expect(chat_channel_about_page).to have_slug(slug)
     end
 
     it "can clear the slug to use the autogenerated version based on the name" do
       channel_1.update!(name: "test channel")
       chat_page.visit_channel_about(channel_1)
-      find(".edit-name-slug-btn").click
+      edit_modal = chat_channel_about_page.open_edit_modal
 
-      slug_input = find(".chat-channel-edit-name-slug-modal__slug-input")
-      expect(slug_input.value).to eq(channel_1.slug)
+      expect(edit_modal).to have_slug_input(channel_1.slug)
 
-      slug_input.fill_in(with: "")
-      wait_for_attribute(slug_input, :placeholder, "test-channel")
-      find(".create").click
+      edit_modal.fill_in_slug_input("")
+      edit_modal.wait_for_auto_generated_slug
+      edit_modal.save_changes
 
-      expect(page).to have_content("test-channel")
+      expect(chat_channel_about_page).to have_slug("test-channel")
     end
   end
 end
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb
new file mode 100644
index 00000000000..795893346a7
--- /dev/null
+++ b/plugins/chat/spec/system/page_objects/chat/chat_channel_about.rb
@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class ChatChannelAbout < PageObjects::Pages::Base
+      EDIT_MODAL_SELECTOR = ".chat-channel-edit-name-slug-modal"
+
+      def open_edit_modal
+        click_button(class: "edit-name-slug-btn")
+        find(EDIT_MODAL_SELECTOR) # wait for modal to appear
+        PageObjects::Modals::ChatChannelEdit.new
+      end
+
+      def has_slug?(slug)
+        page.has_css?(".channel-info-about-view__slug", text: slug)
+      end
+
+      def has_name?(name)
+        page.has_css?(".channel-info-about-view__name", text: name)
+      end
+    end
+  end
+end
diff --git a/plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb b/plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb
new file mode 100644
index 00000000000..d678db64485
--- /dev/null
+++ b/plugins/chat/spec/system/page_objects/modals/chat_edit_modal.rb
@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Modals
+    class ChatChannelEdit < PageObjects::Modals::Base
+      include SystemHelpers
+
+      EDIT_MODAL_SELECTOR = PageObjects::Pages::ChatChannelAbout::EDIT_MODAL_SELECTOR
+      SLUG_INPUT_SELECTOR = ".chat-channel-edit-name-slug-modal__slug-input"
+      NAME_INPUT_SELECTOR = ".chat-channel-edit-name-slug-modal__name-input"
+
+      def fill_in_slug(slug)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).fill_in(with: slug) }
+
+        self
+      end
+
+      def wait_for_auto_generated_slug
+        wait_for_attribute(page.find(SLUG_INPUT_SELECTOR), :placeholder, "test-channel")
+      end
+
+      def fill_in_slug_input(slug)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).fill_in(with: slug) }
+      end
+
+      def save_changes(successful: true)
+        within(EDIT_MODAL_SELECTOR) { click_button(I18n.t("js.save")) }
+
+        # ensures modal is closed after successfully saving
+        page.has_no_css?(EDIT_MODAL_SELECTOR) if successful
+      end
+
+      def fill_and_save_slug(slug)
+        fill_in_slug_input(slug)
+        save_changes
+        self
+      end
+
+      def fill_in_name_input(name)
+        within(EDIT_MODAL_SELECTOR) { find(NAME_INPUT_SELECTOR).fill_in(with: name) }
+      end
+
+      def fill_and_save_name(name)
+        fill_in_name_input(name)
+        save_changes
+        self
+      end
+
+      def has_slug_input?(value)
+        within(EDIT_MODAL_SELECTOR) { find(SLUG_INPUT_SELECTOR).value == value }
+      end
+
+      def has_name_input?(value)
+        within(EDIT_MODAL_SELECTOR) { find(NAME_INPUT_SELECTOR).value == value }
+      end
+    end
+  end
+end