diff --git a/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs b/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
new file mode 100644
index 00000000000..b497710601f
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/composer-tip-close-button.hbs
@@ -0,0 +1,7 @@
+<DButton
+  @action={{@action}}
+  @icon="times"
+  @label="composer.esc"
+  @ariaLabel="composer.esc_label"
+  class="btn-flat close"
+/>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
index dd74f7f21a3..f6b7362925b 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/dominating-topic.hbs
@@ -1,12 +1,4 @@
-<a
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
 
 {{html-safe this.message.body}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/composer/education.hbs b/app/assets/javascripts/discourse/app/templates/composer/education.hbs
index 93a4610ed3b..550fbc15b39 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/education.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/education.hbs
@@ -1,12 +1,4 @@
-<a
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
 
 {{#if this.message.title}}
   <h3>{{this.message.title}}</h3>
diff --git a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
index 68e961966ba..cbf82f6ede6 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/get-a-room.hbs
@@ -1,12 +1,4 @@
-<a
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
 
 {{html-safe this.message.body}}
 
diff --git a/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs b/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
index 1185a6f0ec8..501e0991e8b 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/group-mentioned.hbs
@@ -1,11 +1,5 @@
-<a
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
 
-{{html-safe this.message.body}}
\ No newline at end of file
+<p>
+  {{html-safe this.message.body}}
+</p>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
index 55be20cad92..7eba75bfb36 100644
--- a/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer/similar-topics.hbs
@@ -1,12 +1,4 @@
-<a
-  href
-  {{on "click" (fn this.closeMessage this.message)}}
-  class="close"
-  aria-label={{i18n "composer.esc_label"}}
->
-  {{i18n "composer.esc"}}
-  {{d-icon "times"}}
-</a>
+<ComposerTipCloseButton @action={{fn this.closeMessage this.message}} />
 
 <h3>{{i18n "composer.similar_topics"}}</h3>
 
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index d77e91064ce..a0bf894e6ef 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -92,6 +92,14 @@
   box-shadow: var(--shadow-dropdown);
   background: var(--highlight-bg);
 
+  > p,
+  h3 {
+    &:first-of-type {
+      margin-top: 0;
+      margin-right: 3em;
+    }
+  }
+
   &.urgent {
     background: var(--danger-low);
   }
@@ -105,10 +113,9 @@
     bottom: unset;
     padding: 2.25em 6em 2.5em 2.25em;
     p {
-      margin-top: 0;
       font-size: var(--font-up-1);
     }
-    button {
+    button:not(.close) {
       margin-top: 0.5em;
     }
   }
@@ -117,21 +124,27 @@
     margin-bottom: 10px;
   }
 
-  a.close {
-    display: flex;
+  .btn.close {
+    flex-direction: row-reverse;
     align-items: center;
     position: absolute;
-    right: 10px;
-    top: 10px;
-    color: var(--primary);
-    opacity: 0.5;
+    right: 0.67em;
+    top: 0.67em;
+    color: var(--primary-medium);
     font-size: var(--font-0);
     .d-icon {
+      color: currentColor;
       font-size: var(--font-up-1);
-      margin-left: 0.25em;
+      margin: 0 0 0 0.25em;
     }
-    &:hover {
-      opacity: 1;
+    .discourse-no-touch & {
+      &:active,
+      &:focus {
+        background: transparent;
+        .d-icon {
+          color: var(--primary);
+        }
+      }
     }
   }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index a65b5da7f9c..9c5fcf33355 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2353,7 +2353,7 @@ en:
       drafts_offline: "drafts offline"
       edit_conflict: "edit conflict"
       esc: "esc"
-      esc_label: "Click or press Esc to dismiss"
+      esc_label: "dismiss message"
       ok_proceed: "Ok, proceed"
 
       group_mentioned_limit: