diff --git a/code/gms-frontend/src/app/components/home/home.component.html b/code/gms-frontend/src/app/components/home/home.component.html
index 79e99741..c928635d 100644
--- a/code/gms-frontend/src/app/components/home/home.component.html
+++ b/code/gms-frontend/src/app/components/home/home.component.html
@@ -1,10 +1,10 @@
-<div *ngIf="data">
-  <div *ngIf="data.admin === false">
+<div *ngIf="data !== undefined && loading !== ''">
+  <div *ngIf="data.role === 'ROLE_USER'">
     <div class="gms-box">
-      <div class="warning" *ngIf="!loading && data.apiKeyCount === 0">
+      <div class="warning" *ngIf="loading === 'LOADED' && data.apiKeyCount === 0">
         Please add an API key!
       </div>
-      <div class="warning" *ngIf="!loading && data.keystoreCount === 0">
+      <div class="warning" *ngIf="loading === 'LOADED' && data.keystoreCount === 0">
         Please add a keystore!
       </div>
       <div class="gms-sub-box">
@@ -47,17 +47,17 @@
       </div>
     </div>
   </div>
-  <div *ngIf="data.admin">
+  <div *ngIf="data.role === 'ROLE_ADMIN'">
     <div class="gms-box">
       <div class="gms-sub-box">
         <mat-card class="gms-card-left">
           <mat-card-content>
             <mat-card-title>User management</mat-card-title>
             <mat-card-subtitle>Manage your users</mat-card-subtitle>
-            <div class="warning" *ngIf="data.userCount === 0">
+            <div class="warning" *ngIf="loading === 'LOADED' && data.userCount === 0">
               <b>Warning:</b> No user registered yet!
             </div>
-            <p *ngIf="data.userCount > 0">
+            <p *ngIf="loading === 'LOADED' && data.userCount > 0">
               Number of users: <b>{{data.userCount}}</b><br />
             </p>
           </mat-card-content>
diff --git a/code/gms-frontend/src/app/components/home/home.component.scss b/code/gms-frontend/src/app/components/home/home.component.scss
index 68fad0df..d096d1db 100644
--- a/code/gms-frontend/src/app/components/home/home.component.scss
+++ b/code/gms-frontend/src/app/components/home/home.component.scss
@@ -69,7 +69,7 @@ tr th {
 
 @media screen and (min-width: 1200px) {
   .gms-sub-box {
-    display: inline-table;
+    display: inline-block;
     width: 50%;
   }
 
diff --git a/code/gms-frontend/src/app/components/home/home.component.spec.ts b/code/gms-frontend/src/app/components/home/home.component.spec.ts
index a8bbf48d..d6872c42 100644
--- a/code/gms-frontend/src/app/components/home/home.component.spec.ts
+++ b/code/gms-frontend/src/app/components/home/home.component.spec.ts
@@ -70,7 +70,7 @@ describe('HomeComponent', () => {
             totalElements: 0
            },
            userCount: 1,
-           admin: true,
+           role: 'ROLE_ADMIN',
            apiKeyCount: 0,
            keystoreCount: 0,
            announcementCount: 0,
diff --git a/code/gms-frontend/src/app/components/home/home.component.ts b/code/gms-frontend/src/app/components/home/home.component.ts
index 92cddc8e..aed20f3a 100644
--- a/code/gms-frontend/src/app/components/home/home.component.ts
+++ b/code/gms-frontend/src/app/components/home/home.component.ts
@@ -2,7 +2,6 @@ import { ArrayDataSource } from "@angular/cdk/collections";
 import { Component, OnInit } from "@angular/core";
 import { Router } from "@angular/router";
 import { SharedDataService } from "../../common/service/shared-data-service";
-import { isSpecificUser } from "../../common/utils/permission-utils";
 import { Event } from "../event/model/event.model";
 import { User } from "../user/model/user.model";
 import { EMPTY_HOME_DATA, HomeData } from "./model/home-data.model";
@@ -22,7 +21,7 @@ export class HomeComponent implements OnInit {
     eventColumns: string[] = ['id', 'userId', 'eventDate', 'operation', 'target'];
     eventDataSource: ArrayDataSource<Event>;
     data: HomeData;
-    loading = true;
+    loading: string = '';
 
     constructor(
         public router: Router,
@@ -31,6 +30,7 @@ export class HomeComponent implements OnInit {
     ) {}
 
     ngOnInit(): void {
+        this.loading = 'LOADING';
         this.sharedData.userSubject$
             .pipe(mergeMap((user: User | undefined): Observable<HomeData> => this.processUser(user)))
             .subscribe((homeData: HomeData) => {
@@ -39,7 +39,7 @@ export class HomeComponent implements OnInit {
                     ...homeData
                 };
                 this.eventDataSource = new ArrayDataSource<Event>(this.data.events.resultList);
-                this.loading = false;
+                this.loading = 'LOADED';
             });
     }
 
@@ -50,7 +50,8 @@ export class HomeComponent implements OnInit {
 
         return this.homeService.getData().pipe(map((response): HomeData => {
             const data: HomeData = response;
-            data.admin = isSpecificUser(user.roles, 'ROLE_ADMIN');
+            // TODO Refactor the app to allow only 1 type of role
+            data.role = user.roles[0];
             return data;
         }));
     }
diff --git a/code/gms-frontend/src/app/components/home/model/home-data.model.ts b/code/gms-frontend/src/app/components/home/model/home-data.model.ts
index e1beee14..790fb52a 100644
--- a/code/gms-frontend/src/app/components/home/model/home-data.model.ts
+++ b/code/gms-frontend/src/app/components/home/model/home-data.model.ts
@@ -12,7 +12,7 @@ export interface HomeData {
    userCount : number,
    announcements : AnnouncementList,
    events : EventList,
-   admin? : boolean
+   role? : string
 }
 
 export const EMPTY_HOME_DATA: HomeData = {
@@ -25,7 +25,7 @@ export const EMPTY_HOME_DATA: HomeData = {
     totalElements: 0
    },
    userCount: 0,
-   admin: false,
+   role: undefined,
    apiKeyCount: 0,
    keystoreCount: 0,
    announcementCount: 0,