diff --git a/src/assets/scripts/avatar-initials.js b/src/assets/scripts/avatar-initials.js
new file mode 100644
index 0000000..43a165e
--- /dev/null
+++ b/src/assets/scripts/avatar-initials.js
@@ -0,0 +1,6 @@
+import Avatar from 'avatar-initials';
+const avatar = new Avatar(document.getElementById('avatar'), {
+  'useGravatar': false,
+  'initials': 'MC',
+});
+
diff --git a/src/assets/scripts/nwSidebar/nwSidebar.html b/src/assets/scripts/nwSidebar/nwSidebar.html
index 62129ac..69db95c 100644
--- a/src/assets/scripts/nwSidebar/nwSidebar.html
+++ b/src/assets/scripts/nwSidebar/nwSidebar.html
@@ -1,5 +1,5 @@
 <!-- #Left Sidebar ==================== -->
-<div class="sidebar">
+<div class="sidebar bg-img">
   <div class="sidebar-inner ">
     <!-- ### $Sidebar Header ### -->
     <div class="sidebar-logo">
@@ -209,7 +209,7 @@
     </div>
 
     <!-- ### $Sidebar Menu ### -->
-    <ul class="sidebar-menu scrollable pos-r bg-img">
+    <ul class="sidebar-menu scrollable pos-r">
       <!-- Dashboard - show to all users -->
       <li class="nav-item mT-30 active">
         <a class="sidebar-link" href="/">
diff --git a/src/assets/scripts/nwTopbar/nwTopbar.html b/src/assets/scripts/nwTopbar/nwTopbar.html
index dc7d795..05b7003 100644
--- a/src/assets/scripts/nwTopbar/nwTopbar.html
+++ b/src/assets/scripts/nwTopbar/nwTopbar.html
@@ -44,8 +44,8 @@
           <div class="peer mR-10 visible-nomit" ng-show="'{{user.role}}'=='nomit'">
             <img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/nomit-logo.png" alt="">
           </div>
-          <div class="peer mR-10 visible-referee visible-user visible-company" ng-show="'{{user.role}}'!='nomit'">
-            <img class=" w-2r bdrs-50p mL-10 nomit-logo-top" src="assets/static/images/user-update.png" alt="">
+          <div id="avatar" class="peer mR-10 visible-referee visible-user visible-company" ng-show="'{{user.role}}'!='nomit'">
+            
           </div>
 
         </a>
diff --git a/src/assets/scripts/nwTopbar/topbar.controller.js b/src/assets/scripts/nwTopbar/topbar.controller.js
index c1a2ff8..06709b1 100644
--- a/src/assets/scripts/nwTopbar/topbar.controller.js
+++ b/src/assets/scripts/nwTopbar/topbar.controller.js
@@ -1,8 +1,15 @@
 /** @ngInject */
+import Avatar from 'avatar-initials';
+
 const TopbarController = ($scope, UserService) => {
     $scope.$on('loadUserSuccess', function (event, user) {
         $scope.user = user;
     });
+    
+    const avatar = new Avatar(document.getElementById('avatar'), {
+        'useGravatar': false,
+        'initials': 'CC',
+      });
 
     UserService.loadUser();
 }
diff --git a/src/assets/styles/spec/components/sidebar.scss b/src/assets/styles/spec/components/sidebar.scss
index 148bfee..090f6b0 100755
--- a/src/assets/styles/spec/components/sidebar.scss
+++ b/src/assets/styles/spec/components/sidebar.scss
@@ -129,7 +129,7 @@ background-image: linear-gradient(#fe4cb8, #8B00B1, #793fcc);
   border-right: 1px solid $border-color;
   line-height: 0;
 
-  padding: 0 35%;
+  padding: 0 31%;
   transition: all 0.2s ease;
 
   a {
@@ -138,11 +138,11 @@ background-image: linear-gradient(#fe4cb8, #8B00B1, #793fcc);
 
     .logo {
 						background-position: center;
-						margin-top: 30px;
+						margin-top: 50px;
       background-repeat: no-repeat;
       display: block;
       min-height: calc(#{$header-height} - 1px);
-      width: 100%;
+
       width: 80px;
     }