diff --git a/client/themes/tyclipso/components/nav-footer.vue b/client/themes/tyclipso/components/nav-footer.vue
new file mode 100644
index 00000000..08e44fcd
--- /dev/null
+++ b/client/themes/tyclipso/components/nav-footer.vue
@@ -0,0 +1,61 @@
+<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='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', ref='nofollow') Wiki.js]
+</template>
+
+<script>
+import { get } from 'vuex-pathify'
+
+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'),
+    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/tyclipso/components/nav-sidebar.vue b/client/themes/tyclipso/components/nav-sidebar.vue
new file mode 100644
index 00000000..cb5ec0b8
--- /dev/null
+++ b/client/themes/tyclipso/components/nav-sidebar.vue
@@ -0,0 +1,238 @@
+<template lang="pug">
+  div
+    .pa-3.d-flex(v-if='navMode === `MIXED`', :class='$vuetify.theme.dark ? `grey darken-5` : `blue darken-3`')
+      v-btn(
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='min-width:0;'
+        @click='goHome'
+        :aria-label='$t(`common:header.home`)'
+        )
+        v-icon(size='20') mdi-home
+      v-btn.ml-3(
+        v-if='currentMode === `custom`'
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='flex: 1 1 100%;'
+        @click='switchMode(`browse`)'
+        )
+        v-icon(left) mdi-file-tree
+        .body-2.text-none {{$t('common:sidebar.browse')}}
+      v-btn.ml-3(
+        v-else-if='currentMode === `browse`'
+        depressed
+        :color='$vuetify.theme.dark ? `grey darken-4` : `blue darken-2`'
+        style='flex: 1 1 100%;'
+        @click='switchMode(`custom`)'
+        )
+        v-icon(left) mdi-navigation
+        .body-2.text-none {{$t('common:sidebar.mainMenu')}}
+    v-divider
+    //-> Custom Navigation
+    v-list.py-2(v-if='currentMode === `custom`', dense, :class='color', :dark='dark')
+      template(v-for='item of items')
+        v-list-item(
+          v-if='item.k === `link`'
+          :href='item.t'
+          :target='item.y === `externalblank` ? `_blank` : `_self`'
+          :rel='item.y === `externalblank` ? `noopener` : ``'
+          )
+          v-list-item-avatar(size='24', tile)
+            v-icon(v-if='item.c.match(/fa[a-z] fa-/)', size='19') {{ item.c }}
+            v-icon(v-else) {{ item.c }}
+          v-list-item-title {{ item.l }}
+        v-divider.my-2(v-else-if='item.k === `divider`')
+        v-subheader.pl-4(v-else-if='item.k === `header`') {{ item.l }}
+    //-> Browse
+    v-list.py-2(v-else-if='currentMode === `browse`', dense, :class='color', :dark='dark')
+      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-avatar(size='18', :style='`padding-left: ` + (idx * 8) + `px; width: auto; margin: 0 5px 0 0;`')
+            v-icon(small) mdi-folder-open
+          v-list-item-title {{ item.title }}
+        v-divider.mt-2
+        v-list-item.mt-2(v-if='currentParent.pageId > 0', :href='`/` + currentParent.path', :key='`directorypage-` + currentParent.id', :input-value='path === currentParent.path')
+          v-list-item-avatar(size='24')
+            v-icon mdi-text-box
+          v-list-item-title {{ currentParent.title }}
+        v-subheader.pl-4 {{$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-icon mdi-folder
+          v-list-item-title {{ item.title }}
+        v-list-item(v-else, :href='`/` + item.locale + `/` + item.path', :key='`childpage-` + item.id', :input-value='path === item.path')
+          v-list-item-avatar(size='24')
+            v-icon mdi-text-box
+          v-list-item-title {{ 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: 'primary'
+    },
+    dark: {
+      type: Boolean,
+      default: true
+    },
+    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/tyclipso/components/page.vue b/client/themes/tyclipso/components/page.vue
new file mode 100644
index 00000000..8d5b222d
--- /dev/null
+++ b/client/themes/tyclipso/components/page.vue
@@ -0,0 +1,659 @@
+<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(no-gutters, align-content='center', style='height: 90px;')
+          v-col.page-col-content.is-page-header(offset-xl='2', offset-lg='3', style='margin-top: auto; margin-bottom: auto;', :class='$vuetify.rtl ? `pr-4` : `pl-4`')
+            .headline.grey--text(:class='$vuetify.theme.dark ? `text--lighten-2` : `text--darken-3`') {{title}}
+            .caption.grey--text.text--darken-1 {{description}}
+      v-divider
+      v-container.pl-5.pt-4(fluid, grid-list-xl)
+        v-layout(row)
+          v-flex.page-col-sd(lg3, xl2, v-if='$vuetify.breakpoint.lgAndUp')
+            v-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.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.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.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')}}
+                .body-2.grey--text(:class='$vuetify.theme.dark ? `` : `text--darken-3`') {{ authorName }}
+                .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(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, xl10)
+            v-tooltip(:right='$vuetify.rtl', :left='!$vuetify.rtl', v-if='hasAnyPagePermissions')
+              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='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'
+
+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
+    },
+    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
+    }
+  },
+  data() {
+    return {
+      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'),
+    rating: {
+      get () {
+        return 3.5
+      },
+      set (val) {
+
+      }
+    },
+    breadcrumbs() {
+      return [{ path: '/', name: 'Home' }].concat(_.reduce(this.path.split('/'), (result, value, key) => {
+        result.push({
+          path: _.get(_.last(result), 'path', `/${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())
+    },
+    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')
+  },
+  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/updatedAt', this.updatedAt)
+    if (this.effectivePermissions) {
+      this.$store.set('page/effectivePermissions', JSON.parse(Buffer.from(this.effectivePermissions, '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(window.location.hash, this.scrollOpts)
+        })
+      } else {
+        window.addEventListener('load', () => {
+          this.$vuetify.goTo(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.target.hash), this.scrollOpts)
+        }
+      })
+    })
+  },
+  methods: {
+    goHome () {
+      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')
+    },
+    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;
+}
+
+</style>
diff --git a/client/themes/tyclipso/components/tabset.vue b/client/themes/tyclipso/components/tabset.vue
new file mode 100644
index 00000000..0b240c70
--- /dev/null
+++ b/client/themes/tyclipso/components/tabset.vue
@@ -0,0 +1,151 @@
+<template lang="pug">
+  .tabset.elevation-2
+    ul.tabset-tabs(ref='tabs')
+      slot(name='tabs')
+    .tabset-content(ref='content')
+      slot(name='content')
+</template>
+
+<script>
+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'
+        } else {
+          node.className = ''
+        }
+      })
+      this.$refs.content.childNodes.forEach((node, idx) => {
+        if (idx === this.currentTab) {
+          node.className = 'tabset-panel is-active'
+        } else {
+          node.className = 'tabset-panel'
+        }
+      })
+    }
+  },
+  mounted () {
+    this.setActiveTab()
+    this.$refs.tabs.childNodes.forEach((node, idx) => {
+      node.addEventListener('click', ev => {
+        this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target)
+      })
+    })
+  }
+}
+</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;
+        color: 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/tyclipso/js/app.js b/client/themes/tyclipso/js/app.js
new file mode 100644
index 00000000..34efb224
--- /dev/null
+++ b/client/themes/tyclipso/js/app.js
@@ -0,0 +1 @@
+/* THEME SPECIFIC JAVASCRIPT */
diff --git a/client/themes/tyclipso/scss/app.scss b/client/themes/tyclipso/scss/app.scss
new file mode 100644
index 00000000..f49873b0
--- /dev/null
+++ b/client/themes/tyclipso/scss/app.scss
@@ -0,0 +1,1005 @@
+/* THEME SPECIFIC STYLES */
+
+.v-main .contents {
+  color: mc('grey', '800');
+  padding: .5rem 0 50px;
+  position: relative;
+
+  > div > *:first-child {
+    margin-top: 0;
+  }
+
+  @at-root .theme--dark & {
+    color: mc('grey', '300');
+  }
+
+  // ---------------------------------
+  // 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');
+    }
+  }
+
+  // ---------------------------------
+  // HEADERS
+  // ---------------------------------
+
+  h1, h2, h3, h4, h5, h6 {
+    position: relative;
+
+    &: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;
+    }
+  }
+
+  h1 {
+    padding: 0;
+    color: mc('blue', '800');
+    margin-top: 2rem;
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '300');
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
+      border-radius: 3px;
+
+      @at-root .theme--dark & {
+        background: linear-gradient(to right, mc('blue', '300') 0%, mc('blue', '500') 10%, rgba(mc('blue', '900'), 0) 100%);
+      }
+
+      @at-root .is-rtl & {
+        background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
+      }
+      @at-root .theme--dark.is-rtl & {
+        background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
+      }
+    }
+  }
+  h2 {
+    margin: 1rem 0 0 0;
+    color: mc('grey', '800');
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '400');
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));
+
+      @at-root .theme--dark & {
+        background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
+      }
+
+      @at-root .is-rtl & {
+        background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
+      }
+      @at-root .theme--dark.is-rtl & {
+        background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
+      }
+    }
+  }
+  h3 {
+    margin: 8px 0 0 0;
+    color: mc('grey', '700');
+    position: relative;
+
+    @at-root .theme--dark & {
+      color: mc('grey', '600');
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 90%);
+    }
+  }
+  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');
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 70%);
+    }
+  }
+  h5 {
+    &::after {
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 50%);
+    }
+  }
+  h6 {
+    &::after {
+      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 30%);
+    }
+  }
+
+  // ---------------------------------
+  // 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;
+  }
+
+  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 {
+        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 {
+        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 {
+        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 {
+        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');
+      }
+    }
+  }
+
+  // ---------------------------------
+  // 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) {
+    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;
+      }
+    }
+  }
+
+  // ---------------------------------
+  // 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;
+    svg:first-child {
+      direction: ltr;
+    }
+  }
+
+  // ---------------------------------
+  // TASK LISTS
+  // ---------------------------------
+
+  .task-list-item {
+    position: relative;
+    list-style-type: none;
+
+    &-checkbox[disabled] {
+      display: none;
+
+      & + label {
+        padding-left: 1.5rem;
+      }
+
+      & + label::before {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        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] + label::before  {
+        content: '✓';
+      }
+    }
+
+    .contains-task-list {
+      padding: .5rem 0 0 1.5rem;
+    }
+  }
+
+  // ---------------------------------
+  // TABLES
+  // ---------------------------------
+
+  table {
+    margin: .5rem 1.75rem;
+    border-spacing: 0;
+
+    th {
+      padding: .75rem;
+      border-bottom: 2px solid mc('grey', '500');
+      color: mc('grey', '600');
+    }
+
+    td {
+      padding: .75rem;
+    }
+
+    tr {
+      td {
+        border-bottom: 1px solid mc('grey', '200');
+      }
+    }
+  }
+
+  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;
+
+        @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%);
+        }
+      }
+    }
+  }
+
+  // ---------------------------------
+  // 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;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      padding: 0 1rem;
+      transition: background-color .4s ease;
+
+      &:focus {
+        outline: none;
+        background-color: mc('grey', '100');
+      }
+    }
+
+    &[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;
+      }
+    }
+  }
+
+  .comments-container {
+    display: none;
+  }
+}
diff --git a/client/themes/tyclipso/theme.yml b/client/themes/tyclipso/theme.yml
new file mode 100644
index 00000000..7f3f42d4
--- /dev/null
+++ b/client/themes/tyclipso/theme.yml
@@ -0,0 +1,51 @@
+name: Tyclipso
+author: Carl Richter | Tyclipso GmbH
+site: https://tyclipso.net/
+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: true
+    title: Display the Page Tags
+    order: 3
+  showTags:
+    type: Boolean
+    default: true
+    title: Display the Page Author and Date
+    order: 4
+  showTags:
+    type: Boolean
+    default: true
+    title: Display the Page Rating
+    order: 5
+  showSocialBar:
+    type: Boolean
+    default: true
+    title: Display the Social Links Bar
+    order: 6
+  showEditSpeedDial:
+    type: Boolean
+    default: true
+    title: Display the Edit Speed Dial
+    hint: Shown in the lower right corner of the page.
+    order: 7
+
diff --git a/client/themes/tyclipso/thumbnail.png b/client/themes/tyclipso/thumbnail.png
new file mode 100644
index 00000000..489e3f83
Binary files /dev/null and b/client/themes/tyclipso/thumbnail.png differ