diff --git a/res/menu/context.en.yml b/res/menu/context.en.yml
index ffd6ac7773..e07e22e869 100644
--- a/res/menu/context.en.yml
+++ b/res/menu/context.en.yml
@@ -168,6 +168,16 @@ en:
         command: 'app:restore-item'
       - label: 'Permanently Delete Selected Items'
         command: 'app:destroy-item'
+    item-view: &item-view
+      - label: View Layout
+        id: 'item-view-layout'
+        submenu:
+        - label: 'Stacked'
+          id: 'stacked'
+          type: checkbox
+        - label: 'Side by side'
+          id: 'side-by-side'
+          type: checkbox
     trash: &trash
       - label: 'Permanently Delete Items'
         command: 'app:destroy-item'
@@ -199,6 +209,7 @@ en:
     item-bulk-list: *item-bulk-list
     item-deleted: *item-deleted
     item-bulk-deleted: *item-bulk-deleted
+    item-view: *item-view
     trash: *trash
     photo: *photo
     selection: *selection
@@ -223,6 +234,7 @@ en:
     item-bulk-list: *item-bulk-list
     item-deleted: *item-deleted
     item-bulk-deleted: *item-bulk-deleted
+    item-view: *item-view
     trash: *trash
     photo: *photo
     selection: *selection
diff --git a/res/strings/renderer.en.yml b/res/strings/renderer.en.yml
index 56e1f56570..b66ff029ad 100644
--- a/res/strings/renderer.en.yml
+++ b/res/strings/renderer.en.yml
@@ -97,7 +97,7 @@ en:
       template: Default Template
       debug: Enable Developer Mode
       dup:
-        label: During Import
+        label: During import
         option:
           skip: Skip duplicate photos
           import: Accept duplicate photos
@@ -113,7 +113,11 @@ en:
         option:
           fit: Zoom photos to fit
           fill: Zoom photos to fill
-
+      layout:
+        label: Item View layout
+        option:
+          stacked: Stacked
+          side-by-side: Side by side
     project:
       label: Project
     template:
diff --git a/src/browser/menu.js b/src/browser/menu.js
index e9af90c35d..096af9e2ce 100644
--- a/src/browser/menu.js
+++ b/src/browser/menu.js
@@ -251,6 +251,18 @@ class Menu {
               id: target.id, mode: li.mode
             })
           }))
+          break
+        }
+        case 'item-view-layout': {
+          const { target } = params[0]
+          item.submenu = item.submenu.map(li => ({
+            ...li,
+            checked: li.id === target.layout,
+            click: this.responder('app:settings-persist', win, {
+              layout: li.id
+            })
+          }))
+          break
         }
       }
 
