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
@@ -30,18 +30,17 @@
     threadMenu = <ThreadMenu threadInfo={threadInfo} />;
   }
 
-  const bannerText = threadInfo.pinnedCount
-    ? pinnedMessageCountText(threadInfo.pinnedCount)
-    : '';
+  const bannerText =
+    !!threadInfo.pinnedCount && pinnedMessageCountText(threadInfo.pinnedCount);
 
   const inputState = React.useContext(InputStateContext);
   const pushThreadPinsModal = React.useCallback(() => {
     pushModal(
       <InputStateContext.Provider value={inputState}>
-        <PinnedMessagesModal threadInfo={threadInfo} modalName={bannerText} />
+        <PinnedMessagesModal threadInfo={threadInfo} />
       </InputStateContext.Provider>,
     );
-  }, [pushModal, inputState, threadInfo, bannerText]);
+  }, [pushModal, inputState, threadInfo]);
 
   const pinnedCountBanner = React.useMemo(() => {
     if (!bannerText) {
diff --git a/web/modals/chat/pinned-messages-modal.css b/web/modals/chat/pinned-messages-modal.css
--- a/web/modals/chat/pinned-messages-modal.css
+++ b/web/modals/chat/pinned-messages-modal.css
@@ -26,3 +26,10 @@
   justify-content: center;
   display: flex;
 }
+
+.noPinnedMessages {
+  color: var(--text-background-tertiary-default);
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -20,6 +20,7 @@
 import type { RawMessageInfo } from 'lib/types/message-types.js';
 import { type ThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
+import { pinnedMessageCountText } from 'lib/utils/message-pinning-utils.js';
 
 import css from './pinned-messages-modal.css';
 import MessageResult from '../../components/message-result.react.js';
@@ -29,7 +30,6 @@
 
 type Props = {
   +threadInfo: ThreadInfo,
-  +modalName: string,
 };
 
 const loadingStatusSelector = createLoadingStatusSelector(
@@ -37,7 +37,7 @@
 );
 
 function PinnedMessagesModal(props: Props): React.Node {
-  const { threadInfo, modalName } = props;
+  const { threadInfo } = props;
   const { id: threadID } = threadInfo;
   const { popModal } = useModalContext();
   const [rawMessageResults, setRawMessageResults] = React.useState<
@@ -126,6 +126,14 @@
   );
 
   const messageResultsToDisplay = React.useMemo(() => {
+    if (modifiedItems.length === 0) {
+      return (
+        <div className={css.noPinnedMessages}>
+          No pinned messages in this thread.
+        </div>
+      );
+    }
+
     const items = modifiedItems.map(item => (
       <MessageResult
         key={item.messageInfo.id}
@@ -148,6 +156,8 @@
     return null;
   }, [loadingStatus]);
 
+  const modalName = pinnedMessageCountText(modifiedItems.length);
+
   return (
     <Modal name={modalName} onClose={popModal} size="large">
       <hr className={css.separator} />