diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 0217727b0..5052b73f4 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -667,8 +667,31 @@ a[data-toggle="tooltip"] {
   margin-bottom: 50px;
   margin-top: 50px;
 
-  .col-md-4 {
-    margin-top: 15px;
+  h4 {
+    font-weight: 600;
+    margin-bottom: 2rem;
+  }
+
+  .col-sm-4 {
+    padding-left: 5rem;
+    padding-top: .5rem;
+    word-break: break-word;
+  }
+
+  .col-sm-2 {
+    padding-left: 3rem;
+    padding-top: .7rem;
+  }
+
+  @media (max-width: 768px) {
+    .col-sm-4 {
+      margin-bottom: 1rem;
+      padding-left: 1.8rem;
+    }
+
+    .col-sm-2 {
+      padding-left: 1.8rem;
+    }
   }
 
   .btn-group {
@@ -679,28 +702,31 @@ a[data-toggle="tooltip"] {
     background-color: $color-theme-primary;
     border-radius: 50%;
     color: $color-wild-sand;
+    display: block !important;
     font-size: 15px;
-    margin-left: 20px;
+    height: 30px;
     margin-right: 15px;
     padding: 7px;
     padding-bottom: 5px;
     padding-top: 5px;
+    width: 30px;
   }
 
   .system-message {
     background-color: $color-theme-secondary;
     border-radius: 50%;
     color: $color-wild-sand;
+    display: block !important;
     font-size: 15px;
-    margin-left: 20px;
-    margin-right: 15px;
+    height: 30px;
+    margin-right: 15px;  
     padding: 8px;
     padding-bottom: 5px;
     padding-top: 5px;
+    width: 30px;
   }
 
   .img-circle {
-    margin-left: 20px;
     margin-right: 15px;
   }
 }
diff --git a/app/views/users/settings/account/preferences/index.html.erb b/app/views/users/settings/account/preferences/index.html.erb
index 368bc334b..18ed8eeae 100644
--- a/app/views/users/settings/account/preferences/index.html.erb
+++ b/app/views/users/settings/account/preferences/index.html.erb
@@ -58,39 +58,84 @@
         <% end %>
         <hr>
         <div class="notification-settings-container">
-          <strong><%= t('notifications.title') %></strong>
+          <h4><%= t('notifications.title') %></h4>
           <%= form_for(@user,
                        url: notifications_settings_path(format: :json),
                        html: { method: :post, id: 'notifications-settings-panel' },
                        remote: true) do |f| %>
           <div class="row">
-            <div class="col-md-4 col-sm-3 hidden-sm hidden-xs">
-              <div class="notification-settings-labels">
-                <%= image_tag 'icon_small/missing.png', class: 'img-circle ' %>
-                <%= f.label t('notifications.form.recent_notification') %> <br>
-                <span class="assignment hidden-sm"><%= fa_icon 'newspaper-o' %></span>
-                <%= f.label t('notifications.form.assignments') %> <br>
-                <span class="system-message hidden-sm"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
-                <%= f.label t('notifications.form.system_message') %>
+            <div class="col-sm-2">
+              <span class="assignment hidden-sm"><%= fa_icon 'newspaper-o' %></span>
+            </div>
+            <div class="col-sm-10">
+              <strong><%=t 'notifications.form.assignments' %></strong>
+              <p><%=t 'notifications.form.assignments_description' %></p>
+              <div class="row">
+                <div class="col-sm-4">
+                  <%=t 'notifications.form.notification_scinote' %>
+                </div>
+                <div class="col-sm-8">
+                  <%= check_box_tag :assignments_notification, @user.assignments_notification %>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4">
+                  <%=t 'notifications.form.notification_email' %>
+                </div>
+                <div class="col-sm-8">
+                  <%= check_box_tag :assignments_notification_email, @user.assignments_notification_email %>
+                </div>
               </div>
             </div>
-            <div class="col-md-3 col-sm-3 col-text-center">
-                <%= f.label t('notifications.form.recent_notification'), class: 'visible-sm visible-xs'%>
-                <h5 class="hidden-sm hidden-xs"><%= t('notifications.title') %></h5><br>
-                <%= check_box_tag :recent_notification, @user.recent_notification %> <br>
-                <%= f.label t('notifications.form.assignments'), class: 'visible-sm visible-xs' %>
-                <%= check_box_tag :assignments_notification, @user.assignments_notification %> <br>
-                <%= f.label t('notifications.form.system_message'), class: 'visible-sm visible-xs' %>
-                <%= check_box_tag :system_message_notification %>
+          </div>
+          <div class="row">
+            <div class="col-sm-2">
+              <%= image_tag 'icon_small/missing.png', class: 'img-circle ' %>
             </div>
-            <div class="col-md-3 col-sm-3 col-text-center">
-                <h5 class="hidden-sm hidden-xs"><%= t('notifications.email_settings') %></h5>
-                  <%= f.label t('notifications.form.recent_notification'), class: 'visible-sm visible-xs'%> <br>
-                  <%= check_box_tag :recent_notification_email, @user.recent_notification_email %> <br>
-                  <%= f.label t('notifications.form.assignments'), class: 'visible-sm visible-xs' %>
-                  <%= check_box_tag :assignments_notification_email, @user.assignments_notification_email %> <br>
-                  <%= f.label t('notifications.form.system_message'), class: 'visible-sm visible-xs' %>
+            <div class="col-sm-10">
+                <strong><%=t 'notifications.form.recent_notification' %></strong>
+                <p><%=t 'notifications.form.recent_notification_description' %></p>
+                <div class="row">
+                  <div class="col-sm-4">
+                    <%=t 'notifications.form.notification_scinote' %>
+                  </div>
+                  <div class="col-sm-8">
+                    <%= check_box_tag :recent_notification, @user.recent_notification %>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col-sm-4">
+                    <%=t 'notifications.form.notification_email' %>
+                  </div>
+                  <div class="col-sm-8">
+                    <%= check_box_tag :recent_notification_email, @user.recent_notification_email %>
+                  </div>
+                </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-2">
+              <span class="system-message hidden-sm"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
+            </div>
+            <div class="col-sm-10">
+              <strong><%=t 'notifications.form.system_message' %></strong>
+              <p><%=t 'notifications.form.system_message_description' %></p>
+              <div class="row">
+                <div class="col-sm-4">
+                  <%=t 'notifications.form.notification_scinote' %>
+                </div>
+                <div class="col-sm-8">
+                  <%= check_box_tag :system_message_notification %>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col-sm-4">
+                  <%=t 'notifications.form.notification_email' %>
+                </div>
+                <div class="col-sm-8">
                   <%= check_box_tag :system_message_notification_email, @user.system_message_notification_email %>
+                </div>
+              </div>
             </div>
           </div>
           <% end %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index c777687dd..0c7ab8800 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1503,9 +1503,14 @@ en:
     title: "Notifications"
     email_settings: "E-mail notifications"
     form:
-      assignments: "Assignments notifications"
-      recent_notification: "Change notifications"
-      system_message: "Update notifications"
+      assignments: "Assignment"
+      notification_scinote: 'Show in sciNote'
+      notification_email: 'Notify me via email'
+      assignments_description: 'Assignment notifications appear whenever you get assigned to a team, project, task.'
+      recent_notification: 'Recent changes'
+      recent_notification_description: 'Recent changes notifications appear whenever there is a change on a task you are assigned to.'
+      system_message: 'System message'
+      system_message_description: 'System message notifications are specifically sent by site maintainers to notify all users about a system update.'
     show_all: "Show all notifications"
     show_more: "Show more notifications"
     no_notifications: "No notifications."