diff --git a/src/delegate.html b/src/delegate.html
index 0f837f8..bbf09f6 100644
--- a/src/delegate.html
+++ b/src/delegate.html
@@ -2,6 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
     <title>Login</title>
     <link rel="stylesheet"
           href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
@@ -74,7 +76,7 @@ <h1>Request access</h1>
 
     <div class="form-group">
         <label for="subject">Reason for access (free text, mandatory)</label>
-        <input class="form-control" type="text" name="subject" id="subject" value=""/>
+        <input class="form-control" type="text" name="subject" id="subject" value="" required />
     </div>
 
     <fieldset class="form-group">
@@ -139,8 +141,10 @@ <h1>Request access</h1>
 
     var dateTime = new Date();
     var formSignIn = document.querySelector('.form-signin');
+    var subjectInput = formSignIn.querySelector('#subject');
     var inputExp = formSignIn.querySelector('#exp');
     var dateTimePicker = $('#datetimepicker1');
+    var domains = document.getElementById('domains')
     var authorizerResponse = document.querySelector('.authorizer-response');
     var authorizerToken = document.getElementById('token');
 
@@ -151,12 +155,18 @@ <h1>Request access</h1>
     formSignIn.addEventListener('submit', function (e) {
         e.preventDefault();
 
-        var formData = new URLSearchParams(new FormData(formSignIn));
+        var formDataUrlParams = 'exp=' + inputExp.value + '&subject=' + subjectInput.value;
+        domains.querySelectorAll('input').forEach(function(input) {
+          if (input.checked) {
+            formDataUrlParams = formDataUrlParams + '&' + input.name + '=' + input.value
+          }
+        })
+        var formDataUrlSearchParams = new URLSearchParams(formDataUrlParams);
 
         fetch('/delegate', {
             credentials: 'include',
             method: 'post',
-            body: formData
+            body: formDataUrlSearchParams.toString()
         })
             .then(function (response) {
                 if (response.status !== 200)
diff --git a/src/index.html b/src/index.html
index 734d9d6..4956788 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,29 +3,57 @@
 <head>
     <meta charset="UTF-8">
     <title>Authorizer</title>
+    <style media="screen">
+        html, body {
+            height: 100%;
+        }
+
+        body {
+            display: -ms-flexbox;
+            display: flex;
+            -ms-flex-align: center;
+            align-items: center;
+            flex-direction: column;
+            padding-top: 40px;
+            padding-bottom: 40px;
+            background-color: #f5f5f5;
+        }
+        
+      .vrt-authorizer-main {
+          width: 100%;
+          max-width: 480px;
+          padding: 30px 25px;
+          margin: 2rem auto;
+          background: white;
+          border-radius: 5px;
+          box-shadow: 0 0 35px rgba(0, 0, 0, .1);
+      }
+    </style>
 </head>
 <body>
-<h1>Authorizer</h1>
-<div class="no_access" style="display: none;">
-    <p>You have no access.</p>
-    <p>
-        <a href="{{{authenticate}}}"><!-- href filled in by Python -->Authenticate</a>
-    </p>
-</div>
-<div class="access" style="display: none;">
-    <p>You have a valid token until <span class="exp">EXPIRATION</span></p>
-    <p>This token was (originally) generated by <span class="azp"></span></p>
-    <p class="sub_present" style="display: none;">This token was delegated to: <span class="sub"></span></p>
+  <main class="vrt-authorizer-main">
+    <h1>Authorizer</h1>
+    <div class="no_access" style="display: none;">
+        <p>You have no access.</p>
+        <p>
+            <a href="{{{authenticate}}}"><!-- href filled in by Python -->Authenticate</a>
+        </p>
+    </div>
+    <div class="access" style="display: none;">
+        <p>You have a valid token until <span class="exp">EXPIRATION</span></p>
+        <p>This token was (originally) generated by <span class="azp"></span></p>
+        <p class="sub_present" style="display: none;">This token was delegated to: <span class="sub"></span></p>
 
-    <p class="all_domains" style="display: none;">You have access to all domains.</p>
+        <p class="all_domains" style="display: none;">You have access to all domains.</p>
 
-    <p class="domain_limit" style="display: none;">You have access to the following domains:</p>
-    <ul class="domain_limit domain_list" style="display: none;"></ul>
+        <p class="domain_limit" style="display: none;">You have access to the following domains:</p>
+        <ul class="domain_limit domain_list" style="display: none;"></ul>
 
-    <p class="access" style="display: none;">
-        <a href="/delegate">Delegate (part of) this access to a third party</a>
-    </p>
-</div>
+        <p class="access" style="display: none;">
+            <a href="/delegate">Delegate (part of) this access to a third party</a>
+        </p>
+    </div>
+  </main>
 
 <script type="text/javascript">
     /* These variables will be filled in by the Python code when this file
