diff --git a/web/chat/sidebar-modal-item.css b/web/chat/sidebar-modal-item.css
new file mode 100644
--- /dev/null
+++ b/web/chat/sidebar-modal-item.css
@@ -0,0 +1,33 @@
+div.sidebar {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+div.sidebarName {
+  font-size: var(--l-font-18);
+  color: var(--sidebar-modal-color);
+  padding-left: 36px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.unread {
+  color: var(--fg);
+}
+
+.longArrow {
+  position: absolute;
+  bottom: 100px;
+}
+
+.arrow {
+  position: absolute;
+  bottom: 6px;
+}
+
+ul.sidebarList {
+  padding-top: 16px;
+  padding-left: 16px;
+  list-style: none;
+}
diff --git a/web/chat/sidebar-modal-item.react.js b/web/chat/sidebar-modal-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/sidebar-modal-item.react.js
@@ -0,0 +1,54 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import type { SidebarInfo } from 'lib/types/thread-types';
+
+import { useOnClickThread } from '../selectors/nav-selectors';
+import css from './sidebar-modal-item.css';
+
+type Props = {
+  +sidebar: SidebarInfo,
+  +extendArrow?: boolean,
+};
+
+function SideBarModalItem(props: Props): React.Node {
+  const {
+    sidebar: { threadInfo },
+    extendArrow = false,
+  } = props;
+  const {
+    currentUser: { unread },
+    uiName,
+  } = threadInfo;
+
+  const onClick = useOnClickThread(threadInfo);
+
+  const sideBarTextCls = classNames(css.sidebarName, { [css.unread]: unread });
+  let arrow;
+  if (extendArrow) {
+    arrow = (
+      <img
+        src="images/long_arrow.svg"
+        className={css.longArrow}
+        alt="sidebar arrow"
+      />
+    );
+  } else {
+    arrow = (
+      <img src="images/arrow.svg" className={css.arrow} alt="sidebar arrow" />
+    );
+  }
+
+  return (
+    <div className={css.container} onClick={onClick}>
+      <div className={css.sidebar}>
+        {arrow}
+        <div className={sideBarTextCls}>{uiName}</div>
+      </div>
+    </div>
+  );
+}
+
+export default SideBarModalItem;
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -5,7 +5,8 @@
 import { useSearchSidebars } from 'lib/hooks/search-sidebars';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
-import SidebarItem from '../../chat/sidebar-item.react';
+import css from '../../chat/sidebar-modal-item.css';
+import SideBarModalItem from '../../chat/sidebar-modal-item.react';
 import { useModalContext } from '../modal-provider.react';
 import SearchModal from '../search-modal.react';
 
@@ -25,10 +26,10 @@
   const { sidebars } = useSearchSidebars(threadInfo, searchText);
 
   return (
-    <ul>
+    <ul className={css.sidebarList}>
       {sidebars.map(sideBar => (
         <li key={sideBar.threadInfo.id} onClick={popModal}>
-          <SidebarItem sidebarInfo={sideBar} />
+          <SideBarModalItem sidebar={sideBar} />
         </li>
       ))}
     </ul>
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -168,4 +168,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);
+  --sidebar-modal-color: var(--shades-black-60);
 }