diff --git a/web/chat/thread-top-bar.css b/web/chat/thread-top-bar.css
--- a/web/chat/thread-top-bar.css
+++ b/web/chat/thread-top-bar.css
@@ -1,11 +1,9 @@
 div.topBarContainer {
   display: flex;
-  background-color: var(--bg);
   align-items: center;
   justify-content: space-between;
   padding: 16px;
-  color: var(--thread-top-bar-color);
-  border-bottom: 1px solid var(--border);
+  color: var(--text-background-primary-default);
 }
 
 div.topBarThreadInfo {
@@ -25,7 +23,7 @@
 }
 
 .searchButtonIcon {
-  color: var(--thread-top-bar-search-button-color);
+  color: var(--button-label-tertiary-default);
 }
 
 .buttons {
@@ -33,3 +31,13 @@
   display: flex;
   gap: 30px;
 }
+
+.newChatContainer {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-left: 16px;
+  font-size: var(--m-font-16);
+  font-weight: var(--bold);
+  color: var(--text-background-primary-default);
+}
diff --git a/web/chat/thread-top-bar.react.js b/web/chat/thread-top-bar.react.js
--- a/web/chat/thread-top-bar.react.js
+++ b/web/chat/thread-top-bar.react.js
@@ -8,13 +8,13 @@
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
-import PinnedMessagesBanner from './pinned-messages-banner.react.js';
 import ThreadMenu from './thread-menu.react.js';
 import css from './thread-top-bar.css';
 import ThreadAvatar from '../avatars/thread-avatar.react.js';
 import Button from '../components/button.react.js';
 import { InputStateContext } from '../input/input-state.js';
 import MessageSearchModal from '../modals/search/message-search-modal.react.js';
+import { useInfosForPendingThread } from '../utils/thread-utils.js';
 
 type ThreadTopBarProps = {
   +threadInfo: ThreadInfo,
@@ -42,27 +42,41 @@
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
-  return (
-    <>
-      <div className={css.topBarContainer}>
-        <div className={css.topBarThreadInfo}>
-          <ThreadAvatar size="S" threadInfo={threadInfo} />
-          <div className={css.threadTitle}>{uiName}</div>
-        </div>
-        <div className={css.buttons}>
-          <Button className={css.button} onClick={onClickSearch}>
-            <SWMansionIcon
-              size={24}
-              icon="search"
-              className={css.searchButtonIcon}
-            />
-          </Button>
-          {threadMenu}
-        </div>
+  const { isChatCreation, selectedUserInfos } = useInfosForPendingThread();
+
+  const threadTopBarButtons = React.useMemo(() => {
+    if (isChatCreation && selectedUserInfos.length === 0) {
+      return null;
+    }
+    return (
+      <div className={css.buttons}>
+        <Button onClick={onClickSearch}>
+          <SWMansionIcon
+            size={24}
+            icon="search"
+            className={css.searchButtonIcon}
+          />
+        </Button>
+        {threadMenu}
       </div>
-      <PinnedMessagesBanner threadInfo={threadInfo} />
-    </>
-  );
+    );
+  }, [isChatCreation, onClickSearch, selectedUserInfos, threadMenu]);
+
+  const threadTopBar = React.useMemo(() => {
+    return (
+      <>
+        <div className={css.topBarContainer}>
+          <div className={css.topBarThreadInfo}>
+            <ThreadAvatar size="S" threadInfo={threadInfo} />
+            <div className={css.threadTitle}>{uiName}</div>
+          </div>
+          {threadTopBarButtons}
+        </div>
+      </>
+    );
+  }, [threadInfo, threadTopBarButtons, uiName]);
+
+  return threadTopBar;
 }
 
 export default ThreadTopBar;
diff --git a/web/community-header/community-header-button.css b/web/community-header/community-header-button.css
--- a/web/community-header/community-header-button.css
+++ b/web/community-header/community-header-button.css
@@ -4,7 +4,7 @@
 
 .addButton {
   background-color: var(--button-background-tertiary-default);
-  color: var(--button-label-tertiary-default);
+  color: var(--button-label-secondary-default);
   border-radius: 8px;
   padding: 6px 10px;
 }
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -282,7 +282,7 @@
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-60);
-  --button-label-tertiary-default: var(--shades-white-60);
+  --button-label-tertiary-default: var(--shades-black-50);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
   --button-label-tertiary-hover: var(--shades-white-80);
@@ -383,7 +383,7 @@
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-90);
-  --button-label-tertiary-default: var(--shades-white-90);
+  --button-label-tertiary-default: var(--shades-black-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
   --button-label-tertiary-hover: var(--shades-white-80);