diff --git a/keyserver/images/arrow.svg b/keyserver/images/arrow.svg
new file mode 100755
index 000000000..c2a15c672
--- /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
index 000000000..3e8d0f1f9
--- /dev/null
+++ b/keyserver/images/long_arrow.svg
@@ -0,0 +1,7 @@
+<svg width="27px" height="38px" viewBox="0 0 27 38" 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="long_arrow-8.35.28-AM" transform="translate(0.000000, -0.000000)" fill="#808080" fill-rule="nonzero">
+            <path d="M0,0 L1,0 L1,33.5 L24.793,33.5 L22.4645,31.1716 C22.2909,30.998 22.2716111,30.728558 22.4066333,30.53373 L22.4645,30.4645 C22.6380111,30.2909 22.9074432,30.2716111 23.1023403,30.4066333 L23.1716,30.4645 L26.3536,33.6464 C26.5271111,33.82 26.5463901,34.089442 26.411437,34.2843402 L26.3536,34.3536 L23.1716,37.5355 C22.9763,37.7308 22.6597,37.7308 22.4645,37.5355 C22.2909,37.3619889 22.2716111,37.0925568 22.4066333,36.8976597 L22.4645,36.8284 L24.791,34.5 L0,34.5 L0,0 Z" id="Path"></path>
+        </g>
+    </g>
+</svg>
diff --git a/web/chat/chat-thread-list.css b/web/chat/chat-thread-list.css
index 38e544cdf..55183d559 100644
--- a/web/chat/chat-thread-list.css
+++ b/web/chat/chat-thread-list.css
@@ -1,314 +1,318 @@
 div.thread {
   display: flex;
   flex-direction: row;
 }
 div.threadListSidebar {
   display: flex;
   flex-direction: row;
   height: 32px;
   padding-right: 8px;
   position: relative;
   cursor: pointer;
 }
 div.threadListSidebar > svg {
   position: absolute;
   top: -7px;
   left: 30px;
 }
 div.thread:first-child {
   padding-top: 6px;
 }
 div.activeThread,
 div.threadListSidebar:hover {
   background: var(--thread-active-bg);
 }
 
 div.activeThread :is(div.dark, .lastMessage span.read, .title) {
   color: var(--chat-thread-list-color-active);
 }
 
 div.activeThread .lastMessage.read {
   color: var(--chat-thread-list-color-active);
 }
 
 div.activeThread.thread:hover {
   background: var(--thread-active-bg);
 }
 div.thread:hover {
   background: var(--thread-hover-bg);
 }
 div.title {
   flex: 1;
   font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   line-height: var(--line-height-text);
 }
