diff --git a/src/components/NumberButtonSequence.tsx b/src/components/NumberButtonSequence.tsx
new file mode 100644
index 000000000..0b0e2e40c
--- /dev/null
+++ b/src/components/NumberButtonSequence.tsx
@@ -0,0 +1,37 @@
+import { FC } from "react"
+import { Button, HStack } from "@threshold-network/components"
+import { range } from "../utils/range"
+import { StackProps } from "@chakra-ui/react"
+import { ThemeTypings } from "@chakra-ui/styled-system"
+
+interface NumberButtonSequenceProps extends StackProps {
+  numberOfButtons: number
+  selectedButtonNum: number
+  setSelectedButtonNum: (n: number) => void
+  size?: ThemeTypings["components"]["Button"]["sizes"]
+}
+
+const NumberButtonSequence: FC<NumberButtonSequenceProps> = ({
+  numberOfButtons,
+  selectedButtonNum,
+  setSelectedButtonNum,
+  size,
+  ...props
+}) => {
+  return (
+    <HStack spacing={1} {...props}>
+      {range(numberOfButtons, 1).map((n) => (
+        <Button
+          size={size}
+          variant="sequence"
+          isActive={n === selectedButtonNum}
+          onClick={() => setSelectedButtonNum(n)}
+        >
+          {n}
+        </Button>
+      ))}
+    </HStack>
+  )
+}
+
+export default NumberButtonSequence
diff --git a/src/utils/range.ts b/src/utils/range.ts
new file mode 100644
index 000000000..4ff7db211
--- /dev/null
+++ b/src/utils/range.ts
@@ -0,0 +1,3 @@
+export const range = (size: number, startAt = 0) => {
+  return Array.from(Array(size).keys()).map((i) => i + startAt)
+}