diff --git a/e b/e
index da36ee7f16fc8..bcd9c68939a76 160000
--- a/e
+++ b/e
@@ -1 +1 @@
-Subproject commit da36ee7f16fc8f9aabb4338e28896787016b3a8c
+Subproject commit bcd9c68939a76baef788d5757ac28031ae12ae70
diff --git a/web/packages/design/src/theme/darkTheme.ts b/web/packages/design/src/theme/darkTheme.ts
index a5cd0bfa92d58..5cccdeb317f1a 100644
--- a/web/packages/design/src/theme/darkTheme.ts
+++ b/web/packages/design/src/theme/darkTheme.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { fonts } from './fonts';
 import { getContrastRatio } from './utils/colorManipulator';
-import { lightBlue, blueGrey, yellow } from './palette';
+import { lightBlue, blueGrey, yellow, grey } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
 
@@ -119,10 +119,14 @@ const colors = {
   dark: '#000000',
   light: '#FFFFFF',
 
-  grey: {
+  blueGrey: {
     ...blueGrey,
   },
 
+  grey: {
+    ...grey,
+  },
+
   error: {
     main: '#FF6257',
     hover: '#FF8179',
diff --git a/web/packages/design/src/theme/lightTheme.ts b/web/packages/design/src/theme/lightTheme.ts
index 58d01c15bd9c2..050ccff9cc834 100644
--- a/web/packages/design/src/theme/lightTheme.ts
+++ b/web/packages/design/src/theme/lightTheme.ts
@@ -16,7 +16,7 @@ limitations under the License.
 
 import { fonts } from './fonts';
 import { getContrastRatio } from './utils/colorManipulator';
-import { lightBlue, blueGrey, yellow } from './palette';
+import { lightBlue, blueGrey, grey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
 
@@ -115,10 +115,14 @@ const colors = {
   dark: '#000000',
   light: '#FFFFFF',
 
-  grey: {
+  blueGrey: {
     ...blueGrey,
   },
 
+  grey: {
+    ...grey,
+  },
+
   error: {
     main: '#CC372D',
     hover: '#A32C24',
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
index 785b15c9dbc11..2edec6f6e6783 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
@@ -56,7 +56,7 @@ export const PathInput = forwardRef<
 
 const StyledFieldInput = styled(FieldInput)`
   input {
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid ${props => props.theme.colors.text.placeholder};
     background: transparent;
     color: white;
     box-shadow: none;
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
index 01bca24b78246..1d6f8d7d2e1cf 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileList/FileListItem.tsx
@@ -110,7 +110,7 @@ const Li = styled.li`
 
 const ProgressBackground = styled.div`
   border-radius: 50px;
-  background: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   width: 100%;
 `;
 
diff --git a/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx b/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
index be1d2bb659277..3090fa34d24e4 100644
--- a/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
+++ b/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
@@ -103,7 +103,7 @@ const StyledUsers = styled.div`
   justify-content: center;
   margin-right: 3px;
   background-color: ${props =>
-    props.active ? props.theme.colors.brand : props.theme.colors.grey[900]};
+    props.active ? props.theme.colors.brand : props.theme.colors.blueGrey[900]};
 `;
 
 const StyledAvatar = styled.div`
@@ -121,8 +121,8 @@ const StyledAvatar = styled.div`
 `;
 
 const UserItem = styled.div`
-  border-bottom: 1px solid ${props => props.theme.colors.grey[50]};
-  color: ${props => props.theme.colors.grey[600]};
+  border-bottom: 1px solid ${props => props.theme.colors.blueGrey[50]};
+  color: ${props => props.theme.colors.blueGrey[600]};
   font-size: 12px;
   align-items: center;
   display: flex;
diff --git a/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx b/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx
index ada2c8aa2a556..c673f7a435f89 100644
--- a/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx
+++ b/web/packages/teleport/src/Discover/Database/EnrollRdsDatabase/RdsDatabaseList.tsx
@@ -168,7 +168,7 @@ const StatusLight = styled(Box)`
     if (status === Status.Warning) {
       return theme.colors.warning;
     }
-    return theme.colors.grey[300]; // Unknown
+    return theme.colors.blueGrey[300]; // Unknown
   }};
 `;
 
diff --git a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
index cd1887a32c439..6655273c7903a 100644
--- a/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
+++ b/web/packages/teleport/src/Discover/Database/SetupAccess/SetupAccess.tsx
@@ -392,7 +392,7 @@ function DbEngineInstructions({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;
diff --git a/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx
index 17ae07ea8cbf4..bc2faa02957e9 100644
--- a/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx
+++ b/web/packages/teleport/src/Discover/Database/TestConnection/TestConnection.tsx
@@ -168,7 +168,7 @@ export function TestConnectionView({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;
diff --git a/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx b/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx
index 2d95a4c66a8dc..ab9528a81dcb0 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/HelmChart/HelmChart.tsx
@@ -453,8 +453,7 @@ const InstallHelmChart = ({
 
 const StyledBox = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid #2f3659;
 `;
diff --git a/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx
index 62252d8f6fcd6..7a21b92268d27 100644
--- a/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx
+++ b/web/packages/teleport/src/Discover/Kubernetes/TestConnection/TestConnection.tsx
@@ -205,7 +205,7 @@ export function TestConnection({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;
diff --git a/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx b/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx
index 0c3e3b7e9b509..633cb950ae543 100644
--- a/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx
+++ b/web/packages/teleport/src/Discover/Server/TestConnection/TestConnection.tsx
@@ -113,7 +113,7 @@ export function TestConnection({
 
 const StyledBox = styled(Box)`
   max-width: 800px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;
diff --git a/web/packages/teleport/src/Discover/Shared/CommandBox.tsx b/web/packages/teleport/src/Discover/Shared/CommandBox.tsx
index 579c027400abc..ccb486d46bd71 100644
--- a/web/packages/teleport/src/Discover/Shared/CommandBox.tsx
+++ b/web/packages/teleport/src/Discover/Shared/CommandBox.tsx
@@ -21,10 +21,9 @@ import { Box, Text } from 'design';
 
 const Container = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid #2f3659;
 `;
 
 interface CommandBoxProps {
diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
index b47db658a3478..b0d94b6240abc 100644
--- a/web/packages/teleport/src/Discover/Shared/HintBox.tsx
+++ b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
@@ -25,7 +25,7 @@ import { TextIcon } from 'teleport/Discover/Shared/Text';
 
 const HintBoxContainer = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
   border: 2px solid ${props => props.theme.colors.warning}; ;
@@ -33,17 +33,17 @@ const HintBoxContainer = styled(Box)`
 
 export const WaitingInfo = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid #2f3659;
+  border: 2px solid ${props => props.theme.colors.text.placeholder};
   display: flex;
   align-items: center;
 `;
 
 export const SuccessInfo = styled(Box)`
   max-width: 1000px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
   border: 2px solid ${props => props.theme.colors.success};
diff --git a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
index 10fb5f613d3ce..6d8155a848d0b 100644
--- a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
+++ b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
@@ -18,20 +18,30 @@ import React from 'react';
 import { useTheme } from 'styled-components';
 import ReactSelectCreatable from 'react-select/creatable';
 
+import { StyledSelect } from 'shared/components/Select/Select';
+
 const styles = theme => ({
   multiValue: (base, state) => {
-    return state.data.isFixed ? { ...base, backgroundColor: 'gray' } : base;
+    return state.data.isFixed
+      ? {
+          ...base,
+          backgroundColor: `${theme.colors.grey['600']} !important`,
+        }
+      : base;
   },
   multiValueLabel: (base, state) => {
     if (state.data.isFixed) {
-      return { ...base, color: theme.colors.text.primary, paddingRight: 6 };
+      return {
+        ...base,
+        paddingRight: 6,
+      };
     }
 
     if (state.isDisabled) {
       return { ...base, paddingRight: 6 };
     }
 
-    return { ...base, color: theme.colors.text.primaryInverse };
+    return { ...base };
   },
   multiValueRemove: (base, state) => {
     return state.data.isFixed || state.isDisabled
@@ -39,12 +49,8 @@ const styles = theme => ({
       : {
           ...base,
           cursor: 'pointer',
-          color: theme.colors.text.primaryInverse,
         };
   },
-  menuList: base => {
-    return { ...base, color: theme.colors.text.primaryInverse };
-  },
 });
 
 export type SelectCreatableProps = {
@@ -77,18 +83,21 @@ export const SelectCreatable = ({
 }: SelectCreatableProps) => {
   const theme = useTheme();
   return (
-    <ReactSelectCreatable
-      className="react-select"
-      components={{
-        DropdownIndicator: null,
-      }}
-      styles={styles(theme)}
-      {...rest}
-      isMulti={isMulti}
-      isClearable={isClearable}
-      isDisabled={isDisabled}
-      autoFocus={autoFocus}
-    />
+    <StyledSelect>
+      <ReactSelectCreatable
+        className="react-select-container"
+        classNamePrefix="react-select"
+        components={{
+          DropdownIndicator: null,
+        }}
+        styles={styles(theme)}
+        {...rest}
+        isMulti={isMulti}
+        isClearable={isClearable}
+        isDisabled={isDisabled}
+        autoFocus={autoFocus}
+      />
+    </StyledSelect>
   );
 };
 
diff --git a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx
index a8ac35d2b426f..44f7729cd96c7 100644
--- a/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx
+++ b/web/packages/teleport/src/Discover/Shared/SetupAccess/SetupAccessWrapper.tsx
@@ -146,7 +146,7 @@ export function SetupAccessWrapper({
 
 const StyledBox = styled(Box)`
   max-width: 700px;
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 20px;
 `;
diff --git a/web/packages/teleport/src/Discover/Shared/Step.tsx b/web/packages/teleport/src/Discover/Shared/Step.tsx
index 0eec69bfc882e..81a2349290cb1 100644
--- a/web/packages/teleport/src/Discover/Shared/Step.tsx
+++ b/web/packages/teleport/src/Discover/Shared/Step.tsx
@@ -47,7 +47,7 @@ export function Step(props: StepProps) {
 }
 
 export const StepContainer = styled.div`
-  background: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 12px;
diff --git a/web/packages/teleport/src/Integrations/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx
index 18ed2dfae80e3..c08c3fc97d84d 100644
--- a/web/packages/teleport/src/Integrations/IntegrationList.tsx
+++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx
@@ -157,7 +157,7 @@ const StatusLight = styled(Box)`
     if (status === Status.Warning) {
       return theme.colors.warning.main;
     }
-    return theme.colors.grey[300]; // Unknown
+    return theme.colors.blueGrey[300]; // Unknown
   }};
 `;
 
diff --git a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
index b92254009b0a6..e342515acb6d0 100644
--- a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
@@ -51,7 +51,7 @@ const ActiveValue = styled.div<OpenProps>`
   cursor: pointer;
 
   &:focus {
-    background: rgba(255, 255, 255, 0.05);
+    background-color: ${props => props.theme.colors.spotBackground[0]};
   }
 `;
 
diff --git a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
index 846c72182e7c5..f26d30fa380eb 100644
--- a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
+++ b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
@@ -106,7 +106,7 @@ const StyledCloseButton = styled.button`
   background: transparent;
   border-radius: 2px;
   border: none;
-  color: ${props => props.theme.colors.grey[900]};
+  color: ${props => props.theme.colors.blueGrey[900]};
   cursor: pointer;
   height: 24px;
   width: 24px;
@@ -121,7 +121,7 @@ const StyledCloseButton = styled.button`
   right: 0px;
 
   &:hover {
-    background: ${props => props.theme.colors.grey[200]};
+    background: ${props => props.theme.colors.blueGrey[200]};
   }
 `;
 
diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
index 4d16d6649eeed..5fe8c131966c3 100644
--- a/web/packages/teleport/src/components/Toggle/Toggle.tsx
+++ b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -91,7 +91,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })`
     background: ${props => props.theme.colors.levels.surface};
 
     &:before {
-      background: ${props => props.theme.colors.grey[700]};
+      background: ${props => props.theme.colors.blueGrey[700]};
     }
   }
 `;
diff --git a/web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx b/web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx
index 700d4ee47da55..60936ca49d02e 100644
--- a/web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx
+++ b/web/packages/teleport/src/components/ToolTipNoPermBadge/ToolTipNoPermBadge.story.tsx
@@ -47,5 +47,5 @@ const SomeBox = styled.div`
   display: flex;
   position: relative;
   align-items: center;
-  background: rgba(255, 255, 255, 0.05);
+  background-color: ${props => props.theme.colors.spotBackground[0]};
 `;
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
index 385ac49d3183d..06157051a2455 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
@@ -16,7 +16,14 @@ limitations under the License.
 
 import { fonts } from 'design/theme/fonts';
 import { getContrastRatio } from 'design/theme/utils/colorManipulator';
-import { lightBlue, teal, pink, blueGrey, yellow } from 'design/theme/palette';
+import {
+  lightBlue,
+  teal,
+  pink,
+  blueGrey,
+  yellow,
+  grey,
+} from 'design/theme/palette';
 import typography, { fontSizes, fontWeights } from 'design/theme/typography';
 import { sharedStyles } from 'design/theme/sharedStyles';
 
@@ -114,10 +121,14 @@ const colors = {
     },
   },
 
-  grey: {
+  blueGrey: {
     ...blueGrey,
   },
 
+  grey: {
+    ...grey,
+  },
+
   error: {
     main: '#FF6257',
     hover: '#FF8179',
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
index 543d83d2f241d..a2bc5d083d664 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionStatusIndicator.tsx
@@ -31,7 +31,7 @@ const StyledStatus = styled<Props>(Box)`
     const { $connected, theme } = props;
     const backgroundColor = $connected
       ? theme.colors.success
-      : theme.colors.grey[300];
+      : theme.colors.blueGrey[300];
     return {
       backgroundColor,
     };