diff --git a/web/sidebar/subchannels-button.css b/web/sidebar/subchannels-button.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/subchannels-button.css
@@ -0,0 +1,18 @@
+.iconWrapper {
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  margin-right: 2px;
+}
+
+.icon {
+  color: var(--drawer-expand-button);
+}
+
+.text {
+  color: var(--drawer-expand-button);
+  font-size: 14px;
+  font-weight: 500;
+}
diff --git a/web/sidebar/subchannels-button.react.js b/web/sidebar/subchannels-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/subchannels-button.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from 'react';
+import { CornerDownRight } from 'react-feather';
+
+import { useModalContext } from 'lib/components/modal-provider.react';
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import Button from '../components/button.react';
+import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react';
+import css from './subchannels-button.css';
+
+type Props = {
+  +threadInfo: ThreadInfo,
+};
+
+function SubchannelsButton(props: Props): React.Node {
+  const { threadInfo } = props;
+  const { pushModal, popModal } = useModalContext();
+
+  const onClick = React.useCallback(
+    () =>
+      pushModal(
+        <SubchannelsModal threadID={threadInfo.id} onClose={popModal} />,
+      ),
+    [popModal, pushModal, threadInfo.id],
+  );
+
+  return (
+    <Button onClick={onClick}>
+      <div className={css.iconWrapper}>
+        <CornerDownRight size={12} className={css.icon} />
+      </div>
+      <div className={css.text}>Subchannels</div>
+    </Button>
+  );
+}
+
+export default SubchannelsButton;