diff --git a/app/assets/javascripts/app/controllers/layout_ref.js.coffee b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
index 7e5831f3e..e446e71a0 100644
--- a/app/assets/javascripts/app/controllers/layout_ref.js.coffee
+++ b/app/assets/javascripts/app/controllers/layout_ref.js.coffee
@@ -24,7 +24,10 @@ class Content extends App.ControllerContent
 
     for avatar in @$('.user.avatar')
       avatar = $(avatar)
-      size = if avatar.hasClass('big') then 50 else 40
+      size = switch 
+        when avatar.hasClass('size-80') then 80 
+        when avatar.hasClass('size-50') then 50
+        else 40
       @createUniqueAvatar avatar, size, avatar.data('firstname'), avatar.data('lastname'), avatar.data('userid')
 
   createUniqueAvatar: (holder, size, firstname, lastname, id) ->
@@ -576,4 +579,15 @@ class ImportWizard extends App.ControllerContent
 
 App.Config.set( 'layout_ref/import_wizard', ImportWizard, 'Routes' )
 
+class UserZoom extends App.ControllerContent
+
+  constructor: ->
+    super
+    @render()
+
+  render: ->
+    @html App.view('layout_ref/user_zoom')()
+
+App.Config.set( 'layout_ref/user_zoom', UserZoom, 'Routes' )
+
 App.Config.set( 'LayoutRef', { prio: 1700, parent: '#current_user', name: 'Layout Reference', target: '#layout_ref', role: [ 'Admin' ] }, 'NavBarRight' )
diff --git a/app/assets/javascripts/app/models/user.js.coffee b/app/assets/javascripts/app/models/user.js.coffee
index 19625a39c..0734eefea 100644
--- a/app/assets/javascripts/app/models/user.js.coffee
+++ b/app/assets/javascripts/app/models/user.js.coffee
@@ -52,24 +52,24 @@ class App.User extends App.Model
     else
       return '??'
 
-  avatar: (big = false, placement = '', cssClass = '') ->
-    if big
-      cssClass += ' big'
+  avatar: (size = 40, placement = '', cssClass = '') ->
+    cssClass += " size-#{ size }"
+
     if placement
       placement = "data-placement=\"#{placement}\""
 
     if @image is 'none'
-      return @uniqueAvatar(big, placement, cssClass)
+      return @uniqueAvatar(size, placement, cssClass)
     else
       "<span class=\"avatar user-popover #{cssClass}\" data-id=\"#{@id}\" style=\"background-image: url(#{ @imageUrl })\" #{placement}></span>"
 
-  uniqueAvatar: (big = false, placement = '', cssClass = '') ->
-    if big
-      cssClass += ' big'
+  uniqueAvatar: (size = 40, placement = '', cssClass = '') ->
+    if size and !cssClass
+      cssClass += " size-#{ size }"
 
     width  = 300
     height = 226
-    size   = if big then 50 else 40
+    size = parseInt(size, 10)
 
     rng = new Math.seedrandom(@id)
     x = rng() * (width - size)
diff --git a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
index 5f5448bb1..7fb82e5ab 100644
--- a/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/communication_overview.jst.eco
@@ -32,7 +32,7 @@
     </div>
     <div class="page-header horizontal">
       <div class="flex vertical center">
-        <span class="avatar unique user-popover  big" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
+        <span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
         <div class="ticket-title">
           <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
         </div>
diff --git a/app/assets/javascripts/app/views/layout_ref/content.jst.eco b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
index 4586c066b..022bcd76f 100644
--- a/app/assets/javascripts/app/views/layout_ref/content.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content.jst.eco
@@ -16,6 +16,21 @@
 
   <h2>Avatars</h2>
 
+  <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
+
+  <p><code>.avatar</code></p>
+
+  <div class="avatar size-50" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
+
+  <p><code>.avatar.size-50</code></p>
+
+  <div class="avatar size-80" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
+
+  <p><code>.avatar.size-80</code></p>
+
+
+  <h2>Unique Avatars</h2>
+
   <p>
     Users and customers might not have a profile images because:
   </p>
@@ -36,9 +51,12 @@
   <span class="user avatar" data-firstname="Stefanie" data-lastname="Lingerl" data-userid="7"></span>
   <span class="user avatar" data-firstname="Igor" data-lastname="Kaufer" data-userid="8"></span>
   <span class="user avatar" data-firstname="Ina" data-lastname="Lingerl" data-userid="12"></span>
-  <span class="big user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
-  <span class="big user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
-  <span class="big user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
+  <span class="size-50 user avatar" data-firstname="Andreas" data-lastname="Berger" data-userid="9"></span>
+  <span class="size-50 user avatar" data-firstname="Luisa" data-lastname="Hofner" data-userid="10"></span>
+  <span class="size-50 user avatar" data-firstname="Clara" data-lastname="Altman" data-userid="11"></span>
+  <span class="size-80 user avatar" data-firstname="Christian" data-lastname="Jonga" data-userid="12"></span>
+  <span class="size-80 user avatar" data-firstname="Rando" data-lastname="Bauer" data-userid="13"></span>
+  <span class="size-80 user avatar" data-firstname="Korinna" data-lastname="Jung" data-userid="14"></span>
 
   <hr>
 
