diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 81cdf06b3abb49fdc0d969affdf67fe5e72b3492..89ba5889dd06b7ad4ca9073c4e9c8c930f161aa1 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -4,9 +4,11 @@ import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
+import RepoPreview from './repo_preview.vue';
 import RepoMixin from '../mixins/repo_mixin';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
 import Store from '../stores/repo_store';
+import RepoHelper from '../helpers/repo_helper';
 import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
 
 export default {
@@ -20,6 +22,11 @@ export default {
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
     'repo-commit-section': RepoCommitSection,
     'popup-dialog': PopupDialog,
+    'repo-preview': RepoPreview,
+  },
+
+  mounted() {
+    RepoHelper.getContent().catch(RepoHelper.loadingError);
   },
 
   methods: {
@@ -31,6 +38,8 @@ export default {
       this.dialog.open = false;
       this.dialog.status = status;
     },
+
+    toggleBlobView: Store.toggleBlobView,
   },
 };
 </script>
@@ -40,8 +49,8 @@ export default {
   <repo-sidebar/><div class="panel-right" :class="{'edit-mode': editMode}">
     <repo-tabs/>
     <repo-file-buttons/>
-    <repo-editor/>
-    <repo-binary-viewer/>
+    <component :is="currentBlobView"></component>
+    <!-- <repo-binary-viewer/> soon™ -->
   </div>
   <repo-commit-section/>
   <popup-dialog
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/repo/components/repo_edit_button.vue
index 1e70f911a84b4e7089f8db3abc6465db88d9e753..2616ef6c7e8accf74c6b029eee413558be02e2e7 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/repo/components/repo_edit_button.vue
@@ -21,14 +21,15 @@ export default {
         return;
       }
       this.editMode = !this.editMode;
+      Store.toggleBlobView();
     },
   },
 }
 </script>
 
 <template>
-<a href="#" @click.prevent="editClicked" v-cloak v-if="isCommitable">
+<button class="btn btn-default" @click.prevent="editClicked" v-cloak v-if="isCommitable" :disabled="binary">
   <i :class="buttonIcon"></i>
   <span>{{buttonLabel}}</span>
-</a>
+</button>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue
index 97b6172353e63551727ffeca8f2f6b5acadac10f..aa0f50f6c14f04100c7856a2c2f85f6717bdec42 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/repo/components/repo_editor.vue
@@ -1,29 +1,34 @@
 <script>
 /* global monaco */
 import Store from '../stores/repo_store';
