diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
index f20969fc3..b21af6870 100644
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -1,76 +1,84 @@
 // @flow
 
+import classNames from 'classnames';
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react';
 import { type ChatThreadItem } from 'lib/selectors/chat-selectors';
 import { getMessagePreview } from 'lib/shared/message-utils';
 import { shortAbsoluteDate } from 'lib/utils/date-utils';
 
 import Button from '../../../components/button.react';
 import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
 import { useSelector } from '../../../redux/redux-utils';
 import { useOnClickThread } from '../../../selectors/thread-selectors';
 import SWMansionIcon from '../../../SWMansionIcon.react';
 import css from './subchannels-modal.css';
 
 type Props = {
   +chatThreadItem: ChatThreadItem,
 };
 
 function Subchannel(props: Props): React.Node {
   const { chatThreadItem } = props;
   const {
     threadInfo,
     mostRecentMessageInfo,
     lastUpdatedTimeIncludingSidebars,
   } = chatThreadItem;
 
+  const { unread } = threadInfo.currentUser;
+
+  const subchannelTitleClassName = classNames({
+    [css.subchannelInfo]: true,
+    [css.unread]: unread,
+  });
+
   const timeZone = useSelector(state => state.timeZone);
   const { popModal } = useModalContext();
 
   const navigateToThread = useOnClickThread(threadInfo);
 
   const onClickThread = React.useCallback(
     event => {
       popModal();
       navigateToThread(event);
     },
     [popModal, navigateToThread],
   );
 
   const lastActivity = React.useMemo(
     () => shortAbsoluteDate(lastUpdatedTimeIncludingSidebars, timeZone),
     [lastUpdatedTimeIncludingSidebars, timeZone],
   );
 
   const lastMessage = React.useMemo(() => {
     if (!mostRecentMessageInfo) {
       return <div className={css.noMessage}>No messages</div>;
     }
     const { message, username } = getMessagePreview(
       mostRecentMessageInfo,
       threadInfo,
       getDefaultTextMessageRules().simpleMarkdownRules,
     );
     const previewText = username ? `${username}: ${message}` : message;
     return (
       <>
         <div className={css.longTextEllipsis}>{previewText}</div>
         <div className={css.lastActivity}>{lastActivity}</div>
       </>
     );
   }, [lastActivity, mostRecentMessageInfo, threadInfo]);
 
   return (
     <Button className={css.subchannelContainer} onClick={onClickThread}>
       <SWMansionIcon icon="message-square" size={22} />
-      <div className={css.subchannelInfo}>
+      <div className={subchannelTitleClassName}>
         <div className={css.longTextEllipsis}>{threadInfo.uiName}</div>
         <div className={css.lastMessage}>{lastMessage}</div>
       </div>
     </Button>
   );
 }
 
 export default Subchannel;
diff --git a/web/modals/threads/subchannels/subchannels-modal.css b/web/modals/threads/subchannels/subchannels-modal.css
index 9242aed33..2271bb52d 100644
--- a/web/modals/threads/subchannels/subchannels-modal.css
+++ b/web/modals/threads/subchannels/subchannels-modal.css
@@ -1,55 +1,60 @@
 div.subchannelsListContainer {
   display: flex;
   flex-direction: column;
   overflow: auto;
   row-gap: 8px;
   width: 383px;
   height: 458px;
 }
 
 div.noSubchannels {
   text-align: center;
 }
 
 .subchannelContainer {
   align-items: flex-start;
   font-size: var(--m-font-18);
   line-height: var(--line-height-text);
   color: var(--subchannels-modal-color);
   padding: 8px 16px;
   column-gap: 8px;
 }
 
 .subchannelContainer:hover {
   color: var(--subchannels-modal-color-hover);
 }
 
 div.subchannelInfo {
   flex: 1;
   display: flex;
   flex-direction: column;
   row-gap: 8px;
   overflow: hidden;
 }
 
+div.unread {
+  color: var(--fg);
+  font-weight: var(--semi-bold);
+}
+
 div.longTextEllipsis {
   align-self: flex-start;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
 
 div.lastMessage {
   display: flex;
   justify-content: space-between;
   column-gap: 14px;
 }
 
 div.noMessage {
   text-align: center;
   font-style: italic;
 }
 
 div.lastActivity {
   white-space: nowrap;
 }