diff --git a/package.json b/package.json
index cf9566ec6b..ee7e5aa144 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,6 @@
     "leaflet.locatecontrol": "0.45.1",
     "lodash": "4.16.6",
     "moment": "2.13.0",
-    "node-uuid": "1.4.3",
     "object-assign": "4.1.1",
     "ogc-schemas": "2.6.1",
     "openlayers": "4.0.1",
@@ -117,13 +116,13 @@
     "react-dnd-html5-backend": "2.2.3",
     "react-dock": "0.2.3",
     "react-dom": "15.4.2",
-    "react-draggable": "1.3.4",
+    "react-draggable": "2.2.3",
     "react-dropzone": "3.4.0",
     "react-intl": "2.2.3",
     "react-joyride": "1.10.1",
     "react-nouislider": "1.11.0",
     "react-overlays": "0.6.3",
-    "react-pdf": "0.0.10",
+    "react-pdf": "1.6.1",
     "react-redux": "4.4.1",
     "react-router": "2.5.2",
     "react-router-redux": "3.0.0",
@@ -151,6 +150,7 @@
     "turf-point-on-surface": "3.0.10",
     "turf-union": "3.0.10",
     "url": "0.10.3",
+    "uuid": "3.0.1",
     "w3c-schemas": "1.3.1",
     "xml2js": "0.4.17"
   },
diff --git a/web/client/actions/mapInfo.js b/web/client/actions/mapInfo.js
index 3064a064ff..5c3b342242 100644
--- a/web/client/actions/mapInfo.js
+++ b/web/client/actions/mapInfo.js
@@ -8,7 +8,7 @@
 
 const assign = require('object-assign');
 const axios = require('axios');
-const uuid = require('node-uuid');
+const uuid = require('uuid');
 const GeoCodingApi = require('../api/Nominatim');
 
 const LOAD_FEATURE_INFO = 'LOAD_FEATURE_INFO';
diff --git a/web/client/actions/vectorstyler.js b/web/client/actions/vectorstyler.js
index e8264ff286..c8ff1f5447 100644
--- a/web/client/actions/vectorstyler.js
+++ b/web/client/actions/vectorstyler.js
@@ -5,7 +5,7 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const uuid = require('node-uuid');
+const uuid = require('uuid');
 
 const SET_VECTOR_RULE_PARAMETER = 'SET_VECTOR_RULE_PARAMETER';
 const NEW_VECTOR_RULE = 'NEW_VECTOR_RULE';
