diff --git a/web/components/button.tsx b/web/components/button.tsx
index d279d9a0..4e1936ad 100644
--- a/web/components/button.tsx
+++ b/web/components/button.tsx
@@ -5,8 +5,8 @@ export function Button(props: {
   className?: string
   onClick?: () => void
   children?: ReactNode
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' | 'gradient'
   type?: 'button' | 'reset' | 'submit'
   disabled?: boolean
 }) {
@@ -26,6 +26,7 @@ export function Button(props: {
     md: 'px-4 py-2 text-sm',
     lg: 'px-4 py-2 text-base',
     xl: 'px-6 py-3 text-base',
+    '2xl': 'px-6 py-3 text-xl',
   }[size]
 
   return (
@@ -40,6 +41,8 @@ export function Button(props: {
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
         color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
         color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200',
+        color === 'gradient' &&
+          'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
         className
       )}
       disabled={disabled}