diff --git a/templates/idp/email-password-interaction/login.ejs b/templates/idp/email-password-interaction/login.ejs
index e89a958e5..1614099a8 100644
--- a/templates/idp/email-password-interaction/login.ejs
+++ b/templates/idp/email-password-interaction/login.ejs
@@ -1,54 +1,49 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Sign-in</title>
-    <link rel="stylesheet" href="/idp/style.css">
-  </head>
-  <body>
-    <div class="main-content">
-      <section class="main-content-section">
-        <div class="wrapper">
-          <h1 class="title--white">Sign In</h1>
-          <div class="login-panel">
-            <div class="panel-body">
-              <form autocomplete="off" action="/idp/login" method="post">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Log in</title>
+  <link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
+</head>
+<body>
+  <header>
+    <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
+    <h1>Community Solid Server</h1>
+  </header>
+  <main>
+    <h1>Log in</h1>
+    <form action="/idp/login" method="post">
+      <%if (errorMessage) { %>
+        <p class="error"><%= errorMessage %></p>
+      <% } %>
 
-                <%if (errorMessage) { %>
-                  <div class="input-wrap">
-                    <label style="color: #D0021B">
-                      <%= errorMessage %>
-                    </label>
-                  </div>
-                <% } %>
+      <fieldset>
+        <ol>
+          <li>
+            <label for="email">Email</label>
+            <input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
+          </li>
+          <li>
+            <label for="password">Password</label>
+            <input id="password" type="password" name="password">
+          </li>
+          <li class="checkbox">
+            <label><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
+          </li>
+        </ol>
+      </fieldset>
 
-                <div class="input-wrap">
-                  <label for="email">Email:</label>
-                  <input id="email" type="email" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %>>
-                </div>
+      <p class="actions"><button type="submit" name="submit">Log in</button></p>
 
-                <div class="input-wrap">
-                  <label for="password">Password:</label>
-                  <input id="password" type="password" name="password">
-                </div>
-
-                <div class="input-wrap">
-                  <label class="checkbox"><input type="checkbox" name="remember" value="yes" checked>Stay signed in</label>
-                </div>
-
-                <button type="submit" name="submit" class="ids-link-filled">Sign In</button>
-
-                <hr />
-                <div class="space-between">
-
-                  <a href="/idp/register" class="link">Register</a>
-                  <a href="/idp/forgotpassword" class="link">Forgot Password</a>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </body>
+      <ul class="actions">
+        <li><a href="/idp/register" class="link">Sign up</a></li>
+        <li><a href="/idp/forgotpassword" class="link">Forgot password</a></li>
+      </ul>
+    </form>
+  </main>
+  <footer>
+    <p>©2019–2021 Inrupt Inc. and imec</p>
+  </footer>
+</body>
 </html>
diff --git a/templates/idp/email-password-interaction/register.ejs b/templates/idp/email-password-interaction/register.ejs
index 962b18414..9d3627b31 100644
--- a/templates/idp/email-password-interaction/register.ejs
+++ b/templates/idp/email-password-interaction/register.ejs
@@ -1,70 +1,72 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <title>Register</title>
-    <link rel="stylesheet" href="/idp/style.css">
-  </head>
-  <body>
-    <div class="main-content">
-      <section class="main-content-section">
-        <div class="wrapper">
-          <h1 class="title--white">Register</h1>
-          <div class="login-panel">
-            <div class="panel-body">
-              <form autocomplete="off" action="/idp/register" method="post">
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>Register</title>
+  <link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
+</head>
+<body>
+  <header>
+    <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
+    <h1>Community Solid Server</h1>
+  </header>
+  <main>
+    <h1>Sign up for an account</h1>
+    <form action="/idp/register" method="post">
 
-                <%if (errorMessage) { %>
-                  <div class="input-wrap">
-                    <label style="color: #D0021B">
-                      <%= errorMessage %>
-                    </label>
-                  </div>
-                <% } %>
+      <%if (errorMessage) { %>
+        <p class="error">Error: <%= errorMessage %></p>
+      <% } %>
 
-                <div class="input-wrap">
-                  <label for="email">Email:</label>
-                  <input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
-                </div>
+      <fieldset>
+        <ol>
+          <li>
+            <label for="email">Email</label>
+            <input id="email" type="text" name="email" autofocus <% if (prefilled.email) { %> value="<%= prefilled.email %>" <% } %> />
+          </li>
+          <li>
+            <label for="password">Password</label>
+            <input id="password" type="password" name="password" />
+          </li>
+          <li>
+            <label for="confirmPassword">Confirm password</label>
+            <input id="confirmPassword" type="password" name="confirmPassword" />
+          </li>
+        </ol>
+      </fieldset>
 
