diff --git a/src/components/grabbable-toggle.js b/src/components/grabbable-toggle.js
index 8b9bf5079534ff06011bc818e406baf533f76681..f3d4bc7e79099c20342cb9bdb231c545b14c1e9e 100644
--- a/src/components/grabbable-toggle.js
+++ b/src/components/grabbable-toggle.js
@@ -143,10 +143,10 @@ AFRAME.registerComponent(
         evt.preventDefault();
       }
     },
-    resetGrabber: (function() {
+    resetGrabber: (() => {
       const objPos = new THREE.Vector3();
       const grabPos = new THREE.Vector3();
-      const function() {
+      return function() {
         if (!this.grabber) {
           return false;
         }
diff --git a/src/components/tools/pen.js b/src/components/tools/pen.js
index 56bccc46064dc04848f9e3c59ce4df1d714b0d2a..9d7218fccfa4b2d7573c197108ad28806a0db5be 100644
--- a/src/components/tools/pen.js
+++ b/src/components/tools/pen.js
@@ -15,7 +15,6 @@ AFRAME.registerComponent("pen", {
     camera: { type: "selector" },
     drawing: { type: "string" },
     drawingManager: { type: "string" },
-    color: { type: "color", default: "#FF0000" },
     availableColors: {
       default: ["#FF0033", "#FFFF00", "#00FF33", "#0099FF", "#9900FF", "#FFFFFF", "#000000"]
     }
@@ -24,6 +23,8 @@ AFRAME.registerComponent("pen", {
   init() {
     this.stateAdded = this.stateAdded.bind(this);
     this.stateRemoved = this.stateRemoved.bind(this);
+    this.onMouseWheel = this.onMouseWheel.bind(this);
+    this.onComponentChanged = this.onComponentChanged.bind(this);
 
     this.timeSinceLastDraw = 0;
 
@@ -39,9 +40,9 @@ AFRAME.registerComponent("pen", {
 
     this.worldPosition = new THREE.Vector3();
 
-    this.el.setAttribute("material", { color: this.data.color });
-
     this.colorIndex = 0;
+
+    this.grabbed = false;
   },
 
   play() {
@@ -49,11 +50,16 @@ AFRAME.registerComponent("pen", {
 
     this.el.parentNode.addEventListener("stateadded", this.stateAdded);
     this.el.parentNode.addEventListener("stateremoved", this.stateRemoved);
+    this.el.addEventListener("onComponentChanged", this.onComponentChanged);
+    document.addEventListener("wheel", this.onMouseWheel);
   },
 
   pause() {
     this.el.parentNode.removeEventListener("stateadded", this.stateAdded);
     this.el.parentNode.removeEventListener("stateremoved", this.stateRemoved);
+    this.el.removeEventListener("onComponentChanged", this.onComponentChanged);
+
+    document.removeEventListener("wheel", this.onMouseWheel);
   },
 
   tick(t, dt) {
@@ -93,7 +99,7 @@ AFRAME.registerComponent("pen", {
       this.el.object3D.getWorldPosition(this.worldPosition);
       this.getNormal(this.normal, this.worldPosition, this.direction);
 
-      this.currentDrawing.startDraw(this.worldPosition, this.direction, this.normal, this.data.color);
+      this.currentDrawing.startDraw(this.worldPosition, this.direction, this.normal, this.el.getAttribute("color"));
     }
   },
 
@@ -110,8 +116,8 @@ AFRAME.registerComponent("pen", {
 
   changeColor(mod) {
     this.colorIndex = (this.colorIndex + mod + this.data.availableColors.length) % this.data.availableColors.length;
-    this.data.color = this.data.availableColors[this.colorIndex];
-    this.el.setAttribute("material", { color: this.data.color });
+    const color = this.data.availableColors[this.colorIndex];
+    this.el.setAttribute("color", color);
   },
 
   stateAdded(evt) {
@@ -125,6 +131,8 @@ AFRAME.registerComponent("pen", {
       case "colorPrev":
         this.changeColor(-1);
         break;
+      case "grabbed":
+        this.grabbed = true;
       default:
         break;
     }
@@ -133,11 +141,24 @@ AFRAME.registerComponent("pen", {
   stateRemoved(evt) {
     switch (evt.detail) {
       case "activated":
+        this.endDraw();
+        break;
       case "grabbed":
+        this.grabbed = false;
         this.endDraw();
         break;
       default:
         break;
     }
+  },
+
+  onComponentChanged(evt) {
+    if (evt.detail.name === "color") {
+      changeColor(0);
+    }
+  },
+
+  onMouseWheel(e) {
+    if (this.grabbed) this.changeColor(e.deltaY > 0 ? 1 : -1);
   }
 });
diff --git a/src/hub.html b/src/hub.html
index 65fa1527c1eada51bef7ab5179ccbca074d76af8..64f19bd4232cc700ca2d656ada2f542c932a4719 100644
--- a/src/hub.html
+++ b/src/hub.html
@@ -199,10 +199,11 @@
                     scale="0.5 0.5 0.5"
                 >
                     <a-sphere 
+                        id="pen"
                         scale="1.5, 1.5, 1.5" 
                         position="0 -0.18 0" 
-                        radius="0.02" 
-                        color="red" 
+                        radius="0.02"  
+                        color="#FF0033"
                         pen="camera: #player-camera; drawingManager: #drawing-manager"
                     ></a-sphere>
                 </a-entity>
@@ -258,7 +259,7 @@
 
         <a-entity id="pen-counter" networked-counter="max: 3;"></a-entity>
 
-        <a-entity id="drawing-manager" drawing-manager="drawing: #my-first-drawing;"></a-entity>
+        <a-entity id="drawing-manager" drawing-manager="drawing: #default-drawing;"></a-entity>
 
         <a-entity
             id="cursor-controller"
@@ -432,7 +433,7 @@
         ></a-entity>
 
         <a-entity
-            id="my-first-drawing"
+            id="default-drawing"
             networked="template: #interactable-drawing;"
         ></a-entity>
 
diff --git a/src/network-schemas.js b/src/network-schemas.js
index 60e61958108f56b92bee0659b1f74020b053ff05..cd3c162dfc44eb57db747ca60464937e44f18f7e 100644
--- a/src/network-schemas.js
+++ b/src/network-schemas.js
@@ -143,7 +143,11 @@ function registerNetworkSchemas() {
         requiresNetworkUpdate: vectorRequiresUpdate(0.5)
       },
       "scale",
-      "media-loader"
+      "media-loader",
+      {
+        selector: "#pen",
+        component: "color"
+      }
     ]
   });
 }