diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css
index 4dc74d889..afdce9c49 100644
--- a/web/sidebar/community-drawer-item.css
+++ b/web/sidebar/community-drawer-item.css
@@ -1,69 +1,64 @@
 .threadEntry {
   display: flex;
   flex-direction: row;
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
 .active {
-  background-color: var(--active-drawer-item);
+  background-color: var(--active-drawer-item-bg);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
 
 .threadListContainer {
   display: flex;
   flex-direction: column;
 }
 
 .titleWrapper {
   overflow: hidden;
   width: 100%;
 }
 
 .title {
   text-overflow: ellipsis;
   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 {
   width: 24px;
   align-items: center;
   justify-content: center;
   display: flex;
 }
 
 .communityBase {
   padding: 2px;
   padding-right: 4px;
   overflow: hidden;
 }
 
 .communityExpanded {
   background-color: var(--drawer-open-community-bg);
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   padding-top: 4px;
   padding-bottom: 4px;
 }
 
 .subchannelsButton {
   margin-bottom: 6px;
   margin-top: 4px;
   display: flex;
   align-items: center;
 }
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
index 3d7dd412c..4fa8b4f16 100644
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -1,163 +1,166 @@
 // @flow
 
 import classnames from 'classnames';
 import * as React from 'react';
 
 import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
 
 import type { HandlerProps } from './community-drawer-item-handlers.react.js';
 import css from './community-drawer-item.css';
 import { ExpandButton } from './expand-buttons.react.js';
 import SubchannelsButton from './subchannels-button.react.js';
 
 export type DrawerItemProps = {
   +itemData: CommunityDrawerItemData<string>,
   +toggleExpanded?: (threadID: string) => void,
   +expanded: boolean,
   +paddingLeft: number,
   +expandable?: boolean,
   +handler: React.ComponentType<HandlerProps>,
 };
 
 const indentation = 14;
 const subchannelsButtonIndentation = 24;
 
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
     expanded,
     toggleExpanded,
     paddingLeft,
     expandable = true,
     handler: Handler,
   } = props;
 
   const children = React.useMemo(() => {
     if (!expanded) {
       return null;
     }
     if (hasSubchannelsButton) {
       const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
       return (
         <div
           className={css.subchannelsButton}
           style={{ paddingLeft: buttonPaddingLeft }}
         >
           <SubchannelsButton threadInfo={threadInfo} />
         </div>
       );
     }
     if (!itemChildren) {
       return null;
     }
     return itemChildren.map(item => (
       <MemoizedCommunityDrawerItemChat
         itemData={item}
         key={item.threadInfo.id}
         paddingLeft={paddingLeft + indentation}
         expandable={expandable}
         handler={Handler}
       />
     ));
   }, [
     expanded,
     hasSubchannelsButton,
     itemChildren,
     paddingLeft,
     threadInfo,
     expandable,
     Handler,
   ]);
 
   const onExpandToggled = React.useCallback(
     () => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
     [toggleExpanded, threadInfo.id],
   );
 
   const itemExpandButton = React.useMemo(() => {
     if (!expandable) {
       return null;
     }
     if (itemChildren?.length === 0 && !hasSubchannelsButton) {
       return (
         <div className={css.buttonContainer}>
           <ExpandButton disabled={true} />
         </div>
       );
     }
     return (
       <div className={css.buttonContainer}>
         <ExpandButton onClick={onExpandToggled} expanded={expanded} />
       </div>
     );
   }, [
     expandable,
     itemChildren?.length,
     hasSubchannelsButton,
     onExpandToggled,
     expanded,
   ]);
 
   const [handler, setHandler] = React.useState({
     // eslint-disable-next-line no-unused-vars
     onClick: event => {},
   });
 
   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({
     [css.threadEntry]: true,
     [css.active]: handler.isActive,
   });
 
   return (
     <>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
       <div className={threadEntry} style={style}>
         {itemExpandButton}
         <a onClick={handler.onClick} className={css.titleWrapper}>
           <div className={titleLabel}>{uiName}</div>
         </a>
       </div>
       <div className={css.threadListContainer}>{children}</div>
     </>
   );
 }
 
 export type CommunityDrawerItemChatProps = {
   +itemData: CommunityDrawerItemData<string>,
   +paddingLeft: number,
   +expandable?: boolean,
   +handler: React.ComponentType<HandlerProps>,
 };
 
 function CommunityDrawerItemChat(
   props: CommunityDrawerItemChatProps,
 ): React.Node {
   const [expanded, setExpanded] = React.useState(false);
 
   const toggleExpanded = React.useCallback(() => {
     setExpanded(isExpanded => !isExpanded);
   }, []);
 
   return (
     <MemoizedCommunityDrawerItem
       {...props}
       expanded={expanded}
       toggleExpanded={toggleExpanded}
     />
   );
 }
 
 const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> = React.memo(
   CommunityDrawerItemChat,
 );
 
 const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> = React.memo(
   CommunityDrawerItem,
 );
 
 export default MemoizedCommunityDrawerItem;
diff --git a/web/sidebar/community-drawer.css b/web/sidebar/community-drawer.css
index 981e23002..bb144a6e2 100644
--- a/web/sidebar/community-drawer.css
+++ b/web/sidebar/community-drawer.css
@@ -1,14 +1,12 @@
 .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 {
   display: none;
 }
diff --git a/web/sidebar/community-drawer.react.js b/web/sidebar/community-drawer.react.js
index 002614ea3..77c3e063f 100644
--- a/web/sidebar/community-drawer.react.js
+++ b/web/sidebar/community-drawer.react.js
@@ -1,96 +1,96 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   childThreadInfos,
   communityThreadSelector,
 } from 'lib/selectors/thread-selectors.js';
 import {
   createRecursiveDrawerItemsData,
   appendSuffix,
 } from 'lib/utils/drawer-utils.react.js';
 import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
 
 import CommunityDrawerItemCommunity from './community-drawer-item-community.react.js';
 import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
 import css from './community-drawer.css';
 import { ThreadListProvider } from '../chat/thread-list-provider.js';
 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');
 
 function CommunityDrawer(): React.Node {
   const tab = useSelector(state => state.navInfo.tab);
   const childThreadInfosMap = useSelector(childThreadInfos);
   const communities = useSelector(communityThreadSelector);
   const resolvedCommunities = useResolvedThreadInfos(communities);
   const communitiesSuffixed = React.useMemo(
     () => appendSuffix(resolvedCommunities),
     [resolvedCommunities],
   );
 
   const drawerItemsData = createRecursiveDrawerItemsData(
     childThreadInfosMap,
     communitiesSuffixed,
     labelStyles,
     maxDepth,
   );
 
   const [openCommunity, setOpenCommunity] = React.useState(
     communitiesSuffixed.length === 1 ? communitiesSuffixed[0].id : null,
   );
 
   const setOpenCommunityOrClose = React.useCallback((index: string) => {
     setOpenCommunity(open => (open === index ? null : index));
   }, []);
 
   const communitiesComponentsDefault = React.useMemo(
     () =>
       drawerItemsData.map(item => (
         <CommunityDrawerItemCommunity
           itemData={item}
           key={`${item.threadInfo.id}_chat`}
           toggleExpanded={setOpenCommunityOrClose}
           expanded={item.threadInfo.id === openCommunity}
           paddingLeft={10}
           expandable={true}
           handler={HandlerChat}
         />
       )),
     [drawerItemsData, openCommunity, setOpenCommunityOrClose],
   );
 
   const communitiesComponentsCal = React.useMemo(
     () =>
       drawerItemsData.map(item => (
         <CommunityDrawerItemCommunity
           itemData={item}
           key={`${item.threadInfo.id}_cal`}
           expanded={false}
           paddingLeft={10}
           expandable={false}
           handler={HandlerCal}
         />
       )),
     [drawerItemsData],
   );
 
   const defaultStyle = tab === 'calendar' ? css.hidden : null;
   const calStyle = tab !== 'calendar' ? css.hidden : null;
 
   return (
     <ThreadListProvider>
       <div className={css.container}>
         <div className={defaultStyle}>{communitiesComponentsDefault}</div>
         <div className={calStyle}>{communitiesComponentsCal}</div>
       </div>
     </ThreadListProvider>
   );
 }
 
 export default CommunityDrawer;
diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
index 71f25a01c..ebd9a73b7 100644
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,61 +1,74 @@
 .container {
   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;
 }
 
 .settingsIcon {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--settings-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
 }
 
 .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
index 2a211d5c7..b5a34d463 100644
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -1,86 +1,94 @@
 // @flow
 
 import classNames from 'classnames';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 
 import CommunityDrawer from './community-drawer.react.js';
 import css from './community-picker.css';
 import {
   clearCalendarCommunityFilter,
   updateNavInfoActionType,
 } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 function CommunityPicker(): React.Node {
   const dispatch = useDispatch();
 
   const openAccountSettings = React.useCallback(
     (event: SyntheticEvent<HTMLButtonElement>) => {
       event.preventDefault();
       dispatch({
         type: updateNavInfoActionType,
         payload: { tab: 'settings', settingsSection: 'account' },
       });
     },
     [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();
       if (isCalendarOpen) {
         dispatch({
           type: clearCalendarCommunityFilter,
         });
       } else {
         dispatch({
           type: updateNavInfoActionType,
           payload: { tab: 'chat' },
         });
       }
     },
     [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>
   );
 }
 
 export default CommunityPicker;
diff --git a/web/style.css b/web/style.css
index f885db028..76c8ed641 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,229 +1,229 @@
 *,
 *:before,
 *:after {
   padding: 0;
   margin: 0;
   -ms-overflow-style: -ms-autohiding-scrollbar;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 html {
   height: 100%;
   font-size: 62.5%;
 }
 body {
   font-family: var(--font-stack);
   background: var(--bg);
   height: 100%;
   overflow: hidden;
   font-size: 1.6rem;
 }
 a {
   text-decoration: none;
   color: #2a5db0;
   cursor: pointer;
 }
 button {
   cursor: pointer;
 }
 img,
 iframe {
   display: block;
 }
 input[type='text'],
 input[type='password'],
 textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   -webkit-border-radius: 0;
   border: 1px solid #dddddd;
   border-radius: 1px;
   font-family: var(--font-stack);
 }
 
 button svg {
   vertical-align: top;
 }
 :global(#react-root) {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
 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'
     'sBar app app app app app app app app app app app app';
 }
 
 header.header {
   background: var(--bg);
   z-index: 1;
   grid-area: nav;
 }
 div.main-header {
   height: 64px;
   background: var(--bg);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--border-color);
 }
 div.main-header > .wordmark {
   color: var(--fg);
   padding-left: 92px;
   font-family: var(--font-logo);
   line-height: var(--line-height-text);
   font-weight: var(--semi-bold);
   font-size: var(--logo-font-22);
   margin-right: 40px;
 }
 .wordmark > a {
   color: inherit;
 }
 .electron-draggable {
   -webkit-app-region: drag;
 }
 .electron-non-draggable {
   -webkit-app-region: no-drag;
 }
 
 div.main-content-container {
   position: relative;
   grid-area: app;
   display: flex;
   overflow: hidden;
 }
 div.main-content-container-column {
   flex-direction: column;
 }
 div.main-content {
   display: flex;
   flex: 1;
   overflow: hidden;
 }
 
 .switcher {
   border-right: 1px solid var(--border-color);
 }
 
 div.upper-right {
   position: absolute;
   top: 0;
   right: 0;
   padding: 15px 16px;
 }
 .sidebar {
   display: flex;
   grid-area: sBar;
 }
 span.loading-indicator-loading {
   display: inline-block;
 }
 @keyframes loading-indicator-loading {
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
 }
 span.loading-indicator-loading-medium:after {
   content: ' ';
   display: block;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-large:after {
   content: ' ';
   display: block;
   width: 25px;
   height: 25px;
   border-radius: 50%;
   border: 3px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-loading-small:after {
   content: ' ';
   display: block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   border: 2px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation-name: loading-indicator-loading;
   animation-duration: 1.2s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 span.loading-indicator-black:after {
   border-color: #000 transparent #000 transparent;
 }
 span.loading-indicator-error {
   font-weight: bold;
   color: white;
   line-height: 0;
 }
 span.loading-indicator-error-black {
   font-weight: bold;
   color: red;
   line-height: 0;
 }
 
 .hidden {
   display: none;
 }
 .italic {
   font-style: italic;
 }
 
 span.page-loading {
   margin-top: 5px;
   margin-right: 12px;
   float: left;
 }
 span.page-error {
   margin: 15px;
   font-size: 42px;
   float: left;
   color: red;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2),
   only screen and (min--moz-device-pixel-ratio: 2),
   only screen and (-o-min-device-pixel-ratio: 2/1),
   only screen and (min-device-pixel-ratio: 2),
   only screen and (min-resolution: 320dpi),
   only screen and (min-resolution: 2dppx) {
   header.header,
   header.main-header,
   div.splash-header-container,
   div.splash-top-container,
   div.splash-bottom,
   div.calendar-filters-container {
     background: var(--bg);
   }
 }
 
 @media (hover: none) {
   div.splash-header-container,
   div.splash-top-container,
   div.splash-bottom {
     background-attachment: initial;
   }
 }
diff --git a/web/theme.css b/web/theme.css
index 269245907..2dab8a119 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,203 +1,204 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --logo-bg: #111827;
   --spoiler-color: #33332c;
   --loading-foreground: #1b0e38;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
 
   --btn-bg-filled: var(--violet-dark-100);
   --btn-bg-outline: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-disabled: var(--shades-black-80);
   --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-80);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --community-settings-selected: var(--violet-dark-60);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --modal-fg: var(--shades-white-60);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-preview-secondary: var(--shades-black-70);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --message-action-tooltip-bg-light: var(--shades-black-80);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-color-active: var(--shades-white-60);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
   --members-modal-member-text: var(--shades-black-60);
   --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
   --subchannels-modal-color: var(--shades-black-60);
   --subchannels-modal-color-hover: var(--shades-white-100);
   --color-selector-active-bg: var(--shades-black-80);
   --relationship-modal-color: var(--shades-black-60);
   --arrow-extension-color: var(--shades-black-60);
   --modal-close-color: var(--shades-black-60);
   --modal-close-color-hover: var(--shades-white-100);
   --add-members-group-header-color: var(--shades-black-60);
   --add-members-item-color: var(--shades-black-60);
   --add-members-item-color-hover: var(--shades-white-100);
   --add-members-item-disabled-color: var(--shades-black-80);
   --add-members-item-disabled-color-hover: var(--shades-black-60);
   --add-members-remove-pending-color: var(--error-primary);
   --add-members-remove-pending-color-hover: var(--error-light-50);
   --radio-border: var(--shades-black-70);
   --radio-color: var(--shades-white-60);
   --notification-settings-option-selected-bg: var(--shades-black-80);
   --notification-settings-option-title-color: var(--shades-white-90);
   --notification-settings-option-color: var(--shades-white-60);
   --notification-settings-option-invalid-color: var(--shades-black-80);
   --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);
   --thread-creation-search-container-bg: var(--shades-black-90);
   --thread-creation-close-search-color: var(--shades-black-60);
   --thread-creation-search-item-bg-hover: var(--shades-black-80);
   --thread-creation-search-item-info-color: var(--shades-black-60);
   --chat-message-list-active-border: #5989d6;
   --sidebars-modal-color: var(--shades-black-60);
   --sidebars-modal-color-hover: var(--shades-white-100);
   --inline-engagement-bg: var(--shades-black-70);
   --inline-engagement-bg-hover: var(--shades-black-80);
   --inline-engagement-color: var(--fg);
   --compose-subchannel-header-fg: var(--shades-black-60);
   --compose-subchannel-header-bg: var(--shades-black-80);
   --compose-subchannel-label-color: var(--shades-black-60);
   --compose-subchannel-mark-color: var(--violet-light-100);
   --enum-option-icon-color: var(--violet-dark-100);
   --show-password-bg-hover: var(--shades-black-70);
   --typeahead-overlay-light: var(--shades-black-80);
   --typeahead-overlay-dark: var(--shades-black-90);
   --typeahead-overlay-text: var(--shades-white-100);
   --typeahead-overlay-shadow-primary: rgba(0, 0, 0, 0.25);
   --typeahead-overlay-shadow-secondary: rgba(0, 0, 0, 0.4);
   --spoiler-text-color: var(--spoiler-color);
   --spoiler-background-color: var(--spoiler-color);
   --purple-link: var(--violet-light-100);
   --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);
 }