diff --git a/src/client/components/elements/Button/index.scss b/src/client/components/elements/Button/index.scss
index f8641172fc..fa4c2749eb 100644
--- a/src/client/components/elements/Button/index.scss
+++ b/src/client/components/elements/Button/index.scss
@@ -12,10 +12,12 @@
   font-weight: normal;
   text-decoration: none;
   text-align: center;
+  color: inherit;
 
   .btn__icon {
     border: 1px solid;
     border-radius: 100%;
+    @include color-svg(currentColor);
   }
 
   &--icon-style-without-border {
@@ -94,10 +96,6 @@
   &--style-icon-label {
     padding: 0;
     font-weight: 600;
-
-    .icon {
-      @include color-svg(currentColor);
-    }
   }
 
   &--style-light-gray {
@@ -127,26 +125,24 @@
     }
   }
 
-  &:not(.btn--icon-style-none) {
-    &:hover {
-      .btn__icon {
-        @include color-svg(white);
-        background: $color-dark-gray;
-      }
+  &:hover {
+    .btn__icon {
+      @include color-svg(white);
+      background: $color-dark-gray;
     }
+  }
 
-    &:focus {
-      .btn__icon {
-        @include color-svg($color-dark-gray);
-        background: $color-light-gray;
-      }
+  &:focus {
+    .btn__icon {
+      @include color-svg($color-dark-gray);
+      background: $color-light-gray;
     }
+  }
 
-    &:active {
-      .btn__icon {
-        @include color-svg(white);
-        background: lighten($color-dark-gray, 10%);
-      }
+  &:active {
+    .btn__icon {
+      @include color-svg(white);
+      background: lighten($color-dark-gray, 10%);
     }
   }
 
diff --git a/src/client/components/elements/Pill/index.js b/src/client/components/elements/Pill/index.js
index 59102327ab..51ef706586 100644
--- a/src/client/components/elements/Pill/index.js
+++ b/src/client/components/elements/Pill/index.js
@@ -63,7 +63,7 @@ Pill.propTypes = {
   icon: PropTypes.node,
   alignIcon: PropTypes.oneOf(['left', 'right']),
   onClick: PropTypes.func,
-  pillStyle: PropTypes.oneOf(['light', 'dark']),
+  pillStyle: PropTypes.oneOf(['light', 'dark', 'light-gray']),
 };
 
 export default Pill;
diff --git a/src/client/components/elements/Pill/index.scss b/src/client/components/elements/Pill/index.scss
index 03e350e1d9..83b98e0e95 100644
--- a/src/client/components/elements/Pill/index.scss
+++ b/src/client/components/elements/Pill/index.scss
@@ -46,6 +46,11 @@
     }
   }
 
+  &--style-light-gray {
+    background: $color-background-gray;
+    color: $color-dark-gray;
+  }
+
   &--style-dark {
     background: $color-dark-gray;
     color: white;
diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.js b/src/client/components/forms/DraggableSection/ActionHandle/index.js
index 3a01289af1..6626af683a 100644
--- a/src/client/components/forms/DraggableSection/ActionHandle/index.js
+++ b/src/client/components/forms/DraggableSection/ActionHandle/index.js
@@ -38,7 +38,7 @@ const ActionHandle = (props) => {
                 iconStyle="with-border"
                 onClick={() => removeRow()}
               />
-        )}
+            )}
           >
             Remove 
             {singularLabel}
diff --git a/src/client/components/forms/DraggableSection/ActionHandle/index.scss b/src/client/components/forms/DraggableSection/ActionHandle/index.scss
index 4f81880933..2952b27525 100644
--- a/src/client/components/forms/DraggableSection/ActionHandle/index.scss
+++ b/src/client/components/forms/DraggableSection/ActionHandle/index.scss
@@ -4,8 +4,6 @@
   padding: base(.5);
   padding-left: base(.75);
   margin-bottom: base(.5);
