diff --git a/public/styles.css b/public/styles.css
index 17d7c4c..2f458f4 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -2,11 +2,15 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: floralwhite;
   margin: 0;
+  font-family: system-ui;
 }
 h1 {
   text-align: center;
   background-color: #f786867d;
   margin: 0 0 0.2em 0;
+  box-shadow: 0px 0.2em 0.2em #f786867d;
+  text-shadow: 0 0 2px #00000080;
+  font-weight: 200;
 }
 p {
   margin: 0.2em;
@@ -184,8 +188,8 @@ hr {
   width: fit-content;
   align-items: center;
   margin: 5px auto;
-  box-shadow: 0px 0px 10px #90c3ee;
-  background-color: #90c3ee;
+  box-shadow: 0px 0px 10px #90c3eeA0;
+  background-color: #90c3eeA0;
   border-radius: 8px;
 }
 
@@ -201,7 +205,7 @@ hr {
   color: darkred;
 }
 
-.from-keycloak-vue {
+.token-info {
   margin: 0 1em;
 }
 
diff --git a/src/App.vue b/src/App.vue
index fc161f9..aed43d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -59,6 +59,7 @@ async function get_resource(id: string) {
         {{ keycloak.idTokenParsed?.oidc_provider }}
       </div>
       <button @click="accountManagemnt">Account management</button>
+      <button @click="manuallyRefreshAccessToken">Refresh access token</button>
       <button @click="logout" class="logout">Logout</button>
     </div>
     <hr>
@@ -80,9 +81,8 @@ async function get_resource(id: string) {
       </div>
     </div>
     <div v-if="msg" class="msg resource">{{ msg }}</div>
-    <div v-if="settings.tokenSandbox" class="from-keycloak-vue">
+    <div v-if="settings.tokenSandbox" class="token-info">
       <hr>
-      <button @click="manuallyRefreshAccessToken">Refresh access token</button>
       <div>
         <h2>idToken</h2>
         <div class="token">