From 506616716384dc736c7fed76f29a348d35fce409 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Sat, 29 Sep 2018 23:30:20 -0400
Subject: [PATCH] fix: streamline admin UI with common save actions

---
 client/components/admin.vue                  |  19 +-
 client/components/admin/admin-api.vue        | 123 +++++----
 client/components/admin/admin-auth.vue       | 232 ++++++++--------
 client/components/admin/admin-contribute.vue | 170 ++++++------
 client/components/admin/admin-dashboard.vue  | 172 ++++++------
 client/components/admin/admin-dev.vue        |  46 ++--
 client/components/admin/admin-editor.vue     |  57 ++--
 client/components/admin/admin-general.vue    |  70 +++--
 client/components/admin/admin-groups.vue     |  85 +++---
 client/components/admin/admin-locale.vue     |  28 +-
 client/components/admin/admin-logging.vue    | 194 ++++++-------
 client/components/admin/admin-navigation.vue |  27 +-
 client/components/admin/admin-pages.vue      |  67 ++---
 client/components/admin/admin-rendering.vue  | 225 +++++++--------
 client/components/admin/admin-search.vue     | 162 +++++------
 client/components/admin/admin-storage.vue    | 208 +++++++-------
 client/components/admin/admin-system.vue     |  10 +-
 client/components/admin/admin-theme.vue      |  30 +-
 client/components/admin/admin-users.vue      | 125 ++++-----
 client/components/admin/admin-utilities.vue  | 275 ++++++++++---------
 20 files changed, 1199 insertions(+), 1126 deletions(-)

diff --git a/client/components/admin.vue b/client/components/admin.vue
index 5e551923..bae6a6c0 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -20,6 +20,9 @@
         v-list-tile(to='/pages')
           v-list-tile-avatar: v-icon insert_drive_file
           v-list-tile-title {{ $t('admin:pages.title') }}
+          v-list-tile-action
+            v-chip(small, disabled, color='grey lighten-4')
+              .caption.grey--text 123
         v-list-tile(to='/theme')
           v-list-tile-avatar: v-icon palette
           v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,9 +35,8 @@
           v-list-tile-avatar: v-icon perm_identity
           v-list-tile-title {{ $t('admin:users.title') }}
           v-list-tile-action
-            .justify-end
-              v-chip(small, disabled, color='grey lighten-4')
-                .caption.grey--text 1
+            v-chip(small, disabled, color='grey lighten-4')
+              .caption.grey--text 1
         v-divider.my-2
         v-subheader.pl-4 {{ $t('admin:nav.modules') }}
         v-list-tile(to='/auth')
@@ -158,11 +160,14 @@ export default {
   }
 }
 
-.admin-header-icon {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+.admin-header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 
+  &-title {
+    margin-left: 1rem;
+  }
 }
 
 </style>
diff --git a/client/components/admin/admin-api.vue b/client/components/admin/admin-api.vue
index 96f010c5..2c16288f 100644
--- a/client/components/admin/admin-api.vue
+++ b/client/components/admin/admin-api.vue
@@ -1,65 +1,66 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') call_split
-      .headline.blue--text.text--darken-2 API
-      .subheading.grey--text Manage keys to access the API
-    v-card
-      v-card-title
-        v-btn(color='green', dark)
-          v-icon(left) power_settings_new
-          | Enable API
-        v-btn(color='primary', dark)
-          v-icon(left) add
-          | New API Key
-        v-btn(icon)
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
-      v-data-table(
-        v-model='selected'
-        :items='items',
-        :headers='headers',
-        :search='search',
-        :pagination.sync='pagination',
-        :rows-per-page-items='[15]'
-        select-all,
-        hide-actions,
-        disable-initial-sort
-      )
-        template(slot='headers', slot-scope='props')
-          tr
-            th(width='50')
-            th.text-xs-right(
-              width='80'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
-              @click='changeSort(`id`)'
-            )
-              v-icon(small) arrow_upward
-              | ID
-            th.text-xs-left(
-              v-for='header in props.headers'
-              :key='header.text'
-              :width='header.width'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-              @click='changeSort(header.value)'
-            )
-              | {{ header.text }}
-              v-icon(small) arrow_upward
-        template(slot='items', slot-scope='props')
-          tr(:active='props.selected')
-            td
-              v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
-            td.text-xs-right {{ props.item.id }}
-            td {{ props.item.name }}
-            td {{ props.item.key }}
-            td {{ props.item.createdOn }}
-            td {{ props.item.updatedOn }}
-            td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
-        template(slot='no-data')
-          v-alert(icon='warning', :value='true') No users to display!
-      .text-xs-center.py-2
-        v-pagination(v-model='pagination.page', :length='pages')
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') call_split
+          .admin-header-title
+            .headline.blue--text.text--darken-2 API
+            .subheading.grey--text Manage keys to access the API
+          v-spacer
+          v-btn(outline, color='grey', large)
+            v-icon refresh
+          v-btn(color='green', dark, depressed, large)
+            v-icon(left) power_settings_new
+            | Enable API
+          v-btn(color='primary', depressed, large)
+            v-icon(left) add
+            | New API Key
+        v-card.mt-3
+          v-data-table(
+            v-model='selected'
+            :items='items',
+            :headers='headers',
+            :search='search',
+            :pagination.sync='pagination',
+            :rows-per-page-items='[15]'
+            select-all,
+            hide-actions,
+            disable-initial-sort
+          )
+            template(slot='headers', slot-scope='props')
+              tr
+                th(width='50')
+                th.text-xs-right(
+                  width='80'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
+                  @click='changeSort(`id`)'
+                )
+                  v-icon(small) arrow_upward
+                  | ID
+                th.text-xs-left(
+                  v-for='header in props.headers'
+                  :key='header.text'
+                  :width='header.width'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
+                  @click='changeSort(header.value)'
+                )
+                  | {{ header.text }}
+                  v-icon(small) arrow_upward
+            template(slot='items', slot-scope='props')
+              tr(:active='props.selected')
+                td
+                  v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
+                td.text-xs-right {{ props.item.id }}
+                td {{ props.item.name }}
+                td {{ props.item.key }}
+                td {{ props.item.createdOn }}
+                td {{ props.item.updatedOn }}
+                td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
+            template(slot='no-data')
+              v-alert(icon='warning', :value='true') No users to display!
+          .text-xs-center.py-2
+            v-pagination(v-model='pagination.page', :length='pages')
 </template>
 
 <script>
diff --git a/client/components/admin/admin-auth.vue b/client/components/admin/admin-auth.vue
index fd2b968c..c83422fe 100644
--- a/client/components/admin/admin-auth.vue
+++ b/client/components/admin/admin-auth.vue
@@ -1,122 +1,124 @@
 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') lock_outline
-      .headline.primary--text Authentication
-      .subheading.grey--text Configure the authentication settings of your wiki
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='settings'): v-icon settings
-      v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') lock_outline
+          .admin-header-title
+            .headline.primary--text Authentication
+            .subheading.grey--text Configure the authentication settings of your wiki
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          .body-2.grey--text.text--darken-1 Select which authentication strategies to enable:
-          .caption.grey--text.pb-2 Some strategies require additional configuration in their dedicated tab (when selected).
-          v-form
-            v-checkbox.my-0(
-              v-for='strategy in strategies'
-              v-model='strategy.isEnabled'
-              :key='strategy.key'
-              :label='strategy.title'
-              color='primary'
-              :disabled='strategy.key === `local`'
-              hide-details
-            )
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='settings'): v-icon settings
+            v-tab(v-for='strategy in activeStrategies', :key='strategy.key') {{ strategy.title }}
 
