diff --git a/web/sidebar/community-drawer-content.react.js b/web/sidebar/community-drawer-content.react.js
--- a/web/sidebar/community-drawer-content.react.js
+++ b/web/sidebar/community-drawer-content.react.js
@@ -46,6 +46,7 @@
       key={item.threadInfo.id}
       toggleExpanded={setOpenCommunityOrClose}
       expanded={item.threadInfo.id === openCommunity}
+      paddingLeft={10}
     />
   ));
 
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
@@ -1,8 +1,8 @@
 .threadEntry {
   display: flex;
   flex-direction: row;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
 .threadListContainer {
@@ -12,6 +12,7 @@
 
 .titleWrapper {
   overflow: hidden;
+  width: 100%;
 }
 
 .title {
@@ -44,14 +45,9 @@
   display: flex;
 }
 
-.chatItem {
-  margin-left: 16px;
-}
-
 .communityBase {
   padding: 2px;
-  padding-right: 24px;
-  padding-left: 8px;
+  padding-right: 4px;
   overflow: hidden;
 }
 
@@ -62,7 +58,6 @@
 }
 
 .subchannelsButton {
-  margin-left: 24px;
   margin-bottom: 6px;
   margin-top: 4px;
   display: flex;
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
@@ -16,13 +16,18 @@
   +itemData: CommunityDrawerItemData<string>,
   +toggleExpanded: (threadID: string) => void,
   +expanded: boolean,
+  +paddingLeft: number,
 };
 
+const indentation = 12;
+const subchannelsButtonIndentation = 24;
+
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
     expanded,
     toggleExpanded,
+    paddingLeft,
   } = props;
 
   const children = React.useMemo(() => {
@@ -30,8 +35,12 @@
       return null;
     }
     if (hasSubchannelsButton) {
+      const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
       return (
-        <div className={css.subchannelsButton}>
+        <div
+          className={css.subchannelsButton}
+          style={{ paddingLeft: buttonPaddingLeft }}
+        >
           <SubchannelsButton threadInfo={threadInfo} />
         </div>
       );
@@ -43,9 +52,10 @@
       <MemoizedCommunityDrawerItemChat
         itemData={item}
         key={item.threadInfo.id}
+        paddingLeft={paddingLeft + indentation}
       />
     ));
-  }, [expanded, hasSubchannelsButton, itemChildren, threadInfo]);
+  }, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);
 
   const onExpandToggled = React.useCallback(() => {
     toggleExpanded(threadInfo.id);
@@ -91,10 +101,12 @@
 
   const titleLabel = classnames(css.title, css[labelStyle]);
 
+  const wrapper = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
+
   return (
     <>
       <Handler setHandler={setHandler} threadInfo={threadInfo} />
-      <div className={css.threadEntry}>
+      <div className={css.threadEntry} style={wrapper}>
         {itemExpandButton}
         <a onClick={onClick} className={css.titleWrapper}>
           <div className={titleLabel}>{threadInfo.uiName}</div>
@@ -107,6 +119,7 @@
 
 export type CommunityDrawerItemChatProps = {
   +itemData: CommunityDrawerItemData<string>,
+  +paddingLeft: number,
 };
 
 function CommunityDrawerItemChat(
@@ -119,13 +132,11 @@
   }, []);
 
   return (
-    <div className={css.chatItem}>
-      <CommunityDrawerItem
-        {...props}
-        expanded={expanded}
-        toggleExpanded={toggleExpanded}
-      />
-    </div>
+    <CommunityDrawerItem
+      {...props}
+      expanded={expanded}
+      toggleExpanded={toggleExpanded}
+    />
   );
 }