diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index f5720768..b18fa99f 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -142,10 +142,6 @@ $border-radius: 0.25rem;
     margin-left: calc(2 * $grid-unit);
 }
 
-.hidden {
-    display: none;
-}
-
 .zoom-controls {
     display: flex;
     flex-direction: row-reverse;
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index de1b433a..684e6166 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -132,8 +132,8 @@ const PaintEditorComponent = props => (
 
         <div className={styles.topAlignRow}>
             {/* Modes */}
-            {props.canvas !== null ? ( // eslint-disable-line no-negated-condition
-                <div className={isVector(props.format) ? styles.modeSelector : styles.hidden}>
+            {props.canvas !== null && isVector(props.format) ? ( // eslint-disable-line no-negated-condition
+                <div className={styles.modeSelector}>
                     <SelectMode
                         onUpdateImage={props.onUpdateImage}
                     />
@@ -165,8 +165,8 @@ const PaintEditorComponent = props => (
                 </div>
             ) : null}
 
-            {props.canvas !== null ? ( // eslint-disable-line no-negated-condition
-                <div className={isBitmap(props.format) ? styles.modeSelector : styles.hidden}>
+            {props.canvas !== null && isBitmap(props.format) ? ( // eslint-disable-line no-negated-condition
+                <div className={styles.modeSelector}>
                     <BitBrushMode
                         onUpdateImage={props.onUpdateImage}
                     />
diff --git a/src/containers/bit-brush-mode.jsx b/src/containers/bit-brush-mode.jsx
index ec43d4e2..06978216 100644
--- a/src/containers/bit-brush-mode.jsx
+++ b/src/containers/bit-brush-mode.jsx
@@ -44,6 +44,11 @@ class BitBrushMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitBrushModeActive !== this.props.isBitBrushModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/bit-eraser-mode.jsx b/src/containers/bit-eraser-mode.jsx
index 8ea97e9d..6266a9de 100644
--- a/src/containers/bit-eraser-mode.jsx
+++ b/src/containers/bit-eraser-mode.jsx
@@ -38,6 +38,11 @@ class BitEraserMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitEraserModeActive !== this.props.isBitEraserModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.tool = new BitBrushTool(
diff --git a/src/containers/bit-fill-mode.jsx b/src/containers/bit-fill-mode.jsx
index 73753727..4987bae8 100644
--- a/src/containers/bit-fill-mode.jsx
+++ b/src/containers/bit-fill-mode.jsx
@@ -51,6 +51,11 @@ class BitFillMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isFillModeActive !== this.props.isFillModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 
diff --git a/src/containers/bit-line-mode.jsx b/src/containers/bit-line-mode.jsx
index aa611740..c2a9e9bf 100644
--- a/src/containers/bit-line-mode.jsx
+++ b/src/containers/bit-line-mode.jsx
@@ -44,6 +44,11 @@ class BitLineMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBitLineModeActive !== this.props.isBitLineModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/bit-oval-mode.jsx b/src/containers/bit-oval-mode.jsx
index 93cb7d52..eb3ac20b 100644
--- a/src/containers/bit-oval-mode.jsx
+++ b/src/containers/bit-oval-mode.jsx
@@ -53,6 +53,11 @@ class BitOvalMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isOvalModeActive !== this.props.isOvalModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/bit-rect-mode.jsx b/src/containers/bit-rect-mode.jsx
index 3c676e06..be54fa04 100644
--- a/src/containers/bit-rect-mode.jsx
+++ b/src/containers/bit-rect-mode.jsx
@@ -53,6 +53,11 @@ class BitRectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRectModeActive !== this.props.isRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/bit-select-mode.jsx b/src/containers/bit-select-mode.jsx
index 021c589a..2b5c72fb 100644
--- a/src/containers/bit-select-mode.jsx
+++ b/src/containers/bit-select-mode.jsx
@@ -39,6 +39,11 @@ class BitSelectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isSelectModeActive !== this.props.isSelectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.props.clearGradient();
         this.tool = new BitSelectTool(
diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx
index 4a35ee02..f47a71a9 100644
--- a/src/containers/brush-mode.jsx
+++ b/src/containers/brush-mode.jsx
@@ -45,6 +45,11 @@ class BrushMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isBrushModeActive !== this.props.isBrushModeActive;
     }
+    componentWillUnmount () {
+        if (this.blob.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         // TODO: Instead of clearing selection, consider a kind of "draw inside"
         // analogous to how selection works with eraser
diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx
index 6ae2cbfb..1d8aac92 100644
--- a/src/containers/eraser-mode.jsx
+++ b/src/containers/eraser-mode.jsx
@@ -39,6 +39,11 @@ class EraserMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isEraserModeActive !== this.props.isEraserModeActive;
     }
+    componentWillUnmount () {
+        if (this.blob.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.blob.activateTool({isEraser: true, ...this.props.eraserModeState});
     }
diff --git a/src/containers/fill-mode.jsx b/src/containers/fill-mode.jsx
index 8636430f..1abc9c37 100644
--- a/src/containers/fill-mode.jsx
+++ b/src/containers/fill-mode.jsx
@@ -55,6 +55,11 @@ class FillMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isFillModeActive !== this.props.isFillModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 
diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx
index a8e895cf..f14badf5 100644
--- a/src/containers/line-mode.jsx
+++ b/src/containers/line-mode.jsx
@@ -51,6 +51,11 @@ class LineMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isLineModeActive !== this.props.isLineModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
 
diff --git a/src/containers/oval-mode.jsx b/src/containers/oval-mode.jsx
index 69a62348..b6fd6dba 100644
--- a/src/containers/oval-mode.jsx
+++ b/src/containers/oval-mode.jsx
@@ -46,6 +46,11 @@ class OvalMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isOvalModeActive !== this.props.isOvalModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/rect-mode.jsx b/src/containers/rect-mode.jsx
index 6c45dd3a..1722405c 100644
--- a/src/containers/rect-mode.jsx
+++ b/src/containers/rect-mode.jsx
@@ -46,6 +46,11 @@ class RectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRectModeActive !== this.props.isRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
         this.props.clearGradient();
diff --git a/src/containers/reshape-mode.jsx b/src/containers/reshape-mode.jsx
index db6ae300..c4042834 100644
--- a/src/containers/reshape-mode.jsx
+++ b/src/containers/reshape-mode.jsx
@@ -39,6 +39,11 @@ class ReshapeMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isReshapeModeActive !== this.props.isReshapeModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new ReshapeTool(
             this.props.setHoveredItem,
diff --git a/src/containers/rounded-rect-mode.jsx b/src/containers/rounded-rect-mode.jsx
index 2ad730b9..d729dcb2 100644
--- a/src/containers/rounded-rect-mode.jsx
+++ b/src/containers/rounded-rect-mode.jsx
@@ -39,6 +39,11 @@ class RoundedRectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isRoundedRectModeActive !== this.props.isRoundedRectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new RoundedRectTool(
             this.props.setHoveredItem,
diff --git a/src/containers/select-mode.jsx b/src/containers/select-mode.jsx
index 023ac639..5e749559 100644
--- a/src/containers/select-mode.jsx
+++ b/src/containers/select-mode.jsx
@@ -43,6 +43,11 @@ class SelectMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isSelectModeActive !== this.props.isSelectModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool () {
         this.tool = new SelectTool(
             this.props.setHoveredItem,
diff --git a/src/containers/text-mode.jsx b/src/containers/text-mode.jsx
index d9297812..b3f4cc88 100644
--- a/src/containers/text-mode.jsx
+++ b/src/containers/text-mode.jsx
@@ -64,6 +64,11 @@ class TextMode extends React.Component {
     shouldComponentUpdate (nextProps) {
         return nextProps.isTextModeActive !== this.props.isTextModeActive;
     }
+    componentWillUnmount () {
+        if (this.tool) {
+            this.deactivateTool();
+        }
+    }
     activateTool (nextProps) {
         const selected = getSelectedLeafItems();
         let textBoxToStartEditing = null;