diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/umbavatar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/umbavatar.directive.js
new file mode 100644
index 0000000000..d83fc90ed3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/umbavatar.directive.js
@@ -0,0 +1,14 @@
+/**
+* @ngdoc directive 
+* @name umbraco.directives:login 
+* @restrict E
+**/
+function avatarDirective() {
+    return {
+        restrict: "E",    // restrict to an element
+        replace: true,   // replace the html element with the template
+        templateUrl: 'views/directives/umb-avatar.html'        
+    };
+}
+
+angular.module('umbraco.directives').directive("umbAvatar", avatarDirective);
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-avatar.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-avatar.html
new file mode 100644
index 0000000000..b69a0a711f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-avatar.html
@@ -0,0 +1,3 @@
+<a href="#" title="{{name}}">
+    <img ng-src="{{email}}" />
+</a>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/umb-leftcolumn.html b/src/Umbraco.Web.UI.Client/src/views/directives/umb-leftcolumn.html
index 8de56c7978..4ac78128cd 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/umb-leftcolumn.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/umb-leftcolumn.html
@@ -1,17 +1,16 @@
 <div id="leftcolumn" ng-controller="NavigationController" ng-mouseleave="hideTree()">
     <div id="applications" ng-class="{faded:ui.stickyNavigation}">
         <ul class="sections">
+            
             <li class="avatar">
-                <a href="#" title="{{user.name}}">
-                    <img ng-src="{{user.avatar}}" />
-                </a>
+                <umb-avatar name="{{user.name}}" email="{{user.email}}"></umb-avatar>
             </li>
 
             <li ng-repeat="section in sections">
                 <a href="#/{{section.alias}}"
-                    ng-click="changeSection(section.alias)"
-                    ng-mouseenter="showTree(section.alias)"
-                    prevent-default>
+                   ng-click="changeSection(section.alias)"
+                   ng-mouseenter="showTree(section.alias)"
+                   prevent-default>
                     <i class="{{section.cssclass}}"></i><span>{{section.name}}</span>
                 </a>
             </li>