diff --git a/voicegardens/static/images/solarpunk.png b/voicegardens/static/images/solarpunk.png
new file mode 100644
index 0000000..b22bda6
Binary files /dev/null and b/voicegardens/static/images/solarpunk.png differ
diff --git a/voicegardens/static/styles.css b/voicegardens/static/styles.css
index d91ded1..07c38b3 100644
--- a/voicegardens/static/styles.css
+++ b/voicegardens/static/styles.css
@@ -2,8 +2,9 @@
 
 body {
   margin: 0px;
+  overflow: hidden;
 }
 
-button {
-  z-index: 50;
+canvas {
+  display: block;
 }
diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js
index e062e4b..0cfa22c 100644
--- a/voicegardens/static/voicegardens.js
+++ b/voicegardens/static/voicegardens.js
@@ -5,11 +5,8 @@
 //
 
 var archiveUrl = window.location + "add-to-archive";
-var canvasColour = "white";
-var canvasHeight = 400;
-var canvasWidth = 800;
-var frameRate = 30;
-var mappa = new Mappa("Leaflet");
+var backgroundImage;
+var canvas;
 var microphone;
 var newSoundJustRecorded = false;
 var playButton;
@@ -17,14 +14,17 @@ var recordButton;
 var recorder;
 var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
+var screenH;
+var screenW;
+var screenX;
+var screenY;
 var shapes = [];
 var stopButton;
-var tileMapOptions = {
-  lat: 0,
-  lng: 0,
-  zoom: 5,
-  style: "/static/tiles/{z}/{x}/{y}.png"
-};
+var toH;
+var toW;
+var toX;
+var toY;
+var zoom = 0.01; // zoom step per mouse tick
 
 function record() {
   /**
@@ -89,19 +89,19 @@ function setupRecording() {
   recording = new p5.SoundFile();
 
   recordButton = createButton("record");
-  recordButton.position(50, 10);
+  recordButton.position(10, 5);
   recordButton.mousePressed(record);
 
   stopButton = createButton("stop");
-  stopButton.position(50, 40);
+  stopButton.position(10, 40);
   stopButton.mousePressed(stop);
 
   playButton = createButton("play");
-  playButton.position(50, 70);
+  playButton.position(10, 70);
   playButton.mousePressed(play);
 
   playButton = createButton("archive");
-  playButton.position(50, 100);
+  playButton.position(10, 105);
   playButton.mousePressed(archive);
 }
 
@@ -213,20 +213,26 @@ class GeneratedShape {
   }
 }
 
+function preload() {
+  /**
+   * Pre-load images for the background.
+   **/
+  backgroundImage = loadImage("../static/images/solarpunk.png");
+}
+
 function setup() {
   /**
    * The p5.js initial setup function.
    **/
-  canvas = createCanvas(canvasWidth, canvasHeight);
-
-  tileMap = mappa.tileMap(tileMapOptions);
-  tileMap.overlay(canvas);
-
-  setupRecording();
+  createCanvas(windowWidth, windowHeight);
 
-  frameRate(frameRate);
+  screenW = toW = backgroundImage.width;
+  screenH = toH = backgroundImage.height;
+  screenX = toX = screenW / 2;
+  screenY = toY = screenH / 2;
 
-  fill("red");
+  // setupRecording();
+  // fill("red");
 }
 
 function draw() {
@@ -236,6 +242,19 @@ function draw() {
   clear();
   noStroke();
 
+  screenX = lerp(screenX, toX, 0.1);
+  screenY = lerp(screenY, toY, 0.1);
+  screenW = lerp(screenW, toW, 0.1);
+  screenH = lerp(screenH, toH, 0.1);
+
+  image(
+    backgroundImage,
+    screenX - screenW / 2,
+    screenY - screenH / 2,
+    screenW,
+    screenH
+  );
+
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
     newSoundJustRecorded = false;
@@ -250,3 +269,40 @@ function draw() {
     }
   }
 }
+
+function mouseWheel(event) {
+  /**
+   * Mouse wheel zoom handling.
+   **/
+  var delta = -event.delta;
+
+  // zoom in
+  if (delta > 0) {
+    for (var i = 0; i < delta; i++) {
+      if (toW > 5 * width) return; // max zoom
+      toX -= zoom * (mouseX - toX);
+      toY -= zoom * (mouseY - toY);
+      toW *= zoom + 1;
+      toH *= zoom + 1;
+    }
+  }
+
+  // zoom out
+  if (delta < 0) {
+    for (var i = 0; i < -delta; i++) {
+      if (toW < width) return; // min zoom
+      toX += (zoom / (zoom + 1)) * (mouseX - toX);
+      toY += (zoom / (zoom + 1)) * (mouseY - toY);
+      toH /= zoom + 1;
+      toW /= zoom + 1;
+    }
+  }
+}
+
+function mouseDragged(event) {
+  /**
+   * Mouse drag movement handling.
+   **/
+  toX += mouseX - pmouseX;
+  toY += mouseY - pmouseY;
+}
diff --git a/voicegardens/templates/index.html b/voicegardens/templates/index.html
index 3219543..c9d7f78 100644
--- a/voicegardens/templates/index.html
+++ b/voicegardens/templates/index.html
@@ -12,8 +12,6 @@
     />
   </head>
   <body>
-    <div id="container"></div>
-
     <script src="/static/p5js/p5.min.js" charset="utf-8"></script>
     <script src="/static/p5js/p5.sound.min.js" charset="utf-8"></script>
     <script src="/static/p5js/p5.collide2d.min.js" charset="utf-8"></script>