-                <div class="input-wrap">
-                  <label for="password">Password (when registering with the IDP):</label>
-                  <input id="password" type="password" name="password" />
-                </div>
+      <fieldset>
+        <ol>
+          <li class="checkbox">
+            <label><input type="checkbox" name="createWebId" checked>Create a new WebID <em>(requires the other two options)</em></label>
+          </li>
+          <li class="checkbox">
+            <label><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
+            <ol>
+              <li>
+                <label for="webId">Alternatively, existing WebID</label>
+                <input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
+              </li>
+            </ol>
+          </li>
+          <li class="checkbox">
+            <label><input type="checkbox" name="createPod" checked>Create a new pod</label>
+            <ol>
+              <li>
+                <label for="podName">Pod name</label>
+                <input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
+              </li>
+            </ol>
+          </li>
+        </ol>
+      </fieldset>
 
-                <div class="input-wrap">
-                  <label for="confirmPassword">Confirm Password:</label>
-                  <input id="confirmPassword" type="password" name="confirmPassword" />
-                </div>
-
-                <div class="input-wrap">
-                  <label for="podName">Pod name (when creating a pod):</label>
-                  <input id="podName" type="text" name="podName" <% if (prefilled.podName) { %> value="<%= prefilled.podName %>" <% } %> />
-                </div>
-
-                <div class="input-wrap">
-                  <label for="webId">WebID (when not creating a WebID):</label>
-                  <input id="webId" type="text" name="webId" <% if (prefilled.webId) { %> value="<%= prefilled.webId %>" <% } %> />
-                </div>
-
-                <div class="input-wrap">
-                  <label class="checkbox"><input type="checkbox" name="createWebId" checked>Create new WebID (also requires the other two options)</label>
-                </div>
-
-                <div class="input-wrap">
-                  <label class="checkbox"><input type="checkbox" name="register" checked>Register your WebID with the IDP</label>
-                </div>
-
-                <div class="input-wrap">
-                  <label class="checkbox"><input type="checkbox" name="createPod" checked>Create a new pod</label>
-                </div>
-
-                <button type="submit" name="submit" class="ids-link-filled">Submit</button>
-              </form>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </body>
+      <p class="actions"><button type="submit" name="submit">Sign up</button></p>
+    </form>
+  </main>
+  <footer>
+    <p>©2019–2021 Inrupt Inc. and imec</p>
+  </footer>
+</body>
 </html>
diff --git a/templates/idp/email-password-interaction/registerResponse.ejs b/templates/idp/email-password-interaction/registerResponse.ejs
index 85b7d23e8..239331e96 100644
--- a/templates/idp/email-password-interaction/registerResponse.ejs
+++ b/templates/idp/email-password-interaction/registerResponse.ejs
@@ -1,43 +1,45 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>Registration Succesful</title>
-    <link rel="stylesheet" href="/idp/style.css">
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <title>You are signed up</title>
+  <link rel="stylesheet" href="/.well_known/css/styles/main.css" type="text/css">
 </head>
 <body>
-<div class="main-content">
-    <section class="main-content-section">
-        <div class="wrapper">
-            <h1 class="title--white">Registration Successful</h1>
-            <div class="login-panel">
-                <div class="panel-body">
-                    <% if (createWebId) { %>
-                        <p class="content__message">
-                            Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>
-                        </p>
-                    <% } %>
-                    <% if (register) { %>
-                        <p class="content__message">
-                            You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a> with our IDP using <%= email %>
-                        </p>
-                        <% if (!createWebId) { %>
-                            <p class="content__message">
-                                Make sure you add the triple
-                                <%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%>
-                                to your WebID profile.
-                            </p>
-                        <% } %>
-                    <% } %>
-                    <% if (createPod) { %>
-                        <p class="content__message">
-                            Your new pod has been created and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>
-                        </p>
-                    <% } %>
-                </div>
-            </div>
-        </div>
-    </section>
-</div>
+  <header>
+    <img src="/.well_known/css/images/solid.svg" alt="[Solid logo]" />
+    <h1>Community Solid Server</h1>
+  </header>
+  <main>
+    <h1>You are signed up</h1>
+    <% if (createWebId) { %>
+      <p>
+        Your new WebID is <a href="<%= webId %>" class="link"><%= webId %></a>.
+      </p>
+    <% } %>
+    <% if (register) { %>
+      <p>
+        You can now identify as <a href="<%= webId %>" class="link"><%= webId %></a>
+        on this server using <em><%= email %></em>.
+      </p>
+      <% if (!createWebId) { %>
+        <p>
+          Make sure you add the triple
+          <code><%= `<${webId}> <http://www.w3.org/ns/solid/terms#oidcIssuer> <${oidcIssuer}>.`%></code>
+          to your WebID profile.
+        </p>
+      <% } %>
+    <% } %>
+    <% if (createPod) { %>
+      <p>
+        Your new pod has been created
+        and can be found at <a href="<%= podBaseUrl %>" class="link"><%= podBaseUrl %></a>.
+      </p>
+    <% } %>
+  </main>
+  <footer>
+    <p>©2019–2021 Inrupt Inc. and imec</p>
+  </footer>
 </body>
 </html>
