diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-card-section.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-card-section.gjs
index 519f8e16cfd..0cbf46b8015 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-area-card-section.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-card-section.gjs
@@ -1,7 +1,8 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
-import DButton from "discourse/components/d-button";
+import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 
 export default class AdminConfigAreaCardSection extends Component {
@@ -13,21 +14,25 @@ export default class AdminConfigAreaCardSection extends Component {
 
   @action
   toggleSectionDisplay() {
+    if (!this.args.collapsable) {
+      return;
+    }
     this.collapsed = !this.collapsed;
   }
 
   <template>
     <section class="admin-config-area-card-section" ...attributes>
-      <div class="admin-config-area-card-section__header-wrapper">
+      <div
+        class={{concatClass
+          "admin-config-area-card-section__header-wrapper"
+          (if @collapsable "collapsable")
+        }}
+        role="button"
+        {{on "click" this.toggleSectionDisplay}}
+      >
         <h4 class="admin-config-area-card-section__title">{{@heading}}</h4>
         {{#if @collapsable}}
-          <DButton
-            @title="sidebar.toggle_section"
-            @action={{this.toggleSectionDisplay}}
-            class="admin-config-area-card-section__toggle-button btn-transparent"
-          >
-            {{icon this.headerCaretIcon}}
-          </DButton>
+          {{icon this.headerCaretIcon}}
         {{/if}}
       </div>
       {{#unless this.collapsed}}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-section-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-section-test.gjs
index 265dafffb4a..6988727a0be 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-section-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/admin-config-area-card-section-test.gjs
@@ -8,7 +8,7 @@ module(
   function (hooks) {
     setupRenderingTest(hooks);
 
-    test("renders admin config area card section without toggle button", async function (assert) {
+    test("renders admin config area card section without toggle icon", async function (assert) {
       await render(
         <template>
           <AdminConfigAreaCardSection @heading="test heading"><:content
@@ -21,11 +21,14 @@ module(
         .hasText("test heading");
       assert.dom(".admin-config-area-card-section__content").exists();
       assert
-        .dom(".admin-config-area-card-section__toggle-button")
+        .dom(".admin-config-area-card-section__header-wrapper.collapsable")
+        .doesNotExist();
+      assert
+        .dom(".admin-config-area-card-section__header-wrapper svg")
         .doesNotExist();
     });
 
-    test("renders admin config area card section with toggle button", async function (assert) {
+    test("renders admin config area card section with toggle icon", async function (assert) {
       await render(
         <template>
           <AdminConfigAreaCardSection
@@ -39,16 +42,25 @@ module(
         .dom(".admin-config-area-card-section__title")
         .hasText("test heading");
       assert.dom(".admin-config-area-card-section__content").hasText("test");
-      assert.dom(".admin-config-area-card-section__toggle-button").exists();
+      assert
+        .dom(".admin-config-area-card-section__header-wrapper svg")
+        .exists();
+      assert
+        .dom(".admin-config-area-card-section__header-wrapper.collapsable")
+        .exists();
 
-      await click(".admin-config-area-card-section__toggle-button");
+      await click(
+        ".admin-config-area-card-section__header-wrapper.collapsable"
+      );
       assert.dom(".admin-config-area-card-section__content").doesNotExist();
 
-      await click(".admin-config-area-card-section__toggle-button");
+      await click(
+        ".admin-config-area-card-section__header-wrapper.collapsable"
+      );
       assert.dom(".admin-config-area-card-section__content").exists();
     });
 
-    test("renders admin config area card section with toggle button and collapsed by default", async function (assert) {
+    test("renders admin config area card section with toggle icon and collapsed by default", async function (assert) {
       await render(
         <template>
           <AdminConfigAreaCardSection
@@ -60,7 +72,9 @@ module(
       );
 
       assert.dom(".admin-config-area-card-section__title").exists();
-      assert.dom(".admin-config-area-card-section__toggle-button").exists();
+      assert
+        .dom(".admin-config-area-card-section__header-wrapper svg")
+        .exists();
       assert.dom(".admin-config-area-card-section__content").doesNotExist();
     });
   }
diff --git a/app/assets/stylesheets/admin/admin_config_area.scss b/app/assets/stylesheets/admin/admin_config_area.scss
index 053f639d8a2..56d3af890ba 100644
--- a/app/assets/stylesheets/admin/admin_config_area.scss
+++ b/app/assets/stylesheets/admin/admin_config_area.scss
@@ -129,8 +129,9 @@
   flex-wrap: nowrap;
   gap: var(--space-4);
   flex-direction: column;
-  width: 100%;
+  width: calc(100% - 1em);
   border: 1px solid var(--primary-low);
+  padding: 0.5em;
 
   @media (max-width: $mobile-breakpoint) {
     flex-direction: column;
@@ -140,7 +141,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-left: 0.5em;
+
+    &.collapsable {
+      cursor: pointer;
+    }
   }
 
   &__title {
diff --git a/spec/system/page_objects/components/admin_branding_logo_form.rb b/spec/system/page_objects/components/admin_branding_logo_form.rb
index c1ce73e8799..57ef6ff8dba 100644
--- a/spec/system/page_objects/components/admin_branding_logo_form.rb
+++ b/spec/system/page_objects/components/admin_branding_logo_form.rb
@@ -32,19 +32,15 @@ module PageObjects
       end
 
       def expand_mobile_section
-        find(
-          ".admin-logo-form__mobile-section .admin-config-area-card-section__toggle-button",
-        ).click
+        find(".admin-logo-form__mobile-section .collapsable").click
       end
 
       def expand_email_section
-        find(".admin-logo-form__email-section .admin-config-area-card-section__toggle-button").click
+        find(".admin-logo-form__email-section .collapsable").click
       end
 
       def expand_social_media_section
-        find(
-          ".admin-logo-form__social-media-section .admin-config-area-card-section__toggle-button",
-        ).click
+        find(".admin-logo-form__social-media-section .collapsable").click
       end
 
       def submit