diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
index fa5698b639d..162fdcb3e52 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.hbs
@@ -1,11 +1,14 @@
 {{#if @buttons.length}}
-  <DButton
-    @disabled={{@isDisabled}}
-    @class="chat-composer-dropdown__trigger-btn btn-flat btn-icon"
-    @title="chat.composer.toggle_toolbar"
-    @icon={{if @hasActivePanel "times" "plus"}}
-    @action={{this.toggleExpand}}
+  <Chat::Composer::Button
+    {{on "click" this.toggleExpand}}
+    @icon="plus"
+    title={{i18n "chat.composer.toggle_toolbar"}}
+    disabled={{@isDisabled}}
     {{did-insert this.setupTrigger}}
+    class={{concat-class
+      "chat-composer-dropdown__trigger-btn"
+      (if @hasActivePanel "has-active-panel")
+    }}
   />
 
   {{#if this.isExpanded}}
@@ -22,7 +25,7 @@
               button.id
             }}
             @icon={{button.icon}}
-            @action={{(fn this.onButtonClick button)}}
+            @action={{fn this.onButtonClick button}}
             @label={{button.label}}
           />
         </li>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
index 3b401ab1ea9..57ec49e8b8e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.hbs
@@ -1,4 +1,6 @@
 {{! template-lint-disable no-down-event-binding }}
+{{! template-lint-disable no-invalid-interactive }}
+
 <div class="chat-composer__wrapper">
   {{#if this.shouldRenderMessageDetails}}
     <ChatComposerMessageDetails
@@ -40,7 +42,10 @@
           @onCloseActivePanel={{this.chatEmojiPickerManager.close}}
         />
 
-        <div class="chat-composer__input-container">
+        <div
+          class="chat-composer__input-container"
+          {{on "click" this.focusTextarea}}
+        >
           <DTextarea
             id={{this.composerId}}
             value={{readonly this.currentMessage.message}}
@@ -62,12 +67,12 @@
           />
         </div>
 
-        <DButton
-          @action={{this.onSend}}
+        <Chat::Composer::Button
+          {{on "click" this.onSend}}
           @icon="paper-plane"
-          class="chat-composer__send-btn icon-only"
-          @title="chat.composer.send"
-          @disabled={{or this.disabled (not this.sendEnabled)}}
+          class="chat-composer__send-btn"
+          title="chat.composer.send"
+          disabled={{or this.disabled (not this.sendEnabled)}}
           tabindex={{if this.sendEnabled 0 -1}}
           {{on "focus" (fn this.computeIsFocused true)}}
           {{on "blur" (fn this.computeIsFocused false)}}
@@ -77,7 +82,6 @@
           <ChatComposerInlineButtons @buttons={{this.inlineButtons}} />
         {{/unless}}
       </div>
-
     </div>
   </div>
 
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
index 7ca43144eb3..1bbc4f17a32 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer.js
@@ -174,6 +174,11 @@ export default class ChatComposer extends Component {
     });
   }
 
+  @action
+  focusTextarea() {
+    this.textareaInteractor.focus();
+  }
+
   @action
   uploadClicked() {
     document.querySelector(`#${this.fileUploadElementId}`).click();
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs
new file mode 100644
index 00000000000..6300d4631ed
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.hbs
@@ -0,0 +1,5 @@
+<div class="chat-composer-button">
+  <button type="button" class="chat-composer-button__btn" ...attributes>
+    {{d-icon @icon}}
+  </button>
+</div>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js
new file mode 100644
index 00000000000..f91ff5d29be
--- /dev/null
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/composer/button.js
@@ -0,0 +1,3 @@
+import Component from "@glimmer/component";
+
+export default class ChatComposerButton extends Component {}
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-button.scss b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
new file mode 100644
index 00000000000..9e6c9528775
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-button.scss
@@ -0,0 +1,14 @@
+.chat-composer-button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__btn {
+    box-sizing: border-box;
+    width: 50px;
+    border: 0;
+    height: 100%;
+    background: none;
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
index e1e457beb21..24685d740cf 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer-dropdown.scss
@@ -7,32 +7,27 @@
 }
 
 .chat-composer-dropdown__trigger-btn {
-  padding: 5px !important; // overwrite ios rule
-  border-radius: 100%;
-  background: var(--primary-med-or-secondary-high);
-  border: 1px solid transparent;
-  display: flex;
-
   .d-icon {
-    color: var(--secondary-very-high);
+    padding: 5px;
+    transition: transform 0.1s ease-in-out;
+    color: var(--primary-high);
+    background: var(--secondary-very-high);
+    border-radius: 100%;
   }
 
-  &:focus {
-    border-color: var(--tertiary);
-  }
-
-  .discourse-no-touch &:hover {
-    background: var(--primary-high);
-    .d-icon {
-      color: var(--primary-low);
+  .no-touch & {
+    &:hover,
+    &:focus {
+      cursor: pointer;
+      .d-icon {
+        color: var(--primary);
+      }
     }
   }
 
-  .chat-composer.is-disabled & {
-    background: var(--primary-400);
-
-    &:hover {
-      cursor: not-allowed;
+  &.has-active-panel {
+    .d-icon {
+      transform: rotate(45deg);
     }
   }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-composer.scss b/plugins/chat/assets/stylesheets/common/chat-composer.scss
index d724cda7a04..29af82e54ba 100644
--- a/plugins/chat/assets/stylesheets/common/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-composer.scss
@@ -3,8 +3,8 @@
     display: flex;
     flex-direction: column;
     z-index: 3;
-    background-color: var(--secondary);
-    margin-top: 0.1rem;
+    background-color: var(--primary-very-low);
+    padding: 12px 10px 0 10px;
 
     #chat-full-page-uploader,
     #chat-widget-uploader {
@@ -16,10 +16,14 @@
     }
   }
 
+  .chat-composer-button,
+  .chat-composer-separator {
+    align-self: stretch;
+  }
+
   &__outer-container {
     display: flex;
     align-items: center;
-    padding-inline: 0.25rem;
     box-sizing: border-box;
     width: 100%;
   }
@@ -30,11 +34,12 @@
     box-sizing: border-box;
     width: 100%;
     flex-direction: row;
-    border: 1px solid var(--primary-low-mid);
-    border-radius: 5px;
+    border: 1px solid var(--primary-medium);
+    border-radius: 10px;
     background-color: var(--secondary);
-    padding-inline: 0.25rem;
-    min-height: 42px;
+    min-height: 50px;
+    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
 
     .chat-composer.is-focused & {
       border-color: var(--primary-medium);
@@ -50,8 +55,6 @@
   }
 
   &__send-btn {
-    border-radius: 3px;
-    background: none;
     will-change: scale;
 
     @keyframes sendingScales {
@@ -65,23 +68,38 @@
         transform: scale(0.9);
       }
     }
+
     .chat-composer.is-sending & {
       animation: sendingScales 1s infinite linear;
     }
 
+    .d-icon {
+      background: none !important;
+    }
+
     .chat-composer.is-send-enabled & {
-      background: var(--tertiary-50);
-      &:focus {
-        outline: auto;
+      .d-icon {
+        color: var(--tertiary);
       }
 
-      .d-icon {
-        color: var(--tertiary) !important;
+      &:hover {
+        .d-icon {
+          transform: scale(1.2);
+        }
+      }
+
+      &:focus {
+        outline: auto;
       }
     }
 
     .chat-composer.is-send-disabled & {
       cursor: default;
+
+      .d-icon {
+        color: var(--primary-high);
+      }
+
       &:hover {
         background: none !important;
       }
@@ -89,41 +107,14 @@
 
     .chat-composer.is-disabled & {
       opacity: 0.4;
+
       &:hover {
         background: none !important;
       }
     }
 
-    > * {
-      pointer-events: none;
-    }
-
     .d-icon {
-      color: var(--primary) !important;
-    }
-  }
-
-  &__close-emoji-picker-btn {
-    margin-left: 0.2rem;
-    padding: 5px !important;
-    border-radius: 100%;
-    background: var(--primary-med-or-secondary-high);
-    border: 1px solid transparent;
-    display: flex;
-
-    .d-icon {
-      color: var(--secondary-very-high);
-    }
-
-    &:focus {
-      border-color: var(--tertiary);
-    }
-
-    .discourse-no-touch &:hover {
-      background: var(--primary-high);
-      .d-icon {
-        color: var(--primary-low);
-      }
+      color: var(--primary);
     }
   }
 
@@ -132,6 +123,8 @@
     align-items: center;
     box-sizing: border-box;
     width: 100%;
+    padding: 0 5px;
+    align-self: stretch;
   }
 
   &__input {
@@ -144,7 +137,7 @@
     max-height: 125px;
     background: none;
     margin: 0;
-    padding: 0.25rem 0.5rem;
+    padding: 0;
     text-overflow: ellipsis;
     cursor: inherit;
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
index 3d93fc44576..4c436062c72 100644
--- a/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-replying-indicator.scss
@@ -1,12 +1,7 @@
-.chat-replying-indicator-container {
-  padding: 0 0.5rem;
-}
-
 .chat-replying-indicator {
   color: var(--primary-medium);
   display: inline-flex;
   font-size: var(--font-down-2);
-  padding-bottom: unquote("max(0px, 0.5rem - env(safe-area-inset-bottom, 0))");
 
   &:before {
     // unicode zero width space character
diff --git a/plugins/chat/assets/stylesheets/common/index.scss b/plugins/chat/assets/stylesheets/common/index.scss
index c4f7183e36b..ec538d9b1b1 100644
--- a/plugins/chat/assets/stylesheets/common/index.scss
+++ b/plugins/chat/assets/stylesheets/common/index.scss
@@ -14,6 +14,7 @@
 @import "chat-composer-upload";
 @import "chat-composer-uploads";
 @import "chat-composer";
+@import "chat-composer-button";
 @import "chat-draft-channel";
 @import "chat-drawer";
 @import "chat-emoji-picker";
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
index 487c2b61055..d6334192c33 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-composer.scss
@@ -1,8 +1,4 @@
 .chat-composer {
-  &__wrapper {
-    padding: 0;
-  }
-
   &__input {
     .ios-device & {
       background-color: transparent;