diff --git a/src/components/FormLabel/FormLabel.module.scss b/src/components/FormLabel/FormLabel.module.scss
index 45bf132f6..ddddecfab 100644
--- a/src/components/FormLabel/FormLabel.module.scss
+++ b/src/components/FormLabel/FormLabel.module.scss
@@ -9,6 +9,6 @@
   }
 
   &.disabled {
-    color: var(--color-brand-grey-light);
+    color: var(--color-brand-grey-300);
   }
 }
diff --git a/src/components/SelectInput/SelectInput.module.scss b/src/components/SelectInput/SelectInput.module.scss
index 4e0cf6228..ee6d975e9 100644
--- a/src/components/SelectInput/SelectInput.module.scss
+++ b/src/components/SelectInput/SelectInput.module.scss
@@ -4,10 +4,16 @@
 @mixin react-select-icon {
   padding: 0;
   padding-right: 2px;
-  color: var(--form-control-icon-color, var(--INTERNAL_form-control-icon-color));
+  color: var(
+    --form-control-icon-color,
+    var(--INTERNAL_form-control-icon-color)
+  );
 
   &:hover {
-    color: var(--form-control-icon-color-hover, var(--INTERNAL_form-control-icon-color-hover));
+    color: var(
+      --form-control-icon-color-hover,
+      var(--INTERNAL_form-control-icon-color-hover)
+    );
   }
 }
 
@@ -22,7 +28,10 @@
 // stylelint-disable
 @mixin size-sm {
   :global(.react-select__control) {
-    border-radius: var(--form-control-size-sm-border-radius, var(--INTERNAL_form-control-size-sm-border-radius));
+    border-radius: var(
+      --form-control-size-sm-border-radius,
+      var(--INTERNAL_form-control-size-sm-border-radius)
+    );
     padding: 0 8px;
     min-height: 32px;
   }
@@ -30,11 +39,17 @@
   :global(.react-select__option),
   :global(.react-select__placeholder),
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-sm-font-size, var(--INTERNAL_form-control-size-sm-font-size));
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-sm-font-size, var(--INTERNAL_form-control-size-sm-font-size));
+    font-size: var(
+      --form-control-size-sm-font-size,
+      var(--INTERNAL_form-control-size-sm-font-size)
+    );
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -45,8 +60,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-sm-icon-size, var(--INTERNAL_form-control-select-sm-icon-size));
-      height: var(--form-control-select-sm-icon-size, var(--INTERNAL_form-control-select-sm-icon-size));
+      width: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
+      height: var(
+        --form-control-select-sm-icon-size,
+        var(--INTERNAL_form-control-select-sm-icon-size)
+      );
     }
   }
 }
@@ -61,16 +82,25 @@
 
 @mixin size-md {
   :global(.react-select__control) {
-    border-radius: var(--form-control-size-md-border-radius, var(--INTERNAL_form-control-size-md-border-radius));
-    padding: 4px 8px;
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
+    padding: 5px 8px;
   }
 
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-md-font-size, var(--INTERNAL_form-control-size-md-font-size));
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-md-font-size, var(--INTERNAL_form-control-size-md-font-size));
+    font-size: var(
+      --form-control-size-md-font-size,
+      var(--INTERNAL_form-control-size-md-font-size)
+    );
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -81,8 +111,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-md-icon-size, var(--INTERNAL_form-control-select-md-icon-size));
-      height: var(--form-control-select-md-icon-size, var(--INTERNAL_form-control-select-md-icon-size));
+      width: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
+      height: var(
+        --form-control-select-md-icon-size,
+        var(--INTERNAL_form-control-select-md-icon-size)
+      );
     }
   }
 }
