diff --git a/web/modals/threads/sidebars/sidebar.react.js b/web/modals/threads/sidebars/sidebar.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/sidebars/sidebar.react.js
@@ -0,0 +1,79 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ChatThreadItem } from 'lib/selectors/chat-selectors';
+import { getMessagePreview } from 'lib/shared/message-utils';
+import { shortAbsoluteDate } from 'lib/utils/date-utils';
+
+import { getDefaultTextMessageRules } from '../../../markdown/rules.react';
+import { useSelector } from '../../../redux/redux-utils';
+import { useOnClickThread } from '../../../selectors/nav-selectors';
+import { useModalContext } from '../../modal-provider.react';
+import css from './sidebars-modal.css';
+
+type Props = {
+  +sidebar: ChatThreadItem,
+  +isLastItem?: boolean,
+};
+
+function Sidebar(props: Props): React.Node {
+  const { sidebar, isLastItem } = props;
+  const { threadInfo, lastUpdatedTime, mostRecentMessageInfo } = sidebar;
+
+  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(lastUpdatedTime, timeZone),
+    [lastUpdatedTime, 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 (
+    <div className={css.sidebarContainer} onClick={onClickThread}>
+      <img
+        className={css.sidebarArrow}
+        src={
+          isLastItem
+            ? 'images/arrow_sidebar_last.svg'
+            : 'images/arrow_sidebar.svg'
+        }
+        alt="sidebar arrow"
+      />
+      <div className={css.sidebarInfo}>
+        <div className={css.longTextEllipsis}>{threadInfo.name}</div>
+        <div className={css.lastMessage}>{lastMessage}</div>
+      </div>
+    </div>
+  );
+}
+
+export default Sidebar;
diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/sidebars/sidebars-modal.css
@@ -0,0 +1,45 @@
+div.sidebarContainer {
+  cursor: pointer;
+  display: flex;
+  padding: 0 16px;
+  column-gap: 8px;
+  align-items: flex-start;
+}
+
+div.sidebarContainer:hover {
+  color: var(--sidebars-modal-color-hover);
+}
+
+div.sidebarInfo {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 8px 0;
+}
+
+div.longTextEllipsis {
+  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;
+}
+
+img.sidebarArrow {
+  position: relative;
+  top: -12px;
+}
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -169,4 +169,5 @@
   --notification-settings-option-invalid-selected-color: var(--shades-black-60);
   --danger-zone-subheading-color: var(--shades-white-60);
   --danger-zone-explanation-color: var(--shades-black-60);
+  --sidebars-modal-color-hover: var(--shades-white-100);
 }