diff --git a/web/navigation-sidebar/community-list.css b/web/navigation-sidebar/community-list.css
new file mode 100644
index 000000000..fc22775b1
--- /dev/null
+++ b/web/navigation-sidebar/community-list.css
@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 18px;
+  padding: 16px 12px;
+  overflow-y: scroll;
+  flex: 1;
+}
diff --git a/web/navigation-sidebar/community-list.react.js b/web/navigation-sidebar/community-list.react.js
new file mode 100644
index 000000000..e3582b182
--- /dev/null
+++ b/web/navigation-sidebar/community-list.react.js
@@ -0,0 +1,29 @@
+// @flow
+
+import * as React from 'react';
+
+import { communityThreadSelector } from 'lib/selectors/thread-selectors.js';
+import { useAppendCommunitySuffix } from 'lib/utils/drawer-utils.react.js';
+import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js';
+
+import CommunityListItem from './community-list-item.react.js';
+import css from './community-list.css';
+import { useSelector } from '../redux/redux-utils.js';
+
+function CommunityList(): React.Node {
+  const communities = useSelector(communityThreadSelector);
+  const resolvedCommunities = useResolvedThreadInfos(communities);
+  const communitiesSuffixed = useAppendCommunitySuffix(resolvedCommunities);
+
+  const communityList = React.useMemo(
+    () =>
+      communitiesSuffixed.map(community => (
+        <CommunityListItem key={community.id} threadInfo={community} />
+      )),
+    [communitiesSuffixed],
+  );
+
+  return <div className={css.container}>{communityList}</div>;
+}
+
+export default CommunityList;