diff --git a/README.md b/README.md
index 9e19004..4f2bb25 100644
--- a/README.md
+++ b/README.md
@@ -145,6 +145,19 @@ docker compose restart worker
 docker compose down
 ```
 
+#### Test User Credentials (Local Development Only)
+
+For testing different user roles locally:
+
+```
+Admin:      admin@example.com      / admin
+Production: production@example.com / production
+Reviewer:   reviewer@example.com   / reviewer
+Client:     client@example.com     / client123
+```
+
+**Note**: These test users are only for local development. Production uses Microsoft authentication.
+
 ### Alternative: Native Development (Without Docker)
 
 For development without Docker, you'll need to run each service manually:
diff --git a/frontend/src/routes/Login.tsx b/frontend/src/routes/Login.tsx
index 86dbfac..e668b4d 100644
--- a/frontend/src/routes/Login.tsx
+++ b/frontend/src/routes/Login.tsx
@@ -10,6 +10,7 @@ export function Login() {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [microsoftLoading, setMicrosoftLoading] = useState(false);
+  const [showLocalLogin, setShowLocalLogin] = useState(false);
   const navigate = useNavigate();
   const { login, isLoading, setUser } = useAuthStore();
   const { instance } = useMsal();
@@ -144,75 +145,81 @@ export function Login() {
               <p className="text-gray-600">Sign in to your account to continue</p>
             </div>
 
-            <form className="space-y-6" onSubmit={handleSubmit}>
-              {error && (
-                <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center">
-                  <span className="text-red-500 mr-2">❌</span>
-                  <span className="text-red-700 text-sm">{error}</span>
+            {/* Error Display */}
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center mb-6">
+                <span className="text-red-500 mr-2">❌</span>
+                <span className="text-red-700 text-sm">{error}</span>
+              </div>
+            )}
+
+            {/* Local Login Form (Conditionally Shown) */}
+            {showLocalLogin && (
+              <form className="space-y-6 mb-6" onSubmit={handleSubmit}>
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                    Email Address
+                  </label>
+                  <input
+                    id="email"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                    placeholder="Enter your email"
+                  />
                 </div>
-              )}
 
-              <div>
-                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                  Email Address
-                </label>
-                <input
-                  id="email"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-                  placeholder="Enter your email"
-                />
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <input
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
+                    placeholder="Enter your password"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading || microsoftLoading}
+                  className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-105 disabled:transform-none shadow-lg hover:shadow-xl"
+                >
+                  {isLoading ? (
+                    <div className="flex items-center justify-center">
+                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                      Signing in...
+                    </div>
+                  ) : (
+                    'Sign In'
+                  )}
+                </button>
+              </form>
+            )}
+
+            {/* Divider (Only when local form is visible) */}
+            {showLocalLogin && (
+              <div className="relative my-6">
+                <div className="absolute inset-0 flex items-center">
+                  <div className="w-full border-t border-gray-300"></div>
+                </div>
+                <div className="relative flex justify-center text-sm">
+                  <span className="px-2 bg-white text-gray-500">Or continue with</span>
+                </div>
               </div>
+            )}
 
-              <div>
-                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
-                  Password
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
-                  placeholder="Enter your password"
-                />
-              </div>
-
-              <button
-                type="submit"
-                disabled={isLoading || microsoftLoading}
-                className="w-full bg-gradient-to-r from-blue-500 to-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-600 hover:to-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-105 disabled:transform-none shadow-lg hover:shadow-xl"
-              >
-                {isLoading ? (
-                  <div className="flex items-center justify-center">
-                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
-                    Signing in...
-                  </div>
-                ) : (
-                  'Sign In'
-                )}
-              </button>
-            </form>
-
-            {/* Divider */}
-            <div className="relative my-6">
-              <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-300"></div>
-              </div>
-              <div className="relative flex justify-center text-sm">
-                <span className="px-2 bg-white text-gray-500">Or continue with</span>
-              </div>
-            </div>
-
-            {/* Microsoft Sign In Button */}
+            {/* Microsoft Sign In Button (Always Visible) */}
             <button
               type="button"
               onClick={handleMicrosoftLogin}
@@ -237,21 +244,27 @@ export function Login() {
               )}
             </button>
 
-            <div className="mt-8 pt-6 border-t border-gray-200">
-              <div className="text-center text-sm text-gray-600 space-y-2">
-                <p className="font-medium">Demo Credentials:</p>
-                <div className="bg-gray-50 rounded-lg p-3 space-y-1 text-xs">
-                  <p><strong>Admin:</strong> admin@example.com / admin</p>
-                  <p><strong>Production:</strong> production@example.com / production</p>
-                  <p><strong>Reviewer:</strong> reviewer@example.com / reviewer</p>
-                </div>
-                <p className="text-xs">
-                  Need help? Contact{' '}
-                  <a href="mailto:support@videoaccess.com" className="text-blue-600 hover:text-blue-700 font-medium">
-                    support@videoaccess.com
-                  </a>
-                </p>
+            {/* Local Login Link (Only when form is hidden) */}
+            {!showLocalLogin && (
+              <div className="mt-6 text-center">
+                <button
+                  type="button"
+                  onClick={() => setShowLocalLogin(true)}
+                  className="text-sm text-gray-500 hover:text-gray-700 underline transition-colors"
+                >
+                  Local login
+                </button>
               </div>
+            )}
+
+            {/* Support Contact */}
+            <div className="mt-8 pt-6 border-t border-gray-200 text-center">
+              <p className="text-xs text-gray-600">
+                Need help? Contact{' '}
+                <a href="mailto:support@videoaccess.com" className="text-blue-600 hover:text-blue-700 font-medium">
+                  support@videoaccess.com
+                </a>
+              </p>
             </div>
           </div>
         </div>