diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
index 079cd20d9d..956c80b246 100644
--- a/src/app/explorer/page.tsx
+++ b/src/app/explorer/page.tsx
@@ -89,7 +89,7 @@ async function YourGuildsSection() {
               </p>
             </div>
 
-            <SignInButton />
+            <SignInButton colorScheme="primary" />
           </div>
         }
       >
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ff0be76648..2d18301eb7 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,8 +8,10 @@ export const Header = () => (
     {/* TODO: NavMenu component */}
     <Card className="h-10 w-24 rounded-xl" />
 
-    <AuthBoundary fallback={<SignInButton />}>
-      <SignOutButton />
-    </AuthBoundary>
+    <Card className="rounded-xl">
+      <AuthBoundary fallback={<SignInButton variant="ghost" />}>
+        <SignOutButton />
+      </AuthBoundary>
+    </Card>
   </header>
 );
diff --git a/src/components/SignInButton.tsx b/src/components/SignInButton.tsx
index 5ad2ac6cc0..1731cddce8 100644
--- a/src/components/SignInButton.tsx
+++ b/src/components/SignInButton.tsx
@@ -17,7 +17,6 @@ export const SignInButton = ({
     <Button
       className={cn("h-10", className)}
       variant="solid"
-      colorScheme="primary"
       {...props}
       leftIcon={<SignIn weight="bold" />}
       onClick={() => setSignInDialogOpen(true)}
diff --git a/src/components/SignOutButton.tsx b/src/components/SignOutButton.tsx
index 137724e1ca..da87504c97 100644
--- a/src/components/SignOutButton.tsx
+++ b/src/components/SignOutButton.tsx
@@ -10,6 +10,7 @@ export const SignOutButton = () => {
   return (
     <Button
       className="h-10"
+      variant="ghost"
       leftIcon={<SignOut weight="bold" />}
       onClick={() => signOut(pathname)}
     >