diff --git a/core/css.js b/core/css.js
index e6526522b1..b908ae2f4f 100644
--- a/core/css.js
+++ b/core/css.js
@@ -1287,6 +1287,57 @@ const styles = `
     width: 1.25rem;
     height: 1.25rem;
   }
+
+  .blocklyCommentTopbar {
+    height: 32px;
+    --commentBorderColour: #e2db96;
+  }
+
+  .blocklyCommentTopbarBackground {
+    height: 32px;
+  }
+
+  .blocklyFoldoutIcon {
+    width: 32px;
+    height: 32px;
+    transform-origin: 16px 16px;
+  }
+
+  .blocklyComment:not(.blocklyCollapsed) .blocklyCommentHighlight,
+  .blocklySelected .blocklyCommentHighlight,
+  .blocklyCollapsed .blocklyCommentTopbarBackground,
+  .blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
+    stroke: #bcA903;
+    stroke-width: 1px;
+  }
+
+  .blocklyCollapsed.blocklyComment .blocklyFoldoutIcon {
+    transform: rotate(-180deg);
+  }
+
+  .zelos-renderer.scratch-theme .blocklyComment .blocklyTextarea {
+    border: none;
+    --commentFillColour: #fef49c;
+    font-size: 12pt;
+    font-weight: 400;
+    padding: 12px;
+    color: #575e75;
+  }
+
+  .zelos-renderer.scratch-theme .blocklyCommentText.blocklyText {
+    font-weight: 400;
+  }
+
+  .blocklyDeleteIcon {
+    display: block;
+    width: 32px;
+    height: 32px;
+  }
+
+  .blocklyResizeHandle {
+    height: 20px;
+    width: 20px;
+  }
 `;
 
 Blockly.Css.register(styles);
diff --git a/media/delete-icon.svg b/media/delete-icon.svg
new file mode 100644
index 0000000000..ed1f71edff
--- /dev/null
+++ b/media/delete-icon.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="-14 -10 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>delete-x</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="delete-x" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M10.8761123,10.87825 C10.2421123,11.52125 9.20511231,11.52125 8.56211231,10.87825 L5.92911231,8.24525 L3.29511231,10.87825 C2.65611231,11.51725 1.62011231,11.51725 0.981112306,10.87825 C0.662112306,10.55925 0.500112306,10.13725 0.500112306,9.72125 C0.500112306,9.30425 0.662112306,8.88325 0.981112306,8.56425 L3.61411231,5.93125 L0.977112306,3.29325 C0.657112306,2.97325 0.495112306,2.55225 0.500112306,2.13125 C0.500112306,1.71425 0.657112306,1.29825 0.977112306,0.97925 C1.61511231,0.34025 2.65111231,0.34025 3.29111231,0.97925 L5.92911231,3.61625 L8.56611231,0.97925 C9.20511231,0.34025 10.2421123,0.34025 10.8811123,0.97925 C11.5201123,1.61725 11.5201123,2.65425 10.8811123,3.29325 L8.24211231,5.93125 L10.8811123,8.56825 C11.5201123,9.20725 11.5201123,10.23425 10.8761123,10.87825" id="Fill-1" fill="#575E75"></path>
+    </g>
+</svg>
diff --git a/media/comment-arrow-down.svg b/media/foldout-icon.svg
similarity index 100%
rename from media/comment-arrow-down.svg
rename to media/foldout-icon.svg
diff --git a/media/resize-handle.svg b/media/resize-handle.svg
new file mode 100644
index 0000000000..b7002710e5
--- /dev/null
+++ b/media/resize-handle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 20 20" width="16" fill="transparent" stroke="#888">
+<line class="blocklyResizeLine" x1="5.333333333333333" y1="15" x2="15" y2="5.333333333333333"></line><line class="blocklyResizeLine" x1="10.666666666666666" y1="15" x2="15" y2="10.666666666666666"></line>
+</svg>
diff --git a/src/index.js b/src/index.js
index d00c3b2a40..1e2dc0ca8d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -83,3 +83,4 @@ Blockly.FlyoutButton.TEXT_MARGIN_X = 40;
 Blockly.FlyoutButton.TEXT_MARGIN_Y = 10;
 Blockly.ContextMenuRegistry.registry.unregister('blockDisable');
 Blockly.ContextMenuRegistry.registry.unregister('blockInline');
+Blockly.ContextMenuItems.registerCommentOptions();