diff --git a/client/src/assets/css/components.scss b/client/src/assets/css/components.scss
index 23fe892..5350819 100644
--- a/client/src/assets/css/components.scss
+++ b/client/src/assets/css/components.scss
@@ -1,4 +1,4 @@
 @import './colors.scss';
 
-$primary-font: 'Wendy One';
-$secondary-font: 'Dosis';
+$font-primary: 'Wendy One';
+$font-secondary: 'Dosis';
diff --git a/client/src/components/Button.vue b/client/src/components/Button.vue
index ec4fb82..699b0fc 100644
--- a/client/src/components/Button.vue
+++ b/client/src/components/Button.vue
@@ -31,7 +31,7 @@ defineProps({
     background-color: inherit;
     color: $text-secondary-color;
     text-align: center;
-    font-family: $secondary-font;
+    font-family: $font-secondary;
     font-weight: bold;
     font-size: 24px;
     border: none;
diff --git a/client/src/components/LoginBox.vue b/client/src/components/LoginBox.vue
index 64512d2..f1e2b32 100644
--- a/client/src/components/LoginBox.vue
+++ b/client/src/components/LoginBox.vue
@@ -52,7 +52,7 @@ const login = (): void => {
     border: none;
     border-bottom: $box-primary-border;
     color: $text-primary-color;
-    font-family: $secondary-font;
+    font-family: font-secondary;
     font-weight: 800;
     font-size: 24px;
     outline: none;
diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 3999a9b..0ff5738 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -56,7 +56,7 @@
 
   &__title {
     font-size: 64px;
-    font-family: $primary-font;
+    font-family: $font-primary;
     color: $box-primary-text-color;
     text-align: center;
   }
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
index c9bf7cc..6ded3bc 100644
--- a/client/src/components/TopBar.vue
+++ b/client/src/components/TopBar.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="topbar__separator" />
     <div class="topbar__actionbar">
-      Topbar
+      {{ userInfo.role }}
     </div>
     <div class="topbar__separator" />
     <div class="topbar__logout-button-container">
@@ -38,6 +38,9 @@ const actionLogout = async () => {
     height: 64px;
     align-items: center;
     background-color: $topbar-background-color;
+    font-size: 16px;
+    font-family: $font-primary;
+    font-weight: bold;
   }
 
   &__username,
@@ -47,6 +50,7 @@ const actionLogout = async () => {
     text-align: center;
     color: $text-primary-color;
   }
+
   &__actionbar {
     flex-grow: 1;
   }
@@ -61,6 +65,7 @@ const actionLogout = async () => {
   &__logout-button {
     color: $text-primary-color;
     font-size: 16px;
+    font-family: $font-primary;
 
     &:hover {
       color: $text-primary-hover-color;
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
index debe25f..61f67e5 100644
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@@ -21,7 +21,7 @@ body,
 
 body {
   background-color: $background-primary-color;
-  font-family: $primary-font;
+  font-family: $font-primary;
 }
 
 a {
diff --git a/client/src/stores/UserinfoStore.ts b/client/src/stores/UserinfoStore.ts
index 2c25f36..4a1f7e2 100644
--- a/client/src/stores/UserinfoStore.ts
+++ b/client/src/stores/UserinfoStore.ts
@@ -6,6 +6,14 @@ export const useUserinfoStore = defineStore('UserinfoStore', {
       userInfo: null,
     }
   },
+  getters: {
+    isAdmin(): boolean {
+      return this.userInfo && this.userInfo.role === 'admin'
+    },
+    isGamemaster(): boolean {
+      return this.userInfo && ( this.userInfo.role === 'gamemaster' || this.userInfo.role === 'admin' )
+    },
+  },
   actions: {
     setUserInfo(userInfo: unknown): void {
      this.userInfo = userInfo