diff --git a/core/avatar/controller.php b/core/avatar/controller.php
index 8492ee909c..64d9eafe52 100644
--- a/core/avatar/controller.php
+++ b/core/avatar/controller.php
@@ -31,7 +31,7 @@ class OC_Core_Avatar_Controller {
 		if ($image instanceof \OC_Image) {
 			$image->show();
 		} elseif ($image === false) {
-			\OC_JSON::success(array('user' => $user, 'size' => $size));
+			\OC_JSON::success(array('user' => \OC_User::getDisplayName($user), 'size' => $size));
 		}
 	}
 
diff --git a/core/css/styles.css b/core/css/styles.css
index 363d36294b..b8c637d5ec 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -40,7 +40,7 @@ body { background:#fefefe; font:normal .8em/1.6em "Helvetica Neue",Helvetica,Ari
 .header-right { float:right; vertical-align:middle; padding:0.5em; }
 .header-right > * { vertical-align:middle; }
 
-header .avatar {
+header .avatardiv {
 	float:right;
 	margin-top: 6px;
 	margin-right: 6px;
diff --git a/core/js/avatar.js b/core/js/avatar.js
new file mode 100644
index 0000000000..22ebf29599
--- /dev/null
+++ b/core/js/avatar.js
@@ -0,0 +1,10 @@
+$(document).ready(function(){
+	$('header .avatardiv').avatar(OC.currentUser, 32);
+	// Personal settings
+	$('#avatar .avatardiv').avatar(OC.currentUser, 128);
+	// User settings
+	$.each($('td.avatar .avatardiv'), function(i, data) {
+		$(data).avatar($(data).parent().parent().data('uid'), 32); // TODO maybe a better way of getting the current name …
+	});
+	// TODO when creating a new user, he gets a previously used avatar
+});
diff --git a/core/js/jquery.avatar.js b/core/js/jquery.avatar.js
new file mode 100644
index 0000000000..f6181e1c9e
--- /dev/null
+++ b/core/js/jquery.avatar.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2013 Christopher Schäpers <christopher@schaepers.it>
+ * This file is licensed under the Affero General Public License version 3 or
+ * later.
+ * See the COPYING-README file.
+ */
+
+(function ($) {
+	$.fn.avatar = function(user, height) {
+		// TODO there has to be a better way …
+		if (typeof(height) === 'undefined') {
+			height = this.height();
+		}
+		if (height === 0) {
+			height = 64;
+		}
+
+		this.height(height);
+		this.width(height);
+
+		if (typeof(user) === 'undefined') {
+			this.placeholder('x');
+			return;
+		}
+
+		var $div = this;
+
+		//$.get(OC.Router.generate('core_avatar_get', {user: user, size: height}), function(result) { // TODO does not work "Uncaught TypeError: Cannot use 'in' operator to search for 'core_avatar_get' in undefined" router.js L22
+		$.get(OC.router_base_url+'/avatar/'+user+'/'+height, function(result) {
+			if (typeof(result) === 'object') {
+				$div.placeholder(result.user);
+			} else {
+				$div.html('<img src="'+OC.Router.generate('core_avatar_get', {user: user, size: height})+'">');
+			}
+		});
+        };
+}(jQuery));
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index dfcfd544cf..edac4c040f 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -46,7 +46,7 @@
 				src="<?php print_unescaped(image_path('', 'logo-wide.svg')); ?>" alt="<?php p($theme->getName()); ?>" /></a>
 			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 
-			<?php print_unescaped($_['avatar']); ?>
+			<div class="avatardiv"></div>
 
 			<ul id="settings" class="svg">
 				<span id="expand" tabindex="0" role="link">
diff --git a/lib/base.php b/lib/base.php
index 2e6a37c9f4..0473e25da9 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -265,6 +265,12 @@ class OC {
 		OC_Util::addScript('search', 'result');
 		OC_Util::addScript('router');
 
+		// defaultavatars
+		\OC_Util::addScript('placeholder');
+		\OC_Util::addScript('3rdparty', 'md5/md5.min');
+		\OC_Util::addScript('jquery.avatar');
+		\OC_Util::addScript('avatar');
+
 		OC_Util::addStyle("styles");
 		OC_Util::addStyle("multiselect");
 		OC_Util::addStyle("jquery-ui-1.10.0.custom");
diff --git a/lib/templatelayout.php b/lib/templatelayout.php
index b69d932c0a..0024c9d496 100644
--- a/lib/templatelayout.php
+++ b/lib/templatelayout.php
@@ -18,8 +18,6 @@ class OC_TemplateLayout extends OC_Template {
 				$this->assign('bodyid', 'body-user');
 			}
 
-			$this->assign('avatar', '<img class="avatar" src="'.\OC_Helper::linkToRoute('core_avatar_get').'/'.OC_User::getUser().'/32">');
-
 			// Update notification
 			if(OC_Config::getValue('updatechecker', true) === true) {
 				$data=OC_Updater::check();
diff --git a/settings/js/personal.js b/settings/js/personal.js
index e873eb1336..03f4fbc9da 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -49,8 +49,8 @@ function selectAvatar (path) {
 }
 
 function updateAvatar () {
-	$avatarimg = $('#avatar img');
-	$avatarimg.attr('src', $avatarimg.attr('src') + '#');
+	$('header .avatardiv').avatar(OC.currentUser, 32);
+	$('#avatar .avatardiv').avatar(OC.currentUser, 128);
 }
 
 function showAvatarCropper() {
diff --git a/settings/personal.php b/settings/personal.php
index 7ab25177b4..b0d62645d5 100644
--- a/settings/personal.php
+++ b/settings/personal.php
@@ -18,8 +18,6 @@ OC_Util::addStyle( '3rdparty', 'chosen' );
 \OC_Util::addScript('files', 'jquery.fileupload');
 \OC_Util::addScript('3rdparty/Jcrop', 'jquery.Jcrop.min');
 \OC_Util::addStyle('3rdparty/Jcrop', 'jquery.Jcrop.min');
-\OC_Util::addScript('3rdparty', 'md5/md5.min');
-\OC_Util::addScript('core', 'placeholder');
 OC_App::setActiveNavigationEntry( 'personal' );
 
 $storageInfo=OC_Helper::getStorageInfo('/');
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index b94b845258..c488623a08 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -83,7 +83,7 @@ if($_['passwordChangeSupported']) {
 <form id="avatar" method="post" action="<?php p(\OC_Helper::linkToRoute('core_avatar_post')); ?>">
 	<fieldset class="personalblock">
 		<legend><strong><?php p($l->t('Profile Image')); ?></strong></legend>
-		<img src="<?php print_unescaped(\OC_Helper::linkToRoute('core_avatar_get').'/'.OC_User::getUser().'/128'); ?>"><br>
+		<div class="avatardiv"></div><br>
 		<em><?php p($l->t('Has to be square and either PNG or JPG')); ?></em><br>
 		<div class="warning hidden"></div>
 		<div class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></div>
diff --git a/settings/templates/users.php b/settings/templates/users.php
index 32ca6e0b10..2fe0b83cf3 100644
--- a/settings/templates/users.php
+++ b/settings/templates/users.php
@@ -97,7 +97,7 @@ $_['subadmingroups'] = array_flip($items);
 		<?php foreach($_["users"] as $user): ?>
 		<tr data-uid="<?php p($user["name"]) ?>"
 			data-displayName="<?php p($user["displayName"]) ?>">
-			<td class="avatar"><img src="<?php print_unescaped(\OC_Helper::linkToRoute('core_avatar_get')); ?>/<?php p($user['name']); ?>/32"></td>
+			<td class="avatar"><div class="avatardiv"></div></td>
 			<td class="name"><?php p($user["name"]); ?></td>
 			<td class="displayName"><span><?php p($user["displayName"]); ?></span> <img class="svg action"
 				src="<?php p(image_path('core', 'actions/rename.svg'))?>"