diff --git a/CommonUI/src/Components/Dropdown/Dropdown.tsx b/CommonUI/src/Components/Dropdown/Dropdown.tsx
index 40a4293170..dbc3e8fbfc 100644
--- a/CommonUI/src/Components/Dropdown/Dropdown.tsx
+++ b/CommonUI/src/Components/Dropdown/Dropdown.tsx
@@ -1,4 +1,4 @@
-import Select from 'react-select';
+import Select, { ControlProps, GroupBase, OptionProps } from 'react-select';
 import React, {
     FunctionComponent,
     ReactElement,
@@ -126,6 +126,29 @@ const Dropdown: FunctionComponent<ComponentProps> = (
                 onFocus={() => {
                     props.onFocus && props.onFocus();
                 }}
+                classNames={{
+                    control: (
+                        state: ControlProps<any, boolean, GroupBase<any>>
+                    ): string => {
+                        return state.isFocused
+                            ? '!border-indigo-500'
+                            : 'border-grey-300';
+                    },
+                    option: (
+                        state: OptionProps<any, boolean, GroupBase<any>>
+                    ): string => {
+                        if (state.isDisabled) {
+                            return 'bg-gray-100';
+                        }
+                        if (state.isSelected) {
+                            return '!bg-indigo-500';
+                        }
+                        if (state.isFocused) {
+                            return '!bg-indigo-100';
+                        }
+                        return '';
+                    },
+                }}
                 isClearable={true}
                 isSearchable={true}
                 placeholder={props.placeholder}