diff --git a/css/style.scss b/css/style.scss
index eb4961204..296ee88c9 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -57,7 +57,9 @@ input.input-inline {
 	border-radius: 0;
 }
 
-
+#app img {
+	box-sizing: content-box;
+}
 
 #searchbox {
 	display: flex !important;
@@ -713,7 +715,7 @@ input.input-inline {
 			.assigned-user {
 				position: relative;
 
-				.avatardiv {
+				.avatardiv-container {
 					margin-right: 5px;
 				}
 				.icon-delete {
@@ -929,7 +931,7 @@ input.input-inline {
 	#assigned-users {
 		display: flex;
 
-		.avatardiv {
+		.avatardiv-container {
 			margin: 6px;
 		}
 	}
@@ -996,6 +998,10 @@ input.input-inline {
 	}
 }
 
+.avatardiv-container {
+	position: relative;
+}
+
 #board-detail-labels {
 	ul li {
 		input {
diff --git a/js/directive/avatar.js b/js/directive/avatar.js
index 85a253a26..fde199ce1 100644
--- a/js/directive/avatar.js
+++ b/js/directive/avatar.js
@@ -26,11 +26,12 @@ app.directive('avatar', function() {
 		restrict: 'A',
 		scope: true,
 		link: function(scope, element, attr){
-			attr.$observe('displayname', function(value){
-				if(value!==undefined) {
-					$(element).avatar(value, 32);
-				}
-			});
+			var value = attr.user;
+			$(element).wrap('<div class="avatardiv-container"></div>');
+			if(attr.contactsmenu && oc_current_user !== value) {
+				$(element).contactsMenu(value, 0, $(element).parent());
+			}
+			$(element).avatar(value, 32, false, false, false, attr.displayname);
 		}
 	};
 });
\ No newline at end of file
diff --git a/templates/part.board.mainView.php b/templates/part.board.mainView.php
index 079006181..823527d11 100644
--- a/templates/part.board.mainView.php
+++ b/templates/part.board.mainView.php
@@ -82,7 +82,7 @@
 							</span>
 							<div class="card-assigned-users">
 								<div class="assigned-user" ng-repeat="user in c.assignedUsers | limitTo: 3">
-									<div class="avatardiv" avatar ng-attr-displayname="{{ user.participant.uid }}" data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
+									<div class="avatardiv" avatar ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.displayname }}" data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}"></div>
 								</div>
 							</div>
 							<div class="app-popover-menu-utils" ng-if="!boardservice.isArchived()">
diff --git a/templates/part.board.sidebarView.php b/templates/part.board.sidebarView.php
index 1379acb74..8d44d34dd 100644
--- a/templates/part.board.sidebarView.php
+++ b/templates/part.board.sidebarView.php
@@ -25,7 +25,7 @@
                 <span><i class="icon icon-{{aclTypeString($item)}}"></i> {{ $item.participant.displayname }}</span>
             </ui-select-match>
             <ui-select-choices refresh="searchForUser($select.search)" refresh-delay="0" repeat="sharee in boardservice.sharees">
-				<div class="avatardiv" avatar displayname="{{ sharee.participant.uid }}" ng-if="sharee.type==OC.Share.SHARE_TYPE_USER"></div>
+				<div class="avatardiv" avatar data-user="{{ sharee.participant.uid }}" data-displayname="{{ sharee.participant.displayname }}" ng-if="sharee.type==OC.Share.SHARE_TYPE_USER"></div>
 				<div class="avatardiv" ng-if="sharee.type==OC.Share.SHARE_TYPE_GROUP"><i class="icon icon-{{aclTypeString(sharee)}}" title="<?php p($l->t('Access for')); ?> {{aclTypeString(sharee)}}"></i></div>
 				<span class="has-tooltip username">
 					{{ sharee.participant.displayname }}
@@ -39,14 +39,14 @@
         <ul id="shareWithList" class="shareWithList">
             <li>
                 <span class="icon-loading-small" style="display:none;"></span>
-                <div class="avatardiv" avatar ng-attr-displayname="{{ boardservice.getCurrent().owner.uid }}" ng-if="boardservice.id"></div>
+				<div class="avatardiv" avatar data-user="{{ boardservice.getCurrent().owner.uid }}" data-displayname="{{ boardservice.getCurrent().owner.displayname }}" ng-if="boardservice.id"></div>
                 <span class="has-tooltip username">
                     {{ boardservice.getCurrent().owner.displayname }}
 				</span>
             </li>
             <li ng-repeat="acl in boardservice.getCurrent().acl track by $index">
                 <span class="icon-loading-small" style="display:none;" title="<?php p($l->t('Loading')); ?>"></span>
-                <div class="avatardiv" avatar displayname="{{ acl.participant.uid }}" ng-if="acl.type==OC.Share.SHARE_TYPE_USER"></div>
+                <div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" ng-if="acl.type==OC.Share.SHARE_TYPE_USER"></div>
                 <div class="avatardiv" ng-if="acl.type==OC.Share.SHARE_TYPE_GROUP"><i class="icon icon-{{aclTypeString(acl)}}" title="<?php p($l->t('Access for')); ?> {{aclTypeString(acl)}}"></i></div>
 
                 <span class="has-tooltip username">
diff --git a/templates/part.boardlist.php b/templates/part.boardlist.php
index 049dfa86a..3047d0c36 100644
--- a/templates/part.boardlist.php
+++ b/templates/part.boardlist.php
@@ -41,8 +41,8 @@
 			</td>
 			<td>
 				<div id="assigned-users">
-					<div class="avatardiv" avatar displayname="{{ b.owner.uid }}" title="{{ b.owner.displayname }}"></div>
-					<div class="avatardiv" avatar displayname="{{ acl.participant.uid }}" title="{{ acl.participant.uid }}" ng-repeat="acl in b.acl | limitTo: 7"></div>
+					<div class="avatardiv" avatar data-user="{{ b.owner.uid }}" data-displayname="{{ b.owner.displayname }}" data-toggle="tooltip" title="{{ b.owner.displayname }}"></div>
+					<div class="avatardiv" avatar data-contactsmenu="true" data-user="{{ acl.participant.uid }}" data-displayname="{{ acl.participant.displayname }}" data-toggle="tooltip" title="{{ acl.participant.displayname }}" ng-repeat="acl in b.acl | limitTo: 7"></div>
 				</div>
 			</td>
 			<td>
diff --git a/templates/part.card.php b/templates/part.card.php
index d2c14e1ea..ce61812ad 100644
--- a/templates/part.card.php
+++ b/templates/part.card.php
@@ -62,13 +62,13 @@
 				<span><i class="icon icon-{{$item.type}}"></i> {{ $item.participant.displayname }}</span>
 			</ui-select-match>
 			<ui-select-choices repeat="user in boardservice.getCurrent().users | filter: $select.search | withoutAssignedUsers: cardservice.getCurrent().assignedUsers track by user.uid">
-				<div class="avatardiv" avatar ng-attr-displayname="{{ user.uid }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span>
+				<div class="avatardiv" avatar ng-attr-user="{{ user.uid }}" ng-attr-displayname="{{ user.displayname }}" ng-if="boardservice.id"></div><span>{{ user.displayname }}</span>
 			</ui-select-choices>
 	</ui-select>
 		<div class="card-details-assign-users-list">
 			<div class="assigned-user" ng-repeat="user in cardservice.getCurrent().assignedUsers"
 				data-toggle="tooltip" data-placement="bottom" title="{{ user.participant.displayname }}">
-				<div class="avatardiv" avatar ng-attr-displayname="{{ user.participant.uid }}"></div>
+				<div class="avatardiv" avatar data-contactsmenu="true" ng-attr-user="{{ user.participant.uid }}" ng-attr-displayname="{{ user.participant.uid }}"></div>
 				<div class="icon icon-delete" ng-click="removeAssignedUser(user)"></div>
 			</div>
 		</div>