diff --git a/src/templates/index.html b/src/templates/index.html
index f13c4e7..28ac9ec 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -24,7 +24,7 @@
         flex-direction: column;
         width: fit-content;
         align-items: center;
-        justify-content: center;
+        margin: 5px auto;
         box-shadow: 0px 0px 10px lightgreen;
         background-color: lightgreen;
       }
@@ -36,6 +36,16 @@
         max-width: 3em;
         max-height: 3em
       }
+      .user-info a.logout {
+        background-color: darkkhaki;
+        padding: 3px 6px;
+        text-decoration: none;
+        text-align: center;
+        color: black;
+      }
+      .user-info a.logout:hover {
+        background-color: orange;
+      }
       .login-box {
         text-align: center;
       }
@@ -62,17 +72,9 @@
         font-weight: bold;
         flex: 1 1 auto;
       }
-      .login-toolbox a.logout:hover {
-        background-color: orange;
-      }
       .login-toolbox a:hover {
         background-color: lightgreen;
       }
-      .login-toolbox .link-to-protected {
-        margin: 1em;
-        background-color: cyan;
-        box-shadow: 0px 0px 20px cyan;
-      }
       .debug-auth {
         font-size: 90%;
       }
@@ -82,36 +84,83 @@
       .content {
         text-align: left;
       }
+      .content .links-to-protected {
+        display: flex;
+        text-align: center;
+      }
+      .content .links-to-protected a {
+        margin: 5px;
+        color: black;
+        padding: 3px 5px;
+        text-decoration: none;
+      }
+      .hasResponseStatus {
+        background-color: #88888840;
+      }
+      .hasResponseStatus.status-200 {
+        background-color: #00ff0040;
+      }
+      .hasResponseStatus.status-401 {
+        background-color: #ff000040;
+      }
     </style>
+    <script>
+    function setStatus(theUrl, theId) {
+      var xmlHttp = new XMLHttpRequest();
+      xmlHttp.onreadystatechange = function() { 
+        if (xmlHttp.readyState == 4) {
+          var elem = document.getElementById(theId)
+          elem.classList.add("hasResponseStatus")
+          elem.classList.add("status-" + xmlHttp.status)
+          elem.title = "Response code " + xmlHttp.status
+          //console.log(theUrl, xmlHttp.status, elem)
+        }
+      }
+      xmlHttp.open("GET", theUrl, true); // true for asynchronous 
+      xmlHttp.send(null);
+    }
+    function checkPerms() {
+      setStatus("/protected", "protected")
+      setStatus("/protected-by-foorole", "protectedByfoorole")
+      setStatus("/protected-by-barrole", "protectedBybarrole")
+    }
+    </script>
   </head>
-  <body>
+  <body onload="checkPerms()">
     <h1>Test app for OIDC</h1>
+    {% if not user %} 
     <div class="login-box">
       <div class="login-toolbox">
-        {% if user %}
-          <a href="logout" class="logout">Logout</a>
-        {% else %} 
           {% for provider in settings.oidc.providers %}
             <a href="login?provider={{ provider.name }}">Login with: {{ provider.name }}</a>
           {% else %}
             <span class="error">Cannot login: no oidc prodiver in settings.yaml</span>
           {% endfor %}
-        {% endif %}
-        <a class="link-to-protected" href="protected">
-          Ckeck here to get NOT_AUTHORIZED (401) or access protected content
-        </a>
       </div>
     </div>
-    <div class="content">
+    {% endif %}
     {% if user %}
       <div class="user-info">
-      <p>Hey, {{ user.name }}</p>
-      {% if user.picture %}
-        <img src="{{ user.picture }}" class="picture"></img>
-      {% endif %}
-      <p>{{ user.email }}</p>
-    </div>
+        <p>Hey, {{ user.name }}</p>
+        {% if user.picture %}
+          <img src="{{ user.picture }}" class="picture"></img>
+        {% endif %}
+        <p>{{ user.email }}</p>
+        <a href="logout" class="logout">Logout</a>
+      </div>
     {% endif %}
+    <div class="content">
+      <div class="links-to-protected">
+        <a id="protected" href="protected">
+          Access protected content
+        </a>
+        <a id="protectedByfoorole" href="protected-by-foorole">
+          Access + foorole protected content
+        </a>
+        <a id="protectedBybarrole" href="protected-by-barrole">
+          Access + barrole protected content
+        </a>
+      </div>
     {% if user and settings.oidc.show_session_details %}
       <div class="debug-auth">
         <p>Session details:</p>
