diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 991662350..b513291e0 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -3,12 +3,8 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container">
         <div class="main-navigation-left">
-          <a
-            v-router-link
-            style="display: inline-flex"
-            href="/"
-          >
-            <ds-logo />
+          <a v-router-link style="display: inline-flex" href="/">
+            <ds-logo/>
           </a>
         </div>
         <div class="main-navigation-center hc-navbar-search">
@@ -24,55 +20,34 @@
         </div>
         <div class="main-navigation-right">
           <no-ssr>
-            <locale-switch
-              class="topbar-locale-switch"
-              placement="bottom"
-              offset="23"
-            />
+            <locale-switch class="topbar-locale-switch" placement="bottom" offset="23"/>
           </no-ssr>
           <template v-if="isLoggedIn">
             <no-ssr>
               <dropdown class="avatar-menu">
-                <template
-                  slot="default"
-                  slot-scope="{toggleMenu}"
-                >
+                <template slot="default" slot-scope="{toggleMenu}">
                   <a
                     class="avatar-menu-trigger"
                     :href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
                     @click.prevent="toggleMenu"
                   >
-                    <ds-avatar
-                      :image="user.avatar"
-                      :name="user.name"
-                      size="42"
-                    />
-                    <ds-icon
-                      size="xx-small"
-                      name="angle-down"
-                    />
+                    <ds-avatar :image="user.avatar" :name="user.name" size="42"/>
+                    <ds-icon size="xx-small" name="angle-down"/>
                   </a>
                 </template>
-                <template
-                  slot="popover"
-                  slot-scope="{closeMenu}"
-                >
+                <template slot="popover" slot-scope="{closeMenu}">
                   <div class="avatar-menu-popover">
-                    {{ $t('login.hello') }} <b>{{ user.name }}</b>
+                    {{ $t('login.hello') }}
+                    <b>{{ userName() }}</b>
                     <template v-if="user.role !== 'user'">
                       <ds-text
                         color="softer"
                         size="small"
                         style="margin-bottom: 0"
-                      >
-                        {{ user.role | camelCase }}
-                      </ds-text>
+                      >{{ user.role | camelCase }}</ds-text>
                     </template>
                     <hr>
-                    <ds-menu
-                      :routes="routes"
-                      :matcher="matcher"
-                    >
+                    <ds-menu :routes="routes" :matcher="matcher">
                       <ds-menu-item
                         slot="menuitem"
                         slot-scope="item"
@@ -80,15 +55,14 @@
                         :parents="item.parents"
                         @click.native="closeMenu(false)"
                       >
-                        <ds-icon :name="item.route.icon" /> {{ item.route.name }}
+                        <ds-icon :name="item.route.icon"/>
+                        {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
                     <hr>
-                    <nuxt-link
-                      class="logout-link"
-                      :to="{ name: 'logout'}"
-                    >
-                      <ds-icon name="sign-out" /> {{ $t('login.logout') }}
+                    <nuxt-link class="logout-link" :to="{ name: 'logout'}">
+                      <ds-icon name="sign-out"/>
+                      {{ $t('login.logout') }}
                     </nuxt-link>
                   </div>
                 </template>
@@ -100,12 +74,12 @@
     </div>
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
-        <nuxt />
+        <nuxt/>
       </div>
     </ds-container>
-    <div id="overlay" />
+    <div id="overlay"/>
     <no-ssr>
-      <modal />
+      <modal/>
     </no-ssr>
   </div>
 </template>
@@ -193,6 +167,16 @@ export default {
         return this.$route.path === url
       }
       return this.$route.path.indexOf(url) === 0
+    },
+    // TODO method this is a duplicate from /pages/profile/_id/_slug.vue
+    // where to put this?
+    userName(maxLength) {
+      // Return Anonymous if no Username is given
+      if (!this.user.name) {
+        return this.$t('profile.userAnonym')
+      }
+      // Return full Username or truncated Username
+      return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
     }
   }
 }