+import Service from '../services/repo_service';
 import Helper from '../helpers/repo_helper';
 
 const RepoEditor = {
   data: () => Store,
 
   mounted() {
-    const monacoInstance = this.monaco.editor.create(this.$el, {
-      model: null,
-      readOnly: true,
-      contextmenu: false,
-    });
+    Service.getRaw(this.activeFile.raw_path)
+    .then((rawResponse) => {
+      Store.blobRaw = rawResponse.data;
+
+      const monacoInstance = this.monaco.editor.create(this.$el, {
+        model: null,
+        readOnly: true,
+        contextmenu: false,
+      });
 
-    Store.monacoInstance = monacoInstance;
+      Store.monacoInstance = monacoInstance;
 
-    this.addMonacoEvents();
+      this.addMonacoEvents();
 
-    Helper.getContent().then(() => {
       const languages = this.monaco.languages.getLanguages();
       const languageID = Helper.getLanguageIDForFile(this.activeFile, languages);
       this.showHide();
       const newModel = this.monaco.editor.createModel(this.blobRaw, languageID);
 
       this.monacoInstance.setModel(newModel);
+
     }).catch(Helper.loadingError);
   },
 
@@ -62,14 +67,6 @@ const RepoEditor = {
     },
 
     editMode() {
-      const readOnly = !this.editMode;
-
-      Store.readOnly = readOnly;
-
-      this.monacoInstance.updateOptions({
-        readOnly,
-      });
-
       if (this.editMode) {
         $('.project-refs-form').addClass('disabled');
         $('.fa-long-arrow-right').show();
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5e6c850c9ae08930158119d359a9d72385fc5ba0
--- /dev/null
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -0,0 +1,11 @@
+<script>
+import RepoStore from '../stores/repo_store';
+
+export default {
+  data: () => RepoStore,
+}
+</script>
+
+<template>
+<div v-html="activeFile.html"></div>
+</template>
diff --git a/app/assets/javascripts/repo/helpers/repo_helper.js b/app/assets/javascripts/repo/helpers/repo_helper.js
index f27f1d3426d4277a318108933120f2989ed23c5c..839167b09bcf4385c6fc3bda310666b71c860ffc 100644
--- a/app/assets/javascripts/repo/helpers/repo_helper.js
+++ b/app/assets/javascripts/repo/helpers/repo_helper.js
@@ -160,23 +160,20 @@ const RepoHelper = {
           Store.binaryMimeType = data.mime_type;
           // file might be undefined
           RepoHelper.setBinaryDataAsBase64(data);
-          data.binary = true;
-        } else {
+          const rawUrl = RepoHelper.getRawURLFromBlobURL(file.url || Service.url);
+          RepoHelper.setBinaryDataAsBase64(rawUrl, data);
+          Store.setViewToPreview();
+        } else if (!Store.isPreviewView()) {
           Service.getRaw(data.raw_path)
-          .then(response => {
-            Store.blobRaw = response.data;
-          })
-          // Store.blobRaw = data.plain;
-          data.binary = false;
-        }
-
-        if (!file.url) file.url = location.pathname;
+            .then((rawResponse) => {
+              Store.blobRaw = rawResponse.data;
+              data.plain = rawResponse.data;
 
-        data.url = file.url;
-        data.newContent = '';
+              RepoHelper.setFile(data, file);
+            }).catch(RepoHelper.loadingError);
+        }
 
-        Store.addToOpenedFiles(data);
-        Store.setActiveFiles(data);
+        if (Store.isPreviewView()) RepoHelper.setFile(data, file);
 
         // if the file tree is empty
         if (Store.files.length === 0) {
@@ -192,8 +189,18 @@ const RepoHelper = {
         Store.addFilesToDirectory(file, Store.files, newDirectory);
         Store.prevURL = Service.blobURLtoParentTree(Service.url);
       }
-    })
-    .catch(RepoHelper.loadingError);
+    }).catch(RepoHelper.loadingError);
+  },
+
+  setFile(data, file) {
+    const newFile = data;
+
+    newFile.url = file.url || location.pathname;
+    newFile.url = file.url;
+    newFile.newContent = '';
+
+    Store.addToOpenedFiles(newFile);
+    Store.setActiveFiles(newFile);
   },
 
   toFA(icon) {
diff --git a/app/assets/javascripts/repo/services/repo_service.js b/app/assets/javascripts/repo/services/repo_service.js
index dc81b8bf618aa77c38c7aceff2ac10243ad2b589..6cc8321deb5d940986b7f3433c53abd9d3e65f31 100644
--- a/app/assets/javascripts/repo/services/repo_service.js
+++ b/app/assets/javascripts/repo/services/repo_service.js
@@ -19,7 +19,9 @@ const RepoService = {
   },
 
   getRaw(url) {
-    return axios.get(url);
+    return axios.get(url, {
+      transformResponse: [res => res],
+    });
   },
 
   buildParams(url = this.url) {
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
index dbb2f719d32bf8bd60964379902391cc2927a02c..512bda4adb1febeda572cf4b9447708730c34e07 100644
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ b/app/assets/javascripts/repo/stores/repo_store.js
@@ -20,6 +20,7 @@ const RepoStore = {
   submodules: [],
   blobRaw: '',
   blobRendered: '',
+  currentBlobView: 'repo-preview',
   openedFiles: [],
   tabSize: 100,
   defaultTabSize: 100,
@@ -211,10 +212,22 @@ const RepoStore = {
     currentFile.newContent = contents;
   },
 
+  toggleBlobView() {
+    RepoStore.currentBlobView = RepoStore.isPreviewView() ? 'repo-editor' : 'repo-preview';
+  },
+
+  setViewToPreview() {
+    RepoStore.currentBlobView = 'repo-preview';
+  },
+
   // getters
 
   isActiveFile(file) {
     return file && file.url === RepoStore.activeFile.url;
   },
+
+  isPreviewView() {
+    return RepoStore.currentBlobView === 'repo-preview';
+  },
 };
 export default RepoStore;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 8eaf710e346759109c856a542c59f350ab82a0f9..24413e82ffc0cef369110095ec0f6026699e50a1 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -38,6 +38,10 @@
   @include truncate(250px);
 }
 
+#editable-mode {
+  display: inline-block;
+}
+
 .tree-content-holder {
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
diff --git a/app/views/shared/repo/_editable_mode.html.haml b/app/views/shared/repo/_editable_mode.html.haml
index 2946afa1b0de377dbad98d3bef875d9f020fe877..a265352cd81ac22a23fdea49acf2b2faa232a20b 100644
--- a/app/views/shared/repo/_editable_mode.html.haml
+++ b/app/views/shared/repo/_editable_mode.html.haml
@@ -1,2 +1,2 @@
-%a.btn.btn-default#editable-mode
+#editable-mode
   %repo-edit-button