diff --git a/lib/utils/drawer-utils.react.js b/lib/utils/drawer-utils.react.js
--- a/lib/utils/drawer-utils.react.js
+++ b/lib/utils/drawer-utils.react.js
@@ -11,7 +11,7 @@
 
 export type CommunityDrawerItemData<T> = {
   +threadInfo: ThreadInfo,
-  +itemChildren?: $ReadOnlyArray<CommunityDrawerItemData<T>>,
+  +itemChildren: $ReadOnlyArray<CommunityDrawerItemData<T>>,
   +hasSubchannelsButton: boolean,
   +labelStyle: T,
 };
diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -3,18 +3,97 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
+import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+
 import css from './community-drawer-item.css';
 import type { DrawerItemProps } from './community-drawer-item.react.js';
-import CommunityDrawerItem from './community-drawer-item.react.js';
+import {
+  getChildren,
+  getExpandButton,
+} from './community-drawer-utils.react.js';
+import ThreadAvatar from '../components/thread-avatar.react.js';
 
 function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
+  const {
+    itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
+    expanded,
+    toggleExpanded,
+    paddingLeft,
+    expandable = true,
+    handler: Handler,
+  } = props;
+
+  const children = React.useMemo(
+    () =>
+      getChildren({
+        expanded,
+        hasSubchannelsButton,
+        itemChildren,
+        paddingLeft,
+        threadInfo,
+        expandable,
+        handler: Handler,
+      }),
+    [
+      expanded,
+      hasSubchannelsButton,
+      itemChildren,
+      paddingLeft,
+      threadInfo,
+      expandable,
+      Handler,
+    ],
+  );
+
+  const itemExpandButton = React.useMemo(
+    () =>
+      getExpandButton({
+        expandable,
+        childrenLength: itemChildren?.length,
+        hasSubchannelsButton,
+        expanded,
+      }),
+    [expandable, itemChildren?.length, hasSubchannelsButton, expanded],
+  );
+
+  const [handler, setHandler] = React.useState({
+    // eslint-disable-next-line no-unused-vars
+    onClick: event => {},
+    isActive: false,
+  });
+
+  const onClick = React.useCallback(
+    (event: SyntheticEvent<HTMLElement>) => {
+      toggleExpanded?.(threadInfo.id);
+      handler.onClick(event);
+    },
+    [threadInfo.id, toggleExpanded, handler],
+  );
+
   const classes = classnames({
     [css.communityBase]: true,
     [css.communityExpanded]: props.expanded,
   });
+
+  const { uiName } = useResolvedThreadInfo(threadInfo);
+  const titleLabel = classnames({
+    [css[labelStyle]]: true,
+    [css.activeTitle]: handler.isActive,
+  });
+
+  const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
+
   return (
     <div className={classes}>
-      <CommunityDrawerItem {...props} />
+      <Handler setHandler={setHandler} threadInfo={threadInfo} />
+      <a onClick={onClick} className={css.threadEntry} style={style}>
+        {itemExpandButton}
+        <div className={css.titleWrapper}>
+          <ThreadAvatar size="micro" threadInfo={threadInfo} />
+          <div className={titleLabel}>{uiName}</div>
+        </div>
+      </a>
+      <div className={css.threadListContainer}>{children}</div>
     </div>
   );
 }
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
@@ -46,7 +46,7 @@
 }
 
 .communityBase {
-  padding-top: 2px;
+  padding-top: 4px;
   padding-bottom: 2px;
   padding-right: 4px;
   overflow: hidden;
@@ -56,7 +56,6 @@
   background-color: var(--drawer-open-community-bg);
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  padding-top: 4px;
   padding-bottom: 4px;
 }
 
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
@@ -8,8 +8,10 @@
 
 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';
+import {
+  getChildren,
+  getExpandButton,
+} from './community-drawer-utils.react.js';
 import ThreadAvatar from '../components/thread-avatar.react.js';
 import { shouldRenderAvatars } from '../utils/avatar-utils.js';
 
@@ -22,9 +24,6 @@
   +handler: React.ComponentType<HandlerProps>,
 };
 
