diff --git a/resources/js/components/auth/SocialLogin.vue b/resources/js/components/auth/SocialLogin.vue
index bb8a8f6f..0bbda918 100644
--- a/resources/js/components/auth/SocialLogin.vue
+++ b/resources/js/components/auth/SocialLogin.vue
@@ -19,15 +19,17 @@ const hasSocial = computed(() => googleEnabled.value || githubEnabled.value);
 
 <template>
     <template v-if="hasSocial">
-        <Button v-if="googleEnabled" variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
-            <img src="/images/social/google.svg" alt="Google" class="size-4" />
-            {{ mode === 'login' ? $t('auth.google_login') : $t('auth.google_signup') }}
-        </Button>
+        <div class="flex flex-col gap-2">
+            <Button v-if="googleEnabled" variant="outline" class="w-full" as="a" :href="googleRedirect.url()">
+                <img src="/images/social/google.svg" alt="Google" class="size-4" />
+                {{ mode === 'login' ? $t('auth.google_login') : $t('auth.google_signup') }}
+            </Button>
 
-        <Button v-if="githubEnabled" variant="outline" class="w-full" as="a" :href="githubRedirect.url()">
-            <IconBrandGithub class="size-4" />
-            {{ mode === 'login' ? $t('auth.github_login') : $t('auth.github_signup') }}
-        </Button>
+            <Button v-if="githubEnabled" variant="outline" class="w-full" as="a" :href="githubRedirect.url()">
+                <IconBrandGithub class="size-4" />
+                {{ mode === 'login' ? $t('auth.github_login') : $t('auth.github_signup') }}
+            </Button>
+        </div>
 
         <div
             class="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border"