diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index b63c092bd..dd40ded79 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1464,3 +1464,35 @@ html.turbolinks-progress-bar::before {
     display: inline;
   }
 }
+
+//edit avatar
+.avatar-container {
+  background-color: lighten($color-concrete, 2%);
+  height: 100px;
+  position: relative;
+  width: 100px;
+}
+
+.avatar-container:hover .avatar-edit {
+  display: block;
+}
+
+.avatar-image {
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.avatar-edit {
+  display: none;
+  margin-top: 70%;
+  opacity: .8;
+  position: absolute;
+  z-index: 10;
+
+  .btn-greyed {
+    border-radius: 0;
+    width: 100px;
+  }
+}
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index 4f0fe09d0..f272a6ab6 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -5,9 +5,32 @@
     <h2><%=t "users.registrations.edit.title" %></h2>
 
     <% if not resource.errors.empty? %>
-    <div class="alert alert-danger">
-    <%= devise_error_messages! %>
-    </div>
+      <div class="alert alert-danger">
+        <%= devise_error_messages! %>
+      </div>
+    <% end %>
+
+    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, "data-for" => "avatar" }) do |f| %>
+      <%= hidden_field_tag "user[change_avatar]", "true" %>
+      <div data-part="view">
+        <div class="form-group">
+          <%= f.label t("users.registrations.edit.avatar_label") %><br />
+          <% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
+          <a href="#" data-action="edit">
+            <div class="avatar-container">
+              <div class="avatar-image">
+                <%= image_tag @user_avatar_url %>
+              </div>
+              <div class="avatar-edit">
+                <div class="btn btn-greyed btn-sm">
+                  <span class="glyphicon glyphicon-pencil"></span>
+                  <%=t "users.registrations.edit.avatar_btn" %>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
     <% end %>
 
     <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put, "data-for" => "avatar" }) do |f| %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index ce68913e1..4d49ceab0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1095,7 +1095,7 @@ en:
         head_title: "My profile"
         title: "My profile"
         avatar_label: "Avatar"
-        avatar_btn: "Change avatar"
+        avatar_btn: "Edit avatar"
         avatar_title: "Change avatar"
         avatar_edit_label: "Upload new avatar file"
         avatar_submit: "Upload"