diff --git a/ayanova/src/components/wiki-control.vue b/ayanova/src/components/wiki-control.vue
index 740c4533..656838e0 100644
--- a/ayanova/src/components/wiki-control.vue
+++ b/ayanova/src/components/wiki-control.vue
@@ -3,96 +3,63 @@
     <span class="v-label v-label--active theme--light">
       Wiki
     </span>
-    <div>
-      <v-btn x-large icon @click="wikiVisible = !wikiVisible">
-        <v-icon>{{ visibleIcon() }}</v-icon>
-      </v-btn>
-    </div>
-
-    <v-sheet v-if="wikiVisible" elevation="2" class="aywiki pa-2 pa-sm-6 mt-2">
-      <v-btn
-        :color="!!editMode ? 'secondary' : false"
-        x-large
-        icon
-        v-if="canEdit"
-        text
-        @click="editMode = !editMode"
-      >
-        <v-icon>fa-edit</v-icon></v-btn
-      >
-      <div v-if="!editMode" v-html="compiledOutput()"></div>
-      <div v-if="editMode">
-        <template v-if="tabView">
-          <v-tabs>
-            <v-tab>Edit</v-tab>
-            <v-tab>View</v-tab>
-            <v-tab-item>
-              <div>
-                <v-btn tile> <v-icon>fa-bold</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-italic</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-strikethrough</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-heading</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-minus</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-quote-left</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-list-ol</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-check-square</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-table</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-link</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-image</v-icon></v-btn>
-
-                <v-btn tile> <v-icon>fa-code</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-square-full</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-columns</v-icon></v-btn>
-              </div>
-              <v-textarea v-model="value" auto-grow></v-textarea
-            ></v-tab-item>
-            <v-tab-item
-              ><div class="aywiki" v-html="compiledOutput()"></div
-            ></v-tab-item>
-          </v-tabs>
-        </template>
-        <template v-else>
-          <v-row>
-            <v-col cols="6">
-              <div>
-                <v-btn elevation="0" tile> <v-icon>fa-bold</v-icon></v-btn>
-                <v-btn elevation="0" tile> <v-icon>fa-italic</v-icon></v-btn>
-                <v-btn elevation="0" tile> <v-icon>fa-strikethrough</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-heading</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-minus</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-quote-left</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-list-ul</v-icon></v-btn>
-                <v-btn tile outlined> <v-icon>fa-list-ol</v-icon></v-btn>
-                <v-btn tile outlined> <v-icon>fa-check-square</v-icon></v-btn>
-                <v-btn tile outlined> <v-icon>fa-table</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-link</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-image</v-icon></v-btn>
-
-                <v-btn tile> <v-icon>fa-code</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-square-full</v-icon></v-btn>
-                <v-btn tile> <v-icon>fa-columns</v-icon></v-btn>
-              </div>
-              <v-textarea v-model="value" auto-grow></v-textarea>
-            </v-col>
-            <v-col cols="6">
-              <div class="aywiki" v-html="compiledOutput()"></div>
-            </v-col>
-          </v-row>
-        </template>
-      </div>
+    <v-btn tile @click="switchView()">
+      <v-icon left>switchViewIcon()</v-icon>View</v-btn
+    >
+    <v-sheet
+      v-if="currentView != 0"
+      elevation="2"
+      class="aywiki pa-2 pa-sm-6 mt-2"
+    >
+      <v-row>
+        <!-- DESIGNER -->
+        <v-col
+          v-if="canEdit"
+          v-show="showDesigner()"
+          :cols="currentView == 1 ? 6 : 12"
+        >
+          <div>
+            <v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
+            <v-btn depressed tile class="ml-1">
+              <v-icon>fa-minus</v-icon></v-btn
+            >
+            <v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
+            <v-btn depressed tile class="ml-1">
+              <v-icon>fa-table</v-icon></v-btn
+            >
+            <v-btn depressed tile> <v-icon>fa-link</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
+            <v-btn depressed tile class="ml-1"> <v-icon>fa-code</v-icon></v-btn>
+            <v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
+          </div>
+          <v-textarea v-model="value" auto-grow></v-textarea>
+        </v-col>
+        <!-- WIKI -->
+        <v-col v-show="showWiki()" :cols="currentView == 1 ? 6 : 12">
+          <div class="aywiki" v-html="compiledOutput()"></div>
+        </v-col>
+      </v-row>
     </v-sheet>
   </div>
 </template>
 <script>
 import marked from "marked";
 import DOMPurify from "dompurify";
+const HIDDEN_VIEW = 0;
+const SPLIT_VIEW = 1;
+const WIKI_VIEW = 2;
+const DESIGN_VIEW = 3;
+
 export default {
   data() {
     return {
-      wikiVisible: true,
-      editMode: true,
-      tabView: false
+      currentView: HIDDEN_VIEW
     };
   },
   props: {
@@ -100,6 +67,64 @@ export default {
     canEdit: Boolean
   },
   methods: {
+    switchViewIcon() {
+      //return the icon that indicates what it will change to if you click it
+      //mirror of switchview below
+
+      if (!this.canEdit) {
+        if (this.currentView == HIDDEN_VIEW) {
+          return "fa-eye";
+        } else {
+          return "fa-eye-slash";
+        }
+        return;
+      }
+
+      switch (this.currentView) {
+        case HIDDEN_VIEW:
+          return "fa-eye";
+        case WIKI_VIEW:
+          return "fa-columns";
+        case SPLIT_VIEW:
+          return "fa-feather";
+        case DESIGN_VIEW:
+          return "fa-eye";
+      }
+    },
+    showWiki() {
+      return this.currentView == WIKI_VIEW || this.currentView == SPLIT_VIEW;
+    },
+    showDesigner() {
+      return this.currentView == DESIGN_VIEW || this.currentView == SPLIT_VIEW;
+    },
+    switchView() {
+      //if user can't edit then cycle between hidden and wiki view
+      if (!this.canEdit) {
+        if (this.currentView == HIDDEN_VIEW) {
+          this.currentView = WIKI_VIEW;
+        } else {
+          this.currentView = HIDDEN_VIEW;
+        }
+        return;
+      }
+      //user can edit so switch OUT of hidden view but never into it
+      //and cycle between design, split and wiki views only
+      //never goes into hidden
+      switch (this.currentView) {
+        case HIDDEN_VIEW:
+          this.currentView = WIKI_VIEW;
+          break;
+        case WIKI_VIEW:
+          this.currentView = SPLIT_VIEW;
+          break;
+        case SPLIT_VIEW:
+          this.currentView = DESIGN_VIEW;
+          break;
+        case DESIGN_VIEW:
+          this.currentView = WIKI_VIEW;
+          break;
+      }
+    },
     visibleIcon() {
       return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
     },
@@ -115,7 +140,7 @@ todo:
 try to make view without using tab control
   - user picks view in toolbar from choices of split, design or result view and toggles when they select these choices
 
-
+Add "View" translation key
 Show/hide/edit control
 eyeball icon like password reveal
 flag as dirty when edited