diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
new file mode 100644
index 0000000000..a1a4962762
--- /dev/null
+++ b/src/theme/components/Button.ts
@@ -0,0 +1,18 @@
+export const Button = {
+  variants: {
+    primary: {
+      py: '8px',
+      px: '32px',
+      borderRadius: 0,
+      width: { base: '188px', md: 'auto' },
+      // TODO: move to theme colors
+      bg: 'brand.light.primary',
+      _hover: { bg: 'brand.light.secondary' },
+      _focus: {
+        bg: 'brand.light.primary',
+        boxShadow: 'inset 0 0 0 2px #06fece !important'
+      },
+      _active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }
+    }
+  }
+};
diff --git a/src/theme/components/index.ts b/src/theme/components/index.ts
new file mode 100644
index 0000000000..8b166a86e4
--- /dev/null
+++ b/src/theme/components/index.ts
@@ -0,0 +1 @@
+export * from './Button';