diff --git a/public/styles.css b/public/styles.css
index da5e989..a532917 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -104,10 +104,18 @@ hr {
 .hasResponseStatus.status-503 {
   background-color: #ffA88050;
 }
-.role {
+.role, .scope {
   padding: 3px 6px;
+  border-radius: 6px;
+  margin: 3px;
+}
+.role {
   background-color: #44228840;
 }
+.scope {
+  background-color: #8888FF80;
+}
+
 
 /* For home */
 
diff --git a/src/App.vue b/src/App.vue
index aed43d5..d05a079 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,14 +49,18 @@ async function get_resource(id: string) {
       <p>Hey, {{ keycloak.idTokenParsed?.name }}</p>
       <img v-if="keycloak.idTokenParsed?.picture" :src="keycloak.idTokenParsed.picture" class="picture"></img>
       <div>{{ keycloak.idTokenParsed?.email }}</div>
-      <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web']">
-        <span>Roles:</span>
-        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test-web'].roles" class="role">{{
+      <div v-if="keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']">
+        <span>Roles for oidc-test:</span>
+        <span v-for="role in keycloak.resourceAccess && keycloak.resourceAccess['oidc-test']['roles']" class="role">{{
           role }}</span>
       </div>
       <div v-if="keycloak.idTokenParsed?.oidc_provider">
         <span>Provider:</span>
-        {{ keycloak.idTokenParsed?.oidc_provider }}
+        {{ keycloak.idTokenParsed.oidc_provider }}
+      </div>
+      <div v-if="keycloak.tokenParsed?.scope">
+        <span>Scopes</span>:
+        <span v-for="scope in keycloak.tokenParsed.scope.split(' ')" class="scope">{{ scope }}</span>
       </div>
       <button @click="accountManagemnt">Account management</button>
       <button @click="manuallyRefreshAccessToken">Refresh access token</button>