diff --git a/electron/src/renderer/assets/js/simulator.js b/electron/src/renderer/assets/js/simulator.js
index fa963bbeb..0e60e1c25 100644
--- a/electron/src/renderer/assets/js/simulator.js
+++ b/electron/src/renderer/assets/js/simulator.js
@@ -508,6 +508,18 @@ export default {
           prevStitch = stitch
         })
       })
+    },
+    generatePage () {
+      this.$refs.simulator.style.backgroundColor = this.page_specs.deskcolor
+      this.svg.rect(this.page_specs.width, this.page_specs.height)
+      .move(-this.stitchPlan.bounding_box[0],-this.stitchPlan.bounding_box[1])
+      .fill(this.page_specs.pagecolor)
+      .stroke({width: 1, color: 'black'})
+      .filterWith(add => {
+        let blur = add.offset(2,2).in(add.$sourceAlpha).gaussianBlur(2)
+        add.blend(add.$source, blur)
+      })
+      .back()
     }
   },
   created: function () {
@@ -530,6 +542,7 @@ export default {
     this.jumpMarks = {}
     this.needlePenetrationPoints = []
     this.cursor = null
+    this.page_specs = {}
   },
   mounted: function () {
     this.svg = SVG().addTo(this.$refs.simulator).size('100%', '100%').panZoom({zoomMin: 0.1})
@@ -581,7 +594,7 @@ export default {
       this.generateColorSections()
       this.generateScale()
       this.generateCursor()
-
+      
       this.loading = false
 
       // v-on:keydown doesn't seem to work, maybe an Electron issue?
@@ -600,5 +613,9 @@ export default {
 
       this.start()
     })
+    inkStitch.get('page_specs').then(response => {
+      this.page_specs = response.data
+      this.generatePage()
+    })
   }
 }
diff --git a/electron/src/renderer/assets/style/simulator.css b/electron/src/renderer/assets/style/simulator.css
index 6358bc4d3..64047a7ef 100644
--- a/electron/src/renderer/assets/style/simulator.css
+++ b/electron/src/renderer/assets/style/simulator.css
@@ -86,6 +86,7 @@ fieldset {
   position: relative;
   padding: 0 5px;
   font-size: 90%;
+  background-color: white;
 }
 
 .window-controls {
@@ -289,6 +290,7 @@ div.simulator::v-deep svg.simulation {
   flex-grow: 1;
   flex-shrink: 1;
   order: -2;
+  margin-bottom: -48px;
 }
 
 div.simulator::v-deep svg.simulation-scale {
diff --git a/lib/api/page_specs.py b/lib/api/page_specs.py
new file mode 100644
index 000000000..ff9f7cf6f
--- /dev/null
+++ b/lib/api/page_specs.py
@@ -0,0 +1,22 @@
+# Authors: see git history
+#
+# Copyright (c) 2010 Authors
+# Licensed under the GNU GPL version 3.0 or later.  See the file LICENSE for details.
+
+from flask import Blueprint, g, jsonify
+
+page_specs = Blueprint('page_specs', __name__)
+
+@page_specs.route('')
+def get_page_specs():
+
+    metadata = g.extension.get_inkstitch_metadata()
+
+    page_specs = {
+        "width": metadata.document.get('width'),
+        "height": metadata.document.get('height'),
+        "pagecolor": metadata.document[1].get('pagecolor'),
+        "deskcolor": metadata.document[1].get('inkscape:deskcolor')
+    }
+    
+    return jsonify(page_specs)
\ No newline at end of file
diff --git a/lib/api/server.py b/lib/api/server.py
index f9bb64586..41a427310 100644
--- a/lib/api/server.py
+++ b/lib/api/server.py
@@ -19,6 +19,7 @@ from .install import install
 from .simulator import simulator
 from .stitch_plan import stitch_plan
 from .preferences import preferences
+from .page_specs import page_specs
 
 
 class APIServer(Thread):
@@ -47,6 +48,7 @@ class APIServer(Thread):
         self.app.register_blueprint(stitch_plan, url_prefix="/stitch_plan")
         self.app.register_blueprint(install, url_prefix="/install")
         self.app.register_blueprint(preferences, url_prefix="/preferences")
+        self.app.register_blueprint(page_specs, url_prefix="/page_specs")
 
         @self.app.before_request
         def store_extension():