diff --git a/templates/styles/main.css b/templates/styles/main.css
index be764ee03..5d4764e9c 100644
--- a/templates/styles/main.css
+++ b/templates/styles/main.css
@@ -18,6 +18,11 @@ html {
   background-color: var(--solid-purple);
   background-image: linear-gradient(135deg, var(--solid-purple) 10%, var(--solid-blue) 90%);
   height: 100%;
+}
+
+body, input, button {
+  font: 12pt/1.3 Raleway, sans-serif;
+  font-weight: 300;
   color: #222222;
 }
 
@@ -25,25 +30,29 @@ body {
   max-width: 750px;
   margin: 2em auto;
   padding: 1em 2em;
-  font: 12pt/1.3 Raleway, sans-serif;
-  font-weight: 300;
+
   background: white;
   box-shadow: 5px 5px 2px rgba(0, 0, 0, .1);
   border-radius: 3px;
+
+  font: 12pt/1.3 Raleway, sans-serif;
+  font-weight: 300;
 }
 
 header {
   margin: 1em 0 2em;
+
   display: grid;
   grid-template-columns: [logo] 5em [title] auto;
   grid-gap: 1.5em;
   align-items: center;
 }
 header h1 {
+  margin: 0;
+
   font-size: 3.33em;
   letter-spacing: .25px;
   font-weight: 600;
-  margin: 0;
 }
 header img {
   width: 100%;
@@ -59,8 +68,100 @@ main h2 {
 }
 
 footer {
-  font-size: 90%;
   margin-top: 1em;
   text-align: right;
+  font-size: 90%;
   color: #666666;
 }
+
+strong {
+  font-weight: 600;
+}
+
+a {
+  color: var(--solid-purple);
+  font-weight: 500;
+}
+a:hover {
+  color: var(--solid-blue);
+}
+
+li {
+  margin: .5em 0;
+}
+ul > li {
+  list-style-type: square;
+}
+ul > li::marker {
+  color: var(--solid-purple);
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0 0 0 1em;
+  max-width: 600px;
+}
+fieldset ol {
+  list-style: none;
+  margin; 0;
+  padding: 0;
+}
+fieldset ol ol {
+  margin: 0 0 1em 2em;
+}
+fieldset ol li:not(.checkbox) {
+  display: grid;
+  grid-template-columns: 10em auto;
+  grid-gap: 1em;
+  align-items: center;
+}
+fieldset ol ol li:not(.checkbox) {
+  grid-template-columns: 8em auto;
+}
+fieldset li label {
+  font-weight: 600;
+}
+fieldset li:not(.checkbox) > label:after {
+  content: ": ";
+}
+fieldset li.checkbox > label > input {
+  margin: 0 .5em 0 0;
+}
+
+input {
+  border: 1px solid var(--solid-purple);
+}
+
+button {
+  cursor: pointer;
+  padding: .5em 2em;
+
+  border: 0px;
+  background-color: var(--solid-purple);
+  color: white;
+
+  font-weight: 600;
+}
+button:hover {
+  background-color: var(--solid-blue);
+}
+
+form p.actions {
+  margin: 0 0 1em 12em;
+}
+
+form p.error {
+  color: #ad0f0f;
+  font-weight: 600;
+}
+
+form ul.actions {
+  padding: 0;
+  margin: 0 0 1em 12em;
+}
+form ul.actions > li {
+  list-style-type: none;
+  display: inline;
+  margin-right: 1em;
+}