diff --git a/web/client/components/TOC/background/BackgroundSwitcher.jsx b/web/client/components/TOC/background/BackgroundSwitcher.jsx
index b6275759a0..b540d05067 100644
--- a/web/client/components/TOC/background/BackgroundSwitcher.jsx
+++ b/web/client/components/TOC/background/BackgroundSwitcher.jsx
@@ -101,7 +101,7 @@ let BackgroundSwitcher = React.createClass({
     },
     render() {
         return (
-           <Grid id={this.props.id} className="BackgroundSwitcherComponent" header={this.props.name} fluid={this.props.fluid}>{this.renderBackgrounds()}</Grid>
+           <Grid id={this.props.id} className="BackgroundSwitcherComponent" fluid={this.props.fluid}>{this.renderBackgrounds()}</Grid>
         );
     },
     changeLayerVisibility(eventObj) {
diff --git a/web/client/components/print/PrintOption.jsx b/web/client/components/print/PrintOption.jsx
index f50e465069..fe39df1d5c 100644
--- a/web/client/components/print/PrintOption.jsx
+++ b/web/client/components/print/PrintOption.jsx
@@ -28,7 +28,7 @@ const PrintOption = React.createClass({
         };
     },
     onChange() {
-        this.props.onChange(this.refs.input.getInputDOMNode().checked);
+        this.props.onChange(!this.refs.input.props.checked);
     },
     render() {
         return (
diff --git a/web/client/components/print/PrintPreview.jsx b/web/client/components/print/PrintPreview.jsx
index 7a0d29a19b..75519653bc 100644
--- a/web/client/components/print/PrintPreview.jsx
+++ b/web/client/components/print/PrintPreview.jsx
@@ -8,7 +8,7 @@
 const React = require('react');
 
 const {Button, Glyphicon} = require('react-bootstrap');
-const PDF = require('react-pdf');
+const ReactPDF = require('react-pdf').default;
 
 const PrintPreview = React.createClass({
     propTypes: {
@@ -32,7 +32,7 @@ const PrintPreview = React.createClass({
             scale: 1.0,
             minScale: 0.25,
             maxScale: 8.0,
-            currentPage: 1,
+            currentPage: 0,
             pages: 1,
             zoomFactor: 2.0,
             back: () => {},
@@ -44,14 +44,14 @@ const PrintPreview = React.createClass({
         };
     },
     onDocumentComplete(pages) {
-        this.props.setPages(pages);
+        this.props.setPages(pages && pages.total || 0);
     },
     render() {
         if (window.PDFJS) {
             return (
                 <div>
                     <div style={this.props.style}>
-                        <PDF file={this.props.url} scale={this.props.scale} page={this.props.currentPage} onDocumentComplete={this.onDocumentComplete}/>
+                        <ReactPDF file={this.props.url} scale={this.props.scale} pageIndex={this.props.currentPage} onDocumentLoad={this.onDocumentComplete}/>
                     </div>
                     <div style={{marginTop: "10px"}}>
                         <Button bsStyle={this.props.buttonStyle} style={{marginRight: "10px"}} onClick={this.props.back}><Glyphicon glyph="arrow-left"/></Button>
@@ -59,11 +59,11 @@ const PrintPreview = React.createClass({
                         <Button bsStyle={this.props.buttonStyle} disabled={this.props.scale <= this.props.minScale} onClick={this.zoomOut}><Glyphicon glyph="zoom-out"/></Button>
                         <label style={{marginLeft: "10px", marginRight: "10px"}}>{this.props.scale}x</label>
                         <div className={"print-download btn btn-" + this.props.buttonStyle}><a href={this.props.url} target="_blank"><Glyphicon glyph="save"/></a></div>
-                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === 1} onClick={this.firstPage}><Glyphicon glyph="step-backward"/></Button>
-                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === 1} onClick={this.prevPage}><Glyphicon glyph="chevron-left"/></Button>
-                        <label style={{marginLeft: "10px", marginRight: "10px"}}>{this.props.currentPage} / {this.props.pages}</label>
-                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === this.props.pages} onClick={this.nextPage}><Glyphicon glyph="chevron-right"/></Button>
-                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === this.props.pages} onClick={this.lastPage}><Glyphicon glyph="step-forward"/></Button>
+                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === 0} onClick={this.firstPage}><Glyphicon glyph="step-backward"/></Button>
+                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === 0} onClick={this.prevPage}><Glyphicon glyph="chevron-left"/></Button>
+                        <label style={{marginLeft: "10px", marginRight: "10px"}}>{this.props.currentPage + 1} / {this.props.pages}</label>
+                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === this.props.pages - 1} onClick={this.nextPage}><Glyphicon glyph="chevron-right"/></Button>
+                        <Button bsStyle={this.props.buttonStyle} disabled={this.props.currentPage === this.props.pages - 1} onClick={this.lastPage}><Glyphicon glyph="step-forward"/></Button>
                     </div>
                 </div>
             );
@@ -71,22 +71,22 @@ const PrintPreview = React.createClass({
         return null;
     },
     firstPage() {
-        if (this.props.currentPage > 1) {
-            this.props.setPage(1);
+        if (this.props.currentPage > 0) {
+            this.props.setPage(0);
         }
     },
     lastPage() {
-        if (this.props.currentPage < this.props.pages) {
-            this.props.setPage(this.props.pages);
+        if (this.props.currentPage < this.props.pages - 1 ) {
+            this.props.setPage(this.props.pages - 1);
         }
     },
     prevPage() {
-        if (this.props.currentPage > 1) {
+        if (this.props.currentPage > 0) {
             this.props.setPage(this.props.currentPage - 1);
         }
     },
     nextPage() {
-        if (this.props.currentPage < this.props.pages) {
+        if (this.props.currentPage < this.props.pages - 1) {
             this.props.setPage(this.props.currentPage + 1);
         }
     },
diff --git a/web/client/components/print/__tests__/PrintPreview-test.jsx b/web/client/components/print/__tests__/PrintPreview-test.jsx
index 5684e9cc42..128bf8e4af 100644
--- a/web/client/components/print/__tests__/PrintPreview-test.jsx
+++ b/web/client/components/print/__tests__/PrintPreview-test.jsx
@@ -48,20 +48,12 @@ describe("Test the PrintPreview component", () => {
         expect(node).toExist();
     });
 
-    it('creates component and loads pdf', (done) => {
-        const handler = (pages) => {
-            expect(pages).toBe(10);
-            done();
-        };
-        ReactDOM.render(<PrintPreview setPages={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
-    });
-
     it('pdf next page', (done) => {
         const handler = (page) => {
             expect(page).toBe(2);
             done();
         };
-        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={1} setPage={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={1} setPage={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[5]);
@@ -69,10 +61,10 @@ describe("Test the PrintPreview component", () => {
 
     it('pdf last page', (done) => {
         const handler = (page) => {
-            expect(page).toBe(10);
+            expect(page).toBe(9);
             done();
         };
-        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={1} setPage={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={1} setPage={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[6]);
@@ -80,10 +72,10 @@ describe("Test the PrintPreview component", () => {
 
     it('pdf first page', (done) => {
         const handler = (page) => {
-            expect(page).toBe(1);
+            expect(page).toBe(0);
             done();
         };
-        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={10} setPage={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={10} setPage={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[3]);
@@ -94,7 +86,7 @@ describe("Test the PrintPreview component", () => {
             expect(page).toBe(9);
             done();
         };
-        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={10} setPage={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<PrintPreview pages={10} currentPage={10} setPage={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[4]);
@@ -106,7 +98,7 @@ describe("Test the PrintPreview component", () => {
             done();
         };
         const cmp = ReactDOM.render(<PrintPreview zoomFactor={2.0} scale={1.0}
-            pages={10} currentPage={1} setScale={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+            pages={10} currentPage={1} setScale={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[1]);
@@ -118,7 +110,7 @@ describe("Test the PrintPreview component", () => {
             done();
         };
         const cmp = ReactDOM.render(<PrintPreview zoomFactor={2.0} scale={4.0}
-            pages={10} currentPage={1} setScale={handler} url="base/web/client/test-resources/print.pdf"/>, document.getElementById("container"));
+            pages={10} currentPage={1} setScale={handler} url=""/>, document.getElementById("container"));
         expect(cmp).toExist();
         const node = ReactDOM.findDOMNode(cmp);
         ReactTestUtils.Simulate.click(node.getElementsByTagName('button')[2]);
diff --git a/web/client/plugins/Print.jsx b/web/client/plugins/Print.jsx
index 1fdabdb66d..ba6944b8bc 100644
--- a/web/client/plugins/Print.jsx
+++ b/web/client/plugins/Print.jsx
@@ -318,7 +318,7 @@ const Print = React.createClass({
     },
     print() {
         const spec = this.props.getPrintSpecification(this.props.printSpec);
-        this.props.setPage(1);
+        this.props.setPage(0);
         this.props.onBeforePrint();
         this.props.onPrint(this.props.capabilities.createURL, spec);
     }
diff --git a/web/client/plugins/print/index.js b/web/client/plugins/print/index.js
index 3c9e105fc1..9ce72f58d0 100644
--- a/web/client/plugins/print/index.js
+++ b/web/client/plugins/print/index.js
@@ -140,7 +140,7 @@ const PrintSubmit = connect((state) => ({
 const PrintPreview = connect((state) => ({
     url: state.print && ConfigUtils.getProxiedUrl(state.print.pdfUrl),
     scale: state.controls && state.controls.print && state.controls.print.viewScale || 0.5,
-    currentPage: state.controls && state.controls.print && state.controls.print.currentPage || 1,
+    currentPage: state.controls && state.controls.print && state.controls.print.currentPage || 0,
     pages: state.controls && state.controls.print && state.controls.print.pages || 1
 }), {
     back: printCancel,