diff --git a/components/ButtonGroup.tsx b/components/ButtonGroup.tsx
new file mode 100644
index 0000000..c05dc7c
--- /dev/null
+++ b/components/ButtonGroup.tsx
@@ -0,0 +1,29 @@
+import { styled } from "../stitches.config";
+import { StyledButton } from "./Button";
+
+const ButtonGroup = styled("div", {
+  display: "flex",
+  marginLeft: "1px",
+  [`& ${StyledButton}`]: {
+    marginLeft: "-1px",
+    px: "$4",
+    zIndex: 2,
+    position: "relative",
+    "&:hover, &:focus": {
+      zIndex: 200,
+    },
+  },
+  [`& ${StyledButton}:not(:only-of-type):not(:first-child):not(:last-child)`]: {
+    borderRadius: 0,
+  },
+  [`& ${StyledButton}:first-child:not(:only-of-type)`]: {
+    borderBottomRightRadius: 0,
+    borderTopRightRadius: 0,
+  },
+  [`& ${StyledButton}:last-child:not(:only-of-type)`]: {
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+  },
+});
+
+export default ButtonGroup;