diff --git a/src/client/routes/login.tsx b/src/client/routes/login.tsx
index a616812..e0c17c6 100644
--- a/src/client/routes/login.tsx
+++ b/src/client/routes/login.tsx
@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input';
 import { useAuth } from '@/api/authjs/useAuth';
 import { useEventWithLoading } from '@/hooks/useEvent';
 import { LuGithub, LuLayers } from 'react-icons/lu';
+import { compact } from 'lodash-es';
 
 export const Route = createFileRoute('/login')({
   validateSearch: z.object({
@@ -44,6 +45,27 @@ function LoginComponent() {
   });
   const { allowRegister, authProvider } = useGlobalConfig();
 
+  const authProviderEl = compact([
+    authProvider.includes('github') && (
+      <Button
+        variant="secondary"
+        className="h-12 w-12 p-3"
+        onClick={() => loginWithOAuth('github')}
+      >
+        <LuGithub size={24} />
+      </Button>
+    ),
+    authProvider.includes('custom') && (
+      <Button
+        variant="secondary"
+        className="h-12 w-12 p-3"
+        onClick={() => loginWithOAuth('custom')}
+      >
+        <LuLayers size={24} />
+      </Button>
+    ),
+  ]);
+
   return (
     <div className="flex h-full w-full items-center justify-center dark:bg-gray-900">
       <div className="w-80 -translate-y-1/4">
@@ -98,31 +120,11 @@ function LoginComponent() {
           )}
         </Form>
 
-        {authProvider.length > 0 && (
+        {authProviderEl.length > 0 && (
           <>
             <Divider>{t('Or')}</Divider>
 
-            <div className="flex justify-center gap-2">
-              {authProvider.includes('github') && (
-                <Button
-                  variant="secondary"
-                  className="h-12 w-12 p-3"
-                  onClick={() => loginWithOAuth('github')}
-                >
-                  <LuGithub size={24} />
-                </Button>
-              )}
-
-              {authProvider.includes('custom') && (
-                <Button
-                  variant="secondary"
-                  className="h-12 w-12 p-3"
-                  onClick={() => loginWithOAuth('custom')}
-                >
-                  <LuLayers size={24} />
-                </Button>
-              )}
-            </div>
+            <div className="flex justify-center gap-2">{authProviderEl}</div>
           </>
         )}
       </div>