diff --git a/app/assets/sass/components/_button.scss b/app/assets/sass/components/_button.scss
index 29dc629f..b5b27a83 100644
--- a/app/assets/sass/components/_button.scss
+++ b/app/assets/sass/components/_button.scss
@@ -3,6 +3,10 @@
   min-width: 80px;
 }
 
+.app-button--min-width-2 {
+  min-width: 300px;
+}
+
 // Make buttons full width on mobile
 // This is temporary until https://github.com/nhsuk/nhsuk-frontend/pull/1309 is merged
 .nhsuk-button {
diff --git a/app/routes/auth.js b/app/routes/auth.js
index 7225ea4a..6f37a05b 100644
--- a/app/routes/auth.js
+++ b/app/routes/auth.js
@@ -6,7 +6,13 @@ module.exports = router => {
     const email = data.email || "jane.smith@nhs.net"
     const user = data.users.find((user) => user.email === email)
 
-    if (!user) {
+    if (email === 'freda.pink@nhs.net') {
+      res.redirect('/auth/keycloak-not-recognised')
+      return
+    } else if (email === 'james.blue@nhs.net') {
+      res.redirect('/auth/keycloak-existing-account-new-login')
+      return
+    } else if (!user) {
       res.redirect('/auth/okta-sign-in')
       return
     }
diff --git a/app/views/_layouts/keycloak.html b/app/views/_layouts/keycloak.html
new file mode 100644
index 00000000..8c8912cd
--- /dev/null
+++ b/app/views/_layouts/keycloak.html
@@ -0,0 +1,14 @@
+{% extends "../layout.html" %}
+
+{% block header %}
+  {{ header({
+    service: {
+      text: "RAVS Login"
+    }
+  }) }}
+{% endblock %}
+
+{% block footer %}
+  {{ footer({
+  }) }}
+{% endblock %}
diff --git a/app/views/auth/keycloak-existing-account-new-login.html b/app/views/auth/keycloak-existing-account-new-login.html
new file mode 100644
index 00000000..33354397
--- /dev/null
+++ b/app/views/auth/keycloak-existing-account-new-login.html
@@ -0,0 +1,49 @@
+{% extends '_layouts/keycloak.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">You previously logged in a different way</h1>
+
+      <p>Your email address {{ data.email }} is associated with a different log in method.</p>
+
+      <p>If you would like to be able to use both log in methods, first sign in using the way you used before:</p>
+
+      {{ button({
+        text: "Log in with Okta",
+        classes: "app-button--min-width-2",
+        href: "/auth/okta-sign-in"
+      }) }}
+
+      <div>
+        {{ button({
+          text: "Log in with PharmaPMR",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with PharmacyPlus+",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with Phoenix",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+
+      <p>We will then link both log in methods to your account and in future you can log in either way.</p>
+
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/auth/keycloak-not-recognised.html b/app/views/auth/keycloak-not-recognised.html
new file mode 100644
index 00000000..109a8634
--- /dev/null
+++ b/app/views/auth/keycloak-not-recognised.html
@@ -0,0 +1,20 @@
+{% extends '_layouts/keycloak.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">You’re not a user of the service</h1>
+
+      <p>Your email address {{ data.email }} is not associated with an account on Record a vaccination.</p>
+
+      <p>If you have not previously used the service, ask a colleague at your organisation to add you as user.</p>
+
+      <p>If you have used the service, <a href="/auth/log-in">log in</a> using the account you used before.</p>
+
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/views/auth/log-in-radios.html b/app/views/auth/log-in-radios.html
new file mode 100644
index 00000000..3b52ede3
--- /dev/null
+++ b/app/views/auth/log-in-radios.html
@@ -0,0 +1,52 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+
+      <form action="/auth/log-in-answer" method="post">
+
+        {{ radios({
+          fieldset: {
+            legend: {
+              text: "How do you want to log in?",
+              size: "l",
+              isPageHeading: true
+            }
+          },
+          items: [
+            {
+              text: "Okta"
+            },
+            {
+              divider: "or"
+            },
+            {
+              text: "MediCare"
+            },
+            {
+              text: "PharmaPMR"
+            },
+            {
+              text: "PharmacyPlus+"
+            },
+            {
+              text: "Phoenix"
+            }
+          ]
+        }) }}
+
+        {{ button({
+          text: "Continue"
+        }) }}
+
+
+      </form>
+
+    </div>
+  </div>
+
+{% endblock %}
diff --git a/app/views/auth/log-in.html b/app/views/auth/log-in.html
new file mode 100644
index 00000000..03fc430a
--- /dev/null
+++ b/app/views/auth/log-in.html
@@ -0,0 +1,53 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Log in" %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-6">Log in</h1>
+
+      {{ button({
+        text: "Log in with Okta",
+        classes: "app-button--min-width-2",
+        href: "/auth/okta-sign-in"
+      }) }}
+
+      <p>or</p>
+
+      <div>
+        {{ button({
+          text: "Log in with MediCare",
+          classes: "nhsuk-button--secondary app-button--min-width-2",
+          href: "/auth/medicare-sign-in"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with PharmaPMR",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with PharmacyPlus+",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+      <div>
+        {{ button({
+          text: "Log in with Phoenix",
+          classes: "nhsuk-button--secondary app-button--min-width-2"
+        }) }}
+      </div>
+
+
+
+    </div>
+  </div>
+
+{% endblock %}
diff --git a/app/views/auth/medicare-authorise.html b/app/views/auth/medicare-authorise.html
new file mode 100644
index 00000000..209ff5c5
--- /dev/null
+++ b/app/views/auth/medicare-authorise.html
@@ -0,0 +1,111 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block header %}
+<header>
+  <div class="service-name">
+    <span class="logo">+</span>
+    MediCare
+  </div>
+</header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+
+{% block content %}
+<style>
+  * { box-sizing: border-box; }
+  html, body { background-color: cornsilk; }
+  body {
+    margin: 0; padding: 0;
+  }
+  header {
+    margin: 0; padding: 40px;
+    color: snow;
+    background-color: darkred;
+  }
+
+  h1, p {
+    max-width: 750px;
+  }
+
+  .logo {
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 50px;
+    color: salmon;
+  }
+  .service-name {
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  label {
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type=text],
+  input[type=password] {
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 0;
+    border: 2px solid black;
+    width: 400px;
+  }
+
+  .field {
+    margin-bottom: 40px;
+  }
+
+  button {
+    font-size: 30px;
+    padding: 10px;
+    border: 0px;
+    border-radius: 5px;
+    background-color: darkred;
+    color: snow;
+    margin-right: 40px;
+  }
+
+  .allow {
+    background-color: green;
+  }
+
+  .deny {
+    background-color: darkred;
+  }
+
+  form {
+    display: inline-block;
+  }
+</style>
+
+<main>
+
+
+    <h1>NHS Record a vaccination would like to connect your account</h1>
+
+    <p>If you grant access, the application will be able to access your email address and account ID.</p>
+
+
+    <form action="/auth/sign-in" method="post">
+      <button type="submit" class="allow">Allow</button>
+    </form>
+
+    <form action="/auth/medicare-unauthorised" method="post">
+      <button type="submit" class="deny">Deny</button>
+    </form>
+
+  </form>
+
+</main>
+
+
+{% endblock %}
diff --git a/app/views/auth/medicare-sign-in.html b/app/views/auth/medicare-sign-in.html
new file mode 100644
index 00000000..479a431b
--- /dev/null
+++ b/app/views/auth/medicare-sign-in.html
@@ -0,0 +1,121 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block header %}
+<header>
+  <div class="service-name">
+    <span class="logo">+</span>
+    MediCare
+  </div>
+</header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+
+{% block content %}
+<style>
+  * { box-sizing: border-box; }
+  html, body { background-color: cornsilk; }
+  body {
+    margin: 0; padding: 0;
+  }
+  header {
+    margin: 0; padding: 40px;
+    color: snow;
+    background-color: darkred;
+  }
+  .logo {
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 50px;
+    color: salmon;
+  }
+  .service-name {
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  label {
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type=text],
+  input[type=password] {
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 0;
+    border: 2px solid black;
+    width: 400px;
+  }
+
+  .field {
+    margin-bottom: 40px;
+  }
+
+  button {
+    font-size: 30px;
+    padding: 10px;
+    border: 0px;
+    border-radius: 5px;
+    background-color: darkred;
+    color: snow;
+  }
+</style>
+
+<main>
+
+  <form action="/auth/medicare-authorise" method="post">
+
+    <h1>Sign in with your MediCare account</h1>
+
+    <div class="field">
+      <label for="email">Email</label>
+      <input type="text" id="email" name="email">
+    </div>
+
+    <div class="field">
+      <label for="password">Password</label>
+      <input type="text" id="password" name="password">
+    </div>
+
+    <button type="submit">Log in</button>
+
+  </form>
+
+</main>
+</div>
+</div>
+
+
+<div style="background-color: #d8dde0; padding: 30px;">
+  <h2 class="nhsuk-heading-s">Testing area</h2>
+  <p>Log in as:</p>
+
+  <ul>
+    <li><a href="#" data-email="paulina.sloan@nhs.net" data-module="prefill-email">Lead admin at a small chain of pharmacies</a></li>
+    <li><a href="#" data-email="amanda.white@nhs.net" data-module="prefill-email">Lead admin for a large chain of pharmacies with the same name</a></li>
+    <li><a href="#" data-email="freda.pink@nhs.net" data-module="prefill-email">A MediCare user who has not used RAVS before</a></li>
+    <li><a href="#" data-email="james.blue@nhs.net" data-module="prefill-email">A user who has only used RAVS via a different login method</a></li>
+  </ul>
+</div>
+
+<script>
+
+  const prefillLinks = document.querySelectorAll('a[data-module=prefill-email]')
+
+  for (link of prefillLinks) {
+    link.addEventListener('click', function(event) {
+      const email = event.target.getAttribute('data-email');
+      document.getElementById('email').setAttribute('value', email);
+    })
+  }
+</script>
+
+{% endblock %}
diff --git a/app/views/auth/medicare-unauthorised.html b/app/views/auth/medicare-unauthorised.html
new file mode 100644
index 00000000..f7e382f8
--- /dev/null
+++ b/app/views/auth/medicare-unauthorised.html
@@ -0,0 +1,101 @@
+{% extends 'layout.html' %}
+
+{% set pageName = "Sign in" %}
+
+
+{% block header %}
+<header>
+  <div class="service-name">
+    <span class="logo">+</span>
+    MediCare
+  </div>
+</header>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}
+
+
+{% block content %}
+<style>
+  * { box-sizing: border-box; }
+  html, body { background-color: cornsilk; }
+  body {
+    margin: 0; padding: 0;
+  }
+  header {
+    margin: 0; padding: 40px;
+    color: snow;
+    background-color: darkred;
+  }
+
+  h1 {
+    max-width: 800px;
+  }
+
+  .logo {
+    font-size: 60px;
+    font-weight: bold;
+    line-height: 50px;
+    color: salmon;
+  }
+  .service-name {
+    font-size: 40px;
+    font-weight: bold;
+  }
+
+  label {
+    display: block;
+    font-size: 30px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type=text],
+  input[type=password] {
+    font-size: 18px;
+    padding: 5px;
+    border-radius: 0;
+    border: 2px solid black;
+    width: 400px;
+  }
+
+  .field {
+    margin-bottom: 40px;
+  }
+
+  button {
+    font-size: 30px;
+    padding: 10px;
+    border: 0px;
+    border-radius: 5px;
+    background-color: darkred;
+    color: snow;
+    margin-right: 40px;
+  }
+
+  .allow {
+    background-color: green;
+  }
+
+  .deny {
+    background-color: darkred;
+  }
+
+  form {
+    display: inline-block;
+  }
+</style>
+
+<main>
+
+    <h1>You have denied access to NHS Record a vaccination</h1>
+
+    <p>If you change your mind, go to <a href="#">Settings</a>.</p>
+
+  </form>
+
+</main>
+
+
+{% endblock %}
diff --git a/app/views/includes/header.html b/app/views/includes/header.html
index af2c9c64..7b92876d 100644
--- a/app/views/includes/header.html
+++ b/app/views/includes/header.html
@@ -129,7 +129,7 @@
         text: 'Log out'
       } if data.currentUserId,
       {
-        href: "/auth/okta-sign-in",
+        href: "/auth/log-in",
         text: "Log in"
       } if not data.currentUserId
     ]
diff --git a/app/views/product-page.html b/app/views/product-page.html
index fd1345f1..28995b08 100644
--- a/app/views/product-page.html
+++ b/app/views/product-page.html
@@ -21,7 +21,7 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-5">The simplest way to record v
               classes: "nhsuk-button--reverse"
             }) }}
 
-            <p class="nhsuk-body nhsuk-u-margin-bottom-0">or <a href="/auth/okta-sign-in" class="nhsuk-link nhsuk-link--reverse nhsuk-u-font-weight-bold">log in</a></p>
+            <p class="nhsuk-body nhsuk-u-margin-bottom-0">or <a href="/auth/log-in" class="nhsuk-link nhsuk-link--reverse nhsuk-u-font-weight-bold">log in</a></p>
           </div>
         </div>
       </div>