diff --git a/keyserver/images/arrow.svg b/keyserver/images/arrow.svg
new file mode 100755
--- /dev/null
+++ b/keyserver/images/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="30" viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 26H0.5V26.5H1V26ZM26.3536 26.3536C26.5488 26.1583 26.5488 25.8417 26.3536 25.6464L23.1716 22.4645C22.9763 22.2692 22.6597 22.2692 22.4645 22.4645C22.2692 22.6597 22.2692 22.9763 22.4645 23.1716L25.2929 26L22.4645 28.8284C22.2692 29.0237 22.2692 29.3403 22.4645 29.5355C22.6597 29.7308 22.9763 29.7308 23.1716 29.5355L26.3536 26.3536ZM0.5 0V26H1.5V0H0.5ZM1 26.5H26V25.5H1V26.5Z" fill="#808080"/>
+</svg>
diff --git a/keyserver/images/long_arrow.svg b/keyserver/images/long_arrow.svg
new file mode 100644
--- /dev/null
+++ b/keyserver/images/long_arrow.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="37" height="30" viewBox="0 0 36 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow" fill="#808080" fill-rule="nonzero">
+            <path d="M0.5,36 L0,36 L0,36.5 L0.5,36.5 L0.5,36 Z M25.8536,36.3536 C26.0488,36.1583 26.0488,35.8417 25.8536,35.6464 L22.6716,32.4645 C22.4763,32.2692 22.1597,32.2692 21.9645,32.4645 C21.7692,32.6597 21.7692,32.9763 21.9645,33.1716 L24.7929,36 L21.9645,38.8284 C21.7692,39.0237 21.7692,39.3403 21.9645,39.5355 C22.1597,39.7308 22.4763,39.7308 22.6716,39.5355 L25.8536,36.3536 Z M0,0 L0,36 L1,36 L1,0 L0,0 Z M0.5,36.5 L25.5,36.5 L25.5,35.5 L0.5,35.5 L0.5,36.5 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
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
@@ -63,7 +63,7 @@
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-left: 12px;
 }
 p.breadCrumbs {
   display: flex;
@@ -297,3 +297,15 @@
   display: flex;
   flex-direction: column;
 }
+img.longArrow {
+  height: 40px;
+  position: absolute;
+  left: 22px;
+  top: -19px;
+}
+
+img.arrow {
+  position: absolute;
+  left: 28px;
+  top: -10px;
+}
diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js
--- a/web/chat/sidebar-item.react.js
+++ b/web/chat/sidebar-item.react.js
@@ -15,6 +15,7 @@
 function SidebarItem(props: Props): React.Node {
   const {
     sidebarInfo: { threadInfo },
+    extendArrow = false,
   } = props;
   const {
     currentUser: { unread },
@@ -23,9 +24,24 @@
   const onClick = useOnClickThread(threadInfo);
 
   const unreadCls = classNames(css.sidebarTitle, { [css.unread]: unread });
+  let arrow;
+  if (extendArrow) {
+    arrow = (
+      <img
+        className={css.longArrow}
+        src="images/long_arrow.svg"
+        alt="sidebar arrow"
+      />
+    );
+  } else {
+    arrow = (
+      <img src="images/arrow.svg" className={css.arrow} alt="sidebar arrow" />
+    );
+  }
 
   return (
     <>
+      {arrow}
       <div className={css.spacer} />
       <a className={css.threadButtonSidebar} onClick={onClick}>
         <div className={css.threadRow}>