diff --git a/.gitignore b/.gitignore
index 17106c372..561d888d7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,4 @@ node_modules
 /lib/jekyll-admin/public
 *.gem
 .DS_Store
+/vendor/
\ No newline at end of file
diff --git a/spec/fixtures/site/page.md b/spec/fixtures/site/page.md
index c631b3a37..2c67541d9 100644
--- a/spec/fixtures/site/page.md
+++ b/spec/fixtures/site/page.md
@@ -3,3 +3,11 @@ foo: bar
 ---
 
 # Test Page
+
+test
+
+test
+
+test
+
+toto
diff --git a/src/components/PreviewPanel.js b/src/components/PreviewPanel.js
new file mode 100644
index 000000000..8bc4ee4ab
--- /dev/null
+++ b/src/components/PreviewPanel.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+export function PreviewPanel({ previewUrl }) {
+  // Note : side effect for preview button, layout, and doctitle class
+  return (
+    <div className="preview-panel">
+      <div className="header">
+        <button
+          type="button"
+          className="btn btn-light btn-close"
+          aria-label="Close"
+          onClick={() =>
+            document.getElementById('doctitle').classList.remove('preview')
+          }
+        >
+          ╳
+        </button>
+        <h3 className="title">Preview</h3>
+        <button
+          type="button"
+          className="btn btn-light btn-refresh"
+          aria-label="Refresh"
+          onClick={() => {
+            var iframe = document.getElementById('preview-iframe');
+            iframe.src = iframe.src;
+          }}
+        >
+          ⭯
+        </button>
+      </div>
+      <iframe id="preview-iframe" src={previewUrl} className="preview-page" />
+    </div>
+  );
+}
+
+export function PreviewButton({}) {
+  return (
+    <button
+      className="btn btn-active btn-view btn-fat"
+      onClick={() =>
+        document.getElementById('doctitle').classList.add('preview')
+      }
+    >
+      Side Preview
+    </button>
+  );
+}
diff --git a/src/containers/views/DocumentEdit.js b/src/containers/views/DocumentEdit.js
index abd24bc5d..b545e6133 100644
--- a/src/containers/views/DocumentEdit.js
+++ b/src/containers/views/DocumentEdit.js
@@ -21,6 +21,7 @@ import { clearErrors } from '../../ducks/utils';
 import { preventDefault, getDocumentTitle } from '../../utils/helpers';
 import { ADMIN_PREFIX } from '../../constants';
 
+import { PreviewButton, PreviewPanel } from '../../components/PreviewPanel';
 import translations from '../../translations';
 const { getLeaveMessage, getDeleteMessage, getNotFoundMessage } = translations;
 
