diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 093d3f2..f387dfe 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -1,11 +1,12 @@
 import type { ButtonHTMLAttributes } from 'react'
 
-type Variant = 'primary' | 'ghost' | 'danger'
+type Variant = 'primary' | 'ghost' | 'danger' | 'purple'
 
 const variants: Record<Variant, string> = {
   primary: 'bg-fg-100 text-bg-100 hover:bg-fg-200 font-medium',
   ghost:   'text-fg-200 hover:bg-bg-300 hover:text-fg-100',
   danger:  'bg-red-900/40 text-red-400 hover:bg-red-900/60',
+  purple:  'bg-purple-500/15 text-purple-400 hover:bg-purple-500/25 hover:text-purple-300',
 }
 
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
diff --git a/frontend/src/components/ui/GuestBanner.tsx b/frontend/src/components/ui/GuestBanner.tsx
index f8a38d9..0f00e97 100644
--- a/frontend/src/components/ui/GuestBanner.tsx
+++ b/frontend/src/components/ui/GuestBanner.tsx
@@ -1,4 +1,5 @@
 import { InfoIcon } from "../icons/info"
+import { Button } from "./Button"
 
 interface GuestBannerProps {
   onLogin: () => void
@@ -15,12 +16,9 @@ export function GuestBanner({ onLogin }: GuestBannerProps) {
             You're in guest mode — tickets are stored locally in your browser.
           </p>
         </div>
-        <button
-          onClick={onLogin}
-          className="ml-4 shrink-0 rounded-md bg-bg-300 px-3 py-1.5 text-xs font-medium text-fg-100 transition-colors hover:bg-bg-400 cursor-pointer"
-        >
+        <Button onClick={onLogin} variant="primary">
           Sign in with Google
-        </button>
+        </Button>
       </div>
     </div>
   )