diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
index bbe48ab84e69a..9195298046e9f 100644
--- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
+++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -56,10 +56,7 @@ const ChildWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${props =>
-    props.theme.name === 'dark'
-      ? props.theme.colors.spotBackground[0]
-      : props.theme.colors.spotBackground[0]};
+  background: ${props => props.theme.colors.spotBackground[0]};
   border-radius: 200px;
 `;
 
diff --git a/web/packages/design/src/DataTable/index.ts b/web/packages/design/src/DataTable/index.ts
index a9646cc99d23a..79ac2e1eb8bcc 100644
--- a/web/packages/design/src/DataTable/index.ts
+++ b/web/packages/design/src/DataTable/index.ts
@@ -22,7 +22,15 @@ import {
   LabelCell,
   ClickableLabelCell,
 } from './Cells';
-import { StyledPanel } from './StyledTable';
+import { StyledPanel, StyledTableWrapper } from './StyledTable';
 
-export { Cell, TextCell, DateCell, LabelCell, ClickableLabelCell, StyledPanel };
+export {
+  Cell,
+  TextCell,
+  DateCell,
+  LabelCell,
+  ClickableLabelCell,
+  StyledPanel,
+  StyledTableWrapper,
+};
 export default Table;
diff --git a/web/packages/design/src/theme/darkTheme.ts b/web/packages/design/src/theme/darkTheme.ts
index ee6b4f3bdd73e..67fc950a9f48d 100644
--- a/web/packages/design/src/theme/darkTheme.ts
+++ b/web/packages/design/src/theme/darkTheme.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { getContrastRatio, lighten } from './utils/colorManipulator';
 import { lightBlue, blueGrey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -144,6 +144,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#F1F2F4',
+    background: '#010B1C', // bgTerminal
+    selectionBackground: 'rgba(255, 255, 255, 0.18)',
+    cursor: '#FFF',
+    cursorAccent: '#010B1C',
+    red: '#FF6257',
+    green: '#00BFA6',
+    yellow: '#FFAB00',
+    blue: '#009EFF',
+    magenta: '#9F85FF',
+    cyan: '#00D3F0',
+    brightWhite: lighten('#010B1C', 0.89),
+    white: lighten('#010B1C', 0.78),
+    brightBlack: lighten('#010B1C', 0.61),
+    black: '#000',
+    brightRed: '#FF948D',
+    brightGreen: '#2EFFD5',
+    brightYellow: '#FFD98C',
+    brightBlue: '#7BCDFF',
+    brightMagenta: '#B9A6FF',
+    brightCyan: '#74EEFF',
+  },
+
   subtle: blueGrey[50],
   link: '#009EFF',
   bgTerminal: '#010B1C',
diff --git a/web/packages/design/src/theme/lightTheme.ts b/web/packages/design/src/theme/lightTheme.ts
index c238d23d78fc6..13fa6e453da72 100644
--- a/web/packages/design/src/theme/lightTheme.ts
+++ b/web/packages/design/src/theme/lightTheme.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { fonts } from './fonts';
-import { getContrastRatio } from './utils/colorManipulator';
+import { darken, getContrastRatio } from './utils/colorManipulator';
 import { lightBlue, blueGrey, yellow } from './palette';
 import typography, { fontSizes, fontWeights } from './typography';
 import { sharedStyles } from './sharedStyles';
@@ -140,6 +140,30 @@ const colors = {
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
   },
 
+  terminal: {
+    foreground: '#000',
+    background: '#F1F2F4', // levels.sunken
+    selectionBackground: 'rgba(0, 0, 0, 0.18)',
+    cursor: '#000',
+    cursorAccent: '#F1F2F4',
+    red: '#9D0A00',
+    green: '#005742',
+    yellow: '#704B00',
+    blue: '#004B89',
+    magenta: '#3D1BB2',
+    cyan: '#015C6E',
+    brightWhite: darken('#F1F2F4', 0.55),
+    white: darken('#F1F2F4', 0.68),
+    brightBlack: darken('#F1F2F4', 0.8),
+    black: '#000',
+    brightRed: '#BF372E',
+    brightGreen: '#007562',
+    brightYellow: '#8F5F00',
+    brightBlue: '#006BB8',
+    brightMagenta: '#5531D4',
+    brightCyan: '#007282',
+  },
+
   subtle: blueGrey[50],
   link: '#0073BA',
   bgTerminal: '#010B1C',
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
index e1d9a7a639fc4..9b49d64dac413 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/CommonElements.tsx
@@ -56,10 +56,6 @@ export const PathInput = forwardRef<
 
 const StyledFieldInput = styled(FieldInput)`
   input {
-    border: 1px solid ${props => props.theme.colors.text.muted};
-    background: transparent;
-    color: white;
-    box-shadow: none;
     font-size: 14px;
     height: 32px;
   }
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
index 7cbdb966701e5..0025286f7ec77 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/UploadForm/UploadForm.tsx
@@ -127,7 +127,7 @@ const Dropzone = styled.button`
   color: inherit;
   background-color: ${props => props.theme.colors.spotBackground[0]};
   margin-top: ${props => props.theme.space[3]}px;
-  border: 1px dashed ${props => props.theme.colors.spotBackground[1]};
+  border: 1px dashed ${props => props.theme.colors.text.muted};
   height: 128px;
   text-align: center;
   cursor: pointer;
diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
index 4d16d6649eeed..17b391ff46757 100644
--- a/web/packages/teleport/src/components/Toggle/Toggle.tsx
+++ b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -22,9 +22,10 @@ export default function Toggle({
   onToggle,
   children,
   disabled,
+  className,
 }: Props) {
   return (
-    <StyledWrapper disabled={disabled}>
+    <StyledWrapper disabled={disabled} className={className}>
       <StyledInput
         checked={isToggled}
         onChange={onToggle}
@@ -41,6 +42,7 @@ type Props = {
   onToggle: () => void;
   children?: ReactNode;
   disabled?: boolean;
+  className?: string;
 };
 
 const StyledWrapper = styled.label`
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
index b9158a941bb29..e091277aeb727 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
@@ -48,7 +48,7 @@ export type NavButtonProps = {
 const StyledNavButton = styled.button(props => {
   return {
     color: props.active
-      ? props.theme.colors.light
+      ? props.theme.colors.text.main
       : props.theme.colors.text.slightlyMuted,
     cursor: 'pointer',
     fontFamily: 'inherit',
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
index ddb2916d31dbf..3f75954e0d383 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterResources.tsx
@@ -40,7 +40,7 @@ export default function ClusterResources() {
 
   return (
     <StyledMain>
-      <Flex mt={3} pb={5} flexDirection="column">
+      <Flex pb={5} flexDirection="column">
         <SideNav mb={2} />
         <HorizontalSplit>
           {clusterCtx.isLocationActive('/resources/servers') && <Servers />}
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx
index e2b89dccb991b..c81c4a9c6bb82 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Databases/Databases.tsx
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
+import Table, {
+  Cell,
+  ClickableLabelCell,
+  StyledTableWrapper,
+} from 'design/DataTable';
 import { Danger } from 'design/Alert';
 import { MenuLogin, MenuLoginProps } from 'shared/components/MenuLogin';
 import { SearchPanel, SearchPagination } from 'shared/components/Search';
@@ -58,59 +62,61 @@ function DatabaseList(props: State) {
       {fetchAttempt.status === 'error' && (
         <Danger>{fetchAttempt.statusText}</Danger>
       )}
-      <SearchPanel
-        updateQuery={updateQuery}
-        updateSearch={updateSearch}
-        pageIndicators={pageCount}
-        filter={agentFilter}
-        showSearchBar={true}
-        disableSearch={disabled}
-      />
-      <DarkenWhileDisabled disabled={disabled}>
-        <Table
-          data={dbs}
-          columns={[
-            {
-              key: 'name',
-              headerText: 'Name',
-              isSortable: true,
-            },
-            {
-              key: 'description',
-              headerText: 'Description',
-              isSortable: true,
-            },
-            {
-              key: 'type',
-              headerText: 'Type',
-              isSortable: true,
-            },
-            {
-              key: 'labels',
-              headerText: 'Labels',
-              render: ({ labels }) => (
-                <ClickableLabelCell
-                  labels={labels}
-                  onClick={onAgentLabelClick}
-                />
-              ),
-            },
-            {
-              altKey: 'connect-btn',
-              render: db => (
-                <ConnectButton
-                  dbUri={db.uri}
-                  protocol={db.protocol as GatewayProtocol}
-                  onConnect={dbUser => connect(db, dbUser)}
-                />
-              ),
-            },
-          ]}
-          customSort={customSort}
-          emptyText={emptyText}
+      <StyledTableWrapper borderRadius={3}>
+        <SearchPanel
+          updateQuery={updateQuery}
+          updateSearch={updateSearch}
+          pageIndicators={pageCount}
+          filter={agentFilter}
+          showSearchBar={true}
+          disableSearch={disabled}
         />
-        <SearchPagination prevPage={prevPage} nextPage={nextPage} />
-      </DarkenWhileDisabled>
+        <DarkenWhileDisabled disabled={disabled}>
+          <Table
+            data={dbs}
+            columns={[
+              {
+                key: 'name',
+                headerText: 'Name',
+                isSortable: true,
+              },
+              {
+                key: 'description',
+                headerText: 'Description',
+                isSortable: true,
+              },
+              {
+                key: 'type',
+                headerText: 'Type',
+                isSortable: true,
+              },
+              {
+                key: 'labels',
+                headerText: 'Labels',
+                render: ({ labels }) => (
+                  <ClickableLabelCell
+                    labels={labels}
+                    onClick={onAgentLabelClick}
+                  />
+                ),
+              },
+              {
+                altKey: 'connect-btn',
+                render: db => (
+                  <ConnectButton
+                    dbUri={db.uri}
+                    protocol={db.protocol as GatewayProtocol}
+                    onConnect={dbUser => connect(db, dbUser)}
+                  />
+                ),
+              },
+            ]}
+            customSort={customSort}
+            emptyText={emptyText}
+          />
+          <SearchPagination prevPage={prevPage} nextPage={nextPage} />
+        </DarkenWhileDisabled>
+      </StyledTableWrapper>
     </>
   );
 }
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx
index 79891112a20f1..6b6385ee1f3df 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Kubes/Kubes.tsx
@@ -15,7 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
-import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
+import Table, {
+  Cell,
+  ClickableLabelCell,
+  StyledTableWrapper,
+} from 'design/DataTable';
 import { ButtonBorder } from 'design';
 import { Danger } from 'design/Alert';
 import { SearchPanel, SearchPagination } from 'shared/components/Search';
@@ -54,43 +58,45 @@ function KubeList(props: State) {
       {fetchAttempt.status === 'error' && (
         <Danger>{fetchAttempt.statusText}</Danger>
       )}
-      <SearchPanel
-        updateQuery={updateQuery}
-        updateSearch={updateSearch}
-        pageIndicators={pageCount}
-        filter={agentFilter}
-        showSearchBar={true}
-        disableSearch={disabled}
-      />
-      <DarkenWhileDisabled disabled={disabled}>
-        <Table
-          data={kubes}
-          columns={[
-            {
-              key: 'name',
-              headerText: 'Name',
-              isSortable: true,
-            },
-            {
-              key: 'labels',
-              headerText: 'Labels',
-              render: ({ labels }) => (
-                <ClickableLabelCell
-                  labels={labels}
-                  onClick={onAgentLabelClick}
-                />
-              ),
-            },
-            {
-              altKey: 'connect-btn',
-              render: kube => renderConnectButtonCell(kube.uri, connect),
-            },
-          ]}
-          customSort={customSort}
-          emptyText={emptyText}
+      <StyledTableWrapper borderRadius={3}>
+        <SearchPanel
+          updateQuery={updateQuery}
+          updateSearch={updateSearch}
+          pageIndicators={pageCount}
+          filter={agentFilter}
+          showSearchBar={true}
+          disableSearch={disabled}
         />
-        <SearchPagination prevPage={prevPage} nextPage={nextPage} />
-      </DarkenWhileDisabled>
+        <DarkenWhileDisabled disabled={disabled}>
+          <Table
+            data={kubes}
+            columns={[
+              {
+                key: 'name',
+                headerText: 'Name',
+                isSortable: true,
+              },
+              {
+                key: 'labels',
+                headerText: 'Labels',
+                render: ({ labels }) => (
+                  <ClickableLabelCell
+                    labels={labels}
+                    onClick={onAgentLabelClick}
+                  />
+                ),
+              },
+              {
+                altKey: 'connect-btn',
+                render: kube => renderConnectButtonCell(kube.uri, connect),
+              },
+            ]}
+            customSort={customSort}
+            emptyText={emptyText}
+          />
+          <SearchPagination prevPage={prevPage} nextPage={nextPage} />
+        </DarkenWhileDisabled>
+      </StyledTableWrapper>
     </>
   );
 }
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
index 3285f6d304ade..40024c387a208 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/Servers/Servers.tsx
@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
-import Table, { Cell, ClickableLabelCell } from 'design/DataTable';
+import Table, {
+  Cell,
+  ClickableLabelCell,
+  StyledTableWrapper,
+} from 'design/DataTable';
 import { Danger } from 'design/Alert';
 import { MenuLogin } from 'shared/components/MenuLogin';
 import { SearchPanel, SearchPagination } from 'shared/components/Search';
@@ -54,53 +58,55 @@ function ServerList(props: State) {
       {fetchAttempt.status === 'error' && (
         <Danger>{fetchAttempt.statusText}</Danger>
       )}
-      <SearchPanel
-        updateQuery={updateQuery}
-        updateSearch={updateSearch}
-        pageIndicators={pageCount}
-        filter={agentFilter}
-        showSearchBar={true}
-        disableSearch={disabled}
-      />
-      <DarkenWhileDisabled disabled={disabled}>
-        <Table
-          columns={[
-            {
-              key: 'hostname',
-              headerText: 'Hostname',
-              isSortable: true,
-            },
-            {
-              key: 'addr',
-              headerText: 'Address',
-              isSortable: false,
-              render: renderAddressCell,
-            },
-            {
-              key: 'labels',
-              headerText: 'Labels',
-              render: ({ labels }) => (
-                <ClickableLabelCell
-                  labels={labels}
-                  onClick={onAgentLabelClick}
-                />
-              ),
-            },
-            {
-              altKey: 'connect-btn',
-              render: server =>
-                renderConnectCell(
-                  () => getSshLogins(server.uri),
-                  login => connect(server, login)
-                ),
-            },
-          ]}
-          customSort={customSort}
-          emptyText={emptyText}
-          data={servers}
+      <StyledTableWrapper borderRadius={3}>
+        <SearchPanel
+          updateQuery={updateQuery}
+          updateSearch={updateSearch}
+          pageIndicators={pageCount}
+          filter={agentFilter}
+          showSearchBar={true}
+          disableSearch={disabled}
         />
-        <SearchPagination prevPage={prevPage} nextPage={nextPage} />
-      </DarkenWhileDisabled>
+        <DarkenWhileDisabled disabled={disabled}>
+          <Table
+            columns={[
+              {
+                key: 'hostname',
+                headerText: 'Hostname',
+                isSortable: true,
+              },
+              {
+                key: 'addr',
+                headerText: 'Address',
+                isSortable: false,
+                render: renderAddressCell,
+              },
+              {
+                key: 'labels',
+                headerText: 'Labels',
+                render: ({ labels }) => (
+                  <ClickableLabelCell
+                    labels={labels}
+                    onClick={onAgentLabelClick}
+                  />
+                ),
+              },
+              {
+                altKey: 'connect-btn',
+                render: server =>
+                  renderConnectCell(
+                    () => getSshLogins(server.uri),
+                    login => connect(server, login)
+                  ),
+              },
+            ]}
+            customSort={customSort}
+            emptyText={emptyText}
+            data={servers}
+          />
+          <SearchPagination prevPage={prevPage} nextPage={nextPage} />
+        </DarkenWhileDisabled>
+      </StyledTableWrapper>
     </>
   );
 }
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx b/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
index f2589d5e0b81a..f193b7c3f3041 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
@@ -83,14 +83,6 @@ export function Cluster() {
 
   return (
     <Layout mx="auto" px={5} pt={3} height="100%">
-      <Flex justifyContent="space-between">
-        <Text typography="body1" color="text.slightlyMuted">
-          {`clusters / `}
-          <Text as="span" typography="h6" color="text.main">
-            {`${clusterCtx.state.clusterName}`}
-          </Text>
-        </Text>
-      </Flex>
       <ClusterResources />
     </Layout>
   );
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
index d541e08afcc60..a81f9aa0be53e 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
@@ -16,6 +16,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Box, ButtonPrimary, Flex, Indicator } from 'design';
+import { fade } from 'design/theme/utils/colorManipulator';
 
 interface CliCommandProps {
   cliCommand: string;
@@ -50,13 +51,19 @@ export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
     >
       <Flex
         mr="2"
-        color={shouldDisplayIsLoading ? 'text.slightlyMuted' : 'text.main'}
         width="100%"
+        shouldDisplayIsLoading={shouldDisplayIsLoading}
         css={`
           overflow: auto;
           white-space: pre;
           word-break: break-all;
           font-size: 12px;
+          color: ${props => {
+            // always use light colors
+            const { light } = props.theme.colors;
+            // 0.72 - text.slightlyMuted opacity
+            return props.shouldDisplayIsLoading ? fade(light, 0.72) : light;
+          }};
           font-family: ${props => props.theme.fonts.mono};
         `}
       >
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
index 8bbb530d69d60..06e376c6de77f 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
@@ -21,24 +21,8 @@ import React, { forwardRef } from 'react';
 export const ConfigFieldInput: typeof FieldInput = styled(FieldInput)`
   input {
     background: inherit;
-    border: 1px ${props => props.theme.colors.action.disabledBackground} solid;
-    color: ${props => props.theme.colors.text.main};
-    box-shadow: none;
     font-size: 14px;
     height: 34px;
-
-    ::placeholder {
-      opacity: 1;
-      color: ${props => props.theme.colors.text.slightlyMuted};
-    }
-
-    &:hover {
-      border-color: ${props => props.theme.colors.text.slightlyMuted};
-    }
-
-    &:focus {
-      border-color: ${props => props.theme.colors.brand};
-    }
   }
 `;
 
diff --git a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
index aa72568507bd3..c93053aaef25a 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
@@ -61,8 +61,29 @@ export default class TtyTerminal {
       fontFamily: this.el.style.fontFamily,
       fontSize: this.options.fontSize,
       scrollback: 5000,
+      minimumContrastRatio: 4.5, // minimum for WCAG AA compliance
       theme: {
-        background: theme.colors.levels.sunken,
+        foreground: theme.colors.terminal.foreground,
+        background: theme.colors.terminal.background,
+        selectionBackground: theme.colors.terminal.selectionBackground,
+        cursor: theme.colors.terminal.cursor,
+        cursorAccent: theme.colors.terminal.cursorAccent,
+        red: theme.colors.terminal.red,
+        green: theme.colors.terminal.green,
+        yellow: theme.colors.terminal.yellow,
+        blue: theme.colors.terminal.blue,
+        magenta: theme.colors.terminal.magenta,
+        cyan: theme.colors.terminal.cyan,
+        brightWhite: theme.colors.terminal.brightWhite,
+        white: theme.colors.terminal.white,
+        brightBlack: theme.colors.terminal.brightBlack,
+        black: theme.colors.terminal.black,
+        brightRed: theme.colors.terminal.brightRed,
+        brightGreen: theme.colors.terminal.brightGreen,
+        brightYellow: theme.colors.terminal.brightYellow,
+        brightBlue: theme.colors.terminal.brightBlue,
+        brightMagenta: theme.colors.terminal.brightMagenta,
+        brightCyan: theme.colors.terminal.brightCyan,
       },
       windowOptions: {
         setWinSizeChars: true,
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
index ec8bae80c58c9..05fbb4212b99f 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
@@ -108,7 +108,7 @@ export function UserJobRole(props: UserJobRoleProps) {
             value={jobRole}
             onChange={handleRadioGroupChange}
           />
-          <DarkInput
+          <StyledInput
             ref={inputRef}
             value={otherJobRole}
             onClick={() => {
@@ -135,19 +135,8 @@ export function UserJobRole(props: UserJobRoleProps) {
   );
 }
 
-// TODO(gzdunek): remove after improving inputs styling in Connect
-const DarkInput = styled(Input)`
-  background: inherit;
-  border: 1px ${props => props.theme.colors.action.disabledBackground} solid;
-  box-shadow: none;
-  color: ${props => props.theme.colors.text.main};
+const StyledInput = styled(Input)`
   margin-bottom: 10px;
   font-size: 14px;
   height: 34px;
-  transition: border 300ms ease-out;
-
-  ::placeholder {
-    opacity: 1;
-    color: ${props => props.theme.colors.text.slightlyMuted};
-  }
 `;
diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index c28b2aa6d6f9c..f3f69e201db10 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -195,7 +195,7 @@ const Shortcut = styled(Box).attrs({ p: 1 })`
   top: 50%;
   transform: translate(0, -50%);
   color: ${({ theme }) => theme.colors.text.slightlyMuted};
-  background-color: ${({ theme }) => theme.colors.levels.elevated};
+  background-color: ${({ theme }) => theme.colors.spotBackground[0]};
   line-height: 12px;
   font-size: 12px;
   border-radius: ${props => props.theme.radii[2]}px;
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
index d29d09ef30a9a..1ee2d85671f68 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
@@ -42,7 +42,7 @@ export function ShareFeedbackForm(props: ShareFeedbackProps) {
     props.submitFeedbackAttempt.status === 'processing';
 
   return (
-    <Flex bg="levels.elevated" p={3} borderRadius={3} maxWidth="370px">
+    <Flex bg="levels.elevated" p={3} maxWidth="370px">
       <Validation>
         {({ validator }) => (
           <Flex
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
index af1221c3edbd7..b842bf9a14079 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import styled from 'styled-components';
 import FieldInput from 'shared/components/FieldInput';
 import { requiredField } from 'shared/components/Validation/rules';
 import { FieldTextArea } from 'shared/components/FieldTextArea';
@@ -83,7 +84,7 @@ export function ShareFeedbackFormFields({
         onChange={e => updateFormField('feedback', e.target.value)}
         placeholder="Type your suggestions here"
       />
-      <Toggle
+      <ToggleWithCustomStyling
         disabled={disabled}
         isToggled={formValues.newsletterEnabled}
         onToggle={() => {
@@ -93,8 +94,8 @@ export function ShareFeedbackFormFields({
         <Text ml={2} color="text.main">
           Sign me up for the newsletter
         </Text>
-      </Toggle>
-      <Toggle
+      </ToggleWithCustomStyling>
+      <ToggleWithCustomStyling
         disabled={disabled}
         isToggled={formValues.salesContactEnabled}
         onToggle={() => {
@@ -113,7 +114,15 @@ export function ShareFeedbackFormFields({
         >
           I would like a demo of Teleport&nbsp;Enterprise features
         </Text>
-      </Toggle>
+      </ToggleWithCustomStyling>
     </>
   );
 }
+
+// Custom styling for the toggle to make it readable on a light background.
+// TODO(gzdunek): remove when design team finish work on this form control.
+const ToggleWithCustomStyling = styled(Toggle)`
+  > div:first-of-type {
+    border: 1px solid ${props => props.theme.colors.spotBackground[1]};
+  }
+`;
diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
index 33140862c03e0..e58c9ac9164b2 100644
--- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
@@ -48,7 +48,7 @@ export function RecentClusters() {
 
   return (
     <Card p={3} maxWidth="480px" bg="levels.surface" m="auto">
-      <Text bold fontSize={3} mb={1} color="light">
+      <Text bold fontSize={3} mb={1}>
         Recent clusters
       </Text>
       <Box as="ul" p={0} m={0} maxHeight="110px" overflow="auto">
diff --git a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
index 5da1631a423c4..7914f144ceb9e 100644
--- a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
@@ -75,7 +75,6 @@ export function Tabs(props: Props) {
         ml="1"
         mr="2"
         size={0}
-        color="light"
         disabled={disableNew}
         title={newTabTooltip}
         onClick={onNew}
@@ -107,7 +106,7 @@ const Separator = styled.div`
   height: 23px;
   width: 1px;
   margin: 0 1px;
-  background: ${props => props.theme.colors.text.muted};
+  background: ${props => props.theme.colors.spotBackground[2]};
 `;
 
 const StyledTabs = styled(Box)`
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/globals.ts b/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
index 2769f7ece03a5..65cf186e474f2 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     background-color: ${props => props.theme.colors.levels.sunken};
-    color: ${props => props.theme.colors.light};
+    color: ${props => props.theme.colors.text.main};
     padding: 0;
   }
 
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
index 4a89876af2656..682ca96a998f2 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
@@ -15,31 +15,42 @@ limitations under the License.
 */
 
 import { fonts } from 'design/theme/fonts';
-import typography, { fontSizes, fontWeights } from 'design/theme/typography';
-import { sharedStyles } from 'design/theme/sharedStyles';
-import { darkTheme } from 'design/theme';
+import {
+  darkTheme as designDarkTheme,
+  lightTheme as designLightTheme,
+} from 'design/theme';
+import { lighten } from 'design/theme/utils/colorManipulator';
 
 const sansSerif = 'system-ui';
 
-const theme = {
-  name: 'dark',
-  colors: darkTheme.colors,
-  typography,
+const darkTheme = {
+  ...designDarkTheme,
+  colors: {
+    ...designDarkTheme.colors,
+    terminal: {
+      ...designDarkTheme.colors.terminal,
+      background: designDarkTheme.colors.levels.sunken,
+      cursorAccent: designDarkTheme.colors.levels.sunken,
+      brightWhite: lighten(designDarkTheme.colors.levels.sunken, 0.89),
+      white: lighten(designDarkTheme.colors.levels.sunken, 0.78),
+      brightBlack: lighten(designDarkTheme.colors.levels.sunken, 0.61),
+    },
+  },
+  font: sansSerif,
+  fonts: {
+    sansSerif,
+    mono: fonts.mono,
+  },
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const lightTheme = {
+  ...designLightTheme,
   font: sansSerif,
   fonts: {
     sansSerif,
     mono: fonts.mono,
   },
-  fontWeights,
-  fontSizes,
-  space: darkTheme.space,
-  borders: darkTheme.borders,
-  radii: [0, 2, 4, 8, 16, 9999, '100%'],
-  regular: fontWeights.regular,
-  bold: fontWeights.bold,
-  ...sharedStyles,
-  // disabled media queries for styled-system
-  breakpoints: [],
 };
 
-export default theme;
+export default darkTheme;
diff --git a/web/packages/teleterm/src/ui/TopBar/AdditionalActions.tsx b/web/packages/teleterm/src/ui/TopBar/AdditionalActions.tsx
index 1d1f2d0b07205..81553f86ade10 100644
--- a/web/packages/teleterm/src/ui/TopBar/AdditionalActions.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/AdditionalActions.tsx
@@ -214,7 +214,10 @@ export function MenuItem({
         title={item.isDisabled && item.disabledText}
         onClick={handleClick}
       >
-        <item.Icon color={item.isDisabled && 'text.disabled'} fontSize={2} />
+        <item.Icon
+          color={item.isDisabled ? 'text.disabled' : null}
+          fontSize={2}
+        />
         <Flex
           gap={2}
           flex="1"
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
index b6d6925326d78..bc044820f6c5e 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -98,7 +98,7 @@ export function ConnectionItem(props: ConnectionItemProps) {
             <span
               css={`
                 font-size: 10px;
-                background: rgba(255, 255, 255, 0.25);
+                background: ${props => props.theme.colors.spotBackground[2]};
                 opacity: 0.85;
                 padding: 1px 2px;
                 margin-right: 4px;
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx
index b1c96ce3f4901..772111bd5a619 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIconStatusIndicator.tsx
@@ -31,11 +31,13 @@ const StyledStatus = styled<Props>(Box)`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   ${props => {
     const { $connected, theme } = props;
     const backgroundColor = $connected ? theme.colors.success : null;
-    const border = $connected ? null : `1px solid ${theme.colors.light}`;
+    const border = $connected
+      ? null
+      : `1px solid ${theme.colors.text.slightlyMuted}`;
     return {
       backgroundColor,
       border,
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/PamIcon.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/PamIcon.tsx
index 48bcecc269806..721ff46292f9c 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/PamIcon.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/PamIcon.tsx
@@ -35,5 +35,5 @@ const PamCircle = styled.div`
   align-content: center;
   justify-content: center;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
+  background: ${props => props.theme.colors.spotBackground[0]};
 `;
diff --git a/web/packages/teleterm/src/ui/components/LinearProgress/LinearProgress.tsx b/web/packages/teleterm/src/ui/components/LinearProgress/LinearProgress.tsx
index f47c6e55510ee..ad495ccd76836 100644
--- a/web/packages/teleterm/src/ui/components/LinearProgress/LinearProgress.tsx
+++ b/web/packages/teleterm/src/ui/components/LinearProgress/LinearProgress.tsx
@@ -45,7 +45,7 @@ const StyledProgress = styled.div`
   height: 1px;
   z-index: 0;
   background-color: ${props =>
-    props.transparentBackground ? 'transparent' : '#222c59'};
+    props.transparentBackground ? 'transparent' : props.theme.colors.surface};
 
   .parent-bar-2 {
     position: absolute;