diff --git a/public/js/main.js b/public/js/main.js
index 00b1fc3..4a693d8 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -379,6 +379,11 @@ $(document).ready(function () {
         })
     });
 
+    // add page
+    $("#addPageBtn").click(function () {
+        whiteboard.addPage();
+    });
+
     // upload json containing steps
     $("#uploadJsonBtn").click(function () {
         $("#myFile").click();
diff --git a/public/js/whiteboard.js b/public/js/whiteboard.js
index b1aa1aa..6ca34f9 100644
--- a/public/js/whiteboard.js
+++ b/public/js/whiteboard.js
@@ -1,5 +1,6 @@
 var whiteboard = {
     isMultiTouch: false,
+    pages: 1,
     canvas: null,
     ctx: null,
     drawcolor: "black",
@@ -70,15 +71,15 @@ var whiteboard = {
             .append(_this.textContainer)
             .append(_this.mouseOverlay);
         this.canvas = $("#whiteboardCanvas")[0];
-        this.canvas.height = $(window).height();
         this.canvas.width = $(window).width();
+        this.canvas.height = $(window).height() * pages;
         this.ctx = this.canvas.getContext("2d");
         this.oldGCO = this.ctx.globalCompositeOperation;
 
         $(window).resize(function () { //Handle resize
             var dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); //Copy the buffer
             _this.canvas.width = $(window).width();
-            _this.canvas.height = $(window).height(); //Set new canvas height
+            _this.canvas.height = $(window).height() * pages; //Set new canvas height
             _this.drawBuffer = [];
             _this.loadData(dbCp); //draw old content in
         });
@@ -622,6 +623,10 @@ var whiteboard = {
         _this.drawBuffer = [];
         _this.drawId = 0;
     },
+    addPage: function () {
+        pages += 1;
+
+    },
     setStrokeThickness(thickness) {
         var _this = this;
         _this.thickness = thickness;