diff --git a/app/templates/users/edit_profile.html.j2 b/app/templates/users/edit_profile.html.j2
index fc03909a..1da2f377 100644
--- a/app/templates/users/edit_profile.html.j2
+++ b/app/templates/users/edit_profile.html.j2
@@ -65,19 +65,15 @@
           <div class="collapsible-body">
             <form method="POST" enctype="multipart/form-data">
               {{ edit_public_profile_information_form.hidden_tag() }}
-              <div  class="row">
-                <div class="col s10 m4">
+              <div class="row">
+                <div class="col s12 m2">
                   <img src="{{ url_for('.profile_avatar', user_id=user.id) }}" alt="user-image" class="circle responsive-img" id="avatar">
                 </div>
-              </div>
-              <div class="row">
-                <div class="col s3 m2">
-                  <div class="center-align">
-                    <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
-                  </div>
-                </div>
-                <div class="col s9 m8">
+                <div class="col s12 m6">
                   {{ wtf.render_field(edit_public_profile_information_form.avatar, accept='image/jpeg, image/png, image/gif', placeholder='Choose an image file', id='avatar-upload') }}
+                </div>                    
+                <div class="col s12 m1">
+                  <a class="btn-floating red waves-effect waves-light modal-trigger" style="margin-top:15px;" href="#delete-avatar-modal"><i class="material-icons">delete</i></a>
                 </div>
               </div>
               <p></p>
@@ -107,7 +103,7 @@
     <div class="col s8" style="margin-top: 22.8px;">
       <ul class="collapsible">
         <li>
-          <div class="collapsible-header">
+          <div class="collapsible-header" style="justify-content: space-between;">
             <span>Notification Settings</span>
             <i class="caret material-icons">keyboard_arrow_right</i>
           </div>
@@ -122,7 +118,7 @@
           </div>
         </li>
         <li>
-          <div class="collapsible-header">
+          <div class="collapsible-header" style="justify-content: space-between;">
             <span>Change Password</span>
             <i class="caret material-icons right">keyboard_arrow_right</i>
           </div>          
@@ -139,7 +135,7 @@
           </div>
         </li>
         <li>
-          <div class="collapsible-header">
+          <div class="collapsible-header" style="justify-content: space-between;">
             <span>Delete Account</span>
             <i class="caret material-icons right">keyboard_arrow_right</i>
           </div>              
@@ -227,5 +223,21 @@ document.querySelector('#delete-user-button').addEventListener('click', (event)
   Requests.users.entity.delete(currentUserId)
     .then((response) => {window.location.href = '/';});
 });
+
+document.querySelectorAll('.collapsible').forEach((collapsible) => {
+  M.Collapsible.init(
+    collapsible, 
+    {
+      onOpenStart: (event) => {
+        let caret = event.querySelector('.caret');
+        caret.innerHTML = 'keyboard_arrow_down';
+      },
+      onCloseStart: (event) => {
+        let caret = event.querySelector('.caret');
+        caret.innerHTML = 'keyboard_arrow_right';
+      }
+    });
+});
+
 </script>
 {% endblock scripts %}