diff --git a/web/chat/chat-input-bar.css b/web/chat/chat-input-bar.css
--- a/web/chat/chat-input-bar.css
+++ b/web/chat/chat-input-bar.css
@@ -1,42 +1,43 @@
 div.inputBar {
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--border-color);
 }
 div.inputBarWrapper {
-  padding: 16px;
+  padding: 0 16px 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 div.inputBarTextInput {
   display: flex;
-  background: var(--text-input-bg);
-  border-radius: 8px;
+  background-color: var(--inputField-background-secondary-default);
+  border-radius: 4px;
   /* Related to editBoxHeight in the `edit-text-message` component */
-  padding: 8px;
+  padding: 12px 8px;
   align-items: center;
   flex-grow: 1;
+  box-shadow: 0px -1px 3px 0px var(--panel-headerShadow-secondary-default);
+  clip-path: inset(-3px 0 0 0);
 }
 div.inputBarTextInput > textarea {
   flex: 1;
   display: flex;
   border: none;
   resize: none;
-  background: var(--text-input-bg);
-  color: var(--fg);
+  background-color: var(--inputField-background-secondary-default);
+  color: var(--text-background-primary-default);
 }
 div.inputBarTextInput > textarea:focus {
   outline: none;
 }
 div.joinButtonContainer {
-  background: var(--join-bg);
-  padding-top: 8px;
-  padding-bottom: 8px;
   display: flex;
   flex-direction: row;
   width: 100%;
   justify-content: center;
+  padding: 16px 0;
+  box-shadow: 0px -1px 3px 0px var(--panel-headerShadow-secondary-default);
+  clip-path: inset(-3px 0 0 0);
 }
 p.joinButtonText {
   font-weight: var(--semi-bold);
@@ -45,13 +46,16 @@
 span.explanation {
   color: var(--permission-color);
   text-align: center;
-  padding-top: 20px;
-  padding-bottom: 8px;
+  padding: 24px 0;
+  box-shadow: 0px -1px 3px 0px var(--panel-headerShadow-secondary-default);
+  clip-path: inset(-3px 0 0 0);
 }
 a.multimediaUpload {
+  display: flex;
   cursor: pointer;
   position: relative;
   padding-right: 12px;
+  color: var(--button-label-secondary-default);
 }
 a.multimediaUpload > input[type='file'] {
   visibility: hidden;
@@ -71,6 +75,8 @@
   display: flex;
   overflow-x: auto;
   white-space: nowrap;
+  box-shadow: 0px -1px 3px 0px var(--panel-headerShadow-secondary-default);
+  clip-path: inset(-3px 0 0 0);
 }
 div.previews > span.multimedia {
   margin: 10px;
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -309,22 +309,20 @@
     ) {
       content = (
         <div className={css.inputBarWrapper}>
-          <a className={css.multimediaUpload} onClick={this.onMultimediaClick}>
-            <input
-              type="file"
-              onChange={this.onMultimediaFileChange}
-              ref={this.multimediaInputRef}
-              accept={allowedMimeTypeString}
-              multiple
-            />
-            <SWMansionIcon
-              icon="image-1"
-              size={22}
-              color={`#${this.props.threadInfo.color}`}
-              disableFill
-            />
-          </a>
           <div className={css.inputBarTextInput}>
+            <a
+              className={css.multimediaUpload}
+              onClick={this.onMultimediaClick}
+            >
+              <input
+                type="file"
+                onChange={this.onMultimediaFileChange}
+                ref={this.multimediaInputRef}
+                accept={allowedMimeTypeString}
+                multiple
+              />
+              <SWMansionIcon icon="image-1" size={22} disableFill />
+            </a>
             <textarea
               rows="1"
               placeholder="Type your message"