diff --git a/src/app/content/highlights/components/ColorPicker.spec.tsx b/src/app/content/highlights/components/ColorPicker.spec.tsx
index c29fb7a4483..32c030449d3 100644
--- a/src/app/content/highlights/components/ColorPicker.spec.tsx
+++ b/src/app/content/highlights/components/ColorPicker.spec.tsx
@@ -105,18 +105,6 @@ describe('ColorPicker', () => {
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('handles having no onRemove when trashcan is clicked', () => {
-    const onChange = jest.fn();
-    const component = renderer.create(<TestContainer>
-      <ColorPicker color={highlightStyles[0].label} onChange={onChange} />
-    </TestContainer>);
-
-    const button = component.root.findByType('button');
-
-    button.props.onClick();
-    expect(onChange).not.toHaveBeenCalled();
-  });
-
   it('operates as a radiogroup', () => {
     const onChange = jest.fn();
     const onRemove = jest.fn();
@@ -125,7 +113,7 @@ describe('ColorPicker', () => {
         <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
-    const rg = root.querySelector('fieldset') as HTMLFieldSetElement;
+    const rg = root.querySelector('fieldset > fieldset') as HTMLFieldSetElement;
 
     expect(rg).toBeTruthy();
     rg?.focus();
diff --git a/src/app/content/highlights/components/ColorPicker.tsx b/src/app/content/highlights/components/ColorPicker.tsx
index 15c20b14420..d20610c7ddd 100644
--- a/src/app/content/highlights/components/ColorPicker.tsx
+++ b/src/app/content/highlights/components/ColorPicker.tsx
@@ -82,6 +82,13 @@ function nextIdx(idx: number, itemCount: number, key: NavKeys) {
   return idx;
 }
 
+// tslint:disable-next-line:variable-name
+const FSWrapper = styled.fieldset`
+  border: 0;
+  display: flex;
+  flex-direction: row;
+`;
+
 // tslint:disable-next-line:variable-name
 const ColorPicker = ({className, ...props}: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
@@ -98,11 +105,9 @@ const ColorPicker = ({className, ...props}: Props) => {
       const destIdx = nextIdx(idx, inputs.length, event.key as NavKeys);
       const el = inputs[destIdx];
 
-      if (el) {
-        event.preventDefault();
-        el.focus();
-        el.click();
-      }
+      event.preventDefault();
+      el.focus();
+      el.click();
     },
     []
   );
@@ -120,36 +125,39 @@ const ColorPicker = ({className, ...props}: Props) => {
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
   return (
-    <fieldset
-      className={className}
-      tabIndex={0}
-      ref={ref}
-      onKeyDown={handleKeyNavigation}
-      onFocus={focusOnSelected}
-      role='radiogroup'
-    >
-      <legend>Choose highlight color</legend>
-      {highlightStyles.map((style) => <ColorButton key={style.label}
-        name={style.label}
-        checked={props.multiple ? props.selected.includes(style.label) : props.color === style.label}
-        style={style}
-        size={props.size}
-        tabIndex={-1}
-        onChange={() => props.multiple
-          ? props.selected.includes(style.label)
-            ? props.onChange(props.selected.filter(not(match(style.label))))
-            : props.onChange([...props.selected, style.label])
-          : props.color === style.label
-            ? props.onRemove ? props.onRemove() : null
-            : props.onChange(style.label)}
-      />)}
+    <FSWrapper>
+      <legend>Select or clear highlight color</legend>
+      <fieldset
+        className={className}
+        tabIndex={0}
+        ref={ref}
+        onKeyDown={handleKeyNavigation}
+        onFocus={focusOnSelected}
+        role='radiogroup'
+      >
+        <legend>Choose highlight color</legend>
+        {highlightStyles.map((style) => <ColorButton key={style.label}
+          name={style.label}
+          checked={props.multiple ? props.selected.includes(style.label) : props.color === style.label}
+          style={style}
+          size={props.size}
+          tabIndex={-1}
+          onChange={() => props.multiple
+            ? props.selected.includes(style.label)
+              ? props.onChange(props.selected.filter(not(match(style.label))))
+              : props.onChange([...props.selected, style.label])
+            : props.color === style.label
+              ? props.onRemove ? props.onRemove() : null
+              : props.onChange(style.label)}
+        />)}
+      </fieldset>
       { (!hasOnRemove || props.size === 'small') ? null :
         <TrashButton
           size={props.size}
           onClick={props.onRemove}
         />
       }
-    </fieldset>
+    </FSWrapper>
   );
 };
 
diff --git a/src/app/content/highlights/components/EditCard.spec.tsx b/src/app/content/highlights/components/EditCard.spec.tsx
index 6eb7e59ba00..ba8bc81cf5a 100644
--- a/src/app/content/highlights/components/EditCard.spec.tsx
+++ b/src/app/content/highlights/components/EditCard.spec.tsx
@@ -120,8 +120,9 @@ describe('EditCard', () => {
     const data = {
       ...highlightData,
       annotation: '',
+      color: 'red',
     };
-    const component = renderer.create(
+    const {root} = renderer.create(
       <TestContainer services={services} store={store}>
         <EditCard
           {...editCardProps}
@@ -131,7 +132,8 @@ describe('EditCard', () => {
       </TestContainer>
     );
 
-    const picker = component.root.findByType(ColorPicker);
+    const picker = root.findByType(ColorPicker);
+
     renderer.act(() => {
       picker.props.onRemove();
     });
@@ -154,14 +156,25 @@ describe('EditCard', () => {
     );
 
     const picker = component.root.findByType(ColorPicker);
-    renderer.act(() => {
-      picker.props.onRemove();
-    });
 
-    expect(editCardProps.onRemove).not.toHaveBeenCalled();
+    expect(picker.props.onRemove).toBeNull();
     mockSpyUser.mockClear();
   });
 
+  it('doesn\'t chain ColorPicker onRemove if there is no data', () => {
+    const mockSpyUser = jest.spyOn(selectAuth, 'user')
+      .mockReturnValue(formatUser(testAccountsUser));
+    const component = renderer.create(
+      <TestContainer services={services} store={store}>
+            <EditCard {...editCardProps} isActive={true} />
+      </TestContainer>
+    );
+
+    const picker = component.root.findByType(ColorPicker);
+
+    expect(picker.props.onRemove).toBeNull();
+    mockSpyUser.mockClear();
+  });
   it('doesn\'t chain ColorPicker onRemove if there is a pending note', () => {
     highlight.getStyle.mockReturnValue('red');
     const mockSpyUser = jest.spyOn(selectAuth, 'user')
@@ -186,11 +199,8 @@ describe('EditCard', () => {
     });
 
     const picker = component.root.findByType(ColorPicker);
-    renderer.act(() => {
-      picker.props.onRemove();
-    });
 
-    expect(editCardProps.onRemove).not.toHaveBeenCalled();
+    expect(picker.props.onRemove).toBeNull();
     mockSpyUser.mockClear();
   });
 
diff --git a/src/app/content/highlights/components/EditCard.tsx b/src/app/content/highlights/components/EditCard.tsx
index d771c4658a7..b4db5b9893d 100644
--- a/src/app/content/highlights/components/EditCard.tsx
+++ b/src/app/content/highlights/components/EditCard.tsx
@@ -253,10 +253,10 @@ function useOnRemove(props: EditCardProps, pendingAnnotation: string) {
   const trackDeleteHighlight = useAnalyticsEvent('deleteHighlight');
   const removeAndTrack = React.useCallback(
     () => {
-      if (props.data) {
-        onRemove();
-        trackDeleteHighlight(props.data.color);
-      }
+      const data = assertDefined(props.data, 'props.data must be defined');
+
+      onRemove();
+      trackDeleteHighlight(data.color);
     },
     [onRemove, props.data, trackDeleteHighlight]
   );
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
index 4c9cbd9582b..756502d44fe 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -136,11 +136,11 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: hidden;
 }
 
-.c19 {
+.c20 {
   display: none;
 }
 
-.c21 {
+.c22 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -155,7 +155,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border-radius: 50%;
 }
 
-.c22 {
+.c23 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -169,7 +169,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #fed200;
 }
 
-.c24 {
+.c25 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -183,7 +183,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #92d101;
 }
 
-.c26 {
+.c27 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -197,7 +197,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #00c3ed;
 }
 
-.c28 {
+.c29 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -211,7 +211,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #545ec8;
 }
 
-.c30 {
+.c31 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -225,7 +225,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   border: 1px solid #de017e;
 }
 
-.c16 {
+.c17 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -247,19 +247,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c16 .c18 {
+.c17 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c16 input:focus + .c20 {
+.c17 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c23 {
+.c24 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -281,19 +281,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c23 .c18 {
+.c24 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c23 input:focus + .c20 {
+.c24 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c25 {
+.c26 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -315,7 +315,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c25 .c18 {
+.c26 .c19 {
   height: 1rem;
   width: 1rem;
   color: #00c3ed;
@@ -324,14 +324,14 @@ exports[`ContextMenu match snapshot when open 1`] = `
   display: block;
 }
 
-.c25 input:focus + .c20 {
+.c26 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c27 {
+.c28 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -353,19 +353,19 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c27 .c18 {
+.c28 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c27 input:focus + .c20 {
+.c28 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c29 {
+.c30 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -387,24 +387,24 @@ exports[`ContextMenu match snapshot when open 1`] = `
   overflow: visible;
 }
 
-.c29 .c18 {
+.c30 .c19 {
   height: 1rem;
   width: 1rem;
 }
 
-.c29 input:focus + .c20 {
+.c30 input:focus + .c21 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c17 {
+.c18 {
   cursor: pointer;
   margin: 0;
 }
 
-.c17 input {
+.c18 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -412,7 +412,18 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 0;
 }
 
-.c15 {
+.c14 {
+  border: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c16 {
   border: 0;
   outline: none;
   display: -webkit-box;
@@ -427,7 +438,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c15 legend {
+.c16 legend {
   position: absolute;
   height: 1px;
   width: 1px;
@@ -503,7 +514,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
   color: #818181;
 }
 
-.c0 .c14 {
+.c0 .c15 {
   margin: 0.6rem 0 0 0.6rem;
 }
 
@@ -571,21 +582,21 @@ exports[`ContextMenu match snapshot when open 1`] = `
   width: 100%;
 }
 
-.c31 {
+.c32 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
   color: #424242;
 }
 
-.c32 {
+.c33 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
   color: #424242;
 }
 
-.c33 {
+.c34 {
   width: 15px;
   height: 15px;
   margin-right: 10px;
@@ -649,54 +660,26 @@ exports[`ContextMenu match snapshot when open 1`] = `
       >
         <li>
           <fieldset
-            className="c14 c15"
-            onFocus={[Function]}
-            onKeyDown={[Function]}
-            role="radiogroup"
-            tabIndex={0}
+            className="c14"
           >
             <legend>
-              Choose highlight color
+              Select or clear highlight color
             </legend>
-            <label
-              aria-label="Apply yellow highlight"
-              checked={false}
-              className="c16 c17"
-              component={<label />}
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#8f7700",
-                  "focused": "#fed200",
-                  "label": "yellow",
-                  "passive": "#ffff8a",
-                }
-              }
-              title="yellow"
+            <fieldset
+              className="c15 c16"
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              role="radiogroup"
+              tabIndex={0}
             >
-              <svg
-                aria-hidden="true"
-                className="c9 c18 c19"
-                fill="currentColor"
-                focusable="false"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-                  fill="currentColor"
-                />
-              </svg>
-              <input
-                aria-checked={false}
+              <legend>
+                Choose highlight color
+              </legend>
+              <label
+                aria-label="Apply yellow highlight"
                 checked={false}
-                name="yellow"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
+                className="c17 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -706,71 +689,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#ffff8a",
                   }
                 }
-              />
-              <span
-                className="c22"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#8f7700",
-                    "focused": "#fed200",
-                    "label": "yellow",
-                    "passive": "#ffff8a",
-                  }
-                }
-              />
-            </label>
-            <label
-              aria-label="Apply green highlight"
-              checked={false}
-              className="c23 c17"
-              component={<label />}
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#4e6f01",
-                  "focused": "#92d101",
-                  "label": "green",
-                  "passive": "#def99f",
-                }
-              }
-              title="green"
-            >
-              <svg
-                aria-hidden="true"
-                className="c9 c18 c19"
-                fill="currentColor"
-                focusable="false"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+                title="yellow"
               >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  name="yellow"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </svg>
-              <input
-                aria-checked={false}
-                checked={false}
-                name="green"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#4e6f01",
-                    "focused": "#92d101",
-                    "label": "green",
-                    "passive": "#def99f",
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#8f7700",
+                      "focused": "#fed200",
+                      "label": "yellow",
+                      "passive": "#ffff8a",
+                    }
                   }
-                }
-              />
-              <span
-                className="c24"
+                />
+                <span
+                  className="c23"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#8f7700",
+                      "focused": "#fed200",
+                      "label": "yellow",
+                      "passive": "#ffff8a",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply green highlight"
+                checked={false}
+                className="c24 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -780,59 +751,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#def99f",
                   }
                 }
-              />
-            </label>
-            <label
-              aria-label="Apply blue highlight"
-              checked={true}
-              className="c25 c17"
-              component={<label />}
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#006880",
-                  "focused": "#00c3ed",
-                  "label": "blue",
-                  "passive": "#c8f5ff",
-                }
-              }
-              title="blue"
-            >
-              <svg
-                aria-hidden="true"
-                className="c9 c18 c19"
-                fill="currentColor"
-                focusable="false"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+                title="green"
               >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  name="green"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </svg>
-              <input
-                aria-checked={true}
-                checked={true}
-                name="blue"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#006880",
-                    "focused": "#00c3ed",
-                    "label": "blue",
-                    "passive": "#c8f5ff",
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#4e6f01",
+                      "focused": "#92d101",
+                      "label": "green",
+                      "passive": "#def99f",
+                    }
                   }
-                }
-              />
-              <span
-                className="c26"
+                />
+                <span
+                  className="c25"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#4e6f01",
+                      "focused": "#92d101",
+                      "label": "green",
+                      "passive": "#def99f",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply blue highlight"
+                checked={true}
+                className="c26 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -842,59 +813,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#c8f5ff",
                   }
                 }
-              />
-            </label>
-            <label
-              aria-label="Apply purple highlight"
-              checked={false}
-              className="c27 c17"
-              component={<label />}
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#141a3e",
-                  "focused": "#545ec8",
-                  "label": "purple",
-                  "passive": "#cbcfff",
-                }
-              }
-              title="purple"
-            >
-              <svg
-                aria-hidden="true"
-                className="c9 c18 c19"
-                fill="currentColor"
-                focusable="false"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+                title="blue"
               >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <input
+                  aria-checked={true}
+                  checked={true}
+                  name="blue"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
                 />
-              </svg>
-              <input
-                aria-checked={false}
-                checked={false}
-                name="purple"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#141a3e",
-                    "focused": "#545ec8",
-                    "label": "purple",
-                    "passive": "#cbcfff",
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#006880",
+                      "focused": "#00c3ed",
+                      "label": "blue",
+                      "passive": "#c8f5ff",
+                    }
                   }
-                }
-              />
-              <span
-                className="c28"
+                />
+                <span
+                  className="c27"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#006880",
+                      "focused": "#00c3ed",
+                      "label": "blue",
+                      "passive": "#c8f5ff",
+                    }
+                  }
+                />
+              </label>
+              <label
+                aria-label="Apply purple highlight"
+                checked={false}
+                className="c28 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -904,47 +875,59 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#cbcfff",
                   }
                 }