diff --git a/app/assets/javascripts/app/views/layout_ref/content_sidebar_right.jst.eco b/app/assets/javascripts/app/views/layout_ref/content_sidebar_right.jst.eco
index 1112e5594..76146796f 100644
--- a/app/assets/javascripts/app/views/layout_ref/content_sidebar_right.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/content_sidebar_right.jst.eco
@@ -7,12 +7,6 @@
 Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
   </p>
 
-  <p>
-  <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
-  <div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_normal.jpg)"></div>
-  <div class="avatar" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
-  <div class="avatar big" style="background-image: url(https://pbs.twimg.com/profile_images/1216362658/DSC_0084-p_bigger.jpg)"></div>
-
   </p>
 
   <p>
diff --git a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
index 265f4985d..e0d37a29e 100644
--- a/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar-holder.jst.eco
@@ -1,4 +1,4 @@
 <div class="avatar-holder">
-  <span class="avatar big" style="background-image: url(<%- @src %>)"></span>
+  <span class="avatar size-50" style="background-image: url(<%- @src %>)"></span>
   <div class="avatar-delete"><div class="delete icon"></div></div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/profile/avatar.jst.eco b/app/assets/javascripts/app/views/profile/avatar.jst.eco
index 5cda454e9..bbeea8257 100644
--- a/app/assets/javascripts/app/views/profile/avatar.jst.eco
+++ b/app/assets/javascripts/app/views/profile/avatar.jst.eco
@@ -11,13 +11,13 @@
 </div>
 <div class="avatar-gallery horizontal wrap">
   <div class="avatar-holder">
-    <%- App.Session.get().uniqueAvatar(true) %>
+    <%- App.Session.get().uniqueAvatar("50") %>
   </div>
   <div class="avatar-holder">
-    <%- App.Session.get().avatar(true, undefined, 'is-active') %>
+    <%- App.Session.get().avatar("50", undefined, 'is-active') %>
     <div class="avatar-delete"><div class="delete icon"></div></div>
   </div>
   <!-- <div class="active">
-    <div class="big avatar avatar--new centered"><div class="white plus icon"></div></div>
+    <div class="size-50 avatar avatar--new centered"><div class="white plus icon"></div></div>
   </div> -->
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
index c24850dd5..9450c636f 100644
--- a/app/assets/javascripts/app/views/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom.jst.eco
@@ -25,7 +25,7 @@
         </div>
         <div class="page-header horizontal">
           <div class="flex vertical center">
-            <%- @ticket.customer.avatar(true) %>
+            <%- @ticket.customer.avatar("50") %>
             <div class="ticket-title"></div>
             <div class="ticket-meta"></div>
           </div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index 0505594f0..db367cf14 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -39,7 +39,7 @@
     <% else: %>
     <%    position = 'right' %>
     <% end %>
-    <%- article.created_by.avatar(false, position) %>
+    <%- article.created_by.avatar("40", position) %>
     <div class="flex bubble-gap internal-border">
       <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
     </div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index d92111bad..7349c3582 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
@@ -4,7 +4,7 @@
   <input type="hidden" name="form_id" value="<%= @article.form_id %>">
   <div class="bubble-grid horizontal">
     <div class="editControls">
-      <%- App.User.fullLocal( @S('id') ).avatar(false, 'right', 'zIndex-5') %>
+      <%- App.User.fullLocal( @S('id') ).avatar("40", 'right', 'zIndex-5') %>
       <div class="dark pop-select zIndex-7 editControls-item">
         <div class="pop-selected u-clickable centered">
           <div class="gray <%- @article.type %> channel icon"></div>
diff --git a/app/assets/javascripts/app/views/widget/user.jst.eco b/app/assets/javascripts/app/views/widget/user.jst.eco
index fbf22f122..40c5014a7 100644
--- a/app/assets/javascripts/app/views/widget/user.jst.eco
+++ b/app/assets/javascripts/app/views/widget/user.jst.eco
@@ -1,7 +1,7 @@
 <div class="userInfo">
   <div class="userInfo-entry">
     <td>
-      <%- @user.avatar(true) %>
+      <%- @user.avatar("50") %>
     <div class="userInfo-name">
       <div class="u-textTruncate" title="<%- @Ti( 'Name') %>">
         <%= @user.displayName() %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index b44c1c8ca..192996287 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -5,12 +5,13 @@ body {
   background: hsl(210,17%,98%);
 }
 
-ol,
+p, 
+ol, 
 ul {
+  color: #bcbcbb;
 }
 
 p {
-  color: #bcbcbb;
   margin: 14px 0;
 }
 
@@ -2100,11 +2101,16 @@ footer {
   vertical-align: bottom;
 }
 
-  .big.avatar {
+  .avatar.size-50 {
     width: 50px;
     height: 50px;
   }
 
+  .avatar.size-80 {
+    width: 82px;
+    height: 82px;
+  }
+
   .unique.avatar {
     background-image: image_url("avatar-bg.png");
     background-size: auto;
@@ -2117,11 +2123,16 @@ footer {
     text-shadow: 0 1px rgba(0,0,0,.2);
   }
 
-  .unique.big.avatar {
+  .unique.avatar.size-50 {
     font-size: 16px;
     line-height: 52px;
   }
 
+  .unique.avatar.size-80 {
+    font-size: 20px;
+    line-height: 84px;
+  }
+
 .sidebar {
   width: 32%;
   max-width: 300px;