diff --git a/app/components/gh-editor.js b/app/components/gh-editor.js
index e66cf8178a..aca3824270 100644
--- a/app/components/gh-editor.js
+++ b/app/components/gh-editor.js
@@ -11,7 +11,8 @@ export default Component.extend({
 
     classNameBindings: [
         'isDraggedOver:-drag-over',
-        'isFullScreen:gh-editor-fullscreen'
+        'isFullScreen:gh-editor-fullscreen',
+        'isPreview:gh-editor-preview'
     ],
 
     // Public attributes
@@ -137,13 +138,17 @@ export default Component.extend({
     },
 
     actions: {
-        toggleFullScreen() {
-            this.toggleProperty('isFullScreen');
+        toggleFullScreen(isFullScreen) {
+            this.set('isFullScreen', isFullScreen);
             run.scheduleOnce('afterRender', this, this._setHeaderClass);
         },
 
-        toggleSplitScreen() {
-            this.toggleProperty('isSplitScreen');
+        togglePreview(isPreview) {
+            this.set('isPreview', isPreview);
+        },
+
+        toggleSplitScreen(isSplitScreen) {
+            this.set('isSplitScreen', isSplitScreen);
             run.scheduleOnce('afterRender', this, this._setHeaderClass);
         },
 
diff --git a/app/components/gh-markdown-editor.js b/app/components/gh-markdown-editor.js
index 872e89871f..c570e6553a 100644
--- a/app/components/gh-markdown-editor.js
+++ b/app/components/gh-markdown-editor.js
@@ -39,9 +39,10 @@ export default Component.extend({
 
     // Closure actions
     onChange() {},
-    onFullScreen() {},
+    onFullScreenToggle() {},
     onImageFilesSelected() {},
-    onSplitScreen() {},
+    onPreviewToggle() {},
+    onSplitScreenToggle() {},
     showMarkdownHelp() {},
 
     // Internal attributes
@@ -74,7 +75,14 @@ export default Component.extend({
                     title: 'Upload Image(s)'
                 },
                 '|',
-                'preview',
+                {
+                    name: 'preview',
+                    action: () => {
+                        this._togglePreview();
+                    },
+                    className: 'fa fa-eye no-disable',
+                    title: 'Toggle Preview (Cmd-P)'
+                },
                 {
                     name: 'side-by-side',
                     action: () => {
@@ -102,8 +110,9 @@ export default Component.extend({
                 }
             ],
             shortcuts: {
-                toggleSideBySide: null,
-                toggleFullScreen: null
+                toggleFullScreen: null,
+                togglePreview: null,
+                toggleSideBySide: null
             },
             status: ['words']
         };
@@ -277,6 +286,13 @@ export default Component.extend({
         this.$('input[type="file"]').click();
     },
 
+    // wrap SimpleMDE's built-in preview toggle so that we can trigger a closure
+    // action that can apply our own classes higher up in the DOM
+    _togglePreview() {
+        this.onPreviewToggle(!this._editor.isPreviewActive());
+        this._editor.togglePreview();
+    },
+
     willDestroyElement() {
         if (this.get('_isSplitScreen')) {
             this._disconnectSplitPreview();
@@ -331,7 +347,7 @@ export default Component.extend({
 
             this.set('_isFullScreen', isFullScreen);
             this._updateButtonState();
-            this.onFullScreen(isFullScreen);
+            this.onFullScreenToggle(isFullScreen);
 
             // leave split screen when exiting full screen mode
             if (!isFullScreen && this.get('_isSplitScreen')) {
@@ -366,7 +382,7 @@ export default Component.extend({
                 run.scheduleOnce('afterRender', this, this._disconnectSplitPreview);
             }
 
-            this.onSplitScreen(isSplitScreen);
+            this.onSplitScreenToggle(isSplitScreen);
 
             // go fullscreen when entering split screen mode
             if (isSplitScreen && !this.get('_isFullScreen')) {
diff --git a/app/styles/layouts/editor.css b/app/styles/layouts/editor.css
index 44f39aff5d..91867c3843 100644
--- a/app/styles/layouts/editor.css
+++ b/app/styles/layouts/editor.css
@@ -303,6 +303,11 @@
     overflow: visible !important;
 }
 
+/* prevent markdown content showing after the preview if the preview is shorter */
+.gh-editor-preview .CodeMirror-scroll {
+    display: none;
+}
+
 .gh-editor .gh-editor-title,
 .gh-editor .CodeMirror-wrap {
     max-width: 760px;
@@ -367,7 +372,8 @@
     stroke: color(var(--darkgrey) l(+15%));
 }
 
-.editor-toolbar a.disabled {
+.editor-toolbar a.disabled,
+.gh-editor-preview .editor-toolbar a:not(.no-disable) {
     pointer-events: none;
     color: lightgray !important;
 }
diff --git a/app/templates/components/gh-editor.hbs b/app/templates/components/gh-editor.hbs
index 48405ac37c..27d52d0454 100644
--- a/app/templates/components/gh-editor.hbs
+++ b/app/templates/components/gh-editor.hbs
@@ -7,6 +7,7 @@
     imageMimeTypes=imageMimeTypes
     imageExtensions=imageExtensions
     toggleFullScreen=(action "toggleFullScreen")
+    togglePreview=(action "togglePreview")
     toggleSplitScreen=(action "toggleSplitScreen")
     uploadComplete=(action "uploadComplete")
     uploadCancelled=(action "uploadCancelled")
diff --git a/app/templates/editor/edit.hbs b/app/templates/editor/edit.hbs
index f6a4a7ae28..3be68d342a 100644
--- a/app/templates/editor/edit.hbs
+++ b/app/templates/editor/edit.hbs
@@ -41,8 +41,9 @@
         mobiledoc=(readonly model.scratch)
         isFullScreen=editor.isFullScreen
         onChange=(action "updateScratch")
-        onFullScreen=(action editor.toggleFullScreen)
-        onSplitScreen=(action editor.toggleSplitScreen)
+        onFullScreenToggle=(action editor.toggleFullScreen)
+        onPreviewToggle=(action editor.togglePreview)
+        onSplitScreenToggle=(action editor.toggleSplitScreen)
         onImageFilesSelected=(action editor.uploadImages)
         showMarkdownHelp=(route-action "toggleMarkdownHelpModal")
         imageMimeTypes=editor.imageMimeTypes