diff --git a/pages/saml/login.tsx b/pages/saml/login.tsx
new file mode 100644
index 0000000..8e370af
--- /dev/null
+++ b/pages/saml/login.tsx
@@ -0,0 +1,46 @@
+import Head from "next/head";
+
+export default function Login() {
+  return (
+    <div className="h-full">
+      <Head>
+        <title>Mock SAML IdP - Login</title>
+      </Head>
+      <div className="w-[465px] max-w-[90%] mx-auto relative top-20 bg-lightBlue-100 dark:bg-blue-50 p-10 rounded-xl shadow-md shadow-blueGray-50 text-[#145698]">
+        <h2 className="text-3xl font-bold text-center mb-3">Login</h2>
+        <form>
+          <div>
+            <label htmlFor="email" className="block mb-2">
+              Email
+            </label>
+            <input
+              id="email"
+              autoComplete="off"
+              type="email"
+              placeholder="username@example.com"
+              pattern=".+@example\.com"
+              className="w-full input"
+              title="please provide a mock example.com email address"
+            />
+          </div>
+          <div className="mt-5">
+            <label htmlFor="password" className="block mb-2">
+              Password <sup>(Prefilled for you)</sup>
+            </label>
+            <input
+              id="password"
+              readOnly={true}
+              autoComplete="off"
+              type="password"
+              defaultValue="samlstrongpassword"
+              className="w-full input"
+            />
+          </div>
+          <button type="submit" className="button mt-8 w-full">
+            Sign In
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/styles/globals.css b/styles/globals.css
index 356f201..416fdb9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -30,3 +30,12 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@layer components {
+  .button {
+    @apply block py-2 px-4 leading-8 bg-primary/90 text-white font-semibold rounded-lg shadow-md hover:bg-primary/95 focus:outline-none focus:ring-4 focus:ring-primary/30 focus:ring-opacity-100;
+  }
+  .input {
+    @apply bg-[#eff0f8] border-2 border-solid border-[#8b8a8b] leading-10 px-4 py-2 rounded-md focus:border-[#5a5dbb] focus:outline-none;
+  }
+}
