diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css
--- a/web/sidebar/community-drawer-item.css
+++ b/web/sidebar/community-drawer-item.css
@@ -6,7 +6,7 @@
 }
 
 .active {
-  background-color: var(--active-drawer-item);
+  background-color: var(--active-drawer-item-bg);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
@@ -26,18 +26,13 @@
   white-space: nowrap;
   overflow: hidden;
   color: var(--drawer-item-color);
-  line-height: 24px;
-}
-
-.titleLevel0 {
-  font-size: var(--l-font-18);
+  font-size: var(--s-font-14);
   font-weight: var(--semi-bold);
+  line-height: 22px;
 }
 
-.titleLevel1,
-.titleLevel2 {
-  font-size: var(--m-font-16);
-  font-weight: var(--semi-bold);
+.activeTitle {
+  color: var(--drawer-active-item-color);
 }
 
 .buttonContainer {
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -105,7 +105,10 @@
   });
 
   const { uiName } = useResolvedThreadInfo(threadInfo);
-  const titleLabel = classnames(css.title, css[labelStyle]);
+  const titleLabel = classnames({
+    [css[labelStyle]]: true,
+    [css.activeTitle]: handler.isActive,
+  });
 
   const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
   const threadEntry = classnames({
diff --git a/web/sidebar/community-drawer.css b/web/sidebar/community-drawer.css
--- a/web/sidebar/community-drawer.css
+++ b/web/sidebar/community-drawer.css
@@ -1,12 +1,10 @@
 .container {
-  background-color: var(--drawer-bg);
   display: flex;
   overflow-y: auto;
   flex-direction: column;
-  padding-right: 8px;
   padding-top: 8px;
   padding-bottom: 8px;
-  align-self: flex-start;
+  padding-right: 16px;
 }
 
 .hidden {
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -19,7 +19,7 @@
 import { useSelector } from '../redux/redux-utils.js';
 
 const maxDepth = 2;
-const labelStyles = ['titleLevel0', 'titleLevel1', 'titleLevel2'];
+const labelStyles = ['title'];
 
 const HandlerChat = getCommunityDrawerItemHandler('chat');
 const HandlerCal = getCommunityDrawerItemHandler('calendar');
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -2,37 +2,50 @@
   display: flex;
   flex-direction: column;
   background: var(--community-bg);
-  padding: 24px 0 32px 0;
   border-right: 1px solid var(--border-color);
   flex-grow: 1;
   overflow: auto;
-  width: 400px;
 }
 
 .spacer {
   flex-grow: 1;
 }
 
-.activeContainer {
+.header {
+  border-bottom: 1px solid var(--community-drawer-lines);
+  padding: 10px 0 10px 0;
+  align-items: center;
   display: flex;
-  width: 100%;
-  box-sizing: border-box;
-  border-left: 8px solid var(--community-settings-selected);
-  border-right: 8px solid transparent;
-  padding-left: 12px;
-  height: 40px;
+  margin-right: 16px;
+}
+
+.footer {
+  border-top: 1px solid var(--community-drawer-lines);
+  padding: 12px 0 12px 0;
   align-items: center;
+  display: flex;
+  margin-right: 16px;
 }
 
-.inactiveContainer {
+.sideLine {
+  width: 3px;
+  height: 24px;
+  border-radius: 0 4px 4px 0;
+  margin-right: 14px;
+}
+
+.sideLineActive {
+  background-color: var(--community-settings-selected);
+}
+
+.itemContainer {
   display: flex;
-  padding-left: 20px;
   height: 40px;
   align-items: center;
+  width: 100%;
 }
 
-.inactiveContainer svg,
-.activeContainer svg {
+.itemContainer svg {
   color: var(--fg);
   padding: 0;
 }
@@ -48,13 +61,13 @@
 }
 
 .drawerWrapper {
-  align-self: flex-start;
   width: 100%;
+  overflow: auto;
 }
 
-.inboxButtonTitle {
+.buttonTitle {
   font-weight: 500;
-  font-size: var(--l-font-18);
+  font-size: var(--s-font-14);
   line-height: 22px;
   padding-left: 12px;
   color: var(--fg);
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -27,14 +27,8 @@
     },
     [dispatch],
   );
-  const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
-  const settingsButtonContainerClass = classNames({
-    [css.activeContainer]: isSettingsOpen,
-    [css.inactiveContainer]: !isSettingsOpen,
-  });
 
   const isCalendarOpen = useSelector(state => state.navInfo.tab === 'calendar');
-
   const onPressInbox = React.useCallback(
     (event: SyntheticEvent<HTMLAnchorElement>) => {
       event.preventDefault();
@@ -51,32 +45,46 @@
     },
     [dispatch, isCalendarOpen],
   );
+
+  const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox';
+
   const isInboxOpen = useSelector(
     state =>
       state.navInfo.tab === 'chat' ||
       state.navInfo.tab === 'apps' ||
       state.navInfo.tab === 'calendar',
   );
-  const inboxButtonContainerClass = classNames({
-    [css.activeContainer]: isInboxOpen,
-    [css.inactiveContainer]: !isInboxOpen,
-  });
+  const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
 
-  const inboxButtonTitle = isCalendarOpen ? 'All communities' : 'Inbox';
+  const sideLineInbox = classNames({
+    [css.sideLine]: true,
+    [css.sideLineActive]: isInboxOpen,
+  });
+  const sideLineSettings = classNames({
+    [css.sideLine]: true,
+    [css.sideLineActive]: isSettingsOpen,
+  });
 
   return (
     <div className={css.container}>
-      <a className={inboxButtonContainerClass} onClick={onPressInbox}>
-        <SWMansionIcon icon="inbox" size={36} />
-        <div className={css.inboxButtonTitle}> {inboxButtonTitle} </div>
-      </a>
+      <div className={css.header}>
+        <a className={css.itemContainer} onClick={onPressInbox}>
+          <div className={sideLineInbox} />
+          <SWMansionIcon icon="inbox" size={24} />
+          <div className={css.buttonTitle}> {inboxButtonTitle} </div>
+        </a>
+      </div>
       <div className={css.drawerWrapper}>
         <CommunityDrawer />
       </div>
       <div className={css.spacer} />
-      <div className={settingsButtonContainerClass}>
-        <a className={css.settingsIcon} onClick={openAccountSettings}>
-          <SWMansionIcon icon="settings" size={22} />
+      <div className={css.footer}>
+        <a className={css.itemContainer} onClick={openAccountSettings}>
+          <div className={sideLineSettings} />
+          <div className={css.settingsIcon} onClick={openAccountSettings}>
+            <SWMansionIcon icon="settings" size={22} />
+          </div>
+          <div className={css.buttonTitle}>Settings</div>
         </a>
       </div>
     </div>
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -54,7 +54,7 @@
 div.layout {
   height: 100vh;
   display: grid;
-  grid-template-columns: 400px repeat(12, 1fr);
+  grid-template-columns: 300px repeat(12, 1fr);
   grid-template-rows: 65px calc(100vh - 65px);
   grid-template-areas:
     'nav nav nav nav nav nav nav nav nav nav nav nav nav'
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -197,7 +197,8 @@
   --drawer-expand-button: var(--shades-black-60);
   --drawer-expand-button-disabled: var(--shades-black-80);
   --drawer-item-color: var(--shades-white-60);
+  --drawer-active-item-color: var(--shades-white-100);
   --drawer-open-community-bg: #191919;
-  --drawer-bg: var(--shades-black-90);
-  --active-drawer-item: rgba(0, 0, 0, 0.5);
+  --active-drawer-item-bg: rgba(0, 0, 0, 0.5);
+  --community-drawer-lines: rgba(255, 255, 255, 0.08);
 }