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
@@ -79,6 +79,11 @@
     [unread],
   );
 
+  let unreadDot;
+  if (unread) {
+    unreadDot = <div className={css.unreadDot} />;
+  }
+
   const { color } = item.threadInfo;
   const colorSplotchStyle = React.useMemo(
     () => ({ backgroundColor: `#${color}` }),
@@ -128,7 +133,11 @@
   return (
     <>
       <div className={containerClassName}>
-        <div className={css.colorSplotch} style={colorSplotchStyle} />
+        <div className={css.colorContainer}>
+          <div className={css.dotContainer}>{unreadDot}</div>
+
+          <div className={css.colorSplotch} style={colorSplotchStyle} />
+        </div>
         <a className={css.threadButton} onClick={onClick}>
           <p className={breadCrumbsClassName}>{ancestorPath}</p>
           <div className={css.threadRow}>
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
@@ -4,7 +4,6 @@
   align-items: flex-start;
   padding-top: 4px;
   padding-bottom: 4px;
-  padding-left: 16px;
   padding-right: 10px;
 }
 div.threadListSideBar {
@@ -66,6 +65,10 @@
   text-overflow: ellipsis;
 }
 
+div.colorContainer {
+  display: flex;
+}
+
 div.spacer,
 div.colorSplotch {
   height: 40px;
@@ -107,6 +110,19 @@
 .light {
   color: var(--thread-from-color-read);
 }
+div.dotContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+}
+div.unreadDot {
+  height: 4px;
+  width: 4px;
+  background: var(--fg);
+  border-radius: 15px;
+  align-self: center;
+}
 div.italic {
   font-style: italic;
 }