diff --git a/wax-prosemirror-components/src/components/Button.js b/wax-prosemirror-components/src/components/Button.js
index ed968a69aa5dcd5c0f61011fd9ddeb0cc4a5a4b6..cf7004cd11dfd222e71a957eded71a980a98d4e8 100644
--- a/wax-prosemirror-components/src/components/Button.js
+++ b/wax-prosemirror-components/src/components/Button.js
@@ -1,3 +1,5 @@
+/* eslint react/prop-types: 0 */
+
 import React, { useContext } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import MenuButton from '../ui/buttons/MenuButton';
diff --git a/wax-prosemirror-components/src/components/LeftMenuTitle.js b/wax-prosemirror-components/src/components/LeftMenuTitle.js
index 15c4ac188abb43c6e70fe0942877d1b40a66b785..b2743816ace6535559155598f72a835242c83daf 100644
--- a/wax-prosemirror-components/src/components/LeftMenuTitle.js
+++ b/wax-prosemirror-components/src/components/LeftMenuTitle.js
@@ -1,10 +1,12 @@
-import React from "react";
-import styled from "styled-components";
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import styled from 'styled-components';
 
 const LeftMenuStyled = styled.div`
   border-bottom: 1px solid #d9d9d9;
   color: #979797;
-  font-family: "Fira Sans";
+  font-family: 'Fira Sans';
   font-size: 15px;
   font-weight: bold;
   letter-spacing: 0.6px;
diff --git a/wax-prosemirror-components/src/components/ToolGroupComponent.js b/wax-prosemirror-components/src/components/ToolGroupComponent.js
index 8fc6f640b276090c910e73e8b6da13e1a8ed0a98..cae23c1c40fde6c45061267f150ca4e6cc0b2808 100644
--- a/wax-prosemirror-components/src/components/ToolGroupComponent.js
+++ b/wax-prosemirror-components/src/components/ToolGroupComponent.js
@@ -1,5 +1,5 @@
+/* eslint react/prop-types: 0 */
 import React from 'react';
-import { isFunction } from 'lodash';
 import styled from 'styled-components';
 
 import Dropdown from '../ui/buttons/Dropdown';
diff --git a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
index 3d06af2633608efd024b5c63801b421c18877e9c..c9b73fbdb8cb01171ea39ffaab5444df0111d7ab 100644
--- a/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
+++ b/wax-prosemirror-components/src/components/notes/NoteEditorContainer.js
@@ -1,15 +1,16 @@
 import React from 'react';
+import { grid } from '@pubsweet/ui-toolkit';
 import styled from 'styled-components';
-
 import NoteNumber from './NoteNumber';
 
 const NoteEditorContainerStyled = styled.div`
   display: flex;
   flex-direction: row;
   min-height: 28px;
-  width: 100%;
+  width: 90%;
   position: relative;
   margin-bottom: 5px;
+  padding-left: ${grid(10)};
 `;
 
 const NoteStyled = styled.div`
diff --git a/wax-prosemirror-components/src/components/rightArea/RightArea.js b/wax-prosemirror-components/src/components/rightArea/RightArea.js
index 6e89354767d10825ed7f27677a139aa062dff8e7..961f93a3e3499d2b5469d053331d2dff958e62d2 100644
--- a/wax-prosemirror-components/src/components/rightArea/RightArea.js
+++ b/wax-prosemirror-components/src/components/rightArea/RightArea.js
@@ -32,12 +32,6 @@ export default ({ area }) => {
     let panelWrapperHeight = {};
     if (main) {
       WaxSurface = main.dom.getBoundingClientRect();
-
-      if (area === 'main') {
-      } else {
-        panelWrapper = document.getElementsByClassName('panelWrapper');
-        panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
-      }
     }
 
     each(marksNodes[area], (markNode, pos) => {
@@ -56,6 +50,9 @@ export default ({ area }) => {
           annotationTop =
             markNodeEl.getBoundingClientRect().top - WaxSurface.top;
       } else {
+        panelWrapper = document.getElementsByClassName('panelWrapper');
+        panelWrapperHeight = panelWrapper[0].getBoundingClientRect().height;
+
         markNodeEl = document
           .querySelector('#notes-container')
           .querySelector(`[data-id="${id}"]`);
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index aaac04e050c2a46d0f6f70cee277e58f1f074408..c7795ea5e002299834161628a12b86e4053b89cd 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,3 +1,5 @@
+/* eslint react/prop-types: 0 */
+
 import React, { useState, useContext } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBox.js b/wax-prosemirror-components/src/ui/comments/CommentBox.js
index a9128114a72000a9e9b20f305f9e0866240bf098..edd603589adad24fd91b45ffdfa07575a5527960 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -99,7 +99,7 @@ CommentBox.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
-      timestamp: PropTypes.string.isRequired,
+      timestamp: PropTypes.string.number,
     }),
   ),
   /** This comment's id in the document */
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItem.js b/wax-prosemirror-components/src/ui/comments/CommentItem.js
index 8a668f4e2554b558dec0a4b4605d40d616743a19..8b94334d1dfd7527a223f0be9346e3298da86ace 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItem.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentItem.js
@@ -51,7 +51,7 @@ CommentItem.propTypes = {
   /** Display name of user that made the comment */
   displayName: PropTypes.string.isRequired,
   /** When the comment was made */
-  timestamp: PropTypes.string.isRequired,
+  timestamp: PropTypes.number.isRequired,
 };
 
 CommentItem.defaultProps = {};
diff --git a/wax-prosemirror-components/src/ui/comments/CommentItemList.js b/wax-prosemirror-components/src/ui/comments/CommentItemList.js
index 4a4aa16ec2309ce8eb90b1ecd21a54363e922d0c..d1dc93628cb9f499ed278bcea60f8d3f6e5228a0 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentItemList.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentItemList.js
@@ -72,7 +72,7 @@ CommentItemList.propTypes = {
     PropTypes.shape({
       content: PropTypes.string.isRequired,
       displayName: PropTypes.string.isRequired,
-      timestamp: PropTypes.string.isRequired,
+      timestamp: PropTypes.number.isRequired,
     }),
   ),
 };
