From 17244a0cb3bd72af08d0ccb2017ec856c29e9079 Mon Sep 17 00:00:00 2001
From: Nicolas Giard <github@ngpixel.com>
Date: Sat, 15 Dec 2018 17:15:13 -0500
Subject: [PATCH] feat: user edit UI + admin UI improvements + fixes

---
 client/components/admin.vue                   |  34 +-
 client/components/admin/admin-api.vue         |   2 +-
 client/components/admin/admin-auth.vue        |   2 +-
 client/components/admin/admin-contribute.vue  |   2 +-
 client/components/admin/admin-dashboard.vue   |  25 +-
 client/components/admin/admin-dev.vue         |   2 +-
 client/components/admin/admin-editor.vue      |   2 +-
 client/components/admin/admin-general.vue     |   6 +-
 client/components/admin/admin-groups-edit.vue |   8 +-
 client/components/admin/admin-groups.vue      |   2 +-
 client/components/admin/admin-locale.vue      |   2 +-
 client/components/admin/admin-logging.vue     |   2 +-
 client/components/admin/admin-navigation.vue  |   2 +-
 client/components/admin/admin-pages.vue       |   2 +-
 client/components/admin/admin-rendering.vue   |   2 +-
 client/components/admin/admin-search.vue      |   2 +-
 client/components/admin/admin-storage.vue     |   2 +-
 client/components/admin/admin-system.vue      |   2 +-
 client/components/admin/admin-theme.vue       |   2 +-
 client/components/admin/admin-users-edit.vue  | 291 ++++++++++--------
 client/components/admin/admin-users.vue       |  22 +-
 client/components/admin/admin-utilities.vue   |   2 +-
 client/components/common/nav-header.vue       |   5 +-
 client/components/common/page-selector.vue    |  50 ++-
 client/components/common/v-card-chin.vue      |   2 +-
 client/components/editor.vue                  |  24 +-
 .../editor/editor-modal-properties.vue        |  12 +-
 client/graph/admin/users/users-query-list.gql |   1 +
 .../graph/admin/users/users-query-single.gql  |  21 ++
 client/scss/components/v-dialog.scss          |   6 +
 client/scss/pages/_new.scss                   |   4 +-
 client/static/img/icon-browse.png             | Bin 0 -> 3106 bytes
 client/static/img/icon-people.png             | Bin 0 -> 5006 bytes
 client/static/img/icon-unlock.png             | Bin 0 -> 4343 bytes
 client/static/svg/icon-browse-page.svg        |  57 ++++
 client/static/svg/icon-categorize.svg         |  57 ++++
 client/static/svg/icon-close-window.svg       |  52 ++++
 client/static/svg/icon-cloud-storage.svg      |  29 ++
 client/static/svg/icon-console.svg            |  47 +++
 client/static/svg/icon-customer.svg           |  27 ++
 client/static/svg/icon-file.svg               |   1 +
 client/static/svg/icon-gear-outline.svg       |  37 +++
 client/static/svg/icon-globe-earth.svg        |  27 ++
 client/static/svg/icon-heart-health.svg       |  22 ++
 client/static/svg/icon-maintenance.svg        |  27 ++
 client/static/svg/icon-male-user.svg          |  27 ++
 client/static/svg/icon-markdown.svg           |  27 ++
 client/static/svg/icon-open-in-browser.svg    |  67 ++++
 client/static/svg/icon-paint-palette.svg      |  37 +++
 client/static/svg/icon-people.svg             |  32 ++
 client/static/svg/icon-process.svg            |  37 +++
 client/static/svg/icon-registry-editor.svg    |  52 ++++
 client/static/svg/icon-rest-api.svg           |  17 +
 client/static/svg/icon-search.svg             |   1 +
 client/static/svg/icon-settings.svg           |  27 ++
 client/static/svg/icon-social-group.svg       |  32 ++
 client/static/svg/icon-source-code.svg        |  42 +++
 client/static/svg/icon-triangle-arrow.svg     |  17 +
 client/static/svg/icon-tune.svg               |  42 +++
 client/static/svg/icon-unlock.svg             |  17 +
 client/static/svg/icon-web-design.svg         |  42 +++
 client/store/admin.js                         |   8 +-
 dev/docker/docker-compose.yml                 |  11 +
 server/app/data.yml                           |   3 +
 server/db/migrations/2.0.0.js                 |   1 +
 server/graph/resolvers/user.js                |   8 +-
 server/graph/schemas/user.graphql             |  20 +-
 server/models/users.js                        |   1 +
 server/setup.js                               |   5 +-
 server/views/new.pug                          |   4 +-
 70 files changed, 1272 insertions(+), 231 deletions(-)
 create mode 100644 client/graph/admin/users/users-query-single.gql
 create mode 100644 client/static/img/icon-browse.png
 create mode 100644 client/static/img/icon-people.png
 create mode 100644 client/static/img/icon-unlock.png
 create mode 100644 client/static/svg/icon-browse-page.svg
 create mode 100644 client/static/svg/icon-categorize.svg
 create mode 100644 client/static/svg/icon-close-window.svg
 create mode 100644 client/static/svg/icon-cloud-storage.svg
 create mode 100644 client/static/svg/icon-console.svg
 create mode 100644 client/static/svg/icon-customer.svg
 create mode 100644 client/static/svg/icon-file.svg
 create mode 100644 client/static/svg/icon-gear-outline.svg
 create mode 100644 client/static/svg/icon-globe-earth.svg
 create mode 100644 client/static/svg/icon-heart-health.svg
 create mode 100644 client/static/svg/icon-maintenance.svg
 create mode 100644 client/static/svg/icon-male-user.svg
 create mode 100644 client/static/svg/icon-markdown.svg
 create mode 100644 client/static/svg/icon-open-in-browser.svg
 create mode 100644 client/static/svg/icon-paint-palette.svg
 create mode 100644 client/static/svg/icon-people.svg
 create mode 100644 client/static/svg/icon-process.svg
 create mode 100644 client/static/svg/icon-registry-editor.svg
 create mode 100644 client/static/svg/icon-rest-api.svg
 create mode 100644 client/static/svg/icon-search.svg
 create mode 100644 client/static/svg/icon-settings.svg
 create mode 100644 client/static/svg/icon-social-group.svg
 create mode 100644 client/static/svg/icon-source-code.svg
 create mode 100644 client/static/svg/icon-triangle-arrow.svg
 create mode 100644 client/static/svg/icon-tune.svg
 create mode 100644 client/static/svg/icon-unlock.svg
 create mode 100644 client/static/svg/icon-web-design.svg

diff --git a/client/components/admin.vue b/client/components/admin.vue
index 227f8ab7..aed83164 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -23,7 +23,7 @@
             v-list-tile-title {{ $t('admin:pages.title') }}
             v-list-tile-action
               v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
-                .caption.grey--text 123
+                .caption.grey--text {{ info.pagesTotal }}
           v-list-tile(to='/theme')
             v-list-tile-avatar: v-icon palette
             v-list-tile-title {{ $t('admin:theme.title') }}
@@ -32,12 +32,15 @@
           v-list-tile(to='/groups')
             v-list-tile-avatar: v-icon people
             v-list-tile-title {{ $t('admin:groups.title') }}
+            v-list-tile-action
+              v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
+                .caption.grey--text {{ info.groupsTotal }}
           v-list-tile(to='/users')
             v-list-tile-avatar: v-icon perm_identity
             v-list-tile-title {{ $t('admin:users.title') }}
             v-list-tile-action
               v-chip(small, disabled, :color='darkMode ? `grey darken-3-d4` : `grey lighten-4`')
-                .caption.grey--text 1
+                .caption.grey--text {{ info.usersTotal }}
           v-divider.my-2
           v-subheader.pl-4 {{ $t('admin:nav.modules') }}
           v-list-tile(to='/auth')
@@ -86,7 +89,15 @@
 
 <script>
 import VueRouter from 'vue-router'
