diff --git a/frontend/src/components/SimpleLogin.tsx b/frontend/src/components/SimpleLogin.tsx
index 8a4f2d6..14d6959 100644
--- a/frontend/src/components/SimpleLogin.tsx
+++ b/frontend/src/components/SimpleLogin.tsx
@@ -1,24 +1,48 @@
 /**
- * Simple Login Component (for test users only)
+ * Login Component
  *
- * This component is for testing purposes only.
- * In production, only MSAL authentication will be used.
+ * Shows Azure AD SSO login when configured, otherwise falls back to simple login for testing.
  */
 
 import React, { useState } from 'react';
 import { authAPI } from '../services/api';
+import { useAuth } from '../context/AuthContext';
+
+// Check if Azure AD is configured
+const isAzureConfigured =
+  process.env.REACT_APP_AZURE_CLIENT_ID &&
+  process.env.REACT_APP_AZURE_CLIENT_ID !== 'your-client-id-here' &&
+  process.env.REACT_APP_AZURE_TENANT_ID &&
+  process.env.REACT_APP_AZURE_TENANT_ID !== 'your-tenant-id-here';
 
 interface SimpleLoginProps {
   onLoginSuccess: (token: string, user: any) => void;
 }
 
 const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
+  const { login: msalLogin, isLoading: msalLoading } = useAuth();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  // Azure AD Login
+  const handleAzureLogin = async () => {
+    setError(null);
+    try {
+      await msalLogin();
+    } catch (err: any) {
+      console.error('Azure AD login failed:', err);
+      if (err.message) {
+        setError(err.message);
+      } else {
+        setError('Login failed. Please try again.');
+      }
+    }
+  };
+
+  // Simple login (for testing)
+  const handleSimpleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
     setIsLoading(true);
@@ -64,6 +88,39 @@ const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
     setPassword('user');
   };
 
+  // Azure AD Login UI
+  if (isAzureConfigured) {
+    return (
+      <div className="login-container">
+        <div className="login-box">
+          <div className="login-header">
+            <h1>🤖 Seapac Ops Bot</h1>
+            <p className="login-subtitle">AI Operations Assistant</p>
+          </div>
+
+          {error && (
+            <div className="login-error">
+              {error}
+            </div>
+          )}
+
+          <button
+            onClick={handleAzureLogin}
+            className="btn-login btn-azure"
+            disabled={msalLoading}
+          >
+            {msalLoading ? 'Signing in...' : '🔐 Sign in with Microsoft'}
+          </button>
+
+          <p className="login-footer">
+            Sign in with your Oliver Agency account
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  // Simple Login UI (for testing only)
   return (
     <div className="login-container">
       <div className="login-box">
@@ -73,7 +130,7 @@ const SimpleLogin: React.FC<SimpleLoginProps> = ({ onLoginSuccess }) => {
           <p className="login-note">⚠️ For testing only. Production uses Azure AD.</p>
         </div>
 
-        <form onSubmit={handleSubmit} className="login-form">
+        <form onSubmit={handleSimpleSubmit} className="login-form">
           <div className="form-group">
             <label htmlFor="email">Email</label>
             <input
diff --git a/frontend/src/styles/login.css b/frontend/src/styles/login.css
index d31b6df..4e55a5d 100644
--- a/frontend/src/styles/login.css
+++ b/frontend/src/styles/login.css
@@ -181,6 +181,24 @@
   margin: 0.25rem 0;
 }
 
+/* Azure AD login button */
+.btn-azure {
+  background: linear-gradient(135deg, #0078d4, #106ebe);
+  font-size: 1.1rem;
+  padding: 1.25rem;
+}
+
+.btn-azure:hover:not(:disabled) {
+  box-shadow: 0 8px 20px rgba(0, 120, 212, 0.3);
+}
+
+.login-footer {
+  margin-top: 1.5rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
 /* Additional styles for role badge in header */
 .user-role {
   font-size: 0.75rem;