diff --git a/package.json b/package.json
index 0bba00aea105696502cc9af8d93d65db26937ca7..ab13e243e4942eed4fb50b1e16dcfe3838c8aa7b 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
     "scratch-audio": "latest",
+    "scratch-paint": "latest",
     "scratch-blocks": "latest",
     "scratch-render": "latest",
     "scratch-storage": "^0.2.0",
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 6929608c15b45e0c32e91dba1445ae833a0da0fc..baad4eb28422ba3da6307efb8c75d7b44fd9c569 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -6,6 +6,7 @@ import VM from 'scratch-vm';
 
 import AssetPanel from '../components/asset-panel/asset-panel.jsx';
 import addCostumeIcon from '../components/asset-panel/icon--add-costume-lib.svg';
+import PaintEditor from 'scratch-paint';
 
 import {connect} from 'react-redux';
 
@@ -19,7 +20,8 @@ class CostumeTab extends React.Component {
         super(props);
         bindAll(this, [
             'handleSelectCostume',
-            'handleDeleteCostume'
+            'handleDeleteCostume',
+            'handleUpdateSvg'
         ]);
         this.state = {selectedCostumeIndex: 0};
     }
@@ -46,6 +48,10 @@ class CostumeTab extends React.Component {
         this.props.vm.deleteCostume(costumeIndex);
     }
 
+    handleUpdateSvg (svg, rotationCenterX, rotationCenterY) {
+        this.props.vm.updateSvg(this.state.selectedCostumeIndex, svg, rotationCenterX, rotationCenterY);
+    }
+
     render () {
         const {
             editingTarget,
@@ -90,7 +96,17 @@ class CostumeTab extends React.Component {
                 selectedItemIndex={this.state.selectedCostumeIndex}
                 onDeleteClick={this.handleDeleteCostume}
                 onItemClick={this.handleSelectCostume}
-            />
+            >
+                {target.costumes ?
+                    <PaintEditor
+                        rotationCenterX={target.costumes[this.state.selectedCostumeIndex].rotationCenterX}
+                        rotationCenterY={target.costumes[this.state.selectedCostumeIndex].rotationCenterY}
+                        svg={this.props.vm.getCostumeSvg(this.state.selectedCostumeIndex)}
+                        onUpdateSvg={this.handleUpdateSvg}
+                    /> :
+                    null
+                }
+            </AssetPanel>
         );
     }
 }
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index fef037d9231a94a541eeaf9b8e490898c4f14d0e..c9e5e41928931dca615abf8de677f693adc36dfa 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -6,6 +6,7 @@ import monitorReducer from './monitors';
 import targetReducer from './targets';
 import toolboxReducer from './toolbox';
 import vmReducer from './vm';
+import {ScratchPaintReducer} from 'scratch-paint';
 
 export default combineReducers({
     colorPicker: colorPickerReducer,
@@ -14,5 +15,6 @@ export default combineReducers({
     monitors: monitorReducer,
     targets: targetReducer,
     toolbox: toolboxReducer,
-    vm: vmReducer
+    vm: vmReducer,
+    scratchPaint: ScratchPaintReducer
 });