-import { get } from 'vuex-pathify'
+import { get, sync } from 'vuex-pathify'
+
+import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
+
+import adminStore from '@/store/admin'
+
+/* global WIKI */
+
+WIKI.$store.registerModule('admin', adminStore)
 
 const router = new VueRouter({
   mode: 'history',
@@ -102,6 +113,7 @@ const router = new VueRouter({
     { path: '/groups', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups.vue') },
     { path: '/groups/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-groups-edit.vue') },
     { path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users.vue') },
+    { path: '/users/:id', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-users-edit.vue') },
     { path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-auth.vue') },
     { path: '/rendering', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-rendering.vue') },
     { path: '/editor', component: () => import(/* webpackChunkName: "admin" */ './admin/admin-editor.vue') },
@@ -144,11 +156,25 @@ export default {
     }
   },
   computed: {
-    darkMode: get('site/dark')
+    darkMode: get('site/dark'),
+    info: sync('admin/info')
   },
   router,
   created() {
     this.$store.commit('page/SET_MODE', 'admin')
+  },
+  apollo: {
+    info: {
+      query: statsQuery,
+      fetchPolicy: 'network-only',
+      manual: true,
+      result({ data, loading, networkStatus }) {
+        this.info = data.system.info
+      },
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-stats-refresh')
+      }
+    }
   }
 }
 </script>
diff --git a/client/components/admin/admin-api.vue b/client/components/admin/admin-api.vue
index 2c16288f..0e7d7dd3 100644
--- a/client/components/admin/admin-api.vue
+++ b/client/components/admin/admin-api.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') call_split
+          img(src='/svg/icon-rest-api.svg', alt='API', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 API
             .subheading.grey--text Manage keys to access the API
diff --git a/client/components/admin/admin-auth.vue b/client/components/admin/admin-auth.vue
index 777d8966..65c2cd43 100644
--- a/client/components/admin/admin-auth.vue
+++ b/client/components/admin/admin-auth.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') lock_outline
+          img(src='/svg/icon-unlock.svg', alt='Authentication', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Authentication
             .subheading.grey--text Configure the authentication settings of your wiki
diff --git a/client/components/admin/admin-contribute.vue b/client/components/admin/admin-contribute.vue
index 7760347d..1df9813d 100644
--- a/client/components/admin/admin-contribute.vue
+++ b/client/components/admin/admin-contribute.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') favorite
+          img(src='/svg/icon-heart-health.svg', alt='Contribute', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:contribute.title') }}
             .subheading.grey--text {{ $t('admin:contribute.subtitle') }}
diff --git a/client/components/admin/admin-dashboard.vue b/client/components/admin/admin-dashboard.vue
index d70d6d61..4108f531 100644
--- a/client/components/admin/admin-dashboard.vue
+++ b/client/components/admin/admin-dashboard.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') dashboard
+          img(src='/svg/icon-browse-page.svg', alt='Dashboard', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:dashboard.title') }}
             .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
@@ -92,8 +92,7 @@
 
 <script>
 import AnimatedNumber from 'animated-number-vue'
-
-import statsQuery from 'gql/admin/dashboard/dashboard-query-stats.gql'
+import { get } from 'vuex-pathify'
 
 export default {
   components: {
@@ -101,13 +100,6 @@ export default {
   },
   data() {
     return {
-      info: {
-        currentVersion: 'n/a',
-        latestVersion: 'n/a',
-        groupsTotal: 0,
-        pagesTotal: 0,
-        usersTotal: 0
-      },
       recentPages: [],
       popularPages: []
     }
@@ -115,20 +107,11 @@ export default {
   computed: {
     isLatestVersion() {
       return this.info.currentVersion === this.info.latestVersion
-    }
+    },
+    info: get('admin/info')
   },
   methods: {
     round(val) { return Math.round(val) }
-  },
-  apollo: {
-    info: {
-      query: statsQuery,
-      fetchPolicy: 'network-only',
-      update: (data) => data.system.info,
-      watchLoading (isLoading) {
-        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-system-refresh')
-      }
-    }
   }
 }
 </script>
diff --git a/client/components/admin/admin-dev.vue b/client/components/admin/admin-dev.vue
index f28ec7c4..784af487 100644
--- a/client/components/admin/admin-dev.vue
+++ b/client/components/admin/admin-dev.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') weekend
+          img(src='/svg/icon-console.svg', alt='Developer Tools', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Developer Tools
             .subheading.grey--text ¯\_(ツ)_/¯
diff --git a/client/components/admin/admin-editor.vue b/client/components/admin/admin-editor.vue
index 94a1e2cc..fa1d4ff2 100644
--- a/client/components/admin/admin-editor.vue
+++ b/client/components/admin/admin-editor.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') transform
+          img(src='/svg/icon-web-design.svg', alt='Editor', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Editor
             .subheading.grey--text Configure the content editor
diff --git a/client/components/admin/admin-general.vue b/client/components/admin/admin-general.vue
index c9cdc436..c660a2dd 100644
--- a/client/components/admin/admin-general.vue
+++ b/client/components/admin/admin-general.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') widgets
+          img(src='/svg/icon-categorize.svg', alt='General', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:general.title') }}
             .subheading.grey--text {{ $t('admin:general.subtitle') }}
@@ -60,7 +60,7 @@
                       outline
                       label='Google Analytics ID'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='timeline'
                       persistent-hint
                       hint='Property tracking ID for Google Analytics.'
                       )
@@ -72,7 +72,7 @@
                       label='Company / Organization Name'
                       v-model='company'
                       :counter='255'
-                      prepend-icon='public'
+                      prepend-icon='business'
                       persistent-hint
                       hint='Name to use when displaying copyright notice in the footer. Leave empty to hide.'
                       )
diff --git a/client/components/admin/admin-groups-edit.vue b/client/components/admin/admin-groups-edit.vue
index f84f1842..007aa1dc 100644
--- a/client/components/admin/admin-groups-edit.vue
+++ b/client/components/admin/admin-groups-edit.vue
@@ -3,11 +3,13 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-social-group.svg', alt='Edit Group', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Edit Group
             .subheading.grey--text {{name}}
           v-spacer
+          .caption.grey--text ID #[strong {{group.id}}]
+          v-divider.mx-3(vertical)
           v-btn(color='indigo', large, outline, to='/groups')
             v-icon arrow_back
           v-dialog(v-model='deleteGroupDialog', max-width='500', v-if='!group.isSystem')
@@ -24,7 +26,7 @@
             v-icon(left) check
             span Update Group
         v-card.mt-3
-          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey lighten-4"', fixed-tabs, :slider-color='$vuetify.dark ? "white" : "primary"', show-arrows)
+          v-tabs(v-model='tab', :color='$vuetify.dark ? "primary" : "grey darken-2"', fixed-tabs, slider-color='white', show-arrows, dark)
             v-tab(key='properties') Properties
             v-tab(key='permissions') Permissions
             v-tab(key='rules') Page Rules
@@ -41,8 +43,6 @@
                     counter='255'
                     prepend-icon='people'
                     )
-                  v-divider
-                  .caption.mt-3.grey--text ID: {{group.id}}
 
             v-tab-item(key='permissions', :transition='false', :reverse-transition='false')
               v-container.pa-3(fluid, grid-list-md)
diff --git a/client/components/admin/admin-groups.vue b/client/components/admin/admin-groups.vue
index 610c0a39..7ed7399c 100644
--- a/client/components/admin/admin-groups.vue
+++ b/client/components/admin/admin-groups.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') people
+          img(src='/svg/icon-people.svg', alt='Groups', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Groups
             .subheading.grey--text Manage groups and their permissions
diff --git a/client/components/admin/admin-locale.vue b/client/components/admin/admin-locale.vue
index 3e76f1f4..888b581f 100644
--- a/client/components/admin/admin-locale.vue
+++ b/client/components/admin/admin-locale.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') language
+          img(src='/svg/icon-globe-earth.svg', alt='Locale', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:locale.title') }}
             .subheading.grey--text {{ $t('admin:locale.subtitle') }}
diff --git a/client/components/admin/admin-logging.vue b/client/components/admin/admin-logging.vue
index 5a0be3c8..7244cd85 100644
--- a/client/components/admin/admin-logging.vue
+++ b/client/components/admin/admin-logging.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') graphic_eq
+          img(src='/svg/icon-registry-editor.svg', alt='Logging', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Logging
             .subheading.grey--text Configure the system logger(s)
diff --git a/client/components/admin/admin-navigation.vue b/client/components/admin/admin-navigation.vue
index 3762a51b..3f106ab8 100644
--- a/client/components/admin/admin-navigation.vue
+++ b/client/components/admin/admin-navigation.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') near_me
+          img(src='/svg/icon-triangle-arrow.svg', alt='Navigation', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{$t('navigation.title')}}
             .subheading.grey--text {{$t('navigation.subtitle')}}
diff --git a/client/components/admin/admin-pages.vue b/client/components/admin/admin-pages.vue
index 29ce64b3..1b884364 100644
--- a/client/components/admin/admin-pages.vue
+++ b/client/components/admin/admin-pages.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') insert_drive_file
+          img(src='/svg/icon-file.svg', alt='Page', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Pages
             .subheading.grey--text Manage pages
diff --git a/client/components/admin/admin-rendering.vue b/client/components/admin/admin-rendering.vue
index 46289e7a..ef52e02a 100644
--- a/client/components/admin/admin-rendering.vue
+++ b/client/components/admin/admin-rendering.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') system_update_alt
+          img(src='/svg/icon-process.svg', alt='Rendering', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Rendering
             .subheading.grey--text Configure how content is rendered
diff --git a/client/components/admin/admin-search.vue b/client/components/admin/admin-search.vue
index 9c9979b9..c97a77c5 100644
--- a/client/components/admin/admin-search.vue
+++ b/client/components/admin/admin-search.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') search
+          img(src='/svg/icon-search.svg', alt='Search Engine', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Search Engine
             .subheading.grey--text Configure the search capabilities of your wiki
diff --git a/client/components/admin/admin-storage.vue b/client/components/admin/admin-storage.vue
index e5a85a46..c2412ccf 100644
--- a/client/components/admin/admin-storage.vue
+++ b/client/components/admin/admin-storage.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') storage
+          img(src='/svg/icon-cloud-storage.svg', alt='Storage', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Storage
             .subheading.grey--text Set backup and sync targets for your content
diff --git a/client/components/admin/admin-system.vue b/client/components/admin/admin-system.vue
index 80c15eb8..3e59b5b0 100644
--- a/client/components/admin/admin-system.vue
+++ b/client/components/admin/admin-system.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') tune
+          img(src='/svg/icon-tune.svg', alt='System Info', style='width: 80px;')
           .admin-header-title
             .headline.primary--text {{ $t('admin:system.title') }}
             .subheading.grey--text {{ $t('admin:system.subtitle') }}
diff --git a/client/components/admin/admin-theme.vue b/client/components/admin/admin-theme.vue
index 25bd9040..1428c1c3 100644
--- a/client/components/admin/admin-theme.vue
+++ b/client/components/admin/admin-theme.vue
@@ -3,7 +3,7 @@
     v-layout(row wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') palette
+          img(src='/svg/icon-paint-palette.svg', alt='Theme', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Theme
             .subheading.grey--text Modify the look &amp; feel of your wiki
diff --git a/client/components/admin/admin-users-edit.vue b/client/components/admin/admin-users-edit.vue
index bef7c233..4a5b6085 100644
--- a/client/components/admin/admin-users-edit.vue
+++ b/client/components/admin/admin-users-edit.vue
@@ -3,148 +3,193 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-male-user.svg', alt='Edit User', style='width: 80px;')
           .admin-header-title
-            .headline.blue--text.text--darken-2 Users
-            .subheading.grey--text Manage users
+            .headline.blue--text.text--darken-2 Edit User
+            .subheading.grey--text {{user.name}}
           v-spacer
-          v-btn(outline, color='grey', large, @click='refresh')
-            v-icon refresh
-          v-btn(color='primary', large, depressed, @click='authorizeUser')
-            v-icon(left) lock_outline
-            span Authorize Social User
-          v-btn(color='primary', large, depressed, @click='createUser')
-            v-icon(left) add
-            span New Local User
+          .caption.grey--text ID #[strong {{user.id}}]
+          v-divider.mx-3(vertical)
+          v-btn(color='indigo', large, outline, to='/users')
+            v-icon arrow_back
+          v-dialog(v-model='deleteUserDialog', max-width='500', v-if='user.id !== currentUserId && !user.isSystem')
+            v-btn(color='red', large, outline, slot='activator')
+              v-icon(color='red') delete
+            v-card
+              .dialog-header.is-red Delete User?
+              v-card-text Are you sure you want to delete user #[strong {{ user.name }}]?
+              v-card-actions
+                v-spacer
+                v-btn(flat, @click='deleteUserDialog = false') Cancel
+                v-btn(color='red', dark, @click='deleteUser') Delete
+          v-btn(color='primary', large, depressed, @click='updateUser')
+            v-icon(left) check
+            span Update User
+      v-flex(xs5)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_run
+            span Basic Info
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon alternate_email
+              v-list-tile-content
+                v-list-tile-title Email
+                v-list-tile-sub-title {{ user.email }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon person
+              v-list-tile-content
+                v-list-tile-title Display Name
+                v-list-tile-sub-title {{ user.name }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
         v-card.mt-3
-          v-data-table(
-            v-model='selected'
-            :items='users',
-            :headers='headers',
-            :search='search',
-            :pagination.sync='pagination',
-            :rows-per-page-items='[15]'
-            hide-actions,
-            disable-initial-sort
-          )
-            template(slot='headers', slot-scope='props')
-              tr
-                th.text-xs-left(
-                  v-for='header in props.headers'
-                  :key='header.text'
-                  :width='header.width'
-                  :class='[`column`, header.sortable ? `sortable` : ``, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]'
-                  @click='changeSort(header.value)'
-                )
-                  | {{ header.text }}
-                  v-icon(small, v-if='header.sortable') arrow_upward
-            template(slot='items', slot-scope='props')
-              tr.is-clickable(:active='props.selected', @click='$router.push("/users/" + props.item.id)')
-                //- 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: strong {{ props.item.name }}
-                td {{ props.item.email }}
-                td {{ props.item.providerKey }}
-                td {{ props.item.createdAt | moment('from') }}
-                td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
-            template(slot='no-data')
-              .pa-3
-                v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
-            v-pagination(v-model='pagination.page', :length='pages')
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 lock_outline
+            span Authentication
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon business
+              v-list-tile-content
+                v-list-tile-title Provider
+                v-list-tile-sub-title {{ user.providerKey }}
+              v-list-tile-action
+                v-img(src='https://static.requarks.io/logo/wikijs.svg', alt='')
+            template(v-if='user.providerKey === `local`')
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon security
+                v-list-tile-content
+                  v-list-tile-title Password
+                  v-list-tile-sub-title ********
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon cached
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon email
+              v-divider
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon screen_lock_portrait
+                v-list-tile-content
+                  v-list-tile-title Two Factor Authentication (2FA)
+                  v-list-tile-sub-title.red--text Inactive
+                v-list-tile-action
+                    v-btn(icon, color='grey', flat)
+                      v-icon power_settings_new
+              template(v-if='user.providerId')
+                v-divider
+                v-list-tile
+                  v-list-tile-avatar
+                    v-icon person
+                  v-list-tile-content
+                    v-list-tile-title Provider Id
+                    v-list-tile-sub-title {{ user.providerId }}
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 people
+            span User Groups
+          v-list(dense)
+            template(v-for='(group, idx) in user.groups')
+              v-list-tile
+                v-list-tile-avatar
+                  v-icon people_outline
+                v-list-tile-content
+                  v-list-tile-title {{group.name}}
+                v-list-tile-action
+                  v-btn(icon, color='red', flat)
+                    v-icon clear
+              v-divider(v-if='idx < user.groups.length - 1')
+          v-card-chin
+            v-spacer
+            v-btn(small, color='primary', flat)
+              v-icon(left) how_to_reg
+              span Assign to group
+      v-flex(xs7)
+        v-card
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 directions_walk
+            span Extended Metadata
+          v-list.py-0(two-line, dense)
+            v-list-tile
+              v-list-tile-avatar
+                v-icon public
+              v-list-tile-content
+                v-list-tile-title Location
+                v-list-tile-sub-title {{ user.location }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon local_library
+              v-list-tile-content
+                v-list-tile-title Job Title
+                v-list-tile-sub-title {{ user.jobTitle }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+            v-divider
+            v-list-tile
+              v-list-tile-avatar
+                v-icon map
+              v-list-tile-content
+                v-list-tile-title Timezone
+                v-list-tile-sub-title {{ user.timezone }}
+              v-list-tile-action
+                  v-btn(icon, color='grey', flat)
+                    v-icon edit
+        v-card.mt-3
+          v-toolbar(color='primary', dense, dark, flat)
+            v-icon.mr-2 insert_drive_file
+            span Content
+          v-card-text
+            em.caption.grey--text Coming soon
 
-    user-authorize(v-model='isAuthorizeDialogShown')
-    user-create(v-model='isCreateDialogShown')
 </template>
-
 <script>
-import usersQuery from 'gql/admin/users/users-query-list.gql'
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
 
-import UserAuthorize from './admin-users-authorize.vue'
-import UserCreate from './admin-users-create.vue'
+import userQuery from 'gql/admin/users/users-query-single.gql'
 
 export default {
-  components: {
-    UserAuthorize,
-    UserCreate
-  },
   data() {
     return {
-      selected: [],
-      pagination: {},
-      users: [],
-      headers: [
-        { text: 'ID', value: 'id', width: 80, sortable: true },
-        { text: 'Name', value: 'name', sortable: true },
-        { text: 'Email', value: 'email', sortable: true },
-        { text: 'Provider', value: 'provider', sortable: true },
-        { text: 'Created', value: 'createdAt', sortable: true },
-        { text: '', value: 'actions', sortable: false, width: 50 }
-      ],
-      search: '',
-      isAuthorizeDialogShown: false,
-      isCreateDialogShown: false
+      deleteUserDialog: false,
+      user: {
+
+      }
     }
   },
   computed: {
-    pages () {
-      if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null) {
-        return 0
-      }
-
-      return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
-    }
+    currentUserId: get('user/id')
   },
   methods: {
-    authorizeUser() {
-      this.isAuthorizeDialogShown = true
-    },
-    createUser() {
-      this.isCreateDialogShown = true
-    },
-    async refresh() {
-      await this.$apollo.queries.users.refetch()
-      this.$store.commit('showNotification', {
-        message: 'Users list has been refreshed.',
-        style: 'success',
-        icon: 'cached'
-      })
-    },
-    changeSort (column) {
-      if (this.pagination.sortBy === column) {
-        this.pagination.descending = !this.pagination.descending
-      } else {
-        this.pagination.sortBy = column
-        this.pagination.descending = false
-      }
-    },
-    toggleAll () {
-      if (this.selected.length) {
-        this.selected = []
-      } else {
-        this.selected = this.items.slice()
-      }
-    }
+    deleteUser() {},
+    updateUser() {}
   },
   apollo: {
-    users: {
-      query: usersQuery,
+    user: {
+      query: userQuery,
+      variables() {
+        return {
+          id: _.toSafeInteger(this.$route.params.id)
+        }
+      },
       fetchPolicy: 'network-only',
-      update: (data) => data.users.list,
+      update: (data) => data.users.single,
       watchLoading (isLoading) {
         this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-users-refresh')
       }
diff --git a/client/components/admin/admin-users.vue b/client/components/admin/admin-users.vue
index bef7c233..3b0ac4b7 100644
--- a/client/components/admin/admin-users.vue
+++ b/client/components/admin/admin-users.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') perm_identity
+          img(src='/svg/icon-customer.svg', alt='Users', style='width: 80px;')
           .admin-header-title
             .headline.blue--text.text--darken-2 Users
             .subheading.grey--text Manage users
@@ -48,24 +48,16 @@
                 td {{ props.item.providerKey }}
                 td {{ props.item.createdAt | moment('from') }}
                 td
-                  v-menu(bottom, right, min-width='200')
-                    v-btn(icon, slot='activator'): v-icon.grey--text.text--darken-1 more_horiz
-                    v-list
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='primary') edit
-                        v-list-tile-content
-                          v-list-tile-title Edit
-                      v-list-tile(@click='')
-                        v-list-tile-action
-                          v-icon(color='red') block
-                        v-list-tile-content
-                          v-list-tile-title Block
+                  v-tooltip(left, v-if='props.item.isSystem')
+                    v-icon(slot='activator') lock_outline
+                    span System User
             template(slot='no-data')
               .pa-3
                 v-alert(icon='warning', :value='true', outline) No users to display!
-          .text-xs-center.py-2
+          v-card-chin
+            v-spacer
             v-pagination(v-model='pagination.page', :length='pages')
+            v-spacer
 
     user-authorize(v-model='isAuthorizeDialogShown')
     user-create(v-model='isCreateDialogShown')
diff --git a/client/components/admin/admin-utilities.vue b/client/components/admin/admin-utilities.vue
index 17142bed..09fdcd3d 100644
--- a/client/components/admin/admin-utilities.vue
+++ b/client/components/admin/admin-utilities.vue
@@ -3,7 +3,7 @@
     v-layout(row, wrap)
       v-flex(xs12)
         .admin-header
-          v-icon(size='80', color='grey lighten-2') build
+          img(src='/svg/icon-maintenance.svg', alt='Utilities', style='width: 80px;')
           .admin-header-title
             .headline.primary--text Utilities
             .subheading.grey--text Maintenance and troubleshooting tools
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index af874fbe..2722cf99 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -128,7 +128,7 @@
             v-list-tile-action: v-icon(color='grey') person_add
             v-list-tile-title Register
 
-    page-selector(mode='create', v-model='newPageModal')
+    page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate')
 </template>
 
 <script>
@@ -208,6 +208,9 @@ export default {
     pageNew () {
       this.newPageModal = true
     },
+    pageNewCreate ({ path, locale }) {
+      window.location.assign(`/e/${path}`)
+    },
     pageView () {
       window.location.assign(`/${this.path}`)
     },
diff --git a/client/components/common/page-selector.vue b/client/components/common/page-selector.vue
index 0af915fb..82300801 100644
--- a/client/components/common/page-selector.vue
+++ b/client/components/common/page-selector.vue
@@ -50,13 +50,23 @@
             v-list-tile
               v-list-tile-avatar: v-icon insert_drive_file
               v-list-tile-title File D
-      v-card-text.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
+      v-card-actions.grey.pa-2(:class='darkMode ? `darken-3-d5` : `lighten-1`')
+        v-select(
+          solo
+          dark
+          background-color='grey darken-3-d2'
+          hide-details
+          single-line
+          :items='namespaces'
+          style='flex: 0 0 100px;'
+          v-model='currentLocale'
+          )
         v-text-field(
           solo
           hide-details
-          v-model='location'
+          prefix='/'
+          v-model='currentPath'
           flat
-          prepend-inner-icon='subdirectory_arrow_right'
           clearable
         )
       v-card-chin
@@ -76,17 +86,31 @@ export default {
       type: Boolean,
       default: false
     },
+    path: {
+      type: String,
+      default: 'new-page'
+    },
+    locale: {
+      type: String,
+      default: 'en'
+    },
     mode: {
       type: String,
       default: 'create'
+    },
+    openHandler: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
     return {
       searchLoading: false,
-      location: '/new-page',
+      currentLocale: 'en',
+      currentPath: 'new-page',
       tree: [],
-      treeChildren: []
+      treeChildren: [],
+      namespaces: ['en']
     }
   },
   computed: {
@@ -105,13 +129,25 @@ export default {
       ]
     }
   },
+  watch: {
+    isShown(newValue, oldValue) {
+      if (newValue && !oldValue) {
+        this.currentPath = this.path
+        this.currentLocale = this.locale
+      }
+    }
+  },
   methods: {
     close() {
       this.isShown = false
     },
     open() {
-      if (this.mode === 'create') {
-        window.location.assign(`/e${this.location}`)
+      const exit = this.openHandler({
+        locale: this.currentLocale,
+        path: this.currentPath
+      })
+      if (exit !== false) {
+        this.close()
       }
     },
     async fetchFolders(item) {
diff --git a/client/components/common/v-card-chin.vue b/client/components/common/v-card-chin.vue
index 74de56da..d5982ec9 100644
--- a/client/components/common/v-card-chin.vue
+++ b/client/components/common/v-card-chin.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
   div
     v-divider.my-0
-    v-card-actions(:class='dark ? "" : "grey lighten-4"')
+    v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
       slot
 </template>
 
diff --git a/client/components/editor.vue b/client/components/editor.vue
index f05afcd0..443d15a7 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -40,40 +40,50 @@
               )
             .subheading {{ $t('editor:save.processing') }}
             .caption.blue--text.text--lighten-3 {{ $t('editor:save.pleaseWait') }}
-      v-dialog(v-model='dialogEditorSelector', persistent, max-width='550')
+      v-dialog(v-model='dialogEditorSelector', persistent, max-width='700')
         v-card.radius-7(color='blue darken-3', dark)
           v-card-text.text-xs-center.py-4
             .subheading Which editor do you want to use for this page?
             v-container(grid-list-lg, fluid)
               v-layout(row, wrap, justify-center)
-                v-flex(xs4)
+                v-flex(xs3)
+                  v-card.radius-7.grey(
+                    hover
+                    light
+                    ripple
+                    )
+                    v-card-text.text-xs-center(@click='selectEditor("api")')
+                      img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                      .body-2.mt-2.grey--text.text--darken-2 API Docs
+                      .caption.grey--text.text--darken-1 REST / GraphQL
+                v-flex(xs3)
                   v-card.radius-7(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("code")')
-                      v-icon(large, color='primary') code
+                      img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
                       .body-2.mt-2 Code
                       .caption.grey--text Raw HTML
-                v-flex(xs4)
+                v-flex(xs3)
                   v-card.radius-7(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("markdown")')
-                      v-icon(large, color='primary') list_alt
+                      img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
                       .body-2.mt-2 Markdown
                       .caption.grey--text Default
-                v-flex(xs4)
+                v-flex(xs3)
                   v-card.radius-7.grey(
                     hover
                     light
                     ripple
                     )
                     v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
-                      v-icon(large, color='grey darken-1') web
+                      img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
                       .body-2.mt-2.grey--text.text--darken-2 Visual Builder
                       .caption.grey--text.text--darken-1 Drag-n-drop
             .caption.blue--text.text--lighten-2 This cannot be changed once the page is created.
diff --git a/client/components/editor/editor-modal-properties.vue b/client/components/editor/editor-modal-properties.vue
index 14a7491f..0700c8a3 100644
--- a/client/components/editor/editor-modal-properties.vue
+++ b/client/components/editor/editor-modal-properties.vue
@@ -176,6 +176,7 @@
                     @click='$refs.menuPublishEnd.save(publishEndDate)'
                     ) OK
 
+    page-selector(mode='create', v-model='pageSelectorShown', :path='path', :locale='locale', :open-handler='setPath')
     v-tour(name='editorPropertiesTour', :steps='tourSteps')
 </template>
 
@@ -194,6 +195,7 @@ export default {
     return {
       isPublishStartShown: false,
       isPublishEndShown: false,
+      pageSelectorShown: false,
       namespaces: ['en'],
       tourSteps: [
         {
@@ -234,11 +236,11 @@ export default {
       this.isShown = false
     },
     showPathSelector() {
-      this.$store.commit('showNotification', {
-        message: 'Coming soon!',
-        style: 'purple',
-        icon: 'directions_boat'
-      })
+      this.pageSelectorShown = true
+    },
+    setPath({ path, locale }) {
+      this.locale = locale
+      this.path = path
     }
   }
 }
diff --git a/client/graph/admin/users/users-query-list.gql b/client/graph/admin/users/users-query-list.gql
index c9696a0d..b48d20d0 100644
--- a/client/graph/admin/users/users-query-list.gql
+++ b/client/graph/admin/users/users-query-list.gql
@@ -5,6 +5,7 @@ query {
       name
       email
       providerKey
+      isSystem
       createdAt
     }
   }
diff --git a/client/graph/admin/users/users-query-single.gql b/client/graph/admin/users/users-query-single.gql
new file mode 100644
index 00000000..44fc3fbf
--- /dev/null
+++ b/client/graph/admin/users/users-query-single.gql
@@ -0,0 +1,21 @@
+query ($id: Int!) {
+  users {
+    single(id: $id) {
+      id
+      name
+      email
+      providerKey
+      providerId
+      location
+      jobTitle
+      timezone
+      isSystem
+      createdAt
+      updatedAt
+      groups {
+        id
+        name
+      }
+    }
+  }
+}
diff --git a/client/scss/components/v-dialog.scss b/client/scss/components/v-dialog.scss
index 1d3502f8..e50287a8 100644
--- a/client/scss/components/v-dialog.scss
+++ b/client/scss/components/v-dialog.scss
@@ -15,6 +15,12 @@
               radial-gradient(ellipse at bottom, mc('red', '800'), mc('red', '700'));
   }
 
+  &.is-indigo {
+    background-color: mc('indigo', '700');
+    background: radial-gradient(ellipse at top, mc('indigo', '500'), mc('indigo', '700')),
+              radial-gradient(ellipse at bottom, mc('indigo', '800'), mc('indigo', '700'));
+  }
+
   &.is-dark {
     background-color: mc('grey', '900');
     background: radial-gradient(ellipse at top, mc('grey', '800'), mc('grey', '900')),
diff --git a/client/scss/pages/_new.scss b/client/scss/pages/_new.scss
index d5fb2899..9f48d400 100644
--- a/client/scss/pages/_new.scss
+++ b/client/scss/pages/_new.scss
@@ -1,5 +1,5 @@
 .newpage {
-  background: linear-gradient(to bottom, mc('blue', '900') 0%, mc('blue', '500') 100%);
+  background: linear-gradient(to bottom, darken(mc('blue', '900'), 10%) 0%, mc('purple', '500') 100%);
   height: 100%;
   display: flex;
   flex-direction: column;
@@ -36,7 +36,7 @@
   &::after {
     content: '';
     position: absolute;
-    background-color: #0d47a1;
+    background-color: transparent;
     background-image: url('../static/svg/motif-overlay.svg');
     background-attachment: fixed;
     background-size: cover;
diff --git a/client/static/img/icon-browse.png b/client/static/img/icon-browse.png
new file mode 100644
index 0000000000000000000000000000000000000000..60a111995f6ea4a8cfc9da9952bee48c1383c575
GIT binary patch
literal 3106
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
KzgYM8=)VB)dk7-{

literal 0
HcmV?d00001

diff --git a/client/static/img/icon-people.png b/client/static/img/icon-people.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c35b7d07c6be8b7f05a315c62bf8d531753c668
GIT binary patch
literal 5006
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
P+ARYeQ|)TamvR3G@z>Vq

literal 0
HcmV?d00001

diff --git a/client/static/img/icon-unlock.png b/client/static/img/icon-unlock.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fbd96b1596fca1eac5b00fee28f2c9d2b2ce3c8
GIT binary patch
literal 4343
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

literal 0
HcmV?d00001

diff --git a/client/static/svg/icon-browse-page.svg b/client/static/svg/icon-browse-page.svg
new file mode 100644
index 00000000..7023a2d0
--- /dev/null
+++ b/client/static/svg/icon-browse-page.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="18.6667" x2="32" y2="47.3047" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="41" y1="25" x2="41" y2="31.5765" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="8.3333" x2="32" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="8.3333" x2="32" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="23" y1="8.3333" x2="23" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="21" y1="8.3333" x2="21" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="41" y1="8.3333" x2="41" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="39" y1="8.3333" x2="39" y2="55.5027" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 65 58.75 L 15 58.75 C 13.621094 58.75 12.5 57.628906 12.5 56.25 L 12.5 26.25 C 12.5 24.871094 13.621094 23.75 15 23.75 L 65 23.75 C 66.378906 23.75 67.5 24.871094 67.5 26.25 L 67.5 56.25 C 67.5 57.628906 66.378906 58.75 65 58.75 Z M 15 26.25 L 15 56.25 L 65.003906 56.25 L 65 26.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 58.75 38.75 L 43.75 38.75 C 43.058594 38.75 42.5 38.191406 42.5 37.5 L 42.5 32.5 C 42.5 31.808594 43.058594 31.25 43.75 31.25 L 58.75 31.25 C 59.441406 31.25 60 31.808594 60 32.5 L 60 37.5 C 60 38.191406 59.441406 38.75 58.75 38.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 68.75 11.25 L 11.25 11.25 C 9.183594 11.25 7.5 12.933594 7.5 15 L 7.5 60 C 7.5 62.066406 9.183594 63.75 11.25 63.75 L 68.75 63.75 C 70.816406 63.75 72.5 62.066406 72.5 60 L 72.5 15 C 72.5 12.933594 70.816406 11.25 68.75 11.25 Z M 70 15 L 70 18.75 L 44.046875 18.75 C 43.570313 18.75 43.140625 18.484375 42.925781 18.054688 L 40.773438 13.75 L 68.75 13.75 C 69.441406 13.75 70 14.308594 70 15 Z M 37.207031 13.75 C 37.683594 13.75 38.109375 14.015625 38.324219 14.4375 L 40.476563 18.75 L 31.546875 18.75 C 31.066406 18.75 30.640625 18.484375 30.425781 18.058594 L 28.273438 13.75 Z M 68.75 61.25 L 11.25 61.25 C 10.558594 61.25 10 60.691406 10 60 L 10 15 C 10 14.308594 10.558594 13.75 11.25 13.75 L 24.707031 13.75 C 25.183594 13.75 25.609375 14.015625 25.824219 14.441406 L 28.191406 19.175781 C 28.828125 20.453125 30.117188 21.25 31.546875 21.25 L 70 21.25 L 70 60 C 70 60.691406 69.441406 61.25 68.75 61.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 12.5 66.25 L 67.5 66.25 L 67.5 68.75 L 12.5 68.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 20 31.25 L 37.5 31.25 L 37.5 33.75 L 20 33.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 20 36.25 L 37.5 36.25 L 37.5 38.75 L 20 38.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 20 41.25 L 37.5 41.25 L 37.5 43.75 L 20 43.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 20 46.25 L 32.5 46.25 L 32.5 48.75 L 20 48.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 42.5 41.25 L 60 41.25 L 60 43.75 L 42.5 43.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 42.5 46.25 L 55 46.25 L 55 48.75 L 42.5 48.75 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-categorize.svg b/client/static/svg/icon-categorize.svg
new file mode 100644
index 00000000..b22fb41f
--- /dev/null
+++ b/client/static/svg/icon-categorize.svg
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="19" y1="41.625" x2="19" y2="48.5182" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="45" y1="15.625" x2="45" y2="22.6261" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="45" y1="8" x2="45" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="19" y1="8" x2="19" y2="57.2906" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 27.5 56.25 C 27.5 58.320313 25.820313 60 23.75 60 C 21.679688 60 20 58.320313 20 56.25 C 20 54.179688 21.679688 52.5 23.75 52.5 C 25.820313 52.5 27.5 54.179688 27.5 56.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 60 26.25 C 60 26.941406 59.441406 27.5 58.75 27.5 L 53.75 27.5 C 53.058594 27.5 52.5 26.941406 52.5 26.25 L 52.5 21.25 C 52.5 20.558594 53.058594 20 53.75 20 L 58.75 20 C 59.441406 20 60 20.558594 60 21.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 33.75 10 L 13.75 10 C 11.683594 10 10 11.683594 10 13.75 L 10 33.75 C 10 35.816406 11.683594 37.5 13.75 37.5 L 33.75 37.5 C 35.816406 37.5 37.5 35.816406 37.5 33.75 L 37.5 13.75 C 37.5 11.683594 35.816406 10 33.75 10 Z M 35 33.75 C 35 34.441406 34.4375 35 33.75 35 L 13.75 35 C 13.0625 35 12.5 34.441406 12.5 33.75 L 12.5 13.75 C 12.5 13.058594 13.0625 12.5 13.75 12.5 L 33.75 12.5 C 34.4375 12.5 35 13.058594 35 13.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 33.75 42.5 L 13.75 42.5 C 11.683594 42.5 10 44.183594 10 46.25 L 10 66.25 C 10 68.316406 11.683594 70 13.75 70 L 33.75 70 C 35.816406 70 37.5 68.316406 37.5 66.25 L 37.5 46.25 C 37.5 44.183594 35.816406 42.5 33.75 42.5 Z M 35 66.25 C 35 66.941406 34.4375 67.5 33.75 67.5 L 13.75 67.5 C 13.0625 67.5 12.5 66.941406 12.5 66.25 L 12.5 46.25 C 12.5 45.558594 13.0625 45 13.75 45 L 33.75 45 C 34.4375 45 35 45.558594 35 46.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 66.25 10 L 46.25 10 C 44.183594 10 42.5 11.683594 42.5 13.75 L 42.5 33.75 C 42.5 35.816406 44.183594 37.5 46.25 37.5 L 66.25 37.5 C 68.316406 37.5 70 35.816406 70 33.75 L 70 13.75 C 70 11.683594 68.316406 10 66.25 10 Z M 67.5 33.75 C 67.5 34.441406 66.9375 35 66.25 35 L 46.25 35 C 45.5625 35 45 34.441406 45 33.75 L 45 13.75 C 45 13.058594 45.5625 12.5 46.25 12.5 L 66.25 12.5 C 66.9375 12.5 67.5 13.058594 67.5 13.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 66.25 42.5 L 46.25 42.5 C 44.183594 42.5 42.5 44.183594 42.5 46.25 L 42.5 66.25 C 42.5 68.316406 44.183594 70 46.25 70 L 66.25 70 C 68.316406 70 70 68.316406 70 66.25 L 70 46.25 C 70 44.183594 68.316406 42.5 66.25 42.5 Z M 67.5 66.25 C 67.5 66.941406 66.9375 67.5 66.25 67.5 L 46.25 67.5 C 45.5625 67.5 45 66.941406 45 66.25 L 45 46.25 C 45 45.558594 45.5625 45 46.25 45 L 66.25 45 C 66.9375 45 67.5 45.558594 67.5 46.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 62.5 15 L 50 15 C 48.621094 15 47.5 16.121094 47.5 17.5 L 47.5 30 C 47.5 31.378906 48.621094 32.5 50 32.5 L 62.5 32.5 C 63.878906 32.5 65 31.378906 65 30 L 65 17.5 C 65 16.121094 63.878906 15 62.5 15 Z M 62.5 30 L 50 30 L 50 17.5 L 62.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 62.5 47.5 L 50 47.5 C 48.621094 47.5 47.5 48.621094 47.5 50 L 47.5 62.5 C 47.5 63.878906 48.621094 65 50 65 L 62.5 65 C 63.878906 65 65 63.878906 65 62.5 L 65 50 C 65 48.621094 63.878906 47.5 62.5 47.5 Z M 62.5 50 L 62.5 52.5 L 50 52.5 L 50 50 Z M 50 62.5 L 50 55 L 62.5 55 L 62.5 62.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 30 47.5 L 17.5 47.5 C 16.121094 47.5 15 48.621094 15 50 L 15 62.5 C 15 63.878906 16.121094 65 17.5 65 L 30 65 C 31.378906 65 32.5 63.878906 32.5 62.5 L 32.5 50 C 32.5 48.621094 31.378906 47.5 30 47.5 Z M 30 62.5 L 17.5 62.5 L 17.5 50 L 30 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 30 15 L 17.5 15 C 16.121094 15 15 16.121094 15 17.5 L 15 30 C 15 31.378906 16.121094 32.5 17.5 32.5 L 30 32.5 C 31.378906 32.5 32.5 31.378906 32.5 30 L 32.5 17.5 C 32.5 16.121094 31.378906 15 30 15 Z M 30 17.5 L 30 20 L 17.5 20 L 17.5 17.5 Z M 30 22.5 L 30 25 L 17.5 25 L 17.5 22.5 Z M 17.5 30 L 17.5 27.5 L 30 27.5 L 30 30 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-close-window.svg b/client/static/svg/icon-close-window.svg
new file mode 100644
index 00000000..a1e27ecd
--- /dev/null
+++ b/client/static/svg/icon-close-window.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="17" y1="28" x2="17" y2="36.4861" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="7.5" x2="32" y2="57.5" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="48" y1="7.5" x2="48" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="7.5" x2="16" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="29" y1="7.5" x2="29" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="37" y1="7.5" x2="37" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="35" y1="7.5" x2="35" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="32" y1="7.5" x2="32" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="14" y1="7.5" x2="14" y2="57.5336" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 17.5 35 L 25 35 L 25 45 L 17.5 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 8.75 L 53.75 8.75 C 50.304688 8.75 47.5 11.554688 47.5 15 L 47.5 20 L 38.917969 20 C 38.480469 20 38.066406 19.765625 37.84375 19.390625 L 35.550781 15.574219 C 34.878906 14.449219 33.644531 13.75 32.332031 13.75 L 11.257813 13.75 C 9.183594 13.75 7.5 15.433594 7.5 17.507813 L 7.5 62.5 C 7.5 64.566406 9.183594 66.25 11.25 66.25 L 11.25 68.75 C 11.25 70.128906 12.371094 71.25 13.75 71.25 L 61.25 71.25 C 62.628906 71.25 63.75 70.128906 63.75 68.75 L 63.75 66.25 C 65.816406 66.25 67.5 64.566406 67.5 62.5 L 67.5 33.625 C 70.347656 33.042969 72.5 30.519531 72.5 27.5 L 72.5 15 C 72.5 11.554688 69.695313 8.75 66.25 8.75 Z M 33.410156 16.859375 L 35.292969 20 L 28.917969 20 C 28.480469 20 28.066406 19.765625 27.839844 19.390625 L 25.957031 16.25 L 32.332031 16.25 C 32.769531 16.25 33.183594 16.484375 33.410156 16.859375 Z M 10 17.507813 C 10 16.8125 10.5625 16.25 11.257813 16.25 L 22.332031 16.25 C 22.769531 16.25 23.183594 16.484375 23.40625 16.859375 L 25.699219 20.675781 C 26.371094 21.800781 27.605469 22.5 28.917969 22.5 L 47.5 22.5 L 47.5 27.5 L 10 27.5 Z M 61.25 68.75 L 13.75 68.75 L 13.75 66.25 L 61.25 66.25 Z M 63.75 63.75 L 58.75 63.75 L 58.75 61.25 L 56.25 61.25 L 56.25 63.75 L 48.75 63.75 L 48.75 61.25 L 46.25 61.25 L 46.25 63.75 L 38.75 63.75 L 38.75 61.25 L 36.25 61.25 L 36.25 63.75 L 28.75 63.75 L 28.75 61.25 L 26.25 61.25 L 26.25 63.75 L 18.75 63.75 L 18.75 61.25 L 16.25 61.25 L 16.25 63.75 L 11.25 63.75 C 10.558594 63.75 10 63.191406 10 62.5 L 10 30 L 48.03125 30 C 48.996094 32.203125 51.195313 33.75 53.75 33.75 L 65 33.75 L 65 62.5 C 65 63.191406 64.441406 63.75 63.75 63.75 Z M 70 27.5 C 70 29.566406 68.316406 31.25 66.25 31.25 L 53.75 31.25 C 51.683594 31.25 50 29.566406 50 27.5 L 50 15 C 50 12.933594 51.683594 11.25 53.75 11.25 L 66.25 11.25 C 68.316406 11.25 70 12.933594 70 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 64.417969 15.0625 L 60 19.484375 L 55.582031 15.0625 L 53.8125 16.832031 L 58.234375 21.25 L 53.8125 25.667969 L 55.582031 27.4375 L 60 23.015625 L 64.417969 27.4375 L 66.1875 25.667969 L 61.765625 21.25 L 66.1875 16.832031 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 12.5 50 L 27.5 50 L 27.5 32.5 L 12.5 32.5 Z M 15 35 L 25 35 L 25 47.5 L 15 47.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 30 32.5 L 42.5 32.5 L 42.5 35 L 30 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 30 37.5 L 62.5 37.5 L 62.5 40 L 30 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 30 42.5 L 57.5 42.5 L 57.5 45 L 30 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 30 47.5 L 50 47.5 L 50 50 L 30 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 13.75 20 L 21.25 20 L 21.25 22.5 L 13.75 22.5 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-cloud-storage.svg b/client/static/svg/icon-cloud-storage.svg
new file mode 100644
index 00000000..2d2e906e
--- /dev/null
+++ b/client/static/svg/icon-cloud-storage.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="&#1057;&#1083;&#1086;&#1081;_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve" width="80px" height="80px">
+<linearGradient id="SVGID_1__44790" gradientUnits="userSpaceOnUse" x1="42" y1="46.5" x2="42" y2="51.6387" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#6DC7FF"/>
+	<stop offset="1" style="stop-color:#E6ABFF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1__44790);" d="M46,50c0,0.552-0.448,1-1,1h-6c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h6  c0.552,0,1,0.448,1,1V50z"/>
+<linearGradient id="SVGID_2__44790" gradientUnits="userSpaceOnUse" x1="32.4541" y1="7.869" x2="31.7041" y2="55.369" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<path style="fill:url(#SVGID_2__44790);" d="M55.363,23.621C55.771,22.804,56,21.919,56,21c0-3.309-2.691-6-6-6  c-0.746,0-1.47,0.156-2.157,0.427C47.11,11.767,43.873,9,40,9c-3.719,0-6.845,2.555-7.737,6H16.236  c-2.344,0-4.401,1.664-4.892,3.955L6.022,43.79l-0.015,2.136C6.007,45.951,6,45.975,6,46v6c0,1.654,1.346,3,3,3h38  c1.654,0,3-1.346,3-3v-4v-2v-2l-2.515-11H53c2.757,0,5-2.243,5-5C58,26.102,56.925,24.468,55.363,23.621z M48,52  c0,0.552-0.448,1-1,1H9c-0.552,0-1-0.448-1-1v-5v-1c0-0.552,0.448-1,1-1h38c0.552,0,1,0.448,1,1v2V52z M47.769,43.112  C47.522,43.046,47.267,43,47,43H9c-0.275,0-0.535,0.049-0.788,0.118L8.666,41H26v-2H9.094l0.429-2H21v-2H9.951l0.428-2H19v-2h-8.191  l0.428-2H17v-2h-5.334l1.634-7.626C13.595,17.999,14.83,17,16.236,17H32v2.08c-3.386,0.488-6,3.401-6,6.92c0,3.859,3.141,7,7,7  h12.435L47.769,43.112z M53,31H33c-2.757,0-5-2.243-5-5s2.243-5,5.001-5H36v-2h-2v-2c0-3.309,2.691-6,6-6s6,2.691,6,6v2h2v-1.434  C48.615,17.201,49.296,17,50,17c2.206,0,4,1.794,4,4c0,0.721-0.21,1.416-0.594,2.041C53.27,23.03,53.139,23,53,23h-2v2h2  c1.654,0,3,1.346,3,3S54.654,31,53,31z"/>
+<linearGradient id="SVGID_3__44790" gradientUnits="userSpaceOnUse" x1="12.6544" y1="7.5564" x2="11.9044" y2="55.0564" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_3__44790);" cx="12" cy="49" r="2"/>
+<linearGradient id="SVGID_4__44790" gradientUnits="userSpaceOnUse" x1="18.6529" y1="7.6511" x2="17.9029" y2="55.1511" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_4__44790);" cx="18" cy="49" r="2"/>
+<linearGradient id="SVGID_5__44790" gradientUnits="userSpaceOnUse" x1="24.6514" y1="7.7458" x2="23.9014" y2="55.2458" spreadMethod="reflect">
+	<stop offset="0" style="stop-color:#1A6DFF"/>
+	<stop offset="1" style="stop-color:#C822FF"/>
+</linearGradient>
+<circle style="fill:url(#SVGID_5__44790);" cx="24" cy="49" r="2"/>
+</svg>
diff --git a/client/static/svg/icon-console.svg b/client/static/svg/icon-console.svg
new file mode 100644
index 00000000..c8181094
--- /dev/null
+++ b/client/static/svg/icon-console.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="21.125" x2="32" y2="47.125" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="12" y1="12.8333" x2="12" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="18" y1="12.8333" x2="18" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="24" y1="12.8333" x2="24" y2="15.3753" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="32" y1="8.75" x2="32" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="8.75" x2="32" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="24.9392" y1="8.75" x2="24.9392" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="37" y1="8.75" x2="37" y2="55.5002" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 65 58.75 L 15 58.75 C 13.621094 58.75 12.5 57.628906 12.5 56.25 L 12.5 28.75 C 12.5 27.371094 13.621094 26.25 15 26.25 L 65 26.25 C 66.378906 26.25 67.5 27.371094 67.5 28.75 L 67.5 56.25 C 67.5 57.628906 66.378906 58.75 65 58.75 Z M 15 28.75 L 15 56.25 L 65 56.25 L 65 28.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 12.5 16.25 L 17.5 16.25 L 17.5 18.75 L 12.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 20 16.25 L 25 16.25 L 25 18.75 L 20 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 27.5 16.25 L 32.5 16.25 L 32.5 18.75 L 27.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 68.75 11.25 L 11.25 11.25 C 9.183594 11.25 7.5 12.933594 7.5 15 L 7.5 60 C 7.5 62.066406 9.183594 63.75 11.25 63.75 L 68.75 63.75 C 70.816406 63.75 72.5 62.066406 72.5 60 L 72.5 15 C 72.5 12.933594 70.816406 11.25 68.75 11.25 Z M 70 15 L 70 21.25 L 62.5 21.25 L 62.5 13.75 L 68.75 13.75 C 69.441406 13.75 70 14.308594 70 15 Z M 11.25 13.75 L 60 13.75 L 60 21.25 L 10 21.25 L 10 15 C 10 14.308594 10.558594 13.75 11.25 13.75 Z M 68.75 61.25 L 11.25 61.25 C 10.558594 61.25 10 60.691406 10 60 L 10 23.75 L 70 23.75 L 70 60 C 70 60.691406 69.441406 61.25 68.75 61.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 10 66.25 L 70 66.25 L 70 68.75 L 10 68.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 28.382813 34.117188 L 26.617188 35.882813 L 33.234375 42.5 L 26.617188 49.117188 L 28.382813 50.882813 L 35 44.265625 C 35.976563 43.292969 35.976563 41.707031 35 40.734375 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 40 47.5 L 52.5 47.5 L 52.5 50 L 40 50 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-customer.svg b/client/static/svg/icon-customer.svg
new file mode 100644
index 00000000..17a11a90
--- /dev/null
+++ b/client/static/svg/icon-customer.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="37" y1="22.5" x2="37" y2="29.7519" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="27" y1="22.5" x2="27" y2="29.7519" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="6" x2="32" y2="58.5856" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="27.05" y1="6" x2="27.05" y2="58.5856" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 50 32.5 C 50 34.570313 48.320313 36.25 46.25 36.25 C 44.179688 36.25 42.5 34.570313 42.5 32.5 C 42.5 30.429688 44.179688 28.75 46.25 28.75 C 48.320313 28.75 50 30.429688 50 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 37.5 32.5 C 37.5 34.570313 35.820313 36.25 33.75 36.25 C 31.679688 36.25 30 34.570313 30 32.5 C 30 30.429688 31.679688 28.75 33.75 28.75 C 35.820313 28.75 37.5 30.429688 37.5 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 56.347656 42.902344 C 57.871094 40.191406 58.75 37.074219 58.75 33.75 L 58.75 26.25 C 58.75 15.910156 50.339844 7.5 40 7.5 C 29.660156 7.5 21.25 15.910156 21.25 26.25 L 21.25 33.75 C 21.25 37.074219 22.128906 40.191406 23.652344 42.902344 C 16.660156 48.082031 12.5 56.277344 12.5 65 L 12.5 72.5 L 67.5 72.5 L 67.5 65 C 67.5 56.277344 63.339844 48.082031 56.347656 42.902344 Z M 23.75 26.25 C 23.75 17.289063 31.039063 10 40 10 C 48.960938 10 56.25 17.289063 56.25 26.25 L 56.25 33.75 C 56.25 42.710938 48.960938 50 40 50 C 31.039063 50 23.75 42.710938 23.75 33.75 Z M 40 52.5 C 46.121094 52.5 51.546875 49.539063 54.972656 44.992188 C 55.648438 45.5 56.300781 46.039063 56.917969 46.605469 C 52.859375 51.941406 46.703125 55 40 55 C 33.324219 55 27.09375 51.886719 23.078125 46.609375 C 23.699219 46.039063 24.351563 45.5 25.027344 44.992188 C 28.453125 49.539063 33.882813 52.5 40 52.5 Z M 65 70 L 58.75 70 L 58.75 67.5 L 56.25 67.5 L 56.25 70 L 23.75 70 L 23.75 67.5 L 21.25 67.5 L 21.25 70 L 15 70 L 15 65 C 15 58.820313 17.296875 52.929688 21.316406 48.398438 C 25.804688 54.125 32.660156 57.5 40 57.5 C 47.371094 57.5 54.148438 54.183594 58.683594 48.398438 C 62.703125 52.929688 65 58.820313 65 65 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 40 15 L 40 12.5 C 34.769531 12.5 29.910156 15.542969 27.625 20.25 L 29.875 21.339844 C 31.773438 17.429688 35.652344 15 40 15 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-file.svg b/client/static/svg/icon-file.svg
new file mode 100644
index 00000000..e3bfd78a
--- /dev/null
+++ b/client/static/svg/icon-file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="80" height="80" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;; fill:#000000;"><linearGradient id="SVGID_1__44004" gradientUnits="userSpaceOnUse" x1="41" y1="25.5" x2="41" y2="36.5708" spreadMethod="reflect">	<stop offset="0" style="stop-color:#6DC7FF"></stop>	<stop offset="1" style="stop-color:#E6ABFF"></stop></linearGradient><path style="fill:url(#SVGID_1__44004);" d="M38,36h6c0.552,0,1-0.448,1-1v-8c0-0.552-0.448-1-1-1h-6c-0.552,0-1,0.448-1,1v8  C37,35.552,37.448,36,38,36z"></path><linearGradient id="SVGID_2__44004" gradientUnits="userSpaceOnUse" x1="32" y1="5.75" x2="32" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_2__44004);" d="M49,10h-2c0-1.103-0.897-2-2-2h-8c0-1.103-0.897-2-2-2h-6c-1.103,0-2,0.897-2,2h-8  c-1.103,0-2,0.897-2,2h-2c-1.103,0-2,0.897-2,2v44c0,1.103,0.897,2,2,2h34c1.103,0,2-0.897,2-2V12C51,10.897,50.103,10,49,10z M29,8  h6v5c0,1.654-1.346,3-3,3s-3-1.346-3-3V8z M15,12h12v1c0,2.757,2.243,5,5,5s5-2.243,5-5v-1h12v32H39c-1.103,0-2,0.897-2,2v10H15V12z   M39,56V46h10v10H39z"></path><linearGradient id="SVGID_3__44004" gradientUnits="userSpaceOnUse" x1="32" y1="5.75" x2="32" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="22" style="fill:url(#SVGID_3__44004);" width="26" height="2"></rect><linearGradient id="SVGID_4__44004" gradientUnits="userSpaceOnUse" x1="26" y1="5.75" x2="26" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="26" style="fill:url(#SVGID_4__44004);" width="14" height="2"></rect><linearGradient id="SVGID_5__44004" gradientUnits="userSpaceOnUse" x1="26" y1="5.75" x2="26" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="30" style="fill:url(#SVGID_5__44004);" width="14" height="2"></rect><linearGradient id="SVGID_6__44004" gradientUnits="userSpaceOnUse" x1="26" y1="5.75" x2="26" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="34" style="fill:url(#SVGID_6__44004);" width="14" height="2"></rect><linearGradient id="SVGID_7__44004" gradientUnits="userSpaceOnUse" x1="41" y1="5.75" x2="41" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="37" y="38" style="fill:url(#SVGID_7__44004);" width="8" height="2"></rect><linearGradient id="SVGID_8__44004" gradientUnits="userSpaceOnUse" x1="20" y1="5.75" x2="20" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="48" style="fill:url(#SVGID_8__44004);" width="2" height="4"></rect><linearGradient id="SVGID_9__44004" gradientUnits="userSpaceOnUse" x1="24" y1="5.75" x2="24" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="23" y="48" style="fill:url(#SVGID_9__44004);" width="2" height="4"></rect><linearGradient id="SVGID_10__44004" gradientUnits="userSpaceOnUse" x1="28" y1="5.75" x2="28" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="27" y="48" style="fill:url(#SVGID_10__44004);" width="2" height="4"></rect><linearGradient id="SVGID_11__44004" gradientUnits="userSpaceOnUse" x1="32" y1="5.75" x2="32" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="31" y="48" style="fill:url(#SVGID_11__44004);" width="2" height="4"></rect><linearGradient id="SVGID_12__44004" gradientUnits="userSpaceOnUse" x1="43" y1="5.75" x2="43" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_12__44004);" d="M41,50v2h2v-2h2v-2h-2C41.897,48,41,48.897,41,50z"></path><linearGradient id="SVGID_13__44004" gradientUnits="userSpaceOnUse" x1="26" y1="5.75" x2="26" y2="57.8677" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><rect x="19" y="38" style="fill:url(#SVGID_13__44004);" width="14" height="2"></rect></svg>
diff --git a/client/static/svg/icon-gear-outline.svg b/client/static/svg/icon-gear-outline.svg
new file mode 100644
index 00000000..d6c7686f
--- /dev/null
+++ b/client/static/svg/icon-gear-outline.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="4.3333" x2="32" y2="58.4938" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="26.4167" x2="32" y2="37.6694" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="4.3333" x2="32" y2="58.4938" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="4.3333" x2="32" y2="58.4938" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="46" y1="4.3333" x2="46" y2="58.4938" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="46" y1="4.3333" x2="46" y2="58.4938" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 41.253906 72.5 L 38.746094 72.5 C 35.992188 72.5 33.75 70.257813 33.75 67.503906 L 33.75 66.054688 C 33.75 64.988281 33.035156 64.03125 31.972656 63.667969 C 30.949219 63.320313 29.933594 62.898438 28.953125 62.414063 C 27.945313 61.917969 26.753906 62.085938 26 62.839844 L 24.972656 63.867188 C 23.023438 65.816406 19.855469 65.816406 17.90625 63.867188 L 16.132813 62.09375 C 14.183594 60.144531 14.183594 56.976563 16.132813 55.03125 L 17.160156 54 C 17.917969 53.246094 18.085938 52.058594 17.585938 51.046875 C 17.105469 50.070313 16.679688 49.050781 16.332031 48.027344 C 15.96875 46.964844 15.011719 46.25 13.945313 46.25 L 12.496094 46.25 C 9.742188 46.25 7.5 44.007813 7.5 41.253906 L 7.5 38.746094 C 7.5 35.992188 9.742188 33.75 12.496094 33.75 L 13.945313 33.75 C 15.011719 33.75 15.96875 33.035156 16.332031 31.972656 C 16.679688 30.949219 17.101563 29.933594 17.585938 28.953125 C 18.085938 27.941406 17.914063 26.753906 17.160156 26 L 16.132813 24.972656 C 14.183594 23.023438 14.183594 19.855469 16.132813 17.90625 L 17.90625 16.132813 C 19.855469 14.183594 23.019531 14.183594 24.96875 16.132813 L 26 17.164063 C 26.753906 17.917969 27.945313 18.089844 28.953125 17.589844 C 29.921875 17.109375 30.9375 16.691406 31.96875 16.339844 C 33.035156 15.980469 33.75 15.019531 33.75 13.953125 L 33.75 13.75 C 33.75 10.304688 36.554688 7.5 40 7.5 L 40 10 C 37.933594 10 36.25 11.683594 36.25 13.75 L 36.25 13.953125 C 36.25 16.089844 34.855469 18.003906 32.773438 18.707031 C 31.84375 19.023438 30.929688 19.402344 30.058594 19.828125 C 28.085938 20.800781 25.742188 20.441406 24.234375 18.929688 L 23.203125 17.898438 C 22.230469 16.921875 20.648438 16.925781 19.675781 17.898438 L 17.898438 19.671875 C 16.925781 20.644531 16.925781 22.230469 17.898438 23.203125 L 18.929688 24.230469 C 20.441406 25.742188 20.804688 28.085938 19.828125 30.058594 C 19.390625 30.941406 19.015625 31.855469 18.699219 32.777344 C 17.992188 34.855469 16.082031 36.25 13.945313 36.25 L 12.496094 36.25 C 11.121094 36.25 10 37.371094 10 38.746094 L 10 41.253906 C 10 42.628906 11.121094 43.75 12.496094 43.75 L 13.945313 43.75 C 16.082031 43.75 17.992188 45.144531 18.699219 47.222656 C 19.011719 48.140625 19.390625 49.054688 19.828125 49.9375 C 20.800781 51.910156 20.441406 54.253906 18.925781 55.769531 L 17.898438 56.796875 C 16.925781 57.769531 16.925781 59.351563 17.898438 60.324219 L 19.671875 62.101563 C 20.648438 63.074219 22.230469 63.070313 23.203125 62.101563 L 24.230469 61.070313 C 25.742188 59.558594 28.089844 59.195313 30.058594 60.171875 C 30.941406 60.609375 31.855469 60.984375 32.777344 61.300781 C 34.855469 62.007813 36.25 63.917969 36.25 66.054688 L 36.25 67.503906 C 36.25 68.878906 37.371094 70 38.746094 70 L 41.253906 70 C 42.628906 70 43.75 68.878906 43.75 67.503906 L 43.75 66.054688 C 43.75 63.917969 45.144531 62.007813 47.222656 61.300781 C 48.140625 60.988281 49.054688 60.609375 49.9375 60.171875 C 51.910156 59.195313 54.253906 59.554688 55.769531 61.074219 L 56.796875 62.101563 C 57.769531 63.078125 59.351563 63.074219 60.324219 62.101563 L 62.101563 60.328125 C 63.074219 59.355469 63.074219 57.769531 62.101563 56.796875 L 61.003906 55.703125 C 59.523438 54.21875 59.171875 51.933594 60.136719 50.015625 C 60.585938 49.113281 60.980469 48.171875 61.304688 47.222656 C 62.015625 45.144531 63.925781 43.75 66.0625 43.75 L 66.25 43.75 C 68.316406 43.75 70 42.066406 70 40 L 72.5 40 C 72.5 43.445313 69.699219 46.25 66.25 46.25 L 66.0625 46.25 C 64.996094 46.25 64.035156 46.964844 63.671875 48.03125 C 63.3125 49.085938 62.875 50.132813 62.371094 51.132813 C 61.894531 52.089844 62.054688 53.214844 62.773438 53.933594 L 63.867188 55.027344 C 65.816406 56.976563 65.816406 60.144531 63.867188 62.09375 L 62.09375 63.867188 C 60.144531 65.816406 56.980469 65.816406 55.03125 63.867188 L 54 62.839844 C 53.246094 62.082031 52.0625 61.917969 51.046875 62.414063 C 50.066406 62.894531 49.050781 63.320313 48.027344 63.667969 C 46.964844 64.03125 46.25 64.988281 46.25 66.054688 L 46.25 67.503906 C 46.25 70.257813 44.007813 72.5 41.253906 72.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 46.25 40 C 46.25 43.453125 43.453125 46.25 40 46.25 C 36.546875 46.25 33.75 43.453125 33.75 40 C 33.75 36.546875 36.546875 33.75 40 33.75 C 43.453125 33.75 46.25 36.546875 46.25 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 40 60 C 28.972656 60 20 51.027344 20 40 C 20 28.972656 28.972656 20 40 20 L 40 22.5 C 30.351563 22.5 22.5 30.351563 22.5 40 C 22.5 49.648438 30.351563 57.5 40 57.5 C 49.648438 57.5 57.5 49.648438 57.5 40 L 60 40 C 60 51.027344 51.027344 60 40 60 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 40 53.75 C 32.417969 53.75 26.25 47.582031 26.25 40 C 26.25 32.417969 32.417969 26.25 40 26.25 L 40 28.75 C 33.796875 28.75 28.75 33.796875 28.75 40 C 28.75 46.203125 33.796875 51.25 40 51.25 C 46.203125 51.25 51.25 46.203125 51.25 40 L 53.75 40 C 53.75 47.582031 47.582031 53.75 40 53.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 57.5 37.5 C 55.433594 37.5 53.75 35.816406 53.75 33.75 L 53.75 33.09375 C 53.359375 32.960938 53.03125 32.820313 52.710938 32.671875 L 52.195313 33.109375 C 50.785156 34.523438 48.3125 34.523438 46.894531 33.109375 C 46.1875 32.398438 45.796875 31.457031 45.796875 30.457031 C 45.796875 29.453125 46.1875 28.511719 46.894531 27.804688 L 47.355469 27.34375 C 47.179688 26.96875 47.042969 26.640625 46.921875 26.300781 L 46.25 26.25 C 44.183594 26.25 42.5 24.566406 42.5 22.5 C 42.5 20.433594 44.183594 18.75 46.25 18.75 L 46.90625 18.75 C 47.039063 18.359375 47.179688 18.03125 47.328125 17.710938 L 46.890625 17.195313 C 46.183594 16.488281 45.792969 15.546875 45.792969 14.546875 C 45.792969 13.542969 46.183594 12.601563 46.890625 11.894531 C 48.308594 10.476563 50.78125 10.480469 52.195313 11.894531 L 52.65625 12.355469 C 53.03125 12.179688 53.359375 12.042969 53.699219 11.921875 L 53.75 11.25 C 53.75 9.183594 55.433594 7.5 57.5 7.5 C 59.566406 7.5 61.25 9.183594 61.25 11.25 L 61.25 11.90625 C 61.640625 12.039063 61.96875 12.179688 62.289063 12.328125 L 62.804688 11.890625 C 64.214844 10.476563 66.691406 10.476563 68.105469 11.890625 C 68.8125 12.601563 69.203125 13.542969 69.203125 14.542969 C 69.203125 15.546875 68.8125 16.488281 68.105469 17.195313 L 67.644531 17.65625 C 67.820313 18.03125 67.957031 18.359375 68.078125 18.699219 L 68.75 18.75 C 70.816406 18.75 72.5 20.433594 72.5 22.5 C 72.5 24.566406 70.816406 26.25 68.75 26.25 L 68.09375 26.25 C 67.960938 26.640625 67.820313 26.96875 67.671875 27.289063 L 68.109375 27.804688 C 68.816406 28.511719 69.207031 29.453125 69.207031 30.453125 C 69.207031 31.457031 68.816406 32.398438 68.109375 33.105469 C 66.691406 34.523438 64.21875 34.519531 62.804688 33.105469 L 62.34375 32.644531 C 61.96875 32.820313 61.640625 32.957031 61.300781 33.078125 L 61.25 33.75 C 61.25 35.816406 59.566406 37.5 57.5 37.5 Z M 52.644531 30.152344 C 53.023438 30.152344 53.40625 30.234375 53.773438 30.40625 C 54.023438 30.527344 54.277344 30.628906 54.535156 30.722656 C 55.578125 31.097656 56.25 32.027344 56.25 33.09375 L 56.25 33.75 C 56.25 34.441406 56.808594 35 57.5 35 C 58.1875 35 58.75 34.441406 58.75 33.75 L 58.75 33.09375 C 58.75 32.027344 59.417969 31.097656 60.457031 30.726563 C 60.722656 30.628906 60.976563 30.527344 61.222656 30.410156 C 62.21875 29.9375 63.355469 30.121094 64.109375 30.875 L 64.570313 31.339844 C 65.042969 31.8125 65.863281 31.8125 66.335938 31.339844 C 66.574219 31.101563 66.703125 30.789063 66.703125 30.453125 C 66.703125 30.121094 66.574219 29.808594 66.335938 29.574219 L 65.875 29.109375 C 65.121094 28.355469 64.9375 27.222656 65.40625 26.222656 C 65.523438 25.976563 65.628906 25.722656 65.722656 25.460938 C 66.097656 24.421875 67.027344 23.75 68.09375 23.75 L 68.75 23.75 C 69.441406 23.75 70 23.191406 70 22.5 C 70 21.808594 69.441406 21.25 68.75 21.25 L 68.09375 21.25 C 67.027344 21.25 66.097656 20.578125 65.726563 19.542969 C 65.628906 19.277344 65.527344 19.023438 65.410156 18.777344 C 64.9375 17.777344 65.121094 16.644531 65.875 15.890625 L 66.339844 15.429688 C 66.574219 15.191406 66.703125 14.878906 66.703125 14.546875 C 66.703125 14.210938 66.574219 13.898438 66.339844 13.660156 C 65.863281 13.1875 65.042969 13.1875 64.574219 13.660156 L 64.109375 14.125 C 63.355469 14.878906 62.222656 15.0625 61.222656 14.59375 C 60.976563 14.472656 60.722656 14.371094 60.460938 14.277344 C 59.421875 13.902344 58.75 12.972656 58.75 11.90625 L 58.75 11.25 C 58.75 10.558594 58.191406 10 57.5 10 C 56.808594 10 56.25 10.558594 56.25 11.25 L 56.25 11.90625 C 56.25 12.972656 55.578125 13.902344 54.542969 14.273438 C 54.277344 14.371094 54.023438 14.472656 53.777344 14.589844 C 52.78125 15.0625 51.644531 14.878906 50.890625 14.125 L 50.429688 13.660156 C 49.957031 13.1875 49.136719 13.191406 48.660156 13.660156 C 48.425781 13.898438 48.296875 14.210938 48.296875 14.546875 C 48.296875 14.878906 48.425781 15.191406 48.660156 15.425781 L 49.125 15.890625 C 49.878906 16.644531 50.0625 17.777344 49.59375 18.777344 C 49.472656 19.023438 49.371094 19.277344 49.277344 19.539063 C 48.902344 20.578125 47.972656 21.25 46.90625 21.25 L 46.25 21.25 C 45.558594 21.25 45 21.808594 45 22.5 C 45 23.191406 45.558594 23.75 46.25 23.75 L 46.90625 23.75 C 47.972656 23.75 48.902344 24.421875 49.273438 25.457031 C 49.371094 25.722656 49.472656 25.976563 49.589844 26.222656 C 50.0625 27.222656 49.878906 28.355469 49.125 29.109375 L 48.660156 29.570313 C 48.425781 29.808594 48.296875 30.121094 48.296875 30.453125 C 48.296875 30.789063 48.425781 31.101563 48.660156 31.339844 C 49.136719 31.808594 49.957031 31.8125 50.425781 31.339844 L 50.890625 30.875 C 51.367188 30.398438 51.996094 30.152344 52.644531 30.152344 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 57.5 27.5 C 54.742188 27.5 52.5 25.257813 52.5 22.5 C 52.5 19.742188 54.742188 17.5 57.5 17.5 C 60.257813 17.5 62.5 19.742188 62.5 22.5 C 62.5 25.257813 60.257813 27.5 57.5 27.5 Z M 57.5 20 C 56.121094 20 55 21.121094 55 22.5 C 55 23.878906 56.121094 25 57.5 25 C 58.878906 25 60 23.878906 60 22.5 C 60 21.121094 58.878906 20 57.5 20 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-globe-earth.svg b/client/static/svg/icon-globe-earth.svg
new file mode 100644
index 00000000..05fbd142
--- /dev/null
+++ b/client/static/svg/icon-globe-earth.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="31.7739" y1="13" x2="31.7739" y2="21.6286" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="22.5815" y1="21.5" x2="22.5815" y2="31.6443" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="30.0061" y1="5" x2="30.0061" y2="58.4592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="33.3681" y1="5" x2="33.3681" y2="58.4592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 45.460938 17.992188 L 37.507813 25.945313 L 33.972656 22.410156 C 33.972656 22.410156 38.390625 17.992188 45.460938 17.992188 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 24.25 39.203125 L 32.203125 31.25 L 28.667969 27.714844 C 28.667969 27.714844 24.25 32.132813 24.25 39.203125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 37.507813 55 C 43.851563 55 49.816406 52.527344 54.300781 48.042969 C 58.789063 43.558594 61.257813 37.59375 61.257813 31.25 C 61.257813 24.90625 58.785156 18.941406 54.300781 14.457031 C 49.816406 9.96875 43.851563 7.5 37.507813 7.5 C 31.164063 7.5 25.199219 9.972656 20.714844 14.457031 C 16.226563 18.941406 13.757813 24.90625 13.757813 31.25 C 13.757813 37.59375 16.230469 43.558594 20.714844 48.042969 C 25.199219 52.53125 31.164063 55 37.507813 55 Z M 28.695313 24.207031 L 35.738281 31.25 L 22.277344 44.714844 C 21.085938 38.21875 23.675781 29.816406 28.695313 24.207031 Z M 46.3125 38.289063 L 39.273438 31.25 L 52.738281 17.785156 C 53.921875 24.28125 51.332031 32.679688 46.3125 38.289063 Z M 44.546875 40.054688 C 38.933594 45.078125 30.539063 47.667969 24.042969 46.480469 L 37.507813 33.015625 Z M 37.507813 29.484375 L 30.464844 22.4375 C 36.074219 17.417969 44.476563 14.824219 50.972656 16.015625 Z M 26.238281 49.25 C 26.613281 49.269531 26.988281 49.289063 27.367188 49.289063 C 33.882813 49.289063 41.128906 46.539063 46.320313 41.832031 L 51.605469 47.113281 C 47.714844 50.582031 42.765625 52.5 37.507813 52.5 C 33.457031 52.5 29.585938 51.355469 26.238281 49.25 Z M 53.375 45.347656 L 48.082031 40.058594 C 53.0625 34.5625 55.851563 26.78125 55.511719 19.988281 C 57.613281 23.332031 58.757813 27.199219 58.757813 31.25 C 58.757813 36.507813 56.839844 41.457031 53.375 45.347656 Z M 48.765625 13.246094 C 41.972656 12.90625 34.191406 15.691406 28.695313 20.671875 L 23.410156 15.382813 C 27.300781 11.917969 32.25 10 37.507813 10 C 41.554688 10 45.421875 11.144531 48.765625 13.246094 Z M 21.640625 17.152344 L 26.925781 22.4375 C 21.949219 27.929688 19.160156 35.714844 19.5 42.507813 C 17.398438 39.164063 16.257813 35.296875 16.257813 31.25 C 16.257813 25.992188 18.171875 21.042969 21.640625 17.152344 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 41.105469 59.734375 C 47.226563 58.964844 53.148438 56.265625 57.835938 51.578125 C 69.042969 40.371094 69.046875 22.128906 57.835938 10.921875 L 56.070313 12.6875 C 66.304688 22.921875 66.304688 39.578125 56.070313 49.8125 C 45.832031 60.046875 29.179688 60.046875 18.945313 49.8125 L 17.175781 51.578125 C 21.863281 56.265625 27.78125 58.964844 33.902344 59.734375 C 34.226563 60.917969 35 61.859375 36.25 62.269531 L 36.25 66.25 L 33.777344 66.25 C 31.703125 66.25 30.019531 67.929688 30.011719 70 L 23.75 70 L 23.75 72.5 L 51.25 72.5 L 51.25 70 L 45.007813 70 C 44.996094 67.929688 43.3125 66.25 41.238281 66.25 L 38.75 66.25 L 38.75 62.269531 C 40 61.859375 40.78125 60.917969 41.105469 59.734375 Z M 42.503906 70 L 32.511719 70 C 32.523438 69.308594 33.082031 68.75 33.777344 68.75 L 41.238281 68.75 C 41.929688 68.75 42.492188 69.308594 42.503906 70 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-heart-health.svg b/client/static/svg/icon-heart-health.svg
new file mode 100644
index 00000000..4fb06569
--- /dev/null
+++ b/client/static/svg/icon-heart-health.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="9.8333" x2="32" y2="54.7159" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="50.5" y1="33.6667" x2="50.5" y2="44.2733" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="14.5" y1="12.8333" x2="14.5" y2="24.8899" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 38.75 67.5 C 32.21875 67.5 7.5 51.015625 7.5 28.75 C 7.5 19.789063 14.789063 12.5 23.75 12.5 C 30.496094 12.5 36.296875 16.632813 38.75 22.5 C 41.203125 16.632813 47.003906 12.5 53.75 12.5 C 62.710938 12.5 70 19.789063 70 28.75 C 70 32.632813 69.234375 36.570313 67.722656 40.453125 L 66.75 42.484375 L 65.550781 41.679688 C 63.90625 40.582031 61.988281 40 60 40 C 54.484375 40 50 44.484375 50 50 C 50 55.515625 54.484375 60 60 60 C 65.515625 60 70 55.515625 70 50 L 72.5 50 C 72.5 56.890625 66.890625 62.5 60 62.5 C 57.300781 62.5 54.796875 61.640625 52.75 60.179688 C 47.378906 64.578125 41.8125 67.5 38.75 67.5 Z M 23.75 15 C 16.167969 15 10 21.167969 10 28.75 C 10 49.148438 32.929688 65 38.75 65 C 40.765625 65 45.605469 62.730469 50.847656 58.503906 C 48.769531 56.273438 47.5 53.28125 47.5 50 C 47.5 43.109375 53.109375 37.5 60 37.5 C 61.984375 37.5 63.914063 37.964844 65.660156 38.851563 C 66.871094 35.535156 67.5 32.113281 67.5 28.75 C 67.5 21.167969 61.332031 15 53.75 15 C 46.167969 15 40 21.167969 40 28.75 L 37.5 28.75 C 37.5 21.167969 31.332031 15 23.75 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 60 54.480469 C 59.359375 54.480469 58.71875 54.234375 58.234375 53.75 L 55.367188 50.882813 L 57.136719 49.117188 L 60 51.980469 L 69.117188 42.867188 L 70.886719 44.632813 L 61.769531 53.75 C 61.28125 54.234375 60.640625 54.480469 60 54.480469 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 23.75 17.5 C 17.535156 17.5 12.5 22.535156 12.5 28.75 L 23.75 28.75 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-maintenance.svg b/client/static/svg/icon-maintenance.svg
new file mode 100644
index 00000000..eac80c27
--- /dev/null
+++ b/client/static/svg/icon-maintenance.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="41" y1="47.875" x2="41" y2="54.0115" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="16" y1="4.6667" x2="16" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="41.003" y1="4.6667" x2="41.003" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="41" y1="4.6667" x2="41" y2="58.9749" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 55 63.75 C 55 65.820313 53.320313 67.5 51.25 67.5 C 49.179688 67.5 47.5 65.820313 47.5 63.75 C 47.5 61.679688 49.179688 60 51.25 60 C 53.320313 60 55 61.679688 55 63.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 25 40 L 23.75 40 L 23.75 17.152344 C 24.492188 16.71875 25 15.921875 25 15 L 25 10 C 25 8.621094 23.878906 7.5 22.5 7.5 L 17.5 7.5 C 16.121094 7.5 15 8.621094 15 10 L 15 15 C 15 15.921875 15.507813 16.71875 16.25 17.152344 L 16.25 40 L 15 40 C 12.933594 40 11.25 41.683594 11.25 43.75 L 11.25 63.75 C 11.25 68.574219 15.175781 72.5 20 72.5 C 24.824219 72.5 28.75 68.574219 28.75 63.75 L 28.75 43.75 C 28.75 41.683594 27.066406 40 25 40 Z M 17.5 10 L 22.5 10 L 22.5 15 L 17.5 15 Z M 18.75 17.5 L 21.25 17.5 L 21.25 40 L 18.75 40 Z M 15 42.5 L 25 42.5 C 25.691406 42.5 26.25 43.058594 26.25 43.75 L 26.25 47.5 L 13.75 47.5 L 13.75 43.75 C 13.75 43.058594 14.308594 42.5 15 42.5 Z M 23.75 62.5 L 23.75 50 L 26.25 50 L 26.25 62.5 Z M 13.75 62.5 L 13.75 50 L 16.25 50 L 16.25 62.5 Z M 18.75 50 L 21.25 50 L 21.25 62.5 L 18.75 62.5 Z M 20 70 C 16.980469 70 14.457031 67.847656 13.875 65 L 26.125 65 C 25.542969 67.847656 23.019531 70 20 70 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 68.75 21.25 C 68.75 13.28125 63.492188 7.5 56.25 7.5 L 55 7.5 L 55 18.75 C 55 19.441406 54.441406 20 53.75 20 L 48.75 20 C 48.058594 20 47.5 19.441406 47.5 18.75 L 47.5 7.5 L 46.25 7.5 C 42.398438 7.5 39.011719 9.113281 36.71875 12.046875 C 33.957031 15.574219 33.058594 20.710938 34.3125 25.78125 C 35.550781 30.78125 39.8125 34.390625 44.917969 34.929688 L 43 63.683594 C 42.851563 65.957031 43.65625 68.214844 45.214844 69.882813 C 46.769531 71.546875 48.972656 72.5 51.25 72.5 C 53.53125 72.5 55.734375 71.546875 57.292969 69.882813 C 58.867188 68.195313 59.652344 65.996094 59.5 63.691406 L 57.582031 34.933594 C 64.128906 34.269531 68.75 28.722656 68.75 21.25 Z M 56.25 32.5 L 54.914063 32.5 L 57.003906 63.859375 C 57.113281 65.464844 56.566406 66.996094 55.464844 68.171875 C 54.363281 69.351563 52.867188 70 51.25 70 C 49.636719 70 48.140625 69.351563 47.039063 68.171875 C 45.9375 66.996094 45.390625 65.460938 45.496094 63.851563 L 47.582031 32.5 L 46.25 32.5 C 41.71875 32.5 37.808594 29.488281 36.742188 25.179688 C 35.667969 20.847656 36.398438 16.515625 38.6875 13.589844 C 40.273438 11.5625 42.4375 10.359375 45 10.070313 L 45 18.75 C 45 20.816406 46.683594 22.5 48.75 22.5 L 53.75 22.5 C 55.820313 22.5 57.5 20.816406 57.5 18.75 L 57.5 10.074219 C 62.714844 10.679688 66.25 15.105469 66.25 21.25 C 66.25 27.875 62.140625 32.5 56.25 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 50 38.75 L 52.5 38.75 L 52.5 56.25 L 50 56.25 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-male-user.svg b/client/static/svg/icon-male-user.svg
new file mode 100644
index 00000000..5e8cf12f
--- /dev/null
+++ b/client/static/svg/icon-male-user.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="36.5" y1="29.1667" x2="36.5" y2="34.6692" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="27.5" y1="29.1667" x2="27.5" y2="34.6692" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="36.8333" x2="32" y2="41.3341" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="4.5" x2="32" y2="59.0464" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 48.75 40 C 48.75 41.726563 47.351563 43.125 45.625 43.125 C 43.898438 43.125 42.5 41.726563 42.5 40 C 42.5 38.273438 43.898438 36.875 45.625 36.875 C 47.351563 36.875 48.75 38.273438 48.75 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 37.5 40 C 37.5 41.726563 36.101563 43.125 34.375 43.125 C 32.648438 43.125 31.25 41.726563 31.25 40 C 31.25 38.273438 32.648438 36.875 34.375 36.875 C 36.101563 36.875 37.5 38.273438 37.5 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 35 46.25 C 35 49.011719 37.238281 51.25 40 51.25 C 42.761719 51.25 45 49.011719 45 46.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 40 7.5 C 22.078125 7.5 7.5 22.078125 7.5 40 C 7.5 57.921875 22.078125 72.5 40 72.5 C 57.921875 72.5 72.5 57.921875 72.5 40 C 72.5 22.078125 57.921875 7.5 40 7.5 Z M 40 10 C 56.542969 10 70 23.457031 70 40 C 70 47.265625 67.402344 53.933594 63.089844 59.132813 C 60.46875 55.597656 57.089844 52.726563 53.183594 50.710938 C 54.402344 49.019531 55.296875 47.089844 55.796875 45 L 56.25 45 C 59.695313 45 62.5 42.195313 62.5 38.75 C 62.5 35.304688 59.695313 32.5 56.25 32.5 L 56.1875 32.5 C 55.542969 24.125 48.539063 17.5 40 17.5 C 31.460938 17.5 24.457031 24.125 23.8125 32.5 L 23.75 32.5 C 20.304688 32.5 17.5 35.304688 17.5 38.75 C 17.5 42.195313 20.304688 45 23.75 45 L 24.203125 45 C 24.699219 47.089844 25.597656 49.019531 26.816406 50.710938 C 22.914063 52.730469 19.53125 55.597656 16.910156 59.128906 C 12.597656 53.933594 10 47.265625 10 40 C 10 23.457031 23.457031 10 40 10 Z M 28.503906 26.230469 C 28.585938 26.234375 28.667969 26.25 28.75 26.25 C 31.410156 26.25 33.574219 24.15625 33.722656 21.53125 C 34.507813 21.125 35.335938 20.796875 36.199219 20.546875 C 36.222656 20.78125 36.25 21.015625 36.25 21.25 C 36.25 25.386719 32.886719 28.75 28.75 28.75 C 28.242188 28.75 27.746094 28.695313 27.261719 28.597656 C 27.601563 27.765625 28.015625 26.972656 28.503906 26.230469 Z M 50.359375 24.734375 C 49.84375 24.910156 49.304688 25 48.75 25 C 46.179688 25 44.082031 23.046875 43.804688 20.546875 C 46.378906 21.292969 48.640625 22.765625 50.359375 24.734375 Z M 41.253906 20.0625 C 41.289063 24.171875 44.636719 27.5 48.75 27.5 C 49.835938 27.5 50.882813 27.25 51.847656 26.808594 C 52.273438 27.527344 52.628906 28.289063 52.917969 29.085938 C 51.617188 29.679688 50.203125 30 48.75 30 C 43.257813 30 38.789063 25.546875 38.753906 20.0625 C 39.164063 20.027344 39.578125 20 40 20 C 40.421875 20 40.839844 20.027344 41.253906 20.0625 Z M 26.25 33.75 C 26.25 32.808594 26.347656 31.890625 26.527344 31 C 27.25 31.167969 27.992188 31.25 28.75 31.25 C 32.640625 31.25 36.015625 29.011719 37.664063 25.753906 C 39.753906 29.757813 43.933594 32.5 48.75 32.5 C 50.417969 32.5 52.039063 32.144531 53.550781 31.511719 C 53.671875 32.242188 53.75 32.984375 53.75 33.75 L 53.75 41.25 C 53.75 48.832031 47.582031 55 40 55 C 32.417969 55 26.25 48.832031 26.25 41.25 Z M 40 57.5 C 44.507813 57.5 48.585938 55.652344 51.535156 52.679688 C 52.425781 53.117188 53.296875 53.59375 54.128906 54.125 C 50.390625 57.863281 45.332031 60 40 60 C 34.667969 60 29.613281 57.867188 25.871094 54.125 C 26.703125 53.59375 27.574219 53.117188 28.464844 52.679688 C 31.410156 55.652344 35.492188 57.5 40 57.5 Z M 56.25 35 C 58.316406 35 60 36.683594 60 38.75 C 60 40.816406 58.316406 42.5 56.25 42.5 Z M 23.75 41.25 L 23.75 42.5 C 21.683594 42.5 20 40.816406 20 38.75 C 20 36.683594 21.683594 35 23.75 35 Z M 40 70 C 31.640625 70 24.074219 66.5625 18.628906 61.027344 C 20.101563 58.964844 21.847656 57.140625 23.824219 55.589844 C 28.054688 59.984375 33.859375 62.5 40 62.5 C 46.140625 62.5 51.945313 59.984375 56.175781 55.589844 C 58.152344 57.140625 59.898438 58.964844 61.371094 61.027344 C 55.921875 66.5625 48.359375 70 40 70 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-markdown.svg b/client/static/svg/icon-markdown.svg
new file mode 100644
index 00000000..c7a65876
--- /dev/null
+++ b/client/static/svg/icon-markdown.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="31.8738" y1="12.7607" x2="32.1238" y2="50.8857" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="31.8738" y1="12.7607" x2="32.1238" y2="50.8857" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="23" y1="23" x2="23" y2="42.0497" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="44" y1="23" x2="44" y2="42.0497" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 72.5 63.75 L 7.5 63.75 C 5.433594 63.75 3.75 62.066406 3.75 60 L 3.75 20 C 3.75 17.933594 5.433594 16.25 7.5 16.25 L 72.5 16.25 C 74.566406 16.25 76.25 17.933594 76.25 20 L 76.25 60 C 76.25 62.066406 74.566406 63.75 72.5 63.75 Z M 7.5 18.75 C 6.8125 18.75 6.25 19.3125 6.25 20 L 6.25 60 C 6.25 60.6875 6.8125 61.25 7.5 61.25 L 72.5 61.25 C 73.1875 61.25 73.75 60.6875 73.75 60 L 73.75 20 C 73.75 19.3125 73.1875 18.75 72.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 68.75 58.75 L 11.25 58.75 C 9.871094 58.75 8.75 57.628906 8.75 56.25 L 8.75 23.75 C 8.75 22.371094 9.871094 21.25 11.25 21.25 L 68.75 21.25 C 70.128906 21.25 71.25 22.371094 71.25 23.75 L 71.25 56.25 C 71.25 57.628906 70.128906 58.75 68.75 58.75 Z M 68.75 23.75 L 11.25 23.75 L 11.25 56.25 L 68.75 56.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 35 28.75 L 28.75 38.75 L 22.5 28.75 L 16.25 28.75 L 16.25 51.25 L 22.5 51.25 L 22.5 38.75 L 28.75 47.5 L 35 38.75 L 35 51.25 L 41.25 51.25 L 41.25 28.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 57.5 40 L 57.5 28.75 L 52.5 28.75 L 52.5 40 L 45 40 L 55 51.25 L 65 40 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-open-in-browser.svg b/client/static/svg/icon-open-in-browser.svg
new file mode 100644
index 00000000..1d3cd26e
--- /dev/null
+++ b/client/static/svg/icon-open-in-browser.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="7.625" x2="32" y2="15.0011" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="5.6667" x2="32" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="5.6667" x2="32" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="25.0004" y1="5.6667" x2="25.0004" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="18" y1="5.6667" x2="18" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="18" y1="5.6667" x2="18" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="17" y1="5.6667" x2="17" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="46" y1="5.6667" x2="46" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="46" y1="5.6667" x2="46" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear9" gradientUnits="userSpaceOnUse" x1="47" y1="5.6667" x2="47" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear10" gradientUnits="userSpaceOnUse" x1="15" y1="5.6667" x2="15" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear11" gradientUnits="userSpaceOnUse" x1="22" y1="5.6667" x2="22" y2="59.3592" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 10 10 L 70 10 L 70 17.5 L 10 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 7.5 L 13.75 7.5 C 10.304688 7.5 7.5 10.304688 7.5 13.75 L 7.5 63.75 C 7.5 65.816406 9.183594 67.5 11.25 67.5 L 36.25 67.5 L 36.25 65 L 11.25 65 C 10.558594 65 10 64.441406 10 63.75 L 10 62.269531 C 10.390625 62.410156 10.808594 62.5 11.25 62.5 L 36.25 62.5 L 36.25 60 L 11.25 60 C 10.558594 60 10 59.441406 10 58.75 L 10 20 L 70 20 L 70 58.75 C 70 59.441406 69.441406 60 68.75 60 L 43.75 60 L 43.75 62.5 L 68.75 62.5 C 69.191406 62.5 69.609375 62.410156 70 62.269531 L 70 63.75 C 70 64.441406 69.441406 65 68.75 65 L 43.75 65 L 43.75 67.5 L 68.75 67.5 C 70.816406 67.5 72.5 65.816406 72.5 63.75 L 72.5 13.75 C 72.5 10.304688 69.695313 7.5 66.25 7.5 Z M 10 17.5 L 10 13.75 C 10 11.683594 11.683594 10 13.75 10 L 66.25 10 C 68.316406 10 70 11.683594 70 13.75 L 70 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 65 35 L 65 25 C 65 23.621094 63.878906 22.5 62.5 22.5 L 17.5 22.5 C 16.121094 22.5 15 23.621094 15 25 L 15 35 C 15 36.378906 16.121094 37.5 17.5 37.5 L 62.5 37.5 C 63.878906 37.5 65 36.378906 65 35 Z M 62.503906 35 L 52.5 35 L 52.5 25 L 62.5 25 Z M 50 35 L 30 35 L 30 25 L 50 25 Z M 17.5 25 L 27.5 25 L 27.5 35 L 17.5 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 45.589844 55 C 46.289063 55 46.929688 54.636719 47.265625 54.054688 C 47.582031 53.503906 47.578125 52.847656 47.257813 52.300781 L 42.269531 43.75 C 41.820313 42.980469 40.949219 42.5 40 42.5 C 39.050781 42.5 38.179688 42.980469 37.730469 43.75 L 32.742188 52.300781 C 32.421875 52.847656 32.417969 53.503906 32.734375 54.054688 C 33.070313 54.636719 33.710938 55 34.410156 55 L 38.75 55 L 38.75 68.75 C 38.75 69.441406 38.191406 70 37.5 70 L 15 70 L 15 72.5 L 37.5 72.5 C 39.566406 72.5 41.25 70.816406 41.25 68.75 L 41.25 55 Z M 39.875 45.027344 C 39.921875 44.988281 40.074219 44.988281 40.109375 45.007813 L 44.480469 52.5 L 35.519531 52.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 15 42.5 L 30 42.5 L 30 45 L 15 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 15 47.5 L 30 47.5 L 30 50 L 15 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 15 52.5 L 27.5 52.5 L 27.5 55 L 15 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 50 42.5 L 65 42.5 L 65 45 L 50 45 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 50 47.5 L 65 47.5 L 65 50 L 50 50 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear9);" d="M 52.5 52.5 L 65 52.5 L 65 55 L 52.5 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear10);" d="M 15 12.5 L 22.5 12.5 L 22.5 15 L 15 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear11);" d="M 25 12.5 L 30 12.5 L 30 15 L 25 15 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-paint-palette.svg b/client/static/svg/icon-paint-palette.svg
new file mode 100644
index 00000000..d611d943
--- /dev/null
+++ b/client/static/svg/icon-paint-palette.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="49" y1="21.9609" x2="49" y2="29.6619" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="40" y1="12" x2="40" y2="19.8003" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="26" y1="11.0438" x2="26" y2="18.9416" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="21.1089" x2="16" y2="28.9559" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="16" y1="33.9501" x2="16" y2="41.8509" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="31.9997" y1="4.625" x2="31.9997" y2="59.3701" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 66.25 32.5 C 66.25 35.265625 64.015625 37.5 61.25 37.5 C 58.488281 37.5 56.25 35.265625 56.25 32.5 C 56.25 29.738281 58.488281 27.5 61.25 27.5 C 64.015625 27.5 66.25 29.738281 66.25 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 55 20 C 55 22.765625 52.765625 25 50 25 C 47.238281 25 45 22.765625 45 20 C 45 17.238281 47.238281 15 50 15 C 52.765625 15 55 17.238281 55 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 37.5 18.75 C 37.5 21.515625 35.265625 23.75 32.5 23.75 C 29.738281 23.75 27.5 21.515625 27.5 18.75 C 27.5 15.988281 29.738281 13.75 32.5 13.75 C 35.265625 13.75 37.5 15.988281 37.5 18.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 25 31.25 C 25 34.015625 22.765625 36.25 20 36.25 C 17.238281 36.25 15 34.015625 15 31.25 C 15 28.488281 17.238281 26.25 20 26.25 C 22.765625 26.25 25 28.488281 25 31.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 25 47.5 C 25 50.265625 22.765625 52.5 20 52.5 C 17.238281 52.5 15 50.265625 15 47.5 C 15 44.738281 17.238281 42.5 20 42.5 C 22.765625 42.5 25 44.738281 25 47.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 37.5 51.25 C 33.363281 51.25 30 54.613281 30 58.75 C 30 62.886719 33.363281 66.25 37.5 66.25 C 41.636719 66.25 45 62.886719 45 58.75 C 45 54.613281 41.636719 51.25 37.5 51.25 Z M 37.5 63.75 C 34.742188 63.75 32.5 61.507813 32.5 58.75 C 32.5 55.992188 34.742188 53.75 37.5 53.75 C 40.257813 53.75 42.5 55.992188 42.5 58.75 C 42.5 61.507813 40.257813 63.75 37.5 63.75 Z M 63.109375 15.402344 C 56.25 8.957031 47.28125 5.726563 37.847656 6.320313 C 20.921875 7.367188 7.367188 20.921875 6.320313 37.847656 C 5.734375 47.28125 8.957031 56.25 15.402344 63.109375 C 21.757813 69.875 30.722656 73.75 40 73.75 C 46.894531 73.75 52.5 68.144531 52.5 61.25 L 52.5 58.75 C 52.5 53.238281 56.988281 48.75 62.5 48.75 L 65 48.75 C 69.824219 48.75 73.75 44.824219 73.75 40 C 73.75 30.722656 69.875 21.757813 63.109375 15.402344 Z M 65 46.25 L 62.5 46.25 C 55.605469 46.25 50 51.855469 50 58.75 L 50 61.25 C 50 66.761719 45.511719 71.25 40 71.25 C 31.285156 71.25 23.199219 67.75 17.222656 61.398438 C 11.261719 55.050781 8.273438 46.738281 8.8125 38.003906 C 9.785156 22.335938 22.335938 9.785156 38.003906 8.8125 C 38.675781 8.769531 39.351563 8.75 40.023438 8.75 C 48.011719 8.75 55.539063 11.71875 61.398438 17.222656 C 67.75 23.199219 71.25 31.285156 71.25 40 C 71.25 43.449219 68.449219 46.25 65 46.25 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-people.svg b/client/static/svg/icon-people.svg
new file mode 100644
index 00000000..28717a8d
--- /dev/null
+++ b/client/static/svg/icon-people.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="36" y1="-126.1334" x2="36" y2="-130.1422" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,-1.25,0,-127.5)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="28" y1="-126.1334" x2="28" y2="-130.1422" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,-1.25,0,-127.5)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="49.5" y1="-129.625" x2="49.5" y2="-133.502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,-1.25,0,-127.5)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="49.5" y1="-129.625" x2="49.5" y2="-133.502" spreadMethod="reflect" gradientTransform="matrix(-1.25,0,0,-1.25,80,-127.5)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="32" y1="11" x2="32" y2="53" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 47.5 32.5 C 47.5 33.878906 46.378906 35 45 35 C 43.621094 35 42.5 33.878906 42.5 32.5 C 42.5 31.121094 43.621094 30 45 30 C 46.378906 30 47.5 31.121094 47.5 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 37.5 32.5 C 37.5 33.878906 36.378906 35 35 35 C 33.621094 35 32.5 33.878906 32.5 32.5 C 32.5 31.121094 33.621094 30 35 30 C 36.378906 30 37.5 31.121094 37.5 32.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 63.75 36.875 C 63.75 37.910156 62.910156 38.75 61.875 38.75 C 60.839844 38.75 60 37.910156 60 36.875 C 60 35.839844 60.839844 35 61.875 35 C 62.910156 35 63.75 35.839844 63.75 36.875 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 20 36.875 C 20 37.910156 19.160156 38.75 18.125 38.75 C 17.089844 38.75 16.25 37.910156 16.25 36.875 C 16.25 35.839844 17.089844 35 18.125 35 C 19.160156 35 20 35.839844 20 36.875 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 67.5 46.578125 C 68.691406 45.042969 69.507813 43.214844 69.832031 41.214844 C 69.890625 41.222656 69.941406 41.25 70 41.25 C 72.757813 41.25 75 39.007813 75 36.25 C 75 33.492188 72.757813 31.25 70 31.25 C 69.988281 31.25 69.980469 31.257813 69.96875 31.257813 C 69.644531 24.996094 64.464844 20 58.125 20 C 56.09375 20 54.121094 20.539063 52.363281 21.519531 C 50.132813 16.929688 45.4375 13.75 40 13.75 C 34.5625 13.75 29.867188 16.929688 27.636719 21.519531 C 25.878906 20.539063 23.90625 20 21.875 20 C 15.535156 20 10.355469 24.996094 10.03125 31.257813 C 10.019531 31.257813 10.011719 31.25 10 31.25 C 7.242188 31.25 5 33.492188 5 36.25 C 5 39.007813 7.242188 41.25 10 41.25 C 10.058594 41.25 10.109375 41.222656 10.167969 41.214844 C 10.492188 43.214844 11.308594 45.042969 12.5 46.578125 C 7.015625 50.574219 3.75 56.941406 3.75 63.75 L 3.75 66.25 L 76.25 66.25 L 76.25 63.75 C 76.25 56.941406 72.984375 50.574219 67.5 46.578125 Z M 72.5 36.25 C 72.5 37.628906 71.378906 38.75 70 38.75 L 70 33.75 C 71.378906 33.75 72.5 34.871094 72.5 36.25 Z M 58.125 22.5 C 63.296875 22.5 67.5 26.703125 67.5 31.875 L 67.5 39.3125 C 67.5 44.484375 63.296875 48.6875 58.125 48.6875 L 58.125 48.910156 C 56.621094 46.453125 54.609375 44.296875 52.183594 42.597656 C 52.816406 41.390625 53.269531 40.082031 53.519531 38.703125 C 53.597656 38.71875 53.667969 38.75 53.75 38.75 C 56.507813 38.75 58.75 36.507813 58.75 33.75 C 58.75 30.992188 56.507813 28.75 53.75 28.75 L 53.75 27.5 C 53.75 26.242188 53.566406 25.03125 53.25 23.875 C 54.714844 22.980469 56.394531 22.5 58.125 22.5 Z M 53.75 35 C 54.441406 35 55 34.441406 55 33.75 C 55 33.058594 54.441406 32.5 53.75 32.5 L 53.75 31.25 C 55.128906 31.25 56.25 32.371094 56.25 33.75 C 56.25 35.128906 55.128906 36.25 53.75 36.25 Z M 28.75 27.5 C 28.75 21.296875 33.796875 16.25 40 16.25 C 46.203125 16.25 51.25 21.296875 51.25 27.5 L 51.25 36.25 C 51.25 42.453125 46.203125 47.5 40 47.5 C 33.796875 47.5 28.75 42.453125 28.75 36.25 Z M 26.25 32.5 C 25.558594 32.5 25 33.058594 25 33.75 C 25 34.441406 25.558594 35 26.25 35 L 26.25 36.25 C 24.871094 36.25 23.75 35.128906 23.75 33.75 C 23.75 32.371094 24.871094 31.25 26.25 31.25 Z M 7.5 36.25 C 7.5 34.871094 8.621094 33.75 10 33.75 L 10 38.75 C 8.621094 38.75 7.5 37.628906 7.5 36.25 Z M 12.5 31.875 C 12.5 26.703125 16.703125 22.5 21.875 22.5 C 23.605469 22.5 25.285156 22.980469 26.75 23.875 C 26.433594 25.03125 26.25 26.242188 26.25 27.5 L 26.25 28.75 C 23.492188 28.75 21.25 30.992188 21.25 33.75 C 21.25 36.507813 23.492188 38.75 26.25 38.75 C 26.332031 38.75 26.402344 38.71875 26.480469 38.703125 C 26.730469 40.082031 27.183594 41.390625 27.816406 42.597656 C 25.390625 44.296875 23.378906 46.453125 21.875 48.910156 L 21.875 48.6875 C 16.703125 48.6875 12.5 44.484375 12.5 39.3125 Z M 6.25 63.75 C 6.25 57.628906 9.234375 51.914063 14.242188 48.398438 C 16.027344 49.894531 18.25 50.886719 20.695313 51.128906 C 19.429688 53.871094 18.75 56.890625 18.75 60 L 18.75 63.75 Z M 37.5 63.75 C 37.5 62.371094 38.621094 61.25 40 61.25 C 41.378906 61.25 42.5 62.371094 42.5 63.75 Z M 58.75 63.75 L 45 63.75 C 45 60.992188 42.757813 58.75 40 58.75 C 37.242188 58.75 35 60.992188 35 63.75 L 21.25 63.75 L 21.25 60 C 21.25 53.910156 24.207031 48.21875 29.171875 44.699219 C 31.691406 47.917969 35.605469 50 40 50 C 44.394531 50 48.308594 47.917969 50.828125 44.699219 C 55.792969 48.21875 58.75 53.910156 58.75 60 Z M 61.25 63.75 L 61.25 60 C 61.25 56.890625 60.570313 53.871094 59.308594 51.128906 C 61.75 50.886719 63.976563 49.894531 65.757813 48.398438 C 70.765625 51.914063 73.75 57.628906 73.75 63.75 Z M 51.371094 47.859375 L 53.121094 49.640625 C 49.597656 53.097656 44.9375 55 40 55 C 35.0625 55 30.402344 53.097656 26.878906 49.640625 L 28.628906 47.859375 C 31.683594 50.851563 35.722656 52.5 40 52.5 C 44.277344 52.5 48.316406 50.851563 51.371094 47.859375 Z M 34.789063 24.046875 L 32.707031 22.660156 C 34.335938 20.210938 37.0625 18.75 40 18.75 C 43.113281 18.75 46.015625 20.425781 47.578125 23.125 L 45.414063 24.375 C 44.296875 22.449219 42.222656 21.25 40 21.25 C 37.902344 21.25 35.953125 22.296875 34.789063 24.046875 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-process.svg b/client/static/svg/icon-process.svg
new file mode 100644
index 00000000..22aaa665
--- /dev/null
+++ b/client/static/svg/icon-process.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="24.4999" y1="4.1666" x2="24.4999" y2="59.312" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="12.5009" y1="4.1666" x2="12.5009" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="39.4999" y1="4.1667" x2="39.4999" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="51.4989" y1="4.1667" x2="51.4989" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="32" y1="4.1667" x2="32" y2="59.3119" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="27.8333" x2="32" y2="35.8333" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 16.25 20 C 16.25 17.933594 17.929688 16.25 20 16.25 L 32.5 16.25 L 32.5 21.300781 C 32.5 22.171875 32.953125 22.957031 33.714844 23.402344 C 34.109375 23.632813 34.550781 23.746094 34.992188 23.746094 C 35.421875 23.746094 35.847656 23.640625 36.230469 23.425781 L 45.625 18.160156 C 46.796875 17.5 47.5 16.320313 47.5 15 C 47.5 13.679688 46.796875 12.5 45.625 11.839844 L 36.230469 6.574219 C 35.449219 6.136719 34.484375 6.144531 33.714844 6.597656 C 32.953125 7.042969 32.5 7.828125 32.5 8.699219 L 32.5 13.75 L 20 13.75 C 16.554688 13.75 13.75 16.554688 13.75 20 L 13.75 25 L 16.25 25 Z M 35.007813 8.753906 L 44.402344 14.019531 C 44.941406 14.324219 45 14.804688 45 15 C 45 15.195313 44.941406 15.675781 44.402344 15.980469 L 35 21.300781 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 16.25 60 L 16.25 47.5 L 21.300781 47.5 C 22.171875 47.5 22.957031 47.046875 23.402344 46.285156 C 23.855469 45.511719 23.863281 44.546875 23.425781 43.765625 L 18.160156 34.375 C 17.5 33.203125 16.320313 32.5 15 32.5 C 13.679688 32.5 12.5 33.203125 11.839844 34.375 L 6.574219 43.769531 C 6.136719 44.546875 6.144531 45.515625 6.597656 46.285156 C 7.042969 47.046875 7.828125 47.5 8.695313 47.5 L 13.75 47.5 L 13.75 60 C 13.75 63.445313 16.554688 66.25 20 66.25 L 25 66.25 L 25 63.75 L 20 63.75 C 17.929688 63.75 16.25 62.066406 16.25 60 Z M 14.019531 35.597656 C 14.324219 35.058594 14.804688 35 15 35 C 15.195313 35 15.675781 35.058594 15.980469 35.597656 L 21.300781 45 L 8.753906 44.992188 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 63.75 60 C 63.75 62.066406 62.066406 63.75 60 63.75 L 47.5 63.75 L 47.5 58.699219 C 47.5 57.828125 47.046875 57.042969 46.285156 56.597656 C 45.511719 56.144531 44.546875 56.136719 43.765625 56.574219 L 34.375 61.839844 C 33.199219 62.5 32.5 63.679688 32.5 65 C 32.5 66.320313 33.203125 67.5 34.375 68.160156 L 43.769531 73.425781 C 44.152344 73.640625 44.578125 73.746094 45.007813 73.746094 C 45.449219 73.746094 45.890625 73.632813 46.285156 73.402344 C 47.046875 72.957031 47.5 72.171875 47.5 71.300781 L 47.5 66.25 L 60 66.25 C 63.445313 66.25 66.25 63.445313 66.25 60 L 66.25 55 L 63.75 55 Z M 44.992188 71.246094 L 35.597656 65.980469 C 35.058594 65.675781 35 65.195313 35 65 C 35 64.804688 35.058594 64.324219 35.597656 64.019531 L 45 58.699219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 73.402344 33.714844 C 72.957031 32.953125 72.171875 32.5 71.300781 32.5 L 66.25 32.5 L 66.25 20 C 66.25 16.554688 63.445313 13.75 60 13.75 L 55 13.75 L 55 16.25 L 60 16.25 C 62.066406 16.25 63.75 17.933594 63.75 20 L 63.75 32.5 L 58.695313 32.5 C 57.828125 32.5 57.042969 32.953125 56.597656 33.714844 C 56.144531 34.484375 56.136719 35.453125 56.574219 36.234375 L 61.839844 45.625 C 62.5 46.796875 63.679688 47.5 65 47.5 C 66.320313 47.5 67.5 46.796875 68.160156 45.625 L 73.425781 36.230469 C 73.863281 35.453125 73.855469 34.488281 73.402344 33.714844 Z M 65.980469 44.402344 C 65.675781 44.941406 65.195313 45 65 45 C 64.804688 45 64.324219 44.941406 64.019531 44.402344 L 58.695313 35 L 71.246094 35.007813 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 48.75 35 C 48.75 32.929688 47.070313 31.25 45 31.25 L 35 31.25 C 32.929688 31.25 31.25 32.929688 31.25 35 L 31.25 45 C 31.25 47.070313 32.929688 48.75 35 48.75 L 45 48.75 C 47.070313 48.75 48.75 47.070313 48.75 45 Z M 46.25 45 C 46.25 45.691406 45.691406 46.25 45 46.25 L 35 46.25 C 34.308594 46.25 33.75 45.691406 33.75 45 L 33.75 35 C 33.75 34.308594 34.308594 33.75 35 33.75 L 45 33.75 C 45.691406 33.75 46.25 34.308594 46.25 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 43.75 42.5 C 43.75 43.191406 43.191406 43.75 42.5 43.75 L 37.5 43.75 C 36.808594 43.75 36.25 43.191406 36.25 42.5 L 36.25 37.5 C 36.25 36.808594 36.808594 36.25 37.5 36.25 L 42.5 36.25 C 43.191406 36.25 43.75 36.808594 43.75 37.5 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-registry-editor.svg b/client/static/svg/icon-registry-editor.svg
new file mode 100644
index 00000000..d0b7f831
--- /dev/null
+++ b/client/static/svg/icon-registry-editor.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="11.875" x2="32" y2="38.7526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="48" y1="11.375" x2="48" y2="38.2526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="48" y1="11.875" x2="48" y2="38.7526" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="32" y1="9.75" x2="32" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="16" y1="9.75" x2="16" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear7" gradientUnits="userSpaceOnUse" x1="32" y1="9.75" x2="32" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear8" gradientUnits="userSpaceOnUse" x1="48" y1="9.75" x2="48" y2="56.2607" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear0);" d="M 33.75 15 L 46.25 15 L 46.25 27.5 L 33.75 27.5 Z "/>
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear1);" d="M 53.75 35 L 66.25 35 L 66.25 47.5 L 53.75 47.5 Z "/>
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear2);" d="M 53.75 15 L 66.25 15 L 66.25 27.5 L 53.75 27.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 25 30 L 15 30 C 12.933594 30 11.25 28.316406 11.25 26.25 L 11.25 16.25 C 11.25 14.183594 12.933594 12.5 15 12.5 L 25 12.5 C 27.066406 12.5 28.75 14.183594 28.75 16.25 L 28.75 26.25 C 28.75 28.316406 27.066406 30 25 30 Z M 15 15 C 14.308594 15 13.75 15.5625 13.75 16.25 L 13.75 26.25 C 13.75 26.9375 14.308594 27.5 15 27.5 L 25 27.5 C 25.691406 27.5 26.25 26.9375 26.25 26.25 L 26.25 16.25 C 26.25 15.5625 25.691406 15 25 15 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 25 50 L 15 50 C 12.933594 50 11.25 48.316406 11.25 46.25 L 11.25 36.25 C 11.25 34.183594 12.933594 32.5 15 32.5 L 25 32.5 C 27.066406 32.5 28.75 34.183594 28.75 36.25 L 28.75 46.25 C 28.75 48.316406 27.066406 50 25 50 Z M 15 35 C 14.308594 35 13.75 35.5625 13.75 36.25 L 13.75 46.25 C 13.75 46.9375 14.308594 47.5 15 47.5 L 25 47.5 C 25.691406 47.5 26.25 46.9375 26.25 46.25 L 26.25 36.25 C 26.25 35.5625 25.691406 35 25 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 45 50 L 35 50 C 32.933594 50 31.25 48.316406 31.25 46.25 L 31.25 36.25 C 31.25 34.183594 32.933594 32.5 35 32.5 L 45 32.5 C 47.066406 32.5 48.75 34.183594 48.75 36.25 L 48.75 46.25 C 48.75 48.316406 47.066406 50 45 50 Z M 35 35 C 34.308594 35 33.75 35.5625 33.75 36.25 L 33.75 46.25 C 33.75 46.9375 34.308594 47.5 35 47.5 L 45 47.5 C 45.691406 47.5 46.25 46.9375 46.25 46.25 L 46.25 36.25 C 46.25 35.5625 45.691406 35 45 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 25 70 L 15 70 C 12.933594 70 11.25 68.316406 11.25 66.25 L 11.25 56.25 C 11.25 54.183594 12.933594 52.5 15 52.5 L 25 52.5 C 27.066406 52.5 28.75 54.183594 28.75 56.25 L 28.75 66.25 C 28.75 68.316406 27.066406 70 25 70 Z M 15 55 C 14.308594 55 13.75 55.5625 13.75 56.25 L 13.75 66.25 C 13.75 66.9375 14.308594 67.5 15 67.5 L 25 67.5 C 25.691406 67.5 26.25 66.9375 26.25 66.25 L 26.25 56.25 C 26.25 55.5625 25.691406 55 25 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear7);" d="M 45 70 L 35 70 C 32.933594 70 31.25 68.316406 31.25 66.25 L 31.25 56.25 C 31.25 54.183594 32.933594 52.5 35 52.5 L 45 52.5 C 47.066406 52.5 48.75 54.183594 48.75 56.25 L 48.75 66.25 C 48.75 68.316406 47.066406 70 45 70 Z M 35 55 C 34.308594 55 33.75 55.5625 33.75 56.25 L 33.75 66.25 C 33.75 66.9375 34.308594 67.5 35 67.5 L 45 67.5 C 45.691406 67.5 46.25 66.9375 46.25 66.25 L 46.25 56.25 C 46.25 55.5625 45.691406 55 45 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear8);" d="M 65 70 L 55 70 C 52.933594 70 51.25 68.316406 51.25 66.25 L 51.25 56.25 C 51.25 54.183594 52.933594 52.5 55 52.5 L 65 52.5 C 67.066406 52.5 68.75 54.183594 68.75 56.25 L 68.75 66.25 C 68.75 68.316406 67.066406 70 65 70 Z M 55 55 C 54.308594 55 53.75 55.5625 53.75 56.25 L 53.75 66.25 C 53.75 66.9375 54.308594 67.5 55 67.5 L 65 67.5 C 65.691406 67.5 66.25 66.9375 66.25 66.25 L 66.25 56.25 C 66.25 55.5625 65.691406 55 65 55 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-rest-api.svg b/client/static/svg/icon-rest-api.svg
new file mode 100644
index 00000000..e17abc83
--- /dev/null
+++ b/client/static/svg/icon-rest-api.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="807.0833" x2="32" y2="772.7422" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,-1.25,0,1027.5)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="4.75" x2="32" y2="60.5" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 40 61.25 C 28.28125 61.25 18.75 51.71875 18.75 40 C 18.75 28.28125 28.28125 18.75 40 18.75 C 51.71875 18.75 61.25 28.28125 61.25 40 C 61.25 51.71875 51.71875 61.25 40 61.25 Z M 40 21.25 C 29.660156 21.25 21.25 29.660156 21.25 40 C 21.25 50.339844 29.660156 58.75 40 58.75 C 50.339844 58.75 58.75 50.339844 58.75 40 C 58.75 29.660156 50.339844 21.25 40 21.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 32.007813 32.5 L 30.492188 32.5 C 29.21875 32.5 28.148438 33.457031 28.007813 34.71875 L 26.25 47.5 L 28.769531 47.5 L 29.289063 43.75 L 33.214844 43.75 L 33.734375 47.5 L 36.25 47.5 L 34.488281 34.71875 C 34.351563 33.457031 33.28125 32.5 32.007813 32.5 Z M 29.632813 41.25 L 30.492188 35 L 32.007813 35 L 32.867188 41.25 Z M 73.695313 38.027344 C 73.5625 35.980469 72.058594 34.324219 70.042969 34 C 68.898438 33.804688 67.535156 33.582031 66.410156 33.402344 L 66.144531 33.359375 C 65.441406 33.246094 64.871094 32.75 64.65625 32.070313 C 64.242188 30.75 63.703125 29.441406 63.050781 28.164063 C 62.722656 27.535156 62.773438 26.785156 63.199219 26.199219 C 63.878906 25.238281 64.757813 24.019531 65.488281 23.007813 C 66.691406 21.34375 66.582031 19.101563 65.214844 17.546875 C 64.324219 16.558594 63.386719 15.628906 62.433594 14.777344 C 60.890625 13.421875 58.65625 13.316406 57 14.511719 C 55.980469 15.238281 54.753906 16.121094 53.792969 16.816406 C 53.214844 17.234375 52.460938 17.289063 51.828125 16.957031 C 50.601563 16.316406 49.292969 15.769531 47.929688 15.332031 C 47.253906 15.121094 46.761719 14.550781 46.648438 13.839844 C 46.449219 12.675781 46.207031 11.195313 46.011719 9.964844 C 45.679688 7.9375 44.019531 6.425781 41.953125 6.296875 C 40.625 6.226563 39.304688 6.230469 38.027344 6.304688 C 35.984375 6.4375 34.328125 7.941406 34 9.957031 C 33.808594 11.101563 33.585938 12.464844 33.402344 13.589844 L 33.359375 13.851563 C 33.246094 14.558594 32.753906 15.128906 32.074219 15.34375 C 30.753906 15.753906 29.441406 16.296875 28.167969 16.949219 C 27.535156 17.28125 26.789063 17.222656 26.203125 16.800781 C 25.238281 16.121094 24.019531 15.238281 23.011719 14.511719 C 21.34375 13.308594 19.105469 13.417969 17.546875 14.785156 C 16.558594 15.675781 15.632813 16.609375 14.78125 17.566406 C 13.425781 19.105469 13.320313 21.34375 14.515625 22.996094 C 15.242188 24.015625 16.125 25.242188 16.820313 26.203125 C 17.238281 26.785156 17.292969 27.539063 16.960938 28.171875 C 16.320313 29.394531 15.773438 30.703125 15.335938 32.066406 C 15.121094 32.746094 14.554688 33.234375 13.84375 33.351563 C 12.679688 33.550781 11.195313 33.789063 9.964844 33.988281 C 7.9375 34.316406 6.429688 35.976563 6.296875 38.046875 C 6.230469 39.375 6.230469 40.691406 6.304688 41.96875 C 6.4375 44.015625 7.941406 45.671875 9.957031 45.996094 C 11.101563 46.191406 12.464844 46.414063 13.589844 46.59375 L 13.855469 46.636719 C 14.558594 46.75 15.128906 47.246094 15.34375 47.925781 C 15.757813 49.246094 16.296875 50.554688 16.949219 51.832031 C 17.277344 52.460938 17.226563 53.210938 16.800781 53.796875 C 16.121094 54.757813 15.242188 55.976563 14.511719 56.988281 C 13.308594 58.652344 13.417969 60.894531 14.785156 62.449219 C 15.675781 63.4375 16.613281 64.367188 17.566406 65.21875 C 19.109375 66.570313 21.34375 66.675781 23 65.484375 C 24.019531 64.757813 25.246094 63.875 26.207031 63.179688 C 26.785156 62.761719 27.539063 62.707031 28.171875 63.039063 C 29.398438 63.679688 30.707031 64.226563 32.070313 64.664063 C 32.746094 64.875 33.238281 65.445313 33.351563 66.15625 C 33.550781 67.320313 33.792969 68.800781 33.988281 70.03125 C 34.320313 72.0625 35.980469 73.570313 38.046875 73.703125 C 38.675781 73.734375 39.304688 73.75 39.929688 73.75 C 40.617188 73.75 41.300781 73.730469 41.972656 73.691406 C 44.015625 73.558594 45.671875 72.054688 46 70.039063 C 46.191406 68.894531 46.414063 67.53125 46.597656 66.40625 L 46.640625 66.144531 C 46.753906 65.4375 47.246094 64.867188 47.925781 64.652344 C 49.246094 64.242188 50.558594 63.703125 51.832031 63.046875 C 52.464844 62.71875 53.210938 62.773438 53.796875 63.195313 C 54.761719 63.875 55.980469 64.757813 56.988281 65.484375 C 58.65625 66.6875 60.894531 66.578125 62.453125 65.210938 C 63.441406 64.320313 64.367188 63.386719 65.21875 62.429688 C 66.574219 60.890625 66.679688 58.652344 65.484375 57 C 64.757813 55.980469 63.875 54.753906 63.179688 53.792969 C 62.761719 53.210938 62.707031 52.457031 63.039063 51.828125 C 63.679688 50.601563 64.226563 49.292969 64.664063 47.929688 C 64.878906 47.25 65.445313 46.761719 66.15625 46.644531 C 67.320313 46.445313 68.804688 46.207031 70.035156 46.007813 C 72.0625 45.679688 73.570313 44.019531 73.703125 41.953125 C 73.769531 40.621094 73.769531 39.304688 73.695313 38.027344 Z M 71.207031 41.8125 C 71.152344 42.691406 70.503906 43.402344 69.636719 43.542969 C 68.398438 43.742188 66.90625 43.984375 65.75 44.179688 C 64.109375 44.449219 62.78125 45.597656 62.285156 47.175781 C 61.890625 48.394531 61.402344 49.570313 60.828125 50.671875 C 60.054688 52.148438 60.179688 53.90625 61.15625 55.257813 C 61.847656 56.214844 62.726563 57.433594 63.453125 58.457031 C 63.96875 59.167969 63.921875 60.121094 63.347656 60.773438 C 62.5625 61.65625 61.699219 62.527344 60.789063 63.347656 C 60.128906 63.929688 59.167969 63.972656 58.453125 63.460938 C 57.4375 62.726563 56.210938 61.839844 55.253906 61.164063 C 53.902344 60.191406 52.148438 60.066406 50.683594 60.828125 C 49.542969 61.414063 48.363281 61.898438 47.179688 62.269531 C 45.589844 62.769531 44.4375 64.101563 44.171875 65.746094 L 44.128906 66.007813 C 43.949219 67.128906 43.726563 68.484375 43.535156 69.632813 C 43.394531 70.496094 42.683594 71.140625 41.820313 71.195313 C 40.640625 71.265625 39.414063 71.269531 38.191406 71.207031 C 37.3125 71.148438 36.601563 70.503906 36.460938 69.632813 C 36.261719 68.398438 36.019531 66.902344 35.820313 65.746094 C 35.554688 64.105469 34.40625 62.777344 32.828125 62.28125 C 31.609375 61.890625 30.429688 61.398438 29.332031 60.824219 C 28.6875 60.488281 27.992188 60.324219 27.300781 60.324219 C 26.402344 60.324219 25.507813 60.601563 24.746094 61.152344 C 23.789063 61.84375 22.566406 62.722656 21.546875 63.453125 C 20.835938 63.964844 19.878906 63.917969 19.226563 63.34375 C 18.34375 62.558594 17.476563 61.695313 16.65625 60.785156 C 16.074219 60.125 16.027344 59.164063 16.542969 58.453125 C 17.277344 57.433594 18.160156 56.207031 18.839844 55.25 C 19.8125 53.902344 19.9375 52.148438 19.171875 50.683594 C 18.585938 49.542969 18.101563 48.363281 17.734375 47.179688 C 17.234375 45.585938 15.902344 44.433594 14.257813 44.167969 L 13.992188 44.125 C 12.875 43.945313 11.515625 43.726563 10.371094 43.53125 C 9.503906 43.390625 8.859375 42.683594 8.804688 41.816406 C 8.738281 40.636719 8.734375 39.410156 8.796875 38.1875 C 8.851563 37.308594 9.5 36.597656 10.367188 36.457031 C 11.605469 36.257813 13.097656 36.015625 14.257813 35.820313 C 15.898438 35.550781 17.226563 34.402344 17.71875 32.824219 C 18.113281 31.605469 18.605469 30.429688 19.179688 29.328125 C 19.953125 27.851563 19.824219 26.09375 18.851563 24.742188 C 18.160156 23.785156 17.277344 22.566406 16.550781 21.542969 C 16.039063 20.832031 16.082031 19.878906 16.65625 19.226563 C 17.441406 18.34375 18.308594 17.472656 19.214844 16.652344 C 19.878906 16.070313 20.835938 16.023438 21.550781 16.539063 C 22.566406 17.273438 23.792969 18.160156 24.753906 18.835938 C 26.101563 19.808594 27.855469 19.9375 29.320313 19.171875 C 30.460938 18.585938 31.640625 18.101563 32.824219 17.730469 C 34.414063 17.230469 35.566406 15.898438 35.832031 14.253906 L 35.875 13.992188 C 36.058594 12.871094 36.277344 11.515625 36.472656 10.367188 C 36.609375 9.503906 37.320313 8.859375 38.1875 8.804688 C 39.363281 8.734375 40.589844 8.734375 41.816406 8.792969 C 42.691406 8.851563 43.40625 9.496094 43.546875 10.367188 C 43.742188 11.601563 43.984375 13.097656 44.183594 14.253906 C 44.449219 15.894531 45.601563 17.222656 47.175781 17.71875 C 48.398438 18.109375 49.574219 18.601563 50.671875 19.175781 C 52.148438 19.949219 53.90625 19.820313 55.261719 18.847656 C 56.214844 18.15625 57.4375 17.277344 58.460938 16.546875 C 59.171875 16.035156 60.125 16.082031 60.777344 16.65625 C 61.660156 17.441406 62.527344 18.304688 63.351563 19.214844 C 63.929688 19.875 63.976563 20.835938 63.460938 21.546875 C 62.730469 22.566406 61.84375 23.792969 61.167969 24.75 C 60.191406 26.097656 60.066406 27.851563 60.832031 29.316406 C 61.417969 30.457031 61.902344 31.636719 62.273438 32.820313 C 62.769531 34.414063 64.105469 35.566406 65.746094 35.832031 L 66.011719 35.875 C 67.128906 36.054688 68.488281 36.273438 69.636719 36.46875 C 70.5 36.609375 71.144531 37.316406 71.199219 38.183594 C 71.265625 39.363281 71.269531 40.589844 71.207031 41.8125 Z M 45 32.5 L 38.75 32.5 L 38.75 47.5 L 41.25 47.5 L 41.25 42.5 L 45 42.5 C 47.070313 42.5 48.75 40.820313 48.75 38.75 L 48.75 36.25 C 48.75 34.179688 47.070313 32.5 45 32.5 Z M 46.25 38.75 C 46.25 39.4375 45.6875 40 45 40 L 41.25 40 L 41.25 35 L 45 35 C 45.6875 35 46.25 35.5625 46.25 36.25 Z M 51.25 47.5 L 53.75 47.5 L 53.75 32.5 L 51.25 32.5 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-search.svg b/client/static/svg/icon-search.svg
new file mode 100644
index 00000000..b0a92e54
--- /dev/null
+++ b/client/static/svg/icon-search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;; fill:#000000;"><linearGradient id="SVGID_1__44045" gradientUnits="userSpaceOnUse" x1="20.4991" y1="13.0011" x2="20.4991" y2="23.5843" spreadMethod="reflect">	<stop offset="0" style="stop-color:#6DC7FF"></stop>	<stop offset="1" style="stop-color:#E6ABFF"></stop></linearGradient><path style="fill:url(#SVGID_1__44045);" d="M25,14.001c-5,0-9.002,3.999-9.002,8.999H25V14.001z"></path><linearGradient id="SVGID_2__44045" gradientUnits="userSpaceOnUse" x1="24.5112" y1="5.2702" x2="26.0114" y2="59.7769" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_2__44045);" d="M24.999,10c-7.169,0-13.002,5.832-13.002,13.002s5.833,13.002,13.002,13.002  s13.002-5.832,13.002-13.002S32.168,10,24.999,10z M24.999,34.003c-6.066,0-11.001-4.935-11.001-11.001s4.935-11.001,11.001-11.001  s11.001,4.935,11.001,11.001S31.065,34.003,24.999,34.003z"></path><linearGradient id="SVGID_3__44045" gradientUnits="userSpaceOnUse" x1="31.1088" y1="5.0886" x2="32.609" y2="59.5953" spreadMethod="reflect">	<stop offset="0" style="stop-color:#1A6DFF"></stop>	<stop offset="1" style="stop-color:#C822FF"></stop></linearGradient><path style="fill:url(#SVGID_3__44045);" d="M54.77,48.559l-8.752-9.864c-0.719-0.812-1.995-0.92-2.845-0.243l-2.486,1.973l-4.125-4.994  c3.337-3.106,5.439-7.521,5.439-12.429C42.001,13.627,34.374,6,24.999,6S7.997,13.627,7.997,23.002s7.627,17.002,17.002,17.002  c3.749,0,7.207-1.234,10.021-3.298l4.099,4.963l-2.366,1.877c-0.434,0.344-0.698,0.832-0.746,1.374  c-0.047,0.539,0.127,1.06,0.49,1.469l8.753,9.865C46.272,57.406,47.739,58,49.215,58c1.169,0,2.344-0.373,3.307-1.137l1.607-1.274  c1.08-0.858,1.739-2.068,1.856-3.406C56.1,50.859,55.669,49.572,54.77,48.559z M9.997,23.002C9.997,14.73,16.727,8,24.999,8  s15.002,6.73,15.002,15.002s-6.729,15.002-15.002,15.002S9.997,31.274,9.997,23.002z M48.642,44.666l-6.467,5.133l-1.477-1.656  l6.472-5.136L48.642,44.666z M44.418,40.018c0.013-0.01,0.03-0.014,0.049-0.014c0.022,0,0.045,0.007,0.055,0.018l1.319,1.487  l-6.476,5.139l-1.368-1.534L44.418,40.018z M52.885,54.022l-1.607,1.274c-1.361,1.081-3.394,0.915-4.532-0.369l-3.239-3.632  l6.464-5.13l3.303,3.722c0.53,0.598,0.785,1.351,0.718,2.122C53.924,52.795,53.53,53.51,52.885,54.022z"></path></svg>
diff --git a/client/static/svg/icon-settings.svg b/client/static/svg/icon-settings.svg
new file mode 100644
index 00000000..5b3dfd0d
--- /dev/null
+++ b/client/static/svg/icon-settings.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32.3372" y1="16.5001" x2="31.6419" y2="46.3969" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="3.75" x2="32" y2="59.5" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="32" y1="13.9167" x2="32" y2="48.2578" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="19.1667" x2="32" y2="43.6197" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:evenodd;fill:url(#linear0);" d="M 46.25 38.75 C 46.25 42.203125 43.453125 45 40 45 C 36.546875 45 33.75 42.203125 33.75 38.75 C 33.75 35.296875 36.546875 32.5 40 32.5 C 43.453125 32.5 46.25 35.296875 46.25 38.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 39.929688 72.5 C 39.304688 72.5 38.675781 72.484375 38.046875 72.453125 C 35.980469 72.320313 34.320313 70.8125 33.988281 68.78125 C 33.792969 67.550781 33.550781 66.070313 33.351563 64.90625 C 33.238281 64.195313 32.746094 63.625 32.070313 63.414063 C 30.707031 62.976563 29.398438 62.429688 28.171875 61.789063 C 27.539063 61.457031 26.785156 61.511719 26.207031 61.929688 C 25.246094 62.625 24.019531 63.507813 23 64.234375 C 21.34375 65.425781 19.109375 65.320313 17.566406 63.96875 C 16.613281 63.117188 15.675781 62.1875 14.785156 61.199219 C 13.417969 59.644531 13.308594 57.402344 14.511719 55.738281 C 15.242188 54.726563 16.121094 53.507813 16.800781 52.546875 C 17.226563 51.960938 17.277344 51.210938 16.949219 50.582031 C 16.296875 49.304688 15.757813 47.996094 15.34375 46.675781 C 15.128906 45.996094 14.558594 45.5 13.855469 45.386719 L 13.589844 45.34375 C 12.464844 45.164063 11.101563 44.941406 9.957031 44.746094 C 7.941406 44.421875 6.4375 42.765625 6.304688 40.71875 C 6.230469 39.441406 6.230469 38.125 6.296875 36.796875 C 6.429688 34.726563 7.9375 33.066406 9.964844 32.738281 C 11.195313 32.539063 12.679688 32.300781 13.84375 32.101563 C 14.554688 31.984375 15.121094 31.496094 15.335938 30.816406 C 15.773438 29.453125 16.320313 28.144531 16.960938 26.921875 C 17.292969 26.289063 17.238281 25.535156 16.820313 24.953125 C 16.125 23.992188 15.242188 22.765625 14.515625 21.746094 C 13.320313 20.09375 13.425781 17.855469 14.78125 16.316406 C 15.632813 15.359375 16.558594 14.425781 17.546875 13.535156 C 19.105469 12.167969 21.34375 12.058594 23.011719 13.261719 C 24.019531 13.988281 25.238281 14.871094 26.203125 15.550781 C 26.789063 15.972656 27.535156 16.03125 28.167969 15.699219 C 29.441406 15.046875 30.753906 14.503906 32.074219 14.09375 C 32.753906 13.878906 33.246094 13.308594 33.359375 12.601563 L 33.402344 12.339844 C 33.585938 11.214844 33.808594 9.851563 34 8.707031 C 34.328125 6.691406 35.984375 5.1875 38.027344 5.054688 C 39.304688 4.980469 40.625 4.976563 41.953125 5.046875 C 44.019531 5.175781 45.679688 6.6875 46.011719 8.714844 C 46.207031 9.945313 46.449219 11.425781 46.648438 12.589844 C 46.761719 13.300781 47.253906 13.871094 47.929688 14.082031 C 49.292969 14.519531 50.601563 15.066406 51.828125 15.707031 C 52.460938 16.039063 53.214844 15.984375 53.792969 15.566406 C 54.753906 14.871094 55.980469 13.988281 57 13.261719 C 58.65625 12.066406 60.890625 12.171875 62.433594 13.527344 C 63.386719 14.378906 64.324219 15.308594 65.214844 16.296875 C 66.582031 17.851563 66.691406 20.09375 65.488281 21.757813 C 64.757813 22.769531 63.878906 23.988281 63.199219 24.949219 C 62.773438 25.535156 62.722656 26.285156 63.050781 26.914063 C 63.703125 28.191406 64.242188 29.5 64.65625 30.820313 C 64.871094 31.5 65.441406 31.996094 66.144531 32.109375 L 66.410156 32.152344 C 67.535156 32.332031 68.898438 32.554688 70.042969 32.75 C 72.058594 33.074219 73.5625 34.730469 73.695313 36.777344 C 73.769531 38.054688 73.769531 39.371094 73.703125 40.703125 C 73.570313 42.769531 72.0625 44.429688 70.035156 44.757813 C 68.804688 44.957031 67.320313 45.195313 66.15625 45.394531 C 65.445313 45.511719 64.878906 46 64.664063 46.679688 C 64.226563 48.042969 63.679688 49.351563 63.039063 50.578125 C 62.707031 51.207031 62.761719 51.960938 63.179688 52.542969 C 63.875 53.503906 64.757813 54.730469 65.484375 55.75 C 66.679688 57.402344 66.574219 59.640625 65.21875 61.179688 C 64.367188 62.136719 63.441406 63.070313 62.453125 63.960938 C 60.894531 65.328125 58.65625 65.4375 56.988281 64.234375 C 55.980469 63.507813 54.761719 62.625 53.796875 61.945313 C 53.210938 61.523438 52.464844 61.46875 51.832031 61.796875 C 50.558594 62.453125 49.246094 62.992188 47.925781 63.402344 C 47.246094 63.617188 46.753906 64.1875 46.640625 64.894531 L 46.597656 65.15625 C 46.414063 66.28125 46.191406 67.644531 46 68.789063 C 45.671875 70.804688 44.015625 72.308594 41.972656 72.441406 C 41.300781 72.480469 40.617188 72.5 39.929688 72.5 Z M 27.300781 59.074219 C 27.992188 59.074219 28.6875 59.238281 29.332031 59.574219 C 30.429688 60.148438 31.609375 60.640625 32.828125 61.03125 C 34.40625 61.527344 35.554688 62.855469 35.820313 64.496094 C 36.019531 65.652344 36.261719 67.148438 36.460938 68.382813 C 36.601563 69.253906 37.3125 69.898438 38.191406 69.957031 C 39.414063 70.019531 40.640625 70.015625 41.820313 69.945313 C 42.683594 69.890625 43.394531 69.246094 43.535156 68.382813 C 43.726563 67.234375 43.949219 65.878906 44.128906 64.757813 L 44.171875 64.496094 C 44.4375 62.851563 45.589844 61.519531 47.179688 61.019531 C 48.363281 60.648438 49.542969 60.164063 50.683594 59.578125 C 52.148438 58.816406 53.902344 58.941406 55.253906 59.914063 C 56.210938 60.589844 57.4375 61.476563 58.453125 62.210938 C 59.167969 62.722656 60.128906 62.679688 60.789063 62.097656 C 61.699219 61.277344 62.5625 60.40625 63.347656 59.523438 C 63.921875 58.871094 63.96875 57.917969 63.453125 57.207031 C 62.726563 56.183594 61.847656 54.964844 61.15625 54.007813 C 60.179688 52.65625 60.054688 50.898438 60.828125 49.421875 C 61.402344 48.320313 61.890625 47.144531 62.285156 45.925781 C 62.78125 44.347656 64.109375 43.199219 65.75 42.929688 C 66.90625 42.734375 68.398438 42.492188 69.636719 42.292969 C 70.503906 42.152344 71.152344 41.441406 71.207031 40.5625 C 71.269531 39.339844 71.265625 38.113281 71.199219 36.933594 C 71.144531 36.066406 70.5 35.359375 69.636719 35.21875 C 68.488281 35.023438 67.128906 34.804688 66.011719 34.625 L 65.746094 34.582031 C 64.105469 34.316406 62.769531 33.164063 62.273438 31.570313 C 61.902344 30.386719 61.417969 29.207031 60.832031 28.066406 C 60.066406 26.601563 60.191406 24.847656 61.167969 23.5 C 61.84375 22.542969 62.730469 21.316406 63.460938 20.296875 C 63.976563 19.585938 63.929688 18.625 63.351563 17.964844 C 62.527344 17.054688 61.660156 16.191406 60.777344 15.40625 C 60.125 14.832031 59.171875 14.785156 58.460938 15.296875 C 57.4375 16.027344 56.214844 16.90625 55.261719 17.597656 C 53.90625 18.570313 52.148438 18.699219 50.671875 17.925781 C 49.574219 17.351563 48.398438 16.859375 47.175781 16.46875 C 45.601563 15.972656 44.449219 14.644531 44.183594 13.003906 C 43.984375 11.847656 43.742188 10.351563 43.546875 9.117188 C 43.40625 8.246094 42.691406 7.601563 41.816406 7.542969 C 40.589844 7.484375 39.363281 7.484375 38.1875 7.554688 C 37.320313 7.609375 36.609375 8.253906 36.472656 9.117188 C 36.277344 10.265625 36.058594 11.621094 35.875 12.742188 L 35.832031 13.003906 C 35.566406 14.648438 34.414063 15.980469 32.824219 16.480469 C 31.640625 16.851563 30.460938 17.335938 29.320313 17.921875 C 27.855469 18.6875 26.101563 18.558594 24.753906 17.585938 C 23.792969 16.910156 22.566406 16.023438 21.550781 15.289063 C 20.835938 14.773438 19.878906 14.820313 19.214844 15.402344 C 18.308594 16.222656 17.441406 17.09375 16.65625 17.976563 C 16.082031 18.628906 16.039063 19.582031 16.550781 20.292969 C 17.277344 21.316406 18.160156 22.535156 18.851563 23.492188 C 19.824219 24.84375 19.953125 26.601563 19.179688 28.078125 C 18.605469 29.179688 18.113281 30.355469 17.71875 31.574219 C 17.226563 33.152344 15.898438 34.300781 14.257813 34.570313 C 13.097656 34.765625 11.605469 35.007813 10.367188 35.207031 C 9.5 35.347656 8.851563 36.058594 8.796875 36.9375 C 8.734375 38.160156 8.738281 39.386719 8.804688 40.566406 C 8.859375 41.433594 9.503906 42.140625 10.371094 42.28125 C 11.515625 42.476563 12.875 42.695313 13.992188 42.875 L 14.257813 42.917969 C 15.902344 43.183594 17.234375 44.335938 17.734375 45.929688 C 18.101563 47.113281 18.585938 48.292969 19.171875 49.433594 C 19.9375 50.898438 19.8125 52.652344 18.839844 54 C 18.160156 54.957031 17.277344 56.183594 16.542969 57.203125 C 16.027344 57.914063 16.074219 58.875 16.65625 59.535156 C 17.476563 60.445313 18.34375 61.308594 19.226563 62.09375 C 19.878906 62.667969 20.835938 62.714844 21.546875 62.203125 C 22.566406 61.472656 23.789063 60.59375 24.746094 59.902344 C 25.507813 59.351563 26.402344 59.074219 27.300781 59.074219 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 40 60 C 28.28125 60 18.75 50.46875 18.75 38.75 C 18.75 27.03125 28.28125 17.5 40 17.5 C 51.71875 17.5 61.25 27.03125 61.25 38.75 C 61.25 50.46875 51.71875 60 40 60 Z M 40 20 C 29.660156 20 21.25 28.410156 21.25 38.75 C 21.25 49.089844 29.660156 57.5 40 57.5 C 50.339844 57.5 58.75 49.089844 58.75 38.75 C 58.75 28.410156 50.339844 20 40 20 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 40 53.75 C 31.730469 53.75 25 47.019531 25 38.75 C 25 30.480469 31.730469 23.75 40 23.75 C 48.269531 23.75 55 30.480469 55 38.75 C 55 47.019531 48.269531 53.75 40 53.75 Z M 40 26.25 C 33.109375 26.25 27.5 31.859375 27.5 38.75 C 27.5 45.640625 33.109375 51.25 40 51.25 C 46.890625 51.25 52.5 45.640625 52.5 38.75 C 52.5 31.859375 46.890625 26.25 40 26.25 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-social-group.svg b/client/static/svg/icon-social-group.svg
new file mode 100644
index 00000000..8160b84f
--- /dev/null
+++ b/client/static/svg/icon-social-group.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="29" y1="24.1667" x2="29" y2="29.1778" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="21" y1="24.1667" x2="21" y2="29.1778" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="45" y1="27.5" x2="45" y2="32.6694" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="8.1667" x2="32" y2="55.463" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="21.3853" y1="8.1667" x2="21.3853" y2="55.463" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 39.375 33.125 C 39.375 34.851563 37.976563 36.25 36.25 36.25 C 34.523438 36.25 33.125 34.851563 33.125 33.125 C 33.125 31.398438 34.523438 30 36.25 30 C 37.976563 30 39.375 31.398438 39.375 33.125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 29.375 33.125 C 29.375 34.851563 27.976563 36.25 26.25 36.25 C 24.523438 36.25 23.125 34.851563 23.125 33.125 C 23.125 31.398438 24.523438 30 26.25 30 C 27.976563 30 29.375 31.398438 29.375 33.125 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 58.75 37.5 C 58.75 38.878906 57.628906 40 56.25 40 C 54.871094 40 53.75 38.878906 53.75 37.5 C 53.75 36.121094 54.871094 35 56.25 35 C 57.628906 35 58.75 36.121094 58.75 37.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 62.917969 47.242188 C 63.601563 46.144531 64.132813 44.949219 64.484375 43.675781 C 67.582031 43.304688 70 40.695313 70 37.5 C 70 34.460938 67.820313 31.929688 64.941406 31.371094 C 64.363281 24.316406 58.449219 18.75 51.25 18.75 C 49.070313 18.75 46.933594 19.292969 45.003906 20.28125 C 42.691406 14.972656 37.398438 11.25 31.25 11.25 C 22.980469 11.25 16.25 17.980469 16.25 26.25 L 16.25 27.5 C 12.804688 27.5 10 30.304688 10 33.75 C 10 37.195313 12.804688 40 16.25 40 L 16.742188 40 C 17.097656 41.359375 17.632813 42.648438 18.328125 43.832031 C 11.621094 48.191406 7.5 55.710938 7.5 63.75 L 7.5 68.75 L 72.5 68.75 L 72.5 65 C 72.5 57.816406 68.863281 51.152344 62.917969 47.242188 Z M 67.5 37.5 C 67.5 39.144531 66.425781 40.535156 64.949219 41.035156 C 64.972656 40.691406 65 40.351563 65 40 L 65 33.980469 C 66.453125 34.496094 67.5 35.871094 67.5 37.5 Z M 51.25 21.25 C 57.453125 21.25 62.5 26.296875 62.5 32.5 L 62.5 40 C 62.5 46.148438 57.539063 51.152344 51.410156 51.242188 C 49.589844 48.304688 47.136719 45.757813 44.171875 43.828125 C 44.867188 42.644531 45.402344 41.359375 45.757813 40 L 46.25 40 C 49.695313 40 52.5 37.195313 52.5 33.75 C 52.5 30.304688 49.695313 27.5 46.25 27.5 L 46.25 26.25 C 46.25 25.015625 46.082031 23.820313 45.800781 22.667969 C 47.460938 21.746094 49.335938 21.25 51.25 21.25 Z M 46.25 36.25 L 46.25 35 C 46.941406 35 47.5 34.441406 47.5 33.75 C 47.5 33.058594 46.941406 32.5 46.25 32.5 L 46.25 30 C 48.316406 30 50 31.683594 50 33.75 C 50 35.816406 48.316406 37.5 46.25 37.5 Z M 18.75 26.25 C 18.75 19.359375 24.359375 13.75 31.25 13.75 C 38.140625 13.75 43.75 19.359375 43.75 26.25 L 43.75 36.25 C 43.75 43.140625 38.140625 48.75 31.25 48.75 C 24.359375 48.75 18.75 43.140625 18.75 36.25 Z M 16.25 37.5 C 14.183594 37.5 12.5 35.816406 12.5 33.75 C 12.5 31.683594 14.183594 30 16.25 30 L 16.25 32.5 C 15.558594 32.5 15 33.058594 15 33.75 C 15 34.441406 15.558594 35 16.25 35 Z M 31.25 51.25 C 35.859375 51.25 39.984375 49.160156 42.734375 45.878906 C 43.4375 46.332031 44.109375 46.824219 44.742188 47.351563 C 41.40625 51.414063 36.542969 53.75 31.25 53.75 C 25.957031 53.75 21.09375 51.414063 17.757813 47.351563 C 18.394531 46.824219 19.0625 46.332031 19.765625 45.878906 C 22.519531 49.160156 26.640625 51.25 31.25 51.25 Z M 29.097656 66.25 C 29.53125 65.507813 30.328125 65 31.25 65 C 32.171875 65 32.96875 65.507813 33.402344 66.25 Z M 52.5 66.25 L 36.074219 66.25 C 35.515625 64.101563 33.574219 62.5 31.25 62.5 C 28.925781 62.5 26.984375 64.101563 26.425781 66.25 L 10 66.25 L 10 63.75 C 10 58.214844 12.1875 52.960938 15.925781 49.050781 C 19.738281 53.621094 25.25 56.25 31.25 56.25 C 37.25 56.25 42.761719 53.621094 46.574219 49.050781 C 50.3125 52.960938 52.5 58.214844 52.5 63.75 Z M 70 66.25 L 55 66.25 L 55 63.75 C 55 60.210938 54.195313 56.78125 52.730469 53.667969 C 56.15625 53.296875 59.203125 51.65625 61.40625 49.234375 C 66.734375 52.675781 70 58.605469 70 65 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 31.25 18.75 L 31.25 16.25 C 27.410156 16.25 23.859375 18.492188 22.214844 21.964844 L 24.472656 23.035156 C 25.707031 20.433594 28.367188 18.75 31.25 18.75 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-source-code.svg b/client/static/svg/icon-source-code.svg
new file mode 100644
index 00000000..8c703dd2
--- /dev/null
+++ b/client/static/svg/icon-source-code.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="16" y1="11.3333" x2="16" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="22" y1="11.3333" x2="22" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="28" y1="11.3333" x2="28" y2="16.8961" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="32" y1="8" x2="32" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="19.9197" y1="8" x2="19.9197" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="44.3491" y1="8" x2="44.3491" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="32.5" y1="8" x2="32.5" y2="57.847" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 20 20 C 18.621094 20 17.5 18.878906 17.5 17.5 C 17.5 16.121094 18.621094 15 20 15 C 21.378906 15 22.5 16.121094 22.5 17.5 C 22.5 18.878906 21.378906 20 20 20 Z M 20 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 27.5 20 C 26.121094 20 25 18.878906 25 17.5 C 25 16.121094 26.121094 15 27.5 15 C 28.878906 15 30 16.121094 30 17.5 C 30 18.878906 28.878906 20 27.5 20 Z M 27.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 35 20 C 33.621094 20 32.5 18.878906 32.5 17.5 C 32.5 16.121094 33.621094 15 35 15 C 36.378906 15 37.5 16.121094 37.5 17.5 C 37.5 18.878906 36.378906 20 35 20 Z M 35 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 63.75 10 L 16.25 10 C 12.804688 10 10 12.804688 10 16.25 L 10 63.75 C 10 67.195313 12.804688 70 16.25 70 L 63.75 70 C 67.195313 70 70 67.195313 70 63.75 L 70 16.25 C 70 12.804688 67.195313 10 63.75 10 Z M 16.25 12.5 L 63.75 12.5 C 65.816406 12.5 67.5 14.183594 67.5 16.25 L 67.5 22.5 L 12.5 22.5 L 12.5 16.25 C 12.5 14.183594 14.183594 12.5 16.25 12.5 Z M 63.75 67.5 L 16.25 67.5 C 14.183594 67.5 12.5 65.816406 12.5 63.75 L 12.5 25 L 67.5 25 L 67.5 63.75 C 67.5 65.816406 65.816406 67.5 63.75 67.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 28.964844 35.308594 L 20.042969 43.117188 C 19.5 43.589844 19.1875 44.277344 19.1875 45 C 19.1875 45.722656 19.5 46.410156 20.042969 46.886719 L 28.964844 54.691406 L 30.609375 52.808594 L 21.6875 44.996094 L 30.609375 37.191406 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 51.910156 35.355469 L 50.164063 37.144531 L 58.207031 45.003906 L 50.164063 52.855469 L 51.910156 54.644531 L 59.953125 46.792969 C 60.441406 46.320313 60.707031 45.679688 60.707031 45 C 60.707031 44.320313 60.441406 43.683594 59.953125 43.207031 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 33.824219 60.828125 L 36.175781 61.671875 L 47.425781 30.421875 L 45.074219 29.578125 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-triangle-arrow.svg b/client/static/svg/icon-triangle-arrow.svg
new file mode 100644
index 00000000..44c44c72
--- /dev/null
+++ b/client/static/svg/icon-triangle-arrow.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="4.6686" x2="32" y2="58.1697" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="16.3353" x2="32" y2="47.0024" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 67.371094 72.496094 C 66.796875 72.496094 66.214844 72.367188 65.667969 72.097656 L 41.71875 60.269531 C 40.628906 59.730469 39.375 59.730469 38.28125 60.269531 L 14.332031 72.097656 C 12.867188 72.820313 11.15625 72.550781 9.976563 71.410156 C 8.75 70.226563 8.410156 68.453125 9.113281 66.886719 L 34.097656 11.375 C 35.171875 8.984375 37.433594 7.503906 40.003906 7.503906 C 42.570313 7.503906 44.832031 8.984375 45.910156 11.375 L 70.890625 66.886719 C 71.59375 68.453125 71.253906 70.226563 70.027344 71.410156 C 69.285156 72.125 68.335938 72.496094 67.371094 72.496094 Z M 66.773438 69.855469 C 67.546875 70.242188 68.128906 69.765625 68.289063 69.613281 C 68.652344 69.261719 68.929688 68.628906 68.605469 67.914063 L 43.625 12.398438 C 42.949219 10.898438 41.59375 10.003906 40 10.003906 C 38.40625 10.003906 37.050781 10.898438 36.375 12.398438 L 11.394531 67.910156 C 11.070313 68.628906 11.347656 69.261719 11.710938 69.609375 C 11.871094 69.765625 12.453125 70.238281 13.226563 69.855469 L 37.171875 58.027344 C 38.972656 57.140625 41.03125 57.140625 42.828125 58.027344 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 55.734375 58.585938 L 41.363281 51.488281 C 40.5 51.0625 39.5 51.0625 38.636719 51.488281 L 24.265625 58.585938 C 22.933594 59.246094 21.53125 57.824219 22.152344 56.441406 L 37.140625 23.132813 C 38.269531 20.625 41.734375 20.625 42.859375 23.132813 L 57.847656 56.441406 C 58.46875 57.824219 57.066406 59.246094 55.734375 58.585938 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-tune.svg b/client/static/svg/icon-tune.svg
new file mode 100644
index 00000000..f492a31c
--- /dev/null
+++ b/client/static/svg/icon-tune.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="47" y1="40.1667" x2="47" y2="47.5019" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="27" y1="8.375" x2="27" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="47" y1="8.375" x2="47" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="47" y1="8.375" x2="47" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="27" y1="8.375" x2="27" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="27" y1="8.375" x2="27" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="23.5" y1="8.375" x2="23.5" y2="53.7502" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 62.5 55 C 62.5 57.070313 60.820313 58.75 58.75 58.75 C 56.679688 58.75 55 57.070313 55 55 C 55 52.929688 56.679688 51.25 58.75 51.25 C 60.820313 51.25 62.5 52.929688 62.5 55 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 10 52.5 L 10 15 C 10 14.308594 10.5625 13.75 11.25 13.75 L 56.25 13.75 C 56.9375 13.75 57.5 14.308594 57.5 15 L 57.5 38.75 L 60 38.75 L 60 15 C 60 12.933594 58.316406 11.25 56.25 11.25 L 11.25 11.25 C 9.183594 11.25 7.5 12.933594 7.5 15 L 7.5 57.5 C 7.5 59.566406 9.183594 61.25 11.25 61.25 L 42.5 61.25 L 42.5 58.75 L 11.25 58.75 C 10.5625 58.75 10 58.191406 10 57.5 L 10 56.019531 C 10.390625 56.160156 10.808594 56.25 11.25 56.25 L 42.5 56.25 L 42.5 53.75 L 11.25 53.75 C 10.5625 53.75 10 53.191406 10 52.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 70 51.25 L 69.394531 51.25 C 69.253906 50.8125 69.09375 50.457031 68.921875 50.132813 L 69.359375 49.695313 C 70.332031 48.722656 70.332031 47.132813 69.359375 46.160156 L 67.589844 44.390625 C 66.644531 43.449219 65 43.449219 64.054688 44.390625 L 63.59375 44.855469 C 63.234375 44.683594 62.871094 44.53125 62.5 44.402344 L 62.5 43.75 C 62.5 42.371094 61.378906 41.25 60 41.25 L 57.5 41.25 C 56.121094 41.25 55 42.371094 55 43.75 L 55 44.402344 C 54.628906 44.53125 54.265625 44.683594 53.90625 44.855469 L 53.445313 44.390625 C 52.5 43.449219 50.851563 43.449219 49.910156 44.390625 L 48.140625 46.160156 C 47.167969 47.132813 47.167969 48.722656 48.140625 49.695313 L 48.578125 50.132813 C 48.40625 50.457031 48.246094 50.8125 48.105469 51.25 L 47.5 51.25 C 46.121094 51.25 45 52.371094 45 53.75 L 45 56.25 C 45 57.628906 46.121094 58.75 47.5 58.75 L 48.105469 58.75 C 48.246094 59.1875 48.40625 59.542969 48.578125 59.867188 L 48.140625 60.304688 C 47.671875 60.777344 47.410156 61.40625 47.410156 62.074219 C 47.410156 62.742188 47.671875 63.367188 48.140625 63.839844 L 49.910156 65.609375 C 50.882813 66.578125 52.46875 66.582031 53.445313 65.609375 L 53.90625 65.144531 C 54.261719 65.316406 54.628906 65.464844 55 65.597656 L 55 66.25 C 55 67.628906 56.121094 68.75 57.5 68.75 L 60 68.75 C 61.378906 68.75 62.5 67.628906 62.5 66.25 L 62.5 65.597656 C 62.871094 65.464844 63.234375 65.3125 63.589844 65.144531 L 64.054688 65.609375 C 65.027344 66.578125 66.613281 66.582031 67.585938 65.609375 L 69.355469 63.839844 C 70.332031 62.863281 70.332031 61.277344 69.355469 60.304688 L 68.921875 59.867188 C 69.09375 59.542969 69.253906 59.1875 69.394531 58.75 L 70 58.75 C 71.378906 58.75 72.5 57.628906 72.5 56.25 L 72.5 53.75 C 72.5 52.371094 71.378906 51.25 70 51.25 Z M 70 56.25 L 67.386719 56.25 L 67.195313 57.265625 C 67.015625 58.195313 66.785156 58.589844 66.398438 59.238281 L 65.789063 60.269531 L 67.589844 62.070313 L 65.820313 63.835938 L 64.019531 62.039063 L 63.1875 62.53125 C 62.484375 62.945313 61.730469 63.257813 60.9375 63.460938 L 60 63.703125 L 60 66.25 L 57.5 66.25 L 57.5 63.703125 L 56.5625 63.460938 C 55.769531 63.257813 55.015625 62.945313 54.3125 62.53125 L 53.480469 62.039063 L 51.679688 63.839844 L 49.910156 62.070313 L 51.710938 60.269531 L 51.101563 59.242188 C 50.714844 58.589844 50.480469 58.199219 50.304688 57.269531 L 50.113281 56.25 L 47.5 56.25 L 47.5 53.75 L 50.113281 53.75 L 50.304688 52.734375 C 50.484375 51.800781 50.71875 51.40625 51.105469 50.757813 L 51.710938 49.730469 L 49.910156 47.929688 L 51.679688 46.164063 L 53.480469 47.960938 L 54.3125 47.46875 C 55.015625 47.054688 55.769531 46.742188 56.5625 46.539063 L 57.5 46.296875 L 57.5 43.75 L 60 43.75 L 60 46.296875 L 60.9375 46.539063 C 61.730469 46.742188 62.484375 47.054688 63.1875 47.46875 L 64.019531 47.960938 L 65.820313 46.160156 L 67.585938 47.929688 L 65.789063 49.730469 L 66.394531 50.753906 C 66.78125 51.40625 67.015625 51.800781 67.191406 52.730469 L 67.386719 53.75 L 70 53.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 58.75 50 C 55.992188 50 53.75 52.242188 53.75 55 C 53.75 57.757813 55.992188 60 58.75 60 C 61.507813 60 63.75 57.757813 63.75 55 C 63.75 52.242188 61.507813 50 58.75 50 Z M 58.75 57.5 C 57.371094 57.5 56.25 56.378906 56.25 55 C 56.25 53.621094 57.371094 52.5 58.75 52.5 C 60.128906 52.5 61.25 53.621094 61.25 55 C 61.25 56.378906 60.128906 57.5 58.75 57.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 55 22.5 L 26.074219 22.5 C 25.515625 20.351563 23.574219 18.75 21.25 18.75 C 18.925781 18.75 16.984375 20.351563 16.425781 22.5 L 12.5 22.5 L 12.5 25 L 16.425781 25 C 16.984375 27.148438 18.925781 28.75 21.25 28.75 C 23.574219 28.75 25.515625 27.148438 26.074219 25 L 55 25 Z M 21.25 26.25 C 19.871094 26.25 18.75 25.128906 18.75 23.75 C 18.75 22.371094 19.871094 21.25 21.25 21.25 C 22.628906 21.25 23.75 22.371094 23.75 23.75 C 23.75 25.128906 22.628906 26.25 21.25 26.25 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 51.074219 35 L 55 35 L 55 32.5 L 51.074219 32.5 C 50.515625 30.351563 48.574219 28.75 46.25 28.75 C 43.925781 28.75 41.984375 30.351563 41.425781 32.5 L 12.5 32.5 L 12.5 35 L 41.425781 35 C 41.984375 37.148438 43.925781 38.75 46.25 38.75 C 48.574219 38.75 50.515625 37.148438 51.074219 35 Z M 43.75 33.75 C 43.75 32.371094 44.871094 31.25 46.25 31.25 C 47.628906 31.25 48.75 32.371094 48.75 33.75 C 48.75 35.128906 47.628906 36.25 46.25 36.25 C 44.871094 36.25 43.75 35.128906 43.75 33.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 32.5 38.75 C 30.175781 38.75 28.234375 40.351563 27.675781 42.5 L 12.5 42.5 L 12.5 45 L 27.675781 45 C 28.234375 47.148438 30.175781 48.75 32.5 48.75 C 34.824219 48.75 36.765625 47.148438 37.324219 45 L 46.25 45 L 46.25 42.5 L 37.324219 42.5 C 36.765625 40.351563 34.824219 38.75 32.5 38.75 Z M 32.5 46.25 C 31.121094 46.25 30 45.128906 30 43.75 C 30 42.371094 31.121094 41.25 32.5 41.25 C 33.878906 41.25 35 42.371094 35 43.75 C 35 45.128906 33.878906 46.25 32.5 46.25 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-unlock.svg b/client/static/svg/icon-unlock.svg
new file mode 100644
index 00000000..c0de9055
--- /dev/null
+++ b/client/static/svg/icon-unlock.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="32" y1="25" x2="32" y2="55" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="2" x2="32" y2="62.5129" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 40 31.25 C 29.660156 31.25 21.25 39.660156 21.25 50 C 21.25 60.339844 29.660156 68.75 40 68.75 C 50.339844 68.75 58.75 60.339844 58.75 50 C 58.75 39.660156 50.339844 31.25 40 31.25 Z M 42.5 53.222656 L 42.5 57.5 C 42.5 58.882813 41.382813 60 40 60 C 38.617188 60 37.5 58.882813 37.5 57.5 L 37.5 53.222656 C 35.296875 52.257813 33.75 50.0625 33.75 47.5 C 33.75 44.046875 36.546875 41.25 40 41.25 C 43.453125 41.25 46.25 44.046875 46.25 47.5 C 46.25 50.0625 44.703125 52.257813 42.5 53.222656 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 53.75 27.679688 L 53.75 22.5 C 53.75 21.121094 52.628906 20 51.25 20 L 46.25 20 C 44.871094 20 43.75 21.121094 43.75 22.5 L 43.75 24.050781 C 42.519531 23.871094 41.277344 23.75 40 23.75 C 38.722656 23.75 37.480469 23.871094 36.25 24.050781 L 36.25 22.5 C 36.25 21.121094 35.128906 20 33.75 20 L 32.5 20 L 32.5 13.75 C 32.5 9.613281 35.863281 6.25 40 6.25 C 44.136719 6.25 47.5 9.613281 47.5 13.75 L 47.5 15 L 50 15 L 50 13.75 C 50 8.234375 45.515625 3.75 40 3.75 C 34.484375 3.75 30 8.234375 30 13.75 L 30 20 L 28.75 20 C 27.371094 20 26.25 21.121094 26.25 22.5 L 26.25 27.679688 C 18.765625 32.3125 13.75 40.570313 13.75 50 C 13.75 64.476563 25.523438 76.25 40 76.25 C 54.476563 76.25 66.25 64.476563 66.25 50 C 66.25 40.570313 61.234375 32.3125 53.75 27.679688 Z M 46.25 24.535156 L 46.25 22.5 L 51.25 22.5 L 51.25 26.320313 C 50.457031 25.941406 49.644531 25.601563 48.8125 25.304688 C 48.808594 25.300781 48.808594 25.300781 48.804688 25.300781 C 47.972656 25.003906 47.121094 24.746094 46.25 24.535156 Z M 28.75 22.5 L 33.75 22.5 L 33.75 24.535156 C 32.878906 24.746094 32.027344 25.003906 31.195313 25.300781 C 31.191406 25.304688 31.191406 25.304688 31.1875 25.304688 C 30.355469 25.605469 29.542969 25.941406 28.75 26.320313 Z M 40 73.75 C 26.902344 73.75 16.25 63.097656 16.25 50 C 16.25 36.902344 26.902344 26.25 40 26.25 C 53.097656 26.25 63.75 36.902344 63.75 50 C 63.75 63.097656 53.097656 73.75 40 73.75 Z "/>
+</g>
+</svg>
diff --git a/client/static/svg/icon-web-design.svg b/client/static/svg/icon-web-design.svg
new file mode 100644
index 00000000..aba491e4
--- /dev/null
+++ b/client/static/svg/icon-web-design.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80pt" height="80pt" viewBox="0 0 80 80" version="1.1">
+<defs>
+<linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="38" y1="25.5" x2="38" y2="32.51" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#6DC7FF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#E6ABFF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear1" gradientUnits="userSpaceOnUse" x1="32" y1="5.1667" x2="32" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear2" gradientUnits="userSpaceOnUse" x1="38" y1="5.1667" x2="38" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear3" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear4" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear5" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+<linearGradient id="linear6" gradientUnits="userSpaceOnUse" x1="18.5" y1="5.1667" x2="18.5" y2="60.1843" spreadMethod="reflect" gradientTransform="matrix(1.25,0,0,1.25,0,0)">
+<stop offset="0" style="stop-color:#1A6DFF;stop-opacity:1;"/>
+<stop offset="1" style="stop-color:#C822FF;stop-opacity:1;"/>
+</linearGradient>
+</defs>
+<g id="surface1">
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear0);" d="M 38.75 33.75 L 38.75 38.75 C 38.75 39.441406 39.308594 40 40 40 L 41.914063 40 C 42.285156 40 46.289063 35.453125 46.289063 35.453125 C 46.824219 34.808594 47.828125 34.863281 48.289063 35.558594 C 48.289063 35.558594 52.5 40 51.917969 40 L 55 40 C 55.691406 40 56.25 39.4375 56.25 38.75 L 56.25 33.75 C 56.25 33.058594 55.691406 32.5 55 32.5 L 40 32.5 C 39.308594 32.5 38.75 33.058594 38.75 33.75 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear1);" d="M 66.25 7.5 L 13.75 7.5 C 11.683594 7.5 10 9.183594 10 11.25 L 10 58.75 C 10 60.816406 11.683594 62.5 13.75 62.5 L 35 62.5 L 35 60 L 13.75 60 C 13.058594 60 12.5 59.441406 12.5 58.75 L 12.5 57.269531 C 12.890625 57.410156 13.308594 57.5 13.75 57.5 L 35 57.5 L 35 55 L 13.75 55 C 13.058594 55 12.5 54.441406 12.5 53.75 L 12.5 20 L 67.5 20 L 67.5 53.75 C 67.5 54.441406 66.941406 55 66.25 55 L 60 55 L 60 57.5 L 66.25 57.5 C 66.691406 57.5 67.109375 57.410156 67.5 57.269531 L 67.5 58.75 C 67.5 59.441406 66.941406 60 66.25 60 L 60 60 L 60 62.5 L 66.25 62.5 C 68.316406 62.5 70 60.816406 70 58.75 L 70 11.25 C 70 9.183594 68.316406 7.5 66.25 7.5 Z M 35.476563 10 L 39.226563 17.5 L 33.273438 17.5 L 29.523438 10 Z M 12.5 11.25 C 12.5 10.558594 13.058594 10 13.75 10 L 26.726563 10 L 30.476563 17.5 L 12.5 17.5 Z M 42.023438 17.5 L 38.273438 10 L 66.25 10 C 66.941406 10 67.5 10.558594 67.5 11.25 L 67.5 17.5 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear2);" d="M 60.058594 49.085938 L 57.335938 45 L 58.75 45 C 60.128906 45 61.25 43.878906 61.25 42.5 L 61.25 30 C 61.25 28.621094 60.128906 27.5 58.75 27.5 L 36.25 27.5 C 34.871094 27.5 33.75 28.621094 33.75 30 L 33.75 42.5 C 33.75 43.878906 34.871094 45 36.25 45 L 37.664063 45 L 34.941406 49.085938 C 34.058594 50.40625 34.109375 52.148438 35.0625 53.414063 L 37.609375 56.8125 C 37.546875 57.03125 37.5 57.257813 37.5 57.5 L 37.5 60 C 37.5 61.378906 38.621094 62.5 40 62.5 L 40 68.75 C 40 70.816406 41.683594 72.5 43.75 72.5 L 51.25 72.5 C 53.316406 72.5 55 70.816406 55 68.75 L 55 62.5 C 56.378906 62.5 57.5 61.378906 57.5 60 L 57.5 57.5 C 57.5 57.257813 57.453125 57.03125 57.390625 56.8125 L 59.9375 53.417969 C 60.890625 52.148438 60.941406 50.40625 60.058594 49.085938 Z M 36.25 42.5 L 36.25 30 L 58.75 30 L 58.75 42.5 L 55.667969 42.5 L 50.621094 34.929688 C 49.921875 33.882813 48.757813 33.257813 47.5 33.257813 C 46.242188 33.257813 45.078125 33.882813 44.378906 34.929688 L 39.332031 42.5 Z M 48.75 48.75 C 48.75 49.441406 48.191406 50 47.5 50 C 46.808594 50 46.25 49.441406 46.25 48.75 C 46.25 48.058594 46.808594 47.5 47.5 47.5 C 48.191406 47.5 48.75 48.058594 48.75 48.75 Z M 52.5 68.75 C 52.5 69.441406 51.941406 70 51.25 70 L 43.75 70 C 43.058594 70 42.5 69.441406 42.5 68.75 L 42.5 62.5 L 52.5 62.5 Z M 40 60 L 40 57.5 L 55 57.5 L 55.003906 60 Z M 57.9375 51.914063 L 55.570313 55.074219 C 55.386719 55.027344 55.199219 55 55 55 L 40 55 C 39.800781 55 39.613281 55.027344 39.429688 55.074219 L 37.058594 51.914063 C 36.742188 51.492188 36.726563 50.914063 37.019531 50.472656 L 46.25 36.628906 L 46.25 45.230469 C 44.796875 45.75 43.75 47.125 43.75 48.75 C 43.75 50.820313 45.433594 52.5 47.5 52.5 C 49.566406 52.5 51.25 50.820313 51.25 48.75 C 51.25 47.125 50.203125 45.75 48.75 45.230469 L 48.75 36.628906 L 57.980469 50.472656 C 58.273438 50.910156 58.257813 51.492188 57.9375 51.914063 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear3);" d="M 17.5 27.5 L 28.75 27.5 L 28.75 30 L 17.5 30 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear4);" d="M 17.5 32.5 L 28.75 32.5 L 28.75 35 L 17.5 35 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear5);" d="M 17.5 37.5 L 28.75 37.5 L 28.75 40 L 17.5 40 Z "/>
+<path style=" stroke:none;fill-rule:nonzero;fill:url(#linear6);" d="M 17.5 42.5 L 28.75 42.5 L 28.75 45 L 17.5 45 Z "/>
+</g>
+</svg>
diff --git a/client/store/admin.js b/client/store/admin.js
index 0f654e86..919443e3 100644
--- a/client/store/admin.js
+++ b/client/store/admin.js
@@ -3,8 +3,12 @@ import { make } from 'vuex-pathify'
 /* global siteConfig */
 
 const state = {
-  theme: {
-    dark: siteConfig.darkMode
+  info: {
+    currentVersion: 'n/a',
+    latestVersion: 'n/a',
+    groupsTotal: 0,
+    pagesTotal: 0,
+    usersTotal: 0
   }
 }
 
diff --git a/dev/docker/docker-compose.yml b/dev/docker/docker-compose.yml
index e116e448..86c5e167 100644
--- a/dev/docker/docker-compose.yml
+++ b/dev/docker/docker-compose.yml
@@ -28,6 +28,17 @@ services:
     ports:
       - "15432:5432"
 
+  adminer:
+    image: adminer:latest
+    environment:
+      ADMINER_DESIGN: pappu687
+    logging:
+      driver: "none"
+    networks:
+      - wikinet
+    ports:
+      - "3001:8080"
+
   wiki:
     build:
       context: .
diff --git a/server/app/data.yml b/server/app/data.yml
index 965cf810..2f2d9483 100644
--- a/server/app/data.yml
+++ b/server/app/data.yml
@@ -39,6 +39,9 @@ defaults:
       darkMode: false
     # System defaults
     setup: false
+    paths:
+      content: ./content
+      data: ./data
     cors:
       credentials: true
       maxAge: 600
diff --git a/server/db/migrations/2.0.0.js b/server/db/migrations/2.0.0.js
index d10062a1..d2f68e03 100644
--- a/server/db/migrations/2.0.0.js
+++ b/server/db/migrations/2.0.0.js
@@ -184,6 +184,7 @@ exports.up = knex => {
       table.string('location').defaultTo('')
       table.string('pictureUrl')
       table.string('timezone').notNullable().defaultTo('America/New_York')
+      table.boolean('isSystem').notNullable().defaultTo(false)
       table.string('createdAt').notNullable()
       table.string('updatedAt').notNullable()
     })
diff --git a/server/graph/resolvers/user.js b/server/graph/resolvers/user.js
index 9d9619c5..12fe8be6 100644
--- a/server/graph/resolvers/user.js
+++ b/server/graph/resolvers/user.js
@@ -11,7 +11,7 @@ module.exports = {
   UserQuery: {
     async list(obj, args, context, info) {
       return WIKI.models.users.query()
-        .select('id', 'email', 'name', 'providerKey', 'createdAt')
+        .select('id', 'email', 'name', 'providerKey', 'isSystem', 'createdAt')
     },
     async search(obj, args, context, info) {
       return WIKI.models.users.query()
@@ -22,6 +22,7 @@ module.exports = {
     },
     async single(obj, args, context, info) {
       let usr = await WIKI.models.users.query().findById(args.id)
+      console.info(usr)
       usr.password = ''
       usr.tfaSecret = ''
       return usr
@@ -39,8 +40,7 @@ module.exports = {
         email: args.email,
         name: args.name,
         provider: args.provider,
-        providerId: args.providerId,
-        role: args.role
+        providerId: args.providerId
       }).where('id', args.id)
     },
     resetPassword(obj, args) {
@@ -52,7 +52,7 @@ module.exports = {
   },
   User: {
     groups(usr) {
-      return usr.getGroups()
+      return usr.$relatedQuery('groups')
     }
   }
 }
diff --git a/server/graph/schemas/user.graphql b/server/graph/schemas/user.graphql
index f96e3296..cd8913be 100644
--- a/server/graph/schemas/user.graphql
+++ b/server/graph/schemas/user.graphql
@@ -38,18 +38,16 @@ type UserMutation {
     email: String!
     name: String
     passwordRaw: String
-    provider: String!
+    providerKey: String!
     providerId: String
-    role: UserRole!
   ): UserResponse @auth(requires: ["write:users", "manage:users", "manage:system"])
 
   update(
     id: Int!
     email: String
     name: String
-    provider: String
+    providerKey: String
     providerId: String
-    role: UserRole
   ): UserResponse @auth(requires: ["manage:users", "manage:system"])
 
   delete(
@@ -70,12 +68,6 @@ type UserMutation {
 # TYPES
 # -----------------------------------------------
 
-enum UserRole {
-  guest
-  user
-  admin
-}
-
 type UserResponse {
   responseResult: ResponseStatus!
   user: User
@@ -86,6 +78,7 @@ type UserMinimal {
   name: String!
   email: String!
   providerKey: String!
+  isSystem: Boolean!
   createdAt: Date!
 }
 
@@ -95,8 +88,11 @@ type User {
   email: String!
   providerKey: String!
   providerId: String
-  role: UserRole!
+  isSystem: Boolean!
+  location: String!
+  jobTitle: String!
+  timezone: String!
   createdAt: Date!
   updatedAt: Date!
-  groups: [Group]
+  groups: [Group]!
 }
diff --git a/server/models/users.js b/server/models/users.js
index 661916c0..e5c44023 100644
--- a/server/models/users.js
+++ b/server/models/users.js
@@ -32,6 +32,7 @@ module.exports = class User extends Model {
         jobTitle: {type: 'string'},
         location: {type: 'string'},
         pictureUrl: {type: 'string'},
+        isSystem: {type: 'boolean'},
         createdAt: {type: 'string'},
         updatedAt: {type: 'string'}
       }
diff --git a/server/setup.js b/server/setup.js
index 1fb79d67..f9623ec6 100644
--- a/server/setup.js
+++ b/server/setup.js
@@ -94,7 +94,7 @@ module.exports = () => {
       WIKI.logger.info('Creating data directories...')
       const dataPath = path.join(process.cwd(), 'data')
       await fs.ensureDir(dataPath)
-      await fs.ensureDir(path.join(dataPath, 'cache'))
+      await fs.emptyDir(path.join(dataPath, 'cache'))
       await fs.ensureDir(path.join(dataPath, 'uploads'))
 
       // Set config
@@ -221,7 +221,8 @@ module.exports = () => {
         password: '',
         locale: 'en',
         defaultEditor: 'markdown',
-        tfaIsActive: false
+        tfaIsActive: false,
+        isSystem: true
       })
       await guestUser.$relatedQuery('groups').relate(guestGroup.id)
 
diff --git a/server/views/new.pug b/server/views/new.pug
index 25e5ed3b..15f13e60 100644
--- a/server/views/new.pug
+++ b/server/views/new.pug
@@ -5,12 +5,12 @@ block body
     v-app
       .newpage
         .newpage-content
-          img.animated.fadeIn(src='/svg/henry-thinking.svg', alt='Henry')
+          img.animated.fadeIn(src='/svg/icon-close-window.svg', alt='Henry')
           .headline= t('newpage.title')
           .subheading.mt-3= t('newpage.subtitle')
           v-btn.mt-5(href='/e' + pagePath, large)
             v-icon(left) add
             span= t('newpage.create')
-          v-btn.mt-2(color='blue lighten-4', href='javascript:window.history.go(-1);', large, outline)
+          v-btn.mt-2(color='purple lighten-3', href='javascript:window.history.go(-1);', large, outline)
             v-icon(left) arrow_back
             span= t('newpage.goback')