-      v-tab-item(v-for='(strategy, n) in activeStrategies', :key='strategy.key', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          v-form
-            .authlogo
-              img(:src='strategy.logo', :alt='strategy.title')
-            v-subheader.pl-0 {{strategy.title}}
-            .caption {{strategy.description}}
-            .caption: a(:href='strategy.website') {{strategy.website}}
-            v-divider.mt-3
-            v-subheader.pl-0 Strategy Configuration
-            .body-1.ml-3(v-if='!strategy.config || strategy.config.length < 1') This strategy has no configuration options you can modify.
-            template(v-else, v-for='cfg in strategy.config')
-              v-select(
-                v-if='cfg.value.type === "string" && cfg.value.enum'
-                outline
-                background-color='grey lighten-2'
-                :items='cfg.value.enum'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-              )
-              v-switch.mb-3(
-                v-else-if='cfg.value.type === "boolean"'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                color='primary'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                )
-              v-text-field(
-                v-else
-                outline
-                background-color='grey lighten-2'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-                )
-            v-divider.mt-3
-            v-subheader.pl-0 Registration
-            .pr-3
-              v-switch.ml-3(
-                v-model='strategy.selfRegistration'
-                label='Allow self-registration'
-                color='primary'
-                hint='Allow any user successfully authorized by the strategy to access the wiki.'
-                persistent-hint
-              )
-              v-combobox.ml-3.mt-3(
-                label='Limit to specific email domains'
-                v-model='strategy.domainWhitelist'
-                prepend-icon='mail_outline'
-                outline
-                background-color='grey lighten-2'
-                persistent-hint
-                deletable-chips
-                clearable
-                multiple
-                chips
-                )
-              v-autocomplete.ml-3(
-                outline
-                background-color='grey lighten-2'
-                :items='groups'
-                item-text='name'
-                item-value='id'
-                label='Assign to group'
-                v-model='strategy.autoEnrollGroups'
-                prepend-icon='people'
-                hint='Automatically assign new users to these groups.'
-                persistent-hint
-                deletable-chips
-                clearable
-                multiple
-                chips
-                )
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
+            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                .body-2.grey--text.text--darken-1 Select which authentication strategies to enable:
+                .caption.grey--text.pb-2 Some strategies require additional configuration in their dedicated tab (when selected).
+                v-form
+                  v-checkbox.my-0(
+                    v-for='strategy in strategies'
+                    v-model='strategy.isEnabled'
+                    :key='strategy.key'
+                    :label='strategy.title'
+                    color='primary'
+                    :disabled='strategy.key === `local`'
+                    hide-details
+                  )
 
+            v-tab-item(v-for='(strategy, n) in activeStrategies', :key='strategy.key', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                v-form
+                  .authlogo
+                    img(:src='strategy.logo', :alt='strategy.title')
+                  v-subheader.pl-0 {{strategy.title}}
+                  .caption {{strategy.description}}
+                  .caption: a(:href='strategy.website') {{strategy.website}}
+                  v-divider.mt-3
+                  v-subheader.pl-0 Strategy Configuration
+                  .body-1.ml-3(v-if='!strategy.config || strategy.config.length < 1') This strategy has no configuration options you can modify.
+                  template(v-else, v-for='cfg in strategy.config')
+                    v-select(
+                      v-if='cfg.value.type === "string" && cfg.value.enum'
+                      outline
+                      background-color='grey lighten-2'
+                      :items='cfg.value.enum'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                    )
+                    v-switch.mb-3(
+                      v-else-if='cfg.value.type === "boolean"'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      color='primary'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      )
+                    v-text-field(
+                      v-else
+                      outline
+                      background-color='grey lighten-2'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                      )
+                  v-divider.mt-3
+                  v-subheader.pl-0 Registration
+                  .pr-3
+                    v-switch.ml-3(
+                      v-model='strategy.selfRegistration'
+                      label='Allow self-registration'
+                      color='primary'
+                      hint='Allow any user successfully authorized by the strategy to access the wiki.'
+                      persistent-hint
+                    )
+                    v-combobox.ml-3.mt-3(
+                      label='Limit to specific email domains'
+                      v-model='strategy.domainWhitelist'
+                      prepend-icon='mail_outline'
+                      outline
+                      background-color='grey lighten-2'
+                      persistent-hint
+                      deletable-chips
+                      clearable
+                      multiple
+                      chips
+                      )
+                    v-autocomplete.ml-3(
+                      outline
+                      background-color='grey lighten-2'
+                      :items='groups'
+                      item-text='name'
+                      item-value='id'
+                      label='Assign to group'
+                      v-model='strategy.autoEnrollGroups'
+                      prepend-icon='people'
+                      hint='Automatically assign new users to these groups.'
+                      persistent-hint
+                      deletable-chips
+                      clearable
+                      multiple
+                      chips
+                      )
 </template>
 
 <script>
diff --git a/client/components/admin/admin-contribute.vue b/client/components/admin/admin-contribute.vue
index d16976bd..a2902015 100644
--- a/client/components/admin/admin-contribute.vue
+++ b/client/components/admin/admin-contribute.vue
@@ -1,84 +1,94 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') favorite
-      .headline.primary--text {{ $t('admin:contribute.title') }}
-      .subheading.grey--text {{ $t('admin:contribute.subtitle') }}
-    v-card.pa-3
-      i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div')
-        v-icon(color='red') favorite
-        a(href='https://requarks.io', target='_blank') requarks.io
-        a(href='https://github.com/Requarks/wiki/graphs/contributors', target='_blank') {{ $t('admin:contribute.openSourceContributors') }}
-      .body-1.pt-3.pl-3 {{ $t('admin:contribute.needYourHelp') }}
-      v-divider.mt-3
-      v-subheader {{ $t('admin:contribute.fundOurWork') }}
-      .body-1.pl-3 {{ $t('admin:contribute.openCollective') }}
-      v-card-actions.ml-2
-        v-btn(depressed, color='primary', href='https://opencollective.com/wikijs')
-          v-icon(left) local_atm
-          span {{ $t('admin:contribute.makeADonation') }}
-      .body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
-      v-card-actions.ml-2
-        v-btn(outline, color='primary', href='https://wikijs.threadless.com')
-          v-icon(left) shopping_cart
-          span {{ $t('admin:contribute.shop') }}
-      v-divider.mt-3
-      v-subheader {{ $t('admin:contribute.contribute') }}
-      .body-1.pl-3
-        ul
-          i18next(path='admin:contribute.submitAnIdea', tag='li')
-            a(href='https://requests.requarks.io/wiki', target='_blank') {{ $t('admin:contribute.submitAnIdeaLink') }}
-          i18next(path='admin:contribute.foundABug', tag='li')
-            a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github
-          i18next(path='admin:contribute.helpTranslate', tag='li')
-            a(href='https://gitter.im/Requarks/wiki', target='_blank') Gitter
-      v-divider.mt-3
-      v-subheader {{ $t('admin:contribute.spreadTheWord') }}
-      .body-1.pl-3
-        ul
-          li {{ $t('admin:contribute.talkToFriends') }}
-          i18next(path='admin:contribute.followUsOnTwitter', tag='li')
-            a(href='https://twitter.com/requarks', target='_blank') Twitter
-    v-card
-      v-toolbar(color='teal', dense, dark)
-        .subheading Sponsors
-      v-list(two-line, dense)
-        template(v-for='(sponsor, idx) in sponsors')
-          v-list-tile(:key='sponsor.id')
-            v-list-tile-avatar
-              img(v-if='sponsor.image', :src='sponsor.image')
-              v-avatar(v-else, color='teal', size='40')
-                span.white--text.subheading {{sponsor.name[0].toUpperCase()}}
-            v-list-tile-content
-              v-list-tile-title {{sponsor.name}}
-              v-list-tile-sub-title {{sponsor.description}}
-            v-list-tile-action(v-if='sponsor.twitter')
-              v-btn(icon, :href='sponsor.twitter', target='_blank')
-                icon-twitter(fillColor='#9e9e9e')
-            v-list-tile-action(v-if='sponsor.website')
-              v-btn(icon, :href='sponsor.website', target='_blank')
-                v-icon(color='grey') public
-          v-divider(v-if='idx < sponsors.length - 1')
-    v-card
-      v-toolbar(color='blue-grey', dense, dark)
-        .subheading Backers
-      v-list(two-line, dense)
-        template(v-for='(backer, idx) in backers')
-          v-list-tile(:key='backer.id')
-            v-list-tile-avatar
-              img(v-if='backer.image', :src='backer.image')
-              v-avatar(v-else, color='blue-grey', size='40')
-                span.white--text.subheading {{backer.name[0].toUpperCase()}}
-            v-list-tile-content
-              v-list-tile-title {{backer.name}}
-              v-list-tile-sub-title {{backer.description}}
-            v-list-tile-action(v-if='backer.twitter')
-              v-btn(icon, :href='backer.twitter', target='_blank')
-                icon-twitter(fillColor='#9e9e9e')
-            v-list-tile-action(v-if='backer.website')
-              v-btn(icon, :href='backer.website', target='_blank')
-                v-icon(color='grey') public
-          v-divider(v-if='idx < backers.length - 1')
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') favorite
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:contribute.title') }}
+            .subheading.grey--text {{ $t('admin:contribute.subtitle') }}
+          v-spacer
+          v-btn(depressed, color='primary', href='https://opencollective.com/wikijs', large)
+            v-icon(left) local_atm
+            span {{ $t('admin:contribute.makeADonation') }}
+        v-card.mt-3
+          v-card-text
+            i18next.body-1.pl-3(path='admin:contribute.openSource', tag='div')
+              v-icon(color='red') favorite
+              a(href='https://requarks.io', target='_blank') requarks.io
+              a(href='https://github.com/Requarks/wiki/graphs/contributors', target='_blank') {{ $t('admin:contribute.openSourceContributors') }}
+            .body-1.pt-3.pl-3 {{ $t('admin:contribute.needYourHelp') }}
+            v-divider.mt-3
+            v-subheader {{ $t('admin:contribute.fundOurWork') }}
+            .body-1.pl-3 {{ $t('admin:contribute.openCollective') }}
+            v-card-actions.ml-2
+              v-btn(outline, color='primary', href='https://opencollective.com/wikijs')
+                v-icon(left) local_atm
+                span {{ $t('admin:contribute.makeADonation') }}
+            .body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
+            v-card-actions.ml-2
+              v-btn(outline, color='primary', href='https://wikijs.threadless.com')
+                v-icon(left) shopping_cart
+                span {{ $t('admin:contribute.shop') }}
+            v-divider.mt-3
+            v-subheader {{ $t('admin:contribute.contribute') }}
+            .body-1.pl-3
+              ul
+                i18next(path='admin:contribute.submitAnIdea', tag='li')
+                  a(href='https://requests.requarks.io/wiki', target='_blank') {{ $t('admin:contribute.submitAnIdeaLink') }}
+                i18next(path='admin:contribute.foundABug', tag='li')
+                  a(href='https://github.com/Requarks/wiki/issues', target='_blank') Github
+                i18next(path='admin:contribute.helpTranslate', tag='li')
+                  a(href='https://gitter.im/Requarks/wiki', target='_blank') Gitter
+            v-divider.mt-3
+            v-subheader {{ $t('admin:contribute.spreadTheWord') }}
+            .body-1.pl-3
+              ul
+                li {{ $t('admin:contribute.talkToFriends') }}
+                i18next(path='admin:contribute.followUsOnTwitter', tag='li')
+                  a(href='https://twitter.com/requarks', target='_blank') Twitter
+          v-toolbar(color='teal', dense, dark)
+            .subheading Sponsors
+            v-spacer
+            v-btn(outline, small, href='https://opencollective.com/wikijs/order/1273') Become a Sponsor
+          v-list(two-line, dense)
+            template(v-for='(sponsor, idx) in sponsors')
+              v-list-tile(:key='sponsor.id')
+                v-list-tile-avatar
+                  img(v-if='sponsor.image', :src='sponsor.image')
+                  v-avatar(v-else, color='teal', size='40')
+                    span.white--text.subheading {{sponsor.name[0].toUpperCase()}}
+                v-list-tile-content
+                  v-list-tile-title {{sponsor.name}}
+                  v-list-tile-sub-title {{sponsor.description}}
+                v-list-tile-action(v-if='sponsor.twitter')
+                  v-btn(icon, :href='sponsor.twitter', target='_blank')
+                    icon-twitter(fillColor='#9e9e9e')
+                v-list-tile-action(v-if='sponsor.website')
+                  v-btn(icon, :href='sponsor.website', target='_blank')
+                    v-icon(color='grey') public
+              v-divider(v-if='idx < sponsors.length - 1')
+          v-toolbar(color='blue-grey', dense, dark)
+            .subheading Backers
+            v-spacer
+            v-btn(outline, small, href='https://opencollective.com/wikijs/order/1272') Become a Backer
+          v-list(two-line, dense)
+            template(v-for='(backer, idx) in backers')
+              v-list-tile(:key='backer.id')
+                v-list-tile-avatar
+                  img(v-if='backer.image', :src='backer.image')
+                  v-avatar(v-else, color='blue-grey', size='40')
+                    span.white--text.subheading {{backer.name[0].toUpperCase()}}
+                v-list-tile-content
+                  v-list-tile-title {{backer.name}}
+                  v-list-tile-sub-title {{backer.description}}
+                v-list-tile-action(v-if='backer.twitter')
+                  v-btn(icon, :href='backer.twitter', target='_blank')
+                    icon-twitter(fillColor='#9e9e9e')
+                v-list-tile-action(v-if='backer.website')
+                  v-btn(icon, :href='backer.website', target='_blank')
+                    v-icon(color='grey') public
+              v-divider(v-if='idx < backers.length - 1')
 
 </template>
 
diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue
index 76968420..d70d6d61 100644
--- a/client/components/admin/admin-dashboard.vue
+++ b/client/components/admin/admin-dashboard.vue
@@ -1,90 +1,92 @@
 <template lang='pug'>
-  v-card(tile, flat :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .headline.primary--text {{ $t('admin:dashboard.title') }}
-      .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
-    v-container(fluid, grid-list-lg)
-      v-layout(row, wrap)
-        v-flex(xs12 md6 lg4 xl3 d-flex)
-          v-card.primary.dashboard-card(dark)
-            v-card-text
-              v-icon.dashboard-icon insert_drive_file
-              .subheading Pages
-              animated-number.display-1(
-                :value='info.pagesTotal'
-                :duration='2000'
-                :formatValue='round'
-                easing='easeOutQuint'
-                )
-        v-flex(xs12 md6 lg4 xl3 d-flex)
-          v-card.indigo.lighten-1.dashboard-card(dark)
-            v-card-text
-              v-icon.dashboard-icon person
-              .subheading Users
-              animated-number.display-1(
-                :value='info.usersTotal'
-                :duration='2000'
-                :formatValue='round'
-                easing='easeOutQuint'
-                )
-        v-flex(xs12 md6 lg4 xl3 d-flex)
-          v-card.indigo.lighten-2.dashboard-card(dark)
-            v-card-text
-              v-icon.dashboard-icon people
-              .subheading Groups
-              animated-number.display-1(
-                :value='info.groupsTotal'
-                :duration='2000'
-                :formatValue='round'
-                easing='easeOutQuint'
-                )
-        v-flex(xs12 md6 lg12 xl3 d-flex)
-          v-card.dashboard-card(
-            :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
-            dark
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') dashboard
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:dashboard.title') }}
+            .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
+      v-flex(xs12 md6 lg4 xl3 d-flex)
+        v-card.primary.dashboard-card(dark)
+          v-card-text
+            v-icon.dashboard-icon insert_drive_file
+            .subheading Pages
+            animated-number.display-1(
+              :value='info.pagesTotal'
+              :duration='2000'
+              :formatValue='round'
+              easing='easeOutQuint'
+              )
+      v-flex(xs12 md6 lg4 xl3 d-flex)
+        v-card.indigo.lighten-1.dashboard-card(dark)
+          v-card-text
+            v-icon.dashboard-icon person
+            .subheading Users
+            animated-number.display-1(
+              :value='info.usersTotal'
+              :duration='2000'
+              :formatValue='round'
+              easing='easeOutQuint'
+              )
+      v-flex(xs12 md6 lg4 xl3 d-flex)
+        v-card.indigo.lighten-2.dashboard-card(dark)
+          v-card-text
+            v-icon.dashboard-icon people
+            .subheading Groups
+            animated-number.display-1(
+              :value='info.groupsTotal'
+              :duration='2000'
+              :formatValue='round'
+              easing='easeOutQuint'
+              )
+      v-flex(xs12 md6 lg12 xl3 d-flex)
+        v-card.dashboard-card(
+          :class='isLatestVersion ? "teal lighten-2" : "red lighten-2"'
+          dark
+          )
+          v-btn(fab, absolute, right, top, small, light, to='system')
+            v-icon(v-if='isLatestVersion', color='teal') build
+            v-icon(v-else, color='red darken-4') get_app
+          v-card-text
+            v-icon.dashboard-icon blur_on
+            .subheading Wiki.js {{info.currentVersion}}
+            .body-2(v-if='isLatestVersion') You are running the latest version.
+            .body-2(v-else) A new version is available: {{info.latestVersion}}
+      v-flex(xs12)
+        v-card
+          v-card-title.subheading Recent Pages
+          v-data-table.pb-2(
+            :items='recentPages'
+            hide-actions
+            hide-headers
             )
-            v-btn(fab, absolute, right, top, small, light, to='system')
-              v-icon(v-if='isLatestVersion', color='teal') build
-              v-icon(v-else, color='red darken-4') get_app
-            v-card-text
-              v-icon.dashboard-icon blur_on
-              .subheading Wiki.js {{info.currentVersion}}
-              .body-2(v-if='isLatestVersion') You are running the latest version.
-              .body-2(v-else) A new version is available: {{info.latestVersion}}
-        v-flex(xs12)
-          v-card
-            v-card-title.subheading Recent Pages
-            v-data-table.pb-2(
-              :items='recentPages'
-              hide-actions
-              hide-headers
-              )
-              template(slot='items' slot-scope='props')
-                td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
-                td
-                  .body-2.primary--text {{ props.item.title }}
-                  .caption.grey--text.text--darken-2 {{ props.item.description }}
-                td.caption /{{ props.item.path }}
-                td.grey--text.text--darken-2(width='250')
-                  .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
-                  .caption Created {{ props.item.createdAt | moment('calendar') }}
-        v-flex(xs12)
-          v-card
-            v-card-title.subheading Most Popular Pages
-            v-data-table.pb-2(
-              :items='popularPages'
-              hide-actions
-              hide-headers
-              )
-              template(slot='items' slot-scope='props')
-                td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
-                td
-                  .body-2.primary--text {{ props.item.title }}
-                  .caption.grey--text.text--darken-2 {{ props.item.description }}
-                td.caption /{{ props.item.path }}
-                td.grey--text.text--darken-2(width='250')
-                  .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
-                  .caption Created {{ props.item.createdAt | moment('calendar') }}
+            template(slot='items' slot-scope='props')
+              td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
+              td
+                .body-2.primary--text {{ props.item.title }}
+                .caption.grey--text.text--darken-2 {{ props.item.description }}
+              td.caption /{{ props.item.path }}
+              td.grey--text.text--darken-2(width='250')
+                .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
+                .caption Created {{ props.item.createdAt | moment('calendar') }}
+      v-flex(xs12)
+        v-card
+          v-card-title.subheading Most Popular Pages
+          v-data-table.pb-2(
+            :items='popularPages'
+            hide-actions
+            hide-headers
+            )
+            template(slot='items' slot-scope='props')
+              td(width='20', style='padding-right: 0;'): v-icon insert_drive_file
+              td
+                .body-2.primary--text {{ props.item.title }}
+                .caption.grey--text.text--darken-2 {{ props.item.description }}
+              td.caption /{{ props.item.path }}
+              td.grey--text.text--darken-2(width='250')
+                .caption: strong Updated {{ props.item.updatedAt | moment('from') }}
+                .caption Created {{ props.item.createdAt | moment('calendar') }}
 
 </template>
 
diff --git a/client/components/admin/admin-dev.vue b/client/components/admin/admin-dev.vue
index dcce17f8..f28ec7c4 100644
--- a/client/components/admin/admin-dev.vue
+++ b/client/components/admin/admin-dev.vue
@@ -1,25 +1,31 @@
 <template lang='pug'>
-  div
-    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') weekend
-      .headline.primary--text Developer Tools
-      .subheading.grey--text ¯\_(ツ)_/¯
-    v-tabs(
-      v-model='selectedTab'
-      :color='$vuetify.dark ? "primary" : "grey lighten-4"'
-      fixed-tabs
-      :slider-color='$vuetify.dark ? "white" : "primary"'
-      show-arrows
-      @input='tabChanged'
-      )
-      v-tab(key='0') Graph API Playground
-      v-tab(key='1') Graph API Map
-    v-tabs-items(v-model='selectedTab')
-      v-tab-item(key='0', :transition='false', :reverse-transition='false')
-        #graphiql
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') weekend
+          .admin-header-title
+            .headline.primary--text Developer Tools
+            .subheading.grey--text ¯\_(ツ)_/¯
 
-      v-tab-item(key='1', :transition='false', :reverse-transition='false')
-        #voyager
+        v-card.mt-3
+          v-tabs(
+            v-model='selectedTab'
+            color='grey darken-2'
+            fixed-tabs
+            slider-color='white'
+            show-arrows
+            dark
+            @input='tabChanged'
+            )
+            v-tab(key='0') Graph API Playground
+            v-tab(key='1') Graph API Map
+          v-tabs-items(v-model='selectedTab')
+            v-tab-item(key='0', :transition='false', :reverse-transition='false')
+              #graphiql
+
+            v-tab-item(key='1', :transition='false', :reverse-transition='false')
+              #voyager
 
 </template>
 
diff --git a/client/components/admin/admin-editor.vue b/client/components/admin/admin-editor.vue
index 761f8292..9778d751 100644
--- a/client/components/admin/admin-editor.vue
+++ b/client/components/admin/admin-editor.vue
@@ -1,33 +1,36 @@
 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') transform
-      .headline.primary--text Editor
-      .subheading.grey--text Configure the content editor
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='settings'): v-icon settings
-      v-tab(key='code') Markdown
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') transform
+          .admin-header-title
+            .headline.primary--text Editor
+            .subheading.grey--text Configure the content editor
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          .body-2.grey--text.text--darken-1 Select which editors to enable:
-          .caption.grey--text.pb-2 Some editors require additional configuration in their dedicated tab (when selected).
-          v-form
-            v-radio-group(v-model='selectedEditor')
-              v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
-      v-tab-item(key='code', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          v-form
-            v-subheader Editor Configuration
-            .body-1.ml-3 This editor has no configuration options you can modify.
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='settings'): v-icon settings
+            v-tab(key='code') Markdown
 
+            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                .body-2.grey--text.text--darken-1 Select which editors to enable:
+                .caption.grey--text.pb-2 Some editors require additional configuration in their dedicated tab (when selected).
+                v-form
+                  v-radio-group(v-model='selectedEditor')
+                    v-radio(v-for='(editor, n) in editors', :key='n', :label='editor.text', :value='editor.value', color='primary')
+            v-tab-item(key='code', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                v-form
+                  v-subheader Editor Configuration
+                  .body-1.ml-3 This editor has no configuration options you can modify.
 </template>
 
 <script>
diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue
index 3c92d414..ee182b1d 100644
--- a/client/components/admin/admin-general.vue
+++ b/client/components/admin/admin-general.vue
@@ -1,10 +1,16 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') widgets
-        .headline.primary--text {{ $t('admin:general.title') }}
-        .subheading.grey--text {{ $t('admin:general.subtitle') }}
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') widgets
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:general.title') }}
+            .subheading.grey--text {{ $t('admin:general.subtitle') }}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -15,17 +21,48 @@
                       .subheading {{ $t('admin:general.siteInfo') }}
                   v-subheader General
                   .px-3.pb-3
-                    v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Title'
+                      required
+                      :counter='50'
+                      v-model='siteTitle'
+                      prepend-icon='public'
+                      )
                   v-divider
                   v-subheader SEO
                   .px-3.pb-3
-                    v-text-field(label='Site Description', :counter='255', prepend-icon='public')
-                    v-text-field(label='Site Keywords', :counter='255', prepend-icon='public')
-                    v-select(label='Meta Robots', chips, tags, :items='metaRobots', v-model='metaRobotsSelection', prepend-icon='public')
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Description'
+                      :counter='255'
+                      prepend-icon='public'
+                      )
+                    v-text-field(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Site Keywords'
+                      :counter='255'
+                      prepend-icon='public'
+                      )
+                    v-select(
+                      outline
+                      background-color='grey lighten-2'
+                      label='Meta Robots'
+                      chips
+                      tags
+                      :items='metaRobots'
+                      v-model='metaRobotsSelection'
+                      prepend-icon='public'
+                      )
                   v-divider
                   v-subheader Analytics
                   .px-3.pb-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       label='Google Analytics ID'
                       :counter='255'
                       prepend-icon='public'
@@ -36,6 +73,8 @@
                   v-subheader Footer Copyright
                   .px-3.pb-3
                     v-text-field(
+                      outline
+                      background-color='grey lighten-2'
                       label='Company / Organization Name'
                       v-model='company'
                       :counter='255'
@@ -43,11 +82,6 @@
                       persistent-hint
                       hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                       )
-                  v-card-chin
-                    v-spacer
-                    v-btn(color='primary', @click='save')
-                      v-icon(left) chevron_right
-                      span Save
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='primary', dark, dense, flat)
@@ -81,11 +115,6 @@
                     persistent-hint
                     hint='Uncheck this box if you don\'t want Henry, Wiki.js mascot, to be displayed on client-facing pages.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
 
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
@@ -107,11 +136,6 @@
                     persistent-hint
                     hint='Allow users to have their own personal wiki.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
 
 </template>
 
diff --git a/client/components/admin/admin-groups.vue b/client/components/admin/admin-groups.vue
index 18013532..0c49da67 100644
--- a/client/components/admin/admin-groups.vue
+++ b/client/components/admin/admin-groups.vue
@@ -1,46 +1,47 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') people
-      .headline.blue--text.text--darken-2 Groups
-      .subheading.grey--text Manage groups and their permissions
-    v-card
-      v-card-title
-        v-dialog(v-model='newGroupDialog', max-width='500')
-          v-btn(color='primary', dark, slot='activator')
-            v-icon(left) add
-            | New Group
-          v-card
-            .dialog-header.is-short New Group
-            v-card-text
-              v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255', @keyup.enter='createGroup')
-            v-card-chin
-              v-spacer
-              v-btn(flat, @click='newGroupDialog = false') Cancel
-              v-btn(color='primary', @click='createGroup') Create
-        v-btn(icon, @click='refresh')
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
-      v-data-table(
-        :items='groups'
-        :headers='headers'
-        :search='search'
-        :pagination.sync='pagination'
-        :rows-per-page-items='[15]'
-        hide-actions
-      )
-        template(slot='items', slot-scope='props')
-          tr.is-clickable(:active='props.selected', @click='$router.push("/groups/" + props.item.id)')
-            td.text-xs-right {{ props.item.id }}
-            td {{ props.item.name }}
-            td {{ props.item.userCount }}
-            td {{ props.item.createdAt | moment('calendar') }}
-            td {{ props.item.updatedAt | moment('calendar') }}
-        template(slot='no-data')
-          v-alert.ma-3(icon='warning', :value='true', outline) No groups to display.
-      .text-xs-center.py-2(v-if='groups.length > 15')
-        v-pagination(v-model='pagination.page', :length='pages')
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') people
+          .admin-header-title
+            .headline.blue--text.text--darken-2 Groups
+            .subheading.grey--text Manage groups and their permissions
+          v-spacer
+          v-btn(color='grey', outline, @click='refresh', large)
+            v-icon refresh
+          v-dialog(v-model='newGroupDialog', max-width='500')
+            v-btn(color='primary', depressed, slot='activator', large)
+              v-icon(left) add
+              span New Group
+            v-card
+              .dialog-header.is-short New Group
+              v-card-text
+                v-text-field(v-model='newGroupName', label='Group Name', autofocus, counter='255', @keyup.enter='createGroup')
+              v-card-chin
+                v-spacer
+                v-btn(flat, @click='newGroupDialog = false') Cancel
+                v-btn(color='primary', @click='createGroup') Create
+        v-card.mt-3
+          v-data-table(
+            :items='groups'
+            :headers='headers'
+            :search='search'
+            :pagination.sync='pagination'
+            :rows-per-page-items='[15]'
+            hide-actions
+          )
+            template(slot='items', slot-scope='props')
+              tr.is-clickable(:active='props.selected', @click='$router.push("/groups/" + props.item.id)')
+                td.text-xs-right {{ props.item.id }}
+                td {{ props.item.name }}
+                td {{ props.item.userCount }}
+                td {{ props.item.createdAt | moment('calendar') }}
+                td {{ props.item.updatedAt | moment('calendar') }}
+            template(slot='no-data')
+              v-alert.ma-3(icon='warning', :value='true', outline) No groups to display.
+          .text-xs-center.py-2(v-if='groups.length > 15')
+            v-pagination(v-model='pagination.page', :length='pages')
 </template>
 
 <script>
diff --git a/client/components/admin/admin-locale.vue b/client/components/admin/admin-locale.vue
index 560c31b4..88bbd626 100644
--- a/client/components/admin/admin-locale.vue
+++ b/client/components/admin/admin-locale.vue
@@ -1,10 +1,16 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
-    v-layout(row wrap)
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') language
-        .headline.primary--text {{ $t('admin:locale.title') }}
-        .subheading.grey--text {{ $t('admin:locale.subtitle') }}
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') language
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:locale.title') }}
+            .subheading.grey--text {{ $t('admin:locale.subtitle') }}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -14,6 +20,8 @@
                     .subheading {{ $t('admin:locale.settings') }}
                 v-card-text
                   v-select(
+                    outline
+                    background-color='grey lighten-2'
                     :items='installedLocales'
                     prepend-icon='language'
                     v-model='selectedLocale'
@@ -40,11 +48,6 @@
                     persistent-hint
                     :hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
                   )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span {{ $t('common:actions.save') }}
 
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
@@ -92,11 +95,6 @@
                           v-list-tile-sub-title(v-html='data.item.nativeName')
                         v-list-tile-action
                           v-checkbox(:input-value='data.tile.props.value', color='primary', value)
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span {{ $t('common:actions.save') }}
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)
diff --git a/client/components/admin/admin-logging.vue b/client/components/admin/admin-logging.vue
index b4bb1604..36cd7f6f 100644
--- a/client/components/admin/admin-logging.vue
+++ b/client/components/admin/admin-logging.vue
@@ -1,105 +1,105 @@
 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') graphic_eq