-div.threadArrowExtender {
-  width: 10px;
-  position: absolute;
-  border-left: 0.5px solid var(--arrow-extension-color);
-  height: 8px;
-  top: -15px;
-  left: 32px;
-}
-
 .threadButton {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
   padding-left: 12px;
 }
 .threadButton + div {
   display: flex;
   flex-direction: column;
 }
 .threadButtonSidebar {
   flex: 1;
   cursor: pointer;
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding-left: 8px;
+  padding-left: 12px;
 }
 p.breadCrumbs {
   display: flex;
   padding: 8px 0 2px 0;
   font-size: var(--xs-font-12);
   font-weight: var(--normal);
   color: var(--breadcrumb-color);
 }
 p.breadCrumbs.unread {
   color: var(--breadcrumb-color-unread);
 }
 span.breadCrumb {
   display: flex;
   align-items: center;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 div.colorContainer {
   display: flex;
   padding-top: 8px;
 }
 
 div.spacer,
 div.colorSplotch {
   width: 42px;
   border-radius: 1.68px;
 }
 div.colorSplotchContainer {
   height: 42px;
   display: flex;
 }
 div.lastActivity {
   font-size: var(--xxs-font-10);
   color: var(--fg);
   line-height: 1.5;
   padding-right: 16px;
   font-weight: var(--semi-bold);
   white-space: nowrap;
   flex-grow: 1;
   padding-bottom: 12px;
   align-items: flex-end;
   display: flex;
 }
 
 div.lastMessage {
   font-size: 16px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--line-height-text);
   padding-bottom: 8px;
 }
 div.threadRow > .lastMessage {
   color: var(--thread-last-message-color-read);
   font-size: var(--s-font-14);
 }
 div.unread {
   color: var(--fg);
   font-weight: var(--semi-bold);
 }
 div.lastMessage.unread {
   color: var(--fg);
 }
 div.dark {
   color: var(--thread-color-read);
   padding-right: 16px;
 }
 .read {
   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;
 }
 div.sidebarTitle {
   flex: 1;
   font-size: var(--s-font-14);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--thread-color-read);
   align-self: flex-start;
 }
 div.threadListSidebar > div.dotContainer {
   width: 16px;
 }
 div.sidebarTitle.unread {
   color: var(--fg);
 }
 div.seeMoreButton {
   padding-left: 54px;
 }
 div.sidebarLastActivity {
   white-space: nowrap;
   font-size: var(--xxs-font-10);
   line-height: var(--line-height-text);
   font-weight: var(--semi-bold);
 }
 svg.sidebarIcon {
   color: var(--thread-color-read);
   padding: 0 6px;
   font-size: 20px;
 }
 div.sidebar .menu > button svg {
   font-size: 16px;
   color: var(--thread-color-read);
 }
 div.sidebar .menu {
   opacity: 0;
 }
 div.sidebar:hover .menu {
   display: flex;
   align-self: flex-end;
   opacity: 1;
 }
 .menu {
   position: relative;
   display: flex;
   justify-content: flex-end;
 }
 .menu > button {
   background-color: transparent;
   color: var(--thread-color-read);
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
 }
 
 .menu > button:focus {
   outline: none;
 }
 
 .menuContent {
   display: none;
   position: absolute;
   top: calc(100% + 1px);
   right: 0;
   z-index: 1;
   width: max-content;
   overflow: hidden;
   background-color: #eeeeee;
   border-radius: 5px;
   box-shadow: 1px 1px 5px 2px #00000022;
 }
 .menuContentVisible {
   display: block;
 }
 
 button.menuContent {
   border: none;
   cursor: pointer;
   padding: 10px;
   font-size: 16px;
 }
 button.menuContent:hover {
   background-color: #dddddd;
 }
 
 ul.list {
   margin: 5px 3px 10px 0px;
   overflow: auto;
 }
 
 div.search {
   display: flex;
   background-color: #dddddd;
   border-radius: 5px;
   padding: 3px 5px;
   align-items: center;
 }
 svg.searchVector {
   fill: #aaaaaa;
   height: 22px;
   width: 22px;
   padding: 0 3px;
   margin-left: 8px;
 }
 div.search > input {
   color: black;
   padding: 0;
   border: none;
   background-color: #dddddd;
   font-weight: 600;
   font-size: 15px;
   flex-grow: 1;
   margin-left: 3px;
 }
 div.search > input:focus {
   outline: none;
 }
 svg.clearQuery {
   font-size: 15px;
   padding-bottom: 1px;
   padding-right: 2px;
   color: #aaaaaa;
 }
 svg.clearQuery:hover {
   font-size: 15px;
   padding-bottom: 1px;
   padding-right: 2px;
   color: white;
 }
 
 div.spacer {
   height: 6px;
 }
 
 div.emptyItemContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 div.emptyItemText {
   padding: 16px;
   font-size: 16px;
   text-align: center;
   white-space: pre-wrap;
   color: var(--fg);
 }
 
 div.threadListContainer {
   display: flex;
   flex-direction: column;
 }
+img.longArrow {
+  height: 40px;
+  width: 25px;
+  position: absolute;
+  left: 28.5px;
+  top: -18px;
+}
+
+img.arrow {
+  position: absolute;
+  left: 28px;
+  top: -10px;
+}
diff --git a/web/chat/sidebar-item.react.js b/web/chat/sidebar-item.react.js
index c3a6ee044..bf0eb98d7 100644
--- a/web/chat/sidebar-item.react.js
+++ b/web/chat/sidebar-item.react.js
@@ -1,48 +1,55 @@
 // @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 SWMansionIcon from '../SWMansionIcon.react';
 import css from './chat-thread-list.css';
 
 type Props = {
   +sidebarInfo: SidebarInfo,
   +extendArrow?: boolean,
 };
 function SidebarItem(props: Props): React.Node {
   const {
     sidebarInfo: { threadInfo },
     extendArrow = false,
   } = props;
   const {
     currentUser: { unread },
   } = threadInfo;
 
   const onClick = useOnClickThread(threadInfo);
 
   const unreadCls = classNames(css.sidebarTitle, { [css.unread]: unread });
-
-  let arrowExtender;
+  let arrow;
   if (extendArrow) {
-    arrowExtender = <div className={css.threadArrowExtender} />;
+    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 (
     <>
-      {arrowExtender}
-      <SWMansionIcon icon="right-angle-arrow" size={28} />
+      {arrow}
       <div className={css.spacer} />
       <a className={css.threadButtonSidebar} onClick={onClick}>
         <div className={css.threadRow}>
           <div className={unreadCls}>{threadInfo.uiName}</div>
         </div>
       </a>
     </>
   );
 }
 
 export default SidebarItem;