diff --git a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
index 37168ed6d8aae241232fb18c3287b35e0f7effff..9e85eaaf9ead36e93d2d91e4011da48f7bd12b27 100644
--- a/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
+++ b/wax-prosemirror-components/src/ui/tables/InsertTableTool.js
@@ -236,6 +236,12 @@ const TableGridSizeEditor = props => {
     position: 'relative',
   };
 
+  const infoStyle = {
+    height: '20px',
+    fontSize: '14px',
+    marginLeft: '5px',
+  };
+
   return (
     <div style={wrapperStyle} ref={_onRef}>
       <div
@@ -245,7 +251,7 @@ const TableGridSizeEditor = props => {
       >
         {cells}
       </div>
-      <div>
+      <div style={infoStyle}>
         {rows} X {cols}
       </div>
     </div>
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockElement.js b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
index c8e85303516d17419bb904f16eec1d5a8a144bb3..4dd07887cebaddf5d2a6ffb2e3e61d94929729c9 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockElement.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockElement.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
+import { th } from '@pubsweet/ui-toolkit';
+
 import Button from '../../components/Button';
 
 const Wrapper = styled.div`
   display: flex;
+  button {
+    border-radius: 4px;
+    margin-left: 4px;
+  }
 `;
 
 const Box = styled.div`
diff --git a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
index f52e7b5b8d47c4fa42aa27cc5e36242fb16f7ab2..8f628c3d0e97dddfa99997d8c99ba16af1db5065 100644
--- a/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
+++ b/wax-prosemirror-components/src/ui/tabs/BlockLevelTools.js
@@ -8,7 +8,7 @@ const Wrapper = styled.div`
   padding: 8px;
 
   > div:not(:last-child) {
-    margin-bottom: 8px;
+    margin-bottom: 20px;
   }
 `;
 
diff --git a/wax-prosemirror-components/src/ui/tabs/Tabs.js b/wax-prosemirror-components/src/ui/tabs/Tabs.js
index e2751296d4afc136c8bae37b6d97f3a641398055..f460938b6d2ce7c09da8ffca26129a0cc1a8e9c4 100644
--- a/wax-prosemirror-components/src/ui/tabs/Tabs.js
+++ b/wax-prosemirror-components/src/ui/tabs/Tabs.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { th } from '@pubsweet/ui-toolkit';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import Icon from '../buttons/Icon';
@@ -11,10 +12,11 @@ const Wrapper = styled.div`
 const Tabs = styled.div`
   display: flex;
   flex-direction: column;
+  background: #e3e3e3;
 `;
 
 const activeTab = css`
-  box-shadow: 0 0 3px blue;
+  box-shadow: 0 0 3px ${th('colorPrimary')};
 `;
 
 const Tab = styled.div`
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index e8c87ea4b0e668c5204ce4e3ddb9d6686bf565bb..4cb3fa91637acfa11d19bcf83c2280fcb0632f32 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -48,6 +48,7 @@ const TopMenu = styled.div`
   display: flex;
   min-height: 40px;
   user-select: none;
+  background: ${th('colorBackgroundToolBar')}
   border-bottom: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
 
   > div:not(:last-child) {
@@ -57,6 +58,7 @@ const TopMenu = styled.div`
 `;
 
 const SideMenu = styled.div`
+  background: ${th('colorBackgroundToolBar')}
   border-right: ${th('borderWidth')} ${th('borderStyle')} ${th('colorBorder')};
   min-width: 250px;
   height: 100%;
@@ -72,6 +74,7 @@ const WaxSurfaceScroll = styled.div`
   box-sizing: border-box;
   height: 100%;
   width: 100%;
+  position: absolute;
 
   ${EditorElements};
 `;
@@ -88,34 +91,41 @@ const EditorContainer = styled.div`
 `;
 
 const CommentsContainer = styled.div`
+  background: ${th('colorBackgroundHue')};
   display: flex;
   flex-direction: column;
   width: 35%;
   height: 100%;
 `;
 
-const NotesAreaContainer = styled.div`
+const CommentsContainerNotes = styled.div`
   background: ${th('colorBackgroundHue')};
+  display: flex;
+  flex-direction: column;
+  width: 35%;
+  height: 100%;
+`;
+
+const NotesAreaContainer = styled.div`
   display: flex;
   flex-direction: row;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
-  padding-top: ${grid(1)};
+  position: absolute;
 `;
 
 const NotesContainer = styled.div`
   counter-reset: footnote-view;
   display: flex;
   flex-direction: column;
-  padding-left: ${grid(10)};
   padding-bottom: ${grid(4)};
   height: 100%;
   width: 65%;
 `;
 
-let surfaceHeight = 700;
-let notesHeight = 150;
+let surfaceHeight = 600;
+let notesHeight = 200;
 
 const onResizeEnd = arr => {
   surfaceHeight = arr[0].size;
@@ -162,8 +172,8 @@ const EditoriaLayout = ({ editor }) => {
             <PanelGroup
               direction="column"
               panelWidths={[
-                { size: surfaceHeight, resize: 'dynamic' },
-                { size: notesHeight, resize: 'dynamic' },
+                { size: surfaceHeight, resize: 'stretch' },
+                { size: notesHeight, resize: 'stretch' },
               ]}
               onResizeEnd={onResizeEnd}
             >
@@ -179,9 +189,9 @@ const EditoriaLayout = ({ editor }) => {
                   <NotesContainer id="notes-container">
                     <NotesArea />
                   </NotesContainer>
-                  <CommentsContainer>
+                  <CommentsContainerNotes>
                     <RightArea area="notes" />
-                  </CommentsContainer>
+                  </CommentsContainerNotes>
                 </NotesAreaContainer>
               )}
             </PanelGroup>
diff --git a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
index 40573224fdceab33f2fc47b6cf0fb439e3ab0178..100f9c20ecbb20e05642eb74f57cbeca7e8b7e50 100644
--- a/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
+++ b/wax-prosemirror-plugins/src/WaxSelectionPlugin.js
@@ -16,15 +16,13 @@ const WaxSelectionPlugin = new Plugin({
         if (node.type.name === 'footnote') flag = true;
       });
 
-      if (sel && !flag) {
-        const decos = [
-          Decoration.inline(sel.$from.pos, sel.$to.pos, {
-            class: 'wax-selection-marker',
-          }),
-        ];
-        const deco = DecorationSet.create(editorState.doc, decos);
-        return { deco };
-      }
+      const decos = [
+        Decoration.inline(sel.$from.pos, sel.$to.pos, {
+          class: 'wax-selection-marker',
+        }),
+      ];
+      const deco = DecorationSet.create(editorState.doc, decos);
+      return { deco };
 
       return state;
     },
diff --git a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
index 7d0a8b008c3bc26cab83505ca0b412f76dec3f40..2c090f96ec1c86b1b236199808397ae71f8949ef 100644
--- a/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
+++ b/wax-prosemirror-services/src/BaseService/RedoService/Redo.js
@@ -19,4 +19,8 @@ class Redo extends Tools {
   get enable() {
     return redo;
   }
+
+  select(state) {
+    return redo(state);
+  }
 }
diff --git a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
index e593e832ce70cd43aa58299b417d6bbd4f45f707..50aa7e657a0a9707db09790da3391f6397f0a057 100644
--- a/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
+++ b/wax-prosemirror-services/src/BaseService/UndoService/Undo.js
@@ -19,4 +19,8 @@ class Undo extends Tools {
   get enable() {
     return undo;
   }
+
+  select(state) {
+    return undo(state);
+  }
 }
diff --git a/wax-prosemirror-themes/src/coko-theme/index.js b/wax-prosemirror-themes/src/coko-theme/index.js
index 96d3fe6a01f844f3ca5c11d3bbcd7b50a044401d..783cf10c563160df17a937db3204bcf6a808982b 100644
--- a/wax-prosemirror-themes/src/coko-theme/index.js
+++ b/wax-prosemirror-themes/src/coko-theme/index.js
@@ -7,17 +7,18 @@ import { css } from 'styled-components';
 const cokoTheme = {
   /* Colors */
   colorBackground: 'white',
-  colorPrimary: 'teal',
+  colorPrimary: '#808080',
   colorSecondary: '#E7E7E7',
   colorFurniture: '#CCC',
   colorBorder: '#AAA',
-  colorBackgroundHue: '#F1F1F1',
+  colorBackgroundHue: '#F7F7F7',
   colorSuccess: '#008800',
   colorError: 'indianred',
   colorText: '#111',
   colorTextReverse: '#FFF',
   colorTextPlaceholder: '#595959',
   colorWarning: '#ffc107',
+  colorBackgroundToolBar: '#D9D9D9',
 
   /*Buttons*/
   colorButton: '#777',