diff --git a/src/Select/AsyncCreatableSelect.jsx b/src/Select/AsyncCreatableSelect.jsx
index 11c1da71..087a8ef9 100644
--- a/src/Select/AsyncCreatableSelect.jsx
+++ b/src/Select/AsyncCreatableSelect.jsx
@@ -38,6 +38,7 @@ const AsyncCreatableSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={`${className || ''} AsyncSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}
diff --git a/src/Select/AsyncSelect.jsx b/src/Select/AsyncSelect.jsx
index 581ef0d2..ba1af77f 100644
--- a/src/Select/AsyncSelect.jsx
+++ b/src/Select/AsyncSelect.jsx
@@ -38,6 +38,7 @@ const AsyncSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={`${className || ''} AsyncSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultOptions={defaultOptions}
     defaultValue={defaultValue}
diff --git a/src/Select/CreatableSelect.jsx b/src/Select/CreatableSelect.jsx
index 2a8b15c7..9b06bff3 100644
--- a/src/Select/CreatableSelect.jsx
+++ b/src/Select/CreatableSelect.jsx
@@ -34,6 +34,7 @@ const CreatableSelect = ({
     ariaLabel={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     className={`${className || ''} CreatableSelect`}
+    classNamePrefix="Select"
     components={components}
     defaultValue={defaultValue}
     disabled={disabled}
diff --git a/src/Select/SingleSelect.jsx b/src/Select/SingleSelect.jsx
index ed12c1ca..c6f51471 100644
--- a/src/Select/SingleSelect.jsx
+++ b/src/Select/SingleSelect.jsx
@@ -4,6 +4,7 @@ import Select from 'react-select';
 import propTypes from 'prop-types';
 
 import zStack from 'src/Styles/zStack';
+import './select.scss';
 
 import { defaultTheme, defaultStyles, SELECT_SIZES } from './styles';
 
@@ -38,6 +39,7 @@ const SingleSelect = ({
     aria-label={ariaLabel}
     aria-labelledby={ariaLabelledBy}
     className={classNames('SingleSelect', className)}
+    classNamePrefix="Select"
     closeMenuOnSelect={closeMenuOnSelect}
     components={components}
     defaultValue={defaultValue}
diff --git a/src/Select/select.scss b/src/Select/select.scss
new file mode 100644
index 00000000..2d6dd8b1
--- /dev/null
+++ b/src/Select/select.scss
@@ -0,0 +1,32 @@
+@import '../../scss/theme.scss';
+// Note: react-select is largely styled via css-in-js, not SCSS. 
+// However, we need to only provide the styles below when the "Synthesized"
+// class is present on the body in rails server
+
+.Synthesized .Select__menu {
+  .Select__option:hover,
+  .Select__option--is-focused {
+    background-color: $synth-hover-state;
+  }
+
+  .Select__option--is-selected,
+  .Select__option--is-selected:hover {
+    background-color: $synth-selected-state-green;
+  }
+}
+
+.Select__control {
+  .Select__multi-value__label,
+  .Select__multi-value__remove {
+    color: $synth-success-green-dark;
+  }
+
+  .Select__multi-value__remove:hover {
+    background-color: $synth-selected-state-green;
+    color: $synth-success-green-dark;
+  }
+
+  .Select__multi-value {
+    background-color: $synth-hover-state;
+  }
+}