From 78e8fbc313da5b8cda305b1bd36a17fc16849439 Mon Sep 17 00:00:00 2001
From: Daniel Gore <dgore@iquantsolutions.com>
Date: Mon, 11 May 2026 17:22:17 +0200
Subject: [PATCH] MAIN-7454: Implement custom Wiki js theme based on Figma
 designs

* MOD: Add new iqs theme to wiki js
---
 client/client-app.js                         |   13 +-
 client/components/common/nav-header.vue      |   43 +-
 client/components/editor.vue                 |    6 +-
 client/scss/base/base.scss                   |    4 +-
 client/themes/iqs/components/nav-footer.vue  |   75 +
 client/themes/iqs/components/nav-sidebar.vue |  201 +++
 client/themes/iqs/components/page.vue        |  800 ++++++++++
 client/themes/iqs/components/tabset.vue      |  209 +++
 client/themes/iqs/js/app.js                  |    1 +
 client/themes/iqs/scss/app.scss              | 1462 ++++++++++++++++++
 client/themes/iqs/theme.yml                  |   51 +
 11 files changed, 2844 insertions(+), 21 deletions(-)
 create mode 100644 client/themes/iqs/components/nav-footer.vue
 create mode 100644 client/themes/iqs/components/nav-sidebar.vue
 create mode 100644 client/themes/iqs/components/page.vue
 create mode 100644 client/themes/iqs/components/tabset.vue
 create mode 100644 client/themes/iqs/js/app.js
 create mode 100644 client/themes/iqs/scss/app.scss
 create mode 100644 client/themes/iqs/theme.yml