-      .headline.primary--text Logging
-      .subheading.grey--text Configure the system logger(s)
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='settings'): v-icon settings
-      v-tab(v-for='logger in activeLoggers', :key='logger.key') {{ logger.title }}
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') graphic_eq
+          .admin-header-title
+            .headline.primary--text Logging
+            .subheading.grey--text Configure the system logger(s)
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='black', dark, depressed, @click='toggleConsole', large)
+            v-icon(left) keyboard
+            span View Console
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          .body-2.grey--text.text--darken-1 Select which logging service to enable:
-          .caption.grey--text.pb-2 Some loggers require additional configuration in their dedicated tab (when selected).
-          v-form
-            v-checkbox.my-0(
-              v-for='(logger, n) in loggers'
-              v-model='logger.isEnabled'
-              :key='logger.key'
-              :label='logger.title'
-              color='primary'
-              hide-details
-            )
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='settings'): v-icon settings
+            v-tab(v-for='logger in activeLoggers', :key='logger.key') {{ logger.title }}
 
-      v-tab-item(v-for='(logger, n) in activeLoggers', :key='logger.key', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          v-form
-            .loggerlogo
-              img(:src='logger.logo', :alt='logger.title')
-            v-subheader.pl-0 {{logger.title}}
-            .caption {{logger.description}}
-            .caption: a(:href='logger.website') {{logger.website}}
-            v-divider.mt-3
-            v-subheader.pl-0 Logger Configuration
-            .body-1.ml-3(v-if='!logger.config || logger.config.length < 1') This logger has no configuration options you can modify.
-            template(v-else, v-for='cfg in logger.config')
-              v-select(
-                v-if='cfg.value.type === "string" && cfg.value.enum'
-                outline
-                background-color='grey lighten-2'
-                :items='cfg.value.enum'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-              )
-              v-switch(
-                v-else-if='cfg.value.type === "boolean"'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                color='primary'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                )
-              v-text-field(
-                v-else
-                outline
-                background-color='grey lighten-2'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-                )
-            v-divider.mt-3
-            v-subheader.pl-0 Log Level
-            .body-1.ml-3 Select the minimum error level that will be reported to this logger.
-            v-layout(row)
-              v-flex(xs12, md6, lg4)
-                .pt-3
-                  v-select(
-                    single-line
-                    outline
-                    background-color='grey lighten-2'
-                    :items='levels'
-                    label='Level'
-                    v-model='logger.level'
-                    prepend-icon='graphic_eq'
-                    hint='Default: warn'
-                    persistent-hint
+            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                .body-2.grey--text.text--darken-1 Select which logging service to enable:
+                .caption.grey--text.pb-2 Some loggers require additional configuration in their dedicated tab (when selected).
+                v-form
+                  v-checkbox.my-0(
+                    v-for='(logger, n) in loggers'
+                    v-model='logger.isEnabled'
+                    :key='logger.key'
+                    :label='logger.title'
+                    color='primary'
+                    hide-details
                   )
 
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-btn(color='black', dark, @click='toggleConsole')
-        v-icon(left) keyboard
-        span View Console
-      v-btn(color='black', dark)
-        v-icon(left) layers_clear
-        span Purge Logs
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
+            v-tab-item(v-for='(logger, n) in activeLoggers', :key='logger.key', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                v-form
+                  .loggerlogo
+                    img(:src='logger.logo', :alt='logger.title')
+                  v-subheader.pl-0 {{logger.title}}
+                  .caption {{logger.description}}
+                  .caption: a(:href='logger.website') {{logger.website}}
+                  v-divider.mt-3
+                  v-subheader.pl-0 Logger Configuration
+                  .body-1.ml-3(v-if='!logger.config || logger.config.length < 1') This logger has no configuration options you can modify.
+                  template(v-else, v-for='cfg in logger.config')
+                    v-select(
+                      v-if='cfg.value.type === "string" && cfg.value.enum'
+                      outline
+                      background-color='grey lighten-2'
+                      :items='cfg.value.enum'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                    )
+                    v-switch(
+                      v-else-if='cfg.value.type === "boolean"'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      color='primary'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      )
+                    v-text-field(
+                      v-else
+                      outline
+                      background-color='grey lighten-2'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                      )
+                  v-divider.mt-3
+                  v-subheader.pl-0 Log Level
+                  .body-1.ml-3 Select the minimum error level that will be reported to this logger.
+                  v-layout(row)
+                    v-flex(xs12, md6, lg4)
+                      .pt-3
+                        v-select(
+                          single-line
+                          outline
+                          background-color='grey lighten-2'
+                          :items='levels'
+                          label='Level'
+                          v-model='logger.level'
+                          prepend-icon='graphic_eq'
+                          hint='Default: warn'
+                          persistent-hint
+                        )
 
     logging-console(v-model='showConsole')
 </template>
diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue
index 601a0976..cacfa600 100644
--- a/client/components/admin/admin-navigation.vue
+++ b/client/components/admin/admin-navigation.vue
@@ -1,15 +1,25 @@
 <template lang='pug'>
-  v-container(fluid, fill-height)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') near_me
-        .headline.primary--text {{$t('navigation.title')}}
-        .subheading.grey--text {{$t('navigation.subtitle')}}
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') near_me
+          .admin-header-title
+            .headline.primary--text {{$t('navigation.title')}}
+            .subheading.grey--text {{$t('navigation.subtitle')}}
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large)
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-container.pa-0.mt-3(fluid, grid-list-lg)
           v-layout(row)
             v-flex(style='flex: 0 0 350px;')
               v-card
-                v-list.primary.py-2(dense, dark)
+                v-list.py-2(dense, dark, :class='navTree.length < 1 ? "grey lighten-4" : "primary"')
+                  v-list-tile(v-if='navTree.length < 1')
+                    v-list-tile-avatar: v-icon(color='grey') explore_off
+                    v-list-tile-content
+                      .caption.grey--text {{$t('navigation.emptyList')}}
                   draggable(v-model='navTree')
                     template(v-for='navItem in navTree')
                       v-list-tile(
@@ -48,9 +58,6 @@
                       v-list-tile(@click='addItem("divider")')
                         v-list-tile-avatar: v-icon power_input
                         v-list-tile-title {{$t('navigation.divider')}}
-                  v-btn.ml-2(color='success', depressed, block, @click='save')
-                    v-icon(left) check
-                    span {{$t('common:actions.save')}}
             v-flex
               v-card(v-if='current.kind === "link"')
                 v-toolbar(dense, color='blue', flat, dark)
@@ -112,8 +119,8 @@
                   v-icon(left) delete
                   span {{$t('navigation.delete', { kind: $t('navigation.divider') })}}
               v-card(v-else)
-                v-card-text.grey--text {{$t('navigation.noSelectionText')}}
-
+                v-card-text.grey--text(v-if='navTree.length > 0') {{$t('navigation.noSelectionText')}}
+                v-card-text.grey--text(v-else) {{$t('navigation.noItemsText')}}
 </template>
 
 <script>
diff --git a/client/components/admin/admin-pages.vue b/client/components/admin/admin-pages.vue
index ffd78e81..5697e707 100644
--- a/client/components/admin/admin-pages.vue
+++ b/client/components/admin/admin-pages.vue
@@ -1,37 +1,38 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') insert_drive_file
-      .headline.blue--text.text--darken-2 Pages
-      .subheading.grey--text Manage pages
-    v-card
-      v-card-title
-        v-btn(color='primary', dark, slot='activator')
-          v-icon(left) add
-          | New Page
-        v-btn(icon, @click='refresh')
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(solo, append-icon='search', label='Search', single-line, hide-details, v-model='search')
-      v-data-table(
-        :items='groups'
-        :headers='headers'
-        :search='search'
-        :pagination.sync='pagination'
-        :rows-per-page-items='[15]'
-        hide-actions
-      )
-        template(slot='items', slot-scope='props')
-          tr.is-clickable(:active='props.selected', @click='$router.push("/e/" + props.item.id)')
-            td.text-xs-right {{ props.item.id }}
-            td {{ props.item.name }}
-            td {{ props.item.userCount }}
-            td {{ props.item.createdAt | moment('calendar') }}
-            td {{ props.item.updatedAt | moment('calendar') }}
-        template(slot='no-data')
-          v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
-      .text-xs-center.py-2(v-if='groups.length > 15')
-        v-pagination(v-model='pagination.page', :length='pages')
+  v-container(fluid, grid-list-lg)
+    v-layout(row wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') insert_drive_file
+          .admin-header-title
+            .headline.blue--text.text--darken-2 Pages
+            .subheading.grey--text Manage pages
+          v-spacer
+          v-btn(color='grey', outline, @click='refresh', large)
+            v-icon.grey--text refresh
+          v-btn(color='primary', depressed, @click='save', large)
+            v-icon(left) add
+            span New Page
+        v-card.mt-3
+          v-data-table(
+            :items='groups'
+            :headers='headers'
+            :search='search'
+            :pagination.sync='pagination'
+            :rows-per-page-items='[15]'
+            hide-actions
+          )
+            template(slot='items', slot-scope='props')
+              tr.is-clickable(:active='props.selected', @click='$router.push("/e/" + props.item.id)')
+                td.text-xs-right {{ props.item.id }}
+                td {{ props.item.name }}
+                td {{ props.item.userCount }}
+                td {{ props.item.createdAt | moment('calendar') }}
+                td {{ props.item.updatedAt | moment('calendar') }}
+            template(slot='no-data')
+              v-alert.ma-3(icon='warning', :value='true', outline) No pages to display.
+          .text-xs-center.py-2(v-if='groups.length > 15')
+            v-pagination(v-model='pagination.page', :length='pages')
 </template>
 
 <script>
diff --git a/client/components/admin/admin-rendering.vue b/client/components/admin/admin-rendering.vue
index 1bc14302..a004d1a7 100644
--- a/client/components/admin/admin-rendering.vue
+++ b/client/components/admin/admin-rendering.vue
@@ -1,119 +1,122 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
-    v-layout(row wrap)
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') system_update_alt
-        .headline.primary--text Rendering
-        .subheading.grey--text Configure how content is rendered
-        v-layout.mt-3(row wrap)
-          v-flex(lg3 xs12)
-            v-toolbar(
-              color='primary'
-              dense
-              flat
-              dark
-              )
-              v-icon.mr-2 line_weight
-              .subheading Pipeline
-            v-expansion-panel.adm-rendering-pipeline(v-model='selectedCore')
-              v-expansion-panel-content(
-                hide-actions
-                v-for='core in renderers'
-                :key='core.key'
-                )
-                v-toolbar(
-                  slot='header'
-                  color='blue'
-                  dense
-                  dark
-                  flat
-                  )
-                  v-spacer
-                  .body-2 {{core.input}}
-                  v-icon.mx-2 arrow_forward
-                  .caption {{core.output}}
-                  v-spacer
-                v-list.py-0(two-line, dense)
-                  template(v-for='(rdr, n) in core.children')
-                    v-list-tile(
-                      avatar
-                      :key='rdr.key'
-                      @click='selectRenderer(rdr.key)'
-                      :class='currentRenderer.key === rdr.key ? "blue lighten-5" : ""'
-                      )
-                      v-list-tile-avatar
-                        v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}}
-                      v-list-tile-content
-                        v-list-tile-title {{rdr.title}}
-                        v-list-tile-sub-title {{rdr.description}}
-                      v-list-tile-avatar
-                        status-indicator(v-if='rdr.isEnabled', positive, pulse)
-                        status-indicator(v-else, negative, pulse)
-                    v-divider.my-0(v-if='n < core.children.length - 1')
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') system_update_alt
+          .admin-header-title
+            .headline.primary--text Rendering
+            .subheading.grey--text Configure how content is rendered
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-          v-flex(lg9 xs12)
-            v-card
-              v-toolbar(
-                color='grey darken-1'
+      v-flex(lg3, xs12)
+        v-toolbar(
+          color='primary'
+          dense
+          flat
+          dark
+          )
+          v-icon.mr-2 line_weight
+          .subheading Pipeline
+        v-expansion-panel.adm-rendering-pipeline(v-model='selectedCore')
+          v-expansion-panel-content(
+            hide-actions
+            v-for='core in renderers'
+            :key='core.key'
+            )
+            v-toolbar(
+              slot='header'
+              color='blue'
+              dense
+              dark
+              flat
+              )
+              v-spacer
+              .body-2 {{core.input}}
+              v-icon.mx-2 arrow_forward
+              .caption {{core.output}}
+              v-spacer
+            v-list.py-0(two-line, dense)
+              template(v-for='(rdr, n) in core.children')
+                v-list-tile(
+                  avatar
+                  :key='rdr.key'
+                  @click='selectRenderer(rdr.key)'
+                  :class='currentRenderer.key === rdr.key ? "blue lighten-5" : ""'
+                  )
+                  v-list-tile-avatar
+                    v-icon(:color='currentRenderer.key === rdr.key ? "primary" : "grey"') {{rdr.icon}}
+                  v-list-tile-content
+                    v-list-tile-title {{rdr.title}}
+                    v-list-tile-sub-title {{rdr.description}}
+                  v-list-tile-avatar
+                    status-indicator(v-if='rdr.isEnabled', positive, pulse)
+                    status-indicator(v-else, negative, pulse)
+                v-divider.my-0(v-if='n < core.children.length - 1')
+
+      v-flex(lg9, xs12)
+        v-card
+          v-toolbar(
+            color='grey darken-1'
+            dark
+            flat
+            dense
+            )
+            v-icon.mr-2 {{currentRenderer.icon}}
+            .subheading {{currentRenderer.title}}
+            v-spacer
+            .pt-3.mt-1
+              v-switch(
                 dark
-                flat
-                dense
+                color='white'
+                label='Enabled'
+                v-model='currentRenderer.isEnabled'
                 )
-                v-icon.mr-2 {{currentRenderer.icon}}
-                .subheading {{currentRenderer.title}}
-                v-spacer
-                .pt-3.mt-1
-                  v-switch(
-                    dark
-                    color='white'
-                    label='Enabled'
-                    v-model='currentRenderer.isEnabled'
-                    )
-              v-card-text.pb-4.pt-2.pl-4
-                v-subheader.pl-0 Rendering Module Configuration
-                .body-1.ml-3(v-if='!currentRenderer.config || currentRenderer.config.length < 1') This rendering module has no configuration options you can modify.
-                template(v-else, v-for='(cfg, idx) in currentRenderer.config')
-                  v-select(
-                    v-if='cfg.value.type === "string" && cfg.value.enum'
-                    outline
-                    background-color='grey lighten-2'
-                    :items='cfg.value.enum'
-                    :key='cfg.key'
-                    :label='cfg.value.title'
-                    v-model='cfg.value.value'
-                    :hint='cfg.value.hint ? cfg.value.hint : ""'
-                    persistent-hint
-                    :class='cfg.value.hint ? "mb-2" : ""'
-                  )
-                  v-switch(
-                    v-else-if='cfg.value.type === "boolean"'
-                    :key='cfg.key'
-                    :label='cfg.value.title'
-                    v-model='cfg.value.value'
-                    color='primary'
-                    :hint='cfg.value.hint ? cfg.value.hint : ""'
-                    persistent-hint
-                    )
-                  v-text-field(
-                    v-else
-                    outline
-                    background-color='grey lighten-2'
-                    :key='cfg.key'
-                    :label='cfg.value.title'
-                    v-model='cfg.value.value'
-                    :hint='cfg.value.hint ? cfg.value.hint : ""'
-                    persistent-hint
-                    :class='cfg.value.hint ? "mb-2" : ""'
-                    )
-                  v-divider.my-3(v-if='idx < currentRenderer.config.length - 1')
-              v-card-chin
-                v-btn(
-                  color='primary'
-                  )
-                  v-icon(left) check
-                  span Apply Configuration
-                v-spacer
-                .caption.pr-3.grey--text Module: {{ currentRenderer.key }}
+          v-card-text.pb-4.pt-2.pl-4
+            v-subheader.pl-0 Rendering Module Configuration
+            .body-1.ml-3(v-if='!currentRenderer.config || currentRenderer.config.length < 1') This rendering module has no configuration options you can modify.
+            template(v-else, v-for='(cfg, idx) in currentRenderer.config')
+              v-select(
+                v-if='cfg.value.type === "string" && cfg.value.enum'
+                outline
+                background-color='grey lighten-2'
+                :items='cfg.value.enum'
+                :key='cfg.key'
+                :label='cfg.value.title'
+                v-model='cfg.value.value'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
+              )
+              v-switch(
+                v-else-if='cfg.value.type === "boolean"'
+                :key='cfg.key'
+                :label='cfg.value.title'
+                v-model='cfg.value.value'
+                color='primary'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                )
+              v-text-field(
+                v-else
+                outline
+                background-color='grey lighten-2'
+                :key='cfg.key'
+                :label='cfg.value.title'
+                v-model='cfg.value.value'
+                :hint='cfg.value.hint ? cfg.value.hint : ""'
+                persistent-hint
+                :class='cfg.value.hint ? "mb-2" : ""'
+                )
+              v-divider.my-3(v-if='idx < currentRenderer.config.length - 1')
+          v-card-chin
+            v-spacer
+            .caption.pr-3.grey--text Module: {{ currentRenderer.key }}
 </template>
 
 <script>
diff --git a/client/components/admin/admin-search.vue b/client/components/admin/admin-search.vue
index d8487015..25a81a5d 100644
--- a/client/components/admin/admin-search.vue
+++ b/client/components/admin/admin-search.vue
@@ -1,87 +1,89 @@
 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') search
-      .headline.primary--text Search Engine
-      .subheading.grey--text Configure the search capabilities of your wiki
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='settings'): v-icon settings
-      v-tab(v-for='engine in activeEngines', :key='engine.key') {{ engine.title }}
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') search
+          .admin-header-title
+            .headline.primary--text Search Engine
+            .subheading.grey--text Configure the search capabilities of your wiki
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='black', dark, large, depressed)
+            v-icon(left) cached
+            span Rebuild Index
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          .body-2.grey--text.text--darken-1 Select which search engine to enable:
-          .caption.grey--text.pb-2 Some search engines require additional configuration in their dedicated tab (when selected).
-          v-form
-            v-radio-group(v-model='selectedEngine')
-              v-radio.my-1(
-                v-for='(engine, n) in engines'
-                :key='engine.key'
-                :label='engine.title'
-                :value='engine.key'
-                color='primary'
-                hide-details
-              )
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='settings'): v-icon settings
+            v-tab(v-for='engine in activeEngines', :key='engine.key') {{ engine.title }}
 
