diff --git a/core/renderers/common/constants.js b/core/renderers/common/constants.js
index 8d24c4301..9916a4925 100644
--- a/core/renderers/common/constants.js
+++ b/core/renderers/common/constants.js
@@ -194,13 +194,13 @@ Blockly.blockRendering.ConstantProvider = function() {
 
   /**
    * Height of the top hat.
-   * @private
+   * @type {number}
    */
   this.START_HAT_HEIGHT = 15;
 
   /**
    * Width of the top hat.
-   * @private
+   * @type {number}
    */
   this.START_HAT_WIDTH = 100;
 
diff --git a/core/renderers/zelos/constants.js b/core/renderers/zelos/constants.js
index 17c6f2871..135d61130 100644
--- a/core/renderers/zelos/constants.js
+++ b/core/renderers/zelos/constants.js
@@ -189,6 +189,16 @@ Blockly.zelos.ConstantProvider = function() {
    */
   this.JAGGED_TEETH_WIDTH = 0;
 
+  /**
+   * @override
+   */
+  this.START_HAT_HEIGHT = 22;
+
+  /**
+   * @override
+   */
+  this.START_HAT_WIDTH = 96;
+
   /**
    * @enum {number}
    * @override
@@ -423,6 +433,27 @@ Blockly.zelos.ConstantProvider.prototype.dispose = function() {
   }
 };
 
+/**
+ * @override
+ */
+Blockly.zelos.ConstantProvider.prototype.makeStartHat = function() {
+  var height = this.START_HAT_HEIGHT;
+  var width = this.START_HAT_WIDTH;
+
+  var mainPath =
+      Blockly.utils.svgPaths.curve('c',
+          [
+            Blockly.utils.svgPaths.point(25, -height),
+            Blockly.utils.svgPaths.point(71, -height),
+            Blockly.utils.svgPaths.point(width, 0)
+          ]);
+  return {
+    height: height,
+    width: width,
+    path: mainPath
+  };
+};
+
 /**
  * Create sizing and path information about a hexagonal shape.
  * @return {!Object} An object containing sizing and path information about
diff --git a/core/renderers/zelos/info.js b/core/renderers/zelos/info.js
index cf7d45554..4939fcd06 100644
--- a/core/renderers/zelos/info.js
+++ b/core/renderers/zelos/info.js
@@ -181,6 +181,11 @@ Blockly.zelos.RenderInfo.prototype.getInRowSpacing_ = function(prev, next) {
       return next.notchOffset - this.constants_.CORNER_RADIUS;
     }
   }
+  // Spacing between a square corner and a hat.
+  if (prev && Blockly.blockRendering.Types.isLeftSquareCorner(prev) && next &&
+      Blockly.blockRendering.Types.isHat(next)) {
+    return this.constants_.NO_PADDING;
+  }
   return this.constants_.MEDIUM_PADDING;
 };
 
diff --git a/core/renderers/zelos/measurables/rows.js b/core/renderers/zelos/measurables/rows.js
index 1d1a34dfe..64c5836b8 100644
--- a/core/renderers/zelos/measurables/rows.js
+++ b/core/renderers/zelos/measurables/rows.js
@@ -62,7 +62,10 @@ Blockly.zelos.TopRow.prototype.endsWithElemSpacer = function() {
  * @override
  */
 Blockly.zelos.TopRow.prototype.hasLeftSquareCorner = function(block) {
-  return !!block.outputConnection;
+  var hasHat = (typeof block.hat !== 'undefined' ?
+      block.hat === 'cap' : this.constants_.ADD_START_HATS) &&
+      !block.outputConnection && !block.previousConnection;
+  return !!block.outputConnection || hasHat;
 };
 
 /**