diff --git a/api/js/etemplate/et2_widget_image.js b/api/js/etemplate/et2_widget_image.js
index 652137d2c0..d27d74f38b 100644
--- a/api/js/etemplate/et2_widget_image.js
+++ b/api/js/etemplate/et2_widget_image.js
@@ -412,6 +412,8 @@ var et2_avatar = /** @class */ (function (_super) {
     et2_avatar.prototype._buildEditableLayer = function (_noDelete) {
         var self = this;
         // editable mask layer (eml)
+        var wrapper = jQuery(document.createElement('div')).addClass('avatar').insertAfter(this.image);
+        this.image.appendTo(wrapper);
         var eml = jQuery(document.createElement('div'))
             .addClass('eml')
             .insertAfter(this.image);
@@ -448,7 +450,7 @@ var et2_avatar = /** @class */ (function (_super) {
                     template: egw.webserverUrl + '/api/templates/default/avatar_edit.xet?2'
                 }, et2_dialog._create_parent(_egw_or_appname));
             };
-            dialog(egw.lang('Edit avatar'), { photo: self.options.contact_id }, buttons, null);
+            dialog(egw.lang('Edit avatar'), self.options, buttons, null);
         })
             .appendTo(eml);
         // delete button
diff --git a/api/js/etemplate/et2_widget_image.ts b/api/js/etemplate/et2_widget_image.ts
index 4d39831f25..08034f7772 100644
--- a/api/js/etemplate/et2_widget_image.ts
+++ b/api/js/etemplate/et2_widget_image.ts
@@ -531,6 +531,8 @@ class et2_avatar extends et2_image
 	{
 		let self = this;
 		// editable mask layer (eml)
+		let wrapper = jQuery(document.createElement('div')).addClass('avatar').insertAfter(this.image);
+		this.image.appendTo(wrapper);
 		let eml = jQuery(document.createElement('div'))
 			.addClass('eml')
 			.insertAfter(this.image);
@@ -577,7 +579,7 @@ class et2_avatar extends et2_image
 						}, et2_dialog._create_parent(_egw_or_appname));
 				};
 
-				dialog(egw.lang('Edit avatar'),{photo:self.options.contact_id}, buttons, null);
+				dialog(egw.lang('Edit avatar'),self.options, buttons, null);
 			})
 			.appendTo(eml);
 
diff --git a/api/templates/default/avatar_edit.xet b/api/templates/default/avatar_edit.xet
index 5bf9851cd7..e279a48299 100644
--- a/api/templates/default/avatar_edit.xet
+++ b/api/templates/default/avatar_edit.xet
@@ -4,7 +4,7 @@
 <overlay>
 	<template id="etemplate.avatar_edit" template="" lang="" group="0" version="16.2">
 		<vbox>
-			<avatar crop="true" id="cropper_image" contact_id="$cont[photo]" width ="200" height="auto"/>
+			<avatar crop="true" id="cropper_image" contact_id="$cont[contact_id]" src="$cont[src]" width ="200" height="auto"/>
 			<hbox>
 				<buttononly id="rotate_reset" label="Reset"  image="recur" background_image="1" onclick="jQuery('#_cropper_image').cropper('reset');"/>
 				<buttononly id="rotate_l" label="Rotate Left"  image="rotate_l" background_image="1" onclick="jQuery('#_cropper_image').cropper('rotate',-90);"/>
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 9589c08da4..21376b0580 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -3134,7 +3134,15 @@ a.chzn-single.et2_country-select span.img {
 	padding-top: 0;
 }
 .et2_avatar {
+    overflow: hidden;
     width: 40px;
+    height: 40px;
+    background-image: url(images/photo.png);
+    background-size: 35px 35px;
+    background-repeat: no-repeat;
+    background-position: center;
+    bottom:25%;
+    top:25%;
 }
 
 .tox-tbtn.tox-tbtn--select.tox-tbtn--bespoke:nth-child(2) {width: 60px;}