diff --git a/app/components/SimpleEditor/Editor.js b/app/components/SimpleEditor/Editor.js
index 29936d69a0d1aa6756f486f93ec7f5f21b9aa7b1..163c341010bb12464850e76f003fa77eca364fd1 100644
--- a/app/components/SimpleEditor/Editor.js
+++ b/app/components/SimpleEditor/Editor.js
@@ -10,7 +10,7 @@ import Comments from './panes/Comments/CommentBoxList'
 import CommentsProvider from './panes/Comments/CommentsProvider'
 import ContainerEditor from './ContainerEditor'
 
-// import Notes from './panes/Notes/Notes'
+import Notes from './panes/Notes/Notes'
 import NotesProvider from './panes/Notes/NotesProvider'
 
 // import TableOfContents from './panes/TableOfContents/TableOfContents'
@@ -71,7 +71,7 @@ class Editor extends ProseEditor {
     let ContextMenu = this.componentRegistry.get('context-menu') // new what does it do?
     // let Dropzones = this.componentRegistry.get('dropzones') // new what does it do?
 
-    // const footerNotes = $$(Notes).ref('footer-notes')
+    const footerNotes = $$(Notes).ref('footer-notes')
 
     // const props = {
     //   book: this.props.book,
@@ -119,11 +119,17 @@ class Editor extends ProseEditor {
         $$('div')
       )
 
+    const ToolbarWithEditor = $$(SplitPane, { splitType: 'horizontal' })
+      .append(
+        toolbar,
+        contentPanelWithSplitPane
+      )
+
     el.append(
       $$(SplitPane, { splitType: 'horizontal' })
         .append(
-          toolbar,
-          contentPanelWithSplitPane
+          ToolbarWithEditor,
+          footerNotes
         )
     )
 
diff --git a/app/components/SimpleEditor/panes/Notes/Notes.js b/app/components/SimpleEditor/panes/Notes/Notes.js
index 266b732f27da6837e4d46192399cef969ada6c43..2a19f9f30b5ab15f6a66191aab440ea1644b6e9d 100644
--- a/app/components/SimpleEditor/panes/Notes/Notes.js
+++ b/app/components/SimpleEditor/panes/Notes/Notes.js
@@ -19,7 +19,7 @@ class Notes extends Component {
   }
 
   didUpdate () {
-    this.computeScrollPane()
+    this.computeMainPane()
   }
 
   render ($$) {
@@ -90,9 +90,13 @@ class Notes extends Component {
     const height = (this.el.el.offsetHeight + this.el.el.offsetTop - e.clientY)
     const scrollPane = document.getElementById('notes-editor-content-panel').children
     scrollPane[0].style.minHeight = height - 40 + 'px'
-    const mainScrollPane = document.getElementById('content-panel')
-    mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
+
+    // const mainScrollPane = document.getElementById('content-panel')
+    // mainScrollPane.style.height = this.el.el.offsetTop - 162 + 'px'
+
     this.el.el.style.height = height + 'px'
+
+    this.computeMainPane()
   }
 
   stopResize (e) {
@@ -100,9 +104,9 @@ class Notes extends Component {
     window.removeEventListener('mouseup', this.stopResize, false)
   }
 
-  computeScrollPane () {
-    const mainScrollPane = document.getElementById('content-panel').children
-    mainScrollPane[0].style.maxHeight = this.el.el.offsetTop - 162 + 'px'
+  computeMainPane () {
+    const mainPane = document.getElementById('content-panel')
+    mainPane.style.height = this.el.el.offsetTop - 155 + 'px'
   }
 
   onNotesUpdated (change) {
diff --git a/app/components/SimpleEditor/panes/Notes/notes.scss b/app/components/SimpleEditor/panes/Notes/notes.scss
index 38306a1bff4c4e07a97f831689eb4bbb2b0d8f5f..e0cbaa6a7a9577d088c50eb832630789db1506b0 100644
--- a/app/components/SimpleEditor/panes/Notes/notes.scss
+++ b/app/components/SimpleEditor/panes/Notes/notes.scss
@@ -3,7 +3,7 @@ $light-blue: #e4f0ff;
 $black: #000;
 $bg-rgba: rgba(255, 255, 255, 0);
 
-.notes-container {
+.sc-split-pane .notes-container {
   background-color: $white;
   bottom: 0;
   counter-reset: note-footer;
@@ -21,9 +21,13 @@ $bg-rgba: rgba(255, 255, 255, 0);
     background-repeat: repeat-x;
     background-size: 10px 1px;
     cursor: row-resize;
-    height: 6px;
+    height: 10px;
     position: absolute;
+<<<<<<< HEAD
     top: -14px;
+=======
+    top: -6px;
+>>>>>>> notes editor in separate pane
     width: 100%;
    }
   }