diff --git a/app/assets/javascripts/admin/controllers/admin-plugins.js.es6 b/app/assets/javascripts/admin/controllers/admin-plugins.js.es6
index ae7f95915d9..5e91ad297da 100644
--- a/app/assets/javascripts/admin/controllers/admin-plugins.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-plugins.js.es6
@@ -7,5 +7,14 @@ export default Ember.Controller.extend({
         }
       })
       .compact();
-  }.property()
+  }.property(),
+  actions: {
+    clearFilter() {
+      this.setProperties({ filter: "", onlyOverridden: false });
+    },
+
+    toggleMenu() {
+      $(".admin-detail").toggleClass("mobile-closed mobile-open");
+    }
+  }
 });
diff --git a/app/assets/javascripts/admin/templates/admin.hbs b/app/assets/javascripts/admin/templates/admin.hbs
index cf4d231d4ed..495a51cf460 100644
--- a/app/assets/javascripts/admin/templates/admin.hbs
+++ b/app/assets/javascripts/admin/templates/admin.hbs
@@ -1,8 +1,10 @@
 {{#admin-wrapper class="container"}}
   <div class="row">
-    <div class="full-width">
+    <div class="full-width">              
+    <div class="admin-main-nav">
 
       <ul class="nav nav-pills">
+
         {{nav-item route='admin.dashboardNext' label='admin.dashboard.title'}}
         {{#if currentUser.admin}}
           {{nav-item route='adminSiteSettings' label='admin.site_settings.title'}}
@@ -25,7 +27,10 @@
         {{/if}}
         {{nav-item route='adminPlugins' label='admin.plugins.title'}}
         {{plugin-outlet name="admin-menu" connectorTagName="" tagName=""}}
+
       </ul>
+      </div>
+
 
       <div class='boxed white admin-content'>
         <div class='admin-contents {{adminContentsClassName}}'>
diff --git a/app/assets/javascripts/admin/templates/api-keys.hbs b/app/assets/javascripts/admin/templates/api-keys.hbs
index b25eebd69a6..e1907da87ff 100644
--- a/app/assets/javascripts/admin/templates/api-keys.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys.hbs
@@ -1,33 +1,35 @@
 {{#if model}}
-  <table class='api-keys'>
-  <tr>
+  <table class='api-keys grid'>
+  <thead>
     <th>{{i18n 'admin.api.key'}}</th>
     <th>{{i18n 'admin.api.user'}}</th>
     <th>&nbsp;</th>
-  </tr>
-  {{#each model as |k|}}
-    <tr>
-      <td class='key'>{{k.key}}</td>
-      <td>
-        {{#if k.user}}
-          {{#link-to 'adminUser' k.user}}
-            {{avatar k.user imageSize="small"}}
-          {{/link-to}}
-        {{else}}
-          {{i18n 'admin.api.all_users'}}
-        {{/if}}
-      </td>
-      <td>
-        {{d-button action="regenerateKey" actionParam=k icon="undo" label='admin.api.regenerate'}}
-        {{d-button action="revokeKey" actionParam=k icon="times" label='admin.api.revoke'}}
-      </td>
-    </tr>
-  {{/each}}
+  </thead>
+  <tbody>
+    {{#each model as |k|}}
+      <tr>
+        <td class='key'>{{k.key}}</td>
+        <td class="key-user">
+          {{#if k.user}}
+            {{#link-to 'adminUser' k.user}}
+              {{avatar k.user imageSize="small"}}
+            {{/link-to}}
+          {{else}}
+            {{i18n 'admin.api.all_users'}}
+          {{/if}}
+        </td>
+        <td class="key-controls">
+          {{d-button action="regenerateKey" actionParam=k icon="undo" label='admin.api.regenerate'}}
+          {{d-button action="revokeKey" actionParam=k icon="times" label='admin.api.revoke'}}
+        </td>
+      </tr>
+    {{/each}}
+  </tbody>
   </table>
 {{else}}
   <p>{{i18n 'admin.api.none'}}</p>
 {{/if}}
 
 {{#unless hasMasterKey}}
-<button class='btn' {{action "generateMasterKey"}}>{{d-icon "key"}}</button>
+<button class='btn btn-icon no-text btn-primary' {{action "generateMasterKey"}}>{{d-icon "key"}}</button>
 {{/unless}}
diff --git a/app/assets/javascripts/admin/templates/backups-index.hbs b/app/assets/javascripts/admin/templates/backups-index.hbs
index a8220a4e1ac..3b20c7935e6 100644
--- a/app/assets/javascripts/admin/templates/backups-index.hbs
+++ b/app/assets/javascripts/admin/templates/backups-index.hbs
@@ -1,9 +1,4 @@
-<table>
-  <tr>
-    <th width="55%">{{i18n 'admin.backups.columns.filename'}}</th>
-    <th width="10%">{{i18n 'admin.backups.columns.size'}}</th>
-    <th>
-      <div class="pull-right">
+     <div class="backup-options">
         {{resumable-upload target="/admin/backups/upload" success="uploadSuccess" error="uploadError" uploadText=uploadLabel title="admin.backups.upload.title"}}
         {{#if site.isReadOnly}}
           {{d-button icon="eye" action="toggleReadOnlyMode" disabled=status.isOperationRunning title="admin.backups.read_only.disable.title" label="admin.backups.read_only.disable.label"}}
@@ -11,14 +6,19 @@
           {{d-button icon="eye" action="toggleReadOnlyMode" disabled=status.isOperationRunning title="admin.backups.read_only.enable.title" label="admin.backups.read_only.enable.label"}}
         {{/if}}
       </div>
-    </th>
-  </tr>
+<table class="grid">
+  <thead>
+    <th width="55%">{{i18n 'admin.backups.columns.filename'}}</th>
+    <th width="10%">{{i18n 'admin.backups.columns.size'}}</th>
+    <th></th>    
+  </thead>
+  <tbody>
   {{#each model as |backup|}}
     <tr>
-      <td>{{backup.filename}}</td>
-      <td>{{human-size backup.size}}</td>
-      <td>
-        <div class="pull-right">
+      <td class="backup-filename">{{backup.filename}}</td>
+      <td class="backup-size">{{human-size backup.size}}</td>
+      <td class="backup-controls">
+        <div>
           {{d-button class="download"
                      action="download"
                      actionParam=backup
@@ -42,4 +42,5 @@
       <td></td>
     </tr>
   {{/each}}
+  </tbody>
 </table>
diff --git a/app/assets/javascripts/admin/templates/backups.hbs b/app/assets/javascripts/admin/templates/backups.hbs
index 33229e22534..ac36550404c 100644
--- a/app/assets/javascripts/admin/templates/backups.hbs
+++ b/app/assets/javascripts/admin/templates/backups.hbs
@@ -5,9 +5,7 @@
         {{nav-item route='admin.backups.index' label='admin.backups.menu.backups'}}
         {{nav-item route='admin.backups.logs' label='admin.backups.menu.logs'}}
         {{plugin-outlet name="downloader" tagName=""}}
-      </ul>
-    </nav>
-    <div class="pull-right">
+         <div class="backup-operations">
       {{#if model.canRollback}}
         {{d-button action="rollback"
                    class="btn-rollback"
@@ -30,6 +28,10 @@
                    icon="rocket"}}
       {{/if}}
     </div>
+      </ul>
+    
+    </nav>
+
   </div>
 
   <div class="admin-container">
diff --git a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
index e21685831b5..07f635bcf68 100644
--- a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
@@ -1,27 +1,31 @@
 {{#if editing}}
-  <td>
+  <td class="editing-input">
+    <div class="label">{{i18n "admin.embedding.host"}}</div>
     {{input value=buffered.host placeholder="example.com" enter="save" class="host-name"}}
   </td>
-	<td>
+	<td class="editing-input">
+    <div class="label">{{i18n "admin.embedding.class_name"}}</div>
     {{input value=buffered.class_name placeholder="class" enter="save" class="class-name"}}
 	</td>
-  <td>
+  <td class="editing-input">
+    <div class="label">{{i18n "admin.embedding.path_whitelist"}}</div>
     {{input value=buffered.path_whitelist placeholder="/blog/.*" enter="save" class="path-whitelist"}}
   </td>
-  <td>
+  <td class="editing-input">
+    <div class="label">{{i18n "admin.embedding.category"}}</div>
     {{category-chooser value=categoryId class="small"}}
   </td>
-  <td>
+  <td class="editing-controls">
     {{d-button icon="check" action="save" class="btn-primary" disabled=cantSave}}
     {{d-button icon="times" action="cancel" class="btn-danger" disabled=host.isSaving}}
   </td>
 {{else}}
-  <td>{{host.host}}</td>
-  <td>{{host.class_name}}</td>
-  <td>{{host.path_whitelist}}</td>
-  <td>{{category-badge host.category}}</td>
-  <td>
+  <td><div class="label">{{i18n "admin.embedding.host"}}</div>{{host.host}}</td>
+  <td><div class="label">{{i18n "admin.embedding.class_name"}}</div>{{host.class_name}}</td>
+  <td><div class="label">{{i18n "admin.embedding.path_whitelist"}}</div>{{host.path_whitelist}}</td>
+  <td><div class="label">{{i18n "admin.embedding.category"}}</div>{{category-badge host.category}}</td>
+  <td class="controls">
     {{d-button icon="pencil" action="edit"}}
     {{d-button icon="trash-o" action="delete" class='btn-danger'}}
   </td>
-{{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/templates/embedding.hbs b/app/assets/javascripts/admin/templates/embedding.hbs
index 752f7a920db..d9e97c1c5a1 100644
--- a/app/assets/javascripts/admin/templates/embedding.hbs
+++ b/app/assets/javascripts/admin/templates/embedding.hbs
@@ -1,16 +1,18 @@
 <div class='embeddable-hosts'>
   {{#if embedding.embeddable_hosts}}
-    <table class='embedding'>
-      <tr>
+    <table class='embedding grid'>
+      <thead>
         <th style='width: 25%'>{{i18n "admin.embedding.host"}}</th>
         <th style='width: 15%'>{{i18n "admin.embedding.class_name"}}</th>
         <th style='width: 25%'>{{i18n "admin.embedding.path_whitelist"}}</th>
         <th style='width: 25%'>{{i18n "admin.embedding.category"}}</th>
         <th style='width: 10%'>&nbsp;</th>
-      </tr>
+      </thead>
+      <tbody>
       {{#each embedding.embeddable_hosts as |host|}}
         {{embeddable-host host=host deleteHost="deleteHost"}}
       {{/each}}
+      </tbody>
     </table>
   {{else}}
     <p>{{i18n "admin.embedding.get_started"}}</p>
diff --git a/app/assets/javascripts/admin/templates/flags-topics-index.hbs b/app/assets/javascripts/admin/templates/flags-topics-index.hbs
index 5ece61b6b72..9a37bc78fcd 100644
--- a/app/assets/javascripts/admin/templates/flags-topics-index.hbs
+++ b/app/assets/javascripts/admin/templates/flags-topics-index.hbs
@@ -1,7 +1,7 @@
 {{plugin-outlet name="flagged-topics-before" noTags=true args=(hash flaggedTopics=flaggedTopics)}}
 
 {{#if flaggedTopics}}
-  <table class='flagged-topics'>
+  <table class='flagged-topics grid'>
     <thead>
       {{plugin-outlet name="flagged-topic-header-row" noTags=true}}
       <th>{{i18n "admin.flags.flagged_topics.topic"}} </th>
@@ -10,7 +10,7 @@
       <th>{{i18n "admin.flags.flagged_topics.last_flagged"}}</th>
       <th></th>
     </thead>
-
+    <tbody>
     {{#each flaggedTopics as |ft|}}
       <tr class='flagged-topic'>
         {{plugin-outlet name="flagged-topic-row" noTags=true args=(hash topic=ft.topic)}}
@@ -18,7 +18,7 @@
         <td class="topic-title">
           <a href={{ft.topic.relative_url}} target="_blank">{{replace-emoji ft.topic.fancy_title}}</a>
         </td>
-        <td>
+        <td class="flag-counts">
           {{#each ft.flag_counts as |fc|}}
             <div class='flag-counts'>
               <span class='type-name'>{{post-action-title fc.post_action_type_id fc.name_key}}</span>
@@ -29,10 +29,10 @@
         <td class='flagged-topic-users'>
           {{flagged-topic-users users=ft.users tagName=""}}
         </td>
-        <td>
+        <td class="last-flagged">
           {{format-age ft.last_flag_at}}
         </td>
-        <td>
+        <td class="flag-details">
           {{#link-to
             "adminFlags.topics.show"
             ft.id
@@ -44,6 +44,7 @@
         </td>
       </tr>
     {{/each}}
+    </tbody>
   </table>
 {{else}}
   {{i18n "admin.flags.flagged_topics.no_results"}}
diff --git a/app/assets/javascripts/admin/templates/logs/screened-emails.hbs b/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
index f99ff865e15..b370ae419f7 100644
--- a/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-emails.hbs
@@ -1,6 +1,6 @@
 <p>
   {{i18n 'admin.logs.screened_emails.description'}}
-  <button class="btn pull-right" {{action "exportScreenedEmailList"}} title="{{i18n 'admin.export_csv.button_title.screened_email'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
+  <button class="btn screened-email-export" {{action "exportScreenedEmailList"}} title="{{i18n 'admin.export_csv.button_title.screened_email'}}">{{d-icon "download"}}{{i18n 'admin.export_csv.button_text'}}</button>
 </p>
 <br>
 
diff --git a/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs b/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
index e8ee4d896dd..4c1654c0f27 100644
--- a/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
+++ b/app/assets/javascripts/admin/templates/logs/screened-ip-addresses.hbs
@@ -1,32 +1,32 @@
 <p>{{i18n 'admin.logs.screened_ips.description'}}</p>
 
-<div class="pull-right">
-  {{text-field value=filter class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.filter" autocorrect="off" autocapitalize="off"}}
-  {{d-button action="rollUp" title="admin.logs.screened_ips.roll_up.title" label="admin.logs.screened_ips.roll_up.text"}}
-  {{d-button action="exportScreenedIpList" icon="download" title="admin.export_csv.button_title.screened_ip" label="admin.export_csv.button_text"}}
+<div class="screened-ip-controls">
+  <div class="filter-screened-ip-address"> 
+    {{text-field value=filter class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.filter" autocorrect="off" autocapitalize="off"}}
+    {{d-button action="rollUp" title="admin.logs.screened_ips.roll_up.title" label="admin.logs.screened_ips.roll_up.text"}}
+    {{d-button action="exportScreenedIpList" icon="download" title="admin.export_csv.button_title.screened_ip" label="admin.export_csv.button_text"}}
+  </div>
+    {{screened-ip-address-form action="recordAdded"}}
 </div>
 
-<div>
-  {{screened-ip-address-form action="recordAdded"}}
-</div>
+
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
 
-    <div class='table admin-logs-table screened-ip-addresses'>
-      <div class="heading-container">
-        <div class="col heading first ip_address">{{i18n 'admin.logs.ip_address'}}</div>
-        <div class="col heading action">{{i18n 'admin.logs.action'}}</div>
-        <div class="col heading match_count">{{i18n 'admin.logs.match_count'}}</div>
-        <div class="col heading last_match_at">{{i18n 'admin.logs.last_match_at'}}</div>
-        <div class="col heading created_at">{{i18n 'admin.logs.created_at'}}</div>
-        <div class="col heading actions"></div>
-        <div class="clearfix"></div>
-      </div>
-
+    <table class='admin-logs-table screened-ip-addresses grid'>
+      <thead class="heading-container">
+        <th class="col heading first ip_address">{{i18n 'admin.logs.ip_address'}}</th>
+        <th class="col heading action">{{i18n 'admin.logs.action'}}</th>
+        <th class="col heading match_count">{{i18n 'admin.logs.match_count'}}</th>
+        <th class="col heading created_at">{{i18n 'admin.logs.created_at'}}</th>
+        <th class="col heading last_match_at">{{i18n 'admin.logs.last_match_at'}}</th>
+        <th class="col heading actions"></th>
+      </thead>
+      <tbody>
       {{#each model as |item|}}
-        <div class="admin-list-item">
-          <div class="col first ip_address">
+        <tr class="admin-list-item">
+          <td class="col first ip_address">
             {{#if item.editing}}
               {{text-field value=item.ip_address autofocus="autofocus"}}
             {{else}}
@@ -38,23 +38,24 @@
                 {{/if}}
               </span>
             {{/if}}
-          </div>
-          <div class="col action">
+          </td>
+          <td class="col action">
             {{#if item.isBlocked}}
               {{d-icon "ban"}}
             {{else}}
               {{d-icon "check"}}
             {{/if}}
             {{item.actionName}}
-          </div>
-          <div class="col match_count">{{item.match_count}}</div>
-          <div class="col last_match_at">
+          </td>
+          <td class="col match_count"><div class="label">{{i18n 'admin.logs.match_count'}}</div> {{item.match_count}}</td>
+          <td class="col created_at"><div class="label">{{i18n 'admin.logs.created_at'}}</div> {{age-with-tooltip item.created_at}}</td>
+
+          <td class="col last_match_at">
             {{#if item.last_match_at}}
-              {{age-with-tooltip item.last_match_at}}
+               <div class="label">{{i18n 'admin.logs.last_match_at'}} {{age-with-tooltip item.last_match_at}}</div>  
             {{/if}}
-          </div>
-          <div class="col created_at">{{age-with-tooltip item.created_at}}</div>
-          <div class="col actions">
+          </td>
+          <td class="col actions">
             {{#unless item.editing}}
               {{d-button action="destroy" actionParam=item icon="trash-o" class="btn-danger"}}
               {{d-button action="edit" actionParam=item icon="pencil"}}
@@ -67,11 +68,11 @@
               {{d-button action="save" actionParam=item label="admin.logs.save"}}
               <a {{action "cancel" item}}>{{i18n 'cancel'}}</a>
             {{/unless}}
-          </div>
-          <div class="clearfix"></div>
-        </div>
+          </td>
+        </tr>
       {{/each}}
-    </div>
+      </tbody>
+    </table>
 
   {{else}}
     {{i18n 'search.no_results'}}
diff --git a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
index 3445abf8df5..594dd18a314 100644
--- a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
@@ -32,58 +32,67 @@
   {{else}}
     {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions value=filterActionId none="admin.logs.staff_actions.all"}}
   {{/if}}
-
-  <div class="pull-right">
-    {{d-button action="exportStaffActionLogs" label="admin.export_csv.button_text" icon="download"}}
-  </div>
+  
+  {{d-button action="exportStaffActionLogs" label="admin.export_csv.button_text" icon="download"}}
 </div>
 <div class="clearfix"></div>
 
 {{#staff-actions}}
-  <div class="heading-container">
-    <div class="col heading first staff_user">{{i18n 'admin.logs.staff_actions.staff_user'}}</div>
-    <div class="col heading action">{{i18n 'admin.logs.action'}}</div>
-    <div class="col heading subject">{{i18n 'admin.logs.staff_actions.subject'}}</div>
-    <div class="col heading created_at">{{i18n 'admin.logs.staff_actions.when'}}</div>
-    <div class="col heading details">{{i18n 'admin.logs.staff_actions.details'}}</div>
-    <div class="col heading context">{{i18n 'admin.logs.staff_actions.context'}}</div>
-    <div class="clearfix"></div>
-  </div>
-
   {{#conditional-loading-spinner condition=loading}}
+
+<table class='table staff-logs grid'>
+
+  <thead>
+    <th>{{i18n 'admin.logs.staff_actions.staff_user'}}</th>
+    <th>{{i18n 'admin.logs.action'}}</th>
+    <th>{{i18n 'admin.logs.staff_actions.subject'}}</th>
+    <th>{{i18n 'admin.logs.staff_actions.when'}}</th>
+    <th>{{i18n 'admin.logs.staff_actions.details'}}</th>
+    <th>{{i18n 'admin.logs.staff_actions.context'}}</th>
+  </thead>
+
+  <tbody>
+
     {{#each model as |item|}}
-      <div class='admin-list-item'>
-        <div class="col value first staff_user">
+      <tr class='admin-list-item'>
+        <td class="staff-users">
+          <div class="staff-user">
           {{#link-to 'adminUser' item.acting_user}}{{avatar item.acting_user imageSize="tiny"}}{{/link-to}}
-          <a {{action "filterByStaffUser" item.acting_user}} class="btn btn-small">{{item.acting_user.username}}</a>
-        </div>
-        <div class="col value action">
-          <a {{action "filterByAction" item}} class="btn btn-small">{{item.actionName}}</a>
-        </div>
-        <div class="col value subject">
+          <a {{action "filterByStaffUser" item.acting_user}}>{{item.acting_user.username}}</a>
+          </div>
+        </td>
+        <td class="col value action">
+          <a {{action "filterByAction" item}}>{{item.actionName}}</a>
+        </td>
+        <td class="col value subject">
+          <div class="subject">
+
           {{#if item.target_user}}
             {{#link-to 'adminUser' item.target_user}}{{avatar item.target_user imageSize="tiny"}}{{/link-to}}
-            <a {{action "filterByTargetUser" item.target_user}} class="btn btn-small">{{item.target_user.username}}</a>
+            <a {{action "filterByTargetUser" item.target_user}}>{{item.target_user.username}}</a>
           {{/if}}
           {{#if item.subject}}
-            <a {{action "filterBySubject" item.subject}} title={{item.subject}}  class="btn btn-small">{{item.subject}}</a>
+            <a {{action "filterBySubject" item.subject}} title={{item.subject}}>{{item.subject}}</a>
           {{/if}}
-        </div>
-        <div class="col value created_at">{{age-with-tooltip item.created_at}}</div>
-        <div class="col value details">
+          </div>
+        </td>
+        <td class="col value created-at">{{age-with-tooltip item.created_at}}</td>
+        <td class="col value details">
           {{{item.formattedDetails}}}
           {{#if item.useCustomModalForDetails}}
-            <a {{action "showCustomDetailsModal" item}}>{{i18n 'admin.logs.staff_actions.show'}}</a>
+            <a {{action "showCustomDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
           {{/if}}
           {{#if item.useModalForDetails}}
-            <a {{action "showDetailsModal" item}}>{{i18n 'admin.logs.staff_actions.show'}}</a>
+            <a {{action "showDetailsModal" item}}>{{d-icon "info-circle"}} {{i18n 'admin.logs.staff_actions.show'}}</a>
           {{/if}}
-        </div>
-        <div class="col value context">{{item.context}}</div>
-        <div class="clearfix"></div>
-      </div>
+        </td>
+        <td class="col value context">{{item.context}}</td>
+      </tr>
     {{else}}
       {{i18n 'search.no_results'}}
     {{/each}}
+  </tbody>
+</table>
   {{/conditional-loading-spinner}}
+
 {{/staff-actions}}
diff --git a/app/assets/javascripts/admin/templates/permalinks.hbs b/app/assets/javascripts/admin/templates/permalinks.hbs
index 3ff0b00539f..068d1afdcaf 100644
--- a/app/assets/javascripts/admin/templates/permalinks.hbs
+++ b/app/assets/javascripts/admin/templates/permalinks.hbs
@@ -7,46 +7,44 @@
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
-    <div class='table admin-logs-table permalinks'>
-      <div class="heading-container">
-        <div class="col heading first url">{{i18n 'admin.permalink.url'}}</div>
-        <div class="col heading topic">{{i18n 'admin.permalink.topic_title'}}</div>
-        <div class="col heading post">{{i18n 'admin.permalink.post_title'}}</div>
-        <div class="col heading category">{{i18n 'admin.permalink.category_title'}}</div>
-        <div class="col heading external_url">{{i18n 'admin.permalink.external_url'}}</div>
-        <div class="col heading actions"></div>
-        <div class="clearfix"></div>
-      </div>
+    <table class='admin-logs-table permalinks grid'>
+      <thead class="heading-container">
+        <th class="col heading first url">{{i18n 'admin.permalink.url'}}</th>
+        <th class="col heading topic">{{i18n 'admin.permalink.topic_title'}}</th>
+        <th class="col heading post">{{i18n 'admin.permalink.post_title'}}</th>
+        <th class="col heading category">{{i18n 'admin.permalink.category_title'}}</th>
+        <th class="col heading external_url">{{i18n 'admin.permalink.external_url'}}</th>
+        <th class="col heading actions"></th>
+      </thead>
       {{#each model as |pl|}}
-        <div class="admin-list-item">
-          <div class="col first url">{{pl.url}}</div>
-          <div class="col topic">
+        <tr class="admin-list-item">
+          <td class="col first url">{{pl.url}}</td>
+          <td class="col topic">
             {{#if pl.topic_id}}
               <a href='{{unbound pl.topic_url}}'>{{pl.topic_title}}</a>
             {{/if}}
-          </div>
-          <div class="col post">
+          </td>
+          <td class="col post">
             {{#if pl.post_id}}
               <a href='{{unbound pl.post_url}}'>#{{pl.post_number}} {{pl.post_topic_title}}</a>
             {{/if}}
-          </div>
-          <div class="col category">
+          </td>
+          <td class="col category">
             {{#if pl.category_id}}
               <a href='{{unbound pl.category_url}}'>{{pl.category_name}}</a>
             {{/if}}
-          </div>
-          <div class="col external_url">
+          </td>
+          <td class="col external_url">
             {{#if pl.external_url}}
               <a href='{{unbound pl.external_url}}'>{{pl.external_url}}</a>
             {{/if}}
-          </div>
-          <div class="col action">
+          </td>
+          <td class="col action">
             {{d-button action="destroy" actionParam=pl icon="trash-o" class="btn-danger"}}
-          </div>
-          <div class="clearfix"></div>
-        </div>
+          </td>
+        </tr>
       {{/each}}
-    </div>
+    </table>
   {{else}}
     {{i18n 'search.no_results'}}
   {{/if}}
diff --git a/app/assets/javascripts/admin/templates/plugins-index.hbs b/app/assets/javascripts/admin/templates/plugins-index.hbs
index 176c3418b29..cc121e2940a 100644
--- a/app/assets/javascripts/admin/templates/plugins-index.hbs
+++ b/app/assets/javascripts/admin/templates/plugins-index.hbs
@@ -1,17 +1,10 @@
 {{#if model.length}}
 
-  {{#if currentUser.admin}}
-    {{d-button label="admin.plugins.change_settings"
-               icon="gear"
-               class='settings-button pull-right'
-               action="showSettings"}}
-  {{/if}}
 
   <h3>{{i18n "admin.plugins.installed"}}</h3>
 
-  <br/>
 
-  <table class="admin-plugins">
+  <table class="admin-plugins grid">
     <thead>
       <tr>
         <th></th>
@@ -32,15 +25,17 @@
             {{/if}}
           </td>
 
-          <td>
+          <td class="plugin-name">
             {{#if plugin.url}}
               <a href={{plugin.url}} target="_blank">{{plugin.name}}</a>
             {{else}}
               {{plugin.name}}
             {{/if}}
           </td>
-          <td>{{plugin.version}}</td>
+          <td class="version">              <div class="label">{{i18n "admin.plugins.version"}}</div>
+{{plugin.version}}</td>
           <td class="col-enabled">
+            <div class="label">{{i18n "admin.plugins.enabled"}}</div>
             {{#if plugin.enabled_setting}}
               {{#if plugin.enabled}}
                 {{i18n "admin.plugins.is_enabled"}}
@@ -51,7 +46,7 @@
               {{i18n "admin.plugins.is_enabled"}}
             {{/if}}
           </td>
-          <td>
+          <td class="settings">
             {{#if currentUser.admin}}
               {{#if plugin.enabled_setting}}
                 {{d-button action="showSettings" actionParam=plugin icon="gear" label="admin.plugins.change_settings_short"}}
diff --git a/app/assets/javascripts/admin/templates/plugins.hbs b/app/assets/javascripts/admin/templates/plugins.hbs
index ac1ca1a83ce..d37e8bcaa5c 100644
--- a/app/assets/javascripts/admin/templates/plugins.hbs
+++ b/app/assets/javascripts/admin/templates/plugins.hbs
@@ -1,3 +1,18 @@
+  <div class='admin-controls'>
+
+  <div class='controls'>
+    {{d-button action="toggleMenu" class="menu-toggle" icon="bars"}}
+
+  {{#if currentUser.admin}}
+    {{d-button label="admin.plugins.change_settings"
+               icon="gear"
+               class='settings-button'
+               action="showSettings"}}
+  {{/if}}
+  </div>
+  
+  </div>
+
 <div class="admin-nav pull-left">
   <ul class="nav nav-stacked">
     {{nav-item route='adminPlugins.index' label="admin.plugins.title"}}
@@ -8,6 +23,8 @@
   </ul>
 </div>
 
-<div class="admin-detail pull-left">
+<div class="admin-detail pull-left mobile-closed">
   {{outlet}}
 </div>
+
+<div class="clearfix"></div>
diff --git a/app/assets/javascripts/admin/templates/search-logs-index.hbs b/app/assets/javascripts/admin/templates/search-logs-index.hbs
index 257155b4b5a..450086964d1 100644
--- a/app/assets/javascripts/admin/templates/search-logs-index.hbs
+++ b/app/assets/javascripts/admin/templates/search-logs-index.hbs
@@ -1,31 +1,31 @@
-<p>
+<div class="admin-title">
   {{period-chooser period=period}}
   {{combo-box content=searchTypeOptions value=searchType class='search-logs-filter'}}
-</p>
-<br>
+</div>
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
 
-    <div class='table search-logs-list'>
-      <div class="heading-container">
-        <div class="col heading term">{{i18n 'admin.logs.search_logs.term'}}</div>
-        <div class="col heading">{{i18n 'admin.logs.search_logs.searches'}}</div>
-        <div class="col heading">{{i18n 'admin.logs.search_logs.click_through'}}</div>
-        <div class="col heading" title="{{i18n 'admin.logs.search_logs.unique_title'}}">{{i18n 'admin.logs.search_logs.unique'}}</div>
-      </div>
-
+    <table class='search-logs-list grid'>
+      <thead>
+        <th class="col heading term">{{i18n 'admin.logs.search_logs.term'}}</th>
+        <th class="col heading">{{i18n 'admin.logs.search_logs.searches'}}</th>
+        <th class="col heading">{{i18n 'admin.logs.search_logs.click_through'}}</th>
+        <th class="col heading" title="{{i18n 'admin.logs.search_logs.unique_title'}}">{{i18n 'admin.logs.search_logs.unique'}}</th>
+      </thead>
+      <tbody>
       {{#each model as |item|}}
-        <div class="admin-list-item">
-          <div class="col term">
+        <tr class="admin-list-item">
+          <td class="col term">
             {{#link-to 'adminSearchLogs.term' item.term}}{{item.term}}{{/link-to}}
-          </div>
-          <div class="col">{{item.searches}}</div>
-          <div class="col">{{item.click_through}}</div>
-          <div class="col">{{item.unique}}</div>
-        </div>
+          </td>
+          <td class="col"><div class="label">{{i18n 'admin.logs.search_logs.searches'}}</div>{{item.searches}}</td>
+          <td class="col"><div class="label">{{i18n 'admin.logs.search_logs.click_through'}}</div>{{item.click_through}}</td>
+          <td class="col"><div class="label">{{i18n 'admin.logs.search_logs.unique'}}</div>{{item.unique}}</td>
+        </tr>
       {{/each}}
-    </div>
+      </tbody>
+    </table>
 
   {{else}}
     {{i18n 'search.no_results'}}
diff --git a/app/assets/javascripts/admin/templates/site-settings.hbs b/app/assets/javascripts/admin/templates/site-settings.hbs
index 9f455b01e92..61e57209b76 100644
--- a/app/assets/javascripts/admin/templates/site-settings.hbs
+++ b/app/assets/javascripts/admin/templates/site-settings.hbs
@@ -1,15 +1,16 @@
 <div class='admin-controls'>
+  
+  <div class='controls'>
+    {{d-button action="toggleMenu" class="menu-toggle" icon="bars"}}
+    {{text-field value=filter placeholderKey="type_to_filter" class="no-blur"}}
+    {{d-button action="clearFilter" label="admin.site_settings.clear_filter"}}
+  </div>
   <div class='search controls'>
     <label>
       {{input type="checkbox" checked=onlyOverridden}}
       {{i18n 'admin.settings.show_overriden'}}
     </label>
   </div>
-  <div class='controls'>
-    {{d-button action="toggleMenu" class="menu-toggle" icon="bars"}}
-    {{text-field value=filter placeholderKey="type_to_filter" class="no-blur"}}
-    {{d-button action="clearFilter" label="admin.site_settings.clear_filter"}}
-  </div>
 </div>
 
 <div class="admin-nav pull-left">
diff --git a/app/assets/javascripts/admin/templates/users-list-show.hbs b/app/assets/javascripts/admin/templates/users-list-show.hbs
index 7401077ee63..b54d8214da7 100644
--- a/app/assets/javascripts/admin/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/templates/users-list-show.hbs
@@ -7,24 +7,22 @@
 
 <div class="admin-title">
   <h2>{{title}}</h2>
+  {{#unless showEmails}}
+      <button {{action "showEmails"}} class="show-emails btn">{{i18n 'admin.users.show_emails'}}</button>
+  {{/unless}}
 </div>
 <div class='username controls'>
   {{text-field value=listFilter placeholder=searchHint}}
-  {{#unless showEmails}}
-    <div class="pull-right">
-      <button {{action "showEmails"}} class="show-emails btn">{{i18n 'admin.users.show_emails'}}</button>
-    </div>
-  {{/unless}}
+  
 </div>
 
 {{#conditional-loading-spinner condition=refreshing}}
   {{#if model}}
-    <table class='table users-list'>
+    <table class='table users-list grid'>
       <thead>
         {{#if showApproval}}
           <th>{{input type="checkbox" checked=selectAll}}</th>
         {{/if}}
-        <th>&nbsp;</th>
         <th>{{i18n 'username'}}</th>
         <th class='email-heading'>{{i18n 'email'}}</th>
         <th>{{i18n 'admin.users.last_emailed'}}</th>
@@ -42,44 +40,48 @@
         {{#each model as |user|}}
           <tr class="user {{user.selected}} {{unless user.active 'not-activated'}}">
             {{#if showApproval}}
-            <td>
+            <td class="approval">
               {{#if user.can_approve}}
                 {{input type="checkbox" checked=user.selected}}
               {{/if}}
             </td>
             {{/if}}
-            <td>
+            <td class="username">
               <a href="{{unbound user.path}}" data-user-card="{{unbound user.username}}">
                 {{avatar user imageSize="small"}}
               </a>
-            </td>
-            <td class="username">
               {{#link-to 'adminUser' user}}{{unbound user.username}}{{/link-to}}
               {{#if user.staged}}
                 {{d-icon "envelope-o" title="user.staged" }}
               {{/if}}
             </td>
             <td class='email'>
-              {{unbound user.email}}
+              {{~unbound user.email~}}
             </td>
-            <td>
-              {{{format-duration user.last_emailed_age}}}
+            <td class="last-emailed">
+              <div class="label">{{i18n 'admin.users.last_emailed'}}</div>
+              <div>{{{format-duration user.last_emailed_age}}}</div>
             </td>
-            <td>
-              {{{format-duration user.last_seen_age}}}
+            <td class="last-seen">
+              <div class="label">{{i18n 'last_seen'}}</div>
+              <div>{{{format-duration user.last_seen_age}}}</div>
             </td>
-            <td>
-              {{number user.topics_entered}}
+            <td class="topics-entered">
+              <div class="label">{{i18n 'admin.user.topics_entered'}}</div>
+              <div>{{number user.topics_entered}}</div>
             </td>
-            <td>
-              {{number user.posts_read_count}}
+            <td class="posts-read">
+              <div class="label">{{i18n 'admin.user.posts_read_count'}}</div>
+              <div>{{number user.posts_read_count}}</div>
             </td>
-            <td>
-              {{{format-duration user.time_read}}}
+            <td class="time-read">
+              <div class="label">{{i18n 'admin.user.time_read'}}</div>
+              <div>{{{format-duration user.time_read}}}</div>
             </td>
 
-            <td>
-              {{{format-duration user.created_at_age}}}
+            <td class="created">
+              <div class="label">{{i18n 'created'}}</div>
+              <div>{{{format-duration user.created_at_age}}}</div>
             </td>
 
             {{#if showApproval}}
@@ -91,14 +93,13 @@
                 {{/if}}
               </td>
             {{/if}}
-            <td>
+            <td class="user-status">
               {{#if user.admin}}
                 {{d-icon "shield" title="admin.title" }}
               {{/if}}
               {{#if user.moderator}}
                 {{d-icon "shield" title="admin.moderator" }}
               {{/if}}
-
               {{#if user.second_factor_enabled}}
                 {{d-icon "lock" title="admin.user.second_factor_enabled" }}
               {{/if}}
diff --git a/app/assets/javascripts/admin/templates/users-list.hbs b/app/assets/javascripts/admin/templates/users-list.hbs
index c101a1a13bd..3555ccca90c 100644
--- a/app/assets/javascripts/admin/templates/users-list.hbs
+++ b/app/assets/javascripts/admin/templates/users-list.hbs
@@ -12,14 +12,15 @@
       {{nav-item route='adminUsersList.show' routeParam='suspect' label='admin.users.nav.suspect'}}
       {{nav-item route='adminUsersList.show' routeParam='staged' label='admin.users.nav.staged'}}
       {{nav-item route='groups' label='groups.index.title'}}
-    </ul>
-  </nav>
-  <div class="pull-right">
+      <div class="admin-actions">
     {{#unless siteSettings.enable_sso}}
       {{d-button action="sendInvites" title="admin.invite.button_title" icon="user-plus" label="admin.invite.button_text"}}
     {{/unless}}
     {{d-button action="exportUsers" title="admin.export_csv.button_title.user" icon="download" label="admin.export_csv.button_text"}}
   </div>
+    </ul>
+  </nav>
+
 </div>
 
 <div class="admin-container">
diff --git a/app/assets/javascripts/admin/templates/watched-words-action.hbs b/app/assets/javascripts/admin/templates/watched-words-action.hbs
index 1cf0f77cd92..a9481675c00 100644
--- a/app/assets/javascripts/admin/templates/watched-words-action.hbs
+++ b/app/assets/javascripts/admin/templates/watched-words-action.hbs
@@ -2,6 +2,7 @@
 
 <p class="about">{{actionDescription}}</p>
 
+<div class="watched-word-controls">
 {{watched-word-form
   actionKey=actionNameKey
   action="recordAdded"
@@ -9,8 +10,7 @@
   regularExpressions=adminWatchedWords.regularExpressions}}
 
 {{watched-word-uploader uploading=uploading actionKey=actionNameKey done="uploadComplete"}}
-
-<div class='clearfix'></div>
+</div>
 <div>
   <label class="show-words-checkbox">
     {{input type="checkbox" checked=adminWatchedWords.showWords disabled=adminWatchedWords.disableShowWords}}
diff --git a/app/assets/javascripts/admin/templates/web-hooks-show.hbs b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
index ef9c478774a..294e6b3d413 100644
--- a/app/assets/javascripts/admin/templates/web-hooks-show.hbs
+++ b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
@@ -46,12 +46,12 @@
     </div>
 
     <div class='filters'>
-      <div>
+      <div class="filter">
         <label>{{d-icon 'circle' class='tracking'}}{{i18n 'admin.web_hooks.categories_filter'}}</label>
         {{category-selector categories=model.categories}}
         <div class="instructions">{{i18n 'admin.web_hooks.categories_filter_instructions'}}</div>
       </div>
-      <div>
+      <div class="filter">
         <label>{{d-icon 'circle' class='tracking'}}{{i18n 'admin.web_hooks.groups_filter'}}</label>
         {{group-selector groupNames=model.groupsFilterInName groupFinder=model.groupFinder}}
         <div class="instructions">{{i18n 'admin.web_hooks.groups_filter_instructions'}}</div>
diff --git a/app/assets/javascripts/admin/templates/web-hooks.hbs b/app/assets/javascripts/admin/templates/web-hooks.hbs
index 81d4b86e4dc..6d613f1bb9f 100644
--- a/app/assets/javascripts/admin/templates/web-hooks.hbs
+++ b/app/assets/javascripts/admin/templates/web-hooks.hbs
@@ -1,14 +1,14 @@
-<div class='pull-right'>
+
+<div class='web-hooks-listing'>
+{{#if model}}
+  <p>{{i18n 'admin.web_hooks.instruction'}}</p>
+  <div class='new-webhook'>
   {{#link-to 'adminWebHooks.show' 'new' tagName='button' classNames='btn'}}
     {{d-icon 'plus'}} {{i18n 'admin.web_hooks.new'}}
   {{/link-to}}
 </div>
-<div class='clearfix'></div>
-<div class='web-hooks-listing'>
-{{#if model}}
-  <p>{{i18n 'admin.web_hooks.instruction'}}</p>
   {{#load-more selector=".web-hooks tr" action="loadMore"}}
-    <table class='web-hooks'>
+    <table class='web-hooks grid'>
       <thead>
         <tr>
           <th>{{i18n 'admin.web_hooks.delivery_status.title'}}</th>
@@ -20,8 +20,8 @@
       <tbody>
         {{#each model as |webHook|}}
           <tr>
-            <td>{{#link-to 'adminWebHooks.showEvents' webHook.id}}{{admin-web-hook-status deliveryStatuses=deliveryStatuses model=webHook}}{{/link-to}}</td>
-            <td>{{#link-to 'adminWebHooks.show' webHook}}{{webHook.payload_url}}{{/link-to}}</td>
+            <td class='delivery-status'>{{#link-to 'adminWebHooks.showEvents' webHook.id}}{{admin-web-hook-status deliveryStatuses=deliveryStatuses model=webHook}}{{/link-to}}</td>
+            <td class='payload-url'>{{#link-to 'adminWebHooks.show' webHook}}{{webHook.payload_url}}{{/link-to}}</td>
             <td class='description'>{{webHook.description}}</td>
             <td class='controls'>
               {{#link-to 'adminWebHooks.show' webHook tagName='button' classNames='btn btn-default no-text'}}{{d-icon 'edit'}}{{/link-to}}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 1b8233ce8bd..c9fe39f3e0d 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -1,39 +1,89 @@
-// these are the styles associated with the Discourse admin section
+// Styles for /admin section
+
 @import "common/foundation/variables";
 @import "common/foundation/mixins";
 @import "common/foundation/helpers";
 
-@import "common/admin/customize";
-@import "common/admin/flagging";
-@import "common/admin/dashboard_next";
-@import "common/admin/admin_reports";
-@import "common/admin/moderation_history";
-@import "common/admin/suspend";
-
 $mobile-breakpoint: 700px;
 
-// Change the box model for .admin-content
-@media (max-width: $mobile-breakpoint) {
-  .admin-content {
-    box-sizing: border-box;
-    *,
-    *:before,
-    *:after {
-      box-sizing: inherit;
-    }
+// Common admin styles
 
-    input[type="text"] {
-      // Desktop/_discourse.scss sets a height on text-input elements. Using `box-sizing: border-box`
-      // this value either needs to be increased or set to auto. `mobile.css` seems to not set a height on text-inputs.
-      height: auto;
+.admin-main-nav {
+  display: inline-flex;
+  position: relative;
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  height: 100%;
+  .mobile-view & {
+    margin-top: 10px;
+  }
+  @media screen and (max-width: 768px) {
+    width: calc(100% + 10px);
+    margin-left: -10px;
+    padding: 0 0 0 10px;
+  }
+
+  .nav.nav-pills {
+    display: inline-flex;
+    width: calc(100% - 10px);
+    flex: 1 0 auto;
+    @media screen and (max-width: 768px) {
+      white-space: nowrap;
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
+      margin: 0 0 0 -10px;
+      padding: 0 10px 10px 10px;
     }
+    &:before {
+      display: none;
+    }
+    > li {
+      margin: 0;
+      &:last-of-type {
+        > a {
+          margin-right: 25px;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: 768px) {
+    // Fade-out for horizontal scroll nav
+    &:before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      margin-left: -10px;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        rgba($secondary, 1) 0%,
+        rgba($secondary, 0) 100%
+      );
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      right: 0px;
+      width: 30px;
+      height: 100%;
+      background: linear-gradient(
+        to right,
+        rgba($secondary, 0) 0%,
+        rgba($secondary, 1) 100%
+      );
+    }
+  }
+}
+
+.nav-stacked {
+  @media screen and (max-width: 700px) {
+    margin: 0 10px 0 -10px;
   }
 }
 
 .admin-contents {
   position: relative;
-  margin-left: -10px;
-  margin-right: -10px;
 }
 
 .admin-contents table {
@@ -47,19 +97,15 @@ $mobile-breakpoint: 700px;
   th {
     padding: 8px;
   }
-
   th {
     text-align: left;
-
     &.sortable {
       cursor: pointer;
-      white-space: nowrap;
 
       &:hover {
         background-color: #e9e9e9;
         background-color: lighten($primary, 80%);
       }
-
       .d-icon-chevron-down,
       .d-icon-chevron-up {
         margin-left: 0.5em;
@@ -75,6 +121,89 @@ $mobile-breakpoint: 700px;
   .filters input {
     margin-bottom: 0;
   }
+  .label {
+    display: none;
+  }
+
+  @media screen and (max-width: 970px) and (min-width: 768px) {
+    td,
+    th {
+      padding: 6px 4px;
+    }
+    th {
+      vertical-align: bottom;
+    }
+    th.sortable {
+      max-width: 100px;
+    }
+  }
+}
+
+.admin-contents table.grid {
+  // Table switches to grid for narrow screens
+  @media screen and (max-width: 767px) {
+    thead {
+      display: none;
+    }
+    .label {
+      display: block;
+      color: $primary-medium;
+      font-size: $font-down-1;
+      margin: 0.5em 0 0.15em 0;
+    }
+    tr {
+      grid-template-columns: repeat(3, 1fr);
+      display: grid;
+      line-height: $line-height-medium;
+      padding: 8px 0;
+      min-width: 0;
+      td {
+        padding: 2px;
+        align-self: center;
+      }
+    }
+
+    tr.flagged-topic {
+      grid-template-columns: 0.25fr 1fr 1fr;
+      td.topic-title {
+        grid-column-start: 2;
+        grid-column-end: -2;
+        min-width: 0;
+        align-self: start;
+      }
+      td.last-flagged {
+        grid-row: 1;
+        grid-column-end: -1;
+        text-align: right;
+        align-self: start;
+      }
+      td.flag-details {
+        grid-row: 2;
+        grid-column-end: -1;
+        text-align: right;
+      }
+      td.flagged-topic-users {
+        grid-row: 1;
+        grid-column-start: 1;
+        max-width: 60px;
+        align-self: start;
+        a {
+          display: inline-block;
+          margin: 0 0.25em 0.25em 0;
+        }
+      }
+      td.flag-counts {
+        grid-row: 2;
+        grid-column-start: 2;
+      }
+    }
+  }
+
+  @media screen and (min-width: 550px) {
+    tr {
+      grid-template-columns: repeat(6, 1fr);
+    }
+  }
 }
 
 .site-texts {
@@ -83,13 +212,11 @@ $mobile-breakpoint: 700px;
     p {
       margin-top: 0;
     }
-
     .site-text-search {
       padding: 0.5em;
       font-size: $font-0;
       width: 50%;
     }
-
     .extra-options {
       float: right;
       input[type="checkbox"] {
@@ -100,21 +227,17 @@ $mobile-breakpoint: 700px;
   .text-highlight {
     font-weight: bold;
   }
-
   .site-text {
     cursor: pointer;
     border-bottom: 1px solid $primary-low;
     margin-bottom: 0.5em;
-
     &.overridden {
       background-color: $highlight-medium;
     }
-
     h3 {
       font-weight: normal;
       font-size: $font-0;
     }
-
     button.edit {
       float: right;
     }
@@ -124,17 +247,14 @@ $mobile-breakpoint: 700px;
       color: $primary-medium;
     }
   }
-
   .edit-site-text {
     textarea {
       width: 80%;
     }
-
     .save-messages,
     .title {
       margin-bottom: 1em;
     }
-
     .go-back {
       margin-top: 1em;
     }
@@ -163,10 +283,9 @@ $mobile-breakpoint: 700px;
 .admin-content {
   margin-bottom: 50px;
   .admin-contents {
-    padding: 8px 0;
+    padding: 0 0 8px 0;
     @include clearfix();
   }
-
   .view-options {
     float: right;
   }
@@ -198,14 +317,12 @@ $mobile-breakpoint: 700px;
         white-space: nowrap;
       }
     }
-
     .bar-container {
       float: left;
       width: 300px;
       margin-right: 15px;
       margin-bottom: 5px;
       display: inline-block;
-
       .bar {
         margin-top: 5px;
         background-color: $tertiary;
@@ -231,7 +348,6 @@ $mobile-breakpoint: 700px;
 .ip-lookup {
   position: relative;
   display: inline-block;
-
   .location-box {
     position: absolute;
     width: 460px;
@@ -241,14 +357,12 @@ $mobile-breakpoint: 700px;
     margin-top: -2px;
     background-color: $secondary;
     padding: 12px 12px 5px;
-
     .powered-by {
       font-size: $font-down-1;
       position: absolute;
       bottom: -10px;
       left: 10px;
     }
-
     .other-accounts {
       margin: 5px 0 0;
       max-height: 200px;
@@ -268,8 +382,17 @@ $mobile-breakpoint: 700px;
 }
 
 .admin-container {
-  margin-top: 20px;
+  margin-top: 10px;
 
+  .username {
+    input {
+      min-width: 220px;
+      @media screen and (max-width: 500px) {
+        box-sizing: border-box;
+        width: 100%;
+      }
+    }
+  }
   .select-kit {
     width: 350px;
   }
@@ -279,44 +402,120 @@ $mobile-breakpoint: 700px;
   .select-kit.dropdown-select-box {
     width: auto;
   }
-
   .search-logs-filter {
-    width: 200px;
-    float: right;
+    margin-left: auto;
+    @media screen and (max-width: 700px) {
+      flex: 1 1 100%;
+      margin-left: 0;
+    }
   }
+
   .header-search-results {
     clear: both;
     padding: 4px;
   }
-}
-
-.admin-container .controls {
-  @include clearfix;
-
-  .save-messages {
-    margin-top: 1em;
+  @media screen and (max-width: 768px) {
+    .select-kit.period-chooser
+      .period-chooser-header
+      h2.selected-name
+      .top-date-string {
+      font-size: $font-down-3;
+    }
+  }
+  .controls {
+    @include clearfix;
+    .save-messages {
+      margin-top: 1em;
+    }
   }
 }
 
 .admin-title {
-  margin-bottom: 0.5em;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  .show-emails {
+    margin-left: auto;
+  }
 }
 
 .admin-controls {
-  background-color: $primary-low;
-  padding: 10px 10px 3px 0;
-  @include clearfix;
-  nav {
-    float: left;
-    margin-left: 12px;
+  display: flex;
+
+  .admin-actions {
+    margin-left: auto;
   }
+  nav {
+    background-color: $primary-low;
+    width: 100%;
+  }
+  nav {
+    display: inline-flex;
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    padding: 0;
+    height: 100%;
+    @media screen and (max-width: 768px) {
+      width: calc(100% + 10px);
+      padding-left: 10px;
+      margin-left: -10px;
+      margin-right: -10px;
+    }
+
+    &:before {
+      // Fade out sides of horizontal nav
+      content: "";
+      position: absolute;
+      width: 10px;
+      left: 0;
+      height: calc(100% - 5px);
+      background: linear-gradient(
+        to right,
+        rgba($primary-low, 1) 0%,
+        rgba($primary-low, 0) 100%
+      );
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      right: 0px;
+      width: 30px;
+      height: calc(100% - 5px);
+      background: linear-gradient(
+        to right,
+        rgba($primary-low, 0) 0%,
+        rgba($primary-low, 1) 100%
+      );
+    }
+  }
+
   .nav.nav-pills {
-    li.active {
-      a {
-        border-color: $primary-low;
-        background-color: $primary-medium;
-        &:hover {
-          background-color: $primary-medium;
+    width: calc(100% - 10px);
+    display: inline-flex;
+    padding: 10px;
+    margin: 0;
+    white-space: nowrap;
+    overflow-x: auto;
+    @media screen and (max-width: 768px) {
+      margin-left: -10px;
+      overflow-x: scroll;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    &:before {
+      display: none;
+    }
+    > li {
+      margin: 0;
+      a.active {
+        background: $primary-medium;
+      }
+      &:last-of-type {
+        > a {
+          margin-right: 25px;
         }
       }
     }
@@ -327,14 +526,32 @@ $mobile-breakpoint: 700px;
     color: $primary;
   }
   .controls {
-    margin-left: 10px;
+    background: $primary-low;
+    width: 100%;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    input {
+      margin: 0;
+    }
+    &.search {
+      width: auto;
+      white-space: nowrap;
+      label {
+        flex: 1 1 250px;
+        display: flex;
+        align-items: center;
+        input {
+          margin-right: 0.5em;
+        }
+      }
+    }
   }
-
   .controls .menu-toggle {
     display: none;
     float: left;
-    padding: 3px 6px;
-    margin-right: 32px;
+    padding: 5px 10px;
+    margin-right: 15px;
     border: 1px solid lighten($primary, 40%);
     border-radius: 3px;
     background: transparent;
@@ -363,15 +580,12 @@ $mobile-breakpoint: 700px;
     }
   }
   .search {
-    float: right;
-    margin-left: 10px;
     label {
       margin-top: 5px;
     }
     .controls {
       margin-left: 0;
-    }
-    // Hide the search checkbox for very small screens
+    } // Hide the search checkbox for very small screens
     // Todo: find somewhere to display it - probably requires switching its order in the html
     @media (max-width: 550px) {
       display: none;
@@ -380,7 +594,6 @@ $mobile-breakpoint: 700px;
   .toggle {
     margin-top: 8px;
     float: right;
-
     span {
       font-weight: bold;
     }
@@ -399,17 +612,6 @@ $mobile-breakpoint: 700px;
   }
 }
 
-.email-preview {
-  .ac-wrap {
-    .item {
-      margin: 0.2em 0 0 0.4em;
-    }
-    // input[type=text] {
-    //   margin-left: 0.4em;
-    // }
-  }
-}
-
 .paste-users {
   width: 400px;
   height: 150px;
@@ -422,21 +624,18 @@ $mobile-breakpoint: 700px;
     & > div {
       margin-bottom: 20px;
     }
-
     .d-editor-textarea-wrapper {
       max-width: 60%;
       .d-editor-button-bar {
         overflow: hidden;
       }
     }
-
     input,
     textarea,
     select,
     .select-box {
       width: 350px;
     }
-
     input[type="checkbox"],
     input[type="radio"] {
       width: 20px;
@@ -458,12 +657,13 @@ $mobile-breakpoint: 700px;
 
 .admin-nav {
   width: 18.018%;
-  position: relative;
-
-  // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
+  position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
   @media (max-width: $mobile-breakpoint) {
     position: absolute;
     z-index: z("base") - 1;
+    width: 250px;
+  }
+  @media (max-width: 500px) {
     width: 50%;
   }
 }
@@ -474,8 +674,8 @@ $mobile-breakpoint: 700px;
     z-index: z("base");
     width: 100%;
   }
-  background-color: $secondary;
-  // Todo: set this properly - it needs to be >= the menu height
+
+  background-color: $secondary; // Todo: set this properly - it needs to be >= the menu height
   min-height: 875px;
   margin-left: 0;
   border-left: solid 1px $primary-low;
@@ -488,6 +688,10 @@ $mobile-breakpoint: 700px;
 
 .admin-detail.mobile-open {
   @media (max-width: $mobile-breakpoint) {
+    transition: transform 0.3s ease;
+    @include transform(translateX(250px));
+  }
+  @media (max-width: 500px) {
     transition: transform 0.3s ease;
     @include transform(translateX(50%));
   }
@@ -497,124 +701,8 @@ $mobile-breakpoint: 700px;
   @media (max-width: $mobile-breakpoint) {
     transition: transform 0.3s ease;
     @include transform(translateX(0));
-  }
-}
-
-.settings {
-  margin-left: 10px;
-  margin-right: 10px;
-  .setting {
-    padding-bottom: 20px;
-
-    .setting-label {
-      float: left;
-      width: 17.6576%;
-      margin-right: 12px;
-      @media (max-width: $mobile-breakpoint) {
-        float: none;
-        margin-right: 0;
-        width: 100%;
-        h3 {
-          margin-bottom: 6px;
-        }
-      }
-    }
-    .setting-value {
-      float: left;
-      width: 53%;
-      padding-right: 20px;
-      .category-selector {
-        width: 95%;
-      }
-      @media (max-width: $mobile-breakpoint) {
-        width: 100%;
-        padding-right: 0;
-      }
-      .select-kit {
-        width: 100% !important; // Needs !important to override hard-coded value
-        @media (max-width: $mobile-breakpoint) {
-          width: 100% !important; // !important overrides hard-coded mobile width of 68px
-        }
-      }
-    }
-    .setting-controls {
-      float: left;
-    }
-    .input-setting-string,
-    .input-setting-textarea {
-      box-sizing: border-box;
-      height: 30px;
-      width: 100%;
-      @media (max-width: $mobile-breakpoint) {
-        width: 100%;
-      }
-    }
-    .input-setting-textarea {
-      height: 150px;
-    }
-    .input-setting-list {
-      @media (max-width: $mobile-breakpoint) {
-        width: 100%;
-      }
-      padding: 1px;
-      background-color: $secondary;
-      border: 1px solid $primary-low;
-      border-radius: 3px;
-      transition: border linear 0.2s, box-shadow linear 0.2s;
-
-      li.sortable-placeholder {
-        padding: 3px 5px 3px 18px;
-        margin: 3px 0 3px 5px;
-        position: relative;
-        line-height: $line-height-small;
-        cursor: default;
-        border: 1px dashed #aaa;
-        border-radius: 3px;
-        background-clip: padding-box;
-        -moz-user-select: none;
-        background-color: transparent;
-        width: 3em;
-        height: 1em;
-      }
-    }
-
-    .desc,
-    .validation-error {
-      padding-top: 3px;
-      font-size: $font-down-1;
-      line-height: $line-height-large;
-    }
-
-    .validation-error {
-      color: $danger;
-    }
-
-    .desc {
-      color: dark-light-choose($primary-medium, $secondary-medium);
-    }
-
-    h3 {
-      font-size: $font-0;
-      font-weight: normal;
-    }
-  }
-
-  .setting.overridden {
-    h3 {
-      color: $highlight-high;
-    }
-  }
-
-  .setting.overridden.string {
-    input[type="text"],
-    input[type="password"],
-    textarea {
-      background-color: $highlight-medium;
-    }
-  }
-
-  .warning {
-    color: $danger;
+    margin-left: -10px;
+    padding-left: 10px;
   }
 }
 
@@ -648,627 +736,6 @@ section.details {
   }
 }
 
-.display-row.associations .value {
-  width: 750px;
-  @media (max-width: $mobile-breakpoint) {
-    width: 75%;
-    float: right;
-    text-align: left;
-    margin-left: 0;
-  }
-}
-
-.display-row {
-  display: flex;
-  align-items: center;
-  padding: 10px 5px;
-  &:nth-of-type(1) {
-    border-top: 0;
-  }
-  &.highlight-danger {
-    background-color: $danger-low;
-  }
-  border-top: 1px solid $primary-low;
-  &:before,
-  &:after {
-    display: table;
-    content: "";
-  }
-  &:after {
-    clear: both;
-  }
-  .field {
-    font-weight: bold;
-    width: 17.65765%;
-    float: left;
-    margin-left: 12px;
-    @media (max-width: $mobile-breakpoint) {
-      margin-left: 0;
-      line-height: $line-height-large;
-      margin-top: 5px;
-    }
-  }
-  .value {
-    width: 250px;
-    float: left;
-    margin-left: 12px;
-    @media (max-width: $mobile-breakpoint) {
-      width: 75%;
-      float: right;
-      text-align: left;
-      margin-left: 0;
-    }
-
-    .select-kit {
-      width: inherit;
-    }
-  }
-  .long-value {
-    width: 800px;
-    float: left;
-    margin-left: 12px;
-    font-size: $font-down-1;
-
-    button {
-      margin-left: 10px;
-    }
-  }
-
-  .controls {
-    width: 480px;
-    float: left;
-    margin-left: 12px;
-    @media (max-width: $mobile-breakpoint) {
-      width: 75%;
-      float: right;
-      text-align: left;
-      margin-left: 0;
-    }
-    .btn {
-      margin: 2px 5px 2px 0;
-    }
-  }
-}
-
-// Badges area
-.badges {
-  .content-list ul {
-    margin-bottom: 10px;
-
-    .list-badge {
-      float: right;
-      font-size: $font-down-1;
-      font-weight: normal;
-      padding: 0 6px;
-      color: $secondary;
-      background-color: $tertiary-medium;
-      border-radius: 3px;
-    }
-  }
-
-  .current-badge {
-    margin: 20px;
-
-    p.help {
-      margin: 0;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-      font-size: $font-down-1;
-    }
-  }
-
-  .form-horizontal {
-    .ace-wrapper {
-      position: relative;
-      height: 270px;
-      margin-bottom: 10px;
-
-      .ace_editor {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        border: 1px solid #e9e9e9;
-        border-radius: 3px;
-
-        .ace_gutter {
-          border-right: 1px solid #e9e9e9;
-          background: #f4f4f4;
-        }
-      }
-
-      &[data-disabled="true"] {
-        cursor: not-allowed;
-        opacity: 0.5;
-
-        .ace_editor {
-          pointer-events: none;
-
-          .ace_cursor {
-            visibility: hidden;
-          }
-        }
-      }
-    }
-    .delete-link {
-      margin-left: 15px;
-      margin-top: 5px;
-    }
-    textarea {
-      height: 200px;
-    }
-  }
-
-  .current-badge-actions {
-    margin: 10px;
-    padding: 10px;
-    border-top: 1px solid dark-light-choose($primary-low, $secondary-high);
-  }
-
-  .buttons {
-    float: left;
-    width: 200px;
-    .saving {
-      padding: 5px 0 0 0;
-      margin-left: 10px;
-      width: 80px;
-      color: $primary;
-    }
-  }
-}
-
-.badge-query-preview {
-  .grant-count,
-  .sample,
-  .error-header {
-    margin-left: 10px;
-  }
-
-  .badge-errors {
-    font-size: $font-0;
-    line-height: $line-height-medium;
-    padding: 4px;
-    background-color: $primary-low;
-  }
-
-  .badge-query-plan {
-    font-size: $font-down-1;
-    line-height: $line-height-medium;
-    padding: 4px;
-    background-color: $primary-low;
-  }
-
-  .count-warning {
-    background-color: dark-light-diff(
-      rgba($danger, 0.7),
-      $secondary,
-      50%,
-      -60%
-    );
-    margin: 0 0 7px 0;
-    padding: 10px 20px;
-
-    p {
-      margin: 0;
-    }
-    .heading {
-      color: $danger;
-      font-weight: bold;
-    }
-  }
-}
-
-// Groups area
-.groups {
-  .ac-wrap {
-    width: 100% !important;
-    border-color: dark-light-choose($primary-low-mid, $secondary-high);
-    .item {
-      margin-right: 10px;
-    }
-  }
-  .next,
-  .previous {
-    color: #333 !important;
-    &.disabled {
-      color: #aaa !important;
-    }
-  }
-  .btn.add {
-    margin-top: 7px;
-  }
-  .controls {
-    margin-top: 10px;
-  }
-  .content-list {
-    margin-right: 20px;
-  }
-}
-
-/* Dashboard */
-
-.dashboard-left {
-  float: left;
-  width: 60%;
-}
-
-.dashboard-right {
-  float: right;
-  width: 40%;
-  .dashboard-stats {
-    width: 100%;
-    margin-left: 0;
-  }
-}
-
-.version-checks {
-  display: flex;
-  flex-wrap: wrap;
-
-  .section-title {
-    flex: 1 1 100%;
-    border-bottom: 1px solid $primary-low;
-    margin-bottom: 0.5em;
-  }
-}
-
-.version-check {
-  display: flex;
-  flex: 1 1 50%;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  align-self: flex-start;
-  justify-content: space-between;
-  padding: 10px 0 10px 0;
-
-  .upgrade-header {
-    flex: 1 1 100%;
-    @media screen and (max-width: 650px) {
-      margin: 0;
-    }
-    tr {
-      border: none;
-    }
-    th {
-      background: transparent;
-      text-align: left;
-      padding: 0;
-    }
-  }
-
-  h2 {
-    flex: 1 1 100%;
-  }
-
-  .version-number {
-    font-size: $font-up-2;
-    line-height: $line-height-medium;
-    box-sizing: border-box;
-    font-weight: bold;
-    margin: 0 0 1em 0;
-    padding-right: 20px;
-    flex: 1 1 27%;
-    h3 {
-      flex: 1 0 auto;
-      white-space: nowrap;
-    }
-    h4 {
-      font-size: $font-down-2;
-      margin-bottom: 0;
-    }
-  }
-
-  .version-status {
-    display: flex;
-    align-items: center;
-    margin: 0 0 1em 0;
-    flex: 1 1 24%;
-    box-sizing: border-box;
-    padding-right: 20px;
-    min-width: 250px;
-    @include small-width {
-      max-width: unset;
-    }
-    .face {
-      margin: 0 0.75em 0 0;
-      font-size: $font-up-3;
-    }
-  }
-
-  &.critical .version-notes .normal-note {
-    display: none;
-  }
-  &.normal .version-notes .critical-note {
-    display: none;
-  }
-
-  .fa {
-    font-size: $font-up-4;
-  }
-
-  .up-to-date {
-    color: $success;
-  }
-  .updates-available {
-    color: $danger;
-  }
-  .critical-updates-available {
-    color: $danger;
-  }
-}
-
-.update-nag {
-  .d-icon {
-    font-size: $font-up-3;
-  }
-}
-
-table.api-keys {
-  margin-top: 10px;
-  width: 100%;
-
-  th {
-    text-align: left;
-    padding: 5px;
-  }
-
-  td {
-    padding: 5px;
-  }
-
-  td.key {
-    font-size: $font-down-1;
-  }
-}
-
-.dashboard-stats {
-  box-sizing: border-box;
-  margin-bottom: 30px;
-  flex: 1 1 50%;
-  box-sizing: border-box;
-  &.version-check {
-    margin: 0;
-  }
-  &.detected-problems {
-    border-left: 1px solid $primary-low;
-    margin: 10px 0 0 0;
-    padding-left: 20px;
-  }
-  h4 {
-    font-weight: normal;
-    margin-bottom: 8px;
-  }
-
-  @media screen and (max-width: 650px) {
-    flex: 1 1 100%;
-  }
-
-  table {
-    width: 100%;
-
-    .title {
-      .d-icon {
-        color: $primary;
-      }
-      .d-icon-heart {
-        color: $love;
-      }
-    }
-
-    th {
-      font-weight: normal;
-      text-align: center;
-      background: $primary-low;
-    }
-    th.title {
-      text-align: left;
-    }
-    thead {
-      tr:hover > td {
-        background-color: $secondary;
-      }
-    }
-
-    td.value {
-      font-weight: bold;
-      text-align: center;
-
-      i {
-        display: none;
-      }
-
-      &.high-trending-up,
-      &.trending-up {
-        i.up {
-          color: $success;
-          display: inline;
-        }
-      }
-      &.high-trending-down,
-      &.trending-down {
-        i.down {
-          color: $danger;
-          display: inline;
-        }
-      }
-      &.no-change {
-        i.down {
-          display: inline;
-          visibility: hidden;
-        }
-      }
-    }
-
-    tr.reverse-colors {
-      td.value.high-trending-down i.down,
-      td.value.trending-down i.down {
-        color: $success;
-      }
-      td.value.high-trending-up i.up,
-      td.value.trending-up i.up {
-        color: $danger;
-      }
-    }
-  }
-
-  &.detected-problems {
-    display: flex;
-    margin-bottom: 30px;
-
-    .look-here {
-      margin: 10px 20px;
-
-      .fa {
-        font-size: $font-up-5;
-        color: $danger;
-      }
-    }
-    @media screen and (max-width: 650px) {
-      border-left: none;
-      border-top: 1px solid $primary-low;
-      padding: 20px 0 0 0;
-      .look-here {
-        margin-left: 0;
-      }
-    }
-    h3 {
-      display: flex;
-    }
-
-    .problem-messages {
-      display: flex;
-
-      a {
-        text-decoration: underline;
-      }
-
-      .btn {
-        background: $primary-low;
-      }
-      ul {
-        margin-left: 0;
-        padding-left: 90px;
-        @media screen and (max-width: 650px) {
-          padding-left: 20px;
-        }
-        li {
-          margin-bottom: 10px;
-        }
-      }
-      p.actions {
-        padding-left: 75px;
-        @media screen and (max-width: 650px) {
-          padding-left: 0;
-        }
-      }
-    }
-  }
-
-  &.totals {
-    table {
-      width: auto;
-    }
-    margin-top: 12px;
-    padding-left: 5px;
-    .value {
-      text-align: left;
-      font-weight: bold;
-      padding-left: 8px;
-      padding-right: 30px;
-    }
-  }
-
-  &.trust-levels {
-    margin-bottom: 0;
-    table {
-      margin-bottom: 0;
-    }
-    td.value {
-      width: 45px;
-    }
-  }
-
-  .referred-topic-title {
-    width: 355px;
-    @include medium-width {
-      width: 305px;
-    }
-    @include small-width {
-      width: 265px;
-    }
-  }
-}
-
-.groups-bulk {
-  .control {
-    margin-bottom: 1em;
-  }
-}
-
-.content-editor {
-  min-height: 500px;
-
-  float: left;
-  width: 54.054%;
-  margin-left: 1.8018%;
-
-  p.description {
-    color: $primary;
-  }
-
-  .controls {
-    margin-top: 10px;
-  }
-
-  textarea.plain {
-    width: 98%;
-    height: 200px;
-  }
-
-  .d-editor-input {
-    width: 98%;
-    height: 200px;
-  }
-
-  .ace-wrapper {
-    position: relative;
-    height: 600px;
-    width: 100%;
-  }
-  .ace_editor {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-  }
-}
-
-.hook-event {
-  display: inline-block;
-  width: 40%;
-
-  margin-left: 20px;
-
-  label {
-    display: inline-block;
-  }
-
-  p {
-    margin: 0 0 5px 25px;
-  }
-}
-
-.email-template {
-  input {
-    width: 100%;
-  }
-
-  label {
-    font-weight: bold;
-  }
-}
-
 .row.groups {
   input[type="text"] {
     width: 500px;
@@ -1278,187 +745,17 @@ table.api-keys {
   }
 }
 
-// Logs
-
-.admin-logs-table {
-  input.ember-text-field {
-    padding: 1px 4px;
-  }
-  .btn {
-    padding: 2px 8px;
-    .fa {
-      margin-right: 2px;
-    }
-  }
-}
-
-.screened-emails,
-.screened-urls,
-.screened-ip-addresses {
-  .email,
-  .url,
-  .domain {
-    width: 300px;
-  }
-  .action,
-  .match_count,
-  .last_match_at,
-  .created_at {
-    text-align: center;
-    width: 9.9099%;
-  }
-}
-
-.screened-ip-address-form {
-  margin-left: 6px;
-  .combobox {
-    width: 130px;
-  }
-}
-
-.screened-emails,
-.screened-urls {
-  .ip_address {
-    width: 9.9099%;
-    text-align: center;
-  }
-}
-.screened-ip-addresses {
-  .ip_address {
-    width: 150px;
-    text-align: left;
-    input {
-      width: 130px;
-    }
-  }
-  .col.actions {
-    width: 275px;
-    padding-top: 4px;
-    a {
-      text-decoration: underline;
-    }
-  }
-}
-
-.staff-actions {
-  width: 100%;
-  min-width: 990px;
-  .action {
-    width: 10.81%;
-  }
-  .staff_user {
-    width: 9.009%;
-  }
-  .subject {
-    width: 18.018%;
-  }
-  .created_at {
-    width: 4.5045%;
-  }
-  .context {
-    width: 18.018%;
-  }
-  .created_at {
-    text-align: center;
-  }
-  .details {
-    width: 300px;
-    a {
-      text-decoration: underline;
-    }
-    &.value {
-      height: 70px;
-    }
-  }
-}
-
-.staff-action-logs-controls {
-  margin: 0 0 20px 6px;
-  a.filter {
-    display: inline-block;
-    background-color: dark-light-choose($primary-low-mid, $secondary-high);
-    padding: 3px 10px;
-    border-radius: 3px;
-
-    color: $primary;
-    &:hover {
-      color: $primary;
-      background-color: $primary-low;
-    }
-    .label {
-      font-weight: bold;
-    }
-    i {
-      margin-left: 6px;
-    }
-  }
-}
-
 // Ember.ListView
-
 .ember-list-view {
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
 }
+
 .ember-list-item-view {
   position: absolute;
 }
 
-.staff-actions,
-.screened-emails,
-.screened-urls,
-.screened-ip-addresses,
-.permalinks,
-.search-logs-list,
-.web-hook-events {
-  border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
-
-  .heading-container {
-    width: 100%;
-    background-color: $primary-low;
-  }
-  .col.heading {
-    font-weight: bold;
-    padding: 4px 0;
-  }
-  .col {
-    display: inline-block;
-    padding-top: 6px;
-    vertical-align: top;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .ember-list-item-view {
-    width: 100%;
-    border-top: solid 1px $primary-low;
-  }
-}
-
-.search-logs-list {
-  .col {
-    text-align: center;
-    width: 15%;
-  }
-
-  .col.term {
-    width: 45%;
-    text-align: left;
-  }
-}
-
-.log-details-modal {
-  pre {
-    white-space: pre-wrap;
-    max-height: 250px;
-  }
-
-  .modal-tab {
-    width: 95%;
-  }
-}
-
 .tl3-requirements {
   .d-icon-check {
     color: $success;
@@ -1468,70 +765,6 @@ table.api-keys {
   }
 }
 
-.admin-plugins .col-enabled {
-  width: 20px;
-}
-
-.admin-plugins-official-badge {
-  color: $success;
-}
-
-// Backups
-// --------------------------------------------------
-
-$rollback: #3d9970;
-$rollback-dark: darken($rollback, 10%) !default;
-$rollback-darker: darken($rollback, 20%) !default;
-
-.btn-rollback {
-  color: $secondary;
-  background: $rollback;
-  &:hover {
-    background: $rollback-dark;
-  }
-  &:active {
-    @include linear-gradient($rollback-darker, $rollback-dark);
-  }
-  &[disabled] {
-    background: $rollback;
-  }
-}
-
-.admin-backups-logs {
-  max-height: 500px;
-  overflow: auto;
-}
-
-button.ru {
-  position: relative;
-  min-width: 110px;
-}
-
-.ru-progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background: rgba(0, 175, 0, 0.3);
-}
-
-.is-uploading:hover .ru-progress {
-  background: rgba(200, 0, 0, 0.3);
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.start-backup-modal {
-  .btn {
-    margin: 10px 0 10px 5px;
-  }
-  .btn:first-of-type {
-    margin-left: 10px;
-  }
-}
-
 @media all and (min-width: 320px) and (max-width: 500px) {
   .full-width {
     margin: 0;
@@ -1543,7 +776,6 @@ button.ru {
     width: 100%;
     padding: 0;
     border: none;
-
     .settings .setting {
       .setting-label {
         float: left;
@@ -1559,22 +791,14 @@ button.ru {
       }
     }
   }
-
   .content-editor {
     width: 100%;
   }
-
   div.ac-wrap {
     width: 100% !important;
     box-sizing: border-box;
   }
 
-  .admin-container {
-    h2 {
-      float: left;
-    }
-  }
-
   .dashboard-left,
   .dashboard-right {
     width: 100%;
@@ -1582,7 +806,6 @@ button.ru {
   .dashboard-stats {
     margin: 0;
   }
-
   .badges {
     .current-badge {
       margin: 70px 0 0 0;
@@ -1591,30 +814,12 @@ button.ru {
       padding: 0;
     }
   }
-
   .customize .content-list,
   .customize .current-style {
     width: 100%;
   }
 }
 
-.badge-groupings {
-  list-style: none;
-  margin: 0;
-  padding: 10px 3px;
-  li {
-    padding: 6px 0;
-    width: 600px;
-    border-bottom: 1px solid #dfdfdf;
-  }
-  .actions {
-    float: right;
-    .btn {
-      padding: 3px 6px;
-    }
-  }
-}
-
 tr.not-activated {
   td,
   td a,
@@ -1622,6 +827,7 @@ tr.not-activated {
     color: #bbb;
   }
 }
+
 .details.not-activated {
   .username .value,
   .email .value a,
@@ -1630,56 +836,6 @@ tr.not-activated {
   }
 }
 
-.user-fields {
-  h2 {
-    margin-bottom: 10px;
-  }
-
-  .user-field {
-    padding: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid $primary-low;
-
-    .form-display {
-      width: 25%;
-      display: inline-block;
-      float: left;
-    }
-
-    .form-element,
-    .form-element-desc {
-      float: left;
-      min-height: 30px;
-      padding: 0.25em 0;
-
-      &.input-area {
-        width: 75%;
-        input[type="text"] {
-          width: 50%;
-        }
-      }
-
-      &.label-area {
-        width: 25%;
-        label {
-          margin: 0.5em 1em 0 0;
-          text-align: right;
-          font-weight: bold;
-        }
-      }
-    }
-
-    .controls {
-      float: right;
-      text-align: right;
-    }
-
-    .clearfix {
-      clear: both;
-    }
-  }
-}
-
 .preview {
   margin-top: 5px;
 }
@@ -1695,310 +851,25 @@ table#user-badges {
     border-bottom: 1px solid #ddd;
     padding: 3px;
     margin-right: 10px;
-
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-
     cursor: move;
   }
-
   .values {
     margin-bottom: 10px;
   }
-
   .placeholder {
     border-bottom: 1px solid #ddd;
     padding: 3px;
     margin-right: 10px;
     height: 30px;
   }
-
   input[type="text"] {
     width: 90%;
   }
 }
 
-// Permalinks
-
-.permalinks {
-  .url,
-  .topic,
-  .category,
-  .external_url,
-  .post {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .url {
-    width: 200px;
-  }
-  .topic,
-  .post,
-  .external_url {
-    width: 180px;
-  }
-  .category {
-    width: 140px;
-  }
-  .action {
-    text-align: center;
-    width: 8%;
-  }
-}
-
-.permalink-title {
-  margin-bottom: 10px;
-}
-
-// embedding
-
-.embeddable-hosts {
-  table {
-    margin-bottom: 1em;
-  }
-  margin-bottom: 2em;
-}
-
-.embedding-secondary {
-  h3 {
-    margin: 1em 0;
-  }
-  margin-bottom: 2em;
-
-  .embed-setting {
-    input[type="text"] {
-      width: 50%;
-    }
-    margin: 0.75em 0;
-  }
-
-  p.description {
-    color: dark-light-choose($primary-medium, $secondary-medium);
-    margin-bottom: 1em;
-    max-width: 700px;
-  }
-}
-
-.embedding td input {
-  margin-bottom: 0;
-}
-
-// Emails
-
-.email-list {
-  .filters input {
-    width: 100%;
-  }
-  .time {
-    width: 50px;
-  }
-  .reply-key {
-    display: block;
-    font-size: $font-down-1;
-    color: dark-light-choose($primary-medium, $secondary-high);
-  }
-  .username div {
-    max-width: 180px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .addresses p {
-    margin: 2px 0;
-    max-width: 200px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.incoming-emails {
-  .control-group {
-    margin: 8px 0;
-  }
-  .controls {
-    margin-left: 110px;
-  }
-  p {
-    margin: 5px 10px;
-  }
-  .error-description {
-    color: #919191;
-    font-size: $font-down-1;
-  }
-  hr {
-    margin: 0;
-  }
-  label {
-    font-weight: bold;
-    float: left;
-    width: 100px;
-    text-align: right;
-    margin: 0 10px;
-  }
-  ul {
-    list-style: none;
-    margin: 0 10px;
-  }
-  textarea {
-    width: 95%;
-    height: 150px;
-    font-family: monospace;
-    box-shadow: none;
-  }
-}
-
-.admin-list-item {
-  width: 100%;
-  border-top: 1px solid #e9e9e9;
-  padding: 0.25em 0;
-}
-
-// Webhook
-
-.web-hook-container {
-  > p {
-    padding-bottom: 10px;
-    border-bottom: darken($secondary, 10%) 1px solid;
-  }
-  .filters {
-    margin: 5px 0;
-    padding-bottom: 5px;
-    border-bottom: darken($secondary, 5%) 1px solid;
-  }
-  .instructions {
-    margin-top: 5px;
-  }
-  .subscription-choice {
-    margin-bottom: 10px;
-  }
-}
-
-.web-hook-direction {
-  button {
-    margin-right: 10px;
-  }
-}
-
-.web-hook-events {
-  li {
-    padding: 2px 0;
-  }
-
-  .col {
-    display: inline-block;
-    padding-top: 6px;
-    vertical-align: top;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .col.first {
-    width: 90px;
-  }
-
-  .col.event-id {
-    width: 300px;
-  }
-
-  .col.timestamp {
-    width: 150px;
-  }
-
-  .col.completion {
-    width: 220px;
-  }
-
-  .col.actions {
-    width: 305px;
-    padding-top: 0;
-    a {
-      text-decoration: underline;
-    }
-  }
-
-  .col.heading.actions {
-    padding: 4px 0;
-  }
-
-  .details {
-    display: block;
-    margin-top: 10px;
-  }
-  label {
-    font-size: $font-0;
-  }
-
-  &.content-list {
-    width: 100%;
-  }
-}
-
-.web-hook-events-listing {
-  margin-top: 15px;
-  .alert {
-    margin: 15px 0 0 0;
-  }
-}
-
-.email-preview-digest {
-  .controls {
-    margin-left: 20px;
-    label {
-      display: inline;
-    }
-  }
-
-  .preview-output iframe {
-    width: 100%;
-    height: 600px;
-    border-width: 1px;
-  }
-}
-
-.watched-word-box {
-  display: inline-block;
-  width: 250px;
-  margin-bottom: 1em;
-  float: left;
-}
-
-.watched-words-list {
-  margin-top: 20px;
-}
-.watched-word {
-  display: inline-block;
-  cursor: pointer;
-  .d-icon {
-    margin-right: 0.25em;
-    color: dark-light-diff($primary, $secondary, 50%, -50%);
-  }
-  &:hover .d-icon {
-    color: $primary;
-  }
-}
-.watched-word-form {
-  display: inline-block;
-  .success-message {
-    margin-left: 1em;
-  }
-}
-.watched-words-uploader {
-  float: right;
-  text-align: right;
-  .instructions {
-    font-size: $font-down-1;
-  }
-}
-.watched-words-detail {
-  .about {
-    margin-top: 24px;
-    margin-bottom: 40px;
-  }
-}
-
-// Mobile specific styles
 // Mobile view text-inputs need some padding
 .mobile-view .admin-contents {
   input[type="text"] {
@@ -2006,10 +877,6 @@ table#user-badges {
   }
 }
 
-.mobile-view .admin-controls {
-  padding: 10px 10px 9px 0;
-}
-
 .mobile-view .full-width {
   margin: 0;
 }
@@ -2020,143 +887,24 @@ table#user-badges {
   left: -100%;
 }
 
-.cboxcontainer {
-  display: inline-block;
-  padding: 8px;
-  padding-bottom: 4px;
-
-  * {
-    width: 20px;
-    height: 20px;
-    display: inline-block;
-    border: 1px solid $tertiary;
-  }
-  &.primary {
-    background: $primary;
-  }
-  &.secondary {
-    background: $secondary;
-  }
-}
-
 .inline-edit label {
   display: inline-block;
   margin-right: 20px;
 }
 
-.admin-reports,
-.dashboard-next {
-  &.admin-contents {
-    margin: 0;
-  }
-}
-
-.cbox0 {
-  background: blend-primary-secondary(0%);
-}
-.cbox10 {
-  background: blend-primary-secondary(10%);
-}
-.cbox20 {
-  background: blend-primary-secondary(20%);
-}
-.cbox30 {
-  background: blend-primary-secondary(30%);
-}
-.cbox40 {
-  background: blend-primary-secondary(40%);
-}
-.cbox50 {
-  background: blend-primary-secondary(50%);
-}
-.cbox60 {
-  background: blend-primary-secondary(60%);
-}
-.cbox70 {
-  background: blend-primary-secondary(70%);
-}
-.cbox80 {
-  background: blend-primary-secondary(80%);
-}
-.cbox90 {
-  background: blend-primary-secondary(90%);
-}
-.cbox100 {
-  background: blend-primary-secondary(100%);
-}
-.cbox5 {
-  background: blend-primary-secondary(5%);
-}
-.cbox7 {
-  background: blend-primary-secondary(7%);
-}
-.cbox15 {
-  background: blend-primary-secondary(15%);
-}
-.cbox17 {
-  background: blend-primary-secondary(17%);
-}
-.cbox25 {
-  background: blend-primary-secondary(25%);
-}
-.cbox95 {
-  background: blend-primary-secondary(95%);
-}
-.cbox85 {
-  background: blend-primary-secondary(85%);
-}
-.cbox75 {
-  background: blend-primary-secondary(75%);
-}
-
-.dbox0 {
-  background: dark-light-diff($primary, $secondary, 0%, -0%);
-}
-.dbox10 {
-  background: dark-light-diff($primary, $secondary, 10%, -10%);
-}
-.dbox20 {
-  background: dark-light-diff($primary, $secondary, 20%, -20%);
-}
-.dbox30 {
-  background: dark-light-diff($primary, $secondary, 30%, -30%);
-}
-.dbox40 {
-  background: dark-light-diff($primary, $secondary, 40%, -40%);
-}
-.dbox50 {
-  background: blend-primary-secondary(50%);
-}
-.dbox60 {
-  background: dark-light-diff($primary, $secondary, 60%, -60%);
-}
-.dbox70 {
-  background: dark-light-diff($primary, $secondary, 70%, -70%);
-}
-.dbox80 {
-  background: dark-light-diff($primary, $secondary, 80%, -80%);
-}
-.dbox90 {
-  background: $primary-low;
-}
-.dbox100 {
-  background: dark-light-diff($primary, $secondary, 100%, -100%);
-}
-.dbox5 {
-  background: dark-light-diff($primary, $secondary, 5%, -5%);
-}
-.dbox15 {
-  background: dark-light-diff($primary, $secondary, 15%, -15%);
-}
-.dbox25 {
-  background: dark-light-diff($primary, $secondary, 25%, -25%);
-}
-.dbox95 {
-  background: dark-light-diff($primary, $secondary, 95%, -95%);
-}
-.dbox85 {
-  background: dark-light-diff($primary, $secondary, 85%, -85%);
-}
-.dbox75 {
-  background: dark-light-diff($primary, $secondary, 75%, -75%);
-}
+// Styles for subtabs in admin
+@import "common/admin/dashboard_next";
+@import "common/admin/settings";
+@import "common/admin/users";
+@import "common/admin/moderation_history";
+@import "common/admin/suspend";
+@import "common/admin/badges";
+@import "common/admin/emails";
+@import "common/admin/flagging";
+@import "common/admin/staff_logs";
+@import "common/admin/customize";
+@import "common/admin/api";
+@import "common/admin/backups";
+@import "common/admin/plugins";
+@import "common/admin/admin_reports";
+@import "common/admin/dashboard_previous";
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
new file mode 100644
index 00000000000..a85e294df43
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -0,0 +1,256 @@
+// Styles for admin/api
+
+table.web-hooks.grid {
+  td.delivery-status {
+    div {
+      display: flex;
+      align-items: center;
+    }
+    .d-icon {
+      margin-right: 0.25em;
+    }
+  }
+  td.payload-url {
+    word-wrap: break-word;
+    max-width: 55vw;
+  }
+  td.controls {
+    display: flex;
+    button {
+      margin-left: 0.25em;
+    }
+  }
+  @media screen and (min-width: 550px) {
+    tbody {
+      tr {
+        grid-template-columns: 0.5fr repeat(2, 1fr) 0.5fr;
+      }
+
+      td.controls {
+        text-align: right;
+      }
+    }
+  }
+  @media screen and (max-width: 550px) {
+    tbody {
+      tr {
+        grid-template-columns: 0.5fr 1fr;
+      }
+    }
+    td.controls {
+      grid-row: 2;
+    }
+  }
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    tr {
+      display: -ms-grid;
+      -ms-grid-columns: 0.5fr 1fr 1fr 0.5fr;
+      td {
+        display: -ms-grid;
+        &.delivery-status {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+        }
+        &.payload-url {
+          -ms-grid-row: 1;
+          -ms-grid-column: 2;
+        }
+        &.description {
+          -ms-grid-row: 1;
+          -ms-grid-column: 3;
+        }
+        &.controls {
+          -ms-grid-row: 1;
+          -ms-grid-column: 4;
+        }
+      }
+    }
+  }
+}
+
+// Api keys
+
+table.api-keys {
+  margin-bottom: 0.25em;
+  td.key {
+    font-size: $font-down-1;
+  }
+  @media screen and (max-width: 768px) {
+    tr {
+      grid-template-columns: 0.25fr 1fr 1fr;
+    }
+    td.key {
+      font-size: $font-0;
+      word-wrap: break-word;
+      grid-row: 1;
+      grid-column-start: 1;
+      grid-column-end: -1;
+      max-width: 100%;
+    }
+    td.key-user {
+      grid-row: 2;
+      grid-column-start: 1;
+    }
+    td.key-controls {
+      grid-row: 2;
+      grid-column-end: -1;
+      grid-column-start: 2;
+      text-align: right;
+    }
+  }
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    tr {
+      display: -ms-grid;
+      -ms-grid-columns: 0.25fr 1fr 1fr;
+      -ms-grid-rows: auto auto;
+      td {
+        display: -ms-grid;
+
+        &.key {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        &.key-user {
+          -ms-grid-row: 2;
+          -ms-grid-column: 1;
+        }
+        &.key-controls {
+          -ms-grid-row: 2;
+          -ms-grid-column: 2;
+          -ms-grid-column-span: 2;
+          display: -ms-grid;
+          -ms-grid-columns: 125px 125px;
+          button:first-of-type {
+            -ms-grid-column: 1;
+          }
+          button:last-of-type {
+            -ms-grid-column: 2;
+          }
+        }
+      }
+    }
+  }
+}
+
+// Webhook
+.web-hook-container {
+  .tip.good:empty {
+    display: none;
+  }
+  input {
+    max-width: calc(100% - 10px;);
+  }
+  .select-kit,
+  .select-kit.multi-select {
+    width: 100%;
+    max-width: 360px;
+  }
+
+  .event-selector {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0.5em 0;
+
+    .hook-event {
+      margin-bottom: 0.5em;
+      @media screen and (max-width: 550px) {
+        width: 100%;
+      }
+    }
+  }
+
+  > p {
+    padding-bottom: 10px;
+    border-bottom: darken($secondary, 10%) 1px solid;
+  }
+  .filters {
+    margin: 5px 0;
+    padding-bottom: 5px;
+    border-bottom: darken($secondary, 5%) 1px solid;
+    .filter {
+      margin-bottom: 1em;
+    }
+    label .d-icon {
+      margin-right: 0.25em;
+    }
+  }
+  .instructions {
+    margin-top: 5px;
+  }
+  .subscription-choice {
+    margin-bottom: 10px;
+  }
+}
+
+.web-hook-direction {
+  button {
+    margin-right: 10px;
+  }
+}
+
+.web-hook-events {
+  li {
+    padding: 2px 0;
+  }
+  .col {
+    display: inline-block;
+    padding-top: 6px;
+    vertical-align: top;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .col.first {
+    width: 90px;
+  }
+  .col.event-id {
+    width: 300px;
+  }
+  .col.timestamp {
+    width: 150px;
+  }
+  .col.completion {
+    width: 220px;
+  }
+  .col.actions {
+    width: 305px;
+    padding-top: 0;
+    a {
+      text-decoration: underline;
+    }
+  }
+  .col.heading.actions {
+    padding: 4px 0;
+  }
+  .details {
+    display: block;
+    margin-top: 10px;
+  }
+  label {
+    font-size: $font-0;
+  }
+  &.content-list {
+    width: 100%;
+  }
+}
+
+.web-hook-events-listing {
+  margin-top: 15px;
+  .alert {
+    margin: 15px 0 0 0;
+  }
+}
+
+.hook-event {
+  display: inline-block;
+  width: 40%;
+  margin-left: 20px;
+  label {
+    display: inline-block;
+  }
+  p {
+    margin: 0 0 5px 25px;
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
new file mode 100644
index 00000000000..2d26a847b59
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -0,0 +1,113 @@
+// Styles for /admin/backups
+
+$rollback: #3d9970;
+$rollback-dark: darken($rollback, 10%) !default;
+$rollback-darker: darken($rollback, 20%) !default;
+.btn-rollback {
+  color: $secondary;
+  background: $rollback;
+  &:hover {
+    background: $rollback-dark;
+  }
+  &:active {
+    @include linear-gradient($rollback-darker, $rollback-dark);
+  }
+  &[disabled] {
+    background: $rollback;
+  }
+}
+
+.backups {
+  .admin-controls {
+    .backup-operations {
+      margin-left: auto;
+      button {
+        display: flex;
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+.admin-backups {
+  table {
+    @media screen and (min-width: 550px) {
+      td.backup-filename {
+        grid-column-start: 1;
+        grid-column-end: 6;
+      }
+      td.backup-size {
+        grid-column-end: -1;
+        text-align: right;
+      }
+      td.backup-controls {
+        margin-top: 0.25em;
+        grid-row: 2;
+        grid-column-start: 1;
+        grid-column-end: 5;
+        text-align: right;
+        .btn {
+          margin-top: 0.25em;
+        }
+      }
+    }
+    @media screen and (max-width: 550px) {
+      td.backup-filename {
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+      td.backup-size {
+        text-align: right;
+      }
+      td.backup-controls {
+        grid-column-start: 1;
+        grid-column-end: 4;
+      }
+    }
+    @media screen and (max-width: 768px) {
+      td.backup-controls {
+        text-align: left;
+      }
+    }
+  }
+}
+
+.admin-backups-logs {
+  max-height: 500px;
+  overflow: auto;
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    max-height: 65vh;
+  }
+}
+
+button.ru {
+  position: relative;
+  min-width: 110px;
+}
+
+.ru-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: rgba(0, 175, 0, 0.3);
+}
+
+.is-uploading:hover .ru-progress {
+  background: rgba(200, 0, 0, 0.3);
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.start-backup-modal {
+  .btn {
+    margin: 10px 0 10px 5px;
+  }
+  .btn:first-of-type {
+    margin-left: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
new file mode 100644
index 00000000000..ebb6fec0175
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -0,0 +1,131 @@
+// Styles for admin/badges
+
+// Badges area
+.badges {
+  .content-list ul {
+    margin-bottom: 10px;
+    .list-badge {
+      float: right;
+      font-size: $font-down-1;
+      font-weight: normal;
+      padding: 0 6px;
+      color: $secondary;
+      background-color: $tertiary-medium;
+      border-radius: 3px;
+    }
+  }
+  .current-badge {
+    margin: 20px;
+    p.help {
+      margin: 0;
+      color: dark-light-choose($primary-medium, $secondary-medium);
+      font-size: $font-down-1;
+    }
+  }
+  .form-horizontal {
+    .ace-wrapper {
+      position: relative;
+      height: 270px;
+      margin-bottom: 10px;
+      .ace_editor {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        border: 1px solid #e9e9e9;
+        border-radius: 3px;
+        .ace_gutter {
+          border-right: 1px solid #e9e9e9;
+          background: #f4f4f4;
+        }
+      }
+      &[data-disabled="true"] {
+        cursor: not-allowed;
+        opacity: 0.5;
+        .ace_editor {
+          pointer-events: none;
+          .ace_cursor {
+            visibility: hidden;
+          }
+        }
+      }
+    }
+    .delete-link {
+      margin-left: 15px;
+      margin-top: 5px;
+    }
+    textarea {
+      height: 200px;
+    }
+  }
+  .current-badge-actions {
+    margin: 10px;
+    padding: 10px;
+    border-top: 1px solid dark-light-choose($primary-low, $secondary-high);
+  }
+  .buttons {
+    float: left;
+    width: 200px;
+    .saving {
+      padding: 5px 0 0 0;
+      margin-left: 10px;
+      width: 80px;
+      color: $primary;
+    }
+  }
+}
+
+.badge-query-preview {
+  .grant-count,
+  .sample,
+  .error-header {
+    margin-left: 10px;
+  }
+  .badge-errors {
+    font-size: $font-0;
+    line-height: $line-height-medium;
+    padding: 4px;
+    background-color: $primary-low;
+  }
+  .badge-query-plan {
+    font-size: $font-down-1;
+    line-height: $line-height-medium;
+    padding: 4px;
+    background-color: $primary-low;
+  }
+  .count-warning {
+    background-color: dark-light-diff(
+      rgba($danger, 0.7),
+      $secondary,
+      50%,
+      -60%
+    );
+    margin: 0 0 7px 0;
+    padding: 10px 20px;
+    p {
+      margin: 0;
+    }
+    .heading {
+      color: $danger;
+      font-weight: bold;
+    }
+  }
+}
+
+.badge-groupings {
+  list-style: none;
+  margin: 0;
+  padding: 10px 3px;
+  li {
+    padding: 6px 0;
+    width: 600px;
+    border-bottom: 1px solid #dfdfdf;
+  }
+  .actions {
+    float: right;
+    .btn {
+      padding: 3px 6px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index c272b1d1c17..b4fc2158aa4 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -1,4 +1,49 @@
 // Customise area
+
+// email templates
+
+.content-editor {
+  min-height: 500px;
+  float: left;
+  width: 54.054%;
+  margin-left: 1.8018%;
+  p.description {
+    color: $primary;
+  }
+  .controls {
+    margin-top: 10px;
+  }
+  textarea.plain {
+    width: 98%;
+    height: 200px;
+  }
+  .d-editor-input {
+    width: 98%;
+    height: 200px;
+  }
+  .ace-wrapper {
+    position: relative;
+    height: 600px;
+    width: 100%;
+  }
+  .ace_editor {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+}
+
+.email-template {
+  input {
+    width: 100%;
+  }
+  label {
+    font-weight: bold;
+  }
+}
+
 .admin-customize {
   h1 {
     margin-bottom: 10px;
@@ -275,3 +320,149 @@
     }
   }
 }
+
+// Permalinks
+.permalinks {
+  .url,
+  .topic,
+  .category,
+  .external_url,
+  .post {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.permalink-title {
+  margin-bottom: 10px;
+}
+
+// embedding
+.embeddable-hosts {
+  margin-bottom: 2em;
+  table.grid {
+    margin-bottom: 1em;
+    tr td {
+      word-wrap: break-word;
+      max-width: 25vw;
+      align-self: start;
+    }
+    td.controls {
+      min-width: 6em;
+    }
+    .select-kit.combo-box.category-chooser {
+      width: calc(100% - 10px);
+    }
+  }
+  @media screen and (max-width: 880px) {
+    table.grid {
+      thead {
+        display: none;
+      }
+      div.label {
+        display: block;
+        font-size: $font-down-1;
+        color: $primary-medium;
+      }
+      td.controls,
+      td.editing-controls {
+        align-self: end;
+      }
+      tr {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+    }
+  }
+
+  @media screen and (max-width: 580px) {
+    table.grid {
+      tr td.editing-input {
+        grid-column-start: 1;
+        grid-column-end: 4;
+        max-width: 100%;
+        input {
+          width: calc(100% - 20px);
+        }
+      }
+      td.editing-controls {
+        margin-top: 1em;
+        max-width: 100%;
+      }
+    }
+  }
+
+  @media screen and (max-width: 350px) {
+    table.grid tr {
+      grid-template-columns: repeat(2, 1fr);
+      td.controls {
+        text-align: left;
+      }
+    }
+  }
+}
+
+.embedding-secondary {
+  h3 {
+    margin: 1em 0;
+  }
+  margin-bottom: 2em;
+  .embed-setting {
+    input[type="text"] {
+      width: 50%;
+    }
+    margin: 0.75em 0;
+  }
+  p.description {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+    margin-bottom: 1em;
+    max-width: 700px;
+  }
+}
+
+.embedding td input {
+  margin-bottom: 0;
+}
+
+.user-fields {
+  h2 {
+    margin-bottom: 10px;
+  }
+  .user-field {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid $primary-low;
+    .form-display {
+      width: 25%;
+      display: inline-block;
+      float: left;
+    }
+    .form-element,
+    .form-element-desc {
+      float: left;
+      min-height: 30px;
+      padding: 0.25em 0;
+      &.input-area {
+        width: 75%;
+        input[type="text"] {
+          width: 50%;
+        }
+      }
+      &.label-area {
+        width: 25%;
+        label {
+          margin: 0.5em 1em 0 0;
+          text-align: right;
+          font-weight: bold;
+        }
+      }
+    }
+    .controls {
+      float: right;
+      text-align: right;
+    }
+    .clearfix {
+      clear: both;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index c71cd97e3f6..17529aef194 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -1,3 +1,10 @@
+.admin-reports,
+.dashboard-next {
+  &.admin-contents {
+    margin: 10px 0 0 0;
+  }
+}
+
 .dashboard-next {
   .section-top {
     margin-bottom: 1em;
diff --git a/app/assets/stylesheets/common/admin/dashboard_previous.scss b/app/assets/stylesheets/common/admin/dashboard_previous.scss
new file mode 100644
index 00000000000..b31e1616384
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/dashboard_previous.scss
@@ -0,0 +1,270 @@
+// Styles for admin/dashboard-old
+
+.dashboard-left {
+  float: left;
+  width: 60%;
+}
+
+.dashboard-right {
+  float: right;
+  width: 40%;
+  .dashboard-stats {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+.version-checks {
+  display: flex;
+  flex-wrap: wrap;
+  .section-title {
+    flex: 1 1 100%;
+    border-bottom: 1px solid $primary-low;
+    margin-bottom: 0.5em;
+  }
+}
+
+.version-check {
+  display: flex;
+  flex: 1 1 50%;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-self: flex-start;
+  justify-content: space-between;
+  padding: 10px 0 10px 0;
+  .upgrade-header {
+    flex: 1 1 100%;
+    @media screen and (max-width: 650px) {
+      margin: 0;
+    }
+    tr {
+      border: none;
+    }
+    th {
+      background: transparent;
+      text-align: left;
+      padding: 0;
+    }
+  }
+  h2 {
+    flex: 1 1 100%;
+  }
+  .version-number {
+    font-size: $font-up-2;
+    line-height: $line-height-medium;
+    box-sizing: border-box;
+    font-weight: bold;
+    margin: 0 0 1em 0;
+    padding-right: 20px;
+    flex: 1 1 27%;
+    h3 {
+      flex: 1 0 auto;
+      white-space: nowrap;
+    }
+    h4 {
+      font-size: $font-down-2;
+      margin-bottom: 0;
+    }
+  }
+  .version-status {
+    display: flex;
+    align-items: center;
+    margin: 0 0 1em 0;
+    flex: 1 1 24%;
+    box-sizing: border-box;
+    padding-right: 20px;
+    min-width: 250px;
+    @include small-width {
+      max-width: unset;
+    }
+    .face {
+      margin: 0 0.75em 0 0;
+      font-size: $font-up-3;
+    }
+  }
+  &.critical .version-notes .normal-note {
+    display: none;
+  }
+  &.normal .version-notes .critical-note {
+    display: none;
+  }
+  .fa {
+    font-size: $font-up-4;
+  }
+  .up-to-date {
+    color: $success;
+  }
+  .updates-available {
+    color: $danger;
+  }
+  .critical-updates-available {
+    color: $danger;
+  }
+}
+
+.update-nag {
+  .d-icon {
+    font-size: $font-up-3;
+  }
+}
+
+.dashboard-stats {
+  box-sizing: border-box;
+  margin-bottom: 30px;
+  flex: 1 1 50%;
+  box-sizing: border-box;
+  &.version-check {
+    margin: 0;
+  }
+  &.detected-problems {
+    border-left: 1px solid $primary-low;
+    margin: 10px 0 0 0;
+    padding-left: 20px;
+  }
+  h4 {
+    font-weight: normal;
+    margin-bottom: 8px;
+  }
+  @media screen and (max-width: 650px) {
+    flex: 1 1 100%;
+  }
+  table {
+    width: 100%;
+    .title {
+      .d-icon {
+        color: $primary;
+      }
+      .d-icon-heart {
+        color: $love;
+      }
+    }
+    th {
+      font-weight: normal;
+      text-align: center;
+      background: $primary-low;
+    }
+    th.title {
+      text-align: left;
+    }
+    thead {
+      tr:hover > td {
+        background-color: $secondary;
+      }
+    }
+    td.value {
+      font-weight: bold;
+      text-align: center;
+      i {
+        display: none;
+      }
+      &.high-trending-up,
+      &.trending-up {
+        i.up {
+          color: $success;
+          display: inline;
+        }
+      }
+      &.high-trending-down,
+      &.trending-down {
+        i.down {
+          color: $danger;
+          display: inline;
+        }
+      }
+      &.no-change {
+        i.down {
+          display: inline;
+          visibility: hidden;
+        }
+      }
+    }
+    tr.reverse-colors {
+      td.value.high-trending-down i.down,
+      td.value.trending-down i.down {
+        color: $success;
+      }
+      td.value.high-trending-up i.up,
+      td.value.trending-up i.up {
+        color: $danger;
+      }
+    }
+  }
+  &.detected-problems {
+    display: flex;
+    margin-bottom: 30px;
+    .look-here {
+      margin: 10px 20px;
+      .fa {
+        font-size: $font-up-5;
+        color: $danger;
+      }
+    }
+    @media screen and (max-width: 650px) {
+      border-left: none;
+      border-top: 1px solid $primary-low;
+      padding: 20px 0 0 0;
+      .look-here {
+        margin-left: 0;
+      }
+    }
+    h3 {
+      display: flex;
+    }
+    .problem-messages {
+      display: flex;
+      a {
+        text-decoration: underline;
+      }
+      .btn {
+        background: $primary-low;
+      }
+      ul {
+        margin-left: 0;
+        padding-left: 90px;
+        @media screen and (max-width: 650px) {
+          padding-left: 20px;
+        }
+        li {
+          margin-bottom: 10px;
+        }
+      }
+      p.actions {
+        padding-left: 75px;
+        @media screen and (max-width: 650px) {
+          padding-left: 0;
+        }
+      }
+    }
+  }
+  &.totals {
+    table {
+      width: auto;
+    }
+    margin-top: 12px;
+    padding-left: 5px;
+    .value {
+      text-align: left;
+      font-weight: bold;
+      padding-left: 8px;
+      padding-right: 30px;
+    }
+  }
+  &.trust-levels {
+    margin-bottom: 0;
+    table {
+      margin-bottom: 0;
+    }
+    td.value {
+      width: 45px;
+    }
+  }
+  .referred-topic-title {
+    width: 355px;
+    @include medium-width {
+      width: 305px;
+    }
+    @include small-width {
+      width: 265px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/emails.scss b/app/assets/stylesheets/common/admin/emails.scss
new file mode 100644
index 00000000000..2267abbc698
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/emails.scss
@@ -0,0 +1,93 @@
+// Styles for admin/emails
+
+.email-preview {
+  .ac-wrap {
+    .item {
+      margin: 0.2em 0 0 0.4em;
+    }
+  }
+}
+
+// Emails
+.email-list {
+  .filters input {
+    width: 100%;
+  }
+  .time {
+    width: 50px;
+  }
+  .reply-key {
+    display: block;
+    font-size: $font-down-1;
+    color: dark-light-choose($primary-medium, $secondary-high);
+  }
+  .username div {
+    max-width: 180px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .addresses p {
+    margin: 2px 0;
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+.incoming-emails {
+  .control-group {
+    margin: 8px 0;
+  }
+  .controls {
+    margin-left: 110px;
+  }
+  p {
+    margin: 5px 10px;
+  }
+  .error-description {
+    color: #919191;
+    font-size: $font-down-1;
+  }
+  hr {
+    margin: 0;
+  }
+  label {
+    font-weight: bold;
+    float: left;
+    width: 100px;
+    text-align: right;
+    margin: 0 10px;
+  }
+  ul {
+    list-style: none;
+    margin: 0 10px;
+  }
+  textarea {
+    width: 95%;
+    height: 150px;
+    font-family: monospace;
+    box-shadow: none;
+  }
+}
+
+.admin-list-item {
+  width: 100%;
+  border-top: 1px solid #e9e9e9;
+  padding: 0.25em 0;
+}
+
+.email-preview-digest {
+  .controls {
+    margin-left: 20px;
+    label {
+      display: inline;
+    }
+  }
+  .preview-output iframe {
+    width: 100%;
+    height: 600px;
+    border-width: 1px;
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/flagging.scss b/app/assets/stylesheets/common/admin/flagging.scss
index 4010a7e9c4c..e3ad1b0db8b 100644
--- a/app/assets/stylesheets/common/admin/flagging.scss
+++ b/app/assets/stylesheets/common/admin/flagging.scss
@@ -20,8 +20,8 @@
     display: flex;
 
     .flagged-post-avatar {
-      margin-right: 1em;
       position: relative;
+      margin-right: 10px;
 
       img.avatar {
         min-width: 45px;
@@ -41,7 +41,7 @@
     }
 
     .flagged-post-contents {
-      width: 100%;
+      width: calc(100% - 55px);
       word-wrap: break-word;
 
       .flagged-post-user-details {
@@ -65,7 +65,6 @@
       p:last-child {
         margin-bottom: 0;
       }
-      margin-right: 1em;
     }
   }
 
@@ -115,7 +114,7 @@
   }
 
   .flag-conversation {
-    padding: 1em;
+    padding: 1em 0;
 
     .reply-conversation {
       margin-left: 32px;
@@ -191,16 +190,26 @@
       white-space: nowrap;
     }
   }
+  @media screen and (max-width: 768px) {
+    td.topic-title {
+      width: auto;
+      max-width: 600px;
+      a {
+        width: auto;
+        white-space: unset;
+      }
+    }
+  }
 }
 
 .flagged-topic-details {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 2em;
 }
 
 .mobile-view {
   .flagged-posts {
+    overflow: hidden;
     .flagged-post {
       .flag-user-lists {
         display: block;
@@ -214,3 +223,74 @@
     padding-right: 0.25em;
   }
 }
+
+.admin-contents table.grid {
+  @media screen and (max-width: 767px) {
+    tr.flagged-topic {
+      grid-template-columns: 0.25fr 1fr 1fr;
+      td.topic-title {
+        grid-column-start: 2;
+        grid-column-end: -2;
+        min-width: 0;
+        align-self: start;
+      }
+      td.last-flagged {
+        grid-row: 1;
+        grid-column-end: -1;
+        text-align: right;
+        align-self: start;
+      }
+      td.flag-details {
+        grid-row: 2;
+        grid-column-end: -1;
+        text-align: right;
+      }
+      td.flagged-topic-users {
+        grid-row: 1;
+        grid-column-start: 1;
+        max-width: 60px;
+        align-self: start;
+        a {
+          display: inline-block;
+          margin: 0 0.25em 0.25em 0;
+        }
+      }
+      td.flag-counts {
+        grid-row: 2;
+        grid-column-start: 2;
+      }
+    }
+  }
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    tr.flagged-topic {
+      display: -ms-grid;
+      -ms-grid-columns: 0.25fr 1fr 1fr;
+      -ms-grid-rows: auto auto;
+      td {
+        display: -ms-grid;
+        &.flagged-topic-users {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 1;
+        }
+        &.topic-title {
+          -ms-grid-row: 1;
+          -ms-grid-column: 2;
+        }
+        &.last-flagged {
+          -ms-grid-row: 1;
+          -ms-grid-column: 3;
+        }
+        &.flag-counts {
+          -ms-grid-row: 2;
+          -ms-grid-column: 2;
+        }
+        &.flag-details {
+          -ms-grid-row: 2;
+          -ms-grid-column: 3;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
new file mode 100644
index 00000000000..a92c787bc18
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -0,0 +1,45 @@
+// Styles for /admin/plugins
+
+.admin-contents.admin-plugins {
+  .controls {
+    .settings-button {
+      margin-left: auto;
+    }
+  }
+  .grid {
+    @media screen and (min-width: 550px) {
+      tr {
+        grid-template-columns: 0.25fr repeat(4, 1fr);
+      }
+    }
+    @media screen and (max-width: 550px) {
+      tr {
+        grid-template-columns: 0.25fr repeat(3, 1fr);
+      }
+      td.plugin-name {
+        grid-column-start: 2;
+        grid-column-end: -1;
+      }
+      td.settings {
+        grid-row: 2;
+        grid-column-start: 4;
+        text-align: right;
+        button {
+          display: flex;
+        }
+      }
+      td.version {
+        grid-row: 2;
+        grid-column-start: 3;
+      }
+      td.col-enabled {
+        grid-row: 2;
+        grid-column-start: 2;
+      }
+    }
+  }
+}
+
+.admin-plugins-official-badge {
+  color: $success;
+}
diff --git a/app/assets/stylesheets/common/admin/settings.scss b/app/assets/stylesheets/common/admin/settings.scss
new file mode 100644
index 00000000000..90df1c5e43d
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/settings.scss
@@ -0,0 +1,108 @@
+// styles for admin/settings
+
+.settings {
+  .setting {
+    padding-bottom: 20px;
+    .setting-label {
+      float: left;
+      width: 17.6576%;
+      margin-right: 12px;
+      @media (max-width: $mobile-breakpoint) {
+        float: none;
+        margin-right: 0;
+        width: 100%;
+        h3 {
+          margin-bottom: 6px;
+        }
+      }
+    }
+    .setting-value {
+      float: left;
+      width: 53%;
+      padding-right: 20px;
+      .category-selector {
+        width: 95%;
+      }
+      @media (max-width: $mobile-breakpoint) {
+        width: 100%;
+        padding-right: 0;
+      }
+      .select-kit {
+        width: 100% !important; // Needs !important to override hard-coded value
+        @media (max-width: $mobile-breakpoint) {
+          width: 100% !important; // !important overrides hard-coded mobile width of 68px
+        }
+      }
+    }
+    .setting-controls {
+      float: left;
+    }
+    .input-setting-string,
+    .input-setting-textarea {
+      box-sizing: border-box;
+      height: 30px;
+      width: 100%;
+      @media (max-width: $mobile-breakpoint) {
+        width: 100%;
+      }
+    }
+    .input-setting-textarea {
+      height: 150px;
+    }
+    .input-setting-list {
+      @media (max-width: $mobile-breakpoint) {
+        width: 100%;
+      }
+      padding: 1px;
+      background-color: $secondary;
+      border: 1px solid $primary-low;
+      border-radius: 3px;
+      transition: border linear 0.2s, box-shadow linear 0.2s;
+      li.sortable-placeholder {
+        padding: 3px 5px 3px 18px;
+        margin: 3px 0 3px 5px;
+        position: relative;
+        line-height: $line-height-small;
+        cursor: default;
+        border: 1px dashed #aaa;
+        border-radius: 3px;
+        background-clip: padding-box;
+        -moz-user-select: none;
+        background-color: transparent;
+        width: 3em;
+        height: 1em;
+      }
+    }
+    .desc,
+    .validation-error {
+      padding-top: 3px;
+      font-size: $font-down-1;
+      line-height: $line-height-large;
+    }
+    .validation-error {
+      color: $danger;
+    }
+    .desc {
+      color: dark-light-choose($primary-medium, $secondary-medium);
+    }
+    h3 {
+      font-size: $font-0;
+      font-weight: normal;
+    }
+  }
+  .setting.overridden {
+    h3 {
+      color: $highlight-high;
+    }
+  }
+  .setting.overridden.string {
+    input[type="text"],
+    input[type="password"],
+    textarea {
+      background-color: $highlight-medium;
+    }
+  }
+  .warning {
+    color: $danger;
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
new file mode 100644
index 00000000000..5dc425fa4d2
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -0,0 +1,465 @@
+// Styles for /admin/logs
+
+.screened-emails,
+.screened-urls,
+.web-hook-events {
+  border-bottom: dotted 1px dark-light-choose($primary-low-mid, $secondary);
+  .heading-container {
+    width: 100%;
+    background-color: $primary-low;
+  }
+  .col.heading {
+    font-weight: bold;
+    padding: 4px 0;
+  }
+  .col {
+    display: inline-block;
+    padding-top: 6px;
+    vertical-align: top;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .ember-list-item-view {
+    width: 100%;
+    border-top: solid 1px $primary-low;
+  }
+}
+
+.log-details-modal {
+  pre {
+    white-space: pre-wrap;
+    max-height: 250px;
+  }
+  .modal-tab {
+    width: 95%;
+  }
+}
+
+.staff-actions {
+  width: 100%;
+  word-wrap: break-word;
+  @media screen and (min-width: 550px) and (max-width: 767px) {
+    table.staff-logs tr {
+      display: grid;
+      grid-template-rows: auto auto;
+      grid-template-columns: repeat(4, 1fr);
+      td {
+        align-self: start;
+        padding: 2px 4px;
+      }
+    }
+
+    td.created-at {
+      grid-column-start: -1;
+    }
+    td.subject {
+      grid-row: 2;
+      grid-column-start: 2;
+      div.subject {
+        display: flex;
+        a {
+          word-wrap: break-word;
+          min-width: 25px;
+        }
+      }
+    }
+
+    td.details {
+      grid-row: 1;
+      grid-row-start: 1;
+      grid-row-end: 3;
+      grid-column-start: 3;
+    }
+
+    td.context {
+      grid-row-start: 1;
+      grid-row-end: 3;
+      grid-column-start: 4;
+    }
+  }
+
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    table.staff-logs tr {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr 1fr 0.5fr;
+      -ms-grid-rows: auto auto;
+      td {
+        display: -ms-grid;
+        &.staff-users {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 2;
+        }
+        &.created-at {
+          -ms-grid-row: 1;
+          -ms-grid-column: 4;
+        }
+        &.action {
+          -ms-grid-row: 2;
+          -ms-grid-column: 1;
+        }
+        &.subject {
+          -ms-grid-row: 2;
+          -ms-grid-column: 2;
+          -ms-grid-column-span: 3;
+        }
+        &.details {
+          -ms-grid-row: 3;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        &.context {
+          -ms-grid-row: 4;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 550px) {
+    table.staff-logs tr {
+      grid-template-columns: 1fr 1fr 0.5fr;
+      td.staff-users {
+        grid-column-start: 1;
+        grid-column-end: 3;
+      }
+      td.created-at {
+        grid-row: 1;
+        grid-column-start: -1;
+        text-align: right;
+      }
+      td.action {
+        grid-row: 2;
+        grid-column-start: 1;
+      }
+      td.subject {
+        grid-row: 2;
+        grid-column-start: 2;
+        grid-column-end: 5;
+        max-width: 60vw;
+      }
+      td.details,
+      td.context {
+        max-width: unset;
+      }
+      td.details {
+        grid-row: 3;
+        grid-column-start: 1;
+        grid-column-end: 5;
+        padding: 0.25em 0;
+        max-width: 90vw;
+      }
+      td.context {
+        grid-row: 4;
+        grid-column-start: 1;
+        grid-column-end: 5;
+      }
+    }
+  }
+
+  .staff-user {
+    font-weight: bold;
+    display: flex;
+    a:first-of-type {
+      margin-right: 0.25em;
+    }
+  }
+  .created_at {
+    text-align: center;
+  }
+  td.subject,
+  td.details {
+    max-width: 20vw;
+  }
+}
+
+.staff-action-logs-controls {
+  display: flex;
+  align-items: center;
+  .select-kit {
+    margin: 0 0.5em;
+  }
+  button {
+    margin-left: auto;
+    display: flex;
+  }
+  margin: 0 0 1em 0;
+  a.filter {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 0.25em;
+    background-color: $primary-low;
+    padding: 3px 10px;
+    color: $primary;
+    &:hover {
+      color: $primary;
+      background-color: $primary-low;
+    }
+    .label {
+      font-weight: bold;
+    }
+    i {
+      margin-left: 6px;
+    }
+  }
+}
+
+.admin-logs-table {
+  input.ember-text-field {
+    padding: 1px 4px;
+  }
+  .btn {
+    padding: 2px 8px;
+    .fa {
+      margin-right: 2px;
+    }
+  }
+}
+
+.screened-email-export {
+  display: block;
+}
+
+.screened-emails,
+.screened-urls {
+  .email,
+  .url,
+  .domain {
+    width: 300px;
+  }
+  .action,
+  .match_count,
+  .last_match_at,
+  .created_at {
+    text-align: center;
+    width: 9.9099%;
+  }
+}
+
+.screened-ip-address-form {
+  margin-left: 6px;
+  .combobox {
+    width: 130px;
+  }
+}
+
+.screened-emails,
+.screened-urls {
+  .ip_address {
+    width: 9.9099%;
+    text-align: center;
+  }
+}
+
+.screened-ip-controls {
+  display: flex;
+  flex-wrap: wrap;
+  input {
+    flex: 1 1 auto;
+    margin: 0 0.25em 0.25em;
+  }
+  b {
+    margin: 0 0.25em;
+  }
+  .select-kit {
+    margin: 0 0.25em 0.25em 0.25em;
+    flex: 1 1 auto;
+  }
+  .filter-screened-ip-address,
+  .screened-ip-address-form {
+    margin: 0 -0.25em 1em;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+  }
+  @media screen and (min-width: 800px) {
+    .screened-ip-address-form {
+      margin-left: auto;
+    }
+  }
+  button {
+    display: flex;
+    white-space: nowrap;
+    margin: 0 0.25em 0.25em;
+  }
+}
+
+table.screened-ip-addresses {
+  td.ip_address {
+    min-width: 150px;
+    word-wrap: break-word;
+    input {
+      width: 80%;
+    }
+  }
+  td.action {
+    display: flex;
+    align-items: baseline;
+    .d-icon-check {
+      color: $success;
+    }
+    .d-icon-ban {
+      color: $danger;
+    }
+    .d-icon {
+      margin-right: 0.25em;
+    }
+  }
+}
+
+@media screen and (min-width: 550px) {
+  table.screened-ip-addresses tr {
+    grid-template-columns: repeat(5, 1fr) auto;
+  }
+}
+
+@media screen and (max-width: 549px) {
+  table.screened-ip-addresses tr {
+    td.actions {
+      grid-row: 3;
+      grid-column-start: -1;
+      grid-column-end: -4;
+      text-align: right;
+      margin-top: 0.5em;
+    }
+    td.created_at {
+      grid-row: 1;
+      grid-column-start: 3;
+      text-align: right;
+    }
+    td.last_match_at {
+      grid-row: 2;
+      grid-column-start: 3;
+      text-align: right;
+    }
+    td.match_count {
+      grid-row: 2;
+      grid-column-start: 2;
+    }
+  }
+}
+
+// Watched words
+
+.watched-word-box {
+  display: inline-block;
+  width: 250px;
+  margin-bottom: 1em;
+  float: left;
+}
+
+.watched-word-controls {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1em;
+}
+
+.watched-words-list {
+  margin-top: 20px;
+}
+
+.watched-word {
+  display: inline-block;
+  cursor: pointer;
+  .d-icon {
+    margin-right: 0.25em;
+    color: dark-light-diff($primary, $secondary, 50%, -50%);
+  }
+  &:hover .d-icon {
+    color: $primary;
+  }
+}
+
+.watched-word-form {
+  display: inline-block;
+  .success-message {
+    margin-left: 1em;
+  }
+}
+
+.watched-words-uploader {
+  margin-left: auto;
+  @media screen and (max-width: 500px) {
+    flex: 1 1 100%;
+    margin-top: 0.5em;
+  }
+  .instructions {
+    font-size: $font-down-1;
+  }
+}
+
+.watched-words-detail {
+  .about {
+    margin: 0.5em 0 1em 0;
+  }
+}
+
+// Search logs
+
+table.search-logs-list {
+  td.term {
+    width: 60%;
+    word-wrap: break-word;
+    @media screen and (max-width: 767px) {
+      width: 100%;
+    }
+  }
+  th:not(.term),
+  td:not(.term) {
+    text-align: center;
+  }
+  @media screen and (min-width: 550px) {
+    tr {
+      td.term {
+        grid-column-start: 1;
+        grid-column: span 3;
+      }
+    }
+  }
+  @media screen and (max-width: 550px) {
+    tr {
+      td.term {
+        grid-column-start: 1;
+        grid-column-end: 4;
+      }
+      th:not(.term),
+      td:not(.term) {
+        text-align: left;
+      }
+    }
+  }
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    tr {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr 1fr;
+      -ms-grid-rows: auto 2em;
+      td {
+        display: -ms-grid;
+        -ms-grid-rows: auto auto;
+        .label {
+          -ms-grid-row: 2;
+        }
+        &.term {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        &.col:nth-of-type(2) {
+          -ms-grid-row: 2;
+          -ms-grid-column: 1;
+        }
+        &.col:nth-of-type(3) {
+          -ms-grid-row: 2;
+          -ms-grid-column: 2;
+        }
+        &.col:nth-of-type(4) {
+          -ms-grid-row: 2;
+          -ms-grid-column: 3;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/users.scss b/app/assets/stylesheets/common/admin/users.scss
new file mode 100644
index 00000000000..69b2b09a3aa
--- /dev/null
+++ b/app/assets/stylesheets/common/admin/users.scss
@@ -0,0 +1,194 @@
+//Styles for /admin/users
+
+.display-row.associations .value {
+  width: 750px;
+  @media (max-width: $mobile-breakpoint) {
+    width: 75%;
+    float: right;
+    text-align: left;
+    margin-left: 0;
+  }
+}
+
+.display-row {
+  display: flex;
+  align-items: center;
+  padding: 10px 5px;
+  &:nth-of-type(1) {
+    border-top: 0;
+  }
+  &.highlight-danger {
+    background-color: $danger-low;
+  }
+  border-top: 1px solid $primary-low;
+  &:before,
+  &:after {
+    display: table;
+    content: "";
+  }
+  &:after {
+    clear: both;
+  }
+  .field {
+    font-weight: bold;
+    width: 17.65765%;
+    float: left;
+    margin-left: 12px;
+    @media (max-width: $mobile-breakpoint) {
+      margin-left: 0;
+      line-height: $line-height-large;
+      margin-top: 5px;
+    }
+  }
+  .value {
+    width: 250px;
+    float: left;
+    margin-left: 12px;
+    @media (max-width: $mobile-breakpoint) {
+      width: 75%;
+      float: right;
+      text-align: left;
+      margin-left: 0;
+    }
+    .select-kit {
+      width: inherit;
+    }
+  }
+  .long-value {
+    width: 800px;
+    float: left;
+    margin-left: 12px;
+    font-size: $font-down-1;
+    button {
+      margin-left: 10px;
+    }
+  }
+  .controls {
+    width: 480px;
+    float: left;
+    margin-left: 12px;
+    @media (max-width: $mobile-breakpoint) {
+      width: 75%;
+      float: right;
+      text-align: left;
+      margin-left: 0;
+    }
+    .btn {
+      margin: 2px 5px 2px 0;
+    }
+  }
+}
+
+.admin-users .users-list {
+  .username .fa {
+    color: dark-light-choose($primary-medium, $secondary-medium);
+  }
+}
+
+.admin-users-list {
+  td.username {
+    white-space: nowrap;
+    overflow-wrap: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  @media screen and (max-width: 970px) and (min-width: 768px) {
+    td.username {
+      max-width: 23vw; // Prevents horizontal scroll down to 768px
+    }
+    td.email {
+      max-width: 28vw; // Prevents horizontal scroll down to 768px
+      overflow-wrap: break-word;
+    }
+  }
+  @media screen and (max-width: 767px) {
+    tr {
+      td.username {
+        grid-column-start: 1;
+        grid-column-end: -2;
+        font-weight: bold;
+      }
+      td.user-status {
+        text-align: right;
+        grid-row: 1;
+        grid-column-end: -1;
+        .d-icon {
+          margin-left: 0.25em;
+        }
+      }
+      td.email {
+        grid-column-start: 1;
+        grid-column-end: -1;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        overflow: hidden;
+        min-width: 0;
+        margin: 0.5em 0 0 0;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+  //IE11 Support
+  @media screen and (max-width: 767px) {
+    tr.user {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr 1fr;
+      -ms-grid-rows: 2em 1fr 3em 3em;
+      td {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr;
+        -ms-grid-rows: 1fr 1fr;
+        .label {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+        }
+        div:not(.label) {
+          -ms-grid-row: 2;
+          -ms-grid-column: 1;
+          align-self: center;
+        }
+        &.username {
+          -ms-grid-row: 1;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 2;
+        }
+        &.user-status {
+          -ms-grid-row: 1;
+          -ms-grid-column: 3;
+        }
+        &.email {
+          -ms-grid-row: 2;
+          -ms-grid-column: 1;
+          -ms-grid-column-span: 3;
+        }
+        &.last-emailed {
+          -ms-grid-row: 3;
+          -ms-grid-column: 1;
+        }
+        &.last-seen {
+          -ms-grid-row: 3;
+          -ms-grid-column: 2;
+        }
+        &.topics-entered {
+          -ms-grid-row: 3;
+          -ms-grid-column: 3;
+        }
+        &.posts-read {
+          -ms-grid-row: 4;
+          -ms-grid-column: 1;
+        }
+        &.time-read {
+          -ms-grid-row: 4;
+          -ms-grid-column: 2;
+        }
+        &.created {
+          -ms-grid-row: 4;
+          -ms-grid-column: 3;
+        }
+      }
+    }
+  }
+}