-  position: absolute;
-  top: 0; bottom: 0; left: 100%;
 
   &__controls-container {
     position: relative;
@@ -17,6 +15,7 @@
     justify-content: center;
     height: 100%;
     flex-direction: column;
+    color: $color-gray;
   }
 
   &--vertical-alignment-top {
diff --git a/src/client/components/forms/DraggableSection/PositionHandle/index.scss b/src/client/components/forms/DraggableSection/PositionHandle/index.scss
index f2a3ad287a..10ff121c22 100644
--- a/src/client/components/forms/DraggableSection/PositionHandle/index.scss
+++ b/src/client/components/forms/DraggableSection/PositionHandle/index.scss
@@ -1,10 +1,8 @@
 @import '../../../../scss/styles';
 
 .position-handle {
-  padding: base(.5) base(.75) base(.5) 0;
+  padding-right: base(1);
   margin-bottom: base(.5);
-  position: absolute;
-  top: 0; right: 100%; bottom: 0;
 
   &__controls-container {
     position: relative;
@@ -13,7 +11,7 @@
   }
 
   &__controls {
-    padding-right: base(.5);
+    padding-right: base(.75);
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/src/client/components/forms/DraggableSection/EditableBlockTitle/index.js b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
similarity index 96%
rename from src/client/components/forms/DraggableSection/EditableBlockTitle/index.js
rename to src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
index 5b819437c6..c4f8247b24 100644
--- a/src/client/components/forms/DraggableSection/EditableBlockTitle/index.js
+++ b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.js
@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
-import useFieldType from '../../useFieldType';
+import useFieldType from '../../../useFieldType';
 
 import './index.scss';
 
diff --git a/src/client/components/forms/DraggableSection/EditableBlockTitle/index.scss b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss
similarity index 63%
rename from src/client/components/forms/DraggableSection/EditableBlockTitle/index.scss
rename to src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss
index b4e2aa7c98..4426d36e5d 100644
--- a/src/client/components/forms/DraggableSection/EditableBlockTitle/index.scss
+++ b/src/client/components/forms/DraggableSection/SectionTitle/EditableBlockTitle/index.scss
@@ -1,4 +1,4 @@
-@import '../../../../scss/styles.scss';
+@import '../../../../../scss/styles.scss';
 
 .editable-block-title {
   position: relative;
@@ -18,21 +18,29 @@
   input {
     padding: base(.1) base(.2);
     font-family: $font-body;
-    font-weight: bold;
+    font-weight: 600;
     margin-right: base(.5);
+    font-size: base(.75);
+    color: $color-dark-gray
   }
 
   input {
     background: none;
     border: none;
     width: 100%;
-    margin-right: base(.5);
-    border-radius: $style-radius-s;
+    margin-left: base(.5);
 
     &:hover,
     &:focus {
       outline: 0;
-      background-color: $color-light-gray;
+    }
+
+    &:hover {
+      box-shadow: inset 0px -2px 0px -1px $color-light-gray;
+    }
+
+    &:focus {
+      box-shadow: none;
     }
   }
 }
diff --git a/src/client/components/forms/DraggableSection/SectionTitle/index.js b/src/client/components/forms/DraggableSection/SectionTitle/index.js
new file mode 100644
index 0000000000..d49e45ae8a
--- /dev/null
+++ b/src/client/components/forms/DraggableSection/SectionTitle/index.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import EditableBlockTitle from './EditableBlockTitle';
+import Pill from '../../../elements/Pill';
+
+import './index.scss';
+
+const baseClass = 'section-title';
+
+const SectionTitle = (props) => {
+  const { label, ...remainingProps } = props;
+
+  const classes = [
+    baseClass,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={classes}>
+      <Pill pillStyle="light-gray">{label}</Pill>
+      <EditableBlockTitle {...remainingProps} />
+    </div>
+  );
+};
+
+SectionTitle.defaultProps = {
+  label: '',
+};
+
+SectionTitle.propTypes = {
+  label: PropTypes.string,
+};
+
+export default SectionTitle;
diff --git a/src/client/components/forms/DraggableSection/SectionTitle/index.scss b/src/client/components/forms/DraggableSection/SectionTitle/index.scss
new file mode 100644
index 0000000000..0eb848cce5
--- /dev/null
+++ b/src/client/components/forms/DraggableSection/SectionTitle/index.scss
@@ -0,0 +1,7 @@
+@import '../../../../scss/styles';
+
+.section-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: base(.75);
+}
diff --git a/src/client/components/forms/DraggableSection/index.js b/src/client/components/forms/DraggableSection/index.js
index 03388e6f50..e7f24dc0ad 100644
--- a/src/client/components/forms/DraggableSection/index.js
+++ b/src/client/components/forms/DraggableSection/index.js
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import AnimateHeight from 'react-animate-height';
 import { Draggable } from 'react-beautiful-dnd';
 
-import RenderFields from '../RenderFields';
-import Pill from '../../elements/Pill';
-import Chevron from '../../icons/Chevron';
-import EditableBlockTitle from './EditableBlockTitle';
-import PositionHandle from './PositionHandle';
 import ActionHandle from './ActionHandle';
+import Chevron from '../../icons/Chevron';
+import SectionTitle from './SectionTitle';
+import PositionHandle from './PositionHandle';
+import RenderFields from '../RenderFields';
 
 import './index.scss';
 
@@ -66,7 +65,6 @@ const DraggableSection = (props) => {
             {...providedDrag.draggableProps}
           >
 
-            {/* Render DragPoint - with MoveRow Action Points */}
             <PositionHandle
               dragHandleProps={providedDrag.dragHandleProps}
               moveRow={moveRow}
@@ -75,6 +73,15 @@ const DraggableSection = (props) => {
             />
 
             <div className={`${baseClass}__render-fields-wrapper`}>
+
+              {blockType === 'flexible' && (
+                <SectionTitle
+                  label={singularLabel}
+                  initialData={initialData?.[`${parentPath}.${rowIndex}.blockName`]}
+                  path={`${parentPath}.${rowIndex}.blockName`}
+                />
+              )}
+
               {/* Render fields */}
               <RenderFields
                 initialData={initialData}
@@ -90,7 +97,6 @@ const DraggableSection = (props) => {
               />
             </div>
 
-            {/* Render Add/Remove/Collapse */}
             <ActionHandle
               removeRow={removeRow}
               addRow={addRow}
diff --git a/src/client/components/forms/DraggableSection/index.scss b/src/client/components/forms/DraggableSection/index.scss
index b6d0f72f89..ede6cbab7d 100644
--- a/src/client/components/forms/DraggableSection/index.scss
+++ b/src/client/components/forms/DraggableSection/index.scss
@@ -1,5 +1,9 @@
 @import '../../../scss/styles.scss';
 
+//////////////////////
+// HELPER MIXINS
+//////////////////////
+
 @mixin realtively-position-handles {
   .position-handle {
     position: relative;
@@ -12,15 +16,35 @@
   }
 }
 
+@mixin absolutely-position-handles {
+  .position-handle {
+    position: absolute;
+    top: 0; right: 100%; bottom: 0;
+  }
+
+  .action-handle {
+    position: absolute;
+    top: 0; bottom: 0; left: 100%;
+  }
+}
+
+//////////////////////
+// COMPONENT STYLES
+//////////////////////
+
 .draggable-section {
   display: flex;
   position: relative;
+  padding-top: base(.75);
+  padding-bottom: base(.75);
+  margin-bottom: base(.75);
 
   &__render-fields-wrapper {
     width: 100%;
   }
 
-  &.is-hovered {
+  &.is-hovered,
+  &:focus-within {
     > .position-handle {
       .position-handle__controls-container {
         box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
@@ -45,12 +69,20 @@
   }
 
   @include mid-break {
-    @include realtively-position-handles;
+    @include realtively-position-handles();
   }
 }
 
+//////////////////////
+// EXTERNAL SCOPES
+//////////////////////
+
+.collection-edit {
+  @include absolutely-position-handles();
+}
+
 .field-type.repeater .field-type.repeater {
-  @include realtively-position-handles;
+  @include realtively-position-handles();
 }
 
 
diff --git a/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.js b/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.js
deleted file mode 100644
index c35c096caa..0000000000
--- a/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { asModal } from '@trbl/react-modal';
-
-import './index.scss';
-
-const baseClass = 'add-content-block-modal';
-
-const AddContentBlockModal = (props) => {
-  const {
-    addRow,
-    blocks,
-    rowIndexBeingAdded,
-    closeAllModals,
-  } = props;
-
-  const handleAddRow = (blockType) => {
-    addRow(rowIndexBeingAdded, blockType);
-    closeAllModals();
-  };
-
-  return (
-    <div className={baseClass}>
-      <h2>Add a layout block</h2>
-      <ul>
-        {blocks.map((block, i) => {
-          return (
-            <li key={i}>
-              <button
-                onClick={() => handleAddRow(block.slug)}
-                type="button"
-              >
-                {block.labels.singular}
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-AddContentBlockModal.defaultProps = {
-  rowIndexBeingAdded: null,
-};
-
-AddContentBlockModal.propTypes = {
-  addRow: PropTypes.func.isRequired,
-  closeAllModals: PropTypes.func.isRequired,
-  blocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      labels: PropTypes.shape({
-        singular: PropTypes.string,
-      }),
-      previewImage: PropTypes.string,
-      slug: PropTypes.string,
-    }),
-  ).isRequired,
-  rowIndexBeingAdded: PropTypes.number,
-};
-
-export default asModal(AddContentBlockModal);
diff --git a/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.scss b/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.scss
deleted file mode 100644
index c742974235..0000000000
--- a/src/client/components/forms/field-types/Flexible/AddContentBlockModal/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../../../../../scss/styles';
-
-.add-content-block-modal {
-  height: 100%;
-  background: rgba(white, .875);
-
-  &__wrap {
-    padding: base(1);
-  }
-}
diff --git a/src/client/components/forms/field-types/Flexible/AddRowModal/index.js b/src/client/components/forms/field-types/Flexible/AddRowModal/index.js
deleted file mode 100644
index 71d42de872..0000000000
--- a/src/client/components/forms/field-types/Flexible/AddRowModal/index.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { asModal } from '@trbl/react-modal';
-
-const baseClass = 'flexible-add-row-modal';
-
-const AddRowModal = (props) => {
-  const {
-    addRow,
-    blocks,
-    rowIndexBeingAdded,
-    closeAllModals,
-  } = props;
-
-  const handleAddRow = (blockType) => {
-    addRow(rowIndexBeingAdded, blockType);
-    closeAllModals();
-  };
-
-  return (
-    <div className={baseClass}>
-      <ul>
-        {blocks.map((block, i) => {
-          return (
-            <li key={i}>
-              <button
-                onClick={() => handleAddRow(block.slug)}
-                type="button"
-              >
-                {block.labels.singular}
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-AddRowModal.defaultProps = {
-  rowIndexBeingAdded: null,
-};
-
-AddRowModal.propTypes = {
-  addRow: PropTypes.func.isRequired,
-  closeAllModals: PropTypes.func.isRequired,
-  blocks: PropTypes.arrayOf(
-    PropTypes.shape({
-      labels: PropTypes.shape({
-        singular: PropTypes.string,
-      }),
-      previewImage: PropTypes.string,
-      slug: PropTypes.string,
-    }),
-  ).isRequired,
-  rowIndexBeingAdded: PropTypes.number,
-};
-
-export default asModal(AddRowModal);
diff --git a/src/client/components/forms/field-types/Flexible/index.js b/src/client/components/forms/field-types/Flexible/index.js
index 6352451eb0..94f1c89ee1 100644
--- a/src/client/components/forms/field-types/Flexible/index.js
+++ b/src/client/components/forms/field-types/Flexible/index.js
@@ -205,8 +205,8 @@ const Flexible = (props) => {
                         dispatchCollapsibleStates={dispatchCollapsibleStates}
                         collapsibleStates={collapsibleStates}
                         customComponentsPath={`${customComponentsPath}${name}.fields.`}
-                        positionHandleVerticalAlignment="top"
-                        actionHandleVerticalAlignment="top"
+                        positionHandleVerticalAlignment="sticky"
+                        actionHandleVerticalAlignment="sticky"
                       />
                     );
                   }
diff --git a/src/client/components/icons/Plus/index.scss b/src/client/components/icons/Plus/index.scss
index e48738efef..c1b0d8e6d4 100644
--- a/src/client/components/icons/Plus/index.scss
+++ b/src/client/components/icons/Plus/index.scss
@@ -6,6 +6,6 @@
 
   .stroke {
     stroke: $color-dark-gray;
-    stroke-width: $style-stroke-width-m;
+    stroke-width: $style-stroke-width;
   }
 }
diff --git a/src/client/components/icons/X/index.scss b/src/client/components/icons/X/index.scss
index aa2503c540..3b85ed6b19 100644
--- a/src/client/components/icons/X/index.scss
+++ b/src/client/components/icons/X/index.scss
@@ -3,6 +3,6 @@
 .icon--x {
   line {
     stroke: $color-dark-gray;
-    stroke-width: $style-stroke-width-m;
+    stroke-width: $style-stroke-width;
   }
 }