diff --git a/client/components/admin.vue b/client/components/admin.vue
index bae6a6c0..57674105 100644
--- a/client/components/admin.vue
+++ b/client/components/admin.vue
@@ -125,7 +125,10 @@ export default {
   computed: {
     darkMode: get('site/dark')
   },
-  router
+  router,
+  created() {
+    this.$store.commit('page/SET_MODE', 'admin')
+  }
 }
 </script>
 
diff --git a/client/components/common/nav-header.vue b/client/components/common/nav-header.vue
index dbc451a0..3c2065c1 100644
--- a/client/components/common/nav-header.vue
+++ b/client/components/common/nav-header.vue
@@ -26,23 +26,27 @@
         v-list-tile(avatar, @click='pageNew')
           v-list-tile-avatar: v-icon(color='green') add_box
           v-list-tile-content New Page
-        v-divider.my-0
-        v-subheader Current Page
-        v-list-tile(avatar, @click='pageEdit')
-          v-list-tile-avatar: v-icon(color='indigo') edit
-          v-list-tile-content Edit
-        v-list-tile(avatar, @click='pageHistory')
-          v-list-tile-avatar: v-icon(color='indigo') history
-          v-list-tile-content History
-        v-list-tile(avatar, @click='pageSource')
-          v-list-tile-avatar: v-icon(color='indigo') code
-          v-list-tile-content View Source
-        v-list-tile(avatar, @click='pageMove')
-          v-list-tile-avatar: v-icon(color='indigo') forward
-          v-list-tile-content Move / Rename
-        v-list-tile(avatar, @click='pageDelete')
-          v-list-tile-avatar: v-icon(color='red darken-2') delete
-          v-list-tile-content Delete
+        template(v-if='path && path.length')
+          v-divider.my-0
+          v-subheader Current Page
+          v-list-tile(avatar, @click='pageView', v-if='mode !== `view`')
+            v-list-tile-avatar: v-icon(color='indigo') subject
+            v-list-tile-content View
+          v-list-tile(avatar, @click='pageEdit', v-if='mode !== `edit`')
+            v-list-tile-avatar: v-icon(color='indigo') edit
+            v-list-tile-content Edit
+          v-list-tile(avatar, @click='pageHistory', v-if='mode !== `history`')
+            v-list-tile-avatar: v-icon(color='indigo') history
+            v-list-tile-content History
+          v-list-tile(avatar, @click='pageSource', v-if='mode !== `source`')
+            v-list-tile-avatar: v-icon(color='indigo') code
+            v-list-tile-content View Source
+          v-list-tile(avatar, @click='pageMove')
+            v-list-tile-avatar: v-icon(color='indigo') forward
+            v-list-tile-content Move / Rename
+          v-list-tile(avatar, @click='pageDelete')
+            v-list-tile-avatar: v-icon(color='red darken-2') delete
+            v-list-tile-content Delete
         v-divider.my-0
         v-subheader Assets
         v-list-tile(avatar, @click='')
@@ -138,7 +142,8 @@ export default {
   computed: {
     isLoading: get('isLoading'),
     title: get('site/title'),
-    path: get('page/path')
+    path: get('page/path'),
+    mode: get('page/mode')
   },
   created() {
     if (this.hideSearch || this.dense || this.$vuetify.breakpoint.smAndDown) {
@@ -160,6 +165,9 @@ export default {
     pageNew () {
       this.newPageModal = true
     },
+    pageView () {
+      window.location.assign(`/${this.path}`)
+    },
     pageEdit () {
       window.location.assign(`/e/${this.path}`)
     },
@@ -167,7 +175,7 @@ export default {
       window.location.assign(`/h/${this.path}`)
     },
     pageSource () {
-
+      window.location.assign(`/s/${this.path}`)
     },
     pageMove () {
 
diff --git a/client/components/editor.vue b/client/components/editor.vue
index fcea3584..d5683d64 100644
--- a/client/components/editor.vue
+++ b/client/components/editor.vue
@@ -11,13 +11,6 @@
           v-icon(color='green', :left='$vuetify.breakpoint.lgAndUp') check
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ mode === 'create' ? $t('common:actions.create') : $t('common:actions.save') }}
         v-btn.mx-0(
-          outline
-          color='red'
-          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
-          )
-          v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
-          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
-        v-btn(
           outline
           color='blue'
           @click.native.stop='openModal(`properties`)'
@@ -25,6 +18,13 @@
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
+        v-btn(
+          outline
+          color='red'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown }'
+          )
+          v-icon(color='red', :left='$vuetify.breakpoint.lgAndUp') close
+          span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('common:actions.discard') }}
     v-content
       component(:is='currentEditor')
       component(:is='currentModal')
@@ -170,6 +170,8 @@ export default {
     this.$store.commit('page/SET_PATH', this.path)
     this.$store.commit('page/SET_TAGS', this.tags)
     this.$store.commit('page/SET_TITLE', this.title)
+
+    this.$store.commit('page/SET_MODE', 'edit')
   },
   mounted() {
     this.$store.set('editor/mode', this.initMode || 'create')
diff --git a/client/components/history.vue b/client/components/history.vue
index 9244f030..aef4d001 100644
--- a/client/components/history.vue
+++ b/client/components/history.vue
@@ -122,6 +122,8 @@ export default {
     this.$store.commit('page/SET_ID', this.id)
     this.$store.commit('page/SET_LOCALE', this.locale)
     this.$store.commit('page/SET_PATH', this.path)
+
+    this.$store.commit('page/SET_MODE', 'history')
   },
   methods: {
     goLive() {
diff --git a/client/components/profile.vue b/client/components/profile.vue
index 0ac591e5..d5502b98 100644
--- a/client/components/profile.vue
+++ b/client/components/profile.vue
@@ -60,7 +60,10 @@ export default {
   computed: {
     darkMode() { return siteConfig.darkMode }
   },
-  router
+  router,
+  created() {
+    this.$store.commit('page/SET_MODE', 'profile')
+  }
 }
 </script>
 
diff --git a/client/store/page.js b/client/store/page.js
index ad054451..aa4c2d9d 100644
--- a/client/store/page.js
+++ b/client/store/page.js
@@ -13,7 +13,8 @@ const state = {
   publishStartDate: '',
   tags: [],
   title: '',
-  updatedAt: ''
+  updatedAt: '',
+  mode: ''
 }
 
 export default {
diff --git a/client/themes/default/components/page.vue b/client/themes/default/components/page.vue
index 9d44ce0c..62951e1d 100644
--- a/client/themes/default/components/page.vue
+++ b/client/themes/default/components/page.vue
@@ -210,6 +210,8 @@ export default {
     this.$store.commit('page/SET_TAGS', this.tags)
     this.$store.commit('page/SET_TITLE', this.title)
     this.$store.commit('page/SET_UPDATED_AT', this.updatedAt)
+
+    this.$store.commit('page/SET_MODE', 'view')
   },
   mounted () {
     Prism.highlightAllUnder(this.$refs.container)
diff --git a/client/themes/default/scss/app.scss b/client/themes/default/scss/app.scss
index 074c0467..0b4078e2 100644
--- a/client/themes/default/scss/app.scss
+++ b/client/themes/default/scss/app.scss
@@ -88,9 +88,9 @@
   }
 
   code {
-    background-color: rgba(mc('pink', '500'), .1);
+    background-color: rgba(mc('indigo', '50'), 1);
     padding: 0 5px;
-    color: mc('pink', '800');
+    color: mc('indigo', '800');
     font-family: 'Source Code Pro', monospace;
     font-weight: normal;
     font-size: 1rem;