-      v-tab-item(v-for='(engine, n) in activeEngines', :key='engine.key', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          v-form
-            .enginelogo
-              img(:src='engine.logo', :alt='engine.title')
-            v-subheader.pl-0 {{engine.title}}
-            .caption {{engine.description}}
-            .caption: a(:href='engine.website') {{engine.website}}
-            v-divider.mt-3
-            v-subheader.pl-0 Engine Configuration
-            .body-1.ml-3(v-if='!engine.config || engine.config.length < 1') This engine has no configuration options you can modify.
-            template(v-else, v-for='cfg in logger.config')
-              v-select(
-                v-if='cfg.value.type === "string" && cfg.value.enum'
-                outline
-                background-color='grey lighten-2'
-                :items='cfg.value.enum'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-              )
-              v-switch(
-                v-else-if='cfg.value.type === "boolean"'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                color='primary'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                )
-              v-text-field(
-                v-else
-                outline
-                background-color='grey lighten-2'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-                )
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-btn(color='black', dark)
-        v-icon(left) refresh
-        | Rebuild Index
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
+            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                .body-2.grey--text.text--darken-1 Select which search engine to enable:
+                .caption.grey--text.pb-2 Some search engines require additional configuration in their dedicated tab (when selected).
+                v-form
+                  v-radio-group(v-model='selectedEngine')
+                    v-radio.my-1(
+                      v-for='(engine, n) in engines'
+                      :key='engine.key'
+                      :label='engine.title'
+                      :value='engine.key'
+                      color='primary'
+                      hide-details
+                    )
 
+            v-tab-item(v-for='(engine, n) in activeEngines', :key='engine.key', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                v-form
+                  .enginelogo
+                    img(:src='engine.logo', :alt='engine.title')
+                  v-subheader.pl-0 {{engine.title}}
+                  .caption {{engine.description}}
+                  .caption: a(:href='engine.website') {{engine.website}}
+                  v-divider.mt-3
+                  v-subheader.pl-0 Engine Configuration
+                  .body-1.ml-3(v-if='!engine.config || engine.config.length < 1') This engine has no configuration options you can modify.
+                  template(v-else, v-for='cfg in logger.config')
+                    v-select(
+                      v-if='cfg.value.type === "string" && cfg.value.enum'
+                      outline
+                      background-color='grey lighten-2'
+                      :items='cfg.value.enum'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                    )
+                    v-switch(
+                      v-else-if='cfg.value.type === "boolean"'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      color='primary'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      )
+                    v-text-field(
+                      v-else
+                      outline
+                      background-color='grey lighten-2'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                      )
 </template>
 
 <script>
diff --git a/client/components/admin/admin-storage.vue b/client/components/admin/admin-storage.vue
index 9a8693dd..9013bd48 100644
--- a/client/components/admin/admin-storage.vue
+++ b/client/components/admin/admin-storage.vue
@@ -1,110 +1,112 @@
 <template lang='pug'>
-  v-card(tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"')
-    .pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') storage
-      .headline.primary--text Storage
-      .subheading.grey--text Set backup and sync targets for your content
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='settings'): v-icon settings
-      v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }}
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') storage
+          .admin-header-title
+            .headline.primary--text Storage
+            .subheading.grey--text Set backup and sync targets for your content
+          v-spacer
+          v-btn(outline, color='grey', @click='refresh', large)
+            v-icon refresh
+          v-btn(color='primary', @click='save', depressed, large)
+            v-icon(left) chevron_right
+            span Apply Configuration
 