@@ -97,19 +133,28 @@
 
 @mixin size-lg {
   :global(.react-select__control) {
-    padding: 9px 8px 10px;
-    border-radius: var(--form-control-size-md-border-radius, var(--INTERNAL_form-control-size-md-border-radius));
+    padding: 11px 8px 12px 8px;
+    border-radius: var(
+      --form-control-size-md-border-radius,
+      var(--INTERNAL_form-control-size-md-border-radius)
+    );
   }
 
   :global(.react-select__option),
   :global(.react-select__placeholder),
   :global(.react-select__single-value) {
-    font-size: var(--form-control-size-lg-font-size, var(--INTERNAL_form-control-size-lg-font-size));
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
   }
 
   :global(.react-select__multi-value__label) {
-    font-size: var(--form-control-size-lg-font-size, var(--INTERNAL_form-control-size-lg-font-size));
-    padding: 2px 6px 3px;
+    font-size: var(
+      --form-control-size-lg-font-size,
+      var(--INTERNAL_form-control-size-lg-font-size)
+    );
+    padding: 2px 6px 1px;
   }
 
   :global(.react-select__dropdown-indicator) {
@@ -120,8 +165,14 @@
     @include react-select-icon;
 
     svg {
-      width: var(--form-control-select-lg-icon-size, var(--INTERNAL_form-control-select-lg-icon-size));
-      height: var(--form-control-select-lg-icon-size, var(--INTERNAL_form-control-select-lg-icon-size));
+      width: var(
+        --form-control-select-lg-icon-size,
+        var(--INTERNAL_form-control-select-lg-icon-size)
+      );
+      height: var(
+        --form-control-select-lg-icon-size,
+        var(--INTERNAL_form-control-select-lg-icon-size)
+      );
     }
   }
 }
@@ -135,27 +186,45 @@
 }
 
 :global(.select-input-wrapper) {
-  font-family: var(--form-control-font-family, var(--INTERNAL_form-control-font-family));
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
 
   :global(.react-select) {
     &:hover {
       :global(.react-select__dropdown-indicator) {
-        color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+        color: var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
       }
     }
 
     :global(.react-select__control) {
-      line-height: var(--form-control-line-height, var(--INTERNAL_form-control-line-height));
-      border-color: var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
+      line-height: var(
+        --form-control-line-height,
+        var(--INTERNAL_form-control-line-height)
+      );
+      border-color: var(
+        --form-control-border-color,
+        var(--INTERNAL_form-control-border-color)
+      );
       box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05);
-      background-color: var(--form-control-background-color, var(--INTERNAL_form-control-background-color));
+      background-color: var(
+        --form-control-background-color,
+        var(--INTERNAL_form-control-background-color)
+      );
 
       :global(.react-select__value-container) {
         padding: 0;
       }
 
       :global(.react-select__placeholder) {
-        color: var(--form-control-placeholder-color, var(--INTERNAL_form-control-placeholder-color));
+        color: var(
+          --form-control-placeholder-color,
+          var(--INTERNAL_form-control-placeholder-color)
+        );
       }
 
       :global(.react-select__clear-indicator) {
@@ -166,21 +235,28 @@
         display: none;
       }
 
-      :global(.react-select__clear-indicator) {
-        @extend .react-select-icon;
-
-        margin-right: var(--form-control-select-clear-icon-margin, var(--INTERNAL_form-control-select-clear-icon-margin));
-      }
-
       &:global(.react-select__control--is-focused) {
-        border-color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
-        box-shadow: var(--form-control-box-shadow, var(--INTERNAL_form-control-box-shadow-focus)),
-        inset 0 0 0 1px var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+        border-color: var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+        box-shadow: var(
+            --form-control-box-shadow,
+            var(--INTERNAL_form-control-box-shadow-focus)
+          ),
+          inset 0 0 0 1px
+            var(
+              --form-control-border-color-focus,
+              var(--INTERNAL_form-control-border-color-focus)
+            );
       }
 
       &:global(.react-select__control--is-disabled) {
         :global(.react-select__dropdown-indicator) {
-          color: var(--form-control-placeholder-color, var(--INTERNAL_form-control-placeholder-color));
+          color: var(
+            --form-control-placeholder-color,
+            var(--INTERNAL_form-control-placeholder-color)
+          );
         }
       }
     }
@@ -191,13 +267,25 @@
 
     &.error {
       :global(.react-select__control) {
-        border-color: var(--form-control-border-color-error, var(--INTERNAL_form-control-border-color-error));
-        background-color: var(--form-control-background-color-error, var(--INTERNAL_form-control-background-color-error));
+        border-color: var(
+          --form-control-border-color-error,
+          var(--INTERNAL_form-control-border-color-error)
+        );
+        background-color: var(
+          --form-control-background-color-error,
+          var(--INTERNAL_form-control-background-color-error)
+        );
 
         &:global(.react-select__control--is-focused) {
           outline: none;
-          border-color: var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
-          background-color: var(--form-control-background-color, var(--INTERNAL_form-control-background-color));
+          border-color: var(
+            --form-control-border-color,
+            var(--INTERNAL_form-control-border-color)
+          );
+          background-color: var(
+            --form-control-background-color,
+            var(--INTERNAL_form-control-background-color)
+          );
         }
       }
     }
@@ -251,7 +339,10 @@
 
   &.disabled {
     :global(.react-select__control--is-disabled) {
-      background-color: var(--form-control-background-color-disabled, var(--INTERNAL_form-control-background-color-disabled));
+      background-color: var(
+        --form-control-background-color-disabled,
+        var(--INTERNAL_form-control-background-color-disabled)
+      );
     }
   }
 }
