diff --git a/src/components/CheckBoxTree/index.tsx b/src/components/CheckBoxTree/index.tsx
index 2b2c5e3f9..dfda62c00 100644
--- a/src/components/CheckBoxTree/index.tsx
+++ b/src/components/CheckBoxTree/index.tsx
@@ -48,7 +48,6 @@ interface CheckBoxTreeProps {
     setRecentColors: ActionCreator<SetRecentColorsAction>;
 }
 const CHECKBOX_SPAN_NO = 2;
-const LABEL_SPAN_NO = 6;
 import styles from "./style.css";
 
 class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
@@ -124,11 +123,10 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                 value.length ? key : ""
             )
         );
-
         return (
             <div className={styles.checkAllCheckbox}>
                 <SharedCheckbox
-                    title="All"
+                    title="All Agent Types"
                     showLabel={true}
                     options={map(treeData, "key" as string)}
                     onTopLevelCheck={this.toggleAllOnOff}
@@ -140,57 +138,54 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
         );
     };
 
-    renderRowWithNoChildren = (nodeData: AgentDisplayNode) => {
-        const { agentsChecked, agentsHighlighted } = this.props;
+    renderHighlightNoChildren = (nodeData: AgentDisplayNode) => {
+        const { agentsHighlighted } = this.props;
         const isHighlighted =
             isEmpty(agentsHighlighted) || !agentsHighlighted[nodeData.title]
                 ? false
                 : agentsHighlighted[nodeData.title].includes(nodeData.title);
+
+        return (
+            <Checkbox
+                className={[styles.noChildrenRow].join(" ")}
+                key={`${nodeData.title}-highlight`}
+                checkboxType={CHECKBOX_TYPE_STAR}
+                value={nodeData.title}
+                checked={isHighlighted}
+                onChange={(event) =>
+                    this.onAgentWithNoTagsChangeHighlight(event, nodeData.title)
+                }
+            />
+        );
+    };
+
+    renderCheckBoxNoChildren = (nodeData: AgentDisplayNode) => {
+        const { agentsChecked } = this.props;
+
         const isVisible =
             isEmpty(agentsChecked) || !agentsChecked[nodeData.title]
                 ? false
                 : agentsChecked[nodeData.title].includes(nodeData.title);
 
         return (
-            <Row
-                className={[styles.noChildrenRow, styles.checkboxSet].join(" ")}
-            >
-                <Col span={12}>
-                    <Checkbox
-                        className={"header-checkbox"}
-                        key={`${nodeData.title}-highlight`}
-                        checkboxType={CHECKBOX_TYPE_STAR}
-                        value={nodeData.title}
-                        checked={isHighlighted}
-                        onChange={(event) =>
-                            this.onAgentWithNoTagsChangeHighlight(
-                                event,
-                                nodeData.title
-                            )
-                        }
-                    />
-                </Col>
-                <Col span={12}>
-                    <Checkbox
-                        className={"header-checkbox"}
-                        key={`${nodeData.title}-onoff`}
-                        checked={isVisible}
-                        value={nodeData.title}
-                        onChange={(event) =>
-                            this.onAgentWithNoTagsChangeVisible(
-                                event,
-                                nodeData.title
-                            )
-                        }
-                    />
-                </Col>
-            </Row>
+            <Checkbox
+                className={"header-checkbox"}
+                key={`${nodeData.title}-onoff`}
+                checked={isVisible}
+                value={nodeData.title}
+                onChange={(event) =>
+                    this.onAgentWithNoTagsChangeVisible(event, nodeData.title)
+                }
+            />
         );
     };
 
-    renderSharedCheckboxes = (nodeData: AgentDisplayNode) => (
-        <Row key="actions" className={styles.checkboxSet}>
-            <Col span={12}>
+    renderSharedCheckboxes = (
+        nodeData: AgentDisplayNode,
+        type: CHECKBOX_TYPE_STAR | undefined
+    ) => {
+        if (type === CHECKBOX_TYPE_STAR) {
+            return (
                 <SharedCheckbox
                     title={nodeData.title}
                     showLabel={false}
@@ -202,8 +197,9 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                     }
                     isHeader={true}
                 />
-            </Col>
-            <Col span={12}>
+            );
+        } else {
+            return (
                 <SharedCheckbox
                     title={nodeData.title}
                     showLabel={false}
@@ -212,9 +208,9 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                     checkedList={this.props.agentsChecked[nodeData.title] || []}
                     isHeader={true}
                 />
-            </Col>
-        </Row>
-    );
+            );
+        }
+    };
     render() {
         const {
             agentsHighlighted,
@@ -226,22 +222,6 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
         } = this.props;
         return treeData.length > 0 ? (
             <div className={styles.container}>
-                <Row className={styles.colLabels}>
-                    <Col span={CHECKBOX_SPAN_NO} offset={4}>
-                        <label
-                            className={classNames([
-                                "icon-moon",
-                                styles.starIcon,
-                            ])}
-                        />
-                    </Col>
-                    <Col span={CHECKBOX_SPAN_NO}>
-                        <label>show</label>
-                    </Col>
-                    <Col flex={LABEL_SPAN_NO} offset={1}>
-                        <label>type</label>
-                    </Col>
-                </Row>
                 <TreeNode headerContent={this.renderCheckAllButton()} />
                 {treeData.map((nodeData) => {
                     const childrenHaveDifferentColors =
@@ -253,8 +233,11 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                             headerContent={
                                 <>
                                     {nodeData.children.length
-                                        ? this.renderSharedCheckboxes(nodeData)
-                                        : this.renderRowWithNoChildren(
+                                        ? this.renderSharedCheckboxes(
+                                              nodeData,
+                                              CHECKBOX_TYPE_STAR
+                                          )
+                                        : this.renderHighlightNoChildren(
                                               nodeData
                                           )}{" "}
                                     <ColorSwatch
@@ -268,6 +251,14 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                                         setColorChange={setColorChange}
                                         setRecentColors={setRecentColors}
                                     />
+                                    {nodeData.children.length
+                                        ? this.renderSharedCheckboxes(
+                                              nodeData,
+                                              undefined
+                                          )
+                                        : this.renderCheckBoxNoChildren(
+                                              nodeData
+                                          )}{" "}
                                     <Text
                                         style={{ maxWidth: 143 }}
                                         ellipsis={{
@@ -302,6 +293,42 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                                             }
                                         />
                                     </Col>
+                                    <Row className={styles.subMenu}>
+                                        <Col span={CHECKBOX_SPAN_NO} offset={3}>
+                                            {nodeData.children.map((value) => {
+                                                return (
+                                                    <div
+                                                        key={`label-${nodeData.title}-${value.value}-color`}
+                                                        className={
+                                                            styles.rowLabelContainer
+                                                        }
+                                                    >
+                                                        <ColorSwatch
+                                                            color={
+                                                                value.color ||
+                                                                nodeData.color
+                                                            }
+                                                            agentName={
+                                                                nodeData.title
+                                                            }
+                                                            tags={[
+                                                                value.value as string,
+                                                            ]}
+                                                            recentColors={
+                                                                recentColors
+                                                            }
+                                                            setColorChange={
+                                                                setColorChange
+                                                            }
+                                                            setRecentColors={
+                                                                setRecentColors
+                                                            }
+                                                        />
+                                                    </div>
+                                                );
+                                            })}
+                                        </Col>
+                                    </Row>
                                     <Col span={CHECKBOX_SPAN_NO}>
                                         <CheckboxTreeSubmenu
                                             options={nodeData.children}
@@ -329,27 +356,6 @@ class CheckBoxTree extends React.Component<CheckBoxTreeProps> {
                                                         styles.rowLabelContainer
                                                     }
                                                 >
-                                                    <ColorSwatch
-                                                        color={
-                                                            value.color ||
-                                                            nodeData.color
-                                                        }
-                                                        agentName={
-                                                            nodeData.title
-                                                        }
-                                                        tags={[
-                                                            value.value as string,
-                                                        ]}
-                                                        recentColors={
-                                                            recentColors
-                                                        }
-                                                        setColorChange={
-                                                            setColorChange
-                                                        }
-                                                        setRecentColors={
-                                                            setRecentColors
-                                                        }
-                                                    />
                                                     <label
                                                         className={
                                                             styles.rowLabel
diff --git a/src/components/CheckBoxTree/style.css b/src/components/CheckBoxTree/style.css
index 18eb7ce8a..bb157e54d 100644
--- a/src/components/CheckBoxTree/style.css
+++ b/src/components/CheckBoxTree/style.css
@@ -43,16 +43,6 @@
     line-height: 1;
 }
 
-.container .col-labels {
-    background-color: var(--dark-theme-sidebar-item-bg);
-    margin-bottom: 3px;
-}
-
-.container .col-labels label {
-    font-size: 10px;
-    text-transform: uppercase;
-}
-
 .container :global(.ant-checkbox-inner) {
     border-color: var(--warm-gray);
 }
@@ -64,7 +54,7 @@
 
 .check-all-checkbox {
     width: 100%;
-    margin-left: 60px;
+    margin-left: 67px;
     padding: 10px 0;
 }
 
@@ -88,4 +78,13 @@
 
 .container :global(.ant-typography-ellipsis) {
     color: var(--dark-theme-sidebar-text)
+}
+
+.container :global(.header-checkbox) {
+    margin-left: 8px;
+    top: 3px;
+}
+
+.container :global(.header-checkbox .ant-checkbox) {
+    top: 3px;
 }
\ No newline at end of file
diff --git a/src/components/CheckboxTreeSubmenu/style.css b/src/components/CheckboxTreeSubmenu/style.css
index 370dfa055..7bdc192ec 100644
--- a/src/components/CheckboxTreeSubmenu/style.css
+++ b/src/components/CheckboxTreeSubmenu/style.css
@@ -5,4 +5,8 @@
 .container :global(.ant-checkbox-wrapper) {
     width: 37px;
     height: 40px;
+}
+
+.container span {
+    top: 0;
 }
\ No newline at end of file
diff --git a/src/components/ColorPicker/index.tsx b/src/components/ColorPicker/index.tsx
index 9ab757984..af83bdd59 100644
--- a/src/components/ColorPicker/index.tsx
+++ b/src/components/ColorPicker/index.tsx
@@ -35,7 +35,7 @@ const ColorPicker = ({
     setColorChange,
     setRecentColors,
 }: ColorPickerProps) => {
-    const [color, setColor] = useState(initialColor);
+    const [color, setColor] = useState("#000000");
     const [debouncedColor] = useDebounce(color, 250);
     const isInitialRender = useRef(true);
 
@@ -69,33 +69,35 @@ const ColorPicker = ({
     };
 
     const renderColorPickerComponent = () => (
-        <div className={styles.container}>
+        <div className={styles.colorPicker}>
             <HexColorPicker color={color} onChange={setColor} />
             <div className={styles.selectionDisplay}>
-                <div className={styles.oldColorContainer}>
-                    <div
-                        className={styles.oldColor}
-                        style={{ backgroundColor: initialColor }}
-                        onClick={() => {
-                            setColor(initialColor);
-                        }}
-                    ></div>
-                    <p> CURRENT </p>
+                <div className={styles.colorSelections}>
+                    <div className={styles.selection}>
+                        <div
+                            className={styles.largeSwatch}
+                            style={{ backgroundColor: initialColor }}
+                            onClick={() => {
+                                setColor(initialColor);
+                            }}
+                        ></div>
+                        <label>Current</label>
+                    </div>
+                    <div className={styles.selection}>
+                        <div
+                            className={styles.largeSwatch}
+                            style={{ backgroundColor: color }}
+                        ></div>
+                        <label>New</label>
+                    </div>
                 </div>
-                <div className={styles.oldColorContainer}>
-                    <div
-                        className={styles.newColor}
-                        style={{ backgroundColor: color }}
-                    ></div>
-                    <p> NEW </p>
-                </div>
-                <div className={styles.oldColorContainer}>
+                <div className={styles.selection}>
                     <HexColorInput
                         className={styles.hexInput}
                         color={color}
                         onChange={setColor}
                     />
-                    <p> HEX </p>
+                    <label>Hex</label>
                 </div>
             </div>
             <div
@@ -120,7 +122,7 @@ const ColorPicker = ({
                     </Tooltip>
                 ))}
             </div>
-            <p className={styles.recentColorText}> Recent </p>
+            <h4 className={styles.recentColorText}> Recent </h4>
             <div className={styles.colors}>
                 {recentColors.map((color) => (
                     <button
diff --git a/src/components/ColorPicker/style.css b/src/components/ColorPicker/style.css
index 61f35facd..8248f9b23 100644
--- a/src/components/ColorPicker/style.css
+++ b/src/components/ColorPicker/style.css
@@ -9,68 +9,72 @@
     justify-content: center;
 }
 
-.container {
+.color-picker {
     padding-left: 4px;
 }
 
-.container .selection-display {
+.color-picker .selection-display, 
+.color-picker .color-selections {
     display: flex;
 }
 
-.container .old-color,
-.container .new-color {
+.color-picker .selection-display {
+    gap: 8px
+}
+
+.selection-display .large-swatch {
     height: 30px;
     width: 60px;
 }
 
-.container .old-color-container {
+.selection {
     display: flex;
     flex-direction: column;
-    text-align: center;
-    font-size: 9px;
-    color: var(--white-two);
     gap: 4px;
 }
 
-.container .hex-input {
+.selection label,
+.selection .hex-input{
+    text-transform: uppercase;    
+    color: var(--dark-theme-popover-text);
+    font-size: 9px;
+    text-align: center;
+}
+
+.selection .hex-input {
     height: 30px;
     width: 68px;
     background-color: transparent;
-    border: 1px solid var(--white-two);
+    border: 1px solid var(--dark-theme-input-border);
     font-size: 14px;
-    text-transform: uppercase;
     padding-left: 6px;
     padding-top: 4px;
 }
 
-.container .new-color {
-    margin-right: 8px;
-}
-
-.container .agent-colors-swatches {
+.color-picker .agent-colors-swatches {
     padding-top: 6px;
     padding-bottom: 12px;
 }
 
-.container .colors {
+.color-picker .colors {
     display: flex;
     flex-wrap: wrap;
     gap: 7px;
 }
 
-.container .swatch {
+.color-picker .swatch {
     height: 15.5px;
     width: 15.5px;
     cursor: pointer;
     border: none;
 }
 
-.container .swatch:hover {
+.color-picker .swatch:hover {
     transform: scale(1.29);
     box-shadow: 0px 0px 10px #000000;
 }
 
-.container .tooltip {
+.color-picker .tooltip {
     box-shadow: 0px 3px 4px #000000;
     height: 20px !important;
 }
@@ -89,44 +93,45 @@
     --antd-arrow-background-color: var(--color-picker-tooltip);
 }
 
-.container .recent-color-text {
+.color-picker .recent-color-text {
     text-align: left;
     font-size: 12px;
-    color: var(--white-two);
     margin-bottom: 2px;
     font-weight: 300;
+    color: var(--dark-theme-popover-text)
 }
 
-.container :global(.react-colorful__saturation-pointer) {
+.color-picker :global(.react-colorful__saturation-pointer) {
     width: 0px;
     height: 0px;
     border-radius: 0px;
     border: none;
 }
-.container :global(.react-colorful__hue-pointer) {
+
+.color-picker :global(.react-colorful__hue-pointer) {
     width: 5px;
     height: 16px;
     border: 1px solid var(--white-two);
     border-radius: 0px;
 }
 
-.container :global(.react-colorful__pointer-fill) {
+.color-picker :global(.react-colorful__pointer-fill) {
     background-color: black !important;
 }
 
-.container :global(.react-colorful) {
+.color-picker :global(.react-colorful) {
     gap: 7px;
     padding-bottom: 8px;
     height: auto;
 }
 
-.container :global(.react-colorful__saturation) {
+.color-picker :global(.react-colorful__saturation) {
     border-radius: 0px;
     height: 115px;
     width: 196px;
 }
 
-.container :global(.react-colorful__hue) {
+.color-picker :global(.react-colorful__hue) {
     border-radius: 0px;
     width: 196px;
     height: 12px;
diff --git a/src/components/ColorSwatch/styles.css b/src/components/ColorSwatch/styles.css
index 34278ff3a..24dde13b0 100644
--- a/src/components/ColorSwatch/styles.css
+++ b/src/components/ColorSwatch/styles.css
@@ -3,4 +3,5 @@
     height: 16px;
     display: inline-block;
     cursor: pointer;
+    margin-right: 10px;
 }
\ No newline at end of file
diff --git a/src/components/SharedCheckbox/index.tsx b/src/components/SharedCheckbox/index.tsx
index 48b1630c4..436e12a0e 100644
--- a/src/components/SharedCheckbox/index.tsx
+++ b/src/components/SharedCheckbox/index.tsx
@@ -46,6 +46,7 @@ export default class SharedCheckbox extends React.Component<SharedCheckboxProps>
             : !!checkedList.length && checkedList.length < options.length;
         const checkboxClassNames = classNames([
             styles.container,
+            { [styles.checkbox]: checkboxType !== CHECKBOX_TYPE_STAR },
             { [styles.header]: isHeader, ["header-checkbox"]: isHeader },
         ]);
 
@@ -61,7 +62,7 @@ export default class SharedCheckbox extends React.Component<SharedCheckboxProps>
                 checkboxType={checkboxType}
                 checkboxLevel={title === "All" ? "top" : "shared"}
             >
-                {showLabel ? title : ""}
+                {showLabel ? title : null}
             </Checkbox>
         );
     }
diff --git a/src/components/SharedCheckbox/style.css b/src/components/SharedCheckbox/style.css
index cb832b673..eedfbf8de 100644
--- a/src/components/SharedCheckbox/style.css
+++ b/src/components/SharedCheckbox/style.css
@@ -1,3 +1,12 @@
-.header :global(.ant-checkbox) {
-    top: 8px;
+.checkbox {
+    margin-left: 0px!important;
+    margin-right: 0px!important;
+}
+
+.checkbox :global(.ant-checkbox) {
+    top: 3px;
+}
+
+.checkbox :global(.ant-checkbox + span) {
+    padding: 0px;
 }
\ No newline at end of file
diff --git a/src/components/StarCheckbox/style.css b/src/components/StarCheckbox/style.css
index 59cd645ba..c7f4fa170 100644
--- a/src/components/StarCheckbox/style.css
+++ b/src/components/StarCheckbox/style.css
@@ -33,11 +33,7 @@
     vertical-align: middle;
     outline: none;
     cursor: pointer;
-}
-
-:global(.header-checkbox) .container,
-:global(.header-checkbox) :global(.ant-checkbox) {
-    top: 9px;
+    top: 10px;
 }
 
 .container input {
diff --git a/src/styles/colors.css b/src/styles/colors.css
index 870d91b41..9803ecefc 100644
--- a/src/styles/colors.css
+++ b/src/styles/colors.css
@@ -42,7 +42,9 @@
     --dark-theme-header-bg: var(--dark-three);
     --dark-theme-header-text: var(--text-gray);
     --dark-theme-component-bg: var(--dark-four);
+    --dark-theme-input-border: var(--white-two);
     --dark-theme-text-color: var(--off-white);
+    --dark-theme-popover-text: var(--white-two);
     --dark-theme-menu-text-color: var(--transparent-white);
     --dark-theme-menu-text-hover: var(--pure-white);
     --dark-theme-agent-dropdown-toggle: var(--warm-gray);