diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 750be83fc25..bb7711a5167 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -95,14 +95,24 @@ class Blocks extends React.Component {
         this.ScratchBlocks.statusButtonCallback = this.handleConnectionModalStart;
         this.ScratchBlocks.recordSoundCallback = this.handleOpenSoundRecorder;
 
-        this.ScratchBlocks.FieldColourSlider.activateEyedropper_ = this.props.onActivateColorPicker;
+        // this.ScratchBlocks.FieldColourSlider.activateEyedropper_ = this.props.onActivateColorPicker;
         this.ScratchBlocks.Procedures.externalProcedureDefCallback = this.props.onActivateCustomProcedures;
         this.ScratchBlocks.ScratchMsgs.setLocale(this.props.locale);
 
+        const theme = this.ScratchBlocks.Theme.defineTheme('Scratch', {
+           'base': this.ScratchBlocks.Themes.Zelos,
+           'startHats': true
+        });
         const workspaceConfig = defaultsDeep({},
             Blocks.defaultOptions,
             this.props.options,
-            {rtl: this.props.isRtl, toolbox: this.props.toolboxXML, colours: getColorsForTheme(this.props.theme)}
+            {
+                rtl: this.props.isRtl,
+                toolbox: this.props.toolboxXML,
+                colours: getColorsForTheme(this.props.theme),
+                renderer: 'zelos',
+                theme: theme,
+            }
         );
         this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
 
@@ -129,10 +139,11 @@ class Blocks extends React.Component {
         // we actually never want the workspace to enable "refresh toolbox" - this basically re-renders the
         // entire toolbox every time we reset the workspace.  We call updateToolbox as a part of
         // componentDidUpdate so the toolbox will still correctly be updated
-        this.setToolboxRefreshEnabled = this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
-        this.workspace.setToolboxRefreshEnabled = () => {
-            this.setToolboxRefreshEnabled(false);
-        };
+        this.setToolboxRefreshEnabled = () => {};
+        // this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
+        // this.workspace.setToolboxRefreshEnabled = () => {
+        //     this.setToolboxRefreshEnabled(false);
+        // };
 
         // @todo change this when blockly supports UI events
         addFunctionListener(this.workspace, 'translate', this.onWorkspaceMetricsChange);
@@ -213,11 +224,11 @@ class Blocks extends React.Component {
         this.ScratchBlocks.ScratchMsgs.setLocale(this.props.locale);
         this.props.vm.setLocale(this.props.locale, this.props.messages)
             .then(() => {
-                this.workspace.getFlyout().setRecyclingEnabled(false);
+                // this.workspace.getFlyout().setRecyclingEnabled(false);
                 this.props.vm.refreshWorkspace();
                 this.requestToolboxUpdate();
                 this.withToolboxUpdates(() => {
-                    this.workspace.getFlyout().setRecyclingEnabled(true);
+                    // this.workspace.getFlyout().setRecyclingEnabled(true);
                 });
             });
     }
@@ -225,8 +236,8 @@ class Blocks extends React.Component {
     updateToolbox () {
         this.toolboxUpdateTimeout = false;
 
-        const categoryId = this.workspace.toolbox_.getSelectedCategoryId();
-        const offset = this.workspace.toolbox_.getCategoryScrollOffset();
+        // const categoryId = this.workspace.toolbox_.getSelectedItem().getId();
+        // const offset = this.workspace.toolbox_.getCategoryScrollOffset();
         this.workspace.updateToolbox(this.props.toolboxXML);
         this._renderedToolboxXML = this.props.toolboxXML;
 
@@ -235,13 +246,13 @@ class Blocks extends React.Component {
         // Using the setter function will rerender the entire toolbox which we just rendered.
         this.workspace.toolboxRefreshEnabled_ = true;
 
-        const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionById(categoryId);
-        const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthById(categoryId);
-        if (offset < currentCategoryLen) {
-            this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
-        } else {
-            this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
-        }
+        // const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionById(categoryId);
+        // const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthById(categoryId);
+        // if (offset < currentCategoryLen) {
+        //     this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
+        // } else {
+        //     this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
+        // }
 
         const queue = this.toolboxUpdateQueue;
         this.toolboxUpdateQueue = [];
@@ -329,16 +340,16 @@ class Blocks extends React.Component {
         }
     }
     onScriptGlowOn (data) {
-        this.workspace.glowStack(data.id, true);
+        // this.workspace.glowStack(data.id, true);
     }
     onScriptGlowOff (data) {
-        this.workspace.glowStack(data.id, false);
+        // this.workspace.glowStack(data.id, false);
     }
     onBlockGlowOn (data) {
-        this.workspace.glowBlock(data.id, true);
+        // this.workspace.glowBlock(data.id, true);
     }
     onBlockGlowOff (data) {
-        this.workspace.glowBlock(data.id, false);
+        // this.workspace.glowBlock(data.id, false);
     }
     onVisualReport (data) {
         this.workspace.reportValue(data.id, data.value);
@@ -382,7 +393,7 @@ class Blocks extends React.Component {
 
         // Remove and reattach the workspace listener (but allow flyout events)
         this.workspace.removeChangeListener(this.props.vm.blockListener);
-        const dom = this.ScratchBlocks.Xml.textToDom(data.xml);
+        const dom = this.ScratchBlocks.utils.xml.textToDom(data.xml);
         try {
             this.ScratchBlocks.Xml.clearWorkspaceAndLoadFromXml(dom, this.workspace);
         } catch (error) {
diff --git a/src/lib/blocks.js b/src/lib/blocks.js
index f89f5fe0b02..97d5ec30dea 100644
--- a/src/lib/blocks.js
+++ b/src/lib/blocks.js
@@ -5,7 +5,7 @@
  * @return {ScratchBlocks} ScratchBlocks connected with the vm
  */
 export default function (vm, useCatBlocks) {
-    const ScratchBlocks = useCatBlocks ? require('cat-blocks') : require('scratch-blocks');
+    const {ScratchBlocks} = useCatBlocks ? require('cat-blocks') : require('scratch-blocks');
     const jsonForMenuBlock = function (name, menuOptionsFn, colors, start) {
         return {
             message0: '%1',
@@ -82,7 +82,7 @@ export default function (vm, useCatBlocks) {
         }
         menu.push([
             ScratchBlocks.ScratchMsgs.translate('SOUND_RECORD', 'record...'),
-            ScratchBlocks.recordSoundCallback
+            'SOUND_RECORD'
         ]);
         return menu;
     };
@@ -158,6 +158,16 @@ export default function (vm, useCatBlocks) {
     ScratchBlocks.Blocks.sound_sounds_menu.init = function () {
         const json = jsonForMenuBlock('SOUND_MENU', soundsMenu, soundColors, []);
         this.jsonInit(json);
+        this.inputList[0].removeField('SOUND_MENU');
+        this.inputList[0].appendField(new ScratchBlocks.FieldDropdown(() => {
+            return soundsMenu();
+        }, (newValue) => {
+            if (newValue === 'SOUND_RECORD') {
+                  ScratchBlocks.recordSoundCallback();
+                  return null;
+            }
+            return newValue;
+        }), 'SOUND_MENU');
     };
 
     ScratchBlocks.Blocks.looks_costume.init = function () {
@@ -323,16 +333,16 @@ export default function (vm, useCatBlocks) {
         return monitoredBlock ? monitoredBlock.isMonitored : false;
     };
 
-    ScratchBlocks.FlyoutExtensionCategoryHeader.getExtensionState = function (extensionId) {
-        if (vm.getPeripheralIsConnected(extensionId)) {
-            return ScratchBlocks.StatusButtonState.READY;
-        }
-        return ScratchBlocks.StatusButtonState.NOT_READY;
-    };
-
-    ScratchBlocks.FieldNote.playNote_ = function (noteNum, extensionId) {
-        vm.runtime.emit('PLAY_NOTE', noteNum, extensionId);
-    };
+    // ScratchBlocks.FlyoutExtensionCategoryHeader.getExtensionState = function (extensionId) {
+    //     if (vm.getPeripheralIsConnected(extensionId)) {
+    //         return ScratchBlocks.StatusButtonState.READY;
+    //     }
+    //     return ScratchBlocks.StatusButtonState.NOT_READY;
+    // };
+    //
+    // ScratchBlocks.FieldNote.playNote_ = function (noteNum, extensionId) {
+    //     vm.runtime.emit('PLAY_NOTE', noteNum, extensionId);
+    // };
 
     // Use a collator's compare instead of localeCompare which internally
     // creates a collator. Using this is a lot faster in browsers that create a
@@ -341,9 +351,9 @@ export default function (vm, useCatBlocks) {
         sensitivity: 'base',
         numeric: true
     });
-    ScratchBlocks.scratchBlocksUtils.compareStrings = function (str1, str2) {
-        return collator.compare(str1, str2);
-    };
+    // ScratchBlocks.scratchBlocksUtils.compareStrings = function (str1, str2) {
+    //     return collator.compare(str1, str2);
+    // };
 
     // Blocks wants to know if 3D CSS transforms are supported. The cross
     // section of browsers Scratch supports and browsers that support 3D CSS
diff --git a/src/lib/make-toolbox-xml.js b/src/lib/make-toolbox-xml.js
index 8d356e442d9..156f4cd2811 100644
--- a/src/lib/make-toolbox-xml.js
+++ b/src/lib/make-toolbox-xml.js
@@ -1,4 +1,4 @@
-import ScratchBlocks from 'scratch-blocks';
+import {ScratchBlocks} from 'scratch-blocks';
 import {defaultColors} from './themes';
 
 const categorySeparator = '<sep gap="36"/>';
@@ -13,7 +13,7 @@ const motion = function (isInitialSetup, isStage, targetId, colors) {
     );
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
-    <category name="%{BKY_CATEGORY_MOTION}" id="motion" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
+    <category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_MOTION', 'Motion')}" id="motion" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
         ${isStage ? `
         <label text="${stageSelected}"></label>
         ` : `
@@ -158,7 +158,7 @@ const looks = function (isInitialSetup, isStage, targetId, costumeName, backdrop
     const hmm = ScratchBlocks.ScratchMsgs.translate('LOOKS_HMM', 'Hmm...');
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
-    <category name="%{BKY_CATEGORY_LOOKS}" id="looks" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
+    <category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_LOOKS', 'Looks')}" id="looks" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
         ${isStage ? '' : `
         <block type="looks_sayforsecs">
             <value name="MESSAGE">
@@ -294,7 +294,7 @@ const looks = function (isInitialSetup, isStage, targetId, costumeName, backdrop
 const sound = function (isInitialSetup, isStage, targetId, soundName, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
-    <category name="%{BKY_CATEGORY_SOUND}" id="sound" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
+    <category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_SOUND', 'Sound')}" id="sound" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
         <block id="${targetId}_sound_playuntildone" type="sound_playuntildone">
             <value name="SOUND_MENU">
                 <shadow type="sound_sounds_menu">
@@ -350,7 +350,7 @@ const sound = function (isInitialSetup, isStage, targetId, soundName, colors) {
 const events = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
-    <category name="%{BKY_CATEGORY_EVENTS}" id="events" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
+    <category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_EVENTS', 'Events')}" id="events" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
         <block type="event_whenflagclicked"/>
         <block type="event_whenkeypressed">
         </block>
@@ -391,7 +391,7 @@ const control = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
     <category
-        name="%{BKY_CATEGORY_CONTROL}"
+        name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_CONTROL', 'Control')}"
         id="control"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}">
@@ -444,7 +444,7 @@ const sensing = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
     <category
-        name="%{BKY_CATEGORY_SENSING}"
+        name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_SENSING', 'Sensing')}"
         id="sensing"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}">
@@ -526,7 +526,7 @@ const operators = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
     <category
-        name="%{BKY_CATEGORY_OPERATORS}"
+        name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_OPERATORS', 'Operators')}"
         id="operators"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}">
@@ -715,7 +715,7 @@ const variables = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
     <category
-        name="%{BKY_CATEGORY_VARIABLES}"
+        name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_VARIABLES', 'Variables')}"
         id="variables"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}"
@@ -728,7 +728,7 @@ const myBlocks = function (isInitialSetup, isStage, targetId, colors) {
     // Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
     return `
     <category
-        name="%{BKY_CATEGORY_MYBLOCKS}"
+        name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_MYBLOCKS', 'My Blocks')}"
         id="myBlocks"
         colour="${colors.primary}"
         secondaryColour="${colors.tertiary}"