@@ -123,44 +124,48 @@ export class DocumentEdit extends Component {
 
     return (
       <DocumentTitle title={document_title}>
-        <HotKeys handlers={keyboardHandlers} className="single">
+        <HotKeys handlers={keyboardHandlers} className="single" id="doctitle">
           {errors.length > 0 && <Errors errors={errors} />}
 
-          <div className="content-header">
-            <Breadcrumbs type={collection} splat={directory} />
-          </div>
+          <div className="edit-panel">
+            <div className="content-header">
+              <Breadcrumbs type={collection} splat={directory} />
+            </div>
 
-          <div className="content-wrapper">
-            <MarkdownPageBody
-              type={collection}
-              path={name}
-              title={title}
-              body={raw_content}
-              updatePath={updatePath}
-              updateTitle={updateTitle}
-              updateBody={updateBody}
-              onSave={this.handleClickSave}
-              metafields={{ title, path: name, raw_content, ...front_matter }}
-              staticmetafields={front_matter_defaults}
-            />
-            <div className="content-side">
-              <Button
-                onClick={this.handleClickSave}
-                type="save"
-                active={fieldChanged}
-                triggered={updated}
-                block
-              />
-              <Button to={http_url} type="view" active block />
-              <Splitter />
-              <Button
-                onClick={this.handleClickDelete}
-                type="delete"
-                active
-                block
+            <div className="content-wrapper">
+              <MarkdownPageBody
+                type={collection}
+                path={name}
+                title={title}
+                body={raw_content}
+                updatePath={updatePath}
+                updateTitle={updateTitle}
+                updateBody={updateBody}
+                onSave={this.handleClickSave}
+                metafields={{ title, path: name, raw_content, ...front_matter }}
+                staticmetafields={front_matter_defaults}
               />
+              <div className="content-side">
+                <Button
+                  onClick={this.handleClickSave}
+                  type="save"
+                  active={fieldChanged}
+                  triggered={updated}
+                  block
+                />
+                <Button to={http_url} type="view" active block />
+                <PreviewButton />
+                <Splitter />
+                <Button
+                  onClick={this.handleClickDelete}
+                  type="delete"
+                  active
+                  block
+                />
+              </div>
             </div>
           </div>
+          <PreviewPanel previewUrl={http_url} />
         </HotKeys>
       </DocumentTitle>
     );
diff --git a/src/containers/views/DraftEdit.js b/src/containers/views/DraftEdit.js
index ed4546d25..b6e8becf7 100644
--- a/src/containers/views/DraftEdit.js
+++ b/src/containers/views/DraftEdit.js
@@ -23,6 +23,7 @@ import { clearErrors } from '../../ducks/utils';
 import { preventDefault, getDocumentTitle } from '../../utils/helpers';
 import { ADMIN_PREFIX } from '../../constants';
 
+import { PreviewButton, PreviewPanel } from '../../components/PreviewPanel';
 import translations from '../../translations';
 const {
   getLeaveMessage,
@@ -143,49 +144,54 @@ export class DraftEdit extends Component {
 
     return (
       <DocumentTitle title={document_title}>
-        <HotKeys handlers={keyboardHandlers} className="single">
+        <HotKeys handlers={keyboardHandlers} className="single" id="doctitle">
           {errors.length > 0 && <Errors errors={errors} />}
-          <div className="content-header">
-            <Breadcrumbs type="drafts" splat={directory} />
-          </div>
 
-          <div className="content-wrapper">
-            <MarkdownPageBody
-              type="drafts"
-              path={name}
-              title={title}
-              body={raw_content}
-              updatePath={updatePath}
-              updateBody={updateBody}
-              updateTitle={updateTitle}
-              onSave={this.handleClickSave}
-              metafields={{ title, raw_content, path: name, ...front_matter }}
-              staticmetafields={front_matter_defaults}
-            />
-            <div className="content-side">
-              <Button
-                onClick={this.handleClickSave}
-                type="save"
-                active={fieldChanged}
-                triggered={updated}
-                block
-              />
-              <Button to={http_url} type="view" active block />
-              <Splitter />
-              <Button
-                onClick={() => this.handleClickPublish(path)}
-                type="publish"
-                active
-                block
-              />
-              <Button
-                onClick={() => this.handleClickDelete(name)}
-                type="delete"
-                active
-                block
+          <div className="edit-panel">
+            <div className="content-header">
+              <Breadcrumbs type="drafts" splat={directory} />
+            </div>
+
+            <div className="content-wrapper">
+              <MarkdownPageBody
+                type="drafts"
+                path={name}
+                title={title}
+                body={raw_content}
+                updatePath={updatePath}
+                updateBody={updateBody}
+                updateTitle={updateTitle}
+                onSave={this.handleClickSave}
+                metafields={{ title, raw_content, path: name, ...front_matter }}
+                staticmetafields={front_matter_defaults}
               />
+              <div className="content-side">
+                <Button
+                  onClick={this.handleClickSave}
+                  type="save"
+                  active={fieldChanged}
+                  triggered={updated}
+                  block
+                />
+                <Button to={http_url} type="view" active block />
+                <PreviewButton />
+                <Splitter />
+                <Button
+                  onClick={() => this.handleClickPublish(path)}
+                  type="publish"
+                  active
+                  block
+                />
+                <Button
+                  onClick={() => this.handleClickDelete(name)}
+                  type="delete"
+                  active
+                  block
+                />
+              </div>
             </div>
           </div>
+          <PreviewPanel previewUrl={http_url} />
         </HotKeys>
       </DocumentTitle>
     );
diff --git a/src/containers/views/PageEdit.js b/src/containers/views/PageEdit.js
index cb23a6da9..68eb957ed 100644
--- a/src/containers/views/PageEdit.js
+++ b/src/containers/views/PageEdit.js
@@ -18,6 +18,7 @@ import { preventDefault, getDocumentTitle } from '../../utils/helpers';
 import { ADMIN_PREFIX } from '../../constants';
 
 import translations from '../../translations';
+import { PreviewButton, PreviewPanel } from '../../components/PreviewPanel';
 const { getLeaveMessage, getDeleteMessage } = translations;
 
 export class PageEdit extends Component {
@@ -110,46 +111,52 @@ export class PageEdit extends Component {
     const title = front_matter && front_matter.title ? front_matter.title : '';
     const document_title = getDocumentTitle('pages', directory, title || name);
 
+    console.log('http_url', http_url);
+
     return (
       <DocumentTitle title={document_title}>
-        <HotKeys handlers={keyboardHandlers} className="single">
+        <HotKeys handlers={keyboardHandlers} className="single" id="doctitle">
           {errors.length > 0 && <Errors errors={errors} />}
 
-          <div className="content-header">
-            <Breadcrumbs type="pages" splat={directory} />
-          </div>
+          <div className="edit-panel">
+            <div className="content-header">
+              <Breadcrumbs type="pages" splat={directory} />
+            </div>
 
-          <div className="content-wrapper">
-            <MarkdownPageBody
-              type="pages"
-              updateTitle={updateTitle}
-              updatePath={updatePath}
-              updateBody={updateBody}
-              onSave={this.handleClickSave}
-              path={name}
-              title={title}
-              body={raw_content}
-              metafields={{ title, raw_content, path: name, ...front_matter }}
-              staticmetafields={front_matter_defaults}
-            />
-            <div className="content-side">
-              <Button
-                onClick={this.handleClickSave}
-                type="save"
-                active={fieldChanged}
-                triggered={updated}
-                block
-              />
-              <Button to={http_url} type="view" active block />
-              <Splitter />
-              <Button
-                onClick={() => this.handleClickDelete(name)}
-                type="delete"
-                active
-                block
+            <div className="content-wrapper">
+              <MarkdownPageBody
+                type="pages"
+                updateTitle={updateTitle}
+                updatePath={updatePath}
+                updateBody={updateBody}
+                onSave={this.handleClickSave}
+                path={name}
+                title={title}
+                body={raw_content}
+                metafields={{ title, raw_content, path: name, ...front_matter }}
+                staticmetafields={front_matter_defaults}
               />
+              <div className="content-side">
+                <Button
+                  onClick={this.handleClickSave}
+                  type="save"
+                  active={fieldChanged}
+                  triggered={updated}
+                  block
+                />
+                <Button to={http_url} type="view" active block />
+                <PreviewButton />
+                <Splitter />
+                <Button
+                  onClick={() => this.handleClickDelete(name)}
+                  type="delete"
+                  active
+                  block
+                />
+              </div>
             </div>
           </div>
+          <PreviewPanel previewUrl={http_url} />
         </HotKeys>
       </DocumentTitle>
     );
diff --git a/src/styles/main.scss b/src/styles/main.scss
index c9b56870b..2a5d91454 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,6 +14,7 @@
 @import "mdeditor";
 @import "button";
 @import "staticfiles";
+@import "preview";
 
 *, *:before, *:after {
   box-sizing: border-box;
diff --git a/src/styles/preview.scss b/src/styles/preview.scss
new file mode 100644
index 000000000..9092d62fd
--- /dev/null
+++ b/src/styles/preview.scss
@@ -0,0 +1,89 @@
+
+.preview {
+
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  .edit-panel {
+    resize: horizontal;
+    flex: 1;
+
+    .content-wrapper {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+
+      .content-body {
+        width: 100%;
+      }
+
+      .content-side {
+        position: static;
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        gap: 20px;
+
+        * { flex: 1;}
+        .splitter { display: none; /* flex: 0 0 0px; margin: 0px 20px; border: none;*/ }
+      }
+    }
+  }
+
+  .preview-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .header {
+      justify-content: center;
+    }
+
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+  .header {
+
+    position: relative;
+
+    .btn-light {
+      background-color: inherit;
+      border: 1px solid #808080;
+      padding: 0.8rem;
+      color: #808080;
+      aspect-ratio: 1;
+    }
+
+    .btn-light:hover {
+      background-color: lightgrey;
+    }
+
+
+    .btn-close {
+      position: absolute;
+      left: 2px;
+    }  
+
+    .btn-refresh {
+      position: absolute;
+      right: 2px;
+    }  
+  }
+
+  .preview-panel {
+    display: inline;
+  }
+
+
+}
+
+.preview-panel {
+  display: none;
+}
+