diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 9f5893bd2..d93d7a55a 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -1455,26 +1455,26 @@ html.turbolinks-progress-bar::before {
 }
 
 //edit avatar
-#avatar-container {
-  width: 100px;
+.avatar-container {
   height: 100px;
   position: relative;
+  width: 100px;
 }
 
-#avatar-image,
-#avatar-edit {
-  width: 100%;
+.avatar-image,
+.avatar-edit {
   height: 100%;
   position: absolute;
+  width: 100%;
 }
 
-#avatar-edit {
-  z-index: 10;
-  opacity: 0.8;
+.avatar-edit {
   margin-top: 70px;
+  opacity: .8;
+  z-index: 10;
 
   .btn-greyed {
-    border-radius: 0em;
+    border-radius: 0;
     width: 100px;
   }
 }
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index f7afad79d..241f1c1ce 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -15,11 +15,11 @@
       <div class="form-group">
         <%= f.label t("users.registrations.edit.avatar_label") %><br />
         <% @user_avatar_url ||= avatar_path(current_user, :thumb) %>
-        <div id="avatar-container">
-          <div id="avatar-image">
+        <div class="avatar-container">
+          <div class="avatar-image">
             <%= image_tag @user_avatar_url %>
           </div>
-          <div id="avatar-edit">
+          <div class="avatar-edit">
             <a href="#" class="btn btn-greyed btn-sm" data-action="edit">
               <span class="glyphicon glyphicon-pencil"></span>
               <%=t "users.registrations.edit.avatar_btn" %>