diff --git a/web/components/comments/reply-toggle.tsx b/web/components/comments/reply-toggle.tsx
new file mode 100644
index 00000000..934efe53
--- /dev/null
+++ b/web/components/comments/reply-toggle.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
+import { Row } from '../layout/row'
+
+export function ReplyToggle(props: {
+  seeReplies: boolean
+  numComments: number
+  onClick: () => void
+}) {
+  const { seeReplies, numComments, onClick } = props
+  return (
+    <button
+      className={clsx(
+        'text-left text-sm text-indigo-600',
+        numComments === 0 ? 'hidden' : ''
+      )}
+      onClick={onClick}
+    >
+      <Row className="items-center gap-1">
+        <div>
+          {numComments} {numComments === 1 ? 'Reply' : 'Replies'}
+        </div>
+        <TriangleDownFillIcon
+          className={clsx('h-2 w-2', seeReplies ? 'rotate-180' : '')}
+        />
+      </Row>
+    </button>
+  )
+}