diff --git a/frontend/src/components/falukant/StatusBar.vue b/frontend/src/components/falukant/StatusBar.vue
index e2427f5..e3bb0be 100644
--- a/frontend/src/components/falukant/StatusBar.vue
+++ b/frontend/src/components/falukant/StatusBar.vue
@@ -5,19 +5,22 @@
             <img src="/images/icons/falukant/messages24.png" class="menu-icon" />
         </div>
         <template v-for="item in statusItems" :key="item.key">
-            <div class="status-item" v-if="item.value !== null && item.image == null" :title="$t(`falukant.statusbar.${item.key}`)">
-                <span class="status-icon">
+            <div class="status-item" v-if="item.value !== null && item.image == null">
+                <span class="status-icon-wrapper">
                     <template v-if="item.iconImage">
-                        <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" />:
+                        <img :src="'/images/icons/' + item.iconImage" class="inline-icon" width="16" height="16" :title="String(item.value)" />
                     </template>
                     <template v-else>
-                        {{ item.icon }}:
+                        <span class="status-icon-symbol" :title="String(item.value)">{{ item.icon }}</span>
                     </template>
-                    {{ item.value }}
                 </span>
+                <span class="status-label" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.value }}</span>
             </div>
-            <div class="status-item" v-else-if="item.image !== null" :title="$t(`falukant.statusbar.${item.key}`)">
-                <span class="status-icon">{{ item.icon }}:</span> <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" />
+            <div class="status-item" v-else-if="item.image !== null">
+                <span class="status-icon-wrapper">
+                    <span class="status-icon-symbol" :title="$t(`falukant.statusbar.${item.key}`)">{{ item.icon }}</span>
+                </span>
+                <img :src="'/images/icons/falukant/relationship-' + item.image + '.png'" class="relationship-icon" :title="$t(`falukant.statusbar.${item.key}`)" />
             </div>
         </template>
         <span v-if="statusItems.length > 0 && menu.falukant && menu.falukant.children">
@@ -199,7 +202,17 @@ export default {
     align-items: center;
 }
 
-.status-icon {
+.status-icon-wrapper {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 4px;
+}
+
+.status-icon-symbol {
+    font-size: 14px;
+}
+
+.status-label {
     font-size: 14px;
 }