diff --git a/frontend_src/_custom.scss b/frontend_src/_custom.scss
index 93c4b1c..319f9f9 100644
--- a/frontend_src/_custom.scss
+++ b/frontend_src/_custom.scss
@@ -1 +1,61 @@
-@import "~bootstrap/scss/bootstrap";
\ No newline at end of file
+@import "~bootstrap/scss/bootstrap";
+
+$dimmed_white: #f5f5f5;
+
+html,
+body {
+  height: 100%;
+  background-color: $dimmed_white;
+}
+
+body.idp {
+  display: -ms-flexbox;
+  display: flex;
+  // -ms-flex-align: center;
+  // align-items: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.form-signin {
+  max-width: 330px;
+}
+
+.form-consent {
+  max-width: 550px;
+}
+
+.form-signin, .form-consent {
+  width: 100%;
+  padding: 15px;
+  margin-left: auto;
+  margin-right: auto;
+
+  .checkbox {
+    font-weight: 400;
+  }
+
+  .form-control {
+    position: relative;
+    box-sizing: border-box;
+    height: auto;
+    padding: 10px;
+    font-size: 16px;
+  }
+
+  .form-control:focus {
+    z-index: 2;
+  }
+
+  .input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
diff --git a/frontend_src/images/favicon.ico b/frontend_src/images/favicon.ico
new file mode 100644
index 0000000..dfccc66
Binary files /dev/null and b/frontend_src/images/favicon.ico differ
diff --git a/templates/idp/base.gohtml b/templates/idp/base.gohtml
index b3bd1af..5c547cf 100644
--- a/templates/idp/base.gohtml
+++ b/templates/idp/base.gohtml
@@ -12,6 +12,7 @@
         <link rel="icon" href="/images/favicon-128.png" sizes="128x128">
         <link rel="icon" href="/images/favicon-192.png" sizes="192x192">
         <link rel="icon" href="/images/favicon-228.png" sizes="228x228">
+        <link rel="icon" href="/images/favicon.ico">
 
         <!-- Android -->
         <link rel="shortcut icon" sizes="196x196" href="/images/favicon-196.png">
@@ -22,11 +23,10 @@
         <link rel="apple-touch-icon" href="/images/favicon-180.png" sizes="180x180">
 
         <link rel="stylesheet" href="/css/cacert.bundle.css">
+        <meta name="theme-color" content="#11568c">
         <title>{{ .Title }}</title>
     </head>
-    <body>
-    <h1>{{ .Title }}</h1>
-    <img src="/images/CAcert-logo.svg" width="510" height="116" alt="CAcert">
+    <body class="text-center idp">
     {{ template "content" . }}
     <script type="text/javascript" src="/js/cacert.bundle.js"></script>
     </body>
diff --git a/templates/idp/client_certificate.gohtml b/templates/idp/client_certificate.gohtml
index 22d85ae..9d4937b 100644
--- a/templates/idp/client_certificate.gohtml
+++ b/templates/idp/client_certificate.gohtml
@@ -1,14 +1,16 @@
 {{ define "content" }}
-    <p>{{ .IntroText }}</p>
-    <ul>
-        {{ range .emails }}
-            <li>{{ . }}</li>{{ end }}
-    </ul>
-    <p>{{ .RequestText }}</p>
-    <form method="post">
+    <form class="form-signin" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
+        <p class="text-left">{{ .IntroText }}</p>
+        <ul class="text-left">
+            {{ range .emails }}
+                <li>{{ . }}</li>{{ end }}
+        </ul>
+        <p class="text-left">{{ .RequestText }}</p>
         {{ .csrfField }}
         <input type="hidden" name="action" value="cert-login"/>
-        <button type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
-        <button type="submit">{{ .RejectLabel }}</button>
+        <button class="btn btn-lg btn-block btn-primary" type="submit" name="use-certificate" value="yes">{{ .AcceptLabel }}</button>
+        <button class="btn btn-block btn-outline-secondary" type="submit">{{ .RejectLabel }}</button>
     </form>
 {{ end }}
\ No newline at end of file
diff --git a/templates/idp/consent.gohtml b/templates/idp/consent.gohtml
index 4c47ff1..285d975 100644
--- a/templates/idp/consent.gohtml
+++ b/templates/idp/consent.gohtml
@@ -1,24 +1,27 @@
 {{ define "content" }}
-    <p>{{ .IntroConsentRequested }}</p>
-    {{ if .client.LogoURI }}
-        <p>
-            <img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
-        </p>
-    {{ end }}
-    <p>{{ .IntroMoreInformation }}</p>
-    <form method="post">
-        {{ .csrfField }}
-        <ul>
+    <form class="form-consent" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
+        <p class="text-left">{{ .IntroConsentRequested }}</p>
+        {{ if .client.LogoURI }}
+            <p>
+                <img src="{{ .client.LogoURI }}" alt="{{ .client.ClientName }}"/>
+            </p>
+        {{ end }}
+        <ul class="list-group text-left small mb-3">
             {{ range .requestedScope }}
-                <li>{{ .Label }}</li>
+                <li class="list-group-item">{{ .Label }}</li>
             {{ end }}
         </ul>
+        <p class="text-left">{{ .IntroMoreInformation }}</p>
 
-        <p>
-            <input type="checkbox" name="consent" id="consent" value="true"/> <label
-                    for="consent">{{ .LabelConsent }}</label>
-        </p>
+        {{ .csrfField }}
+        <div class="checkbox mb-3">
+            <label>
+                <input type="checkbox" name="consent" id="consent" value="true"/>
+                {{ .LabelConsent }}</label>
+        </div>
 
-        <button type="submit">{{ .LabelSubmit }}</button>
+        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelSubmit }}</button>
     </form>
 {{ end }}
\ No newline at end of file
diff --git a/templates/idp/login.gohtml b/templates/idp/login.gohtml
index 7196446..8c0440b 100644
--- a/templates/idp/login.gohtml
+++ b/templates/idp/login.gohtml
@@ -1,14 +1,16 @@
 {{ define "content" }}
-    <form method="post">
+    <form class="form-signin" method="post">
+        <img src="/images/CAcert-logo.svg" width="300" height="68" alt="CAcert" class="mb-4">
+        <h1 class="h3 mb-3">{{ .Title }}</h1>
         {{ .csrfField }}
         <input type="hidden" name="action" value="password-login"/>
         {{ if .errors.Form}}<p>{{ .errors.Form }}</p>{{ end }}
         {{ if .errors.Email }}<p>{{ .errors.Email }}</p>{{ end }}
-        <label for="email">{{ .LabelEmail }}</label>
-        <input type="text" id="email" name="email" value="{{ .Email }}"/><br/>
+        <label for="email" class="sr-only">{{ .LabelEmail }}</label>
+        <input type="email" id="email" class="form-control" placeholder="{{ .LabelEmail }}" required autofocus name="email" value="{{ .Email }}"/><br/>
         {{ if .errors.Password }}<p>{{ .errors.Password }}</p>{{ end }}
-        <label for="password">{{ .LabelPassword }}</label>
-        <input type="password" id="password" name="password" value=""/><br/>
-        <button type="submit">{{ .LabelLogin }}</button>
+        <label for="password" class="sr-only">{{ .LabelPassword }}</label>
+        <input type="password" id="password" class="form-control" placeholder="{{ .LabelPassword }}" name="password" value=""/><br/>
+        <button class="btn btn-lg btn-primary btn-block" type="submit">{{ .LabelLogin }}</button>
     </form>
 {{ end }}
\ No newline at end of file
