diff --git a/public/css/style.css b/public/css/style.css
index 30077bb..c7c9f0e 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -810,6 +810,56 @@ input[type="file"] {
 .login-card h2 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
 .login-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
 
+.login-divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0 12px;
+  gap: 12px;
+}
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+.login-divider span {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.btn-oidc {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #fff;
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.btn-oidc:hover {
+  background: var(--bg);
+  border-color: #b0b0b0;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+.btn-oidc:active {
+  background: #e8e8e8;
+}
+.btn-oidc svg {
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
 /* ── User management ── */
 .account-checkboxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
 .account-checkbox-label {
diff --git a/public/index.html b/public/index.html
index e2600c8..0e1ceca 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,8 +44,11 @@
         <div id="login-error" class="wizard-error" hidden></div>
         <button id="btn-login-submit" class="btn-primary" style="width:100%;margin-top:8px">Sign In</button>
         <div id="oidc-login-section" hidden>
-          <div style="text-align:center;margin:12px 0 4px;color:var(--text-muted);font-size:12px">or</div>
-          <a id="btn-oidc-login" href="/api/auth/oidc/authorize" class="btn-secondary" style="width:100%;display:block;text-align:center;text-decoration:none">Sign in with SSO</a>
+          <div class="login-divider"><span>or</span></div>
+          <a id="btn-oidc-login" href="/api/auth/oidc/authorize" class="btn-oidc">
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+            <span id="btn-oidc-login-label">Sign in with SSO</span>
+          </a>
         </div>
         <div style="text-align:center;margin-top:8px">
           <a href="#" id="link-forgot-password" style="font-size:12px;color:var(--text-muted)">Forgot password?</a>
diff --git a/public/js/app.js b/public/js/app.js
index 9135bd1..28c5442 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -98,7 +98,7 @@ async function loadOidcLoginButton() {
     const cfg = await res.json();
     const section = document.getElementById('oidc-login-section');
     if (cfg.enabled) {
-      document.getElementById('btn-oidc-login').textContent = cfg.button_label || 'Sign in with SSO';
+      document.getElementById('btn-oidc-login-label').textContent = cfg.button_label || 'Sign in with SSO';
       section.hidden = false;
     } else {
       section.hidden = true;