diff --git a/src/components/App.css b/src/components/App.css
index 81077ca02..cecfe7266 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -2,23 +2,16 @@ body {
     background-color: #f4f6f8;
 }
 
-@media print {
-    body {
-        width: 100% !important;
-        padding: 0 !important;
-        margin: 0 !important;
-        background-color: white;
-    }
-
-    .app-shell-app {
-        overflow: visible !important;
-    }
+.app-shell-app {
+    overflow: hidden !important;
 }
 
 .dashboard-wrapper {
     background-color: #f4f6f8;
     padding-left: 10px;
     padding-right: 10px;
+    overflow: auto;
+    padding-bottom: 100px;
 }
 
 /* plugin TODO */
@@ -35,3 +28,16 @@ table.pivot * {
 .secondary-light-bg {
     background-color: #48a999;
 }
+
+@media print {
+    body {
+        width: 100% !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        background-color: white;
+    }
+
+    .app-shell-app {
+        overflow: visible !important;
+    }
+}
diff --git a/src/components/ControlBar/ControlBar.js b/src/components/ControlBar/ControlBar.js
index 68e9b6baf..38cb9dad8 100644
--- a/src/components/ControlBar/ControlBar.js
+++ b/src/components/ControlBar/ControlBar.js
@@ -4,7 +4,7 @@ import { colors } from '@dhis2/ui'
 
 import classes from './styles/ControlBar.module.css'
 
-const DRAG_HANDLE_HEIGHT = 7
+export const DRAG_HANDLE_HEIGHT = 7
 
 class ControlBar extends React.Component {
     constructor(props) {
diff --git a/src/components/ControlBar/EditBar.js b/src/components/ControlBar/EditBar.js
index b56703a2c..46cebbdf0 100644
--- a/src/components/ControlBar/EditBar.js
+++ b/src/components/ControlBar/EditBar.js
@@ -210,6 +210,7 @@ export class EditBar extends Component {
                         </div>
                     </div>
                 </ControlBar>
+                <div className={classes.topMargin} />
                 {this.translationDialog()}
                 {this.confirmDeleteDialog()}
             </>
diff --git a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
index a46240776..16a44a638 100644
--- a/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
+++ b/src/components/ControlBar/__tests__/__snapshots__/EditBar.spec.js.snap
@@ -32,6 +32,9 @@ exports[`EditBar renders the EditBar 1`] = `
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -67,6 +70,9 @@ exports[`EditBar when update access is false renders only the Discard button 1`]
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
 
@@ -132,6 +138,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -226,6 +235,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -320,6 +332,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <Component
     className="translation-dialog"
     d2={
@@ -421,6 +436,9 @@ exports[`EditBar when update access is true when dashboard id property provided
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
   <ConfirmDeleteDialog
     onContinueEditing={[Function]}
     onDeleteConfirmed={[Function]}
@@ -484,5 +502,8 @@ exports[`EditBar when update access is true when no dashboard id property render
       </div>
     </div>
   </ControlBar>
+  <div
+    className="topMargin"
+  />
 </Fragment>
 `;
diff --git a/src/components/ControlBar/controlBarDimensions.js b/src/components/ControlBar/controlBarDimensions.js
index 883dd3e41..ae9d5e425 100644
--- a/src/components/ControlBar/controlBarDimensions.js
+++ b/src/components/ControlBar/controlBarDimensions.js
@@ -3,6 +3,7 @@ import { SHOWMORE_BAR_HEIGHT } from './ShowMoreButton'
 export const CONTROL_BAR_ROW_HEIGHT = 40
 export const FIRST_ROW_PADDING_HEIGHT = 10
 export const MIN_ROW_COUNT = 1
+export const HEADERBAR_HEIGHT = 48
 
 const CONTROL_BAR_OUTER_HEIGHT_DIFF =
     FIRST_ROW_PADDING_HEIGHT + SHOWMORE_BAR_HEIGHT - 2 // 2 pixel "adjustment"
diff --git a/src/components/ControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/styles/DashboardsBar.module.css
index 7276f8e0e..74515c1ce 100644
--- a/src/components/ControlBar/styles/DashboardsBar.module.css
+++ b/src/components/ControlBar/styles/DashboardsBar.module.css
@@ -10,3 +10,7 @@
 .rightControls {
     float: right;
 }
+
+.topMargin {
+    margin-top: 71px;
+}
diff --git a/src/components/Dashboard/DashboardVerticalOffset.js b/src/components/Dashboard/DashboardVerticalOffset.js
index 8f214b742..f57701d4f 100644
--- a/src/components/Dashboard/DashboardVerticalOffset.js
+++ b/src/components/Dashboard/DashboardVerticalOffset.js
@@ -7,10 +7,11 @@ import {
     MIN_ROW_COUNT,
 } from '../ControlBar/controlBarDimensions'
 import { sGetControlBarUserRows } from '../../reducers/controlBar'
+import { DRAG_HANDLE_HEIGHT } from '../ControlBar/ControlBar'
 
 const DashboardVerticalOffset = props => {
     const rows = props.editMode ? MIN_ROW_COUNT : props.userRows
-    const marginTop = getControlBarHeight(rows)
+    const marginTop = getControlBarHeight(rows) + DRAG_HANDLE_HEIGHT
 
     return <div className="page-container-top-margin" style={{ marginTop }} />
 }
diff --git a/src/components/Dashboard/EditDashboard.js b/src/components/Dashboard/EditDashboard.js
index 3b364383e..39972bc83 100644
--- a/src/components/Dashboard/EditDashboard.js
+++ b/src/components/Dashboard/EditDashboard.js
@@ -3,7 +3,6 @@ import { connect } from 'react-redux'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
 import EditBar from '../ControlBar/EditBar'
@@ -16,6 +15,10 @@ import {
     sGetDashboardItems,
 } from '../../reducers/dashboards'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
 
 export class EditDashboard extends Component {
     state = {
@@ -44,8 +47,11 @@ export class EditDashboard extends Component {
             return <LayoutPrintPreview fromEdit={true} />
         }
 
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
-            <div className="dashboard-wrapper">
+            <div className="dashboard-wrapper" style={{ height }}>
                 <TitleBar edit={true} />
                 <ItemGrid edit={true} />
             </div>
@@ -56,7 +62,6 @@ export class EditDashboard extends Component {
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.updateAccess ? (
                     this.renderGrid()
                 ) : (
diff --git a/src/components/Dashboard/NewDashboard.js b/src/components/Dashboard/NewDashboard.js
index ea610f53d..4d6547d40 100644
--- a/src/components/Dashboard/NewDashboard.js
+++ b/src/components/Dashboard/NewDashboard.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 
-import DashboardVerticalOffset from './DashboardVerticalOffset'
 import EditBar from '../ControlBar/EditBar'
 import TitleBar from '../TitleBar/TitleBar'
 import ItemGrid from '../ItemGrid/ItemGrid'
@@ -11,20 +10,27 @@ import LayoutPrintPreview from './PrintLayoutDashboard'
 import { acSetEditNewDashboard } from '../../actions/editDashboard'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard'
 
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
+
 class NewDashboard extends Component {
     componentDidMount() {
         this.props.setNewDashboard()
     }
 
     render() {
+        const height =
+            window.innerHeight - HEADERBAR_HEIGHT - getControlBarHeight(1)
+
         return (
             <>
                 <EditBar />
-                <DashboardVerticalOffset editMode={true} />
                 {this.props.isPrintPreviewView ? (
                     <LayoutPrintPreview fromEdit={true} />
                 ) : (
-                    <div className="dashboard-wrapper">
+                    <div className="dashboard-wrapper" style={{ height }}>
                         <TitleBar edit={true} />
                         <ItemGrid edit={true} />
                     </div>
diff --git a/src/components/Dashboard/PrintActionsBar.js b/src/components/Dashboard/PrintActionsBar.js
index deb2304de..81e015e53 100644
--- a/src/components/Dashboard/PrintActionsBar.js
+++ b/src/components/Dashboard/PrintActionsBar.js
@@ -8,6 +8,9 @@ import { a4LandscapeWidthPx } from '../../modules/printUtils'
 
 import classes from './styles/PrintActionsBar.module.css'
 
+// 42px set in the module css file
+export const PRINT_ACTIONS_BAR_HEIGHT = 42
+
 const PrintActionsBar = ({ id }) => {
     const width =
         a4LandscapeWidthPx < window.innerWidth
@@ -15,17 +18,20 @@ const PrintActionsBar = ({ id }) => {
             : window.innerWidth
 
     return (
-        <div className={classes.container}>
-            <div className={classes.inner} style={{ width }}>
-                <Link className={classes.link} to={`/${id}`}>
-                    <Button>
-                        <LessHorizontalIcon />
-                        {i18n.t('Exit print preview')}
-                    </Button>
-                </Link>
-                <Button onClick={window.print}>{i18n.t('Print')}</Button>
+        <>
+            <div className={classes.container}>
+                <div className={classes.inner} style={{ width }}>
+                    <Link className={classes.link} to={`/${id}`}>
+                        <Button>
+                            <LessHorizontalIcon />
+                            {i18n.t('Exit print preview')}
+                        </Button>
+                    </Link>
+                    <Button onClick={window.print}>{i18n.t('Print')}</Button>
+                </div>
             </div>
-        </div>
+            <div className={classes.topMargin} />
+        </>
     )
 }
 
diff --git a/src/components/Dashboard/PrintDashboard.js b/src/components/Dashboard/PrintDashboard.js
index 850644f89..f33140198 100644
--- a/src/components/Dashboard/PrintDashboard.js
+++ b/src/components/Dashboard/PrintDashboard.js
@@ -18,6 +18,7 @@ import {
 } from '../../reducers/dashboards'
 import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes'
 import { a4LandscapeWidthPx } from '../../modules/printUtils'
+import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar'
 
 import classes from './styles/PrintDashboard.module.css'
 
@@ -76,10 +77,12 @@ export class PrintDashboard extends Component {
     }
 
     render() {
+        const height = window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT
+
         return (
             <>
                 <PrintActionsBar id={this.props.dashboard.id} />
-                <div className={classes.wrapper}>
+                <div className={classes.wrapper} style={{ height }}>
                     <PrintInfo isLayout={false} />
                     <div
                         className={classes.pageOuter}
diff --git a/src/components/Dashboard/PrintLayoutDashboard.js b/src/components/Dashboard/PrintLayoutDashboard.js
index f98d67fe9..77fde0684 100644
--- a/src/components/Dashboard/PrintLayoutDashboard.js
+++ b/src/components/Dashboard/PrintLayoutDashboard.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
+import { spacers } from '@dhis2/ui'
 
 import PrintInfo from './PrintInfo'
 import PrintActionsBar from './PrintActionsBar'
@@ -20,31 +21,56 @@ import {
     sGetDashboardItems,
 } from '../../reducers/dashboards'
 import { PAGEBREAK, PRINT_TITLE_PAGE } from '../../modules/itemTypes'
-import { a4LandscapeWidthPx } from '../../modules/printUtils'
+import {
+    a4LandscapeWidthPx,
+    MAX_ITEM_GRID_HEIGHT,
+} from '../../modules/printUtils'
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
+import { PRINT_ACTIONS_BAR_HEIGHT } from './PrintActionsBar'
+import { DRAG_HANDLE_HEIGHT } from '../ControlBar/ControlBar'
 
 import classes from './styles/PrintLayoutDashboard.module.css'
 
 import './styles/print.css'
 import './styles/print-layout.css'
 
-const isEven = n => n % 2 == 0
+const EDIT_BAR_HEIGHT = getControlBarHeight(1) + DRAG_HANDLE_HEIGHT
+
+const isLeapPage = n => {
+    // pages 5,9,13,17,21,25,29... are leap pages
+    let x = 0
+    const startPage = 1
+    const getMultiple = factor => startPage + 4 * factor
+    let multiple = getMultiple(0)
+    let isLeapPage = false
+    while (multiple < n) {
+        multiple = getMultiple(x)
+        ++x
+        if (multiple === n) {
+            isLeapPage = true
+            break
+        }
+    }
+    return isLeapPage
+}
 
 const addPageBreaks = ({ items, addDashboardItem }) => {
     // add enough page breaks so that each item could
     // be put on its own page. Due to the react-grid-layout
     // unit system, we have to estimate roughly the size of each
-    // page. At regular intervals adding an extra unit, like a leap year :P
+    // page. At regular intervals add a unit, like a leap year
     let yPos = 0
     const yPosList = []
-    for (let i = 0; i < items.length; ++i) {
-        if (i === 0) {
+    for (let pageNum = 1; pageNum <= items.length; ++pageNum) {
+        if (pageNum === 1) {
             yPos += 35
-        } else if (i === 4 || i === 10) {
+        } else if (isLeapPage(pageNum)) {
             yPos += 40
-        } else if (isEven(i)) {
-            yPos += 39
         } else {
-            yPos += 40
+            yPos += 39
         }
         yPosList.push(yPos)
     }
@@ -68,9 +94,9 @@ export class PrintLayoutDashboard extends Component {
             // If any items are taller than one page, reduce it to one
             // page (react-grid-layout units)
             this.props.items.forEach(item => {
-                if (item.h > 34) {
+                if (item.h > MAX_ITEM_GRID_HEIGHT) {
                     this.props.updateDashboardItem(
-                        Object.assign({}, item, { h: 34 })
+                        Object.assign({}, item, { h: MAX_ITEM_GRID_HEIGHT })
                     )
                 }
             })
@@ -93,14 +119,25 @@ export class PrintLayoutDashboard extends Component {
         }
     }
 
+    getWrapperStyle = () => {
+        return this.props.fromEdit
+            ? {
+                  paddingTop: spacers.dp24,
+                  height:
+                      window.innerHeight - EDIT_BAR_HEIGHT - HEADERBAR_HEIGHT,
+              }
+            : {
+                  height: window.innerHeight - PRINT_ACTIONS_BAR_HEIGHT,
+              }
+    }
+
     render() {
-        const style = this.props.fromEdit ? { marginTop: '100px' } : {}
         return (
             <>
                 {!this.props.fromEdit && (
                     <PrintActionsBar id={this.props.dashboard.id} />
                 )}
-                <div className={classes.wrapper} style={style}>
+                <div className={classes.wrapper} style={this.getWrapperStyle()}>
                     {!this.props.fromEdit && <PrintInfo isLayout={true} />}
                     <div
                         className={classes.pageOuter}
diff --git a/src/components/Dashboard/ViewDashboard.js b/src/components/Dashboard/ViewDashboard.js
index 519647d1e..fc2e00b00 100644
--- a/src/components/Dashboard/ViewDashboard.js
+++ b/src/components/Dashboard/ViewDashboard.js
@@ -9,8 +9,13 @@ import DashboardsBar from '../ControlBar/DashboardsBar'
 import DashboardVerticalOffset from './DashboardVerticalOffset'
 import { sGetIsEditing } from '../../reducers/editDashboard'
 import { sGetIsPrinting } from '../../reducers/printDashboard'
+import { sGetControlBarUserRows } from '../../reducers/controlBar'
 import { acClearEditDashboard } from '../../actions/editDashboard'
 import { acClearPrintDashboard } from '../../actions/printDashboard'
+import {
+    getControlBarHeight,
+    HEADERBAR_HEIGHT,
+} from '../ControlBar/controlBarDimensions'
 
 export const ViewDashboard = props => {
     useEffect(() => {
@@ -21,11 +26,16 @@ export const ViewDashboard = props => {
         }
     }, [props.dashboardIsEditing, props.dashboardIsPrinting])
 
+    const height =
+        window.innerHeight -
+        HEADERBAR_HEIGHT -
+        getControlBarHeight(props.controlBarRows)
+
     return (
         <>
             <DashboardsBar />
             <DashboardVerticalOffset />
-            <div className="dashboard-wrapper">
+            <div className="dashboard-wrapper" style={{ height }}>
                 <TitleBar edit={false} />
                 <FilterBar />
                 <ItemGrid edit={false} />
@@ -37,6 +47,7 @@ export const ViewDashboard = props => {
 ViewDashboard.propTypes = {
     clearEditDashboard: PropTypes.func,
     clearPrintDashboard: PropTypes.func,
+    controlBarRows: PropTypes.number,
     dashboardIsEditing: PropTypes.bool,
     dashboardIsPrinting: PropTypes.bool,
 }
@@ -45,6 +56,7 @@ const mapStateToProps = state => {
     return {
         dashboardIsEditing: sGetIsEditing(state),
         dashboardIsPrinting: sGetIsPrinting(state),
+        controlBarRows: sGetControlBarUserRows(state),
     }
 }
 
diff --git a/src/components/Dashboard/__tests__/ViewDashboard.spec.js b/src/components/Dashboard/__tests__/ViewDashboard.spec.js
index f3dac4493..313b5066b 100644
--- a/src/components/Dashboard/__tests__/ViewDashboard.spec.js
+++ b/src/components/Dashboard/__tests__/ViewDashboard.spec.js
@@ -23,6 +23,7 @@ describe('ViewDashboard', () => {
             clearPrintDashboard: jest.fn(),
             dashboardIsEditing: false,
             dashboardIsPrinting: false,
+            controlBarRows: 2,
         }
     })
 
diff --git a/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap
index 514654f9a..e58517503 100644
--- a/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap
+++ b/src/components/Dashboard/__tests__/__snapshots__/EditDashboard.spec.js.snap
@@ -3,11 +3,13 @@
 exports[`EditDashboard renders message when enough access 1`] = `
 <Fragment>
   <EditBar />
-  <DashboardVerticalOffset
-    editMode={true}
-  />
   <div
     className="dashboard-wrapper"
+    style={
+      Object {
+        "height": 656,
+      }
+    }
   >
     <TitleBar
       edit={true}
@@ -22,9 +24,6 @@ exports[`EditDashboard renders message when enough access 1`] = `
 exports[`EditDashboard renders message when not enough access 1`] = `
 <Fragment>
   <EditBar />
-  <DashboardVerticalOffset
-    editMode={true}
-  />
   <NoContentMessage
     text="No access"
   />
@@ -34,9 +33,6 @@ exports[`EditDashboard renders message when not enough access 1`] = `
 exports[`EditDashboard renders print preview 1`] = `
 <Fragment>
   <EditBar />
-  <DashboardVerticalOffset
-    editMode={true}
-  />
   <LayoutPrintPreview
     fromEdit={true}
   />
diff --git a/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap
index 2f9cd8ca2..60712f37e 100644
--- a/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap
+++ b/src/components/Dashboard/__tests__/__snapshots__/ViewDashboard.spec.js.snap
@@ -6,6 +6,11 @@ exports[`ViewDashboard renders correctly default 1`] = `
   <DashboardVerticalOffset />
   <div
     className="dashboard-wrapper"
+    style={
+      Object {
+        "height": 616,
+      }
+    }
   >
     <TitleBar
       edit={false}
diff --git a/src/components/Dashboard/styles/PrintActionsBar.module.css b/src/components/Dashboard/styles/PrintActionsBar.module.css
index f8b84c85d..824f06144 100644
--- a/src/components/Dashboard/styles/PrintActionsBar.module.css
+++ b/src/components/Dashboard/styles/PrintActionsBar.module.css
@@ -2,6 +2,13 @@
     background-color: var(--colors-grey600);
     width: 100%;
     padding: 3px;
+    position: fixed;
+    z-index: 10;
+    height: 42px;
+}
+
+.topMargin {
+    margin-top: 42px;
 }
 
 .inner {
@@ -20,4 +27,8 @@
     .container {
         display: none;
     }
+
+    .topMargin {
+        margin-top: 0px;
+    }
 }
diff --git a/src/components/Dashboard/styles/PrintDashboard.module.css b/src/components/Dashboard/styles/PrintDashboard.module.css
index 95c2e39b3..e3d9987ee 100644
--- a/src/components/Dashboard/styles/PrintDashboard.module.css
+++ b/src/components/Dashboard/styles/PrintDashboard.module.css
@@ -1,10 +1,12 @@
 .wrapper {
     background-color: #f4f6f8;
-    margin-left: 30px;
+    margin-left: var(--spacers-dp32);
+    padding-left: var(--spacers-dp12);
+    overflow-y: auto;
 }
 
 .pageOuter {
-    padding: 10px;
+    padding: var(--spacers-dp12);
     background-color: white;
     border-radius: 3px;
     box-shadow: 0px 0px 3px 0px var(--colors-grey500);
@@ -12,16 +14,16 @@
 }
 
 @media print {
-    .pageWrapper {
-        display: none;
-    }
-
     .wrapper {
         background-color: white;
+        height: auto !important;
+        overflow: visible !important;
+        margin-left: 0px;
+        padding-left: 0px;
     }
 
     .pageOuter {
         box-shadow: none;
-        border-radius: none;
+        border-radius: 0px;
     }
 }
diff --git a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css
index 95c2e39b3..e3d9987ee 100644
--- a/src/components/Dashboard/styles/PrintLayoutDashboard.module.css
+++ b/src/components/Dashboard/styles/PrintLayoutDashboard.module.css
@@ -1,10 +1,12 @@
 .wrapper {
     background-color: #f4f6f8;
-    margin-left: 30px;
+    margin-left: var(--spacers-dp32);
+    padding-left: var(--spacers-dp12);
+    overflow-y: auto;
 }
 
 .pageOuter {
-    padding: 10px;
+    padding: var(--spacers-dp12);
     background-color: white;
     border-radius: 3px;
     box-shadow: 0px 0px 3px 0px var(--colors-grey500);
@@ -12,16 +14,16 @@
 }
 
 @media print {
-    .pageWrapper {
-        display: none;
-    }
-
     .wrapper {
         background-color: white;
+        height: auto !important;
+        overflow: visible !important;
+        margin-left: 0px;
+        padding-left: 0px;
     }
 
     .pageOuter {
         box-shadow: none;
-        border-radius: none;
+        border-radius: 0px;
     }
 }
diff --git a/src/components/Dashboard/styles/print-layout.css b/src/components/Dashboard/styles/print-layout.css
index 7437b79b2..7b163f9a4 100644
--- a/src/components/Dashboard/styles/print-layout.css
+++ b/src/components/Dashboard/styles/print-layout.css
@@ -1,16 +1,19 @@
-@media print {
-    .react-grid-item.layout.PAGEBREAK {
-        display: none !important;
-    }
-}
-
 .react-grid-item.layout.PAGEBREAK {
-    margin-left: -23px;
+    margin-left: -25px;
     min-height: 50px !important;
     height: 50px !important;
-    margin-bottom: 40px !important;
 }
 
 .react-grid-item.layout.SPACER {
     visibility: hidden;
 }
+
+@media print {
+    .react-grid-item.layout.PAGEBREAK {
+        visibility: hidden !important;
+    }
+
+    .react-grid-item.layout.PAGEBREAK.removed {
+        display: none !important;
+    }
+}
diff --git a/src/components/Item/ProgressiveLoadingContainer.js b/src/components/Item/ProgressiveLoadingContainer.js
index f202c5136..60968d490 100644
--- a/src/components/Item/ProgressiveLoadingContainer.js
+++ b/src/components/Item/ProgressiveLoadingContainer.js
@@ -53,7 +53,7 @@ class ProgressiveLoadingContainer extends Component {
 
         const containers = [
             window, // this is probably unnecessary
-            ...document.getElementsByClassName('app-shell-app'),
+            ...document.getElementsByClassName('dashboard-wrapper'),
         ]
         containers.forEach(container => {
             container.addEventListener('scroll', this.shouldLoadHandler)
@@ -62,7 +62,7 @@ class ProgressiveLoadingContainer extends Component {
     removeHandler() {
         const containers = [
             window, // this is probably unnecessary
-            ...document.getElementsByClassName('app-shell-app'),
+            ...document.getElementsByClassName('dashboard-wrapper'),
         ]
         containers.forEach(container => {
             container.removeEventListener('scroll', this.shouldLoadHandler)
diff --git a/src/components/ItemGrid/gridUtil.js b/src/components/ItemGrid/gridUtil.js
index 060c4b6b6..953244b9b 100644
--- a/src/components/ItemGrid/gridUtil.js
+++ b/src/components/ItemGrid/gridUtil.js
@@ -1,6 +1,7 @@
 import isFunction from 'd2-utilizr/lib/isFunction'
 
 import { orObject } from '../../modules/util'
+import { MAX_ITEM_GRID_HEIGHT } from '../../modules/printUtils'
 
 // Dimensions for the react-grid-layout
 
@@ -83,7 +84,7 @@ export const getPrintTitlePageItemShape = () => {
         x: 0,
         y: 0,
         w: GRID_COLUMNS - 1,
-        h: 30,
+        h: MAX_ITEM_GRID_HEIGHT,
         static: true,
         minH: 1,
     }
diff --git a/src/components/TitleBar/TitleBar.js b/src/components/TitleBar/TitleBar.js
index b593b84e7..f8c256a43 100644
--- a/src/components/TitleBar/TitleBar.js
+++ b/src/components/TitleBar/TitleBar.js
@@ -26,7 +26,7 @@ const TitleBar = ({ edit }) => {
         <div
             className="titlebar-wrapper"
             style={{
-                padding: '20px 15px 5px 10px',
+                padding: '13px 15px 5px 10px',
             }}
         >
             {edit ? (
diff --git a/src/modules/printUtils.js b/src/modules/printUtils.js
index 465df314e..788498f4d 100644
--- a/src/modules/printUtils.js
+++ b/src/modules/printUtils.js
@@ -7,6 +7,8 @@ import { itemTypeMap } from './itemTypes'
 // const a4LandscapeHeightPx = 794
 export const a4LandscapeWidthPx = 1102
 
+export const MAX_ITEM_GRID_HEIGHT = 33
+
 export const getDomGridItemsSortedByYPos = elements => {
     const types = Object.keys(itemTypeMap)
     const elementsWithBoundingRect = orArray(elements).map(el => {