-      v-tab-item(key='settings', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          .body-2.grey--text.text--darken-1 Select which storage targets to enable:
-          .caption.grey--text.pb-2 Some storage targets require additional configuration in their dedicated tab (when selected).
-          v-form
-            v-checkbox.my-0(
-              v-for='tgt in targets'
-              v-model='tgt.isEnabled'
-              :key='tgt.key'
-              :label='tgt.title'
-              color='primary'
-              hide-details
-            )
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='settings'): v-icon settings
+            v-tab(v-for='tgt in activeTargets', :key='tgt.key') {{ tgt.title }}
 
-      v-tab-item(v-for='(tgt, n) in activeTargets', :key='tgt.key', :transition='false', :reverse-transition='false')
-        v-card.pa-3(flat, tile)
-          v-form
-            .targetlogo
-              img(:src='tgt.logo', :alt='tgt.title')
-            v-subheader.pl-0 {{tgt.title}}
-            .caption {{tgt.description}}
-            .caption: a(:href='tgt.website') {{tgt.website}}
-            v-divider.mt-3
-            v-subheader.pl-0 Target Configuration
-            .body-1.ml-3(v-if='!tgt.config || tgt.config.length < 1') This storage target has no configuration options you can modify.
-            template(v-else, v-for='cfg in tgt.config')
-              v-select(
-                v-if='cfg.value.type === "string" && cfg.value.enum'
-                outline
-                background-color='grey lighten-2'
-                :items='cfg.value.enum'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-              )
-              v-switch(
-                v-else-if='cfg.value.type === "boolean"'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                color='primary'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                )
-              v-text-field(
-                v-else
-                outline
-                background-color='grey lighten-2'
-                :key='cfg.key'
-                :label='cfg.value.title'
-                v-model='cfg.value.value'
-                prepend-icon='settings_applications'
-                :hint='cfg.value.hint ? cfg.value.hint : ""'
-                persistent-hint
-                :class='cfg.value.hint ? "mb-2" : ""'
-                )
-            v-divider.mt-3
-            v-subheader.pl-0 Sync Direction
-            .body-1.ml-3 Choose how content synchronization is handled for this storage target.
-            .pr-3.pt-3
-              v-radio-group.ml-3.py-0(v-model='tgt.mode')
-                v-radio(
-                  label='Bi-directional'
-                  color='primary'
-                  value='sync'
-                )
-                v-radio(
-                  label='Push to target'
-                  color='primary'
-                  value='push'
-                )
-                v-radio(
-                  label='Pull from target'
-                  color='primary'
-                  value='pull'
-                )
-            .body-1.ml-3
-              strong Bi-directional
-              .pb-3 In bi-directional mode, content is first pulled from the storage target. Any newer content overwrites local content. New content since last sync is then pushed to the storage target, overwriting any content on target if present.
-              strong Push to target
-              .pb-3 Content is always pushed to the storage target, overwriting any existing content. This is the default and safest choice for backup scenarios.
-              strong Pull from target
-              .pb-3 Content is always pulled from the storage target, overwriting any local content which already exists. This choice is usually reserved for single-use content import. Caution with this option as any local content will always be overwritten!
-
-    v-card-chin
-      v-btn(color='primary', @click='save')
-        v-icon(left) chevron_right
-        span Apply Configuration
-      v-spacer
-      v-btn(icon, @click='refresh')
-        v-icon.grey--text refresh
+            v-tab-item(key='settings', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                .body-2.grey--text.text--darken-1 Select which storage targets to enable:
+                .caption.grey--text.pb-2 Some storage targets require additional configuration in their dedicated tab (when selected).
+                v-form
+                  v-checkbox.my-0(
+                    v-for='tgt in targets'
+                    v-model='tgt.isEnabled'
+                    :key='tgt.key'
+                    :label='tgt.title'
+                    color='primary'
+                    hide-details
+                  )
 
+            v-tab-item(v-for='(tgt, n) in activeTargets', :key='tgt.key', :transition='false', :reverse-transition='false')
+              v-card.pa-3(flat, tile)
+                v-form
+                  .targetlogo
+                    img(:src='tgt.logo', :alt='tgt.title')
+                  v-subheader.pl-0 {{tgt.title}}
+                  .caption {{tgt.description}}
+                  .caption: a(:href='tgt.website') {{tgt.website}}
+                  v-divider.mt-3
+                  v-subheader.pl-0 Target Configuration
+                  .body-1.ml-3(v-if='!tgt.config || tgt.config.length < 1') This storage target has no configuration options you can modify.
+                  template(v-else, v-for='cfg in tgt.config')
+                    v-select(
+                      v-if='cfg.value.type === "string" && cfg.value.enum'
+                      outline
+                      background-color='grey lighten-2'
+                      :items='cfg.value.enum'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                    )
+                    v-switch(
+                      v-else-if='cfg.value.type === "boolean"'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      color='primary'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      )
+                    v-text-field(
+                      v-else
+                      outline
+                      background-color='grey lighten-2'
+                      :key='cfg.key'
+                      :label='cfg.value.title'
+                      v-model='cfg.value.value'
+                      prepend-icon='settings_applications'
+                      :hint='cfg.value.hint ? cfg.value.hint : ""'
+                      persistent-hint
+                      :class='cfg.value.hint ? "mb-2" : ""'
+                      )
+                  v-divider.mt-3
+                  v-subheader.pl-0 Sync Direction
+                  .body-1.ml-3 Choose how content synchronization is handled for this storage target.
+                  .pr-3.pt-3
+                    v-radio-group.ml-3.py-0(v-model='tgt.mode')
+                      v-radio(
+                        label='Bi-directional'
+                        color='primary'
+                        value='sync'
+                      )
+                      v-radio(
+                        label='Push to target'
+                        color='primary'
+                        value='push'
+                      )
+                      v-radio(
+                        label='Pull from target'
+                        color='primary'
+                        value='pull'
+                      )
+                  .body-1.ml-3
+                    strong Bi-directional
+                    .pb-3 In bi-directional mode, content is first pulled from the storage target. Any newer content overwrites local content. New content since last sync is then pushed to the storage target, overwriting any content on target if present.
+                    strong Push to target
+                    .pb-3 Content is always pushed to the storage target, overwriting any existing content. This is the default and safest choice for backup scenarios.
+                    strong Pull from target
+                    .pb-3 Content is always pulled from the storage target, overwriting any local content which already exists. This choice is usually reserved for single-use content import. Caution with this option as any local content will always be overwritten!
 </template>
 
 <script>
diff --git a/client/components/admin/admin-system.vue b/client/components/admin/admin-system.vue
index 98b2159c..80c15eb8 100644
--- a/client/components/admin/admin-system.vue
+++ b/client/components/admin/admin-system.vue
@@ -1,10 +1,12 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row, wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') tune
-        .headline.primary--text {{ $t('admin:system.title') }}
-        .subheading.grey--text {{ $t('admin:system.subtitle') }}
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') tune
+          .admin-header-title
+            .headline.primary--text {{ $t('admin:system.title') }}
+            .subheading.grey--text {{ $t('admin:system.subtitle') }}
         v-layout.mt-3(row wrap)
           v-flex(lg6 xs12)
             v-card
diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue
index 6f6470df..2e53757d 100644
--- a/client/components/admin/admin-theme.vue
+++ b/client/components/admin/admin-theme.vue
@@ -1,10 +1,16 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .admin-header-icon: v-icon(size='80', color='grey lighten-2') palette
-        .headline.primary--text Theme
-        .subheading.grey--text Modify the look &amp; feel of your wiki
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') palette
+          .admin-header-title
+            .headline.primary--text Theme
+            .subheading.grey--text Modify the look &amp; feel of your wiki
+          v-spacer
+          v-btn(color='success', depressed, @click='save', large, :loading='loading')
+            v-icon(left) check
+            span {{$t('common:actions.apply')}}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -15,6 +21,8 @@
                 v-card-text
                   v-select(
                     :items='themes'
+                    outline
+                    background-color='grey lighten-2'
                     prepend-icon='palette'
                     v-model='selectedTheme'
                     label='Site Theme'
@@ -35,11 +43,6 @@
                     persistent-hint
                     hint='Not recommended for accessibility. May not be supported by all themes.'
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
@@ -57,7 +60,7 @@
                     )
                   v-textarea.mt-2(
                     v-model='injectHeader'
-                    label='Site Header'
+                    label='Head HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
@@ -67,7 +70,7 @@
                     )
                   v-textarea.mt-2(
                     v-model='injectFooter'
-                    label='Site Footer'
+                    label='Body HTML Injection'
                     outline
                     background-color='grey lighten-1'
                     color='primary'
@@ -75,11 +78,6 @@
                     hint='HTML code to be injected just before the closing body tag'
                     auto-grow
                     )
-                v-card-chin
-                  v-spacer
-                  v-btn(color='primary', :loading='loading', @click='save')
-                    v-icon(left) chevron_right
-                    span Save
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)
diff --git a/client/components/admin/admin-users.vue b/client/components/admin/admin-users.vue
index 7c258055..a1a1b7b7 100644
--- a/client/components/admin/admin-users.vue
+++ b/client/components/admin/admin-users.vue
@@ -1,66 +1,67 @@
 <template lang='pug'>