-              />
-            </label>
-            <label
-              aria-label="Apply pink highlight"
-              checked={false}
-              className="c29 c17"
-              component={<label />}
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#560131",
-                  "focused": "#de017e",
-                  "label": "pink",
-                  "passive": "#ffc5e1",
-                }
-              }
-              title="pink"
-            >
-              <svg
-                aria-hidden="true"
-                className="c9 c18 c19"
-                fill="currentColor"
-                focusable="false"
-                viewBox="0 0 512 512"
-                xmlns="http://www.w3.org/2000/svg"
+                title="purple"
               >
-                <path
-                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
                   fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  name="purple"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
+                />
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#141a3e",
+                      "focused": "#545ec8",
+                      "label": "purple",
+                      "passive": "#cbcfff",
+                    }
+                  }
+                />
+                <span
+                  className="c29"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#141a3e",
+                      "focused": "#545ec8",
+                      "label": "purple",
+                      "passive": "#cbcfff",
+                    }
+                  }
                 />
-              </svg>
-              <input
-                aria-checked={false}
+              </label>
+              <label
+                aria-label="Apply pink highlight"
                 checked={false}
-                name="pink"
-                onChange={[Function]}
-                tabIndex={-1}
-                type="radio"
-              />
-              <span
-                className="c20 c21"
+                className="c30 c18"
+                component={<label />}
                 size="small"
                 style={
                   Object {
@@ -954,20 +937,55 @@ exports[`ContextMenu match snapshot when open 1`] = `
                     "passive": "#ffc5e1",
                   }
                 }
-              />
-              <span
-                className="c30"
-                size="small"
-                style={
-                  Object {
-                    "focusBorder": "#560131",
-                    "focused": "#de017e",
-                    "label": "pink",
-                    "passive": "#ffc5e1",
+                title="pink"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="c9 c19 c20"
+                  fill="currentColor"
+                  focusable="false"
+                  viewBox="0 0 512 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <input
+                  aria-checked={false}
+                  checked={false}
+                  name="pink"
+                  onChange={[Function]}
+                  tabIndex={-1}
+                  type="radio"
+                />
+                <span
+                  className="c21 c22"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#560131",
+                      "focused": "#de017e",
+                      "label": "pink",
+                      "passive": "#ffc5e1",
+                    }
                   }
-                }
-              />
-            </label>
+                />
+                <span
+                  className="c31"
+                  size="small"
+                  style={
+                    Object {
+                      "focusBorder": "#560131",
+                      "focused": "#de017e",
+                      "label": "pink",
+                      "passive": "#ffc5e1",
+                    }
+                  }
+                />
+              </label>
+            </fieldset>
           </fieldset>
         </li>
         <li
@@ -980,7 +998,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c31"
+              className="c9 c32"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 576 512"
@@ -1004,7 +1022,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c32"
+              className="c9 c33"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 448 512"
@@ -1027,7 +1045,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           >
             <svg
               aria-hidden="true"
-              className="c9 c33"
+              className="c9 c34"
               fill="currentColor"
               focusable="false"
               viewBox="0 0 512 512"
diff --git a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
index 67752fbf0cd..7a7363abe3a 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorPicker matches snapshot no selection 1`] = `
-.c3 {
+.c4 {
   display: inline-block;
   vertical-align: -.125em;
   overflow: hidden;
 }
 
-.c5 {
+.c6 {
   display: none;
 }
 
-.c7 {
+.c8 {
   display: none;
   position: absolute;
   height: 2.8rem;
@@ -26,7 +26,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border-radius: 50%;
 }
 
-.c8 {
+.c9 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -40,7 +40,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #fed200;
 }
 
-.c10 {
+.c11 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -54,7 +54,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #92d101;
 }
 
-.c12 {
+.c13 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -68,7 +68,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #00c3ed;
 }
 
-.c14 {
+.c15 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -82,7 +82,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #545ec8;
 }
 
-.c16 {
+.c17 {
   height: 2.1999999999999997rem;
   width: 2.1999999999999997rem;
   background-color: transparent;
@@ -96,7 +96,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   border: 1px solid #de017e;
 }
 
-.c1 {
+.c2 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -118,19 +118,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c1 .c4 {
+.c2 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c1 input:focus + .c6 {
+.c2 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c9 {
+.c10 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -152,19 +152,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c9 .c4 {
+.c10 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c9 input:focus + .c6 {
+.c10 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c11 {
+.c12 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -186,19 +186,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c11 .c4 {
+.c12 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c11 input:focus + .c6 {
+.c12 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c13 {
+.c14 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -220,19 +220,19 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c13 .c4 {
+.c14 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c13 input:focus + .c6 {
+.c14 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c15 {
+.c16 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -254,29 +254,29 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   overflow: visible;
 }
 
-.c15 .c4 {
+.c16 .c5 {
   height: 1.6rem;
   width: 1.6rem;
 }
 
-.c15 input:focus + .c6 {
+.c16 input:focus + .c7 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c17 img {
+.c18 img {
   height: 1.9rem;
   width: 1.9rem;
 }
 
-.c2 {
+.c3 {
   cursor: pointer;
   margin: 0;
 }
 
-.c2 input {
+.c3 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -285,6 +285,17 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 }
 
 .c0 {
+  border: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c1 {
   border: 0;
   outline: none;
   display: -webkit-box;
@@ -299,7 +310,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-.c0 legend {
+.c1 legend {
   position: absolute;
   height: 1px;
   width: 1px;
@@ -310,63 +321,25 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 <fieldset
   className="c0"
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  role="radiogroup"
-  tabIndex={0}
 >
   <legend>
-    Choose highlight color
+    Select or clear highlight color
   </legend>
-  <label
-    aria-label="Apply yellow highlight"
-    checked={false}
-    className="c1 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#8f7700",
-        "focused": "#fed200",
-        "label": "yellow",
-        "passive": "#ffff8a",
-      }
-    }
-    title="yellow"
+  <fieldset
+    className="c1"
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    role="radiogroup"
+    tabIndex={0}
   >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        fill="currentColor"
-      />
-    </svg>
-    <input
-      aria-checked={false}
+    <legend>
+      Choose highlight color
+    </legend>
+    <label
+      aria-label="Apply yellow highlight"
       checked={false}
-      name="yellow"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#8f7700",
-          "focused": "#fed200",
-          "label": "yellow",
-          "passive": "#ffff8a",
-        }
-      }
-    />
-    <span
-      className="c8"
+      className="c2 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#8f7700",
@@ -375,57 +348,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#ffff8a",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply green highlight"
-    checked={false}
-    className="c9 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#4e6f01",
-        "focused": "#92d101",
-        "label": "green",
-        "passive": "#def99f",
-      }
-    }
-    title="green"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="yellow"
     >
-      <path
-        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         fill="currentColor"
+        focusable="false"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-checked={false}
+        checked={false}
+        name="yellow"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      aria-checked={false}
-      checked={false}
-      name="green"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#4e6f01",
-          "focused": "#92d101",
-          "label": "green",
-          "passive": "#def99f",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#8f7700",
+            "focused": "#fed200",
+            "label": "yellow",
+            "passive": "#ffff8a",
+          }
         }
-      }
-    />
-    <span
-      className="c10"
+      />
+      <span
+        className="c9"
+        style={
+          Object {
+            "focusBorder": "#8f7700",
+            "focused": "#fed200",
+            "label": "yellow",
+            "passive": "#ffff8a",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply green highlight"
+      checked={false}
+      className="c10 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#4e6f01",
@@ -434,57 +407,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#def99f",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply blue highlight"
-    checked={false}
-    className="c11 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#006880",
-        "focused": "#00c3ed",
-        "label": "blue",
-        "passive": "#c8f5ff",
-      }
-    }
-    title="blue"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="green"
     >
-      <path
-        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         fill="currentColor"
+        focusable="false"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-checked={false}
+        checked={false}
+        name="green"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      aria-checked={false}
-      checked={false}
-      name="blue"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#006880",
-          "focused": "#00c3ed",
-          "label": "blue",
-          "passive": "#c8f5ff",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#4e6f01",
+            "focused": "#92d101",
+            "label": "green",
+            "passive": "#def99f",
+          }
         }
-      }
-    />
-    <span
-      className="c12"
+      />
+      <span
+        className="c11"
+        style={
+          Object {
+            "focusBorder": "#4e6f01",
+            "focused": "#92d101",
+            "label": "green",
+            "passive": "#def99f",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply blue highlight"
+      checked={false}
+      className="c12 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#006880",
@@ -493,57 +466,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#c8f5ff",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply purple highlight"
-    checked={false}
-    className="c13 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#141a3e",
-        "focused": "#545ec8",
-        "label": "purple",
-        "passive": "#cbcfff",
-      }
-    }
-    title="purple"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="blue"
     >
-      <path
-        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         fill="currentColor"
+        focusable="false"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-checked={false}
+        checked={false}
+        name="blue"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
       />
-    </svg>
-    <input
-      aria-checked={false}
-      checked={false}
-      name="purple"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
-      style={
-        Object {
-          "focusBorder": "#141a3e",
-          "focused": "#545ec8",
-          "label": "purple",
-          "passive": "#cbcfff",
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#006880",
+            "focused": "#00c3ed",
+            "label": "blue",
+            "passive": "#c8f5ff",
+          }
         }
-      }
-    />
-    <span
-      className="c14"
+      />
+      <span
+        className="c13"
+        style={
+          Object {
+            "focusBorder": "#006880",
+            "focused": "#00c3ed",
+            "label": "blue",
+            "passive": "#c8f5ff",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply purple highlight"
+      checked={false}
+      className="c14 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#141a3e",
@@ -552,46 +525,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#cbcfff",
         }
       }
-    />
-  </label>
-  <label
-    aria-label="Apply pink highlight"
-    checked={false}
-    className="c15 c2"
-    component={<label />}
-    style={
-      Object {
-        "focusBorder": "#560131",
-        "focused": "#de017e",
-        "label": "pink",
-        "passive": "#ffc5e1",
-      }
-    }
-    title="pink"
-  >
-    <svg
-      aria-hidden="true"
-      className="c3 c4 c5"
-      fill="currentColor"
-      focusable="false"
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
+      title="purple"
     >
-      <path
-        d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
         fill="currentColor"
+        focusable="false"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-checked={false}
+        checked={false}
+        name="purple"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
+      />
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#141a3e",
+            "focused": "#545ec8",
+            "label": "purple",
+            "passive": "#cbcfff",
+          }
+        }
       />
-    </svg>
-    <input
-      aria-checked={false}
+      <span
+        className="c15"
+        style={
+          Object {
+            "focusBorder": "#141a3e",
+            "focused": "#545ec8",
+            "label": "purple",
+            "passive": "#cbcfff",
+          }
+        }
+      />
+    </label>
+    <label
+      aria-label="Apply pink highlight"
       checked={false}
-      name="pink"
-      onChange={[Function]}
-      tabIndex={-1}
-      type="radio"
-    />
-    <span
-      className="c6 c7"
+      className="c16 c3"
+      component={<label />}
       style={
         Object {
           "focusBorder": "#560131",
@@ -600,23 +584,57 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
           "passive": "#ffc5e1",
         }
       }
-    />
-    <span
-      className="c16"
-      style={
-        Object {
-          "focusBorder": "#560131",
-          "focused": "#de017e",
-          "label": "pink",
-          "passive": "#ffc5e1",
+      title="pink"
+    >
+      <svg
+        aria-hidden="true"
+        className="c4 c5 c6"
+        fill="currentColor"
+        focusable="false"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          fill="currentColor"
+        />
+      </svg>
+      <input
+        aria-checked={false}
+        checked={false}
+        name="pink"
+        onChange={[Function]}
+        tabIndex={-1}
+        type="radio"
+      />
+      <span
+        className="c7 c8"
+        style={
+          Object {
+            "focusBorder": "#560131",
+            "focused": "#de017e",
+            "label": "pink",
+            "passive": "#ffc5e1",
+          }
         }
-      }
-    />
-  </label>
+      />
+      <span
+        className="c17"
+        style={
+          Object {
+            "focusBorder": "#560131",
+            "focused": "#de017e",
+            "label": "pink",
+            "passive": "#ffc5e1",
+          }
+        }
+      />
+    </label>
+  </fieldset>
   <button
     aria-label="remove highlight"
-    className="c17"
-    onClick={[Function]}
+    className="c18"
+    onClick={[MockFunction]}
     type="button"
   >
     <img
diff --git a/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
index 5fa7d6b69b6..892647e9755 100644
--- a/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/EditCard.spec.tsx.snap
@@ -118,7 +118,7 @@ exports[`EditCard matches snapshot when editing 1`] = `
       <div
         mock-color-picker={true}
         onChange={[Function]}
-        onRemove={[Function]}
+        onRemove={null}
       />
       <div
         edit={false}
@@ -225,7 +225,7 @@ exports[`EditCard matches snapshot with data 1`] = `
       <div
         mock-color-picker={true}
         onChange={[Function]}
-        onRemove={[Function]}
+        onRemove={null}
       />
       <div
         edit={false}