diff --git a/web/components/challenges/accept-challenge-button.tsx b/web/components/challenges/accept-challenge-button.tsx
index 9ae83795..46a769c2 100644
--- a/web/components/challenges/accept-challenge-button.tsx
+++ b/web/components/challenges/accept-challenge-button.tsx
@@ -28,7 +28,7 @@ export function AcceptChallengeButton(props: {
     setErrorText('')
   }, [open])
 
-  if (!user) return <SignUpPrompt label={'Sign up to accept this challenge'} />
+  if (!user) return <SignUpPrompt label="Accept this bet" className="mt-4" />
 
   const iAcceptChallenge = () => {
     setLoading(true)
diff --git a/web/components/sign-up-prompt.tsx b/web/components/sign-up-prompt.tsx
index 1a7c10b0..8882ccfd 100644
--- a/web/components/sign-up-prompt.tsx
+++ b/web/components/sign-up-prompt.tsx
@@ -2,17 +2,20 @@ import React from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { withTracking } from 'web/lib/service/analytics'
+import { Button } from './button'
 
-export function SignUpPrompt(props: { label?: string }) {
-  const { label } = props
+export function SignUpPrompt(props: { label?: string; className?: string }) {
+  const { label, className } = props
   const user = useUser()
 
   return user === null ? (
-    <button
-      className="btn flex-1 whitespace-nowrap border-none bg-gradient-to-r from-indigo-500 to-blue-500 px-10 text-lg font-medium normal-case hover:from-indigo-600 hover:to-blue-600"
+    <Button
       onClick={withTracking(firebaseLogin, 'sign up to bet')}
+      className={className}
+      size="lg"
+      color="gradient"
     >
       {label ?? 'Sign up to bet!'}
-    </button>
+    </Button>
   ) : null
 }