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,104 @@
 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';
 
 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,
+      ),
+    [
+      expanded,
+      hasSubchannelsButton,
+      itemChildren,
+      paddingLeft,
+      threadInfo,
+      expandable,
+      Handler,
+    ],
+  );
+
+  const itemExpandButton = React.useMemo(
+    () =>
+      getExpandButton(
+        expandable,
+        itemChildren?.length,
+        hasSubchannelsButton,
+        null,
+        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>) => {
+      if (toggleExpanded) {
+        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, width: '100%' }),
+    [paddingLeft],
+  );
+  const threadEntry = classnames({
+    [css.threadEntry]: true,
+  });
+
   return (
     <div className={classes}>
-      <CommunityDrawerItem {...props} />
+      <Handler setHandler={setHandler} threadInfo={threadInfo} />
+      <a onClick={onClick} className={threadEntry} style={style}>
+        {itemExpandButton}
+        <div className={css.titleWrapper}>
+          <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
@@ -43,7 +43,7 @@
 }
 
 .communityBase {
-  padding-top: 2px;
+  padding-top: 4px;
   padding-bottom: 2px;
   padding-right: 4px;
   overflow: hidden;
@@ -53,7 +53,7 @@
   background-color: var(--drawer-open-community-bg);
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
-  padding-top: 4px;
+  /* 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';
 
 export type DrawerItemProps = {
   +itemData: CommunityDrawerItemData<string>,
@@ -20,9 +22,6 @@
   +handler: React.ComponentType<HandlerProps>,
 };
 
-const indentation = 14;
-const subchannelsButtonIndentation = 24;
-
 function CommunityDrawerItem(props: DrawerItemProps): React.Node {
   const {
     itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
@@ -33,71 +32,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,
+      ),
+    [
+      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,
+        itemChildren?.length,
+        hasSubchannelsButton,
+        onExpandToggled,
+        expanded,
+      ),
+    [
+      expandable,
+      itemChildren?.length,
+      hasSubchannelsButton,
+      onExpandToggled,
+      expanded,
+    ],
+  );
 
   const [handler, setHandler] = React.useState({
     // eslint-disable-next-line no-unused-vars
@@ -161,4 +139,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,82 @@
+// @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: boolean,
+  hasSubchannelsButton: boolean,
+  itemChildren: ?$ReadOnlyArray<CommunityDrawerItemData<string>>,
+  paddingLeft: number,
+  threadInfo: ThreadInfo,
+  expandable: boolean,
+  Handler: React.ComponentType<HandlerProps>,
+): React.Node {
+  if (!expanded || !itemChildren) {
+    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: 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>
+    );
+  }
+  if (!onExpandToggled) {
+    return (
+      <div className={css.buttonContainer}>
+        <ExpandButton expanded={expanded} />
+      </div>
+    );
+  }
+  return (
+    <div className={css.buttonContainer}>
+      <ExpandButton onClick={onExpandToggled} expanded={expanded} />
+    </div>
+  );
+}
+
+export { getChildren, getExpandButton };