diff --git a/web/chat/chat-thread-list-item.react.js b/web/chat/chat-thread-list-item.react.js
index 3f891de7c..ffc024cc3 100644
--- a/web/chat/chat-thread-list-item.react.js
+++ b/web/chat/chat-thread-list-item.react.js
@@ -1,63 +1,85 @@
 // @flow
 
 import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
 
 import * as React from 'react';
 import classNames from 'classnames';
 
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import css from './chat-thread-list.css';
 import MessagePreview from './message-preview.react';
 import ChatThreadListItemMenu from './chat-thread-list-item-menu.react';
 import { useSelector } from '../redux/redux-utils';
 import {
   useOnClickThread,
   useThreadIsActive,
 } from '../selectors/nav-selectors';
 
 type Props = {|
   +item: ChatThreadItem,
 |};
 function ChatThreadListItem(props: Props) {
   const { item } = props;
   const threadID = item.threadInfo.id;
 
   const onClick = useOnClickThread(threadID);
 
   const timeZone = useSelector((state) => state.timeZone);
   const lastActivity = shortAbsoluteDate(item.lastUpdatedTime, timeZone);
 
   const active = useThreadIsActive(threadID);
-  const activeStyle = active ? css.activeThread : null;
+  const containerClassName = React.useMemo(
+    () =>
+      classNames({
+        [css.thread]: true,
+        [css.activeThread]: active,
+      }),
+    [active],
+  );
 
-  const colorSplotchStyle = { backgroundColor: `#${item.threadInfo.color}` };
-  const unread = item.threadInfo.currentUser.unread;
+  const { unread } = item.threadInfo.currentUser;
+  const titleClassName = React.useMemo(
+    () =>
+      classNames({
+        [css.title]: true,
+        [css.unread]: unread,
+      }),
+    [unread],
+  );
+  const lastActivityClassName = React.useMemo(
+    () =>
+      classNames({
+        [css.lastActivity]: true,
+        [css.unread]: unread,
+        [css.dark]: !unread,
+      }),
+    [unread],
+  );
+
+  const { color } = item.threadInfo;
+  const colorSplotchStyle = React.useMemo(
+    () => ({ backgroundColor: `#${color}` }),
+    [color],
+  );
   return (
-    <div className={classNames(css.thread, activeStyle)}>
+    <div className={containerClassName}>
       <a className={css.threadButton} onClick={onClick}>
         <div className={css.threadRow}>
-          <div className={css.title}>{item.threadInfo.uiName}</div>
+          <div className={titleClassName}>{item.threadInfo.uiName}</div>
           <div className={css.colorSplotch} style={colorSplotchStyle} />
         </div>
         <div className={css.threadRow}>
           <MessagePreview
             messageInfo={item.mostRecentMessageInfo}
             threadInfo={item.threadInfo}
           />
-          <div
-            className={classNames([
-              css.lastActivity,
-              unread ? css.black : css.dark,
-            ])}
-          >
-            {lastActivity}
-          </div>
+          <div className={lastActivityClassName}>{lastActivity}</div>
         </div>
       </a>
       <ChatThreadListItemMenu item={item} />
     </div>
   );
 }
 
 export default ChatThreadListItem;
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index ab3ec591d..79aedb30c 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,106 +1,108 @@
 div.thread {
   display: flex;
   flex-direction: row;
   padding: 5px 5px 5px 15px;
 }
 div.thread:hover {
   background-color: #EEEEEE;
 }
 div.activeThread {
   background-color: #EEEEEE;
 }
 div.thread div.title {
-  font-family: 'Open Sans', sans-serif;
-  font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: black;
 }
 a.threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
 }
 div.threadRow {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 div.colorSplotch {
   height: 20px;
   width: 20px;
 }
 div.lastActivity {
   white-space: nowrap;
 }
 
 div.lastMessage {
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   flex: 1;
 }
+div.unread {
+  color: black;
+  font-weight: 600;
+}
 .black {
   color: black;
 }
 div.dark {
   color: #666666;
 }
 .light {
   color: #AAAAAA;
 }
 div.italic {
   font-style: italic;
 }
 
 .menu {
   position: relative;
   display: flex;
   margin: 0 5px;
 }
 .menu > button {
   background-color: transparent;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   padding: 0 10px;
 }
 .menu > button:hover {
   background-color: #DDDDDD;
 }
 .menu > button svg {
   font-size: 26px;
 }
 
 .menuContent {
   display: none;
   position: absolute;
   top: 41px;
   right: 0;
   z-index: 1;
   width: max-content;
   overflow: hidden;
   background-color: #EEEEEE;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
 .menuContentVisible {
   display: block;
 }
 .menuContent ul {
   list-style: none;
 }
 .menuContent li:not(:last-child) {
   border-bottom: 1px solid #DDDDDD;
 }
 .menuContent button {
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 16px;
 }
 .menuContent button:hover {
   background-color: #DDDDDD;
 }