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
@@ -37,3 +37,28 @@
   cursor: pointer;
   color: var(--thread-top-bar-menu-color);
 }
+
+.pinnedCountBanner {
+  background-color: var(--pinned-count-banner-color);
+  height: 40px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+a.pinnedCountText {
+  color: var(--pinned-count-text-color);
+  font-size: var(--xs-font-12);
+  display: inline-flex;
+  align-items: center;
+}
+
+a.pinnedCountText:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.chevronRight {
+  vertical-align: middle;
+}
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
@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from 'react';
+import { ChevronRight } from 'react-feather';
 
 import { threadIsPending } from 'lib/shared/thread-utils.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
@@ -28,6 +29,34 @@
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
+  // To allow the pinned messages modal to be re-used by the message search
+  // modal, it will be useful to make the modal accept a prop that defines it's
+  // name, instead of setting it directly in the modal.
+  const bannerText = React.useMemo(() => {
+    if (!threadInfo.pinnedCount || threadInfo.pinnedCount === 0) {
+      return '';
+    }
+
+    const messageNoun = threadInfo.pinnedCount === 1 ? 'message' : 'messages';
+
+    return `${threadInfo.pinnedCount} pinned ${messageNoun}`;
+  }, [threadInfo.pinnedCount]);
+
+  const pinnedCountBanner = React.useMemo(() => {
+    if (!bannerText) {
+      return null;
+    }
+
+    return (
+      <div className={css.pinnedCountBanner}>
+        <a className={css.pinnedCountText}>
+          {bannerText}
+          <ChevronRight size={14} className={css.chevronRight} />
+        </a>
+      </div>
+    );
+  }, [bannerText]);
+
   const { uiName } = useResolvedThreadInfo(threadInfo);
 
   const avatar = React.useMemo(() => {
@@ -43,13 +72,16 @@
   }, [threadBackgroundColorStyle, threadInfo]);
 
   return (
-    <div className={css.topBarContainer}>
-      <div className={css.topBarThreadInfo}>
-        {avatar}
-        <div className={css.threadTitle}>{uiName}</div>
+    <>
+      <div className={css.topBarContainer}>
+        <div className={css.topBarThreadInfo}>
+          {avatar}
+          <div className={css.threadTitle}>{uiName}</div>
+        </div>
+        {threadMenu}
       </div>
-      {threadMenu}
-    </div>
+      {pinnedCountBanner}
+    </>
   );
 }
 
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -214,4 +214,6 @@
   --topbar-lines: rgba(255, 255, 255, 0.08);
   --pin-message-information-text-color: var(--shades-white-60);
   --pin-message-modal-border-color: var(--shades-black-80);
+  --pinned-count-banner-color: var(--shades-black-90);
+  --pinned-count-text-color: var(--shades-white-90);
 }