-  v-card(flat)
-    v-card(flat, tile, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') perm_identity
-      .headline.blue--text.text--darken-2 Users
-      .subheading.grey--text Manage users
-    v-card
-      v-card-title
-        v-btn(color='primary', dark)
-          v-icon(left) add
-          | New User
-        v-btn(color='primary', dark)
-          v-icon(left) lock_outline
-          | Authorize User
-        v-btn(icon)
-          v-icon.grey--text refresh
-        v-spacer
-        v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search')
-      v-data-table(
-        v-model='selected'
-        :items='items',
-        :headers='headers',
-        :search='search',
-        :pagination.sync='pagination',
-        :rows-per-page-items='[15]'
-        select-all,
-        hide-actions,
-        disable-initial-sort
-      )
-        template(slot='headers', slot-scope='props')
-          tr
-            th(width='50')
-            th.text-xs-right(
-              width='80'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
-              @click='changeSort(`id`)'
-            )
-              v-icon(small) arrow_upward
-              | ID
-            th.text-xs-left(
-              v-for='header in props.headers'
-              :key='header.text'
-              :width='header.width'
-              :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-              @click='changeSort(header.value)'
-            )
-              | {{ header.text }}
-              v-icon(small) arrow_upward
-        template(slot='items', slot-scope='props')
-          tr(:active='props.selected')
-            td
-              v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
-            td.text-xs-right {{ props.item.id }}
-            td {{ props.item.email }}
-            td {{ props.item.name }}
-            td {{ props.item.provider }}
-            td {{ props.item.createdOn }}
-            td {{ props.item.updatedOn }}
-            td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
-        template(slot='no-data')
-          v-alert(icon='warning', :value='true') No users to display!
-      .text-xs-center.py-2
-        v-pagination(v-model='pagination.page', :length='pages')
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') perm_identity
+          .admin-header-title
+            .headline.blue--text.text--darken-2 Users
+            .subheading.grey--text Manage users
+          v-spacer
+          v-btn(outline, color='grey', large)
+            v-icon refresh
+          v-btn(color='primary', large, depressed)
+            v-icon(left) lock_outline
+            span Authorize User
+          v-btn(color='primary', large, depressed)
+            v-icon(left) add
+            span New User
+        v-card.mt-3
+          v-data-table(
+            v-model='selected'
+            :items='items',
+            :headers='headers',
+            :search='search',
+            :pagination.sync='pagination',
+            :rows-per-page-items='[15]'
+            select-all,
+            hide-actions,
+            disable-initial-sort
+          )
+            template(slot='headers', slot-scope='props')
+              tr
+                th(width='50')
+                th.text-xs-right(
+                  width='80'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]'
+                  @click='changeSort(`id`)'
+                )
+                  v-icon(small) arrow_upward
+                  | ID
+                th.text-xs-left(
+                  v-for='header in props.headers'
+                  :key='header.text'
+                  :width='header.width'
+                  :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
+                  @click='changeSort(header.value)'
+                )
+                  | {{ header.text }}
+                  v-icon(small) arrow_upward
+            template(slot='items', slot-scope='props')
+              tr(:active='props.selected')
+                td
+                  v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected')
+                td.text-xs-right {{ props.item.id }}
+                td {{ props.item.email }}
+                td {{ props.item.name }}
+                td {{ props.item.provider }}
+                td {{ props.item.createdOn }}
+                td {{ props.item.updatedOn }}
+                td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz
+            template(slot='no-data')
+              v-alert(icon='warning', :value='true') No users to display!
+          .text-xs-center.py-2
+            v-pagination(v-model='pagination.page', :length='pages')
 </template>
 
 <script>
