diff --git a/frontend/templates/login.html b/frontend/templates/login.html
index c8039278..7476c6f3 100644
--- a/frontend/templates/login.html
+++ b/frontend/templates/login.html
@@ -33,7 +33,7 @@
         <div class="mb-8" id="local-auth">
             <h2 class="text-lg font-semibold mb-4 text-gray-700">{{ _("auth.sign_in_with_username") }}</h2>
             <form method="POST" action="/auth" class="space-y-4">
-                <input type="hidden" name="csrf_token" value="{{ csrf_token | default(\'\', true) }}">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token | default('', true) }}">
                 <div>
                     <label for="username" class="block text-sm font-medium text-gray-700">{{ _("auth.username_or_email") }}</label>
                     <input type="text" id="username" name="username" required
@@ -75,7 +75,8 @@
 
         <div class="mt-6 grid grid-cols-1 gap-3">
             <a href="/oauth-login"
-               class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+               class="w-full inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+               style="min-height:44px; min-width:44px">
                 <span class="sr-only">{{ _("auth.sign_in_sso") }}</span>
                 <i class="fas fa-lock mr-2" aria-hidden="true"></i>
                 {{ oauth_provider_name }}
@@ -83,6 +84,32 @@
         </div>
         {% endif %}
 
+        {% if social_providers %}
+        <!-- Social login options -->
+        {% if not show_oauth %}
+        <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+                <div class="w-full border-t border-gray-300"></div>
+            </div>
+            <div class="relative flex justify-center text-sm">
+                <span class="px-2 bg-white text-gray-500">{{ _("auth.or_continue_with") }}</span>
+            </div>
+        </div>
+        {% endif %}
+
+        <div class="mt-6 grid grid-cols-1 gap-3">
+            {% for provider_key, provider in social_providers.items() %}
+            <a href="/social-login/{{ provider_key }}"
+               class="w-full inline-flex items-center justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+               style="min-height:44px; min-width:44px"
+               aria-label="{{ _('auth.sign_in_with') }} {{ provider.name }}">
+                <i class="{{ provider.icon }} mr-2" aria-hidden="true"></i>
+                {{ _("auth.sign_in_with") }} {{ provider.name }}
+            </a>
+            {% endfor %}
+        </div>
+        {% endif %}
+
         <div class="mt-8 text-center">
             <a href="/" class="text-sm font-medium text-blue-600 hover:text-blue-500">
                 {{ _("auth.return_home") }}
@@ -99,7 +126,7 @@
         {% endif %}
     </main>
     <div class="fixed bottom-4 text-center w-full text-xs text-gray-500">
-        {{ _("app.name") }} {{ app_version|default(\'\', true) }}
+        {{ _("app.name") }} {{ app_version|default('', true) }}
     </div>
 </body>
 </html>
diff --git a/frontend/translations/en.json b/frontend/translations/en.json
index 25e58812..59fdcb1a 100644
--- a/frontend/translations/en.json
+++ b/frontend/translations/en.json
@@ -898,5 +898,6 @@
   "auth.verify_email_resend_placeholder": "Enter your email address",
   "auth.verify_email_resend_aria_label": "Email address for resend",
   "auth.verify_email_resend_button": "Resend verification email",
-  "auth.verify_email_back_sign_in": "Back to sign in"
+  "auth.verify_email_back_sign_in": "Back to sign in",
+  "auth.sign_in_with": "Sign in with"
 }