@@ -347,13 +359,15 @@ class ContextMenu extends Menu {
   scopes.selection = [...scopes.photo, 'selection']
   scopes.notes = [...scopes.global]
   scopes.note = [...scopes.notes, 'note']
-  scopes.notepad = [...scopes.global, 'notepad']
   scopes['item-bulk'] = [...scopes.items, 'item-bulk']
   scopes['item-list'] = [...scopes.items, 'item-list', 'item']
   scopes['item-bulk-list'] = [...scopes.items, 'item-bulk-list', 'item-bulk']
   scopes['item-deleted'] = [...scopes.global, 'item-deleted']
   scopes['item-bulk-deleted'] = [...scopes.global, 'item-bulk-deleted']
   scopes['item-tag'] = [...scopes.global, 'item-tag']
+  scopes['item-view'] = [...scopes.global, 'item-view']
+  scopes.notepad = [...scopes['item-view'], 'notepad']
+  scopes.esper = [...scopes['item-view']]
 }
 
 module.exports = {
diff --git a/src/browser/tropy.js b/src/browser/tropy.js
index 3401cb934f..3033d7a9a2 100644
--- a/src/browser/tropy.js
+++ b/src/browser/tropy.js
@@ -469,6 +469,9 @@ class Tropy extends EventEmitter {
     this.on('app:writing-mode', (win, { id, mode }) =>
       this.dispatch(act.notepad.update({ [id]: { mode  } }), win))
 
+    this.on('app:settings-persist', (win, payload) =>
+      this.dispatch(act.settings.persist(payload), win))
+
     this.on('app:toggle-menu-bar', win => {
       if (win.isMenuBarAutoHide()) {
         win.setAutoHideMenuBar(false)
diff --git a/src/components/editor/container.js b/src/components/editor/container.js
index 861c7aa281..f3328d9fca 100644
--- a/src/components/editor/container.js
+++ b/src/components/editor/container.js
@@ -1,7 +1,6 @@
 'use strict'
 
 const React = require('react')
-const { Component } = React
 const { func, bool, object, number, string } = require('prop-types')
 const { EditorToolbar } = require('./toolbar')
 const { EditorState } = require('prosemirror-state')
@@ -16,7 +15,7 @@ const { get, noop, restrict } = require('../../common/util')
 const { SASS: { EDITOR } } = require('../../constants')
 
 
-class Editor extends Component {
+class Editor extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -126,10 +125,10 @@ class Editor extends Component {
   }
 
   render() {
-    const { isDisabled, placeholder, tabIndex } = this.props
-    const { hasViewFocus } = this.state
-    const state = this.getEditorState()
-    const showPlaceholder = placeholder != null && this.isBlank(state.doc)
+    let { isDisabled, isDraggable, placeholder, tabIndex } = this.props
+    let { hasViewFocus } = this.state
+    let state = this.getEditorState()
+    let showPlaceholder = placeholder != null && this.isBlank(state.doc)
 
     return (
       <div
@@ -137,8 +136,9 @@ class Editor extends Component {
         className={cx(this.classes)}
         tabIndex={-1}
         onFocus={this.handleFocus}>
-        {!isDisabled &&
+        {(isDraggable || !isDisabled) &&
           <EditorToolbar
+            isDraggable={isDraggable}
             state={state}
             ref={this.setToolbar}
             onCommand={this.handleCommand}/>
@@ -164,6 +164,7 @@ class Editor extends Component {
 
   static propTypes = {
     isDisabled: bool,
+    isDraggable: bool,
     keymap: object.isRequired,
     mode: string.isRequired,
     onBlur: func.isRequired,
diff --git a/src/components/editor/toolbar.js b/src/components/editor/toolbar.js
index ee3fb31406..c045354716 100644
--- a/src/components/editor/toolbar.js
+++ b/src/components/editor/toolbar.js
@@ -1,8 +1,7 @@
 'use strict'
 
 const React = require('react')
-const { PureComponent } = React
-const { func, instanceOf } = require('prop-types')
+const { bool, func, instanceOf } = require('prop-types')
 const { Toolbar, ToolbarContext, ToolGroup } = require('../toolbar')
 const { Button } = require('../button')
 const { EditorState } = require('prosemirror-state')
@@ -29,7 +28,7 @@ const {
 } = require('../icons')
 
 
-class EditorToolbar extends PureComponent {
+class EditorToolbar extends React.PureComponent {
   constructor(props) {
     super(props)
 
@@ -162,7 +161,7 @@ class EditorToolbar extends PureComponent {
 
   render() {
     return (
-      <Toolbar isDraggable={false}>
+      <Toolbar isDraggable={this.props.isDraggable}>
         <ToolbarContext
           className="default"
           isActive={this.hasDefaultContext}>
@@ -229,12 +228,10 @@ class EditorToolbar extends PureComponent {
   }
 
   static propTypes = {
+    isDraggable: bool,
     state: instanceOf(EditorState),
     onCommand: func.isRequired
   }
-
-  static defaultProps = {
-  }
 }
 
 module.exports = {
diff --git a/src/components/esper/esper.js b/src/components/esper/esper.js
index 9f5c9e968a..4331a9b0c0 100644
--- a/src/components/esper/esper.js
+++ b/src/components/esper/esper.js
@@ -669,6 +669,12 @@ class Esper extends React.PureComponent {
     this.container = container
   }
 
+  handleContextMenu = (event) => {
+    if (!this.isDisabled) {
+      this.props.onContextMenu(event, 'esper')
+    }
+  }
+
   handleMouseDown = () => {
     if (document.activeElement !== this.container) {
       this.container.focus()
@@ -694,6 +700,7 @@ class Esper extends React.PureComponent {
         tabIndex={tabIndex}
         className={cx(this.classes)}
         onBlur={this.handleBlur}
+        onContextMenu={this.handleContextMenu}
         onMouseDown={this.handleMouseDown}
         onKeyDown={this.handleKeyDown}
         onKeyUp={this.handleKeyUp}>
@@ -761,6 +768,7 @@ class Esper extends React.PureComponent {
     maxZoom: number.isRequired,
     minZoom: number.isRequired,
     mode: string.isRequired,
+    onContextMenu: func.isRequired,
     onChange: func.isRequired,
     onPhotoError: func.isRequired,
     onSelect: func.isRequired,
diff --git a/src/components/item/container.js b/src/components/item/container.js
index fb217b02d8..0f4fa18138 100644
--- a/src/components/item/container.js
+++ b/src/components/item/container.js
@@ -6,7 +6,8 @@ const { BufferedResizable } = require('../resizable')
 const { Esper } = require('../esper')
 const { NotePad } = require('../note')
 const act = require('../../actions')
-const { SASS: { ESPER } } = require('../../constants')
+const cx = require('classnames')
+const { SASS: { ESPER }, ITEM: { LAYOUT } } = require('../../constants')
 
 const {
   arrayOf, bool, func, number, object, shape, string
@@ -22,10 +23,49 @@ const {
 
 
 class ItemContainer extends React.PureComponent {
+  get dimension() {
+    return (this.props.settings.layout === LAYOUT.SIDE_BY_SIDE) ?
+      'width' : 'height'
+  }
+
+  get size() {
+    switch (this.props.settings.layout) {
+      case LAYOUT.STACKED:
+        return this.props.esper.height
+      case LAYOUT.SIDE_BY_SIDE:
+        return this.props.esper.width
+      default:
+        return 100
+    }
+  }
+
+  get isNotePadDraggable() {
+    return ARGS.frameless &&
+      this.props.settings.layout === LAYOUT.SIDE_BY_SIDE
+  }
+
+  get hasOverlayToolbars() {
+    return this.props.settings.overlayToolbars &&
+      this.props.settings.layout !== LAYOUT.SIDE_BY_SIDE
+  }
+
+  getResizableProps(layout = this.props.settings.layout) {
+    return layout === LAYOUT.SIDE_BY_SIDE ?
+      { edge: 'right', margin: ESPER.MIN_WIDTH, min: ESPER.MIN_WIDTH } :
+      { edge: 'bottom', margin: ESPER.MIN_HEIGHT, min: ESPER.MIN_HEIGHT }
+  }
+
   setNotePad = (notepad) => {
     this.notepad = notepad
   }
 
+  handleContextMenu = (event, scope = 'item-view', opts = {}) => {
+    this.props.onContextMenu(event, scope, {
+      layout: this.props.settings.layout,
+      ...opts
+    })
+  }
+
   handleEsperChange = ({ photo, selection, image, esper }) => {
     if (esper != null) {
       this.props.onUiUpdate({ esper })
@@ -41,24 +81,26 @@ class ItemContainer extends React.PureComponent {
     }
   }
 
-  handleEsperResize = (height) => {
-    this.props.onUiUpdate({ esper: { height } })
+  handleEsperResize = (value) => {
+    this.props.onUiUpdate({
+      esper: { [this.dimension]: value }
+    })
   }
 
   render() {
     return (
-      <div className="item-container">
+      <div
+        className={cx('item-container', this.props.settings.layout)}
+        onContextMenu={this.handleContextMenu}>
         <BufferedResizable
-          edge="bottom"
-          value={this.props.esper.height}
+          {...this.getResizableProps()}
           isRelative
-          onChange={this.handleEsperResize}
-          margin={38}
-          min={ESPER.MIN_HEIGHT}>
+          value={this.size}
+          onChange={this.handleEsperResize}>
           <Esper {...this.props.view}
             cache={this.props.cache}
             mode={this.props.view.mode || this.props.settings.zoomMode}
-            hasOverlayToolbar={this.props.settings.overlayToolbars}
+            hasOverlayToolbar={this.hasOverlayToolbars}
             invertScroll={this.props.settings.invertScroll}
             invertZoom={this.props.settings.invertZoom}
             isDisabled={this.props.isDisabled}
@@ -69,6 +111,7 @@ class ItemContainer extends React.PureComponent {
             selection={this.props.selection}
             selections={this.props.selections}
             tool={this.props.esper.tool}
+            onContextMenu={this.handleContextMenu}
             onChange={this.handleEsperChange}
             onPhotoError={this.props.onPhotoError}
             onSelect={this.props.onPhotoSelect}
@@ -78,11 +121,12 @@ class ItemContainer extends React.PureComponent {
           ref={this.setNotePad}
           note={this.props.note}
           isDisabled={this.props.isDisabled || !this.props.photo}
+          isDraggable={this.isNotePadDraggable}
           isItemOpen={this.props.isOpen}
           keymap={this.props.keymap.NotePad}
           onChange={this.props.onNoteChange}
           onCommit={this.props.onNoteCommit}
-          onContextMenu={this.props.onContextMenu}/>
+          onContextMenu={this.handleContextMenu}/>
       </div>
     )
   }
@@ -91,6 +135,7 @@ class ItemContainer extends React.PureComponent {
     cache: string.isRequired,
     esper: shape({
       height: number.isRequired,
+      width: number.isRequired,
       panel: bool.isRequired,
       tool: string.isRequired
     }).isRequired,
diff --git a/src/components/note/pad.js b/src/components/note/pad.js
index 52d8b8b7c1..ad7a59df6d 100644
--- a/src/components/note/pad.js
+++ b/src/components/note/pad.js
@@ -1,14 +1,13 @@
 'use strict'
 
 const React = require('react')
-const { PureComponent } = React
 const { bool, func, number, object, shape, string } = require('prop-types')
 const { Editor } = require('../editor')
 const { TABS } = require('../../constants')
 const cx = require('classnames')
 
 
-class NotePad extends PureComponent {
+class NotePad extends React.PureComponent {
   get classes() {
     return ['note-pad', this.props.mode, {
       'no-wrap': !this.props.wrap,
@@ -66,6 +65,7 @@ class NotePad extends PureComponent {
           mode={this.props.mode}
           placeholder="notepad.placeholder"
           isDisabled={this.isDisabled}
+          isDraggable={this.props.isDraggable}
           tabIndex={this.props.tabIndex}
           onBlur={this.handleEditorBlur}
           onChange={this.handleChange}/>
@@ -75,6 +75,7 @@ class NotePad extends PureComponent {
 
   static propTypes = {
     isDisabled: bool,
+    isDraggable: bool,
     isItemOpen: bool,
     keymap: object.isRequired,
     note: shape({
diff --git a/src/components/prefs/app.js b/src/components/prefs/app.js
index 9955f03b19..d56717c5c8 100644
--- a/src/components/prefs/app.js
+++ b/src/components/prefs/app.js
@@ -5,7 +5,7 @@ const { PureComponent } = React
 const { array, arrayOf, bool, func, shape, string } = require('prop-types')
 const { TemplateSelect } = require('../template/select')
 const { ipcRenderer: ipc } = require('electron')
-const { ESPER } = require('../../constants')
+const { ESPER, ITEM } = require('../../constants')
 
 const {
   FormElement,
@@ -97,6 +97,12 @@ class AppPrefs extends PureComponent {
             value={this.props.settings.zoomMode}
             options={this.props.zoomModes}
             onChange={this.props.onSettingsUpdate}/>
+          <FormToggleGroup
+            id="prefs.app.layout"
+            name="layout"
+            value={this.props.settings.layout}
+            options={this.props.layouts}
+            onChange={this.props.onSettingsUpdate}/>
           <hr/>
           <FormToggle
             id="prefs.app.debug"
@@ -113,9 +119,11 @@ class AppPrefs extends PureComponent {
     templates: array.isRequired,
     settings: shape({
       debug: bool.isRequired,
+      layout: string.isRequired,
       locale: string.isRequired,
       theme: string.isRequired,
     }).isRequired,
+    layouts: arrayOf(string).isRequired,
     locales: arrayOf(string).isRequired,
     themes: arrayOf(string).isRequired,
     dupOptions: arrayOf(string).isRequired,
@@ -125,6 +133,7 @@ class AppPrefs extends PureComponent {
 
   static defaultProps = {
     themes: ['light', 'dark'],
+    layouts: [ITEM.LAYOUT.STACKED, ITEM.LAYOUT.SIDE_BY_SIDE],
     locales: ['de', 'en', 'fr', 'ja'],
     dupOptions: ['skip', 'import', 'prompt'],
     zoomModes: [ESPER.MODE.FIT, ESPER.MODE.FILL]
diff --git a/src/constants/item.js b/src/constants/item.js
index 9b0ad27266..833db9873f 100644
--- a/src/constants/item.js
+++ b/src/constants/item.js
@@ -38,5 +38,10 @@ module.exports = {
     REMOVE: 'item.photo.remove'
   },
 
+  LAYOUT: {
+    STACKED: 'stacked',
+    SIDE_BY_SIDE: 'side-by-side'
+  },
+
   TEMPLATE: 'https://tropy.org/v1/templates/generic'
 }
diff --git a/src/constants/sass.js b/src/constants/sass.js
index dc1bd98ef8..847a70ad14 100644
--- a/src/constants/sass.js
+++ b/src/constants/sass.js
@@ -121,23 +121,9 @@ const SIDEBAR = {
   DEFAULT_WIDTH: 250
 }
 
-const PROJECT = {
-  WIDTH: 1280,
-  HEIGHT: 720,
-  MIN_WIDTH: SIDEBAR.MIN_WIDTH + PANEL.MIN_WIDTH * 2,
-  MIN_HEIGHT: PANEL.MIN_HEIGHT * 3 + PANEL.TOOLBAR + PANEL.HEADER_MARGIN
-}
-
-const EDITOR = {
-  MAX_PADDING: 48
-}
-
-const NOTE = {
-  ROW_HEIGHT: 60
-}
-
 const ESPER = {
-  MIN_HEIGHT: PROJECT.MIN_HEIGHT / 2,
+  MIN_HEIGHT: 38,
+  MIN_WIDTH: 240,
   FADE_DURATION: 250,
   ROTATE_DURATION: 250,
   MAX_ZOOM: 4,
@@ -193,6 +179,21 @@ const ESPER = {
   }
 }
 
+const PROJECT = {
+  WIDTH: 1280,
+  HEIGHT: 720,
+  MIN_WIDTH: PANEL.MIN_WIDTH + ESPER.MIN_WIDTH * 2,
+  MIN_HEIGHT: PANEL.MIN_HEIGHT * 3 + PANEL.TOOLBAR + PANEL.HEADER_MARGIN
+}
+
+const EDITOR = {
+  MAX_PADDING: 48
+}
+
+const NOTE = {
+  ROW_HEIGHT: 60
+}
+
 const INPUT = {
   BORDER_WIDTH: 1,
   FOCUS_SHADOW_WIDTH: 2
diff --git a/src/reducers/settings.js b/src/reducers/settings.js
index 41a4ef590a..1129635980 100644
--- a/src/reducers/settings.js
+++ b/src/reducers/settings.js
@@ -6,6 +6,7 @@ const { darwin } = require('../common/os')
 const defaults = {
   debug: ARGS.debug,
   dup: 'prompt',
+  layout: ITEM.LAYOUT.STACKED,
   locale: ARGS.locale,
   template: ITEM.TEMPLATE,
   theme: ARGS.theme,
diff --git a/src/reducers/ui.js b/src/reducers/ui.js
index 60759f7b5c..35251a05a4 100644
--- a/src/reducers/ui.js
+++ b/src/reducers/ui.js
@@ -3,9 +3,10 @@
 const { ESPER, ITEM, PHOTO, NOTE, UI, SASS } = require('../constants')
 const { merge, omit } = require('../common/util')
 
-const init = {
+const INIT = {
   esper: {
     height: 50,
+    width: 50,
     tool: ESPER.TOOL.PAN,
     panel: false
   },
@@ -40,10 +41,10 @@ function expand(state, photo) {
 
 
 module.exports = {
-  ui(state = init, { type, payload }) {
+  ui(state = INIT, { type, payload }) {
     switch (type) {
       case UI.RESTORE:
-        return merge(init, payload)
+        return merge(INIT, payload)
       case UI.UPDATE:
         return merge(state, payload)
       case PHOTO.CONTRACT:
diff --git a/src/stylesheets/abstracts/_variables.scss b/src/stylesheets/abstracts/_variables.scss
index 8ceb9471c9..6731b50d66 100644
--- a/src/stylesheets/abstracts/_variables.scss
+++ b/src/stylesheets/abstracts/_variables.scss
@@ -260,10 +260,12 @@ $slider-handle-size-sm: 10px;
 
 $esper-toolbar-transition-in-hover: 0.3s 0.4s ease;
 $esper-toolbar-transition-in-focus: 0.3s ease;
-$esper-toolbar-transition-out: 0.3s 0.3s ease;
-$esper-toolbar-blur-radius: 20px;
-$esper-cursor: const("ESPER.CURSOR");
-$esper-panel-width: 240px;
+$esper-toolbar-transition-out:      0.3s 0.3s ease;
+$esper-toolbar-blur-radius:         20px;
+$esper-cursor:                      const("ESPER.CURSOR");
+$esper-panel-width:                 240px;
+$esper-panel-height:                290px;
+$esper-panel-max-size:              506px; // 700 * 13 / 18
 
 
 // Scrollbar
diff --git a/src/stylesheets/components/_icons.scss b/src/stylesheets/components/_icons.scss
index db912afc24..7fa6473ade 100644
--- a/src/stylesheets/components/_icons.scss
+++ b/src/stylesheets/components/_icons.scss
@@ -72,6 +72,12 @@
   margin: -2px; // Special treat 20 x 20 arrow icon
 }
 
+svg {
+  .esper-bg {
+    color: $icon-esper-bg;
+  }
+}
+
 .icon-container {
   flex: 0 0 auto;
   display: flex;
diff --git a/src/stylesheets/components/_slider.scss b/src/stylesheets/components/_slider.scss
index 03bccbafdf..5390254afa 100644
--- a/src/stylesheets/components/_slider.scss
+++ b/src/stylesheets/components/_slider.scss
@@ -17,6 +17,10 @@
     display: flex;
     align-items: center;
     height: $slider-handle-size + 2px;
+
+    .frameless .window-draggable & {
+      -webkit-app-region: no-drag;
+    }
   }
 
   .btn {
@@ -40,14 +44,6 @@
   }
 }
 
-.frameless {
-  .window-draggable {
-    .slider {
-      -webkit-app-region: no-drag;
-    }
-  }
-}
-
 .slider-track {
   flex: 1 1 0;
   height: $slider-track-height;
@@ -136,6 +132,10 @@
   .overlay-mode & {
     color: $slider-overlay-value-color;
   }
+
+  .frameless .window-draggable & {
+    -webkit-app-region: no-drag;
+  }
 }
 
 .slider:hover,
diff --git a/src/stylesheets/components/_toolbar.scss b/src/stylesheets/components/_toolbar.scss
index 9dded4a96a..7b1547a876 100644
--- a/src/stylesheets/components/_toolbar.scss
+++ b/src/stylesheets/components/_toolbar.scss
@@ -25,6 +25,8 @@
 
   .toolbar-context {
     position: absolute;
+    left: $default-padding-horizontal;
+    right: $default-padding-horizontal;
     height: $toolbar-height;
     display: flex;
     justify-content: space-between;
diff --git a/src/stylesheets/components/editor/_toolbar.scss b/src/stylesheets/components/editor/_toolbar.scss
index db09847ad7..0687e7ce15 100644
--- a/src/stylesheets/components/editor/_toolbar.scss
+++ b/src/stylesheets/components/editor/_toolbar.scss
@@ -14,7 +14,6 @@
   }
 
   .toolbar {
-    box-sizing: content-box;
     padding-top: 0;
     border-bottom: 1px solid $editor-toolbar-border;
     margin-bottom: 0; // Dev
@@ -23,6 +22,7 @@
     left: 0;
     top: 0;
     width: 100%;
+    height: $toolbar-height + 1px;
     //display: none;
 
     .tool-group {
diff --git a/src/stylesheets/components/esper/_esper.scss b/src/stylesheets/components/esper/_esper.scss
index 2d5ec0bf7f..f22c295f16 100644
--- a/src/stylesheets/components/esper/_esper.scss
+++ b/src/stylesheets/components/esper/_esper.scss
@@ -46,6 +46,10 @@
     flex: 1 1 0;
     display: flex;
     position: relative;
+
+    .side-by-side & {
+      flex-direction: column;
+    }
   }
 
   .esper-view {
diff --git a/src/stylesheets/components/esper/_panel.scss b/src/stylesheets/components/esper/_panel.scss
index 3817d4c00f..c9bb1a6c1e 100644
--- a/src/stylesheets/components/esper/_panel.scss
+++ b/src/stylesheets/components/esper/_panel.scss
@@ -3,33 +3,63 @@
 // --------------------------------------------------
 
 .esper-panel {
-  flex: 0 0 $esper-panel-width;
   display: flex;
   flex-direction: column;
-  box-shadow: -1px 0 0 $esper-shadow;
   background: $esper-bg;
-  margin-right: -$esper-panel-width;
   position: relative; // Must be over esper-view for a clean transition in solid mode
-  transition: margin-right 0.3s ease;
+
+  .stacked & {
+    flex: 0 0 $esper-panel-width;
+    margin-right: -$esper-panel-width - 1px; // Also hide box-shadow
+    box-shadow: -1px 0 0 $esper-shadow;
+    transition: margin-right 0.3s ease;
+  }
+
+  .side-by-side & {
+    flex: 0 0 $esper-panel-height;
+    margin-bottom: -$esper-panel-height - 1px;
+    box-shadow: 0 -1px 0 $esper-shadow;
+    transition: margin-bottom 0.3s ease;
+  }
 
   .panel-visible & {
-    margin-right: 0;
+    .stacked & {
+      margin-right: 0;
+    }
+
+    .side-by-side & {
+      margin-bottom: 0;
+    }
   }
 
   .overlay-mode & {
     position: absolute;
-    top: $toolbar-height;
-    right: 0;
-    bottom: 0;
-    width: $esper-panel-width;
     background: $esper-overlay-bg;
-    box-shadow: inset 0 1px 0 $esper-shadow;
+
+    .stacked & {
+      top: $toolbar-height;
+      right: 0;
+      bottom: 0;
+      width: $esper-panel-width;
+      box-shadow: inset 0 1px 0 $esper-shadow;
+    }
+
+    .side-by-side & {
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: $esper-panel-height;
+      box-shadow: none;
+    }
   }
 
   .adjustments {
     flex: 1 1 0;
     overflow-y: scroll;
     padding: 19px $default-padding-horizontal 0; // todo
+    margin: auto;
+    width: 100%;
+    max-width: $esper-panel-max-size;
   }
 
   .adjustment {
@@ -62,6 +92,9 @@
   .revert-btn-container {
     flex: 0 0 auto;
     padding: 6px $default-padding-horizontal;
+    margin: auto;
+    width: 100%;
+    max-width: $esper-panel-max-size;
   }
 
   .esper:not(.overlay-mode) & {
diff --git a/src/stylesheets/components/item/_view.scss b/src/stylesheets/components/item/_view.scss
index 07716e1a81..9eca0f4622 100644
--- a/src/stylesheets/components/item/_view.scss
+++ b/src/stylesheets/components/item/_view.scss
@@ -49,9 +49,15 @@
   padding-left: $space-min;
   min-width: 0; // Needed to get horizontal scrollbars in the editor’s scroll-container
 
-  > .resizable {
-    // Temporary insurance to make sure the notepad is visible when upgrading to 1.1.2
-    // See #221
-    max-height: calc(100% - 38px);
+  &.stacked {
+    > .resizable {
+      // Temporary insurance to make sure the notepad is visible when upgrading to 1.1.2
+      // See #221
+      max-height: calc(100% - 38px);
+    }
+  }
+
+  &.side-by-side {
+    flex-direction: row;
   }
 }
diff --git a/src/stylesheets/components/note/_pad.scss b/src/stylesheets/components/note/_pad.scss
index b6d70d02b8..f5df24fe9b 100644
--- a/src/stylesheets/components/note/_pad.scss
+++ b/src/stylesheets/components/note/_pad.scss
@@ -7,4 +7,8 @@
   display: flex;
   flex-direction: column;
   contain: strict;
+
+  .side-by-side & {
+    padding-left: $space-min;
+  }
 }
diff --git a/src/stylesheets/themes/_dark.scss b/src/stylesheets/themes/_dark.scss
index f85065ab88..6fefb5c744 100644
--- a/src/stylesheets/themes/_dark.scss
+++ b/src/stylesheets/themes/_dark.scss
@@ -260,6 +260,8 @@ $icon-spin-color:   var(--brand-primary);
 
 $icon-warning: var(--red-64);
 
+$icon-esper-bg: var(--shade-0);
+
 // Project
 $project-darken-color:  var(--shade-0-20);
 $project-heading-color: var(--shade-8);
diff --git a/src/stylesheets/themes/_light.scss b/src/stylesheets/themes/_light.scss
index 4886994007..432bafe54b 100644
--- a/src/stylesheets/themes/_light.scss
+++ b/src/stylesheets/themes/_light.scss
@@ -90,6 +90,7 @@ $shade-10: #000; // Black
   #{--shade-10-24}:        rgba($shade-10, 0.24);
   #{--shade-10-60}:        rgba($shade-10, 0.6);
   #{--shade-10-65}:        rgba($shade-10, 0.65);
+  #{--shade-10-14}:        rgba($shade-10, 0.14);
 }
 
 
@@ -254,6 +255,8 @@ $icon-spin-color: var(--brand-primary);
 
 $icon-warning: var(--red);
 
+$icon-esper-bg: var(--shade-10-14);
+
 // Project
 $project-darken-color:  var(--shade-10-10);
 $project-heading-color: var(--shade-8);