diff --git a/client/components/admin/admin-utilities.vue b/client/components/admin/admin-utilities.vue
index 37ea70ed..17142bed 100644
--- a/client/components/admin/admin-utilities.vue
+++ b/client/components/admin/admin-utilities.vue
@@ -1,142 +1,147 @@
 <template lang='pug'>
-  div
-    v-card(flat, :color='$vuetify.dark ? "grey darken-4" : "grey lighten-5"').pa-3.pt-4
-      .admin-header-icon: v-icon(size='80', color='grey lighten-2') build
-      .headline.primary--text Utilities
-      .subheading.grey--text Maintenance and troubleshooting tools
-    v-tabs(:color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
-      v-tab(key='tools') Tools
-      v-tab(key='cache') Cache
-      v-tab(key='telemetry') Telemetry
-      v-tab(key='support') Support
+  v-container(fluid, grid-list-lg)
+    v-layout(row, wrap)
+      v-flex(xs12)
+        .admin-header
+          v-icon(size='80', color='grey lighten-2') build
+          .admin-header-title
+            .headline.primary--text Utilities
+            .subheading.grey--text Maintenance and troubleshooting tools
 
-      v-tab-item(key='tools', :transition='false', :reverse-transition='false')
-        v-container(fluid, grid-list-lg, :class='$vuetify.dark ? "" : "grey lighten-5"')
-          v-layout(row, wrap)
-            v-flex(xs12, sm6)
+        v-card.mt-3
+          v-tabs(color='grey darken-2', fixed-tabs, slider-color='white', show-arrows, dark)
+            v-tab(key='tools') Tools
+            v-tab(key='cache') Cache
+            v-tab(key='telemetry') Telemetry
+            v-tab(key='support') Support
+
+            v-tab-item(key='tools', :transition='false', :reverse-transition='false')
+              v-container.pa-2(fluid, grid-list-sm, :class='$vuetify.dark ? "" : "grey lighten-5"')
+                v-layout(row, wrap)
+                  v-flex(xs12, sm6)
+                    v-card
+                      v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
+                        v-toolbar-title
+                          .subheading Authentication
+                      v-subheader Flush User Sessions
+                      v-card-text.pt-0.pl-4
+                        .body-1 This will cause all users to be logged out. You will need to log back in after the operation.
+                        v-btn(depressed).ml-0
+                          v-icon(left, color='grey') build
+                          span Proceed
+                      v-divider.my-0
+                      v-subheader Reset Guest User
+                      v-card-text.pt-0.pl-4
+                        .body-1 This will reset the guest user to its default parameters and permissions.
+                        v-btn(depressed).ml-0
+                          v-icon(left, color='grey') build
+                          span Proceed
+                    v-card.mt-3
+                      v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
+                        v-toolbar-title
+                          .subheading Modules
+                      v-subheader Rescan Modules
+                      v-card-text.pt-0.pl-4
+                        .body-1 Look for new modules on disk. Existing configurations will be merged.
+                        v-select.mt-3(
+                          v-model='rescanModuleType'
+                          :items='moduleTypes'
+                          label='Modules Type'
+                          outline
+                          background-color='grey lighten-1'
+                          hide-details
+                          dense
+                        )
+                        v-btn.ml-0(color='primary', depressed, dark)
+                          v-icon(left) chevron_right
+                          span Rescan
+                  v-flex(xs12, sm6)
+                    v-card
+                      v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
+                        v-toolbar-title
+                          .subheading Maintenance Mode
+                      v-card-text
+                        .body-1 Maintenance mode restrict access to the site to administrators only, regarless of current permissions.
+                        v-btn.mt-3.ml-0(color='orange darken-2', depressed, dark)
+                          icon-home-alert.mr-2(fillColor='#FFFFFF')
+                          | Turn On Maintenance Mode
+                    v-card.mt-3
+                      v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
+                        v-toolbar-title
+                          .subheading Graph Endpoint
+                      v-card-text
+                        .body-1 The Graph API Endpoint from which remote resources like locales, themes and plugins are fetched.
+                        .caption.red--text Do not change unless you know what you're doing!
+                        v-text-field.my-2(outline, hide-details, background-color='grey lighten-1', label='Graph Endpoint', value='https://graph.requarks.io')
+                        v-btn.ml-0(color='primary', depressed, dark)
+                          v-icon(left) chevron_right
+                          span Save
+
+            v-tab-item(key='telemetry', :transition='false', :reverse-transition='false')
               v-card
-                v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
-                  v-toolbar-title
-                    .subheading Authentication
-                v-subheader Flush User Sessions
-                v-card-text.pt-0.pl-4
-                  .body-1 This will cause all users to be logged out. You will need to log back in after the operation.
-                  v-btn(depressed).ml-0
-                    v-icon(left, color='grey') build
-                    span Proceed
-                v-divider.my-0
-                v-subheader Reset Guest User
-                v-card-text.pt-0.pl-4
-                  .body-1 This will reset the guest user to its default parameters and permissions.
-                  v-btn(depressed).ml-0
-                    v-icon(left, color='grey') build
-                    span Proceed
-              v-card.mt-3
-                v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
-                  v-toolbar-title
-                    .subheading Modules
-                v-subheader Rescan Modules
-                v-card-text.pt-0.pl-4
-                  .body-1 Look for new modules on disk. Existing configurations will be merged.
-                  v-select.mt-3(
-                    v-model='rescanModuleType'
-                    :items='moduleTypes'
-                    label='Modules Type'
-                    outline
-                    background-color='grey lighten-1'
-                    hide-details
-                    dense
-                  )
-                  v-btn.ml-0(color='primary', depressed, dark)
-                    v-icon(left) chevron_right
-                    span Rescan
-            v-flex(xs12, sm6)
-              v-card
-                v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
-                  v-toolbar-title
-                    .subheading Maintenance Mode
-                v-card-text
-                  .body-1 Maintenance mode restrict access to the site to administrators only, regarless of current permissions.
-                  v-btn.mt-3.ml-0(color='orange darken-2', depressed, dark)
-                    icon-home-alert.mr-2(fillColor='#FFFFFF')
-                    | Turn On Maintenance Mode
-              v-card.mt-3
-                v-toolbar(:color='$vuetify.dark ? "" : "grey darken-3"', dark, dense, flat)
-                  v-toolbar-title
-                    .subheading Graph Endpoint
-                v-card-text
-                  .body-1 The Graph API Endpoint from which remote resources like locales, themes and plugins are fetched.
-                  .caption.red--text Do not change unless you know what you're doing!
-                  v-text-field.my-2(outline, hide-details, background-color='grey lighten-1', label='Graph Endpoint', value='https://graph.requarks.io')
-                  v-btn.ml-0(color='primary', depressed, dark)
-                    v-icon(left) chevron_right
-                    span Save
+                v-form
+                  v-card-text
+                    v-subheader What is telemetry?
+                    .body-1.pl-3 Telemetry allows the developers of Wiki.js to improve the software by collecting basic anonymized data about its usage and the host info. #[br] This is entirely optional and #[strong absolutely no] private data (such as content or personal data) is collected.
+                    .body-1.pt-3.pl-3 For maximum privacy, a random client ID is generated every time Wiki.js is started. This ID is used to group requests together while keeping complete anonymity.
+                    v-divider.my-3
+                    v-subheader What is collected?
+                    .body-1.pl-3 When telemetry is enabled, only the following data is transmitted:
+                    v-list(dense)
+                      v-list-tile
+                        v-list-tile-avatar: v-icon info_outline
+                        v-list-tile-content: v-list-tile-title.caption Version of Wiki.js installed
+                      v-list-tile
+                        v-list-tile-avatar: v-icon info_outline
+                        v-list-tile-content: v-list-tile-title.caption Basic OS information (version, CPU cores, RAM available)
+                      v-list-tile
+                        v-list-tile-avatar: v-icon info_outline
+                        v-list-tile-content: v-list-tile-title.caption Crash debug data
+                      v-list-tile
+                        v-list-tile-avatar: v-icon info_outline
+                        v-list-tile-content: v-list-tile-title.caption Setup analytics (step reached)
+                    .body-2.pl-3
+                    v-divider.my-3
+                    v-subheader Settings
+                    .pl-3
+                      v-switch.mt-0(
+                        v-model='telemetry',
+                        label='Enable Telemetry',
+                        :value='true',
+                        color='primary',
+                        hint='Allow Wiki.js to transmit telemetry data.',
+                        persistent-hint
+                      )
+                      .subheading.mt-3.grey--text.text--darken-1 Client ID
+                      .body-1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+                  v-card-chin
+                    v-btn(color='primary')
+                      v-icon(left) chevron_right
+                      | Save Changes
+                    v-spacer
+                    v-btn(outline, color='grey')
+                      v-icon(left) autorenew
+                      span Reset Client ID
 
-      v-tab-item(key='telemetry', :transition='false', :reverse-transition='false')
-        v-card
-          v-form
-            v-card-text
-              v-subheader What is telemetry?
-              .body-1.pl-3 Telemetry allows the developers of Wiki.js to improve the software by collecting basic anonymized data about its usage and the host info. #[br] This is entirely optional and #[strong absolutely no] private data (such as content or personal data) is collected.
-              .body-1.pt-3.pl-3 For maximum privacy, a random client ID is generated every time Wiki.js is started. This ID is used to group requests together while keeping complete anonymity.
-              v-divider.my-3
-              v-subheader What is collected?
-              .body-1.pl-3 When telemetry is enabled, only the following data is transmitted:
-              v-list(dense)
-                v-list-tile
-                  v-list-tile-avatar: v-icon info_outline
-                  v-list-tile-content: v-list-tile-title.caption Version of Wiki.js installed
-                v-list-tile
-                  v-list-tile-avatar: v-icon info_outline
-                  v-list-tile-content: v-list-tile-title.caption Basic OS information (version, CPU cores, RAM available)
-                v-list-tile
-                  v-list-tile-avatar: v-icon info_outline
-                  v-list-tile-content: v-list-tile-title.caption Crash debug data
-                v-list-tile
-                  v-list-tile-avatar: v-icon info_outline
-                  v-list-tile-content: v-list-tile-title.caption Setup analytics (step reached)
-              .body-2.pl-3
-              v-divider.my-3
-              v-subheader Settings
-              .pl-3
-                v-switch.mt-0(
-                  v-model='telemetry',
-                  label='Enable Telemetry',
-                  :value='true',
-                  color='primary',
-                  hint='Allow Wiki.js to transmit telemetry data.',
-                  persistent-hint
-                )
-                .subheading.mt-3.grey--text.text--darken-1 Client ID
-                .body-1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-            v-card-chin
-              v-btn(color='primary')
-                v-icon(left) chevron_right
-                | Save Changes
-              v-spacer
-              v-btn(outline, color='grey')
-                v-icon(left) autorenew
-                span Reset Client ID
-
-      v-tab-item(key='support', :transition='false', :reverse-transition='false')
-        v-card.pa-3
-          v-subheader Report a bug
-          .body-1.pl-3 Bugs can be reported using GitHub issues on the project repository page.
-          v-btn.ml-3.mt-3(depressed, dark, color='grey darken-2', href='https://github.com/Requarks/wiki/issues', target='_blank')
-            icon-github-circle.mr-3(fillColor='#FFFFFF')
-            span Submit an issue
-          v-divider.my-3
-          v-subheader Suggest a New Feature / Enhancement
-          .body-1.pl-3 Have an idea for a new feature or something that could be improved?
-          v-btn.ml-3.mt-3(depressed, dark, color='indigo', href='https://requests.requarks.io/wiki', target='_blank')
-            v-icon(left) lightbulb_outline
-            span Submit an idea
-          v-divider.my-3
-          v-subheader Questions / Comments
-          .body-1.pl-3 Join our gitter channel. We are very active and friendly!
-          v-btn.ml-3.mt-3(depressed, dark, color='pink', href='https://gitter.im/Requarks/wiki', target='_blank')
-            v-icon(left) chat
-            span Launch Gitter
+            v-tab-item(key='support', :transition='false', :reverse-transition='false')
+              v-card.pa-3
+                v-subheader Report a bug
+                .body-1.pl-3 Bugs can be reported using GitHub issues on the project repository page.
+                v-btn.ml-3.mt-3(depressed, dark, color='grey darken-2', href='https://github.com/Requarks/wiki/issues', target='_blank')
+                  icon-github-circle.mr-3(fillColor='#FFFFFF')
+                  span Submit an issue
+                v-divider.my-3
+                v-subheader Suggest a New Feature / Enhancement
+                .body-1.pl-3 Have an idea for a new feature or something that could be improved?
+                v-btn.ml-3.mt-3(depressed, dark, color='indigo', href='https://requests.requarks.io/wiki', target='_blank')
+                  v-icon(left) lightbulb_outline
+                  span Submit an idea
+                v-divider.my-3
+                v-subheader Questions / Comments
+                .body-1.pl-3 Join our gitter channel. We are very active and friendly!
+                v-btn.ml-3.mt-3(depressed, dark, color='pink', href='https://gitter.im/Requarks/wiki', target='_blank')
+                  v-icon(left) chat
+                  span Launch Gitter
 
 </template>