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
@@ -1,34 +1,43 @@
 .container {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: 84px;
   background: var(--community-bg);
   padding: 24px 0 32px 0;
   border-right: 1px solid var(--border-color);
   flex-grow: 1;
+  overflow: auto;
 }
 
 .spacer {
   flex-grow: 1;
 }
 
-.container button {
-  color: var(--fg);
+.activeContainer {
+  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;
+  align-items: center;
 }
 
-.container svg {
+.activeContainer svg {
   color: var(--fg);
   padding: 0;
 }
 
-.activeContainer {
+.inactiveContainer {
   display: flex;
-  justify-content: center;
-  width: 100%;
-  box-sizing: border-box;
-  border-left: 8px solid var(--community-settings-selected);
-  border-right: 8px solid transparent;
+  padding-left: 20px;
+  height: 40px;
+  align-items: center;
+}
+
+.inactiveContainer svg {
+  color: var(--fg);
+  padding: 0;
 }
 
 .settingsIcon {
@@ -40,3 +49,8 @@
   height: 30px;
   border-radius: 50%;
 }
+
+.drawerWrapper {
+  align-self: flex-start;
+  width: 100%;
+}
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
@@ -7,6 +7,7 @@
 import { updateNavInfoActionType } from '../redux/action-types.js';
 import { useSelector } from '../redux/redux-utils.js';
 import SWMansionIcon from '../SWMansionIcon.react';
+import CommunityDrawer from './community-drawer.react';
 import css from './community-picker.css';
 
 function CommunityPicker(): React.Node {
@@ -25,6 +26,7 @@
   const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
   const settingsButtonContainerClass = classNames({
     [css.activeContainer]: isSettingsOpen,
+    [css.inactiveContainer]: !isSettingsOpen,
   });
 
   const openChat = React.useCallback(
@@ -45,6 +47,7 @@
   );
   const inboxButtonContainerClass = classNames({
     [css.activeContainer]: isInboxOpen,
+    [css.inactiveContainer]: !isInboxOpen,
   });
 
   return (
@@ -52,6 +55,9 @@
       <a className={inboxButtonContainerClass} onClick={openChat}>
         <SWMansionIcon icon="inbox" size={36} />
       </a>
+      <div className={css.drawerWrapper}>
+        <CommunityDrawer />
+      </div>
       <div className={css.spacer} />
       <div className={settingsButtonContainerClass}>
         <a className={css.settingsIcon} onClick={openAccountSettings}>
diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -3,6 +3,7 @@
   background: var(--bg);
   border-right: 1px solid var(--border-color);
   display: flex;
+  width: 560px;
 }
 
 .navigationPanelContainer {
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -58,7 +58,7 @@
   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';
+    'sBar sBar app app app app app app app app app app app';
 }
 
 header.header {