-const indentation = 14;
-const subchannelsButtonIndentation = 24;
-
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
@@ -35,71 +34,50 @@
     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 children = React.useMemo(
+    () =>
+      getChildren({
+        expanded,
+        hasSubchannelsButton,
+        itemChildren,
+        paddingLeft,
+        threadInfo,
+        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 itemExpandButton = React.useMemo(
+    () =>
+      getExpandButton({
+        expandable,
+        childrenLength: itemChildren.length,
+        hasSubchannelsButton,
+        onExpandToggled,
+        expanded,
+      }),
+    [
+      expandable,
+      itemChildren.length,
+      hasSubchannelsButton,
+      onExpandToggled,
+      expanded,
+    ],
+  );
 
   const [handler, setHandler] = React.useState({
     // eslint-disable-next-line no-unused-vars
@@ -174,4 +152,4 @@
 const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
   React.memo(CommunityDrawerItem);
 
-export default MemoizedCommunityDrawerItem;
+export default MemoizedCommunityDrawerItemChat;
diff --git a/web/sidebar/community-drawer-utils.react.js b/web/sidebar/community-drawer-utils.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer-utils.react.js
@@ -0,0 +1,89 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
+
+import type { HandlerProps } from './community-drawer-item-handlers.react';
+import css from './community-drawer-item.css';
+import CommunityDrawerItemChat from './community-drawer-item.react.js';
+import { ExpandButton } from './expand-buttons.react.js';
+import SubchannelsButton from './subchannels-button.react.js';
+
+const indentation = 14;
+const subchannelsButtonIndentation = 24;
+
+function getChildren({
+  expanded,
+  hasSubchannelsButton,
+  itemChildren,
+  paddingLeft,
+  threadInfo,
+  expandable,
+  handler,
+}: {
+  expanded: boolean,
+  hasSubchannelsButton: boolean,
+  itemChildren: $ReadOnlyArray<CommunityDrawerItemData<string>>,
+  paddingLeft: number,
+  threadInfo: ThreadInfo,
+  expandable: boolean,
+  handler: React.ComponentType<HandlerProps>,
+}): React.Node {
+  if (!expanded) {
+    return null;
+  }
+  if (hasSubchannelsButton) {
+    const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
+    return (
+      <div
+        className={css.subchannelsButton}
+        style={{ paddingLeft: buttonPaddingLeft }}
+      >
+        <SubchannelsButton threadInfo={threadInfo} />
+      </div>
+    );
+  }
+  return itemChildren.map(item => (
+    <CommunityDrawerItemChat
+      itemData={item}
+      key={item.threadInfo.id}
+      paddingLeft={paddingLeft + indentation}
+      expandable={expandable}
+      handler={handler}
+    />
+  ));
+}
+
+function getExpandButton({
+  expandable,
+  childrenLength,
+  hasSubchannelsButton,
+  onExpandToggled,
+  expanded,
+}: {
+  +expandable: boolean,
+  +childrenLength: ?number,
+  +hasSubchannelsButton: boolean,
+  +onExpandToggled?: ?() => ?void,
+  +expanded: boolean,
+}): React.Node {
+  if (!expandable) {
+    return null;
+  }
+  if (childrenLength === 0 && !hasSubchannelsButton) {
+    return (
+      <div className={css.buttonContainer}>
+        <ExpandButton disabled={true} />
+      </div>
+    );
+  }
+  return (
+    <div className={css.buttonContainer}>
+      <ExpandButton onClick={onExpandToggled} expanded={expanded} />
+    </div>
+  );
+}
+
+export { getChildren, getExpandButton };
diff --git a/web/sidebar/expand-buttons.react.js b/web/sidebar/expand-buttons.react.js
--- a/web/sidebar/expand-buttons.react.js
+++ b/web/sidebar/expand-buttons.react.js
@@ -9,7 +9,7 @@
 import Button from '../components/button.react.js';
 
 type Props = {
-  +onClick?: () => mixed,
+  +onClick?: ?() => mixed,
   +expanded?: boolean,
   +disabled?: boolean,
 };