diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -5,9 +5,7 @@
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
 import { useAncestorThreads } from 'lib/shared/ancestor-threads';
-import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
-import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickThread,
   useThreadIsActive,
@@ -35,12 +33,6 @@
   const ancestorThreads = useAncestorThreads(threadInfo);
   const onClick = useOnClickThread(item.threadInfo);
 
-  const timeZone = useSelector(state => state.timeZone);
-  const lastActivity = shortAbsoluteDate(
-    lastUpdatedTimeIncludingSidebars,
-    timeZone,
-  );
-
   const active = useThreadIsActive(threadID);
   const containerClassName = React.useMemo(
     () =>
@@ -60,15 +52,6 @@
       }),
     [unread],
   );
-  const lastActivityClassName = React.useMemo(
-    () =>
-      classNames({
-        [css.lastActivity]: true,
-        [css.unread]: unread,
-        [css.dark]: !unread,
-      }),
-    [unread],
-  );
 
   const breadCrumbsClassName = React.useMemo(
     () =>
@@ -145,6 +128,9 @@
             <MessagePreview
               messageInfo={mostRecentMessageInfo}
               threadInfo={threadInfo}
+              lastUpdatedTimeIncludingSidebars={
+                lastUpdatedTimeIncludingSidebars
+              }
             />
           </div>
         </a>
@@ -153,7 +139,6 @@
             threadInfo={threadInfo}
             mostRecentNonLocalMessage={mostRecentNonLocalMessage}
           />
-          <div className={lastActivityClassName}>{lastActivity}</div>
         </div>
       </div>
       {sidebars}
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -90,12 +90,12 @@
   width: 42px;
   border-radius: 1.68px;
 }
-div.lastActivity {
+span.lastActivity {
   font-size: var(--xxs-font-10);
-  color: var(--fg);
   line-height: 1.5;
   font-weight: var(--semi-bold);
   white-space: nowrap;
+  text-align: end;
 }
 
 div.lastMessage {
@@ -104,6 +104,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
+  display: flex;
 }
 div.threadRow > .lastMessage {
   color: var(--thread-last-message-color-read);
diff --git a/web/chat/message-preview.react.js b/web/chat/message-preview.react.js
--- a/web/chat/message-preview.react.js
+++ b/web/chat/message-preview.react.js
@@ -13,21 +13,34 @@
   type RobotextMessageInfo,
 } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
+import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import { getDefaultTextMessageRules } from '../markdown/rules.react';
+import { useSelector } from '../redux/redux-utils';
 import css from './chat-thread-list.css';
 
 type Props = {
   +messageInfo: ?MessageInfo,
   +threadInfo: ThreadInfo,
+  +lastUpdatedTimeIncludingSidebars: number,
 };
 function MessagePreview(props: Props): React.Node {
-  const { messageInfo: messageInfoProps, threadInfo } = props;
+  const {
+    messageInfo: messageInfoProps,
+    threadInfo,
+    lastUpdatedTimeIncludingSidebars,
+  } = props;
   const { unread } = threadInfo.currentUser;
 
   let usernameText = null;
   const colorStyle = unread ? css.white : css.light;
 
+  const timeZone = useSelector(state => state.timeZone);
+  const lastActivity = shortAbsoluteDate(
+    lastUpdatedTimeIncludingSidebars,
+    timeZone,
+  );
+
   if (!messageInfoProps) {
     return (
       <div className={classNames(css.lastMessage, css.dark, css.italic)}>
@@ -63,6 +76,7 @@
     <div className={classNames(css.lastMessage, colorStyle)}>
       {usernameText}
       {messageTitle}
+      <span className={css.lastActivity}>{lastActivity}</span>
     </div>
   );
 }