diff --git a/public/media/1x1.gif b/public/media/1x1.gif
new file mode 100644
index 0000000..3085511
Binary files /dev/null and b/public/media/1x1.gif differ
diff --git a/public/media/click.mp3 b/public/media/click.mp3
new file mode 100644
index 0000000..4534b0d
Binary files /dev/null and b/public/media/click.mp3 differ
diff --git a/public/media/click.ogg b/public/media/click.ogg
new file mode 100644
index 0000000..e8ae42a
Binary files /dev/null and b/public/media/click.ogg differ
diff --git a/public/media/click.wav b/public/media/click.wav
new file mode 100644
index 0000000..41a50cd
Binary files /dev/null and b/public/media/click.wav differ
diff --git a/public/media/delete.mp3 b/public/media/delete.mp3
new file mode 100644
index 0000000..442bd9c
Binary files /dev/null and b/public/media/delete.mp3 differ
diff --git a/public/media/delete.ogg b/public/media/delete.ogg
new file mode 100644
index 0000000..67f84ac
Binary files /dev/null and b/public/media/delete.ogg differ
diff --git a/public/media/delete.wav b/public/media/delete.wav
new file mode 100644
index 0000000..18debcf
Binary files /dev/null and b/public/media/delete.wav differ
diff --git a/public/media/disconnect.mp3 b/public/media/disconnect.mp3
new file mode 100644
index 0000000..8cfaff6
Binary files /dev/null and b/public/media/disconnect.mp3 differ
diff --git a/public/media/disconnect.ogg b/public/media/disconnect.ogg
new file mode 100644
index 0000000..467b527
Binary files /dev/null and b/public/media/disconnect.ogg differ
diff --git a/public/media/disconnect.wav b/public/media/disconnect.wav
new file mode 100644
index 0000000..af5c254
Binary files /dev/null and b/public/media/disconnect.wav differ
diff --git a/public/media/dropdown-arrow.svg b/public/media/dropdown-arrow.svg
new file mode 100644
index 0000000..4e6ce19
--- /dev/null
+++ b/public/media/dropdown-arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="12.71" height="8.79" viewBox="0 0 12.71 8.79"><title>dropdown-arrow</title><g opacity="0.1"><path d="M12.71,2.44A2.41,2.41,0,0,1,12,4.16L8.08,8.08a2.45,2.45,0,0,1-3.45,0L0.72,4.16A2.42,2.42,0,0,1,0,2.44,2.48,2.48,0,0,1,.71.71C1,0.47,1.43,0,6.36,0S11.75,0.46,12,.71A2.44,2.44,0,0,1,12.71,2.44Z" fill="#231f20"/></g><path d="M6.36,7.79a1.43,1.43,0,0,1-1-.42L1.42,3.45a1.44,1.44,0,0,1,0-2c0.56-.56,9.31-0.56,9.87,0a1.44,1.44,0,0,1,0,2L7.37,7.37A1.43,1.43,0,0,1,6.36,7.79Z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/public/media/handclosed.cur b/public/media/handclosed.cur
new file mode 100644
index 0000000..4851755
Binary files /dev/null and b/public/media/handclosed.cur differ
diff --git a/public/media/handdelete.cur b/public/media/handdelete.cur
new file mode 100644
index 0000000..170320f
Binary files /dev/null and b/public/media/handdelete.cur differ
diff --git a/public/media/handopen.cur b/public/media/handopen.cur
new file mode 100644
index 0000000..da44588
Binary files /dev/null and b/public/media/handopen.cur differ
diff --git a/public/media/pilcrow.png b/public/media/pilcrow.png
new file mode 100644
index 0000000..f224c35
Binary files /dev/null and b/public/media/pilcrow.png differ
diff --git a/public/media/quote0.png b/public/media/quote0.png
new file mode 100644
index 0000000..c7820d6
Binary files /dev/null and b/public/media/quote0.png differ
diff --git a/public/media/quote1.png b/public/media/quote1.png
new file mode 100644
index 0000000..826583e
Binary files /dev/null and b/public/media/quote1.png differ
diff --git a/public/media/sprites.png b/public/media/sprites.png
new file mode 100644
index 0000000..20aadb6
Binary files /dev/null and b/public/media/sprites.png differ
diff --git a/public/media/sprites.svg b/public/media/sprites.svg
new file mode 100644
index 0000000..3f09ef3
--- /dev/null
+++ b/public/media/sprites.svg
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96px" height="124px">
+  <style type="text/css">
+#background {
+  fill: none;
+}
+.arrows {
+  fill: #000;
+  stroke: none;
+}
+.selected>.arrows {
+  fill: #fff;
+}
+.checkmark {
+  fill: #000;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-anchor: middle;
+}
+.trash {
+  fill: #888;
+}
+.zoom {
+  fill: none;
+  stroke: #888;
+  stroke-width: 2;
+  stroke-linecap: round;
+}
+.zoom>.center {
+  fill: #888;
+  stroke-width: 0;
+}
+  </style>
+  <rect id="background" width="96" height="124" x="0" y="0" />
+
+  <g>
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+  <g class="selected" transform="translate(0, 16)">
+    <path class="arrows" d="M 13,1.5 13,14.5 1.74,8 z" />
+    <path class="arrows" d="M 17.5,3 30.5,3 24,14.26 z" />
+    <path class="arrows" d="M 35,1.5 35,14.5 46.26,8 z" />
+  </g>
+
+  <text class="checkmark" x="55.5" y="28">&#10003;</text>
+
+  <g class="trash">
+    <path d="M 2,41 v 6 h 42 v -6 h -10.5 l -3,-3 h -15 l -3,3 z" />
+    <rect width="36" height="20" x="5" y="50" />
+    <rect width="36" height="42" x="5" y="50" rx="4" ry="4" />
+  </g>
+
+  <g class="zoom">
+    <circle r="11.5" cx="16" cy="108" />
+    <circle r="4.3" cx="16" cy="108" class="center" />
+    <path d="m 28,108 h3" />
+    <path d="m 1,108 h3" />
+    <path d="m 16,120 v3" />
+    <path d="m 16,93 v3" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="48" cy="108" />
+    <path d="m 48,101.6 v12.8" />
+    <path d="m 41.6,108 h12.8" />
+  </g>
+
+  <g class="zoom">
+    <circle r="15" cx="80" cy="108" />
+    <path d="m 73.6,108 h12.8" />
+  </g>
+</svg>
diff --git a/src/components/Home.js b/src/components/Home.js
index de16f85..2a58b04 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -36,11 +36,19 @@ class Home extends Component {
         <BlocklyComponent ref={this.simpleWorkspace}
           readOnly={false}
           trashcan={true}
+          zoom={{
+            controls: true,
+            wheel: true,
+            startScale: 1.0,
+            maxScale: 3,
+            minScale: 0.3,
+            scaleSpeed: 1.2
+          }}
           media={'media/'}
           move={{
             scrollbars: true,
             drag: true,
-            wheel: true
+            wheel: false
           }}
           initialXml={''}
         >