diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js
index 77bab9f023..59f51fca3f 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbprogressbar.directive.js
@@ -16,6 +16,8 @@ Use this directive to generate a progress bar.
 </pre>
 
 @param {number} percentage (<code>attribute</code>): The progress in percentage.
+@param {string} size (<code>attribute</code>): The size (s, m).
+
 **/
 
 (function() {
@@ -28,7 +30,8 @@ Use this directive to generate a progress bar.
             replace: true,
             templateUrl: 'views/components/umb-progress-bar.html',
             scope: {
-                percentage: "@"
+                percentage: "@",
+                size: "@?"
             }
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less
index e4889446e8..8c15084d55 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-progress-bar.less
@@ -18,3 +18,13 @@
     width: 100%;
     border-radius: 10px;
 }
+
+.umb-progress-bar--s {
+    height: 5px;
+    border-radius: 5px;
+}
+
+.umb-progress-bar--m {
+    height: 10px;
+    border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
index d3f7c2f2d1..475e7c14fe 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-progress-bar.html
@@ -1,3 +1,3 @@
-<div class="umb-progress-bar">
+<div class="umb-progress-bar umb-progress-bar--{{size}}">
     <span class="umb-progress-bar__progress" style="width: {{percentage}}%"></span>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
index 08af46c0fe..52e3ce992b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
@@ -183,16 +183,23 @@
 
         function upload(file) {
 
+            vm.avatarFile.uploadProgress = 0;
+
             Upload.upload({
                 url: umbRequestHelper.getApiUrl("userApiBaseUrl", "PostSetAvatar", { id: vm.user.id }),
                 fields: {},
                 file: file
             }).progress(function (evt) {
 
-                //TODO: Do progress, etc...
                 // set uploading status on file
                 vm.avatarFile.uploadStatus = "uploading";
 
+                // calculate progress in percentage
+                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total, 10);
+
+                // set percentage property on file
+                vm.avatarFile.uploadProgress = progressPercentage;
+
             }).success(function (data, status, headers, config) {
 
                 // set done status on file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 840dde1704..7858d81cdb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -118,33 +118,42 @@
 
                             <div class="umb-package-details__section">
 
-                                <div class="flex flex-column justify-center items-center" style="margin-bottom: 20px;">
-                                    <ng-form name="avatarForm">
-                                      
-                                      <umb-avatar
-                                        color="secondary"
-                                        size="xxl"
-                                        name="{{vm.user.name}}"
-                                        img-src="{{vm.user.avatars[4]}}">
-                                      </umb-avatar>
+                                <div style="margin-bottom: 30px;">
+                                    <ng-form name="avatarForm" class="flex flex-column justify-center items-center">
+
+                                        <umb-avatar
+                                            style="margin-bottom: 10px;"
+                                            color="secondary"
+                                            size="xxl"
+                                            name="{{vm.user.name}}"
+                                            img-src="{{vm.user.avatars[4]}}">
+                                        </umb-avatar>
+
+                                        <umb-progress-bar
+                                            style="max-width: 120px;"
+                                            ng-if="vm.avatarFile.uploadStatus === 'uploading'"
+                                            progress="{{ vm.avatarFile.uploadProgress }}"
+                                            size="s">
+                                        </umb-progress-bar>
+
+                                        <a 
+                                            href="" 
+                                            class="file-select bold"
+                                            ng-if="vm.avatarFile.uploadStatus !== 'uploading'"
+                                            ngf-select 
+                                            ng-model="filesHolder" 
+                                            ngf-change="changeAvatar($files, $event)" 
+                                            ngf-multiple="false" 
+                                            ngf-pattern="{{vm.acceptedFileTypes}}" 
+                                            ngf-max-size="{{ vm.maxFileSize }}">
+                                            Change photo
+                                        </a>
 
-                                      <a
-                                        href=""
-                                        class="file-select"                                        
-                                        ngf-select
-                                        ng-model="filesHolder"
-                                        ngf-change="changeAvatar($files, $event)"
-                                        ngf-multiple="false"
-                                        ngf-pattern="{{vm.acceptedFileTypes}}"
-                                        ngf-max-size="{{ vm.maxFileSize }}">Change avatar</a>
-                                      <br/>
-                                      
-                                      <a href=""
-                                         ng-click="vm.clearAvatar()">Clear avatar</a>
                                     </ng-form>
                                     
                                 </div>
 
+                                <!--
                                 <div class="umb-package-details__information-item">
                                     <div class="umb-package-details__information-item-label">Status</div>
                                     <div class="umb-package-details__information-item-content">
@@ -156,6 +165,7 @@
                                         </umb-badge>
                                     </div>
                                 </div>
+                                -->
 
                                 <div class="umb-package-details__information-item">
                                     <div class="umb-package-details__information-item-label">Last login:</div>