diff --git a/client/client-app.js b/client/client-app.js
index cdf27a80..725fdb67 100644
--- a/client/client-app.js
+++ b/client/client-app.js
@@ -211,7 +211,18 @@ let bootstrap = () => {
     vuetify: new Vuetify({
       rtl: siteConfig.rtl,
       theme: {
-        dark: darkModeEnabled
+        dark: darkModeEnabled,
+        themes: {
+          light: {
+            primary: '#2051e5',
+            secondary: '#f7fafc',
+            accent: ' #86b7fe',
+            error: ' #ff2d54',
+            info: '#f7fafc',
+            success: ' #16de7e',
+            warning: '#ffcc00'
+          }
+        }
       }
     }),
     mounted () {
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index e5f7acdf..5ebd3573 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
-  v-app-bar.nav-header(color='black', dark, app, :clipped-left='!$vuetify.rtl', :clipped-right='$vuetify.rtl', fixed, flat, :extended='searchIsShown && $vuetify.breakpoint.smAndDown')
-    v-toolbar(color='deep-purple', flat, slot='extension', v-if='searchIsShown && $vuetify.breakpoint.smAndDown')
-      v-text-field(
+  v-app-bar.nav-header(color='white', app, :clipped-left='!$vuetify.rtl', :clipped-right='$vuetify.rtl', fixed, flat, :extended='searchIsShown && $vuetify.breakpoint.smAndDown')
+    v-toolbar(flat, slot='extension', v-if='searchIsShown && $vuetify.breakpoint.smAndDown')
+      v-text-field.nav-header-search-field(
         ref='searchFieldMobile'
         v-model='search'
         clearable
@@ -19,7 +19,7 @@
       )
     v-layout(row)
       v-flex(xs5, md4)
-        v-toolbar.nav-header-inner(color='black', dark, flat, :class='$vuetify.rtl ? `pr-3` : `pl-3`')
+        v-toolbar.nav-header-inner(color='white', flat, :class='$vuetify.rtl ? `pr-3` : `pl-3`')
           v-avatar(tile, size='34', @click='goHome')
             v-img.org-logo(:src='logoUrl')
           //- v-menu(open-on-hover, offset-y, bottom, left, min-width='250', transition='slide-y-transition')
@@ -46,19 +46,17 @@
           v-toolbar-title(:class='{ "mx-3": $vuetify.breakpoint.mdAndUp, "mx-1": $vuetify.breakpoint.smAndDown }')
             span.subheading {{title}}
       v-flex(md4, v-if='$vuetify.breakpoint.mdAndUp')
-        v-toolbar.nav-header-inner(color='black', dark, flat)
+        v-toolbar.nav-header-inner(flat)
           slot(name='mid')
             transition(name='navHeaderSearch', v-if='searchIsShown')
-              v-text-field(
+              v-text-field.nav-header-search-field(
                 ref='searchField',
                 v-if='searchIsShown && $vuetify.breakpoint.mdAndUp',
                 v-model='search',
-                color='white',
                 :label='$t(`common:header.search`)',
                 single-line,
                 solo
                 flat
-                rounded
                 hide-details,
                 prepend-inner-icon='mdi-magnify',
                 :loading='searchIsLoading',
@@ -70,13 +68,13 @@
                 @keyup.up='searchMove(`up`)'
                 autocomplete='off'
               )
-            v-tooltip(bottom)
-              template(v-slot:activator='{ on }')
-                v-btn.ml-2.mr-0(icon, v-on='on', href='/t', :aria-label='$t(`common:header.browseTags`)')
-                  v-icon(color='grey') mdi-tag-multiple
-              span {{$t('common:header.browseTags')}}
+            //- v-tooltip(bottom)
+            //-   template(v-slot:activator='{ on }')
+            //-     v-btn.ml-2.mr-0(icon, v-on='on', href='/t', :aria-label='$t(`common:header.browseTags`)')
+            //-       v-icon(color='grey') mdi-tag-multiple
+            //-   span {{$t('common:header.browseTags')}}
       v-flex(xs7, md4)
-        v-toolbar.nav-header-inner.pr-4(color='black', dark, flat)
+        v-toolbar.nav-header-inner.pr-4(color='white', flat)
           v-spacer
           .navHeaderLoading.mr-3
             v-progress-circular(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
@@ -135,7 +133,7 @@
                       )
                       v-icon(color='grey') mdi-file-document-edit-outline
                   span {{$t('common:header.pageActions')}}
-              v-list(nav, :light='!$vuetify.theme.dark', :dark='$vuetify.theme.dark', :class='$vuetify.theme.dark ? `grey darken-4` : ``')
+              v-list.page-actions-menu(nav, light)
                 .overline.pa-4.grey--text {{$t('common:header.currentPage')}}
                 v-list-item.pl-4(@click='pageView', v-if='mode !== `view`')
                   v-list-item-avatar(size='24', tile): v-icon(color='indigo') mdi-file-document-outline
@@ -241,6 +239,7 @@
     page-selector(mode='create', v-model='duplicateOpts.modal', :open-handler='pageDuplicateHandle', :path='duplicateOpts.path', :locale='duplicateOpts.locale')
     page-delete(v-model='deletePageModal', v-if='path && path.length')
     page-convert(v-model='convertPageModal', v-if='path && path.length')
+    v-divider(style='position: absolute; bottom: 0; left: 0; right: 0;')
 
     .nav-header-dev(v-if='isDevMode')
       v-icon mdi-alert
@@ -488,6 +487,13 @@ export default {
 
 <style lang='scss'>
 
+.page-actions-menu.v-list .v-list-item__title.white--text,
+.page-actions-menu.v-list .v-list-item.white--text,
+.page-actions-menu.v-list .v-list-item__title,
+.page-actions-menu.v-list .v-list-item {
+  color: rgba(0, 0, 0, 0.87) !important;
+}
+
 .nav-header {
   //z-index: 1000;
 
@@ -497,10 +503,12 @@ export default {
     .v-toolbar__content {
       padding: 0;
     }
+
     .v-text-field .v-input__prepend-inner {
       padding: 0 14px 0 5px;
       padding-right: 14px;
     }
+
   }
 
   .org-logo {
@@ -513,6 +521,11 @@ export default {
     }
   }
 
+  .nav-header-search-field.v-text-field--solo .v-input__slot {
+    border: 1px solid rgba(0, 0, 0, 0.15) !important;
+    border-radius: 8px;
+  }
+
   &-search-adv {
     position: absolute;
     top: 7px;
diff --git a/client/components/editor.vue b/client/components/editor.vue
index 7cd577b1..b79aeda7 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -25,7 +25,7 @@
           )
           v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') mdi-check
           span.grey--text(v-if='$vuetify.breakpoint.lgAndUp && mode !== `create` && !isDirty') {{ $t('editor:save.saved') }}
-          span.white--text(v-else-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
+          span(v-else-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
         v-btn.animated.fadeInDown.wait-p1s(
           text
           color='blue'
@@ -33,7 +33,7 @@
           :class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": !welcomeMode, "ml-0": welcomeMode }'
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') mdi-tag-text-outline
-          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.page') }}
+          span(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.page') }}
         v-btn.animated.fadeInDown.wait-p2s(
           v-if='!welcomeMode'
           text
@@ -42,7 +42,7 @@
           @click='exit'
           )
           v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') mdi-close
-          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
+          span(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.close') }}
         v-divider.ml-3(vertical)
     v-main
       component(:is='currentEditor', :save='save')
diff --git a/client/scss/base/base.scss b/client/scss/base/base.scss
index 03224354..7842eb2f 100644
--- a/client/scss/base/base.scss
+++ b/client/scss/base/base.scss
@@ -39,9 +39,9 @@ html {
 #root .v-application {
   .overline {
     line-height: 1rem;
-    font-size: .625rem!important;
+    font-size: .625rem;
     font-weight: 400;
-    letter-spacing: .1666666667em!important;
+    letter-spacing: .1666666667em;
   }
 
   @for $i from 0 through 25 {
diff --git a/client/themes/iqs/components/nav-footer.vue b/client/themes/iqs/components/nav-footer.vue
new file mode 100644
index 00000000..9892af70
--- /dev/null
+++ b/client/themes/iqs/components/nav-footer.vue
@@ -0,0 +1,75 @@
+<template lang="pug">
+  v-footer.justify-center(:color='bgColor', inset)
+    .caption.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-1`')
+      template(v-if='footerOverride')
+        span(v-html='footerOverrideRender + ` |&nbsp;`')
+      template(v-else-if='company && company.length > 0 && contentLicense !== ``')
+        span(v-if='contentLicense === `alr`') {{ $t('common:footer.copyright', { company: company, year: currentYear, interpolation: { escapeValue: false } }) }} |&nbsp;
+        span(v-else) {{ $t('common:footer.license', { company: company, license: $t('common:license.' + contentLicense), interpolation: { escapeValue: false } }) }} |&nbsp;
+      span {{ $t('common:footer.poweredBy') }} #[a(href='https://wiki.js.org', target='_blank', rel='noopener nofollow') Wiki.js]
+</template>
+
+<script>
+import { get } from 'vuex-pathify'
+import MarkdownIt from 'markdown-it'
+
+const md = new MarkdownIt({
+  html: false,
+  breaks: false,
+  linkify: true
+})
+
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'grey lighten-3'
+    },
+    darkColor: {
+      type: String,
+      default: 'grey darken-3'
+    }
+  },
+  data() {
+    return {
+      currentYear: (new Date()).getFullYear()
+    }
+  },
+  computed: {
+    company: get('site/company'),
+    contentLicense: get('site/contentLicense'),
+    footerOverride: get('site/footerOverride'),
+    footerOverrideRender () {
+      if (!this.footerOverride) { return '' }
+      return md.renderInline(this.footerOverride)
+    },
+    bgColor() {
+      if (!this.$vuetify.theme.dark) {
+        return this.color
+      } else {
+        return this.darkColor
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .v-footer {
+    a {
+      text-decoration: none;
+    }
+
+    &.altbg {
+      background: mc('theme', 'primary');
+
+      span {
+        color: mc('blue', '300');
+      }
+
+      a {
+        color: mc('blue', '200');
+      }
+    }
+  }
+</style>
diff --git a/client/themes/iqs/components/nav-sidebar.vue b/client/themes/iqs/components/nav-sidebar.vue
new file mode 100644
index 00000000..9169f40d
--- /dev/null
+++ b/client/themes/iqs/components/nav-sidebar.vue
@@ -0,0 +1,201 @@
+<template lang="pug">
+  div
+    //-> Custom Navigation
+    v-list.py-6.mx-3(v-if='currentMode === `custom`', dense, :class='color', :dark='false')
+      template(v-for='item of items')
+        v-list-item(
+          v-if='item.k === `link`'
+          :href='item.t'
+          :input-value='item.t === `/` + locale + `/` + path'
+          :target='item.y === `externalblank` ? `_blank` : `_self`'
+          :rel='item.y === `externalblank` ? `noopener` : ``'
+          )
+          v-list-item-title.ps-2.py-2 {{ item.l }}
+        v-divider.my-2.mx-2(v-else-if='item.k === `divider`')
+        v-subheader.py-2.px-0.mx-2(v-else-if='item.k === `header`') {{ item.l }}
+    //-> Browse
+    v-list.py-2(v-else-if='currentMode === `browse`', dense, :class='color', :dark='false')
+      template(v-if='currentParent.id > 0')
+        v-list-item(v-for='(item, idx) of parents', :key='`parent-` + item.id', @click='fetchBrowseItems(item)', style='min-height: 30px;')
+          v-list-item-title.ps-2.py-2 {{ item.title }}
+        v-divider.mt-2
+        v-list-item.mt-2(v-if='currentParent.pageId > 0', :href='`/` + currentParent.locale + `/` + currentParent.path', :key='`directorypage-` + currentParent.id', :input-value='path === currentParent.path')
+          v-list-item-title.ps-2.py-2 {{ currentParent.title }}
+        v-subheader {{$t('common:sidebar.currentDirectory')}}
+      template(v-for='item of currentItems')
+        v-list-item(v-if='item.isFolder', :key='`childfolder-` + item.id', @click='fetchBrowseItems(item)')
+          v-list-item-avatar(size='24')
+          v-list-item-title.ps-2.py-2 {{ item.title }}
+        v-list-item(v-else, :href='`/` + item.locale + `/` + item.path', :key='`childpage-` + item.id', :input-value='path === item.path')
+          v-list-item-title.ps-2.py-2 {{ item.title }}
+</template>
+
+<script>
+import _ from 'lodash'
+import gql from 'graphql-tag'
+import { get } from 'vuex-pathify'
+
+/* global siteLangs */
+
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'secondary'
+    },
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    navMode: {
+      type: String,
+      default: 'MIXED'
+    }
+  },
+  data() {
+    return {
+      currentMode: 'custom',
+      currentItems: [],
+      currentParent: {
+        id: 0,
+        title: '/ (root)'
+      },
+      parents: [],
+      loadedCache: []
+    }
+  },
+  computed: {
+    path: get('page/path'),
+    locale: get('page/locale')
+  },
+  methods: {
+    switchMode (mode) {
+      this.currentMode = mode
+      window.localStorage.setItem('navPref', mode)
+      if (mode === `browse` && this.loadedCache.length < 1) {
+        this.loadFromCurrentPath()
+      }
+    },
+    async fetchBrowseItems (item) {
+      this.$store.commit(`loadingStart`, 'browse-load')
+      if (!item) {
+        item = this.currentParent
+      }
+
+      if (this.loadedCache.indexOf(item.id) < 0) {
+        this.currentItems = []
+      }
+
+      if (item.id === 0) {
+        this.parents = []
+      } else {
+        const flushRightIndex = _.findIndex(this.parents, ['id', item.id])
+        if (flushRightIndex >= 0) {
+          this.parents = _.take(this.parents, flushRightIndex)
+        }
+        if (this.parents.length < 1) {
+          this.parents.push(this.currentParent)
+        }
+        this.parents.push(item)
+      }
+
+      this.currentParent = item
+
+      const resp = await this.$apollo.query({
+        query: gql`
+          query ($parent: Int, $locale: String!) {
+            pages {
+              tree(parent: $parent, mode: ALL, locale: $locale) {
+                id
+                path
+                title
+                isFolder
+                pageId
+                parent
+                locale
+              }
+            }
+          }
+        `,
+        fetchPolicy: 'cache-first',
+        variables: {
+          parent: item.id,
+          locale: this.locale
+        }
+      })
+      this.loadedCache = _.union(this.loadedCache, [item.id])
+      this.currentItems = _.get(resp, 'data.pages.tree', [])
+      this.$store.commit(`loadingStop`, 'browse-load')
+    },
+    async loadFromCurrentPath() {
+      this.$store.commit(`loadingStart`, 'browse-load')
+      const resp = await this.$apollo.query({
+        query: gql`
+          query ($path: String, $locale: String!) {
+            pages {
+              tree(path: $path, mode: ALL, locale: $locale, includeAncestors: true) {
+                id
+                path
+                title
+                isFolder
+                pageId
+                parent
+                locale
+              }
+            }
+          }
+        `,
+        fetchPolicy: 'cache-first',
+        variables: {
+          path: this.path,
+          locale: this.locale
+        }
+      })
+      const items = _.get(resp, 'data.pages.tree', [])
+      const curPage = _.find(items, ['pageId', this.$store.get('page/id')])
+      if (!curPage) {
+        console.warn('Could not find current page in page tree listing!')
+        return
+      }
+
+      let curParentId = curPage.parent
+      let invertedAncestors = []
+      while (curParentId) {
+        const curParent = _.find(items, ['id', curParentId])
+        if (!curParent) {
+          break
+        }
+        invertedAncestors.push(curParent)
+        curParentId = curParent.parent
+      }
+
+      this.parents = [this.currentParent, ...invertedAncestors.reverse()]
+      this.currentParent = _.last(this.parents)
+
+      this.loadedCache = [curPage.parent]
+      this.currentItems = _.filter(items, ['parent', curPage.parent])
+      this.$store.commit(`loadingStop`, 'browse-load')
+    },
+    goHome () {
+      window.location.assign(siteLangs.length > 0 ? `/${this.locale}/home` : '/')
+    }
+  },
+  mounted () {
+    this.currentParent.title = `/ ${this.$t('common:sidebar.root')}`
+    if (this.navMode === 'TREE') {
+      this.currentMode = 'browse'
+    } else if (this.navMode === 'STATIC') {
+      this.currentMode = 'custom'
+    } else {
+      this.currentMode = window.localStorage.getItem('navPref') || 'custom'
+    }
+    if (this.currentMode === 'browse') {
+      this.loadFromCurrentPath()
+    }
+  }
+}
+</script>
diff --git a/client/themes/iqs/components/page.vue b/client/themes/iqs/components/page.vue
new file mode 100644
index 00000000..822e739f
--- /dev/null
+++ b/client/themes/iqs/components/page.vue
@@ -0,0 +1,800 @@
+<template lang="pug">
+  v-app(v-scroll='upBtnScroll', :dark='$vuetify.theme.dark', :class='$vuetify.rtl ? `is-rtl` : `is-ltr`')
+    nav-header(v-if='!printView')
+    v-navigation-drawer(
+      v-if='navMode !== `NONE` && !printView'
+      :class='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`'
+      dark
+      app
+      clipped
+      mobile-breakpoint='600'
+      :temporary='$vuetify.breakpoint.smAndDown'
+      v-model='navShown'
+      :right='$vuetify.rtl'
+      )
+      vue-scroll(:ops='scrollStyle')
+        nav-sidebar(:color='$vuetify.theme.dark ? `grey darken-4-d4` : `primary`', :items='sidebarDecoded', :nav-mode='navMode')
+
+    v-fab-transition(v-if='navMode !== `NONE`')
+      v-btn(
+        fab
+        color='primary'
+        fixed
+        bottom
+        :right='$vuetify.rtl'
+        :left='!$vuetify.rtl'
+        small
+        @click='navShown = !navShown'
+        v-if='$vuetify.breakpoint.mdAndDown'
+        v-show='!navShown'
+        )
+        v-icon mdi-menu
+
+    v-main(ref='content')
+      template(v-if='path !== `home`')
+        v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense, v-if='$vuetify.breakpoint.smAndUp')
+          //- v-btn.pl-0(v-if='$vuetify.breakpoint.xsOnly', flat, @click='toggleNavigation')
+          //-   v-icon(color='grey darken-2', left) menu
+          //-   span Navigation
+          v-breadcrumbs.breadcrumbs-nav.pl-0(
+            :items='breadcrumbs'
+            divider='/'
+            )
+            template(slot='item', slot-scope='props')
+              v-icon(v-if='props.item.path === "/"', small, @click='goHome') mdi-home
+              v-btn.ma-0(v-else, :href='props.item.path', small, text) {{props.item.name}}
+          template(v-if='!isPublished')
+            v-spacer
+            .caption.red--text {{$t('common:page.unpublished')}}
+            status-indicator.ml-3(negative, pulse)
+        v-divider
+      v-container.grey.pa-0(fluid, :class='$vuetify.theme.dark ? `darken-4-l3` : `lighten-4`')
+        v-row.page-header-section(no-gutters, align-content='center', style='height: 90px;')
+          v-col.page-col-content.is-page-header(
+            :offset-xl='tocPosition === `left` ? 2 : 0'
+            :offset-lg='tocPosition === `left` ? 3 : 0'
+            :xl='tocPosition === `right` ? 10 : false'
+            :lg='tocPosition === `right` ? 9 : false'
+            style='margin-top: auto; margin-bottom: auto;'
+            :class='$vuetify.rtl ? `pr-4` : `pl-4`'
+            )
+            .page-header-headings
+              .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
+              .caption.grey--text.text--darken-1 {{description}}
+            .page-edit-shortcuts(
+              v-if='editShortcutsObj.editMenuBar'
+              :class='tocPosition === `right` ? `is-right` : ``'
+              )
+              v-btn(
+                v-if='editShortcutsObj.editMenuBtn'
+                @click='pageEdit'
+                depressed
+                small
+                )
+                v-icon.mr-2(small) mdi-pencil
+                span.text-none {{$t(`common:actions.edit`)}}
+              v-btn(
+                v-if='editShortcutsObj.editMenuExternalBtn'
+                :href='editMenuExternalUrl'
+                target='_blank'
+                depressed
+                small
+                )
+                v-icon.mr-2(small) {{ editShortcutsObj.editMenuExternalIcon }}
+                span.text-none {{$t(`common:page.editExternal`, { name: editShortcutsObj.editMenuExternalName })}}
+      v-divider
+      v-container.pl-5.pt-4(fluid, grid-list-xl)
+        v-layout(row)
+          v-flex.page-col-sd(
+            v-if='tocPosition !== `off` && $vuetify.breakpoint.lgAndUp'
+            :order-xs1='tocPosition !== `right`'
+            :order-xs2='tocPosition === `right`'
+            lg3
+            xl2
+            )
+            v-card.page-toc-card.mb-5(v-if='tocDecoded.length')
+              .overline.pa-5.pb-0(:class='$vuetify.theme.dark ? `blue--text text--lighten-2` : `primary--text`') {{$t('common:page.toc')}}
+              v-list.pb-3(dense, nav, :class='$vuetify.theme.dark ? `darken-3-d3` : ``')
+                template(v-for='(tocItem, tocIdx) in tocDecoded')
+                  v-list-item(@click='$vuetify.goTo(tocItem.anchor, scrollOpts)')
+                    v-icon(color='grey', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
+                    v-list-item-title.px-3 {{tocItem.title}}
+                  //- v-divider(v-if='tocIdx < toc.length - 1 || tocItem.children.length')
+                  template(v-for='tocSubItem in tocItem.children')
+                    v-list-item(@click='$vuetify.goTo(tocSubItem.anchor, scrollOpts)')
+                      v-icon.px-3(color='grey lighten-1', small) {{ $vuetify.rtl ? `mdi-chevron-left` : `mdi-chevron-right` }}
+                      v-list-item-title.px-3.caption.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-1`') {{tocSubItem.title}}
+                    //- v-divider(inset, v-if='tocIdx < toc.length - 1')
+
+            v-card.page-tags-card.mb-5(v-if='tags.length > 0')
+              .pa-5
+                .overline.teal--text.pb-2(:class='$vuetify.theme.dark ? `text--lighten-3` : ``') {{$t('common:page.tags')}}
+                v-chip.mr-1.mb-1(
+                  label
+                  :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
+                  v-for='(tag, idx) in tags'
+                  :href='`/t/` + tag.tag'
+                  :key='`tag-` + tag.tag'
+                  )
+                  v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', left, small) mdi-tag
+                  span(:class='$vuetify.theme.dark ? `teal--text text--lighten-5` : `teal--text text--darken-2`') {{tag.title}}
+                v-chip.mr-1.mb-1(
+                  label
+                  :color='$vuetify.theme.dark ? `teal darken-1` : `teal lighten-5`'
+                  :href='`/t/` + tags.map(t => t.tag).join(`/`)'
+                  :aria-label='$t(`common:page.tagsMatching`)'
+                  )
+                  v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
+
+            v-card.page-comments-card.mb-5(v-if='commentsEnabled && commentsPerms.read')
+              .pa-5
+                .overline.pb-2.blue-grey--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-2`')
+                  span {{$t('common:comments.sdTitle')}}
+                  //- v-spacer
+                  //- v-chip.text-center(
+                  //-   v-if='!commentsExternal'
+                  //-   label
+                  //-   x-small
+                  //-   :color='$vuetify.theme.dark ? `blue-grey darken-3` : `blue-grey darken-2`'
+                  //-   dark
+                  //-   style='min-width: 50px; justify-content: center;'
+                  //-   )
+                  //-   span {{commentsCount}}
+                .d-flex
+                  v-btn.text-none(
+                    @click='goToComments()'
+                    :color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
+                    outlined
+                    style='flex: 1 1 100%;'
+                    small
+                    )
+                    span.blue-grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') {{$t('common:comments.viewDiscussion')}}
+                  v-tooltip(right, v-if='commentsPerms.write')
+                    template(v-slot:activator='{ on }')
+                      v-btn.ml-2(
+                        @click='goToComments(true)'
+                        v-on='on'
+                        outlined
+                        small
+                        :color='$vuetify.theme.dark ? `blue-grey` : `blue-grey darken-2`'
+                        :aria-label='$t(`common:comments.newComment`)'
+                        )
+                        v-icon(:color='$vuetify.theme.dark ? `blue-grey lighten-1` : `blue-grey darken-2`', dense) mdi-comment-plus
+                    span {{$t('common:comments.newComment')}}
+
+            v-card.page-author-card.mb-5
+              .pa-5
+                .overline.indigo--text.d-flex(:class='$vuetify.theme.dark ? `text--lighten-3` : ``')
+                  span {{$t('common:page.lastEditedBy')}}
+                  v-spacer
+                  v-tooltip(right, v-if='isAuthenticated')
+                    template(v-slot:activator='{ on }')
+                      v-btn.btn-animate-edit(
+                        icon
+                        :href='"/h/" + locale + "/" + path'
+                        v-on='on'
+                        x-small
+                        v-if='hasReadHistoryPermission'
+                        :aria-label='$t(`common:header.history`)'
+                        )
+                        v-icon(color='indigo', dense) mdi-history
+                    span {{$t('common:header.history')}}
+                .page-author-card-name.body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }}
+                .page-author-card-date.caption.grey--text.text--darken-1 {{ updatedAt | moment('calendar') }}
+
+            //- v-card.mb-5
+            //-   .pa-5
+            //-     .overline.pb-2.yellow--text(:class='$vuetify.theme.dark ? `text--darken-3` : `text--darken-4`') Rating
+            //-     .text-center
+            //-       v-rating(
+            //-         v-model='rating'
+            //-         color='yellow darken-3'
+            //-         background-color='grey lighten-1'
+            //-         half-increments
+            //-         hover
+            //-       )
+            //-       .caption.grey--text 5 votes
+
+            v-card.page-shortcuts-card(flat)
+              v-toolbar(:color='$vuetify.theme.dark ? `grey darken-4-d3` : `grey lighten-3`', flat, dense)
+                v-spacer
+                //- v-tooltip(bottom)
+                //-   template(v-slot:activator='{ on }')
+                //-     v-btn(icon, tile, v-on='on', :aria-label='$t(`common:page.bookmark`)'): v-icon(color='grey') mdi-bookmark
+                //-   span {{$t('common:page.bookmark')}}
+                v-menu(offset-y, bottom, min-width='300')
+                  template(v-slot:activator='{ on: menu }')
+                    v-tooltip(bottom)
+                      template(v-slot:activator='{ on: tooltip }')
+                        v-btn(icon, tile, v-on='{ ...menu, ...tooltip }', :aria-label='$t(`common:page.share`)'): v-icon(color='grey') mdi-share-variant
+                      span {{$t('common:page.share')}}
+                  social-sharing(
+                    :url='pageUrl'
+                    :title='title'
+                    :description='description'
+                  )
+                v-tooltip(bottom)
+                  template(v-slot:activator='{ on }')
+                    v-btn(icon, tile, v-on='on', @click='print', :aria-label='$t(`common:page.printFormat`)')
+                      v-icon(:color='printView ? `primary` : `grey`') mdi-printer
+                  span {{$t('common:page.printFormat')}}
+                v-spacer
+
+          v-flex.page-col-content(
+            xs12
+            :lg9='tocPosition !== `off`'
+            :xl10='tocPosition !== `off`'
+            :order-xs1='tocPosition === `right`'
+            :order-xs2='tocPosition !== `right`'
+            )
+            v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions && editShortcutsObj.editFab')
+              template(v-slot:activator='{ on: onEditActivator }')
+                v-speed-dial(
+                  v-model='pageEditFab'
+                  direction='top'
+                  open-on-hover
+                  transition='scale-transition'
+                  bottom
+                  :right='!$vuetify.rtl'
+                  :left='$vuetify.rtl'
+                  fixed
+                  dark
+                  )
+                  template(v-slot:activator)
+                    v-btn.btn-animate-edit(
+                      fab
+                      color='primary'
+                      v-model='pageEditFab'
+                      @click='pageEdit'
+                      v-on='onEditActivator'
+                      :disabled='!hasWritePagesPermission'
+                      :aria-label='$t(`common:page.editPage`)'
+                      )
+                      v-icon mdi-pencil
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadHistoryPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageHistory'
+                        )
+                        v-icon(size='20') mdi-history
+                    span {{$t('common:header.history')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasReadSourcePermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageSource'
+                        )
+                        v-icon(size='20') mdi-code-tags
+                    span {{$t('common:header.viewSource')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageConvert'
+                        )
+                        v-icon(size='20') mdi-lightning-bolt
+                    span {{$t('common:header.convert')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasWritePagesPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageDuplicate'
+                        )
+                        v-icon(size='20') mdi-content-duplicate
+                    span {{$t('common:header.duplicate')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasManagePagesPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        small
+                        color='white'
+                        light
+                        v-on='on'
+                        @click='pageMove'
+                        )
+                        v-icon(size='20') mdi-content-save-move-outline
+                    span {{$t('common:header.move')}}
+                  v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasDeletePagesPermission')
+                    template(v-slot:activator='{ on }')
+                      v-btn(
+                        fab
+                        dark
+                        small
+                        color='red'
+                        v-on='on'
+                        @click='pageDelete'
+                        )
+                        v-icon(size='20') mdi-trash-can-outline
+                    span {{$t('common:header.delete')}}
+              span {{$t('common:page.editPage')}}
+            v-alert.mb-5(v-if='!isPublished', color='red', outlined, icon='mdi-minus-circle', dense)
+              .caption {{$t('common:page.unpublishedWarning')}}
+            .contents(ref='container')
+              slot(name='contents')
+            .comments-container#discussion(v-if='commentsEnabled && commentsPerms.read && !printView')
+              .comments-header
+                v-icon.mr-2(dark) mdi-comment-text-outline
+                span {{$t('common:comments.title')}}
+              .comments-main
+                slot(name='comments')
+    nav-footer
+    notify
+    search-results
+    v-fab-transition
+      v-btn(
+        v-if='upBtnShown'
+        fab
+        fixed
+        bottom
+        :right='$vuetify.rtl'
+        :left='!$vuetify.rtl'
+        small
+        :depressed='this.$vuetify.breakpoint.mdAndUp'
+        @click='$vuetify.goTo(0, scrollOpts)'
+        color='primary'
+        dark
+        :style='upBtnPosition'
+        :aria-label='$t(`common:actions.returnToTop`)'
+        )
+        v-icon mdi-arrow-up
+</template>
+
+<script>
+import { StatusIndicator } from 'vue-status-indicator'
+import Tabset from './tabset.vue'
+import NavSidebar from './nav-sidebar.vue'
+import Prism from 'prismjs'
+import mermaid from 'mermaid'
+import { get, sync } from 'vuex-pathify'
+import _ from 'lodash'
+import ClipboardJS from 'clipboard'
+import Vue from 'vue'
+
+/* global siteLangs */
+
+Vue.component('Tabset', Tabset)
+
+Prism.plugins.autoloader.languages_path = '/_assets/js/prism/'
+Prism.plugins.NormalizeWhitespace.setDefaults({
+  'remove-trailing': true,
+  'remove-indent': true,
+  'left-trim': true,
+  'right-trim': true,
+  'remove-initial-line-feed': true,
+  'tabs-to-spaces': 2
+})
+Prism.plugins.toolbar.registerButton('copy-to-clipboard', (env) => {
+  let linkCopy = document.createElement('button')
+  linkCopy.textContent = 'Copy'
+
+  const clip = new ClipboardJS(linkCopy, {
+    text: () => { return env.code }
+  })
+
+  clip.on('success', () => {
+    linkCopy.textContent = 'Copied!'
+    resetClipboardText()
+  })
+  clip.on('error', () => {
+    linkCopy.textContent = 'Press Ctrl+C to copy'
+    resetClipboardText()
+  })
+
+  return linkCopy
+
+  function resetClipboardText() {
+    setTimeout(() => {
+      linkCopy.textContent = 'Copy'
+    }, 5000)
+  }
+})
+
+export default {
+  components: {
+    NavSidebar,
+    StatusIndicator
+  },
+  props: {
+    pageId: {
+      type: Number,
+      default: 0
+    },
+    locale: {
+      type: String,
+      default: 'en'
+    },
+    path: {
+      type: String,
+      default: 'home'
+    },
+    title: {
+      type: String,
+      default: 'Untitled Page'
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    createdAt: {
+      type: String,
+      default: ''
+    },
+    updatedAt: {
+      type: String,
+      default: ''
+    },
+    tags: {
+      type: Array,
+      default: () => ([])
+    },
+    authorName: {
+      type: String,
+      default: 'Unknown'
+    },
+    authorId: {
+      type: Number,
+      default: 0
+    },
+    editor: {
+      type: String,
+      default: ''
+    },
+    isPublished: {
+      type: Boolean,
+      default: false
+    },
+    toc: {
+      type: String,
+      default: ''
+    },
+    sidebar: {
+      type: String,
+      default: ''
+    },
+    navMode: {
+      type: String,
+      default: 'MIXED'
+    },
+    commentsEnabled: {
+      type: Boolean,
+      default: false
+    },
+    effectivePermissions: {
+      type: String,
+      default: ''
+    },
+    commentsExternal: {
+      type: Boolean,
+      default: false
+    },
+    editShortcuts: {
+      type: String,
+      default: ''
+    },
+    filename: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      locales: siteLangs,
+      navShown: false,
+      navExpanded: false,
+      upBtnShown: false,
+      pageEditFab: false,
+      scrollOpts: {
+        duration: 1500,
+        offset: 0,
+        easing: 'easeInOutCubic'
+      },
+      scrollStyle: {
+        vuescroll: {},
+        scrollPanel: {
+          initialScrollX: 0.01, // fix scrollbar not disappearing on load
+          scrollingX: false,
+          speed: 50
+        },
+        rail: {
+          gutterOfEnds: '2px'
+        },
+        bar: {
+          onlyShowBarOnScroll: false,
+          background: '#42A5F5',
+          hoverStyle: {
+            background: '#64B5F6'
+          }
+        }
+      },
+      winWidth: 0
+    }
+  },
+  computed: {
+    isAuthenticated: get('user/authenticated'),
+    commentsCount: get('page/commentsCount'),
+    commentsPerms: get('page/effectivePermissions@comments'),
+    editShortcutsObj: get('page/editShortcuts'),
+    rating: {
+      get () {
+        return 3.5
+      },
+      set (val) {
+
+      }
+    },
+    breadcrumbs() {
+      return [{ path: '/', name: 'Home' }].concat(
+        _.reduce(this.path.split('/'), (result, value) => {
+          result.push({
+            path: _.get(_.last(result), 'path', this.locales.length > 0 ? `/${this.locale}` : '') + `/${value}`,
+            name: value
+          })
+          return result
+        }, []))
+    },
+    pageUrl () { return window.location.href },
+    upBtnPosition () {
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        return this.$vuetify.rtl ? `right: 235px;` : `left: 235px;`
+      } else {
+        return this.$vuetify.rtl ? `right: 65px;` : `left: 65px;`
+      }
+    },
+    sidebarDecoded () {
+      return JSON.parse(Buffer.from(this.sidebar, 'base64').toString())
+    },
+    tocDecoded () {
+      return JSON.parse(Buffer.from(this.toc, 'base64').toString())
+    },
+    tocPosition: get('site/tocPosition'),
+    hasAdminPermission: get('page/effectivePermissions@system.manage'),
+    hasWritePagesPermission: get('page/effectivePermissions@pages.write'),
+    hasManagePagesPermission: get('page/effectivePermissions@pages.manage'),
+    hasDeletePagesPermission: get('page/effectivePermissions@pages.delete'),
+    hasReadSourcePermission: get('page/effectivePermissions@source.read'),
+    hasReadHistoryPermission: get('page/effectivePermissions@history.read'),
+    hasAnyPagePermissions () {
+      return this.hasAdminPermission || this.hasWritePagesPermission || this.hasManagePagesPermission ||
+        this.hasDeletePagesPermission || this.hasReadSourcePermission || this.hasReadHistoryPermission
+    },
+    printView: sync('site/printView'),
+    editMenuExternalUrl () {
+      if (this.editShortcutsObj.editMenuBar && this.editShortcutsObj.editMenuExternalBtn) {
+        return this.editShortcutsObj.editMenuExternalUrl.replace('{filename}', this.filename)
+      } else {
+        return ''
+      }
+    }
+  },
+  created() {
+    this.$store.set('page/authorId', this.authorId)
+    this.$store.set('page/authorName', this.authorName)
+    this.$store.set('page/createdAt', this.createdAt)
+    this.$store.set('page/description', this.description)
+    this.$store.set('page/isPublished', this.isPublished)
+    this.$store.set('page/id', this.pageId)
+    this.$store.set('page/locale', this.locale)
+    this.$store.set('page/path', this.path)
+    this.$store.set('page/tags', this.tags)
+    this.$store.set('page/title', this.title)
+    this.$store.set('page/editor', this.editor)
+    this.$store.set('page/updatedAt', this.updatedAt)
+    if (this.effectivePermissions) {
+      this.$store.set('page/effectivePermissions', JSON.parse(Buffer.from(this.effectivePermissions, 'base64').toString()))
+    }
+    if (this.editShortcuts) {
+      this.$store.set('page/editShortcuts', JSON.parse(Buffer.from(this.editShortcuts, 'base64').toString()))
+    }
+
+    this.$store.set('page/mode', 'view')
+  },
+  mounted () {
+    if (this.$vuetify.theme.dark) {
+      this.scrollStyle.bar.background = '#424242'
+    }
+
+    // -> Check side navigation visibility
+    this.handleSideNavVisibility()
+    window.addEventListener('resize', _.debounce(() => {
+      this.handleSideNavVisibility()
+    }, 500))
+
+    // -> Highlight Code Blocks
+    Prism.highlightAllUnder(this.$refs.container)
+
+    // -> Render Mermaid diagrams
+    mermaid.mermaidAPI.initialize({
+      startOnLoad: true,
+      theme: this.$vuetify.theme.dark ? `dark` : `default`
+    })
+
+    // -> Handle anchor scrolling
+    if (window.location.hash && window.location.hash.length > 1) {
+      if (document.readyState === 'complete') {
+        this.$nextTick(() => {
+          this.$vuetify.goTo(decodeURIComponent(window.location.hash), this.scrollOpts)
+        })
+      } else {
+        window.addEventListener('load', () => {
+          this.$vuetify.goTo(decodeURIComponent(window.location.hash), this.scrollOpts)
+        })
+      }
+    }
+
+    // -> Handle anchor links within the page contents
+    this.$nextTick(() => {
+      this.$refs.container.querySelectorAll(`a[href^="#"], a[href^="${window.location.href.replace(window.location.hash, '')}#"]`).forEach(el => {
+        el.onclick = ev => {
+          ev.preventDefault()
+          ev.stopPropagation()
+          this.$vuetify.goTo(decodeURIComponent(ev.currentTarget.hash), this.scrollOpts)
+        }
+      })
+
+      window.boot.notify('page-ready')
+    })
+  },
+  methods: {
+    goHome () {
+      if (this.locales && this.locales.length > 0) {
+        window.location.assign(`/${this.locale}/home`)
+      } else {
+        window.location.assign('/')
+      }
+    },
+    toggleNavigation () {
+      this.navOpen = !this.navOpen
+    },
+    upBtnScroll () {
+      const scrollOffset = window.pageYOffset || document.documentElement.scrollTop
+      this.upBtnShown = scrollOffset > window.innerHeight * 0.33
+    },
+    print () {
+      if (this.printView) {
+        this.printView = false
+      } else {
+        this.printView = true
+        this.$nextTick(() => {
+          window.print()
+        })
+      }
+    },
+    pageEdit () {
+      this.$root.$emit('pageEdit')
+    },
+    pageHistory () {
+      this.$root.$emit('pageHistory')
+    },
+    pageSource () {
+      this.$root.$emit('pageSource')
+    },
+    pageConvert () {
+      this.$root.$emit('pageConvert')
+    },
+    pageDuplicate () {
+      this.$root.$emit('pageDuplicate')
+    },
+    pageMove () {
+      this.$root.$emit('pageMove')
+    },
+    pageDelete () {
+      this.$root.$emit('pageDelete')
+    },
+    handleSideNavVisibility () {
+      if (window.innerWidth === this.winWidth) { return }
+      this.winWidth = window.innerWidth
+      if (this.$vuetify.breakpoint.mdAndUp) {
+        this.navShown = true
+      } else {
+        this.navShown = false
+      }
+    },
+    goToComments (focusNewComment = false) {
+      this.$vuetify.goTo('#discussion', this.scrollOpts)
+      if (focusNewComment) {
+        document.querySelector('#discussion-new').focus()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+.breadcrumbs-nav {
+  .v-btn {
+    min-width: 0;
+    &__content {
+      text-transform: none;
+    }
+  }
+  .v-breadcrumbs__divider:nth-child(2n) {
+    padding: 0 6px;
+  }
+  .v-breadcrumbs__divider:nth-child(2) {
+    padding: 0 6px 0 12px;
+  }
+}
+
+.page-col-sd {
+  margin-top: -90px;
+  align-self: flex-start;
+  position: sticky;
+  top: 64px;
+  max-height: calc(100vh - 64px);
+  overflow-y: auto;
+  -ms-overflow-style: none;
+}
+
+.page-col-sd::-webkit-scrollbar {
+  display: none;
+}
+
+.page-header-section {
+  position: relative;
+
+  > .is-page-header {
+    position: relative;
+  }
+
+  .page-header-headings {
+    min-height: 52px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .page-edit-shortcuts {
+    position: absolute;
+    bottom: -33px;
+    right: 10px;
+
+    .v-btn {
+      border-right: 1px solid #DDD !important;
+      border-bottom: 1px solid #DDD !important;
+      border-radius: 0;
+      color: #777;
+      background-color: #FFF !important;
+
+      @at-root .theme--dark & {
+        background-color: #222 !important;
+        border-right-color: #444 !important;
+        border-bottom-color: #444 !important;
+        color: #CCC;
+      }
+
+      .v-icon {
+        color: mc('blue', '700');
+      }
+
+      &:first-child {
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+    }
+  }
+}
+
+</style>
diff --git a/client/themes/iqs/components/tabset.vue b/client/themes/iqs/components/tabset.vue
new file mode 100644
index 00000000..d4b84d40
--- /dev/null
+++ b/client/themes/iqs/components/tabset.vue
@@ -0,0 +1,209 @@
+<template lang="pug">
+  .tabset.elevation-2
+    ul.tabset-tabs(ref='tabs', role='tablist')
+      slot(name='tabs')
+    .tabset-content(ref='content')
+      slot(name='content')
+</template>
+
+<script>
+import { customAlphabet } from 'nanoid/non-secure'
+
+const nanoid = customAlphabet('1234567890abcdef', 10)
+
+export default {
+  data() {
+    return {
+      currentTab: 0
+    }
+  },
+  watch: {
+    currentTab (newValue, oldValue) {
+      this.setActiveTab()
+    }
+  },
+  methods: {
+    setActiveTab () {
+      this.$refs.tabs.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'is-active'
+          node.setAttribute('aria-selected', 'true')
+        } else {
+          node.className = ''
+          node.setAttribute('aria-selected', 'false')
+        }
+      })
+      this.$refs.content.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'tabset-panel is-active'
+          node.removeAttribute('hidden')
+        } else {
+          node.className = 'tabset-panel'
+          node.setAttribute('hidden', '')
+        }
+      })
+    }
+  },
+  mounted () {
+    // Handle scroll to header on load within hidden tab content
+    if (window.location.hash && window.location.hash.length > 1) {
+      const headerId = decodeURIComponent(window.location.hash)
+      let foundIdx = -1
+      this.$refs.content.childNodes.forEach((node, idx) => {
+        if (node.querySelector(headerId)) {
+          foundIdx = idx
+        }
+      })
+      if (foundIdx >= 0) {
+        this.currentTab = foundIdx
+      }
+    }
+
+    this.setActiveTab()
+
+    const tabRefId = nanoid()
+
+    this.$refs.tabs.childNodes.forEach((node, idx) => {
+      node.setAttribute('id', `${tabRefId}-${idx}`)
+      node.setAttribute('role', 'tab')
+      node.setAttribute('aria-controls', `${tabRefId}-${idx}-tab`)
+      node.setAttribute('tabindex', '0')
+      node.addEventListener('click', ev => {
+        this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
+      })
+      node.addEventListener('keydown', ev => {
+        if (ev.key === 'ArrowLeft' && idx > 0) {
+          this.currentTab = idx - 1
+          this.$refs.tabs.childNodes[idx - 1].focus()
+        } else if (ev.key === 'ArrowRight' && idx < this.$refs.tabs.childNodes.length - 1) {
+          this.currentTab = idx + 1
+          this.$refs.tabs.childNodes[idx + 1].focus()
+        } else if (ev.key === 'Enter' || ev.key === ' ') {
+          this.currentTab = idx
+          node.focus()
+        } else if (ev.key === 'Home') {
+          this.currentTab = 0
+          ev.preventDefault()
+          ev.target.parentNode.children[0].focus()
+        } else if (ev.key === 'End') {
+          this.currentTab = this.$refs.tabs.childNodes.length - 1
+          ev.preventDefault()
+          ev.target.parentNode.children[this.$refs.tabs.childNodes.length - 1].focus()
+        }
+      })
+    })
+
+    this.$refs.content.childNodes.forEach((node, idx) => {
+      node.setAttribute('id', `${tabRefId}-${idx}-tab`)
+      node.setAttribute('role', 'tabpanel')
+      node.setAttribute('aria-labelledby', `${tabRefId}-${idx}`)
+      node.setAttribute('tabindex', '0')
+    })
+  }
+}
+</script>
+
+<style lang="scss">
+.tabset {
+  border-radius: 5px;
+  margin-top: 10px;
+
+  @at-root .theme--dark & {
+    background-color: #292929;
+  }
+
+  > .tabset-tabs {
+    padding-left: 0;
+    margin: 0;
+    display: flex;
+    align-items: stretch;
+    background: linear-gradient(to bottom, #FFF, #FAFAFA);
+    box-shadow: inset 0 -1px 0 0 #DDD;
+    border-radius: 5px 5px 0 0;
+    overflow: auto;
+
+    @at-root .theme--dark & {
+      background: linear-gradient(to bottom, #424242, #333);
+      box-shadow: inset 0 -1px 0 0 #555;
+    }
+
+    > li {
+      display: block;
+      padding: 16px;
+      margin-top: 0;
+      cursor: pointer;
+      transition: color 1s ease;
+      border-right: 1px solid #FFF;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 1px;
+      user-select: none;
+
+      @at-root .theme--dark & {
+        border-right-color: #555;
+      }
+
+      &.is-active {
+        background-color: #FFF;
+        margin-bottom: 0;
+        padding-bottom: 17px;
+        padding-top: 13px;
+        color: mc('blue', '700');
+        border-top: 3px solid mc('blue', '700');
+
+        @at-root .theme--dark & {
+          background-color: #292929;
+          color: mc('blue', '300');
+        }
+      }
+
+      &:last-child {
+        border-right: none;
+
+        &.is-active {
+          border-right: 1px solid #EEE;
+
+          @at-root .theme--dark & {
+            border-right-color: #555;
+          }
+        }
+      }
+
+      &:hover {
+        background-color: rgba(#CCC, .1);
+
+        @at-root .theme--dark & {
+          background-color: rgba(#222, .25);
+        }
+
+        &.is-active {
+          background-color: #FFF;
+
+          @at-root .theme--dark & {
+            background-color: #292929;
+          }
+        }
+      }
+
+      & + li {
+        border-left: 1px solid #EEE;
+
+        @at-root .theme--dark & {
+          border-left-color: #222;
+        }
+      }
+    }
+  }
+
+  > .tabset-content {
+    .tabset-panel {
+      padding: 2px 16px 16px;
+      display: none;
+
+      &.is-active {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/client/themes/iqs/js/app.js b/client/themes/iqs/js/app.js
new file mode 100644
index 00000000..34efb224
--- /dev/null
+++ b/client/themes/iqs/js/app.js
@@ -0,0 +1 @@
+/* THEME SPECIFIC JAVASCRIPT */
diff --git a/client/themes/iqs/scss/app.scss b/client/themes/iqs/scss/app.scss
new file mode 100644
index 00000000..caa8c15f
--- /dev/null
+++ b/client/themes/iqs/scss/app.scss
@@ -0,0 +1,1462 @@
+/* THEME SPECIFIC STYLES */
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+* {
+  font-family: 'Inter', sans-serif !important;
+}
+
+.theme--dark.v-text-field--solo>.v-input__control>.v-input__slot {
+  background-color: white !important;
+  border: 1px solid #E2E8F0 !important;
+  border-radius: 12px !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+}
+
+.theme--dark.v-icon {
+  color: #2D3748 !important;
+}
+
+.theme--dark.v-label {
+  color: #2D3748 !important;
+}
+
+.theme--dark.v-input,
+.theme--dark.v-input input,
+.theme--dark.v-input textarea {
+  color: #2D3748 !important;
+}
+
+
+.subheading {
+  color: #2D3748 !important;
+  font-weight: 600 !important;
+  font-size: 18px !important;
+}
+
+.v-navigation-drawer .v-list.secondary .v-subheader {
+  color: #718096 !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  height: auto !important;
+  line-height: normal !important;
+}
+
+.page-toc-card .overline {
+  font-family: 'Inter', sans-serif !important;
+  color: #718096 !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  line-height: 16px !important;
+  font-weight: 500 !important;
+  letter-spacing: normal !important;
+}
+
+.page-toc-card .v-list-item {
+  max-height: 32px !important;
+}
+
+
+
+.v-navigation-drawer .v-list.secondary>.v-list-item,
+.v-navigation-drawer .v-list.secondary .v-list-item__title {
+  color: #2D3748 !important;
+  font-size: .875rem !important;
+  height: auto !important;
+  border-radius: 0.5rem;
+
+}
+
+
+.v-navigation-drawer .v-list.secondary>.v-list-item {
+  min-height: 0 !important;
+  padding: 0;
+}
+
+
+.v-navigation-drawer .v-list.secondary .v-icon {
+  color: #4A5568 !important;
+}
+
+.v-navigation-drawer .v-divider {
+  border-color: #E2E8F0 !important;
+}
+
+.page-toc-card {
+  border-radius: 0.75rem !important;
+  border: 1px solid #E2E8F0 !important;
+  box-shadow: 0 0 1rem 0 rgba(13, 24, 41, 0.05) !important;
+}
+
+.page-toc-card .overline {
+  text-transform: none !important;
+}
+
+.page-toc-card .v-list {
+  padding: 1rem !important;
+}
+
+.page-toc-card .v-list-item {
+  min-height: auto !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.page-toc-card .v-list-item + .v-list-item {
+  margin-top: 0.75rem !important;
+}
+
+.page-col-sd .v-btn,
+.page-col-sd .v-list-item--link {
+
+  &::before,
+  &:hover::before,
+  &:focus::before,
+  &:active::before {
+    display: none !important;
+    opacity: 0 !important;
+    background-color: transparent !important;
+  }
+
+  .v-ripple__container {
+    display: none !important;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+}
+
+.v-navigation-drawer .v-list.secondary>.v-list-item {
+  &::before {
+    display: none !important;
+  }
+
+  .v-ripple__container {
+    display: none !important;
+  }
+
+  &:hover {
+    background-color: #e4ecf7 !important;
+  }
+
+  &.v-list-item--active,
+  &.v-list-item--active .v-list-item__title,
+  &.v-list-item--active .v-icon {
+    color: #1976D2 !important;
+  }
+}
+
+.v-main .contents {
+  color: #2D3748;
+  padding: .5rem 0 50px;
+  position: relative;
+
+
+  >div>*:first-child {
+    margin-top: 0;
+  }
+
+
+
+  @at-root .theme--dark & {
+    color: mc('grey', '300');
+  }
+
+
+
+  .v-list.secondary .v-icon {
+    color: #4A5568 !important;
+  }
+
+  // ---------------------------------
+  // LINKS
+  // ---------------------------------
+
+  a {
+    color: mc('blue', '700');
+
+    &.is-internal-link.is-invalid-page {
+      color: mc('red', '700');
+
+      @at-root .theme--dark & {
+        color: mc('red', '200');
+      }
+    }
+
+    &.is-external-link {
+      padding-right: 3px;
+
+      &::after {
+        font-family: 'Material Design Icons', sans-serif;
+        font-size: 24px/1;
+        padding-left: 3px;
+        display: inline-block;
+        content: '\F03CC';
+        color: mc('grey', '500');
+        text-decoration: none;
+      }
+    }
+
+    @at-root .theme--dark & {
+      color: mc('blue', '200');
+    }
+  }
+
+  .nav-header {
+    background-color: white !important;
+    color: black !important;
+  }
+
+  // ---------------------------------
+  // HEADERS
+  // ---------------------------------
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    position: relative;
+    font-weight: 600;
+    line-height: normal !important;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:hover {
+      .toc-anchor {
+        display: block;
+      }
+    }
+
+    .toc-anchor {
+      display: none;
+      position: absolute;
+      right: 1rem;
+      bottom: .5rem;
+      font-size: 1.25rem;
+      text-decoration: none;
+      color: mc('grey', '500');
+    }
+
+    &+h2,
+    &+h3,
+    &+h4,
+    &+h5,
+    &+h6 {
+      margin-top: 8px;
+    }
+
+    &+hr.footnotes-sep {
+      display: none;
+    }
+  }
+
+  h1 {
+    padding: 0;
+    color: mc('blue', '800');
+    margin-top: 2rem;
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '300');
+    }
+  }
+
+  h2 {
+    margin: 1rem 0 0 0;
+    color: mc('grey', '800');
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '400');
+    }
+  }
+
+  h3 {
+    margin: 8px 0 0 0;
+    color: mc('grey', '700');
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '600');
+    }
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 1rem;
+    margin: 8px 0 0 0;
+    color: mc('grey', '700');
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '600');
+    }
+  }
+
+
+  // ---------------------------------
+  // PARAGRAPHS
+  // ---------------------------------
+
+  p {
+    padding: 1rem 0 0 0;
+    margin: 0;
+
+    @at-root .contents>div>p:first-child {
+      padding-top: 0;
+    }
+
+    @at-root .v-application & {
+      margin-bottom: 0;
+    }
+  }
+
+  hr {
+    margin: 1rem 0;
+    height: 1px;
+    border: none;
+    background-color: mc('grey', '400');
+
+    @at-root .theme--dark & {
+      background-color: mc('grey', '700');
+    }
+  }
+
+  .emoji {
+    height: 1.25em;
+    margin: 0 1px -4px;
+  }
+
+  .text-huge {
+    font-size: 1.8em;
+  }
+
+  .text-big {
+    font-size: 1.4em;
+  }
+
+  .text-small {
+    font-size: .85em;
+  }
+
+  .text-tiny {
+    font-size: .7em;
+  }
+
+  blockquote {
+    padding: 0 1rem 1rem 1rem;
+    background-color: mc('blue-grey', '50');
+    border-left: 55px solid mc('blue-grey', '500');
+    border-radius: .5rem;
+    margin: 1rem 0;
+    position: relative;
+
+    @at-root .theme--dark & {
+      background-color: mc('blue-grey', '900');
+    }
+
+    &::before {
+      display: inline-block;
+      font: normal normal normal 24px/1 "Material Design Icons", sans-serif;
+      position: absolute;
+      margin-top: -12px;
+      top: 50%;
+      left: -38px;
+      color: rgba(255, 255, 255, .7);
+      content: "\F0757";
+    }
+
+    >p:first-child .emoji {
+      margin-right: .5rem;
+    }
+
+    &.valign-center>p {
+      display: flex;
+      align-items: center;
+    }
+
+    &.is-info {
+      background-color: mc('blue', '50');
+      border-color: mc('blue', '300');
+      color: mc('blue', '900');
+
+      &::before {
+        content: "\F02FC";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('blue', '50');
+        color: mc('blue', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: mc('blue', '900');
+        color: mc('blue', '50');
+        border-color: mc('blue', '500');
+      }
+    }
+
+    &.is-warning {
+      background-color: mc('orange', '50');
+      border-color: mc('orange', '300');
+      color: darken(mc('orange', '900'), 10%);
+
+      &::before {
+        content: "\F0026";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('orange', '50');
+        color: mc('orange', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: darken(mc('orange', '900'), 5%);
+        color: mc('orange', '100');
+        border-color: mc('orange', '500');
+        box-shadow: 0 0 2px 0 mc('grey', '900');
+      }
+    }
+
+    &.is-danger {
+      background-color: mc('red', '50');
+      border-color: mc('red', '300');
+      color: mc('red', '900');
+
+      &::before {
+        content: "\F0159";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('red', '50');
+        color: mc('red', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: mc('red', '900');
+        color: mc('red', '100');
+        border-color: mc('red', '500');
+      }
+    }
+
+    &.is-success {
+      background-color: mc('green', '50');
+      border-color: mc('green', '300');
+      color: mc('green', '900');
+
+      &::before {
+        content: "\F0E1E";
+      }
+
+      code:not([class^="language-"]) {
+        background-color: mc('green', '50');
+        color: mc('green', '800');
+      }
+
+      @at-root .theme--dark & {
+        background-color: mc('green', '900');
+        color: mc('green', '50');
+        border-color: mc('green', '500');
+      }
+    }
+  }
+
+  // ---------------------------------
+  // ASCIIDOC SPECIFIC
+  // ---------------------------------
+
+  .admonitionblock {
+    margin: 1rem 0;
+    position: relative;
+
+    table {
+      border: none;
+      background-color: transparent;
+      width: 100%;
+    }
+
+    td.icon {
+      border-bottom-left-radius: 7px;
+      border-top-left-radius: 7px;
+      text-align: center;
+      width: 56px;
+
+      &::before {
+        display: inline-block;
+        font: normal normal normal 24px/1 "Material Design Icons", sans-serif !important;
+      }
+    }
+
+    td.content {
+      border-bottom-right-radius: 7px;
+      border-top-right-radius: 7px;
+    }
+
+    &.note {
+      td.icon {
+        background-color: mc('blue', '300');
+        color: mc('blue', '50');
+
+        &::before {
+          content: "\F02FC";
+        }
+      }
+
+      td.content {
+        color: darken(mc('blue', '900'), 10%);
+        background-color: mc('blue', '50');
+
+        @at-root .theme--dark & {
+          background-color: mc('blue', '900');
+          color: mc('blue', '50');
+        }
+      }
+    }
+
+    &.tip {
+      td.icon {
+        background-color: mc('green', '300');
+        color: mc('green', '50');
+
+        &::before {
+          content: "\F0335";
+        }
+      }
+
+      td.content {
+        color: darken(mc('green', '900'), 10%);
+        background-color: mc('green', '50');
+
+        @at-root .theme--dark & {
+          background-color: mc('green', '900');
+          color: mc('green', '50');
+        }
+      }
+    }
+
+    &.warning {
+      background-color: transparent !important;
+
+      td.icon {
+        background-color: mc('orange', '300');
+        color: #FFF;
+
+        &::before {
+          content: "\F0026";
+        }
+      }
+
+      td.content {
+        color: darken(mc('orange', '900'), 10%);
+        background-color: mc('orange', '50');
+
+        @at-root .theme--dark & {
+          background-color: darken(mc('orange', '900'), 5%);
+          color: mc('orange', '100');
+        }
+      }
+    }
+
+    &.caution {
+      td.icon {
+        background-color: mc('purple', '300');
+        color: mc('purple', '50');
+
+        &::before {
+          content: "\f0238";
+        }
+      }
+
+      td.content {
+        color: darken(mc('purple', '900'), 10%);
+        background-color: mc('purple', '50');
+
+        @at-root .theme--dark & {
+          background-color: mc('purple', '900');
+          color: mc('purple', '100');
+        }
+      }
+    }
+
+    &.important {
+      td.icon {
+        background-color: mc('red', '300');
+        color: mc('red', '50');
+
+        &::before {
+          content: "\F0159";
+        }
+      }
+
+      td.content {
+        color: darken(mc('red', '900'), 10%);
+        background-color: mc('red', '50');
+
+        @at-root .theme--dark & {
+          background-color: mc('red', '900');
+          color: mc('red', '100');
+        }
+      }
+    }
+  }
+
+  .exampleblock {
+    >.title {
+      font-style: italic;
+      font-size: 1rem !important;
+      color: #7a2717;
+
+      @at-root .theme--dark & {
+        color: mc('brown', '300');
+      }
+    }
+
+    >.content {
+      border: 1px solid mc('grey', '200');
+      border-radius: 7px;
+      margin-bottom: 12px;
+      padding: 16px;
+    }
+  }
+
+  // ---------------------------------
+  // LISTS
+  // ---------------------------------
+
+  ol,
+  ul:not(.tabset-tabs) {
+    padding-top: 1rem;
+    width: 100%;
+
+    @at-root .is-rtl & {
+      padding-left: 0;
+      padding-right: 1rem;
+    }
+
+    li>ul,
+    li>ol {
+      padding-top: .5rem;
+      padding-left: 1rem;
+
+      @at-root .is-rtl & {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+    }
+
+    li+li {
+      margin-top: .5rem;
+    }
+
+    &.links-list {
+      padding-left: 0;
+      list-style-type: none;
+
+      @at-root .is-rtl & {
+        padding-right: 0;
+      }
+
+      li {
+        background-color: mc('grey', '50');
+        background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
+        border-right: 1px solid mc('grey', '200');
+        border-bottom: 1px solid mc('grey', '200');
+        border-left: 5px solid mc('grey', '300');
+        box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
+        padding: 1rem;
+        border-radius: 5px;
+        font-weight: 500;
+
+        @at-root .is-rtl & {
+          border-left-width: 1px;
+          border-right-width: 5px;
+        }
+
+        &:hover {
+          background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
+          border-left-color: mc('blue', '500');
+          cursor: pointer;
+
+          @at-root .is-rtl & {
+            border-left-color: mc('grey', '200');
+            border-right-width: mc('blue', '500');
+          }
+        }
+
+        &::before {
+          content: '';
+          display: none;
+        }
+
+        >a {
+          display: block;
+          text-decoration: none;
+          margin: -1rem;
+          padding: 1rem;
+
+          >em {
+            font-weight: 400;
+            font-style: normal;
+            color: mc('grey', '700');
+            display: inline-block;
+            padding-left: .5rem;
+            border-left: 1px solid mc('grey', '300');
+            margin-left: .5rem;
+
+            &.is-block {
+              display: block;
+              padding-left: 0;
+              margin-left: 0;
+              border-left: none;
+            }
+          }
+        }
+
+        >em {
+          font-weight: 400;
+          font-style: normal;
+        }
+
+        @at-root .theme--dark & {
+          background-color: mc('grey', '50');
+          background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 5%), mc('grey', '900'));
+          border-right: 1px solid mc('grey', '900');
+          border-bottom: 1px solid mc('grey', '900');
+          border-left: 5px solid mc('grey', '700');
+          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+
+          @at-root .theme--dark.is-rtl & {
+            border-left-width: 1px;
+            border-right-width: 5px;
+          }
+
+          &:hover {
+            background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
+            border-left-color: mc('indigo', '300');
+            cursor: pointer;
+
+            @at-root .theme--dark.is-rtl & {
+              border-left-color: mc('grey', '900');
+              border-right-width: mc('indigo', '300');
+            }
+          }
+        }
+      }
+    }
+
+    &.grid-list {
+      margin: 1rem 0 0 0;
+      background-color: #FFF;
+      border: 1px solid mc('grey', '200');
+      padding: 1px;
+      display: inline-block;
+      list-style-type: none;
+
+      @at-root .theme--dark & {
+        background-color: #000;
+        border: 1px solid mc('grey', '800');
+      }
+
+      li {
+        background-color: mc('grey', '50');
+        padding: .6rem 1rem;
+        display: block;
+
+        &:nth-child(odd) {
+          background-color: mc('grey', '100');
+        }
+
+        &+li {
+          margin-top: 0;
+        }
+
+        &::before {
+          content: '';
+          display: none;
+        }
+
+        @at-root .theme--dark & {
+          background-color: mc('grey', '900');
+
+          &:nth-child(odd) {
+            background-color: darken(mc('grey', '900'), 5%);
+          }
+        }
+      }
+    }
+  }
+
+  ul:not(.tabset-tabs):not(.contains-task-list) {
+    list-style: none;
+
+    >li::before {
+      position: absolute;
+      left: -1.1rem;
+      content: '\25b8';
+      color: mc('grey', '600');
+      width: 1.35rem;
+
+      @at-root .is-rtl & {
+        right: -1.1rem;
+        content: '\25C3';
+      }
+    }
+  }
+
+  ol,
+  ul:not(.tabset-tabs) {
+    >li {
+      position: relative;
+
+      >p {
+        display: inline-block;
+        vertical-align: top;
+        padding-top: 0;
+
+        &:first-child {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  dl {
+    dt {
+      margin-top: 0.3em;
+      margin-bottom: 0.3em;
+      font-weight: bold;
+    }
+
+    dd {
+      margin-left: 1.125em;
+      margin-bottom: 0.75em;
+
+      >p {
+        padding: 0;
+      }
+    }
+  }
+
+  // ---------------------------------
+  // CODE
+  // ---------------------------------
+
+  code {
+    background-color: mc('indigo', '50');
+    padding: 0 5px;
+    color: mc('indigo', '800');
+    font-family: 'Roboto Mono', monospace;
+    font-weight: normal;
+    font-size: 1rem;
+    box-shadow: none;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+
+    @at-root .theme--dark & {
+      background-color: darken(mc('grey', '900'), 5%);
+      color: mc('indigo', '100');
+    }
+  }
+
+  .prismjs {
+    border: none;
+    border-radius: 5px;
+    box-shadow: initial;
+    background-color: mc('grey', '900');
+    padding: 1rem 1rem 1rem 3rem;
+    margin: 1rem 0;
+
+    @at-root .theme--dark & {
+      background-color: darken(mc('grey', '900'), 5%);
+    }
+
+    >code {
+      background-color: transparent;
+      padding: 0;
+      color: #FFF;
+      box-shadow: initial;
+      display: block;
+      font-size: .85rem;
+      font-family: 'Roboto Mono', monospace;
+
+      &:after,
+      &:before {
+        content: initial;
+        letter-spacing: initial;
+      }
+    }
+  }
+
+  .diagram {
+    margin-top: 1rem;
+    overflow: auto;
+
+    svg {
+      color-scheme: light !important;
+
+      &:first-child {
+        direction: ltr;
+      }
+
+      @at-root .theme--dark & {
+        color-scheme: dark !important;
+      }
+    }
+  }
+
+  // ---------------------------------
+  // TASK LISTS
+  // ---------------------------------
+
+  .contains-task-list {
+    padding-left: 0;
+  }
+
+  .task-list-item {
+    position: relative;
+    list-style-type: none;
+
+    &-checkbox[disabled] {
+      width: 1.1rem;
+      height: 1.1rem;
+      top: 2px;
+      position: relative;
+      margin-right: 2px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 0;
+        content: ' ';
+        display: block;
+        width: 1.1rem;
+        height: 1.1rem;
+        background-color: #FFF;
+        border: 1px solid mc('grey', '400');
+        border-radius: 2px;
+        font-weight: bold;
+        font-size: .8rem;
+        line-height: 1rem;
+        text-align: center;
+
+        @at-root .theme--dark & {
+          background-color: mc('grey', '900');
+          border-color: mc('grey', '700');
+        }
+      }
+
+      &[checked]::after {
+        content: '✓';
+      }
+    }
+
+    .contains-task-list {
+      padding: .5rem 0 0 1.5rem;
+    }
+  }
+
+  // ---------------------------------
+  // TABLES
+  // ---------------------------------
+
+  table {
+    margin: .5rem 0;
+    border-spacing: 0;
+    border-radius: 5px;
+    border: 1px solid mc('grey', '300');
+
+    @at-root .theme--dark & {
+      border-color: mc('grey', '600');
+    }
+
+    &.dense {
+
+      td,
+      th {
+        font-size: .85rem;
+        padding: .5rem;
+      }
+    }
+
+    th {
+      padding: .75rem;
+      border-bottom: 2px solid mc('grey', '500');
+      color: mc('grey', '600');
+      background-color: mc('grey', '100');
+
+      @at-root .theme--dark & {
+        background-color: darken(mc('grey', '900'), 8%);
+        border-bottom-color: mc('grey', '600');
+        color: mc('grey', '500');
+      }
+
+      &:first-child {
+        border-top-left-radius: 7px;
+      }
+
+      &:last-child {
+        border-top-right-radius: 7px;
+      }
+    }
+
+    td {
+      padding: .75rem;
+    }
+
+    tr {
+      td {
+        border-bottom: 1px solid mc('grey', '300');
+        border-right: 1px solid mc('grey', '100');
+
+        @at-root .theme--dark & {
+          border-bottom-color: mc('grey', '700');
+          border-right-color: mc('grey', '800');
+        }
+
+        &:nth-child(even) {
+          background-color: mc('grey', '50');
+
+          @at-root .theme--dark & {
+            background-color: darken(mc('grey', '900'), 4%);
+          }
+        }
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+
+      &:nth-child(even) {
+        td {
+          background-color: mc('grey', '50');
+
+          @at-root .theme--dark & {
+            background-color: darken(mc('grey', '800'), 8%);
+          }
+
+          &:nth-child(even) {
+            background-color: mc('grey', '100');
+
+            @at-root .theme--dark & {
+              background-color: darken(mc('grey', '800'), 10%);
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        td {
+          border-bottom: none;
+
+          &:first-child {
+            border-bottom-left-radius: 7px;
+          }
+
+          &:last-child {
+            border-bottom-right-radius: 7px;
+          }
+        }
+      }
+    }
+  }
+
+  figure.table {
+    margin: 0;
+
+    >table {
+      background-color: #FFF;
+      margin: 0;
+      border-collapse: collapse;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, .07);
+
+      @at-root .theme--dark & {
+        background-color: darken(mc('grey', '900'), 3%);
+      }
+
+      td,
+      th {
+        border: 1px solid mc('blue-grey', '100');
+        box-shadow: inset -1px -1px 0 0 #FFF, inset 1px 0 0 #FFF;
+        padding: .5rem .75rem;
+        border-radius: 0 !important;
+
+        @at-root .theme--dark & {
+          border-color: mc('grey', '700');
+          box-shadow: inset -1px -1px 0 0 rgba(0, 0, 0, .5);
+        }
+      }
+
+      th {
+        background-color: lighten(mc('blue-grey', '50'), 1%);
+        font-weight: 700;
+        color: mc('blue-grey', '700');
+
+        @at-root .theme--dark & {
+          background-color: mc('grey', '800');
+          color: mc('grey', '400');
+        }
+      }
+
+      thead th {
+        border-bottom: 2px solid mc('blue-grey', '100');
+
+        @at-root .theme--dark & {
+          border-bottom: none;
+        }
+      }
+
+      tbody th {
+        background-color: lighten(mc('blue-grey', '50'), 4%);
+
+        @at-root .theme--dark & {
+          background-color: darken(mc('grey', '800'), 8%);
+        }
+      }
+    }
+  }
+
+  // -> Add horizontal scrollbar when table is too wide
+  .table-container {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  // ---------------------------------
+  // IMAGES
+  // ---------------------------------
+
+  img {
+    max-width: 100%;
+
+    &.align-left {
+      float: left;
+      margin: 0 1rem 1rem 0;
+    }
+
+    &.align-right {
+      float: right;
+      margin: 0 0 1rem 1rem;
+      z-index: 1;
+      position: relative;
+    }
+
+    &.align-center {
+      display: block;
+      max-width: 100%;
+      margin: auto;
+    }
+
+    &.align-abstopright {
+      position: absolute;
+      top: -90px;
+      right: 1rem;
+      height: calc(90px - 32px);
+      width: auto;
+
+      @at-root .is-rtl & {
+        left: 1rem;
+        right: initial;
+      }
+    }
+
+    &.decor-shadow {
+      box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
+    }
+
+    &.decor-outline {
+      border: 1px solid mc('grey', '400');
+    }
+
+    &.uml-diagram {
+      margin: 1rem 0;
+    }
+  }
+
+  figure.image {
+    margin: 1rem 0 0 0;
+
+    img {
+      margin: 0 auto;
+    }
+
+    figcaption {
+      padding: 4px 1rem;
+      text-align: center;
+      font-size: 12px;
+      color: mc('grey', '700');
+      background-color: mc('grey', '100');
+
+      @at-root .theme--dark & {
+        color: mc('grey', '400');
+        background-color: mc('grey', '800');
+      }
+    }
+  }
+
+  figure.image-style-align-right {
+    float: right;
+  }
+
+  figure.image-style-align-left {
+    float: left;
+  }
+
+  // ---------------------------------
+  // DETAILS
+  // ---------------------------------
+
+  details {
+    background-color: mc('grey', '50');
+    margin: 1rem 2rem;
+    border: 1px solid mc('grey', '300');
+    border-radius: 7px;
+
+    >p {
+      padding-left: 0;
+    }
+
+    >summary {
+      border-radius: 7px;
+      background-color: mc('grey', '50');
+      cursor: pointer;
+      display: list-item;
+      align-items: center;
+      padding: 0.4rem 1rem;
+      transition: background-color .4s ease;
+
+      &:focus {
+        outline: none;
+        background-color: mc('grey', '100');
+      }
+
+      >h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        width: 95%;
+        display: inline-block;
+
+        &:first-child {
+          margin-top: 0;
+        }
+
+        &:only-child::after {
+          display: none;
+        }
+      }
+    }
+
+    &[open] {
+      padding: 1rem;
+
+      >summary {
+        background-color: mc('grey', '100');
+        border-bottom: 1px solid mc('grey', '300');
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        margin: -1rem -1rem 1rem -1rem;
+      }
+    }
+
+    @at-root .theme--dark & {
+      background-color: mc('grey', '900');
+      border-color: mc('grey', '700');
+
+      >summary {
+        background-color: mc('grey', '900');
+        border-color: mc('grey', '700');
+      }
+
+      &[open]>summary {
+        background-color: lighten(mc('grey', '900'), 5%);
+      }
+    }
+
+  }
+
+  // ---------------------------------
+  // HIGHLIGHTING
+  // ---------------------------------
+
+  mark {
+    &.pen-red {
+      color: mc('red', '500');
+      background-color: initial;
+    }
+
+    &.pen-green {
+      color: mc('green', '500');
+      background-color: initial;
+    }
+
+    &.marker-blue {
+      background-color: mc('blue', '300');
+    }
+
+    &.marker-yellow {
+      background-color: mc('yellow', '300');
+    }
+
+    &.marker-pink {
+      background-color: mc('pink', '300');
+    }
+
+    &.marker-green {
+      background-color: mc('green', '300');
+    }
+  }
+
+  .mention {
+    background-color: rgba(153, 0, 48, .1);
+    color: #990030;
+
+    @at-root .theme--dark & {
+      color: mc('pink', '500');
+    }
+  }
+
+}
+
+
+
+// ---------------------------------
+// COMMENTS
+// ---------------------------------
+
+.comments {
+  &-container {
+    border-radius: 7px;
+  }
+
+  &-header {
+    color: #FFF;
+    padding: 8px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    background-color: mc('blue-grey', '500');
+    border-radius: 7px 7px 0 0;
+
+    @at-root .theme--dark & {
+      background-color: lighten(mc('blue-grey', '900'), 5%);
+    }
+  }
+
+  &-main {
+    background-color: mc('blue-grey', '50');
+    border-radius: 0 0 7px 7px;
+    padding: 20px;
+
+    @at-root .theme--dark & {
+      background-color: darken(mc('grey', '900'), 5%);
+    }
+  }
+}
+
+// ---------------
+// RTL FIXES
+// Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317
+// ---------------
+
+.is-rtl {
+  .page-col-content.is-page-header {
+    @each $size, $width in $grid-breakpoints {
+      @media (min-width: $width) {
+        @for $n from 0 through 12 {
+          &.offset-#{$size}-#{$n} {
+            margin-left: 0;
+            margin-right: ($n / 12 * 100) * 1%;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ---------------
+// PRINT OVERRIDES
+// ---------------
+
+@media print {
+
+  .nav-header,
+  .v-navigation-drawer,
+  .v-btn--fab,
+  .page-col-sd,
+  .v-tooltip__content {
+    display: none !important;
+  }
+
+  .layout {
+    display: block !important;
+  }
+
+  .page-col-content {
+    flex-basis: 100% !important;
+    flex-grow: 1 !important;
+    max-width: 100% !important;
+    margin-left: 0 !important;
+
+    >.v-toolbar {
+      border: 1px solid mc('grey', '300') !important;
+      border-radius: 7px !important;
+
+      &+.v-divider {
+        display: none !important;
+      }
+    }
+  }
+
+  .v-main {
+    padding: 0 !important;
+    font-size: 14px;
+    background-color: #FFF;
+  }
+
+  .v-main .contents {
+    color: #000;
+    background-color: #FFF;
+
+    @at-root .theme--dark & {
+      color: #000;
+    }
+
+    .prismjs {
+      box-shadow: none;
+      background-color: #FFF;
+
+      @at-root .theme--dark & {
+        background-color: #FFF;
+      }
+
+      >code {
+        color: #000;
+        box-shadow: none;
+        text-shadow: none;
+        white-space: pre-wrap !important;
+        overflow-wrap: break-word !important;
+      }
+    }
+  }
+
+  .comments-container {
+    display: none;
+  }
+
+  .page-edit-shortcuts {
+    display: none;
+  }
+}
diff --git a/client/themes/iqs/theme.yml b/client/themes/iqs/theme.yml
new file mode 100644
index 00000000..da25e8dc
--- /dev/null
+++ b/client/themes/iqs/theme.yml
@@ -0,0 +1,51 @@
+name: Default
+author: requarks.io
+site: https://wiki.requarks.io/
+version: 1.0.0
+requirements:
+  minimum: '>= 2.0.0'
+  maximum: '< 3.0.0'
+props:
+  sdPosition:
+    type: String
+    default: 'left'
+    title: Table of Contents Position
+    hint: Should the content sidebar be shown on the left or right.
+    enum:
+      - 'hidden'
+      - 'left'
+      - 'right'
+    order: 1
+    icon: mdi-border-vertical
+  showTOC:
+    type: Boolean
+    default: true
+    title: Display the Table of Contents
+    order: 2
+  showTags:
+    type: Boolean
+    default: false
+    title: Display the Page Tags
+    order: 3
+  showTags:
+    type: Boolean
+    default: false
+    title: Display the Page Author and Date
+    order: 4
+  showTags:
+    type: Boolean
+    default: false
+    title: Display the Page Rating
+    order: 5
+  showSocialBar:
+    type: Boolean
+    default: false
+    title: Display the Social Links Bar
+    order: 6
+  showEditSpeedDial:
+    type: Boolean
+    default: false
+    title: Display the Edit Speed Dial
+    hint: Shown in the lower right corner of the page.
+    order: 7
+