@@ -259,5 +350,8 @@
 
 // while we try to avoid important statements, this one is necessary to override bootstrap utilities that are currently in use by some of our teams
 .select-input-label {
-  margin-bottom: var(--form-control-label-margin, var(--INTERNAL_form-control-label-margin)) !important;
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  ) !important;
 }
diff --git a/src/components/SelectInput/SelectInput.test.jsx b/src/components/SelectInput/SelectInput.test.jsx
index e9be64605..3c86176cf 100644
--- a/src/components/SelectInput/SelectInput.test.jsx
+++ b/src/components/SelectInput/SelectInput.test.jsx
@@ -259,29 +259,10 @@ describe('SelectInput', () => {
     });
 
     describe('Is Clearable', () => {
-      test('it does not render the X icon if input has value but is not clearable', () => {
-        const mockedHandleChange = jest.fn();
-
-        const { container } = render(
-          <SelectInput
-            id="testId"
-            onChange={mockedHandleChange}
-            label="Select Label"
-            options={selectOptions}
-            value={selectOptions[0]}
-            isClearable={false}
-          />,
-        );
-
-        expect(
-          container.querySelector('.react-select__clear-indicator'),
-        ).not.toBeInTheDocument();
-      });
-
       test('it renders the X icon if input has value and is clearable', () => {
         const mockedHandleChange = jest.fn();
 
-        const { container } = render(
+        render(
           <SelectInput
             id="testId"
             onChange={mockedHandleChange}
@@ -293,7 +274,7 @@ describe('SelectInput', () => {
         );
 
         expect(
-          container.querySelector('.react-select__clear-indicator'),
+          screen.getByTestId('icon-testid--remove-light'),
         ).toBeInTheDocument();
       });
     });
diff --git a/src/components/SelectInput/SelectInput.tsx b/src/components/SelectInput/SelectInput.tsx
index b1f661f75..01cfabdfc 100644
--- a/src/components/SelectInput/SelectInput.tsx
+++ b/src/components/SelectInput/SelectInput.tsx
@@ -18,7 +18,9 @@ import { FormLabel } from '../FormLabel/FormLabel';
 import { InputValidationMessage } from '../InputValidationMessage/InputValidationMessage';
 import styles from './SelectInput.module.scss';
 
-export type SelectInputOptions = GroupedOptionsType<OptionTypeBase> | OptionsType<OptionTypeBase>;
+export type SelectInputOptions =
+  | GroupedOptionsType<OptionTypeBase>
+  | OptionsType<OptionTypeBase>;
 
 export interface SelectInputProps {
   /**
@@ -164,7 +166,7 @@ export const SelectInput: FC<SelectInputProps> = ({
     'palmetto-components__variables__form-control',
     'select-input-wrapper',
     className,
-    ...responsiveClasses.map(c => (styles[c])),
+    ...responsiveClasses.map(c => styles[c]),
     {
       [styles.disabled]: isDisabled,
     },
@@ -183,7 +185,15 @@ export const SelectInput: FC<SelectInputProps> = ({
 
   const ClearIndicator = (props: IndicatorProps<OptionTypeBase, boolean>) => (
     <components.ClearIndicator {...props}>
-      <Icon name="remove" />
+      <Icon name="remove-light" />
+    </components.ClearIndicator>
+  );
+
+  const DropdownIndicator = (
+    props: IndicatorProps<OptionTypeBase, boolean>,
+  ) => (
+    <components.ClearIndicator {...props}>
+      <Icon name="caret-down" />
     </components.ClearIndicator>
   );
 
@@ -194,7 +204,7 @@ export const SelectInput: FC<SelectInputProps> = ({
         {...restProps}
         inputId={id}
         aria-label={label}
-        components={{ ClearIndicator }}
+        components={{ ClearIndicator, DropdownIndicator }}
         aria-labelledby={label && !hideLabel ? `${id}Label` : undefined}
         className={inputClasses}
         classNamePrefix="react-select"
@@ -209,7 +219,12 @@ export const SelectInput: FC<SelectInputProps> = ({
         onChange={handleChange}
         onFocus={handleFocus}
         onBlur={handleBlur}
-        styles={{ menuPortal: base => ({ ...base, zIndex: Number(Z_INDEX_VALUES.popover) }) }}
+        styles={{
+          menuPortal: base => ({
+            ...base,
+            zIndex: Number(Z_INDEX_VALUES.popover),
+          }),
+        }}
         value={value}
       />
       {error && typeof error !== 'boolean' && (
diff --git a/src/components/SelectInputNative/SelectInputNative.module.scss b/src/components/SelectInputNative/SelectInputNative.module.scss
index 488643949..62e390087 100644
--- a/src/components/SelectInputNative/SelectInputNative.module.scss
+++ b/src/components/SelectInputNative/SelectInputNative.module.scss
@@ -1,8 +1,14 @@
 @import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';
 
 %disabled-base {
-  background-color: var(--form-control-background-color-disabled, var(--INTERNAL_form-control-background-color-disabled));
-  color: var(--form-control-font-color-disabled, var(--INTERNAL_form-control-font-color-disabled));
+  background-color: var(
+    --form-control-background-color-disabled,
+    var(--INTERNAL_form-control-background-color-disabled)
+  );
+  color: var(
+    --form-control-font-color-disabled,
+    var(--INTERNAL_form-control-font-color-disabled)
+  );
   opacity: 1;
 
   &:hover {
@@ -16,31 +22,43 @@
 }
 
 @mixin size-sm {
-  border-radius: var(--form-control-size-sm-border-radius, var(--INTERNAL_form-control-size-sm-border-radius));
-  font-size: var(--form-control-size-sm-font-size, var(--INTERNAL_form-control-size-sm-font-size));
+  border-radius: var(
+    --form-control-size-sm-border-radius,
+    var(--INTERNAL_form-control-size-sm-border-radius)
+  );
+  font-size: var(
+    --form-control-size-sm-font-size,
+    var(--INTERNAL_form-control-size-sm-font-size)
+  );
 
   > select {
-    border-radius: var(--form-control-size-lg-border-radius, var(--INTERNAL_form-control-size-lg-border-radius));
-    padding-left: var(--form-control-size-sm-padding, var(--INTERNAL_form-control-size-sm-padding));
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-sm-padding,
+      var(--INTERNAL_form-control-size-sm-padding)
+    );
     padding-right: var(--size-spacing-2xl);
-    padding-top: calc(var(--form-control-size-sm-padding, var(--INTERNAL_form-control-size-sm-padding)));
-    padding-bottom: calc(var(--form-control-size-sm-padding, var(--INTERNAL_form-control-size-sm-padding)));
+    padding-top: calc(
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+    );
+    padding-bottom: calc(
+      var(
+        --form-control-size-sm-padding,
+        var(--INTERNAL_form-control-size-sm-padding)
+      )
+    );
   }
 
   &::before,
   &::after {
-    width: 8px;
-    height: 2px;
     top: calc(var(--size-spacing-sm) + 3px);
   }
-
-  &::before {
-    right: calc(var(--size-spacing-sm) + 8px);
-  }
-
-  &::after {
-    right: calc(var(--size-spacing-sm) + 3px);
-  }
 }
 
 %size-sm {
@@ -52,31 +70,39 @@
 }
 
 @mixin size-md {
-  border-radius: var(--form-control-size-md-border-radius, var(--INTERNAL_form-control-size-md-border-radius));
-  font-size: var(--form-control-size-md-font-size, var(--INTERNAL_form-control-size-md-font-size));
+  border-radius: var(
+    --form-control-size-md-border-radius,
+    var(--INTERNAL_form-control-size-md-border-radius)
+  );
+  font-size: var(
+    --form-control-size-md-font-size,
+    var(--INTERNAL_form-control-size-md-font-size)
+  );
 
   > select {
-    border-radius: var(--form-control-size-lg-border-radius, var(--INTERNAL_form-control-size-lg-border-radius));
-    padding-left: var(--form-control-size-md-padding, var(--INTERNAL_form-control-size-md-padding));
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
     padding-right: var(--size-spacing-3xl);
-    padding-top: calc(var(--form-control-size-md-padding, var(--INTERNAL_form-control-size-md-padding)));
-    padding-bottom: calc(var(--form-control-size-md-padding, var(--INTERNAL_form-control-size-md-padding)));
+    padding-top: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
+    padding-bottom: var(
+      --form-control-size-md-padding,
+      var(--INTERNAL_form-control-size-md-padding)
+    );
   }
 
   &::before,
   &::after {
-    width: 14px;
-    height: 4px;
     top: calc(var(--size-spacing-md) + 3px);
   }
-
-  &::before {
-    right: calc(var(--size-spacing-sm) + 11px);
-  }
-
-  &::after {
-    right: calc(var(--size-spacing-sm) + 3px);
-  }
 }
 
 %size-md {
@@ -88,31 +114,39 @@
 }
 
 @mixin size-lg {
-  border-radius: var(--form-control-size-lg-border-radius, var(--INTERNAL_form-control-size-lg-border-radius));
-  font-size: var(--form-control-size-lg-font-size, var(--INTERNAL_form-control-size-lg-font-size));
+  border-radius: var(
+    --form-control-size-lg-border-radius,
+    var(--INTERNAL_form-control-size-lg-border-radius)
+  );
+  font-size: var(
+    --form-control-size-lg-font-size,
+    var(--INTERNAL_form-control-size-lg-font-size)
+  );
 
   > select {
-    border-radius: var(--form-control-size-lg-border-radius, var(--INTERNAL_form-control-size-lg-border-radius));
-    padding-left: var(--form-control-size-lg-padding, var(--INTERNAL_form-control-size-lg-padding));
+    border-radius: var(
+      --form-control-size-lg-border-radius,
+      var(--INTERNAL_form-control-size-lg-border-radius)
+    );
+    padding-left: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
     padding-right: var(--size-spacing-3xl);
-    padding-top: calc(var(--form-control-size-lg-padding, var(--INTERNAL_form-control-size-lg-padding)) - 1px);
-    padding-bottom: calc(var(--form-control-size-lg-padding, var(--INTERNAL_form-control-size-lg-padding)) - 1px);
+    padding-top: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
+    padding-bottom: var(
+      --form-control-size-lg-padding,
+      var(--INTERNAL_form-control-size-lg-padding)
+    );
   }
 
   &::before,
   &::after {
-    width: 14px;
-    height: 4px;
     top: calc(var(--size-spacing-md) + 9px);
   }
-
-  &::before {
-    right: calc(var(--size-spacing-sm) + 11px);
-  }
-
-  &::after {
-    right: calc(var(--size-spacing-sm) + 3px);
-  }
 }
 
 %size-lg {
@@ -124,16 +158,36 @@
 }
 
 .select-input-native-wrapper {
-  font-family: var(--form-control-font-family, var(--INTERNAL_form-control-font-family));
+  font-family: var(
+    --form-control-font-family,
+    var(--INTERNAL_form-control-font-family)
+  );
   position: relative;
-  box-shadow: var(--form-control-box-shadow, var(--INTERNAL_form-control-box-shadow)),
-    inset 0 0 0 1px var(--form-control-border-color, var(--INTERNAL_form-control-border-color));
-  background-color: var(--form-control-background-color, var(--INTERNAL_form-control-background-color));
+  box-shadow: var(
+      --form-control-box-shadow,
+      var(--INTERNAL_form-control-box-shadow)
+    ),
+    inset 0 0 0 1px
+      var(
+        --form-control-border-color,
+        var(--INTERNAL_form-control-border-color)
+      );
+  background-color: var(
+    --form-control-background-color,
+    var(--INTERNAL_form-control-background-color)
+  );
 
   &:focus-within {
     outline: none;
-    box-shadow: var(--form-control-box-shadow, var(--INTERNAL_form-control-box-shadow-focus)),
-      inset 0 0 0 1px var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+    box-shadow: var(
+        --form-control-box-shadow,
+        var(--INTERNAL_form-control-box-shadow-focus)
+      ),
+      inset 0 0 0 1px
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
   }
 
   &::before,
@@ -141,18 +195,22 @@
     border-radius: 100px;
     content: '';
     position: absolute;
-    background: var(--color-brand-grey-light);
+    background: var(--color-brand-grey-300);
     pointer-events: none;
+    width: 10px;
+    height: 2px;
   }
 
   //change the stacking context so this half of the chevron stays above the disabled background color.
   &::before {
+    right: calc(var(--size-spacing-sm) + 7px);
     transform-origin: 50% 50%;
     transform: rotate(42deg);
     z-index: 1;
   }
 
   &::after {
+    right: calc(var(--size-spacing-sm) + 1px);
     transform-origin: 50% 50%;
     transform: rotate(-42deg);
   }
@@ -170,11 +228,17 @@
     border: none;
     background: transparent;
     width: 100%;
-    line-height: var(--form-control-line-height, var(--INTERNAL_form-control-line-height));
+    line-height: var(
+      --form-control-line-height,
+      var(--INTERNAL_form-control-line-height)
+    );
 
     &:focus {
       outline: none;
-      border-color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+      border-color: var(
+        --form-control-border-color-focus,
+        var(--INTERNAL_form-control-border-color-focus)
+      );
     }
 
     &:disabled {
@@ -239,17 +303,29 @@
   }
 
   &.error {
-    border-color: var(--form-control-border-color-error, var(--INTERNAL_form-control-border-color-error));
-    background-color: var(--form-control-border-color-error, var(--INTERNAL_form-control-background-color-error));
+    border-color: var(
+      --form-control-border-color-error,
+      var(--INTERNAL_form-control-border-color-error)
+    );
+    background-color: var(
+      --form-control-border-color-error,
+      var(--INTERNAL_form-control-background-color-error)
+    );
 
     select:focus {
       outline: none;
-      border-color: var(--form-control-border-color-focus, var(--INTERNAL_form-control-border-color-focus));
+      border-color: var(
+        --form-control-border-color-focus,
+        var(--INTERNAL_form-control-border-color-focus)
+      );
       background-color: transparent;
     }
   }
 }
 
 .text-input-label {
-  margin-bottom: var(--form-control-label-margin, var(--INTERNAL_form-control-label-margin));
+  margin-bottom: var(
+    --form-control-label-margin,
+    var(--INTERNAL_form-control-label-margin)
+  );
 }
diff --git a/src/components/SelectInputNativeInset/SelectInputNativeInset.module.scss b/src/components/SelectInputNativeInset/SelectInputNativeInset.module.scss
index 87e10aad2..78c5ca2a4 100644
--- a/src/components/SelectInputNativeInset/SelectInputNativeInset.module.scss
+++ b/src/components/SelectInputNativeInset/SelectInputNativeInset.module.scss
@@ -29,19 +29,9 @@
 
   &::before,
   &::after {
-    width: 14px;
-    height: 4px;
     top: calc(var(--size-spacing-md) + 3px);
   }
 
-  &::before {
-    right: calc(var(--size-spacing-sm) + 11px);
-  }
-
-  &::after {
-    right: calc(var(--size-spacing-sm) + 3px);
-  }
-
   select {
     padding: calc(
         var(
@@ -111,19 +101,9 @@
 
   &::before,
   &::after {
-    width: 14px;
-    height: 4px;
     top: calc(var(--size-spacing-md) + 9px);
   }
 
-  &::before {
-    right: calc(var(--size-spacing-sm) + 11px);
-  }
-
-  &::after {
-    right: calc(var(--size-spacing-sm) + 3px);
-  }
-
   select {
     padding: calc(
         var(
@@ -243,18 +223,22 @@
     border-radius: 100px;
     content: '';
     position: absolute;
-    background: var(--color-brand-grey-light);
+    background: var(--color-brand-grey-300);
     pointer-events: none;
+    width: 10px;
+    height: 2px;
   }
 
   //change the stacking context so this half of the chevron stays above the disabled background color.
   &::before {
+    right: calc(var(--size-spacing-sm) + 7px);
     transform-origin: 50% 50%;
     transform: rotate(42deg);
     z-index: 1;
   }
 
   &::after {
+    right: calc(var(--size-spacing-sm) + 1px);
     transform-origin: 50% 50%;
     transform: rotate(-42deg);
   }
@@ -405,7 +389,7 @@
   // Reset default button styles
   .clear-button {
     position: absolute;
-    right: var(--size-spacing-2xl);
+    right: var(--size-spacing-xl);
     transition-duration: 0.2s;
     transition-property: color;
     border: 0;